diff --git a/app/(public)/cgpa-calculator/page.tsx b/app/(public)/cgpa-calculator/page.tsx
index 3c9c8c6..5792df7 100644
--- a/app/(public)/cgpa-calculator/page.tsx
+++ b/app/(public)/cgpa-calculator/page.tsx
@@ -514,7 +514,7 @@ export default function CgpaCalculatorPage() {
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
             {/* Placement Eligibility Radar */}
-            <div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.08] bg-indigo-50/90 dark:bg-slate-900/50 dark:bg-gradient-to-br dark:from-white/[0.05] dark:to-transparent backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-transparent dark:ring-white/[0.05] relative overflow-hidden">
+            <div className="px-2 py-4 md:p-8 lg:p-10 md:rounded-[2.5rem] lg:rounded-[3rem] md:border md:border-white/80 md:dark:border-white/[0.08] md:bg-indigo-50/90 md:dark:bg-slate-900/50 md:dark:bg-gradient-to-br md:dark:from-white/[0.05] md:dark:to-transparent md:backdrop-blur-3xl md:shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] md:dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] md:ring-1 md:ring-inset md:ring-transparent md:dark:ring-white/[0.05] relative overflow-hidden">
               <div className="flex items-center gap-3 mb-8 relative z-10">
                 <div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
                   <Briefcase className="w-5 h-5" />
@@ -559,24 +559,24 @@ export default function CgpaCalculatorPage() {
                         }
                         className={`group flex items-center justify-between p-4 rounded-2xl text-left transition-all duration-300 ${
                           radarTier === tier.id
-                            ? "bg-indigo-50/50 dark:bg-white/[0.04] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]"
-                            : "bg-transparent hover:bg-slate-50/50 dark:hover:bg-white/[0.02]"
+                            ? "bg-indigo-50 dark:bg-white/[0.06] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.5)] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)] border border-indigo-100/50 dark:border-white/10 md:border-transparent"
+                            : "bg-white dark:bg-white/[0.02] md:bg-transparent border border-slate-200/60 dark:border-white/[0.05] md:border-transparent shadow-sm md:shadow-none hover:bg-slate-50/80 dark:hover:bg-white/[0.04]"
                         }`}
                       >
                         <span
                           className={`font-semibold transition-colors ${
                             radarTier === tier.id
                               ? "text-indigo-700 dark:text-white"
-                              : "text-slate-600 group-hover:text-slate-900 dark:text-slate-500 dark:group-hover:text-slate-300"
+                              : "text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-white"
                           }`}
                         >
                           {tier.label}
                         </span>
                         <span
