diff --git a/app/(public)/page.tsx b/app/(public)/page.tsx
index 9a59204..d23b10d 100644
--- a/app/(public)/page.tsx
+++ b/app/(public)/page.tsx
@@ -1,5 +1,6 @@
 import Hero from "@/features/landing/hero";
 import Universities from "@/features/landing/universities";
+import ContactSection from "@/components/contact/ContactSection";
 import { Suspense } from "react";
 
 export default function HomePage() {
@@ -9,6 +10,7 @@ export default function HomePage() {
       <Suspense fallback={<div className="h-96" />}>
         <Universities />
       </Suspense>
+      <ContactSection />
     </>
   );
 }
diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css
index 1184379..dcf6f9f 100644
--- a/components/contact/ContactSection.module.css
+++ b/components/contact/ContactSection.module.css
@@ -545,24 +545,53 @@
 
 @media (max-width: 768px) {
   .heading {
-    font-size: 4rem;
+    font-size: 3.2rem;
   }
   .contactSection {
-    padding: 100px 24px;
+    padding: 64px 20px;
+  }
+  .description {
+    font-size: 0.95rem;
+    margin-bottom: 32px;
+  }
+  .horizontalDivider {
+    display: none;
   }
   .featuresHorizontal {
     flex-direction: column;
-    align-items: center;
-    gap: 24px;
+    align-items: flex-start;
+    width: max-content;
+    margin: 0 auto;
+    gap: 20px;
   }
   .contactCard {
-    padding: 48px 32px;
+    padding: 28px 20px;
+    border-radius: 16px;
+  }
+  .cardHeading {
+    font-size: 1.6rem;
+  }
+  .cardSubtitle {
+    margin-bottom: 24px;
+    font-size: 0.85rem;
+  }
+  .form {
+    gap: 20px;
+  }
+  .input {
+    padding: 6px 28px 6px 0;
+    font-size: 0.85rem;
+  }
+  .textarea {
+    min-height: 36px;
   }
   .submitRow {
-    position: relative;
-    bottom: 0;
+    position: absolute;
+    bottom: -20px;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
-    justify-content: flex-end;
-    margin-top: 32px;
+    justify-content: center;
+    margin-top: 0;
   }
 }
diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx
index 31a5104..97a1792 100644
--- a/components/contact/ContactSection.tsx
+++ b/components/contact/ContactSection.tsx
@@ -36,7 +36,7 @@ export default function ContactSection() {
   };
 
   return (
-    <section className={styles.contactSection}>
+    <section id="Contact" className={styles.contactSection}>
       {/* Background Effects */}
       <div className={styles.bgEffects}>
         <div className={styles.radialGradient}></div>
diff --git a/components/footer.tsx b/components/footer.tsx
index b09d241..4e42d56 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -253,7 +253,7 @@ export default function Footer() {
           </div>
 
           {/* Navigation Container */}
-          <div className="flex flex-col gap-10 sm:flex-row sm:gap-8 xl:gap-10 shrink-0">
+          <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:flex sm:flex-row sm:gap-8 xl:gap-10 shrink-0 w-full xl:w-auto">
             {/* Platform */}
             <div className="flex flex-col sm:w-[130px] xl:border-l border-slate-200 dark:border-white/[0.03] xl:pl-8">
               <h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
@@ -311,12 +311,12 @@ export default function Footer() {
             </div>
 
             {/* Company */}
-            <div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8">
+            <div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8 col-span-2 sm:col-span-1">
               <h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
                 Company
               </h3>
               <div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
-              <ul className="space-y-3.5">
+              <ul className="grid grid-cols-2 gap-x-4 gap-y-3.5 sm:flex sm:flex-col sm:gap-y-0 sm:space-y-3.5">
                 {[
                   { name: "About Us", href: "/about" },
                   { name: "Contact", href: "/contact" },
@@ -340,8 +340,8 @@ export default function Footer() {
           </div>
 
           {/* Feature Cards */}
-          <div className="w-full xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 h-full">
+          <div className="w-full mt-4 xl:mt-0 xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
+            <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4 h-full">
               {[
                 {
                   title: "AI-Powered",
@@ -393,7 +393,7 @@ export default function Footer() {
         </div>
 
         {/* Bottom Section */}
-        <div className="mt-10 flex h-auto flex-col items-center justify-between gap-5 rounded-[20px] border border-[#C2D4EA] dark:border-white/[0.05] bg-[#EDF2F8] dark:bg-white/[0.01] backdrop-blur-lg px-6 py-4 shadow-sm dark:shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.04)] lg:h-[48px] lg:flex-row lg:rounded-full lg:px-8 lg:py-0 transition-all hover:border-slate-300 dark:hover:border-white/[0.08]">
+        <div className="mt-10 flex h-auto flex-col items-center justify-between gap-5 rounded-[20px] border border-[#C2D4EA] dark:border-white/[0.05] bg-[#EDF2F8] dark:bg-white/[0.01] backdrop-blur-lg px-4 py-4 md:px-6 shadow-sm dark:shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.04)] lg:h-[48px] lg:flex-row lg:rounded-full lg:px-8 lg:py-0 transition-all hover:border-slate-300 dark:hover:border-white/[0.08]">
           {/* Left: Copyright */}
           <p className="text-[11.5px] font-medium text-slate-500 dark:text-slate-400/80 shrink-0">
             © {new Date().getFullYear()} Hyper Learning. All rights reserved.
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 53438af..278160b 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -18,12 +18,12 @@ const navLinks = [
     href: "/#Universities",
   },
   {
-    label: "About",
-    href: "/about",
+    label: "Contact",
+    href: "/#Contact",
   },
   {
-    label: "Contact",
-    href: "/contact",
+    label: "About",
+    href: "/about",
   },
 ];
 
diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx
index 5769593..5fbbc26 100644
--- a/features/landing/hero.tsx
+++ b/features/landing/hero.tsx
@@ -97,7 +97,7 @@ export default function Hero() {
         <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" />
       </div>
 
-      <div className="mx-auto max-w-7xl px-6 pb-24 pt-16 lg:px-8 lg:pb-32 lg:pt-20">
+      <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="grid items-center gap-16 lg:grid-cols-[1.3fr_0.7fr] lg:gap-8">
           {/* Left Content */}
           <motion.div
@@ -119,7 +119,7 @@ export default function Hero() {
             {/* Headline */}
             <motion.h1
               variants={itemVariants}
-              className="text-[54px] font-[800] leading-[1.1] tracking-[-0.03em] lg:text-[64px]"
+              className="text-[42px] md:text-[54px] font-[800] leading-[1.1] tracking-[-0.03em] lg:text-[64px]"
             >
               <span className="text-slate-900 dark:text-[#f1f5f9]">Master</span>
               <br />
@@ -269,9 +269,9 @@ export default function Hero() {
           >
             {/* Glowing aura for Light Mode behind AI card */}
             <div className="absolute inset-0 -z-10 rounded-[24px] bg-indigo-500/20 blur-[60px] dark:bg-transparent" />
-            <div className="relative w-full max-w-[440px] origin-top scale-[1.05] overflow-hidden rounded-[24px] border border-indigo-100 dark:border-white/[0.06] bg-gradient-to-br from-indigo-100 via-white/80 to-purple-100 dark:bg-none dark:bg-white/5 p-6 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl font-sans lg:origin-left lg:scale-[1.08]">
+            <div className="relative w-full max-w-[440px] origin-top scale-100 md:scale-[1.05] overflow-hidden rounded-[20px] md:rounded-[24px] border border-indigo-100 dark:border-white/[0.06] bg-gradient-to-br from-indigo-100 via-white/80 to-purple-100 dark:bg-none dark:bg-white/5 p-4 md:p-6 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl font-sans lg:origin-left lg:scale-[1.08]">
               {/* Chat Header */}
-              <div className="-mt-6 -mx-6 mb-5 flex items-center gap-3 border-b border-indigo-100 dark:border-white/[0.06] bg-[#F4F7FF] dark:bg-white/[0.02] px-6 pt-6 pb-4 backdrop-blur-md">
+              <div className="-mt-4 -mx-4 md:-mt-6 md:-mx-6 mb-4 md:mb-5 flex items-center gap-3 border-b border-indigo-100 dark:border-white/[0.06] bg-[#F4F7FF] dark:bg-white/[0.02] px-4 pt-4 pb-3 md:px-6 md:pt-6 md:pb-4 backdrop-blur-md">
                 <div className="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-r from-[#5964F4] to-[#7D52F5] shadow-[0_0_12px_rgba(99,102,241,0.4)]">
                   <BrainCircuit
                     className="h-[18px] w-[18px] text-white"
@@ -292,10 +292,10 @@ export default function Hero() {
                 </div>
               </div>
 
-              <div className="space-y-4">
+              <div className="space-y-3 md:space-y-4">
                 {/* User Message */}
                 <div className="flex justify-end">
-                  <div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5B6EFF] to-[#8B5CF6] px-4 py-2.5 text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(91,110,255,0.3)]">
+                  <div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5B6EFF] to-[#8B5CF6] px-3 py-2 md:px-4 md:py-2.5 text-[12px] md:text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(91,110,255,0.3)]">
                     Explain Big O notation with an example.
                   </div>
                 </div>
@@ -314,7 +314,7 @@ export default function Hero() {
                     </span>
                   </div>
 
-                  <div className="w-full rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white/80 dark:bg-white/[0.09] px-5 py-4">
+                  <div className="w-full rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white/80 dark:bg-white/[0.09] px-4 py-3 md:px-5 md:py-4">
                     <div className="space-y-2">
                       <p className="text-[13px] leading-[1.7] text-slate-600 dark:text-[#c8ccd8]">
                         Big O notation represents the maximum growth rate of an
@@ -335,7 +335,7 @@ export default function Hero() {
 
                 {/* Related Questions */}
                 <div className="flex flex-col overflow-hidden rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white dark:bg-white/[0.05]">
-                  <div className="flex items-center gap-2 px-5 pb-1.5 pt-3">
+                  <div className="flex items-center gap-2 px-4 pb-1 pt-2.5 md:px-5 md:pb-1.5 md:pt-3">
                     <div className="h-1.5 w-1.5 rounded-full bg-indigo-400 shadow-[0_0_4px_rgba(129,140,248,0.5)]" />
                     <p className="text-[10px] font-bold uppercase tracking-widest text-[#818cf8]">
                       Related Previous Year Questions
@@ -343,7 +343,7 @@ export default function Hero() {
                   </div>
 
                   <div className="flex flex-col divide-y divide-indigo-50 dark:divide-white/[0.02]">
-                    <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
+                    <div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
                       <div className="flex items-center gap-3">
                         <CheckCircle2
                           className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
@@ -356,7 +356,7 @@ export default function Hero() {
                       <ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
                     </div>
 
-                    <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
+                    <div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
                       <div className="flex items-center gap-3">
                         <CheckCircle2
                           className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
@@ -369,7 +369,7 @@ export default function Hero() {
                       <ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
                     </div>
 
-                    <div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
+                    <div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
                       <div className="flex items-center gap-3">
                         <CheckCircle2
                           className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
@@ -384,7 +384,7 @@ export default function Hero() {
                   </div>
                 </div>
 
-                <div className="group mt-3 flex items-center justify-between rounded-[16px] border border-indigo-100 dark:border-transparent bg-white/90 dark:bg-white/[0.04] px-4 py-3.5 shadow-sm dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-300/50 dark:hover:border-indigo-500/50 hover:shadow-[0_4px_20px_-10px_rgba(99,102,241,0.2)] dark:hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
+                <div className="group mt-2 md:mt-3 flex items-center justify-between rounded-[16px] border border-indigo-100 dark:border-transparent bg-white/90 dark:bg-white/[0.04] px-3.5 py-2.5 md:px-4 md:py-3.5 shadow-sm dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-300/50 dark:hover:border-indigo-500/50 hover:shadow-[0_4px_20px_-10px_rgba(99,102,241,0.2)] dark:hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
                   <span className="text-[13px] font-medium text-slate-400 dark:text-[#6b7280]">
                     Ask Hyper AI anything...
                   </span>
diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx
index 45c41b1..a64f6af 100644
--- a/features/landing/universities.tsx
+++ b/features/landing/universities.tsx
@@ -52,7 +52,7 @@ export default function Universities() {
   });
 
   return (
-    <section className="relative flex min-h-[115vh] flex-col justify-center overflow-hidden border-none bg-background pt-16 pb-32">
+    <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) */}
@@ -150,7 +150,7 @@ export default function Universities() {
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.9 }}
                   transition={{ duration: 0.3 }}
-                  className={`group relative flex flex-col overflow-hidden rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${
+                  className={`group relative flex flex-col overflow-hidden rounded-[20px] md:rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-4 md:p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${
                     university.status === "Available" ? "cursor-pointer" : ""
                   }`}
                 >
@@ -162,8 +162,8 @@ export default function Universities() {
 
                   {/* Badge */}
                   <div className="relative z-10 mb-4 flex items-center justify-between">
-                    <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-purple-500/10 text-blue-600 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] dark:border-blue-400/20 dark:from-blue-400/10 dark:via-indigo-400/10 dark:to-purple-400/10 dark:text-blue-400 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]">
-                      <GraduationCap className="relative z-10 h-7 w-7 drop-shadow-sm" />
+                    <div className="relative flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-[14px] md:rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-purple-500/10 text-blue-600 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] dark:border-blue-400/20 dark:from-blue-400/10 dark:via-indigo-400/10 dark:to-purple-400/10 dark:text-blue-400 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]">
+                      <GraduationCap className="relative z-10 h-6 w-6 md:h-7 md:w-7 drop-shadow-sm" />
                     </div>
 
                     <span
@@ -179,7 +179,7 @@ export default function Universities() {
 
                   {/* Content */}
                   <div className="relative z-10 flex flex-1 flex-col">
-                    <h3 className="text-2xl font-black tracking-tight text-foreground">
+                    <h3 className="text-xl md:text-2xl font-black tracking-tight text-foreground">
                       {university.name}
                     </h3>
 
@@ -187,7 +187,7 @@ export default function Universities() {
                       {university.fullName}
                     </p>
 
-                    <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">
+                    <p className="mt-2.5 md:mt-3 text-[14px] md:text-[15px] leading-relaxed text-muted-foreground">
                       {university.description}
                     </p>
 
@@ -208,7 +208,7 @@ export default function Universities() {
 
                     <div className="mt-auto pt-6">
                       {university.status === "Available" ? (
-                        <div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3.5 text-sm font-bold text-white shadow-[0_0_15px_rgba(37,99,235,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.25)] active:translate-y-0 active:shadow-[0_0_15px_rgba(37,99,235,0.2)] overflow-hidden">
+                        <div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3 md:py-3.5 text-[13px] md:text-sm font-bold text-white shadow-[0_0_15px_rgba(37,99,235,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.25)] active:translate-y-0 active:shadow-[0_0_15px_rgba(37,99,235,0.2)] overflow-hidden">
                           <div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)] pointer-events-none" />
                           <span className="relative z-10 flex items-center gap-2">
                             Explore University