diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css
index dcf6f9f..3605a98 100644
--- a/components/contact/ContactSection.module.css
+++ b/components/contact/ContactSection.module.css
@@ -13,6 +13,21 @@
   min-height: 800px;
 }
 
+.sectionDivider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(232, 185, 98, 0.3) 50%,
+    transparent
+  );
+  z-index: 10;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -62,9 +77,9 @@
   gap: 64px; /* Scaled down gap */
 }
 
-/* Left Section - 52% */
+/* Left Section - 45% */
 .leftSection {
-  flex: 0 0 52%;
+  flex: 0 0 45%;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -106,10 +121,10 @@
 
 .heading {
   font-family: "Cormorant Garamond", serif;
-  font-size: 4.5rem; /* Scaled down for elegance */
+  font-size: 3.2rem;
   font-weight: 400;
   line-height: 1.1;
-  margin-bottom: 24px;
+  margin-bottom: 36px;
 }
 
 .headingWhite {
@@ -124,50 +139,67 @@
 }
 
 .description {
-  font-size: 1.05rem; /* Slightly smaller */
+  font-size: 1rem;
   color: #94a3b8;
-  line-height: 1.7;
-  margin-bottom: 56px;
-  font-weight: 300;
-  max-width: 85%;
+  line-height: 1.6;
+  margin-bottom: 16px;
+  font-weight: 500;
+  max-width: 90%;
 }
 
 /* Feature Cards */
 .featuresHorizontal {
   display: flex;
-  align-items: center;
-  gap: 32px; /* Scaled down */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 32px;
+  width: 100%;
 }
 
 .featureItem {
   display: flex;
   align-items: center;
+  width: 100%;
   gap: 16px;
-  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  background: rgba(10, 14, 24, 0.4);
+  border: 1px solid rgba(232, 185, 98, 0.05);
+  padding: 8px 16px 8px 10px;
+  border-radius: 18px;
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 .iconWrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 56px; /* Increased to match reference */
-  height: 56px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  background: rgba(232, 185, 98, 0.08); /* Clean, slightly warmer flat fill */
-  border: 1px solid rgba(232, 185, 98, 0.05); /* Extremely subtle edge */
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.05),
+    rgba(232, 185, 98, 0.05)
+  );
+  box-shadow: 0 8px 20px rgba(232, 185, 98, 0.12);
+  border: 1px solid rgba(232, 185, 98, 0.08);
   color: #e8b962;
   transition: all 0.3s ease;
   flex-shrink: 0;
 }
 
 .featureItem:hover {
-  transform: translateY(-4px); /* Slight lift */
+  transform: translateX(4px);
+  background: rgba(10, 14, 24, 0.7);
+  border-color: rgba(232, 185, 98, 0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
 .featureItem:hover .iconWrapper {
-  box-shadow: 0 0 16px rgba(232, 185, 98, 0.25); /* Icon glow */
-  border-color: rgba(232, 185, 98, 0.5); /* Subtle border glow */
+  box-shadow: 0 0 16px rgba(232, 185, 98, 0.15);
+  border-color: rgba(232, 185, 98, 0.3);
 }
 
 .featureText {
@@ -177,20 +209,46 @@
 }
 
 .featureTitle {
-  font-size: 15px;
-  font-weight: 600; /* Slightly bolder */
+  font-size: 14px;
+  font-weight: 600;
   color: #ffffff;
 }
 
 .featureDesc {
-  font-size: 12px; /* Smaller */
-  color: rgba(148, 163, 184, 0.7); /* Reduced opacity */
+  font-size: 12px;
+  color: rgba(148, 163, 184, 0.7);
+}
+
+/* Availability Badge */
+.availabilityBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 8px 16px;
+  border-radius: 20px;
+  width: max-content;
+}
+
+.availabilityDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 8px #10b981;
+}
+
+.availabilityText {
+  font-size: 13px;
+  font-weight: 500;
+  color: #cbd5e1;
 }
 
 /* Center Vertical Divider */
 .centerDivider {
   position: absolute;
-  left: 54%; /* Placed between 52% and 48% */
+  left: 48.5%;
   top: 0;
   bottom: 0;
   width: 1px;
@@ -214,11 +272,11 @@
   box-shadow: 0 0 12px 2px rgba(232, 185, 98, 0.8);
 }
 
