diff --git a/contactus.css b/contactus.css
new file mode 100644
index 00000000..6533c4b0
--- /dev/null
+++ b/contactus.css
@@ -0,0 +1,131 @@
+#contact-section {
+    background-color: #f9f9f9;
+    padding: 60px 0;
+    font-family: 'Oxygen', sans-serif;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0;
+    padding: 0 10px;
+}
+
+.contact-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.contact-info {
+    flex: 1;
+    max-width: 45%;
+    margin-right: 20px;
+}
+
+.section__title {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: var(--text-dark);
+}
+
+.section__description {
+    font-size: 1rem;
+    color: #555;
+    margin-bottom: 40px;
+    line-height: 1.6;
+}
+
+.contact-info img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.contact-form-wrapper {
+    flex: 1;
+    max-width: 50%;
+    margin-top: 10px;
+}
+
+.contact-form-wrapper h2 {
+    font-size: 2.2rem;
+    margin-bottom: 30px;
+    font-weight: 500;
+    color: #6F57C7;
+    text-shadow: 2px 2px 4px rgba(111, 87, 199, 0.5);
+}
+
+.form-group {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    color: var(--text-dark);
+}
+
+.form-group i {
+    margin-right: 10px;
+    color: #333;
+}
+
+#email,
+.form-group input, 
+.form-group textarea {
+    width: 100%;
+    padding: 10px 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    color: #333;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.form-group input::placeholder, 
+.form-group textarea::placeholder {
+    color: #aaa;
+}
+
+.form-group textarea {
+    resize: vertical;
+    height: 180px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 15px;
+    margin-top: 20px;
+}
+
+#btn-submit, #btn-feedback {
+    color: #ffffff;
+    background-color: #6F57C7; 
+    padding: 10px 20px;
+    width: 120px;
+    border-radius: 5px;
+    text-transform: capitalize;
+    border: none;
+    outline: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
+    margin-top: 15px;
+    box-shadow: 0 4px 8px rgba(111, 87, 199, 0.7);
+}
+
+#btn-submit:hover, #btn-feedback:hover {
+    color: #ffffff;
+    font-weight: 600;
+    background-color: #FF5656;
+    box-shadow: 0 4px 8px rgba(255, 86, 86, 0.7);
+}
diff --git a/index.html b/index.html
index 708fb0c9..b36aa3c1 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="counter.css" class="rel href">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
+  <link rel="stylesheet" href="contactus.css">
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
@@ -1900,56 +1901,47 @@ <h2 class="section__title" align-items="center" data-aos="slide-right">Contact U
 
   </section> -->
 
-    <section>
-      <div class="container" id="cnt-form">
-        <div class="items">
-          <div class="contact" data-aos="slide-right">
-            <div>
-              <h1 class="section__title" style="height: 90px;">Contact Us</h1>
-              <p>Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!</p>
-              <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif">
+  <section id="contact-section">
+    <div class="container" id="cnt-form">
+      <div class="contact-wrapper">
+        <div class="contact-info" data-aos="slide-right">
+          <h1 class="section__title">Contact Us</h1>
+          <p class="section__description">
+            Feel free to drop us a message with any inquiries or feedback. We're here to assist you!
+          </p>
+          <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" alt="Customer Support">
+        </div>
+        <div class="contact-form-wrapper" data-aos="fade-in">
+          <h2>Get in Touch</h2>
+          <form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
+            <div class="form-group">
+              <label for="Name">
+                <i class="fa-solid fa-user"></i>
+                <input type="text" id="Name" placeholder="Name" required>
+              </label>
             </div>
-          </div>
-          <div class="contact-form" data-aos="fade-in">
-            <h1>Contact Us</h1>
-            <form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
-              <div class="one" style="position: relative;">
-                <i class="icon1 fa-solid fa-user"></i>
-                <input type="text" id="Name" placeholder="Name" style="padding-left: 6%;">
-              </div>
-              <div style="position: relative;">
-                <i class="icon2 fa-solid fa-envelope"></i>
-                <input type="email" id="email" placeholder="Email" class="contact-us-email-fix" style="padding-left:6%; width: 50% !important;
-                padding-left: 6% !important;
-                padding-bottom: 10px !important;
-                margin: 20px !important;
-                margin-left: 30px !important;
-                outline: none !important;
-                border: none !important;
-                font-size: 15px !important;
-                background: none !important;
-                border-bottom: 1px solid var(--text-dark) !important;
-                color: var(--text-dark) !important;
-                font-family: 'Oxygen', sans-serif !important; border-radius: 20px;" required>
-              </div>
-              <div style="position: relative;">
-                <i class="icon3 fa-solid fa-message"></i>
-                <textarea id="message" placeholder="Type your message here.." style="padding-left:6%;"
-                  required></textarea><br>
-              </div>
-              <button type="submit" class="btn btn-style" data-aos="fade-in" id="btn-style"
-                style="margin-right: 40px;box-shadow: 2px 2px 8px red;">Send</button>
-              <button onclick="window.location.href='feed.html'" class="btn  btn-style" data-aos="fade-in"
-                id="btn-style" style="box-shadow: 2px 2px 8px red;">Feedback</button>
-            </form>
-          </div>
+            <div class="form-group">
+              <label for="email">
+                <i class="fa-solid fa-envelope"></i>
+                <input type="email" id="email" placeholder="Email" required>
+              </label>
+            </div>
+            <div class="form-group">
+              <label for="message">
+                <i class="fa-solid fa-message"></i>
+                <textarea id="message" placeholder="Type your message here..." required></textarea>
+              </label>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary" id="btn-submit">Send</button>
+              <button type="button" onclick="window.location.href='feed.html'" class="btn btn-secondary" id="btn-feedback">Feedback</button>
+            </div>
+          </form>
         </div>
       </div>
-    </section>
-
-
-
-
+    </div>
+  </section>
+  
     <section class="subscribe" id="Contact">
       <div class="section__container subscribe__container">
         <div class="subscribe__content">