diff --git a/public/streak-animation.html b/public/streak-animation.html
index 8b63ec9..8bc5235 100644
--- a/public/streak-animation.html
+++ b/public/streak-animation.html
@@ -155,11 +155,13 @@
     .stage.play.tier3 .scene,.stage.play.tier3 .flash{animation:none}
   }
 
-  body {
-    background: transparent !important;
+  body, html {
+    background: #000000 !important;
+    background-image: none !important;
   }
   body.sad {
-    background: transparent !important;
+    background: #000000 !important;
+    background-image: none !important;
   }
   body::after {
     display: none !important;
diff --git a/scratch/port_streak_clean.py b/scratch/port_streak_clean.py
index b4b93cb..174d1d4 100644
--- a/scratch/port_streak_clean.py
+++ b/scratch/port_streak_clean.py
@@ -10,11 +10,13 @@ def port_html():
 
     # 1. Inject CSS to make background transparent and hide stage layout
     hide_css = """
-  body {
-    background: transparent !important;
+  body, html {
+    background: #000000 !important;
+    background-image: none !important;
   }
   body.sad {
-    background: transparent !important;
+    background: #000000 !important;
+    background-image: none !important;
   }
   body::after {
     display: none !important;
diff --git a/src/components/Dashboard/StreakOnboardingModal.tsx b/src/components/Dashboard/StreakOnboardingModal.tsx
index fbe9915..599e2e2 100644
--- a/src/components/Dashboard/StreakOnboardingModal.tsx
+++ b/src/components/Dashboard/StreakOnboardingModal.tsx
@@ -63,8 +63,8 @@ export function StreakOnboardingModal() {
         <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 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">
+        {/* Top Celebration Animation Panel (Iframe with height 60%, pure black bg) */}
+        <div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-black">
           <iframe
             src={`/streak-animation.html?streak=${streak}`}
             className="w-full h-full border-none"
@@ -78,30 +78,30 @@ export function StreakOnboardingModal() {
           
           <div className="space-y-4">
             {/* Badge Indicators */}
-            <div className="flex flex-col items-center gap-2">
+            <div className="flex flex-col items-center gap-3">
               {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 className="inline-flex items-center gap-2 px-4 py-1.5 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-sm md:text-base font-extrabold rounded-full tracking-wider uppercase">
+                  <Flame size={16} 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 className="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-500/10 border border-blue-500/30 text-blue-400 text-sm md:text-base font-extrabold rounded-full tracking-wider uppercase">
+                  <Sparkles size={16} 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">
+                <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm md:text-base 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">
+            <div className="space-y-3">
+              <h3 className="text-2xl md:text-3xl 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">
+              <p className="text-gray-400 text-sm md:text-base leading-relaxed max-w-lg mx-auto">
                 {wishMessage}
               </p>
             </div>