-/* Right Section - 48% */
+/* Right Section - 50% */
 .rightSection {
-  flex: 0 0 44%; /* 48% minus some gap spacing */
+  flex: 0 0 50%;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
 }
 
@@ -227,9 +285,10 @@
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(232, 185, 98, 0.12);
-  border-radius: 20px; /* Subtle rounded border */
-  padding: 56px 48px; /* Reduced to fix huge card size */
+  border-radius: 20px;
+  padding: 32px 32px 16px 32px;
   width: 100%;
+  max-width: 530px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -287,11 +346,12 @@
 /* Removed the sharp glowing dot from the top right corner as requested */
 
 /* Top Icon */
+
 .heroIconWrapper {
   position: relative;
-  width: 100px;
-  height: 100px;
-  margin: 0 auto 24px auto;
+  width: 76px;
+  height: 76px;
+  margin: 0 auto 12px auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -372,7 +432,7 @@
 .cardHeading {
   font-family: "Cormorant Garamond", serif;
   font-size: 2.2rem; /* Scaled down slightly */
-  font-weight: 400;
+  font-weight: 500;
   text-align: center;
   color: #ffffff;
   margin-bottom: 8px;
@@ -383,7 +443,9 @@
   text-align: center;
   color: #94a3b8;
   font-size: 0.9rem;
-  margin-bottom: 48px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(232, 185, 98, 0.1);
+  margin-bottom: 24px;
   z-index: 1;
 }
 
@@ -391,53 +453,87 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 40px; /* Reduced from massive 56px */
+  gap: 12px;
   z-index: 1;
   position: relative;
 }
 
+.inputRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  width: 100%;
+}
+
 .inputGroup {
   position: relative;
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: flex-start;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(232, 185, 98, 0.08);
+  border-radius: 14px;
+  padding: 4px 12px;
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.inputGroup:focus-within {
+  background: rgba(15, 23, 42, 0.8);
+  border-color: rgba(232, 185, 98, 0.35);
+  box-shadow: 0 8px 24px rgba(232, 185, 98, 0.15);
+}
+
+.inputIconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: rgba(232, 185, 98, 0.08);
+  color: #e8b962;
+  margin-top: 8px;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.inputGroup:focus-within .inputIconWrapper {
+  background: rgba(232, 185, 98, 0.15);
 }
 
 .input {
   background: transparent;
   border: none;
-  border-bottom: 1px solid rgba(232, 185, 98, 0.15); /* Thin gold underline */
-  padding: 8px 32px 8px 0;
+  padding: 14px 12px;
   color: #ffffff;
   font-family: "Inter", sans-serif;
-  font-size: 0.9rem;
+  font-size: 0.88rem;
+  font-weight: 400;
   outline: none;
   width: 100%;
   transition: all 0.3s ease;
 }
 
 .textarea {
-  resize: vertical;
-  min-height: 48px; /* Scaled back */
+  resize: none;
+  min-height: 48px;
 }
 
 .messageGroup {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 
 .input::placeholder {
-  color: rgba(255, 255, 255, 0.6); /* Slightly brighter labels */
-  font-weight: 300;
+  color: rgba(255, 255, 255, 0.4);
+  font-weight: 400;
   transition: color 0.3s ease;
 }
 
 .inputIcon {
-  position: absolute;
-  right: 0; /* Align perfectly on the right */
-  top: 8px;
-  color: rgba(255, 255, 255, 0.3);
+  color: inherit;
   pointer-events: none;
-  transition: color 0.3s ease;
 }
 
 /* Animate underline and soft gold glow on focus */
@@ -464,45 +560,45 @@
 }
 
 .input:focus::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.2);
 }
 
 /* Send Button */
 .submitRow {
-  position: absolute;
-  bottom: -48px; /* Moved down by approx 0.6cm (~24px) */
-  left: 50%;
-  transform: translateX(-50%);
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: stretch;
+  margin-top: 16px;
 }
 
 .submitBtn {
-  width: 36px; /* Reduced by 40% (60px * 0.6) */
-  height: 36px;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at top left,
-    #f2c572 0%,
-    #d4af37 100%
-  ); /* Smooth radial gold */
+  width: 100%;
+  height: 52px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #d9ac53 0%, #b88a30 100%);
   border: none;
