diff --git a/index.html b/index.html
index fc49ab1..0227d0a 100644
--- a/index.html
+++ b/index.html
@@ -3,367 +3,110 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Badge Website</title>
+    <title>User Input Form</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f5f5f5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+      }
 
-    <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" />
+      .form-container {
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        width: 100%;
+      }
+
+      h2 {
+        text-align: center;
+        color: #333;
+      }
+
+      .form-group {
+        margin-bottom: 15px;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 5px;
+        font-weight: bold;
+        color: #555;
+      }
+
+      input[type="text"],
+      input[type="email"] {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 16px;
+      }
+
+      input[type="submit"] {
+        width: 100%;
+        padding: 10px;
+        background-color: #28a745;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
+
+      input[type="submit"]:hover {
+        background-color: #218838;
+      }
+
+      .error {
+        color: red;
+        font-size: 14px;
+        margin-bottom: 10px;
+        display: none;
+      }
+    </style>
   </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 class="form-container">
+      <h2>Enter Your Details</h2>
+      <form id="userForm">
+        <div class="form-group">
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" placeholder="Enter your name" required />
         </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 class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" placeholder="Enter your email" required />
         </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 */
-        }
-        .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 */
-        }
-      </style>
+        <div class="error" id="error-message">Please fill in both fields.</div>
+        <input type="submit" value="Submit" />
+      </form>
+    </div>
 
-    <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>
+    <script>
+      // JavaScript for form validation
+      document.getElementById('userForm').addEventListener('submit', function (e) {
+        e.preventDefault(); // Prevent form submission to server
 
-    <!-- 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>
+        const name = document.getElementById('name').value.trim();
+        const email = document.getElementById('email').value.trim();
+        const errorMessage = document.getElementById('error-message');
 
-    <!-- Typing effect for badge title -->
-    <script src="js/typing-badge-title.js"></script>
+        if (!name || !email) {
+          errorMessage.style.display = 'block';
+        } else {
+          errorMessage.style.display = 'none';
+          alert(`Name: ${name}, Email: ${email}`);
+          // Process the form data as needed (e.g., send to backend or display)
+        }
+      });
+    </script>
   </body>
 </html>
