diff --git a/public/streak-animation.html b/public/streak-animation.html
index a325b7c..8b63ec9 100644
--- a/public/streak-animation.html
+++ b/public/streak-animation.html
@@ -9,7 +9,7 @@
     --navy-900:#081226; --navy-800:#0c1c39; --navy-700:#13294d;
     --gold-200:#fdeeb8; --gold-300:#f6dd93; --gold-400:#e8c463; --gold-500:#d4af37;
     --gold-600:#b1892a; --gold-700:#7d5f18;
-    --ink:#e9eefb; --badge:220px; --grow:1.18; --halo-w:170%;
+    --ink:#e9eefb; --badge:240px; --grow:1.18; --halo-w:170%;
     --font:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   }
   *{box-sizing:border-box}
@@ -165,7 +165,7 @@
     display: none !important;
   }
   .stage {
-    height: 360px !important;
+    height: 100vh !important;
     width: 100% !important;
     max-width: 100% !important;
     padding: 0 !important;
diff --git a/scratch/port_streak_clean.py b/scratch/port_streak_clean.py
index dd8c472..b4b93cb 100644
--- a/scratch/port_streak_clean.py
+++ b/scratch/port_streak_clean.py
@@ -20,7 +20,7 @@ def port_html():
     display: none !important;
   }
   .stage {
-    height: 360px !important;
+    height: 100vh !important;
     width: 100% !important;
     max-width: 100% !important;
     padding: 0 !important;
@@ -59,8 +59,8 @@ def port_html():
     html = html.replace("Math.max(target,5)/5", "Math.max(target,3)/3")
     html = html.replace("(4 - target) / 3", "(3 - target) / 3")
     
-    # 5. Adjust badge size from 230px to 220px
-    html = html.replace("--badge:230px;", "--badge:220px;")
+    # 5. Adjust badge size from 230px to 240px
+    html = html.replace("--badge:230px;", "--badge:240px;")
 
     with open(dest_path, 'w', encoding='utf-8') as f:
         f.write(html)
diff --git a/src/components/Dashboard/StreakOnboardingModal.tsx b/src/components/Dashboard/StreakOnboardingModal.tsx
index 8b571dc..fbe9915 100644
--- a/src/components/Dashboard/StreakOnboardingModal.tsx
+++ b/src/components/Dashboard/StreakOnboardingModal.tsx
@@ -56,15 +56,15 @@ export function StreakOnboardingModal() {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-md animate-in fade-in duration-300">
       
-      {/* Centered Modal Card Container with Border (containing both the animation and text) */}
-      <div className="bg-background/95 border border-border shadow-[0_0_60px_-10px_rgba(0,240,255,0.2)] rounded-3xl w-full max-w-2xl relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
+      {/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
+      <div className="bg-black border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
         
         {/* Subtle background glow */}
         <div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
         <div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
 
-        {/* Top Celebration Animation Panel (Iframe with height 360px, border-b) */}
-        <div className="relative w-full h-[360px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
+        {/* Top Celebration Animation Panel (Iframe with height 60%, border-b, pure black bg) */}
+        <div className="relative w-full h-[60%] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-black">
           <iframe
             src={`/streak-animation.html?streak=${streak}`}
             className="w-full h-full border-none"
@@ -73,40 +73,42 @@ export function StreakOnboardingModal() {
           />
         </div>
 
-        {/* Bottom Greetings & Action Panel */}
-        <div className="p-6 text-center space-y-4">
+        {/* Bottom Greetings & Action Panel (height 40%, pure black bg) */}
+        <div className="p-8 text-center flex-1 flex flex-col justify-between bg-black z-20">
           
-          {/* Badge Indicators */}
-          <div className="flex flex-col items-center gap-2">
-            {streak > 0 ? (
-              <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
-                <Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
-              </div>
-            ) : (
-              <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
-                <Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
-              </div>
-            )}
+          <div className="space-y-4">
+            {/* Badge Indicators */}
+            <div className="flex flex-col items-center gap-2">
+              {streak > 0 ? (
+                <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
+                  <Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
+                </div>
+              ) : (
+                <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
+                  <Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
+                </div>
+              )}
 
-            {trialDaysLeft > 0 && (
-              <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold rounded-full tracking-wider">
-                🎁 Free Trial: {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} remaining
-              </div>
-            )}
-          </div>
-          
-          {/* Greetings Text */}
-          <div className="space-y-2">
-            <h3 className="text-xl md:text-2xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
-              {wishTitle}
-            </h3>
-            <p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-sm mx-auto">
-              {wishMessage}
-            </p>
+              {trialDaysLeft > 0 && (
+                <div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold rounded-full tracking-wider">
+                  🎁 Free Trial: {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} remaining
+                </div>
+              )}
+            </div>
+            
+            {/* Greetings Text */}
+            <div className="space-y-2">
+              <h3 className="text-xl md:text-2xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
+                {wishTitle}
+              </h3>
+              <p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-md mx-auto">
+                {wishMessage}
+              </p>
+            </div>
           </div>
 
           {/* Action Button */}
-          <div className="pt-1">
+          <div className="pt-2 max-w-sm w-full mx-auto">
             <Button 
               onClick={handleEnter}
               className="w-full h-12 rounded-xl text-base font-black bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 shadow-[0_0_15px_-3px_#00F0FF] hover:shadow-[0_0_25px_#00F0FF] hover:-translate-y-0.5 transition-all duration-300"