-  color: #030508; /* Deep black icon */
+  color: #030508;
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 12px;
+  font-size: 1rem;
+  font-weight: 600;
   cursor: pointer;
   box-shadow:
-    0 0 30px rgba(232, 185, 98, 0.18),
-    /* Reduced by 50% */ 0 0 60px rgba(232, 185, 98, 0.07); /* Reduced by 50% */
+    0 8px 20px rgba(232, 185, 98, 0.15),
+    0 2px 8px rgba(232, 185, 98, 0.1);
   transition:
-    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
     box-shadow 0.3s ease;
 }
 
 .submitBtn:hover {
-  transform: scale(1.08); /* Gentle scale animation */
+  transform: translateY(-2px);
   box-shadow:
-    0 0 40px rgba(232, 185, 98, 0.25),
-    /* Reduced by 50% */ 0 0 80px rgba(232, 185, 98, 0.1); /* Reduced by 50% */
+    0 12px 28px rgba(232, 185, 98, 0.25),
+    0 4px 12px rgba(232, 185, 98, 0.15);
 }
 
 .btnIcon {
@@ -595,3 +691,343 @@
     margin-top: 0;
   }
 }
+
+/* ===== LIGHT MODE OVERRIDES ===== */
+:global(html:not(.dark)) .contactSection {
+  background: linear-gradient(
+    to bottom,
+    #ffffff 0%,
+    #f8faff 15%,
+    #eef2ff 50%,
+    #f8faff 85%,
+    #ffffff 100%
+  );
+  color: #1e293b;
+}
+
+:global(html:not(.dark)) .sectionDivider {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(99, 102, 241, 0.2) 50%,
+    transparent
+  );
+}
+
+/* 2. & 10. Shady and wavy pattern background */
+:global(html:not(.dark)) .radialGradient {
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath fill='%236366f1' fill-opacity='0.05' d='M0,400 C320,500 420,300 720,400 C1020,500 1120,300 1440,400 L1440,0 L0,0 Z'/%3E%3Cpath fill='%238b5cf6' fill-opacity='0.08' d='M0,500 C320,400 420,600 720,500 C1020,400 1120,600 1440,500 L1440,0 L0,0 Z'/%3E%3Cpath fill='%236366f1' fill-opacity='0.04' d='M0,600 C320,700 420,500 720,600 C1020,700 1120,500 1440,600 L1440,0 L0,0 Z'/%3E%3C/svg%3E"),
+    linear-gradient(to top, rgba(248, 250, 255, 0), rgba(248, 250, 255, 1));
+  background-size: cover, auto;
+  background-position: center, top;
+  background-repeat: no-repeat;
+  width: 100vw;
+  height: 100vh;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 0, 0, 0.1) 15%,
+    rgba(0, 0, 0, 0.5) 30%,
+    black 45%,
+    black 55%,
+    rgba(0, 0, 0, 0.5) 70%,
+    rgba(0, 0, 0, 0.1) 85%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 0, 0, 0.1) 15%,
+    rgba(0, 0, 0, 0.5) 30%,
+    black 45%,
+    black 55%,
+    rgba(0, 0, 0, 0.5) 70%,
+    rgba(0, 0, 0, 0.1) 85%,
+    transparent 100%
+  );
+}
+
+:global(html:not(.dark)) .label {
+  color: #6366f1;
+}
+
+:global(html:not(.dark)) .horizontalDivider {
+  background: linear-gradient(90deg, rgba(99, 102, 241, 0.4), transparent);
+}
+
+:global(html:not(.dark)) .horizontalDivider .dot {
+  background: #6366f1;
+  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
+}
+
+/* 1. & 5. Strengthen left hierarchy */
+:global(html:not(.dark)) .heading {
+  font-size: 3.2rem;
+  margin-bottom: 36px;
+  line-height: 1.05;
+}
+
+:global(html:not(.dark)) .headingWhite {
+  color: #111827;
+}
+
+:global(html:not(.dark)) .headingGold {
+  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+:global(html:not(.dark)) .description {
+  color: #4b5563;
+  margin-bottom: 16px;
+}
+
+/* 6. Feature Cards */
+:global(html:not(.dark)) .featureItem {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(99, 102, 241, 0.08);
+  padding: 12px 20px 12px 12px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
+  transition: all 0.3s ease;
+}
+
+:global(html:not(.dark)) .iconWrapper {
+  background: rgba(99, 102, 241, 0.08);
+  border: 1px solid rgba(99, 102, 241, 0.12);
+  color: #6366f1;
+  width: 44px;
+  height: 44px;
+}
+
+:global(html:not(.dark)) .featureItem:hover {
+  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(99, 102, 241, 0.15);
+}
+
+:global(html:not(.dark)) .featureItem:hover .iconWrapper {
+  box-shadow: 0 0 16px rgba(99, 102, 241, 0.15);
+}
+
+:global(html:not(.dark)) .featureTitle {
+  color: #1e293b;
+}
+
+:global(html:not(.dark)) .featureDesc {
+  color: #64748b;
+}
+
+/* 7. Subtle Divider */
+:global(html:not(.dark)) .centerDivider {
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgba(124, 92, 255, 0.2) 50%,
+    transparent
+  );
+}
+
+:global(html:not(.dark)) .centerDot {
+  width: 4px;
+  height: 4px;
+  background: #7c5cff;
+  box-shadow: 0 0 8px 1px rgba(124, 92, 255, 0.6);
+}
+
+/* 3. Form Card */
+:global(html:not(.dark)) .contactCard {
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(124, 92, 255, 0.12);
+  box-shadow:
+    0 30px 80px rgba(80, 90, 200, 0.12),
+    0 10px 30px rgba(124, 92, 255, 0.08);
+}
+
+:global(html:not(.dark)) .contactCard:hover {
+  border-color: rgba(124, 92, 255, 0.2);
+  box-shadow:
+    0 35px 90px rgba(80, 90, 200, 0.15),
+    0 15px 35px rgba(124, 92, 255, 0.1);
+}
+
+:global(html:not(.dark)) .cardGlowTopRight {
+  background: radial-gradient(
+    circle at top right,
+    rgba(124, 92, 255, 0.12) 0%,
+    transparent 60%
+  );
+}
+
+:global(html:not(.dark)) .cardGlowTopRight::after {
+  border-top: 1px solid rgba(124, 92, 255, 0.2);
+  border-right: 1px solid rgba(124, 92, 255, 0.2);
+}
+
+/* 8. Email Icon Area */
+:global(html:not(.dark)) .mailIconCircle {
+  background: linear-gradient(135deg, #7c5cff 0%, #6d28d9 100%);
+  border: none;
+  color: #ffffff;
+  width: 42px;
+  height: 42px;
+  box-shadow:
+    0 4px 16px rgba(124, 92, 255, 0.25),
+    0 0 0 4px rgba(124, 92, 255, 0.06),
+    0 0 0 8px rgba(124, 92, 255, 0.03);
+}
+
+:global(html:not(.dark)) .signalRing {
+  border: 1px solid rgba(124, 92, 255, 0.15);
+}
+
+:global(html:not(.dark)) .floatingDot1,
+:global(html:not(.dark)) .floatingDot2,
+:global(html:not(.dark)) .floatingDot3 {
+  background: #7c5cff;
+  box-shadow: 0 0 6px rgba(124, 92, 255, 0.4);
+}
+
+:global(html:not(.dark)) .availabilityBadge {
+  background: rgba(99, 102, 241, 0.05);
+  border: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+:global(html:not(.dark)) .availabilityText {
+  color: #4b5563;
+}
+
+:global(html:not(.dark)) .cardHeading {
+  color: #111827;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+:global(html:not(.dark)) .cardSubtitle {
+  color: #4b5563;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #eef0f6;
+  margin-bottom: 16px;
+}
+
+:global(html:not(.dark)) .form {
+  gap: 12px;
+}
+
+/* 4. Improve Input Fields */
+:global(html:not(.dark)) .inputGroup {
+  background: #fafbfd;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 14px;
+  padding: 4px 12px;
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
+}
+
+:global(html:not(.dark)) .inputGroup:hover {
+  border-color: rgba(124, 92, 255, 0.4);
+}
+
+:global(html:not(.dark)) .inputGroup:focus-within {
+  background: #ffffff;
+  border-color: #7c5cff;
+  box-shadow:
+    0 0 0 4px rgba(124, 92, 255, 0.12),
+    0 8px 24px rgba(124, 92, 255, 0.08);
+}
+
+:global(html:not(.dark)) .inputIconWrapper {
+  background: rgba(99, 102, 241, 0.06);
+  color: #6366f1;
+}
+
+:global(html:not(.dark)) .inputGroup:focus-within .inputIconWrapper {
+  background: rgba(124, 92, 255, 0.1);
+  color: #7c5cff;
+}
+
+:global(html:not(.dark)) .input {
+  color: #111827;
+  border-bottom: none;
+  padding: 14px 12px;
+  font-size: 0.9rem;
+  font-weight: 400;
+}
+
+:global(html:not(.dark)) .input:hover {
+  border-bottom: none;
+}
+
+:global(html:not(.dark)) .input::placeholder {
+  color: #6b7280;
+  font-weight: 400;
+}
+
+:global(html:not(.dark)) .input:focus::placeholder {
+  color: #9ca3af;
+}
+
+:global(html:not(.dark)) .inputLine {
+  display: none;
+}
+
+:global(html:not(.dark)) .messageGroup {
+  margin-bottom: 0;
+}
+
+:global(html:not(.dark)) .textarea {
+  min-height: 48px;
+}
+
+:global(html:not(.dark)) .submitRow {
+  position: relative;
+  width: 100%;
+  display: flex;
+  margin-top: 16px;
+}
+
+/* 9. Send Button */
+:global(html:not(.dark)) .submitBtn {
+  width: 100%;
+  height: 52px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: #ffffff;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 1.05rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+  box-shadow:
+    0 4px 12px rgba(124, 92, 255, 0.2),
+    0 1px 3px rgba(124, 92, 255, 0.1);
+}
+
+:global(html:not(.dark)) .submitBtn:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 20px rgba(124, 92, 255, 0.3),
+    0 2px 6px rgba(124, 92, 255, 0.15);
+}
+
+:global(html:not(.dark)) .submitBtn:hover .btnIcon {
+  animation: sendIconFly 1s ease-in-out infinite alternate;
+}
+
+@keyframes sendIconFly {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(2px, -2px);
+  }
+}
diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx
index 97a1792..1131053 100644
--- a/components/contact/ContactSection.tsx
+++ b/components/contact/ContactSection.tsx
@@ -37,6 +37,9 @@ export default function ContactSection() {
 
   return (
     <section id="Contact" className={styles.contactSection}>
+      {/* Top Section Divider */}
+      <div className={styles.sectionDivider}></div>
+
       {/* Background Effects */}
       <div className={styles.bgEffects}>
         <div className={styles.radialGradient}></div>
@@ -98,6 +101,13 @@ export default function ContactSection() {
               </div>
             </div>
           </div>
+
+          <div className={styles.availabilityBadge}>
+            <div className={styles.availabilityDot}></div>
+            <span className={styles.availabilityText}>
+              Usually replies within 12 hours
+            </span>
+          </div>
         </div>
 
         {/* Center Vertical Divider */}
@@ -105,7 +115,7 @@ export default function ContactSection() {
           <div className={styles.centerDot}></div>
         </div>
 
-        {/* Right Section - 48% */}
+        {/* Right Section - 50% */}
         <div className={styles.rightSection}>
           <div className={styles.contactCard}>
             {/* Corner Glow */}
@@ -140,54 +150,65 @@ export default function ContactSection() {
             </p>
 
             <form className={styles.form} onSubmit={handleSubmit}>
-              <div className={styles.inputGroup}>
-                <label htmlFor="name" className="sr-only">
-                  Your name
-                </label>
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  className={styles.input}
-                  placeholder="Your name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  required
-                />
-                <User
-                  className={styles.inputIcon}
-                  size={16}
-                  strokeWidth={1.5}
-                />
-                <div className={styles.inputLine}></div>
-              </div>
+              <div className={styles.inputRow}>
+                <div className={styles.inputGroup}>
+                  <label htmlFor="name" className="sr-only">
+                    Your name
+                  </label>
+                  <div className={styles.inputIconWrapper}>
+                    <User
+                      className={styles.inputIcon}
+                      size={16}
+                      strokeWidth={1.5}
+                    />
+                  </div>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    className={styles.input}
+                    placeholder="Your name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
 
-              <div className={styles.inputGroup}>
-                <label htmlFor="email" className="sr-only">
-                  Your email
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  className={styles.input}
-                  placeholder="Your email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  required
-                />
-                <Mail
-                  className={styles.inputIcon}
-                  size={16}
-                  strokeWidth={1.5}
-                />
-                <div className={styles.inputLine}></div>
+                <div className={styles.inputGroup}>
+                  <label htmlFor="email" className="sr-only">
+                    Your email
+                  </label>
+                  <div className={styles.inputIconWrapper}>
+                    <Mail
+                      className={styles.inputIcon}
+                      size={16}
+                      strokeWidth={1.5}
+                    />
+                  </div>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    className={styles.input}
+                    placeholder="Your email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
               </div>
 
               <div className={styles.inputGroup}>
                 <label htmlFor="subject" className="sr-only">
                   Subject
                 </label>
+                <div className={styles.inputIconWrapper}>
+                  <Tag
+                    className={styles.inputIcon}
+                    size={16}
+                    strokeWidth={1.5}
+                  />
+                </div>
                 <input
                   type="text"
                   id="subject"
@@ -198,14 +219,19 @@ export default function ContactSection() {
                   onChange={handleChange}
                   required
                 />
-                <Tag className={styles.inputIcon} size={16} strokeWidth={1.5} />
-                <div className={styles.inputLine}></div>
               </div>
 
               <div className={`${styles.inputGroup} ${styles.messageGroup}`}>
                 <label htmlFor="message" className="sr-only">
                   Your message
                 </label>
+                <div className={styles.inputIconWrapper}>
+                  <PenLine
+                    className={styles.inputIcon}
+                    size={16}
+                    strokeWidth={1.5}
+                  />
+                </div>
                 <textarea
                   id="message"
                   name="message"
@@ -215,20 +241,11 @@ export default function ContactSection() {
                   onChange={handleChange}
                   required
                 ></textarea>
-                <PenLine
-                  className={styles.inputIcon}
-                  size={16}
-                  strokeWidth={1.5}
-                />
-                <div className={styles.inputLine}></div>
               </div>
 
               <div className={styles.submitRow}>
-                <button
-                  type="submit"
-                  className={styles.submitBtn}
-                  aria-label="Send Message"
-                >
+                <button type="submit" className={styles.submitBtn}>
+                  <span className={styles.submitText}>Send Message</span>
                   <Send className={styles.btnIcon} size={16} strokeWidth={2} />
                 </button>
               </div>
diff --git a/components/footer.tsx b/components/footer.tsx
index 4e42d56..78c1a2c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -191,18 +191,21 @@ export default function Footer() {
               href="/"
               className="group inline-flex items-center gap-3.5 w-fit"
             >
-              <div className="relative flex h-[54px] w-[54px] items-center justify-center overflow-hidden rounded-[14px] bg-white dark:bg-white/[0.02] p-1.5 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] ring-1 ring-slate-200 dark:ring-white/[0.08] transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:bg-blue-50 dark:group-hover:bg-blue-500/10 group-hover:ring-blue-200 dark:group-hover:ring-blue-500/30 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]">
+              <div className="relative flex h-[54px] w-[54px] items-center justify-center overflow-hidden rounded-[14px] transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-[1.02]">
                 <Image
                   src="/hl-logo.png"
                   alt="Hyper Learning Logo"
                   width={46}
                   height={46}
-                  className="object-contain"
+                  className="object-contain dark:brightness-[1.8] dark:drop-shadow-[0_0_8px_rgba(255,255,255,0.3)]"
                 />
               </div>
               <div>
-                <h2 className="text-[23px] font-bold tracking-tight text-slate-900 dark:text-transparent dark:bg-gradient-to-r dark:from-white dark:to-white/70 dark:bg-clip-text transition-all duration-300 group-hover:text-blue-600 dark:group-hover:to-white">
-                  Hyper Learning
+                <h2 className="text-[23px] font-bold tracking-tight text-slate-900 dark:text-transparent dark:bg-gradient-to-r dark:from-white dark:to-white/70 dark:bg-clip-text transition-all duration-300">
+                  <span className="transition-colors duration-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                    Hyper
+                  </span>{" "}
+                  Learning
                 </h2>
                 <p className="text-[10.5px] font-semibold tracking-[0.2em] uppercase text-blue-500 dark:text-indigo-300 mt-0.5">
                   AI-Powered Learning
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 278160b..01c41bf 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -133,7 +133,7 @@ export default function Navbar() {
             href="/"
             className="group flex items-center gap-3.5 transition-opacity duration-300 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:focus-visible:ring-offset-[#0B1528] rounded-lg"
           >
-            <div className="relative h-10 w-10 md:h-11 md:w-11 flex-shrink-0 transition-transform duration-300 group-hover:scale-[1.02] bg-white/95 rounded-[12px] p-1.5 shadow-[0_4px_12px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.8)] border border-black/5 dark:bg-transparent dark:p-0 dark:shadow-none dark:border-transparent flex items-center justify-center">
+            <div className="relative h-10 w-10 md:h-11 md:w-11 flex-shrink-0 transition-transform duration-300 group-hover:scale-[1.02] flex items-center justify-center">
               <Image
                 src="/hl-logo.png"
                 alt="Hyper Learning Official Logo"
@@ -169,16 +169,12 @@ export default function Navbar() {
                   href={link.href}
                   onClick={(e) => handleNavClick(e, link.href)}
                   className={`group relative px-4 py-2 text-[14.5px] tracking-[0.01em] transition-colors duration-200 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 ${
-                    link.label === "Contact"
-                      ? "bg-white/10 hover:bg-white/15 border border-white/10 shadow-sm"
-                      : ""
-                  } ${
                     isActive
                       ? "text-white font-semibold"
                       : "text-slate-300 font-medium hover:text-white"
                   }`}
                 >
-                  {isActive && link.label !== "Contact" && (
+                  {isActive && (
                     <motion.div
                       layoutId="activeNavIndicator"
                       className="absolute inset-0 rounded-full bg-white/[0.08] border border-white/[0.08] shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.2)] backdrop-blur-md"
@@ -192,7 +188,7 @@ export default function Navbar() {
                   <span className="relative z-10">{link.label}</span>
 
                   {/* Hover Underline */}
-                  {!isActive && link.label !== "Contact" && (
+                  {!isActive && (
                     <span className="absolute bottom-1.5 left-1/2 h-[1.5px] w-[calc(100%-1.5rem)] -translate-x-1/2 origin-center scale-x-0 bg-gradient-to-r from-transparent via-blue-600/80 to-transparent transition-transform duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-x-100 dark:via-white/70" />
                   )}
                 </Link>
diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx
index 5fbbc26..6b107be 100644
--- a/features/landing/hero.tsx
+++ b/features/landing/hero.tsx
@@ -81,23 +81,29 @@ export default function Hero() {
   return (
     <section
       id="Home"
-      className="relative overflow-hidden scroll-mt-24 border-b border-border bg-gradient-to-b from-[#FCFCFE] via-[#F8FAFC] to-white dark:bg-none dark:bg-transparent"
+      className="relative overflow-hidden scroll-mt-24 border-b border-border dark:bg-transparent"
     >
       {/* Background Layers */}
-      <div className="absolute inset-0 -z-10 overflow-hidden">
-        {/* Restored Wavy Bluish Effect (40% less contrast) */}
-        <div className="absolute inset-0 opacity-60 dark:hidden pointer-events-none">
-          <div className="absolute top-[-20%] left-[-10%] h-[800px] w-[1200px] -rotate-12 rounded-full bg-gradient-to-br from-blue-400/[0.12] via-indigo-300/[0.08] to-transparent blur-[80px]" />
-          <div className="absolute top-[20%] right-[-10%] h-[700px] w-[1000px] rotate-12 rounded-full bg-gradient-to-bl from-cyan-300/[0.12] via-blue-300/[0.08] to-transparent blur-[80px]" />
-          <div className="absolute bottom-[-10%] left-[15%] h-[600px] w-[900px] -rotate-6 rounded-full bg-gradient-to-tr from-indigo-300/[0.1] via-blue-200/[0.05] to-transparent blur-[80px]" />
+      <div className="absolute inset-0 z-0 overflow-hidden">
+        {/* Light Mode: Base gradient */}
+        <div className="absolute inset-0 bg-gradient-to-b from-[#FCFCFE] via-[#F8FAFC] to-white dark:hidden" />
+
+        {/* Light Mode: Refined Gradient Blobs */}
+        <div className="absolute inset-0 dark:hidden pointer-events-none">
+          <div className="absolute top-[-15%] left-[-5%] h-[700px] w-[900px] -rotate-12 rounded-full bg-gradient-to-br from-blue-500/[0.25] via-indigo-400/[0.18] to-transparent blur-[90px]" />
+          <div className="absolute top-[15%] right-[-8%] h-[600px] w-[800px] rotate-12 rounded-full bg-gradient-to-bl from-violet-400/[0.22] via-blue-300/[0.15] to-transparent blur-[90px]" />
+          <div className="absolute bottom-[-5%] left-[20%] h-[500px] w-[700px] -rotate-6 rounded-full bg-gradient-to-tr from-indigo-300/[0.22] via-cyan-300/[0.12] to-transparent blur-[90px]" />
         </div>
 
-        {/* Existing subtle glows */}
-        <div className="absolute left-[-10%] top-[-10%] h-[600px] w-[600px] rounded-full bg-blue-500/[0.02] blur-[160px] dark:bg-blue-500/10" />
-        <div className="absolute right-[-5%] top-[15%] h-[500px] w-[500px] rounded-full bg-purple-500/[0.02] blur-[160px] dark:bg-indigo-500/10" />
+        {/* Light Mode: Central Radial Glow */}
+        <div className="absolute top-[25%] left-1/2 -translate-x-1/2 h-[600px] w-[90%] rounded-full bg-gradient-to-b from-blue-200/70 via-indigo-100/50 to-transparent blur-[100px] dark:hidden pointer-events-none" />
+
+        {/* Dark mode glows */}
+        <div className="absolute left-[-10%] top-[-10%] h-[600px] w-[600px] rounded-full bg-transparent blur-[160px] dark:bg-blue-500/10" />
+        <div className="absolute right-[-5%] top-[15%] h-[500px] w-[500px] rounded-full bg-transparent blur-[160px] dark:bg-indigo-500/10" />
       </div>
 
-      <div className="mx-auto max-w-7xl px-6 pb-16 pt-12 md:pb-24 md:pt-16 lg:px-8 lg:pb-32 lg:pt-20">
+      <div className="relative z-10 mx-auto max-w-7xl px-6 pb-16 pt-12 md:pb-24 md:pt-16 lg:px-8 lg:pb-32 lg:pt-20">
         <div className="grid items-center gap-16 lg:grid-cols-[1.3fr_0.7fr] lg:gap-8">
           {/* Left Content */}
           <motion.div
diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx
index a64f6af..0dd66d6 100644
--- a/features/landing/universities.tsx
+++ b/features/landing/universities.tsx
@@ -55,7 +55,7 @@ export default function Universities() {
     <section className="relative flex min-h-screen flex-col justify-center overflow-hidden border-none bg-background pt-12 pb-24 md:pt-16 md:pb-32">
       {/* Background Layers */}
       <div className="absolute inset-0 -z-10 overflow-hidden">
-        {/* Light Mode Wavy Refraction Background (Inverted) */}
+        {/* Light Mode Wavy Refraction Background - Centered with edge fade */}
         <div
           className="absolute inset-0 dark:hidden"
           style={{
@@ -66,6 +66,10 @@ export default function Universities() {
             backgroundSize: "cover, auto",
             backgroundPosition: "center, top",
             backgroundRepeat: "no-repeat, no-repeat",
+            WebkitMaskImage:
+              "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.8) 35%, black 45%, black 55%, rgba(0,0,0,0.8) 65%, rgba(0,0,0,0.3) 85%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,0.8) 35%, black 45%, black 55%, rgba(0,0,0,0.8) 65%, rgba(0,0,0,0.3) 85%, transparent 100%)",
           }}
         />