diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index 67e3e8f..97d15f9 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -4,7 +4,6 @@ import {
   LayoutDashboard,
   BrainCircuit,
   Sparkles,
-  Star,
   Library,
   FileText,
   Target,
@@ -21,24 +20,24 @@ export default function AuthLayout({
       {/* Main Split Content */}
       <div className="flex flex-1 w-full min-h-[600px]">
         {/* Left Side - Brand & Features (Hidden on Mobile) */}
-        <div className="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-slate-950 dark:bg-black lg:flex border-r border-border/50">
+        <div className="relative hidden w-1/2 flex-col items-center justify-center overflow-hidden bg-slate-50 dark:bg-black lg:flex border-r border-border/50">
           {/* Background Gradients & Effects */}
           <div className="absolute inset-0 z-0">
-            <div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/10 blur-[120px]" />
-            <div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/10 blur-[120px]" />
-            <div className="absolute inset-0 bg-[url('/noise.png')] opacity-10 mix-blend-overlay" />
+            <div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/20 dark:bg-blue-500/10 blur-[120px]" />
+            <div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/20 dark:bg-indigo-500/10 blur-[120px]" />
+            <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] dark:opacity-10 mix-blend-overlay" />
           </div>
 
           {/* Top Logo - Large like Instagram */}
           <div className="absolute top-12 left-12 z-10">
-            <div className="relative flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded-[1.25rem] bg-gradient-to-tr from-blue-600 via-indigo-500 to-purple-500 p-[2px] shadow-2xl">
-              <div className="flex h-full w-full items-center justify-center rounded-[1.1rem] bg-black">
+            <div className="relative flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded-[1.25rem] bg-gradient-to-tr from-blue-600 via-indigo-500 to-purple-500 p-[2px] shadow-[0_8px_30px_rgba(99,102,241,0.2)] dark:shadow-2xl">
+              <div className="flex h-full w-full items-center justify-center rounded-[1.1rem] bg-white dark:bg-black">
                 <Image
                   src="/hl-logo.png"
                   alt="Hyper Learning Logo"
                   width={44}
                   height={44}
-                  className="object-contain invert brightness-0"
+                  className="object-contain dark:invert dark:brightness-0 opacity-90 dark:opacity-100"
                 />
               </div>
             </div>
@@ -46,9 +45,9 @@ export default function AuthLayout({
 
           {/* Center Premium Content */}
           <div className="relative z-10 flex flex-col items-center text-center px-8 py-4 max-w-[540px] mt-8">
-            <h1 className="text-[36px] font-semibold tracking-tight text-slate-100 xl:text-[42px] leading-[1.2]">
+            <h1 className="text-[36px] font-semibold tracking-tight text-slate-900 dark:text-slate-100 xl:text-[42px] leading-[1.2]">
               Elevate your engineering journey with a{" "}
-              <span className="bg-gradient-to-br from-blue-400 to-indigo-400 bg-clip-text text-transparent font-bold">
+              <span className="bg-gradient-to-br from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent font-bold">
                 personalized AI tutor
               </span>
               .
@@ -229,7 +228,7 @@ export default function AuthLayout({
       {/* Global Footer */}
       <footer className="w-full py-4 px-6 bg-zinc-50 dark:bg-black border-t border-border/40 text-[12px]">
         <div className="mx-auto max-w-[1280px]">
-          <div className="flex flex-col items-center gap-3 text-center lg:flex-row lg:flex-wrap lg:items-center lg:justify-center lg:gap-x-4 lg:gap-y-2 lg:text-left">
+          <div className="flex flex-col items-center gap-4 text-center lg:flex-row lg:flex-wrap lg:items-center lg:justify-center lg:gap-x-4 lg:gap-y-2 lg:text-left">
             <Link
               href="/"
               className="inline-flex shrink-0 items-center gap-2 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
@@ -247,39 +246,39 @@ export default function AuthLayout({
               </span>
             </Link>
 
-            <div className="flex items-center gap-6 text-[12px] font-medium text-muted-foreground">
+            <div className="flex flex-wrap justify-center items-center gap-4 lg:gap-6 text-[12px] font-medium text-muted-foreground">
               <Link
                 href="/about"
-                className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
+                className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
               >
                 About
                 <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
               </Link>
               <Link
                 href="/contact"
-                className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
+                className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
               >
                 Contact
                 <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
               </Link>
               <Link
                 href="/creators"
-                className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
+                className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
               >
                 Creators
                 <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
               </Link>
               <Link
                 href="/#Contact"
-                className="relative group py-1 transition-all duration-300 hover:text-blue-400 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)]"
+                className="relative group py-1 transition-all duration-300 hover:text-blue-500 hover:drop-shadow-[0_0_8px_rgba(96,165,250,0.5)] dark:hover:text-blue-400"
               >
                 Feedback
                 <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-blue-500 rounded-full transition-all duration-300 group-hover:w-full group-hover:shadow-[0_0_8px_rgba(59,130,246,0.8)]" />
               </Link>
             </div>
 
-            <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground/70 max-w-[400px] lg:max-w-none text-center lg:text-left">
-              <span>Disclaimer:</span>
+            <div className="flex flex-col lg:flex-row items-center gap-1 lg:gap-1.5 text-[11px] text-muted-foreground/70 max-w-[400px] lg:max-w-none text-center lg:text-left mt-2 lg:mt-0">
+              <span className="font-semibold">Disclaimer:</span>
               <span>
                 Some content may contain errors. Please cross-check and share
                 corrections via our feedback section.
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index 3342803..9b3c273 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -54,7 +54,9 @@ export default function SignInPage() {
           <div className="w-full border-t border-border/50" />
         </div>
         <div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
-          <span className="bg-background px-4 text-muted-foreground">Or</span>
+          <span className="bg-zinc-50 dark:bg-[#0A0A0A] px-4 text-muted-foreground">
+            Or
+          </span>
         </div>
       </div>
 
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index de96e83..b6d5470 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -94,7 +94,9 @@ export default function SignUpPage() {
           <div className="w-full border-t border-border/50" />
         </div>
         <div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
-          <span className="bg-background px-4 text-muted-foreground">Or</span>
+          <span className="bg-zinc-50 dark:bg-[#0A0A0A] px-4 text-muted-foreground">
+            Or
+          </span>
         </div>
       </div>
 
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index ac1df69..48962ca 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -144,7 +144,7 @@ export default function DashboardPage() {
                   Quick Actions
                 </h2>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 flex-1">
+              <div className="grid grid-cols-2 gap-3 sm:gap-5 flex-1">
                 <QuickActionCard
                   title="Universities"
                   description="Explore institutions."
diff --git a/components/auth/auth-input.tsx b/components/auth/auth-input.tsx
index c7b33fa..41bfb91 100644
--- a/components/auth/auth-input.tsx
+++ b/components/auth/auth-input.tsx
@@ -33,7 +33,7 @@ export function AuthInput({
         id={id}
         type={type}
         placeholder={placeholder}
-        className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3.5 text-sm transition-all focus:border-blue-500 focus:bg-white dark:focus:bg-white/[0.05] focus:outline-none focus:ring-4 focus:ring-blue-500/10 placeholder:text-zinc-400 dark:placeholder:text-white/30"
+        className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.03] px-4 py-3.5 text-sm transition-all focus:border-blue-500 focus:bg-white dark:focus:bg-white/[0.05] focus:outline-none focus:ring-4 focus:ring-blue-500/10 placeholder:text-zinc-400 dark:placeholder:text-white/30"
         required={required}
         list={suggestions ? `${id}-suggestions` : undefined}
       />
diff --git a/components/auth/oauth-button.tsx b/components/auth/oauth-button.tsx
index a091596..56271cb 100644
--- a/components/auth/oauth-button.tsx
+++ b/components/auth/oauth-button.tsx
@@ -2,7 +2,7 @@ export function OAuthButton() {
   return (
     <button
       type="button"
-      className="flex w-full items-center justify-center gap-3 rounded-full border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3 text-[15px] font-semibold text-foreground transition-all hover:bg-zinc-100 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-4 focus:ring-zinc-500/10"
+      className="flex w-full items-center justify-center gap-3 rounded-full border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.03] px-4 py-3 text-[15px] font-semibold text-foreground transition-all hover:bg-zinc-50 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-4 focus:ring-zinc-500/10"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css
index 05edf33..4c200c9 100644
--- a/components/contact/ContactSection.module.css
+++ b/components/contact/ContactSection.module.css
@@ -297,6 +297,7 @@
   transition:
     box-shadow 0.4s ease,
     border-color 0.4s ease;
+  overflow: hidden;
 }
 
 /* Soft golden border glow only on hover */
@@ -794,13 +795,10 @@
   .cardGlowTopRight {
     display: none;
   }
+  /* The signal ring and floating dots were previously disabled here for GPU performance.
+     Enabled as per request. */
   .signalRing {
-    display: none;
-  }
-  .floatingDot1,
-  .floatingDot2,
-  .floatingDot3 {
-    display: none;
+    animation: signalPulseMobile 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
   }
   .sectionDivider {
     display: none;
@@ -810,6 +808,17 @@
   }
 }
 
+@keyframes signalPulseMobile {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.7);
+    opacity: 0;
+  }
+}
+
 /* ===== LIGHT MODE OVERRIDES ===== */
 :global(html:not(.dark)) .contactSection {
   background: linear-gradient(
@@ -1149,3 +1158,23 @@
     transform: translate(2px, -2px);
   }
 }
+
+@media (max-width: 768px) {
+  /* Fix Light Mode Mobile Overrides */
+  :global(html:not(.dark)) .cardSubtitle {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+  }
+  :global(html:not(.dark)) .form {
+    gap: 8px;
+  }
+  :global(html:not(.dark)) .inputGroup {
+    padding: 0px 8px;
+  }
+  :global(html:not(.dark)) .input {
+    padding: 8px 8px 8px 4px;
+  }
+  :global(html:not(.dark)) .submitBtn {
+    height: 42px;
+  }
+}
diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx
index 45dc804..9e981c2 100644
--- a/features/landing/hero.tsx
+++ b/features/landing/hero.tsx
@@ -205,22 +205,22 @@ export default function Hero() {
             {/* CTA buttons row */}
             <motion.div
               variants={itemVariants}
-              className="mt-8 mb-4 flex flex-row gap-[16px]"
+              className="mt-8 mb-4 flex flex-col sm:flex-row gap-3 md:gap-[16px] w-full sm:w-auto"
             >
               <a
                 href="#Universities"
                 onClick={scrollToUniversities}
-                className="group flex cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[32px] py-[18px] text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98]"
+                className="group flex justify-center cursor-pointer items-center gap-2 rounded-[12px] bg-gradient-to-br from-[#4f46e5] to-[#6366f1] px-[20px] py-[12px] text-[14px] md:px-[32px] md:py-[18px] md:text-[16px] font-[600] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_30px_rgba(99,102,241,0.25)] transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[1px] hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_20px_50px_rgba(99,102,241,0.3)] active:scale-[0.98] w-full sm:w-auto"
               >
                 Start Learning
-                <div className="flex h-[22px] w-[22px] items-center justify-center rounded-[6px] bg-white/15">
+                <div className="flex h-[20px] w-[20px] md:h-[22px] md:w-[22px] items-center justify-center rounded-[6px] bg-white/15">
                   <ArrowRight className="h-3.5 w-3.5" />
                 </div>
               </a>
 
               <Link
                 href="/about"
-                className="flex cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[28px] py-[15px] text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0]"
+                className="flex justify-center cursor-pointer items-center gap-2 rounded-[12px] border border-[#D8E2F0] bg-transparent px-[20px] py-[12px] text-[14px] md:px-[28px] md:py-[15px] md:text-[15px] font-[600] text-slate-600 transition-all duration-300 hover:border-[#C4D2E5] hover:bg-white hover:shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:text-slate-900 dark:border-white/10 dark:text-[#94a3b8] dark:hover:border-white/20 dark:hover:bg-transparent dark:hover:shadow-none dark:hover:text-[#e2e8f0] w-full sm:w-auto"
               >
                 Explore platform ↗
               </Link>
@@ -233,31 +233,34 @@ export default function Hero() {
             />
 
             {/* Stats row */}
-            <motion.div variants={itemVariants} className="mt-2 flex flex-row">
-              <div className="pr-[32px]">
-                <div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
+            <motion.div
+              variants={itemVariants}
+              className="mt-4 flex flex-row items-center justify-between sm:justify-start"
+            >
+              <div className="pr-2 sm:pr-[32px]">
+                <div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
                   <Counter to={25} />
                   <span className="text-[#6366f1]">+</span>
                 </div>
-                <div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
+                <div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
                   Years of PYQs
                 </div>
               </div>
-              <div className="border-l border-slate-200 px-[32px] dark:border-white/10">
-                <div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
+              <div className="border-l border-slate-200 px-2 sm:px-[32px] dark:border-white/10">
+                <div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
                   <Counter to={100} />
                   <span className="text-[#6366f1]">%</span>
                 </div>
-                <div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
+                <div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
                   Syllabus Mapped
                 </div>
               </div>
-              <div className="border-l border-slate-200 pl-[32px] dark:border-white/10">
-                <div className="text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
+              <div className="border-l border-slate-200 pl-2 sm:pl-[32px] dark:border-white/10">
+                <div className="text-[24px] sm:text-[32px] font-[800] tracking-[-0.04em] text-gray-900 dark:text-[#f1f5f9]">
                   <Counter to={24} />
                   <span className="text-[#6366f1]">/7</span>
                 </div>
-                <div className="mt-1 text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
+                <div className="mt-0.5 sm:mt-1 text-[9px] sm:text-[10px] font-[600] uppercase tracking-[0.08em] text-slate-500 dark:text-[#475569]">
                   AI Assistant
                 </div>
               </div>
@@ -271,7 +274,7 @@ export default function Hero() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
-            className="relative mx-auto mt-16 flex w-full max-w-[500px] justify-center lg:mt-0 lg:max-w-none lg:justify-end"
+            className="hidden md:flex relative mx-auto mt-16 w-full max-w-[500px] justify-center lg:mt-0 lg:max-w-none lg:justify-end"
           >
             {/* 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" />