diff --git a/index.html b/index.html
index fc49ab1..8e3ec11 100644
--- a/index.html
+++ b/index.html
@@ -1,369 +1,209 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<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"
+        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"
+        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"
+        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"
+        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>
+</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 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>
+                    <li><a href="./login.html">Login</a></li>
+                </ul>
+            </nav>
         </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="search-container">
+        <input type="text" id="search-input" placeholder="Search for a badge..." />
+        <button id="search-btn"><i class="fas fa-search"></i></button>
+    </div>
 
     <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 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 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>
+
+        <!-- Additional badge containers can be added here -->
+        <!-- ... -->
+        
         <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 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>
-      </div>
-  
-      <style>
+    </div>
+
+    <style>
         .badge-grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          grid-template-rows: repeat(2, auto);
-          gap: 10px; /* Reduced gap between cards */
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(2, auto);
+            gap: 10px; /* Reduced gap between cards */
         }
         .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 */
+            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 */
         }
-      </style>
+    </style>
+
+    <!-- FAQ Section -->
+    <section id="faq">
+        <h2>Frequently Asked Questions (FAQ)</h2>
+        <div class="faq-item">
+            <h3>What are badges?</h3>
+            <p>Badges are digital representations of achievements that can be earned for completing specific tasks or challenges.</p>
+        </div>
+        <div class="faq-item">
+            <h3>How do I earn a badge?</h3>
+            <p>You can earn badges by participating in events, completing courses, or achieving certain milestones.</p>
+        </div>
+        <div class="faq-item">
+            <h3>How can I share my badge?</h3>
+            <p>After earning a badge, you can share it directly to your social media accounts using the provided share buttons.</p>
+        </div>
+        <div class="faq-item">
+            <h3>Can I download my badge?</h3>
+            <p>Yes, you can download your badge by clicking the "Download Badge" button next to each badge.</p>
+        </div>
+    </section>
 
     <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 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>
-      </div>
     </footer>
 
     <!-- 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>
-
-    <!-- Typing effect for badge title -->
-    <script src="js/typing-badge-title.js"></script>
-  </body>
+    <script src="script.js"></script>
+</body>
 </html>
