diff --git a/index.html b/index.html
index 71149fb..ae78c14 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,127 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Propacity</title>
-    <link rel="shortcut icon" href="./src/assets/icons/logo.png" type="image/x-icon">
+    <title>Contact Us - Propacity</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+
+      h2 {
+        text-align: center;
+        margin-bottom: 20px;
+      }
+
+      .contact-form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .contact-form label {
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+
+      .contact-form input,
+      .contact-form textarea {
+        padding: 10px;
+        margin-bottom: 20px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        width: 100%;
+      }
+
+      .contact-form button {
+        background-color: #28a745;
+        color: white;
+        padding: 10px;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .contact-form button:hover {
+        background-color: #218838;
+      }
+
+      .error {
+        color: red;
+        margin-bottom: 10px;
+      }
+
+      /* Responsive Styles */
+      @media (max-width: 600px) {
+        .container {
+          padding: 10px;
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <div class="container">
+      <h2>Contact Us</h2>
+      <form class="contact-form" id="contactForm">
+        <label for="name">Name:</label>
+        <input type="text" id="name" placeholder="Your Name" />
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" placeholder="Your Email" />
+
+        <label for="message">Message:</label>
+        <textarea id="message" rows="5" placeholder="Your Message"></textarea>
+
+        <div class="error" id="error"></div>
+
+        <button type="button" onclick="submitForm()">Send Message</button>
+      </form>
+    </div>
+
+    <script>
+      // Form validation and submission logic
+      function submitForm() {
+        const name = document.getElementById('name').value.trim();
+        const email = document.getElementById('email').value.trim();
+        const message = document.getElementById('message').value.trim();
+        const errorDiv = document.getElementById('error');
+
+        // Clear previous error message
+        errorDiv.textContent = '';
+
+        // Basic validation
+        if (!name || !email || !message) {
+          errorDiv.textContent = 'Please fill out all fields.';
+          return;
+        }
+
+        // Simple email format validation
+        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+        if (!emailPattern.test(email)) {
+          errorDiv.textContent = 'Please enter a valid email address.';
+          return;
+        }
+
+        // Success message (in real application, you'd submit the form data to the backend)
+        alert('Message sent successfully!');
+        document.getElementById('contactForm').reset();
+      }
+    </script>
   </body>
 </html>