-                          className={`text-[13px] font-bold px-3 py-1 rounded-full transition-colors ${
+                          className={`text-[12px] md:text-[13px] font-bold px-3 py-1 rounded-full transition-colors ${
                             radarTier === tier.id
                               ? "bg-indigo-600 text-white shadow-sm dark:bg-white dark:text-slate-900"
-                              : "bg-slate-100 text-slate-500 group-hover:bg-slate-200 dark:bg-transparent dark:text-slate-500 group-hover:dark:text-slate-400"
+                              : "bg-slate-100 text-slate-500 group-hover:bg-slate-200 dark:bg-white/[0.06] dark:text-slate-400 group-hover:dark:text-slate-300"
                           }`}
                         >
                           {tier.cutoff}+
@@ -589,8 +589,8 @@ export default function CgpaCalculatorPage() {
                 {(() => {
                   if (!radarTier) {
                     return (
-                      <div className="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-white/10 text-center">
-                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
+                      <div className="p-6 rounded-2xl border border-dashed border-slate-300 md:border-slate-200 dark:border-white/10 text-center bg-white/50 md:bg-transparent dark:bg-white/[0.01] md:dark:bg-transparent">
+                        <p className="text-sm font-medium text-slate-600 md:text-slate-500 dark:text-slate-400">
                           Select a career path above to unlock tailored insights
                           and view your eligibility status.
                         </p>
@@ -609,8 +609,8 @@ export default function CgpaCalculatorPage() {
 
                   if (!currentCgpa || isNaN(current)) {
                     return (
-                      <div className="p-6 rounded-2xl border border-dashed border-slate-200 dark:border-white/10 text-center">
-                        <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
+                      <div className="p-6 rounded-2xl border border-dashed border-slate-300 md:border-slate-200 dark:border-white/10 text-center bg-white/50 md:bg-transparent dark:bg-white/[0.01] md:dark:bg-transparent">
+                        <p className="text-sm font-medium text-slate-600 md:text-slate-500 dark:text-slate-400">
                           Enter your current CGPA above to see your eligibility
                           status for this path.
                         </p>
@@ -620,13 +620,13 @@ export default function CgpaCalculatorPage() {
 
                   if (current >= required) {
                     return (
-                      <div className="flex gap-4 p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20">
+                      <div className="flex gap-4 p-5 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 md:border-emerald-100 dark:border-emerald-500/20 shadow-sm md:shadow-none">
                         <ShieldCheck className="w-6 h-6 text-emerald-600 dark:text-emerald-400 shrink-0" />
                         <div>
                           <h4 className="font-bold text-emerald-800 dark:text-emerald-300 mb-1">
                             Safe Zone
                           </h4>
-                          <p className="text-[13px] text-emerald-700 dark:text-emerald-400/80 leading-relaxed font-medium">
+                          <p className="text-[13px] text-emerald-800/80 md:text-emerald-700 dark:text-emerald-400/80 leading-relaxed font-medium">
                             Your CGPA comfortably meets the standard{" "}
                             {required.toFixed(1)} cutoff for this tier. Focus
                             heavily on DSA and interview prep!
@@ -636,13 +636,13 @@ export default function CgpaCalculatorPage() {
                     );
                   } else if (current >= required - 0.5) {
                     return (
-                      <div className="flex gap-4 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20">
+                      <div className="flex gap-4 p-5 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200/80 md:border-amber-200 dark:border-amber-500/20 shadow-sm md:shadow-none">
                         <AlertTriangle className="w-6 h-6 text-amber-500 dark:text-amber-400 shrink-0" />
                         <div>
                           <h4 className="font-bold text-amber-800 dark:text-amber-300 mb-1">
                             Borderline
                           </h4>
-                          <p className="text-[13px] text-amber-700 dark:text-amber-400/80 leading-relaxed font-medium">
+                          <p className="text-[13px] text-amber-800/80 md:text-amber-700 dark:text-amber-400/80 leading-relaxed font-medium">
                             You are very close to the {required.toFixed(1)}{" "}
                             cutoff. Pushing your CGPA up slightly in remaining
                             semesters will safely unlock this tier.
@@ -652,13 +652,13 @@ export default function CgpaCalculatorPage() {
                     );
                   } else {
                     return (
-                      <div className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20">
+                      <div className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-red-50 dark:bg-red-500/10 border border-red-200/80 md:border-red-100 dark:border-red-500/20 shadow-sm md:shadow-none">
                         <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400 shrink-0" />
                         <div>
                           <h4 className="font-bold text-red-800 dark:text-red-300 mb-1">
                             Action Required
                           </h4>
-                          <p className="text-[13px] text-red-700 dark:text-red-400/80 leading-relaxed font-medium">
+                          <p className="text-[13px] text-red-800/80 md:text-red-700 dark:text-red-400/80 leading-relaxed font-medium">
                             You are currently falling short of the{" "}
                             {required.toFixed(1)} cutoff. Don&apos;t panic! Set{" "}
                             <strong className="text-red-800 dark:text-red-300">
@@ -677,7 +677,7 @@ export default function CgpaCalculatorPage() {
             </div>
 
             {/* Pro-Tips for Boosting SGPA */}
-            <div className="p-6 sm:p-8 md:p-10 rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] border border-white/80 dark:border-white/[0.08] bg-blue-50/90 dark:bg-slate-900/50 dark:bg-gradient-to-br dark:from-white/[0.05] dark:to-transparent backdrop-blur-3xl shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] ring-1 ring-inset ring-transparent dark:ring-white/[0.05] relative overflow-hidden">
+            <div className="px-2 py-4 md:p-8 lg:p-10 md:rounded-[2.5rem] lg:rounded-[3rem] md:border md:border-white/80 md:dark:border-white/[0.08] md:bg-blue-50/90 md:dark:bg-slate-900/50 md:dark:bg-gradient-to-br md:dark:from-white/[0.05] md:dark:to-transparent md:backdrop-blur-3xl md:shadow-[0_30px_100px_-15px_rgba(0,0,0,0.12)] md:dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] md:ring-1 md:ring-inset md:ring-transparent md:dark:ring-white/[0.05] relative overflow-hidden">
               <div className="flex items-center gap-3 mb-8">
                 <div className="p-2.5 rounded-xl bg-indigo-50 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400">
                   <Lightbulb className="w-5 h-5" />
diff --git a/components/dashboard/auth-overlay.tsx b/components/dashboard/auth-overlay.tsx
index 4517849..e9203b8 100644
--- a/components/dashboard/auth-overlay.tsx
+++ b/components/dashboard/auth-overlay.tsx
@@ -52,10 +52,10 @@ export function DashboardAuthOverlay({
           <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]" />
         </div>
 
-        <div className="relative z-10 flex flex-col items-center px-8 py-10 text-center sm:px-10 sm:py-12">
+        <div className="relative z-10 flex flex-col items-center px-5 py-6 sm:px-10 sm:py-12 text-center">
           {/* Dynamic Lock Icon with floating + pulse */}
           <motion.div
-            className="relative mb-5"
+            className="relative mb-3 sm:mb-5"
             animate={{ y: [0, -6, 0] }}
             transition={{
               duration: 4,
@@ -73,27 +73,27 @@ export function DashboardAuthOverlay({
                 ease: "easeInOut",
               }}
             />
-            <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl border border-blue-100 bg-gradient-to-b from-blue-50 to-white shadow-sm dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent">
+            <div className="relative flex h-12 w-12 sm:h-16 sm:w-16 items-center justify-center rounded-2xl border border-blue-100 bg-gradient-to-b from-blue-50 to-white shadow-sm dark:border-cyan-500/20 dark:from-cyan-500/10 dark:to-transparent">
               <Lock
-                className="h-7 w-7 text-blue-600 dark:text-cyan-400"
+                className="h-5 w-5 sm:h-7 sm:w-7 text-blue-600 dark:text-cyan-400"
                 strokeWidth={1.8}
               />
             </div>
           </motion.div>
 
           {/* Premium Badge */}
-          <div className="mb-4 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[11px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
+          <div className="mb-3 sm:mb-4 inline-flex items-center gap-1.5 rounded-full border border-amber-200/60 bg-amber-50/80 px-3 py-1 text-[10px] sm:text-[11px] font-semibold text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400">
             <Sparkles className="h-3 w-3" />
             Personalized Dashboard
           </div>
 
           {/* Heading */}
-          <h2 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-[26px]">
+          <h2 className="text-xl sm:text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-[26px] px-2">
             Unlock Your Personalized Dashboard
           </h2>
 
           {/* Description — explains WHY login is needed */}
-          <p className="mx-auto mt-3 max-w-sm text-[13.5px] leading-relaxed text-slate-500 dark:text-slate-400">
+          <p className="mx-auto mt-2 sm:mt-3 max-w-sm text-[12px] sm:text-[13.5px] leading-snug sm:leading-relaxed text-slate-500 dark:text-slate-400 px-2">
             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">
@@ -112,7 +112,7 @@ export function DashboardAuthOverlay({
           </p>
 
           {/* Onboarding Steps */}
-          <div className="mt-6 flex w-full max-w-xs flex-col items-start gap-0 mx-auto">
+          <div className="mt-4 sm:mt-6 flex w-full max-w-[280px] sm:max-w-xs flex-col items-start gap-0 mx-auto">
             {onboardingSteps.map((step, i) => (
               <div key={step.label} className="flex items-start gap-3">
                 {/* Step indicator dot + connector */}
@@ -131,12 +131,12 @@ export function DashboardAuthOverlay({
                     )}
                   </div>
                   {i < onboardingSteps.length - 1 && (
-                    <div className="h-4 w-px bg-slate-200 dark:bg-white/10" />
+                    <div className="h-2.5 sm:h-4 w-px bg-slate-200 dark:bg-white/10" />
                   )}
                 </div>
                 {/* Step label */}
                 <span
-                  className={`pt-[1px] text-[12.5px] font-medium ${
+                  className={`pt-[1px] text-[11.5px] sm:text-[12.5px] font-medium ${
                     step.isLast
                       ? "text-blue-600 dark:text-cyan-400 font-semibold"
                       : "text-slate-500 dark:text-slate-400"
@@ -149,7 +149,7 @@ export function DashboardAuthOverlay({
           </div>
 
           {/* Action Buttons */}
-          <div className="mt-8 flex w-full flex-col gap-3 sm:flex-row sm:gap-3">
+          <div className="mt-5 sm:mt-8 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-5 py-3 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)]"
@@ -170,14 +170,14 @@ export function DashboardAuthOverlay({
           {onPreview && (
             <button
               onClick={onPreview}
-              className="mt-6 text-[13px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+              className="mt-4 sm:mt-6 text-[12px] sm:text-[13px] font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
             >
               Just browsing? Preview dashboard
             </button>
           )}
 
           {/* Personalization-focused bottom text */}
-          <div className="mt-5 flex items-center justify-center gap-1.5 text-[11px] text-slate-400 dark:text-slate-500">
+          <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" />
               Your University