diff --git a/components/dashboard/auth-overlay.tsx b/components/dashboard/auth-overlay.tsx
index fe9609d..2c341f3 100644
--- a/components/dashboard/auth-overlay.tsx
+++ b/components/dashboard/auth-overlay.tsx
@@ -29,7 +29,7 @@ export function DashboardAuthOverlay({
   const containerRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: containerRef,
-    offset: ["start 90%", "start 10%"],
+    offset: ["start 45%", "start 10%"],
   });
 
   // Snappy, premium spring (PhonePe style)
@@ -47,48 +47,58 @@ export function DashboardAuthOverlay({
 
   return (
     <motion.div ref={containerRef} className="absolute inset-0 z-50">
-      {/* Frosted Backdrop — opacity linked to scroll */}
+      {/* Frosted Backdrop — covers dashboard section */}
       <motion.div
         style={{ opacity }}
-        className="absolute inset-0 bg-slate-200/50 backdrop-blur-[10px] dark:bg-[#0a0a12]/55 dark:backdrop-blur-[8px]"
+        className="absolute inset-0 bg-slate-900/20 backdrop-blur-[12px] dark:bg-[#0a0a12]/65 dark:backdrop-blur-[12px]"
       />
 
-      {/* Wrapper: Sticky scrolling on Mobile, Static absolute centering on Desktop */}
-      <div className="absolute inset-x-0 top-16 bottom-16 sm:inset-0 pointer-events-none">
+      {/* Fixed Card Container — viewport-pinned so it never scrolls away */}
+      <motion.div
+        style={{ opacity }}
+        className="fixed inset-0 z-[60] flex items-center justify-center pointer-events-none"
+      >
         <div
           style={{ perspective: "1000px" }}
-          className="sticky top-[15vh] translate-y-0 sm:absolute sm:top-1/2 sm:-translate-y-1/2 flex w-full justify-center px-4 pointer-events-auto"
+          className="w-full flex justify-center px-4 pointer-events-auto"
         >
           {/* Floating Card - Scale, Opacity, Y, and 3D Rotate linked to smooth scroll */}
           <motion.div
             style={{ scale, opacity, y, rotateX }}
-            className="relative w-full max-w-md overflow-hidden rounded-2xl border border-blue-200/80 bg-white/95 shadow-[0_30px_100px_-20px_rgba(30,58,138,0.35),0_10px_40px_-10px_rgba(30,58,138,0.2),inset_0_1px_0_rgba(255,255,255,1)] backdrop-blur-xl dark:border-white/[0.08] dark:bg-[#111119]/95 dark:shadow-[0_20px_60px_-12px_rgba(0,0,0,0.6)]"
+            className="relative w-full max-w-[440px] overflow-hidden rounded-3xl border border-slate-200/90 bg-white p-6 sm:p-8 shadow-[0_25px_70px_-15px_rgba(30,58,138,0.18),0_10px_30px_-10px_rgba(0,0,0,0.04)] backdrop-blur-2xl dark:border-white/[0.08] dark:bg-[#111119] dark:shadow-[0_20px_60px_-12px_rgba(0,0,0,0.8)]"
           >
-            {/* Top Gradient Accent Line */}
-            <div className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-transparent via-blue-600 to-transparent dark:via-cyan-400" />
+            {/* Light Mode Ambient Background Mesh */}
+            <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden dark:hidden">
+              <div className="absolute left-1/2 -top-24 h-56 w-72 -translate-x-1/2 rounded-full bg-gradient-to-b from-blue-400/20 via-indigo-300/10 to-transparent blur-3xl" />
+              <div className="absolute -bottom-20 -right-20 h-48 w-48 rounded-full bg-indigo-400/15 blur-3xl" />
+              <div className="absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-blue-400/15 blur-3xl" />
+            </div>
 
-            {/* Subtle ambient glow (dark mode) */}
-            <div className="pointer-events-none absolute inset-0 hidden dark:block">
-              <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[200px] w-[300px] rounded-full bg-cyan-500/10 blur-[80px]" />
+            {/* Dark Mode Ambient Background Glow */}
+            <div className="pointer-events-none absolute inset-0 -z-10 hidden dark:block">
+              <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[220px] w-[320px] rounded-full bg-cyan-500/15 blur-[80px]" />
             </div>
 
-            <div className="relative z-10 flex flex-col items-center px-5 py-6 sm:px-8 sm:py-8 text-center">
-              {/* Dynamic Lock Icon with floating + pulse */}
+            {/* Top Gradient Accent Rim */}
+            <div className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-blue-500/20 via-blue-600 to-indigo-600/20 dark:from-cyan-500/30 dark:via-cyan-400 dark:to-blue-500/30" />
+
+            <div className="relative z-10 flex flex-col items-center text-center">
+              {/* Floating Glowing Lock Header */}
               <motion.div
-                className="relative mb-3 sm:mb-5"
-                animate={{ y: [0, -6, 0] }}
+                className="relative mb-4 sm:mb-5"
+                animate={{ y: [0, -5, 0] }}
                 transition={{
                   duration: 4,
                   repeat: Infinity,
                   ease: "easeInOut",
                 }}
               >
-                {/* Outer pulsing glow ring */}
+                {/* Pulsing Backlight */}
                 <motion.div
-                  className="absolute -inset-3 rounded-3xl bg-blue-500/15 blur-xl dark:bg-cyan-500/15"
+                  className="absolute -inset-3 rounded-full bg-gradient-to-tr from-blue-500/20 via-indigo-500/20 to-cyan-500/20 blur-xl dark:from-cyan-500/30 dark:via-blue-500/20 dark:to-cyan-400/20"
                   animate={{
-                    opacity: [0.4, 0.8, 0.4],
-                    scale: [0.95, 1.05, 0.95],
+                    opacity: [0.5, 0.9, 0.5],
+                    scale: [0.95, 1.08, 0.95],
                   }}
                   transition={{
                     duration: 3,
@@ -96,55 +106,58 @@ export function DashboardAuthOverlay({
                     ease: "easeInOut",
                   }}
                 />
-                <div className="relative flex h-12 w-12 sm:h-14 sm:w-14 items-center justify-center rounded-2xl border border-blue-200 bg-gradient-to-b from-blue-100 to-blue-50 shadow-[0_12px_24px_-8px_rgba(37,99,235,0.4),inset_0_1px_2px_rgba(255,255,255,1)] dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent dark:shadow-none">
+
+                <div className="relative flex h-14 w-14 sm:h-16 sm:w-16 items-center justify-center rounded-2xl border border-blue-200/80 bg-gradient-to-br from-blue-50 via-white to-indigo-50/80 shadow-[0_8px_20px_-4px_rgba(59,130,246,0.25),inset_0_1px_1px_rgba(255,255,255,1)] dark:border-cyan-500/30 dark:bg-gradient-to-br dark:from-cyan-500/15 dark:via-cyan-950/20 dark:to-blue-900/20 dark:shadow-none">
                   <Lock
-                    className="h-5 w-5 sm:h-6 sm:w-6 text-blue-600 dark:text-cyan-400"
-                    strokeWidth={1.8}
+                    className="h-6 w-6 sm:h-7 sm:w-7 text-blue-600 dark:text-cyan-400"
+                    strokeWidth={2}
                   />
                 </div>
               </motion.div>
 
-              {/* Premium Badge */}
-              <div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[10px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
-                <Sparkles className="h-2.5 w-2.5" />
+              {/* Unified Glowing Badge */}
+              <div className="mb-3 inline-flex items-center gap-1.5 rounded-full border border-blue-200/70 bg-gradient-to-r from-blue-50/90 to-indigo-50/90 px-3.5 py-1 text-[11px] font-semibold text-blue-700 shadow-sm dark:border-cyan-500/30 dark:bg-gradient-to-r dark:from-cyan-500/15 dark:to-blue-500/15 dark:text-cyan-300">
+                <Sparkles className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
                 Personalized Dashboard
               </div>
 
-              {/* Heading */}
-              <h2 className="text-xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-2xl px-2">
+              {/* Title */}
+              <h2 className="text-xl font-black tracking-tight text-slate-900 dark:text-white sm:text-2xl">
                 Unlock Your Personalized Dashboard
               </h2>
 
-              {/* Description — explains WHY login is needed */}
-              <p className="mx-auto mt-2 max-w-[340px] text-[12px] sm:text-[13px] leading-snug text-slate-500 dark:text-slate-400 px-2">
+              {/* Subtitle / Description */}
+              <p className="mt-2.5 max-w-[350px] text-[12px] sm:text-[13px] leading-relaxed text-slate-600 dark:text-slate-400">
                 Create an account and complete your profile to unlock a
                 dashboard tailored to your{" "}
-                <span className="font-semibold text-slate-700 dark:text-slate-300">
+                <span className="font-semibold text-slate-900 dark:text-slate-200">
                   University
                 </span>
                 ,{" "}
-                <span className="font-semibold text-slate-700 dark:text-slate-300">
+                <span className="font-semibold text-slate-900 dark:text-slate-200">
                   Branch
                 </span>
                 , and{" "}
-                <span className="font-semibold text-slate-700 dark:text-slate-300">
+                <span className="font-semibold text-slate-900 dark:text-slate-200">
                   Semester
                 </span>
-                . Access your syllabus, previous year questions, AI tutor,
-                notes, and learning progress — all in one place.
+                . Access your syllabus, previous year questions, AI tutor, and
+                learning progress.
               </p>
 
-              {/* Onboarding Steps */}
-              <div className="mt-4 sm:mt-5 flex w-full max-w-[280px] sm:max-w-[300px] flex-col items-start gap-0 mx-auto">
+              {/* Onboarding Timeline */}
+              <div className="my-5 flex w-full max-w-[310px] flex-col gap-2 rounded-2xl border border-slate-100 bg-slate-50/70 p-3.5 dark:border-white/[0.06] dark:bg-white/[0.03]">
                 {onboardingSteps.map((step, i) => (
-                  <div key={step.label} className="flex items-start gap-3">
-                    {/* Step indicator dot + connector */}
-                    <div className="flex flex-col items-center">
+                  <div
+                    key={step.label}
+                    className="flex items-center justify-between gap-3 text-left"
+                  >
+                    <div className="flex items-center gap-2.5">
                       <div
-                        className={`flex h-5 w-5 items-center justify-center rounded-full border text-[10px] font-bold ${
+                        className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold transition-colors ${
                           step.isLast
-                            ? "border-blue-400 bg-blue-500/10 text-blue-600 dark:border-cyan-400 dark:bg-cyan-500/10 dark:text-cyan-400"
-                            : "border-slate-200 bg-slate-50 text-slate-400 dark:border-white/10 dark:bg-white/[0.04] dark:text-slate-500"
+                            ? "border border-blue-500/40 bg-blue-500 text-white shadow-[0_2px_8px_rgba(59,130,246,0.3)] dark:border-cyan-400 dark:bg-cyan-400 dark:text-slate-950"
+                            : "border border-slate-200 bg-white text-slate-500 shadow-2xs dark:border-white/10 dark:bg-white/[0.06] dark:text-slate-400"
                         }`}
                       >
                         {step.isLast ? (
@@ -153,73 +166,73 @@ export function DashboardAuthOverlay({
                           <span>{i + 1}</span>
                         )}
                       </div>
-                      {i < onboardingSteps.length - 1 && (
-                        <div className="h-2 sm:h-3 w-px bg-slate-200 dark:bg-white/10" />
-                      )}
+                      <span
+                        className={`text-[12px] font-medium ${
+                          step.isLast
+                            ? "font-semibold text-blue-600 dark:text-cyan-400"
+                            : "text-slate-600 dark:text-slate-400"
+                        }`}
+                      >
+                        {step.label}
+                      </span>
                     </div>
-                    {/* Step label */}
-                    <span
-                      className={`pt-[1.5px] text-[11.5px] sm:text-[12px] font-medium ${
-                        step.isLast
-                          ? "text-blue-600 dark:text-cyan-400 font-semibold"
-                          : "text-slate-500 dark:text-slate-400"
-                      }`}
-                    >
-                      {step.label}
-                    </span>
+
+                    {step.isLast && (
+                      <span className="rounded-full bg-blue-100/80 px-2 py-0.5 text-[9.5px] font-bold text-blue-700 dark:bg-cyan-500/20 dark:text-cyan-300">
+                        Final Step
+                      </span>
+                    )}
                   </div>
                 ))}
               </div>
 
-              {/* Action Buttons */}
-              <div className="mt-5 sm:mt-6 flex w-full flex-col gap-2.5 sm:flex-row sm:gap-3">
+              {/* CTA Buttons */}
+              <div className="flex w-full flex-col gap-2.5 sm:flex-row sm:gap-3">
                 <Link
                   href="/sign-up"
-                  className="group flex flex-1 items-center justify-center gap-2 rounded-xl bg-gradient-to-b from-blue-500 via-blue-600 to-blue-700 px-4 py-2.5 text-[13px] sm:text-[14px] font-bold text-white shadow-[0_4px_12px_-4px_rgba(37,99,235,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all hover:scale-[1.02] hover:shadow-[0_6px_20px_-4px_rgba(37,99,235,0.5)] active:scale-[0.98] dark:from-cyan-400 dark:via-blue-500 dark:to-blue-700 dark:shadow-[0_4px_16px_-4px_rgba(6,182,212,0.3),inset_0_1px_1px_rgba(255,255,255,0.15)]"
+                  className="group relative flex flex-1 items-center justify-center gap-2 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 via-blue-600 to-indigo-600 px-4 py-3 text-[13.5px] font-bold text-white shadow-[0_6px_20px_-4px_rgba(37,99,235,0.45)] transition-all duration-300 hover:shadow-[0_10px_28px_-4px_rgba(37,99,235,0.55)] hover:-translate-y-0.5 active:translate-y-0 dark:from-cyan-500 dark:via-cyan-500 dark:to-blue-600 dark:text-slate-950 dark:shadow-[0_6px_20px_-4px_rgba(6,182,212,0.4)]"
                 >
                   <UserPlus className="h-4 w-4" />
-                  Create Account
+                  <span>Create Account</span>
                 </Link>
                 <Link
                   href="/sign-in"
-                  className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200/80 bg-white px-4 py-2.5 text-[13px] sm:text-[14px] font-bold text-slate-700 shadow-sm transition-all hover:scale-[1.02] hover:border-blue-200 hover:bg-blue-50/50 hover:text-blue-700 hover:shadow-md active:scale-[0.98] dark:border-white/10 dark:bg-white/[0.04] dark:text-white dark:hover:border-white/10 dark:hover:bg-white/[0.07] dark:hover:text-white"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-3 text-[13.5px] font-bold text-slate-800 shadow-[0_2px_6px_rgba(0,0,0,0.04)] transition-all duration-300 hover:border-blue-300 hover:bg-blue-50/40 hover:text-blue-700 hover:shadow-[0_4px_12px_rgba(59,130,246,0.1)] hover:-translate-y-0.5 active:translate-y-0 dark:border-white/10 dark:bg-white/[0.05] dark:text-white dark:hover:border-white/20 dark:hover:bg-white/[0.1]"
                 >
-                  <LogIn className="h-4 w-4" />
-                  Sign In
+                  <LogIn className="h-4 w-4 text-slate-500 dark:text-slate-400" />
+                  <span>Sign In</span>
                 </Link>
               </div>
 
-              {/* Preview Button */}
+              {/* Preview CTA Option */}
               {onPreview && (
                 <button
                   onClick={onPreview}
-                  className="mt-4 sm:mt-5 text-[11px] sm:text-[12px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+                  className="mt-3.5 text-[12px] font-semibold text-slate-500 transition-colors hover:text-blue-600 dark:text-slate-400 dark:hover:text-cyan-400"
                 >
                   Just browsing? Preview dashboard
                 </button>
               )}
 
-              {/* Personalization-focused bottom text */}
-              <div className="mt-4 sm:mt-5 flex items-center justify-center gap-1.5 text-[9.5px] sm:text-[11px] text-slate-400 dark:text-slate-500">
-                <span className="inline-flex items-center gap-1">
-                  <GraduationCap className="h-3 w-3" />
+              {/* Feature Pills Footer */}
+              <div className="mt-5 flex flex-wrap items-center justify-center gap-1.5 pt-3 border-t border-slate-100 dark:border-white/[0.06]">
+                <span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
+                  <GraduationCap className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
                   Your University
                 </span>
-                <span>•</span>
-                <span className="inline-flex items-center gap-1">
-                  <GitBranch className="h-3 w-3" />
+                <span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
+                  <GitBranch className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
                   Your Branch
                 </span>
-                <span>•</span>
-                <span className="inline-flex items-center gap-1">
-                  <CalendarDays className="h-3 w-3" />
+                <span className="inline-flex items-center gap-1 rounded-full bg-slate-100/80 px-2.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-white/[0.04] dark:text-slate-400">
+                  <CalendarDays className="h-3 w-3 text-blue-500 dark:text-cyan-400" />
                   Your Semester
                 </span>
               </div>
             </div>
           </motion.div>
         </div>
-      </div>
+      </motion.div>
     </motion.div>
   );
 }