diff --git a/index.html b/index.html
index fc49ab1..a4b494c 100644
--- a/index.html
+++ b/index.html
@@ -1,369 +1,229 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Badge Website</title>
-
-    <link rel="stylesheet" href="styles.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./Favicon/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="./Favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="./Favicon/favicon-16x16.png"
-    />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="icon" href="Favicon/favicon.ico?v=2" />
-  </head>
-  <body>
-    <!-- Header Section -->
-    <header>
-      <div class="header-container">
-        <div class="logo">
-          <img src="Favicon/favicon-32x32.png" alt="Logo" />
-          <a href="/"><h1>Badge Website</h1></a>
-        </div>
-        <nav class="nav-links">
-          <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="./pages/about.html">About</a></li>
-            <li><a href="./pages/contact.html">Contact</a></li>
-            <li><a href="./pages/badges.html">Badges</a></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-
-    <div class="badge-grid">
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Beginner AI Learner</h2>
-              <p>Awarded to: <strong>hello.rajat.rajput@gmail.com</strong></p>
-              <p>
-                Issued on: <strong>Jul 28, 2024</strong> at
-                <strong>1:11 AM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Beginner%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-  
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-  
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Advance AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Dec 17, 2024</strong> at
-                <strong>8:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
-                target="_blank"
-                class="share-button twitter"
-              >
-                <i class="fa-brands fa-square-x-twitter"></i>
-              </a>
-              <a
-                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Advance%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:"
-                target="_blank"
-                class="share-button linkedin"
-              >
-                <i class="fab fa-linkedin"></i>
-              </a>
-              <a
-                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
-                target="_blank"
-                class="share-button facebook"
-              >
-                <i class="fab fa-facebook-f"></i>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-  
-      <style>
-        .badge-grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          grid-template-rows: repeat(2, auto);
-          gap: 10px; /* Reduced gap between cards */
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Badges Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+        /* Navbar styles */
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: #333;
+            padding: 10px 20px;
+        }
+        .navbar h1 {
+            color: white;
+            margin: 0;
+        }
+        .navbar-links {
+            display: flex;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .navbar-links li {
+            margin-left: 20px;
+        }
+        .navbar-links a {
+            color: white;
+            text-decoration: none;
+            padding: 8px 15px;
+            border-radius: 5px;
+            transition: background 0.3s;
+        }
+        .navbar-links a:hover {
+            background-color: #555;
+        }
+        /* Header styles */
+        .header {
+            background-color: #f8f8f8;
+            text-align: center;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .header h2 {
+            margin: 0;
+        }
+        .header p {
+            margin: 10px 0 0 0;
+            color: #666;
+        }
+        /* Hamburger menu styles */
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            cursor: pointer;
+        }
+        .bar {
+            height: 3px;
+            width: 25px;
+            background-color: white;
+            margin: 4px 0;
+            transition: 0.4s;
+        }
+        /* Badge styles */
+        .badges {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 20px;
         }
-        .badge-container {
-          background: linear-gradient(
-            35deg,
-            rgba(10, 151, 207, 0.9) 50%,
-            rgba(15, 61, 214, 0.9) 50%
-          );
-          padding: 5px;
-          border-radius: 8px;
-          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-          transform: scale(0.7); /* Further reduce the size of the card */
+        .badge {
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            padding: 15px;
+            margin: 10px;
+            width: 200px;
+            text-align: center;
+            position: relative;
         }
-      </style>
+        .badge h3 {
+            margin: 0 0 10px 0;
+        }
+        /* Styled share button */
+        .badge button {
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 20px; /* Rounded button */
+            cursor: pointer;
+            transition: background 0.3s, transform 0.3s;
+        }
+        .badge button:hover {
+            background-color: #0056b3;
+            transform: scale(1.05); /* Slightly enlarge on hover */
+        }
+        /* Search bar styles */
+        .search-container {
+            padding: 20px;
+            text-align: center;
+        }
+        .search-container input {
+            padding: 10px;
+            width: 200px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        /* Responsive styles */
+        @media (max-width: 768px) {
+            .navbar-links {
+                display: none; /* Hide links initially */
+                flex-direction: column;
+                position: absolute;
+                background-color: #333;
+                top: 50px;
+                right: 0;
+                width: 200px;
+            }
+            .navbar-links.active {
+                display: flex; /* Show links when active */
+            }
+            .hamburger {
+                display: flex; /* Show hamburger on small screens */
+            }
+            .badges {
+                flex-direction: column; /* Stack badges vertically on small screens */
+                align-items: center;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div class="navbar">
+    <h1>Your Brand</h1>
+    <div class="hamburger" id="hamburger">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+    </div>
+    <ul class="navbar-links" id="navbarLinks">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Badges</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</div>
+
+<!-- Header Section -->
+<div class="header">
+    <h2>Badges Collection</h2>
+    <p>Explore and share your achievements with our exclusive badges!</p>
+</div>
+
+<div class="search-container">
+    <input type="text" id="searchInput" placeholder="Search badges..." onkeyup="searchBadges()">
+</div>
+
+<div class="badges" id="badgesContainer">
+    <div class="badge">
+        <h3>Badge 1</h3>
+        <p>Description for Badge 1.</p>
+        <button onclick="shareBadge('Badge 1')">Share Link</button>
+    </div>
+    <div class="badge">
+        <h3>Badge 2</h3>
+        <p>Description for Badge 2.</p>
+        <button onclick="shareBadge('Badge 2')">Share Link</button>
+    </div>
+    <div class="badge">
+        <h3>Badge 3</h3>
+        <p>Description for Badge 3.</p>
+        <button onclick="shareBadge('Badge 3')">Share Link</button>
+    </div>
+    <div class="badge">
+        <h3>Badge 4</h3>
+        <p>Description for Badge 4.</p>
+        <button onclick="shareBadge('Badge 4')">Share Link</button>
+    </div>
+</div>
+
+<footer>
+    <p>&copy; 2024 Your Company. All rights reserved.</p>
+</footer>
+
+<script>
+    const navbarLinks = document.getElementById('navbarLinks');
+    const hamburger = document.getElementById('hamburger');
+
+    // Toggle Navbar
+    hamburger.addEventListener('click', () => {
+        navbarLinks.classList.toggle('active');
+    });
+
+    // Share badge function
+    function shareBadge(badgeName) {
+        const badgeLink = `https://example.com/badges/${badgeName.toLowerCase().replace(/\s+/g, '-')}`;
+        navigator.clipboard.writeText(badgeLink).then(() => {
+            alert(`Link for ${badgeName} copied to clipboard!`);
+        }).catch(err => {
+            console.error('Could not copy link: ', err);
+        });
+    }
 
-    <footer>
-      <div class="footer-container">
-        <div class="footer-text" style="text-align: center">
-          <p>
-            Follow us on
-            <a href="https://github.com/rajatuiwebdev/badge-website">Github</a>
-            |
-            <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a>
-          </p>
-          <p>&copy; 2024 Rajat Rajput | All rights reserved</p>
-        </div>
-      </div>
-    </footer>
+    // Search badges function
+    function searchBadges() {
+        const input = document.getElementById('searchInput').value.toLowerCase();
+        const badges = document.querySelectorAll('.badge');
 
-    <!-- QRious Library -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
-    <!-- Typing effect script -->
-    <script src="js/typing.js"></script>
+        badges.forEach(badge => {
+            const badgeName = badge.querySelector('h3').textContent.toLowerCase();
+            if (badgeName.includes(input)) {
+                badge.style.display = 'block'; // Show badge
+            } else {
+                badge.style.display = 'none'; // Hide badge
+            }
+        });
+    }
+</script>
 
-    <!-- Typing effect for badge title -->
-    <script src="js/typing-badge-title.js"></script>
-  </body>
+</body>
 </html>
