diff --git a/app/static/css/app.css b/app/static/css/app.css
index 862928f..6a76111 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -13,6 +13,7 @@
     --text-dark: #1F2937;
     --text-light: #FFFFFF;
     --overlay-dark: rgba(0, 0, 0, 0.5);
+    --bg-near-black: #0C0A14;
 }
 
 html,
diff --git a/app/templates/components/start_screen.html b/app/templates/components/start_screen.html
index 9fe766b..395a583 100644
--- a/app/templates/components/start_screen.html
+++ b/app/templates/components/start_screen.html
@@ -1,32 +1,128 @@
 <div id="game-container">
-<div class="flex flex-col items-center justify-center min-h-full p-6" style="background: linear-gradient(135deg, #1F2937 0%, #2D1B4E 50%, #1F2937 100%);">
-    <div class="text-center max-w-sm animate-fade-up">
-        <!-- Decorative top element -->
-        <div class="text-4xl mb-4" style="animation: fadeInDown 1s ease-out; letter-spacing: 0.3em;">◆ ✦ ◈</div>
-        
-        <h1 class="serif-display text-5xl" style="color: var(--primary-magenta); margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BOLLYWOOD</h1>
-        <h1 class="serif-display text-5xl" style="color: var(--accent-gold); margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">BINGO</h1>
-        <p class="geom-bold text-2xl" style="color: var(--accent-teal); margin-bottom: 2rem; letter-spacing: 0.1em;">~ Masala Cinema ~</p>
-
-        <!-- Rules card with ornate border -->
-        <div class="rounded-lg p-6 mb-8 ornate-border-dashed" style="background: rgba(255, 255, 255, 0.95); border-color: var(--accent-gold); animation: fadeInUp 1.2s ease-out;">
-            <h2 class="serif-title text-2xl mb-3" style="color: var(--primary-magenta);">How to Play</h2>
-            <ul class="text-left text-gray-700 text-sm space-y-2">
-                <li>🎬 Find people who match the questions</li>
-                <li>🎭 Tap a square when you find a match</li>
-                <li>✨ Get 5 in a row to win the show!</li>
-            </ul>
+<div style="min-height: 100%; background: var(--bg-near-black); color: var(--text-light); font-family: 'Fredoka', system-ui, sans-serif; overflow-y: auto;">
+
+    <!-- Hero Section -->
+    <section style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 3rem 1.5rem; text-align: center; animation: elegantFadeIn 1s ease-out forwards;">
+        <!-- Thin rule above title -->
+        <div style="width: 3rem; height: 1px; background: var(--accent-gold); margin: 0 auto 2.5rem; opacity: 0.7;"></div>
+
+        <p class="geom-bold" style="font-size: 0.75rem; letter-spacing: 0.35em; color: var(--accent-teal); text-transform: uppercase; margin-bottom: 1.25rem; opacity: 0.85;">A Social Icebreaker Game</p>
+
+        <h1 class="serif-display" style="font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1.05; letter-spacing: 0.04em; margin-bottom: 0.15em;">
+            <span style="color: var(--text-light);">BOLLYWOOD</span>
+        </h1>
+        <h1 class="serif-display" style="font-size: clamp(3rem, 10vw, 5.5rem); line-height: 1.05; letter-spacing: 0.04em; color: var(--accent-gold); margin-bottom: 2rem;">BINGO</h1>
+
+        <p style="font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.6); max-width: 28rem; margin: 0 auto 3rem; font-style: italic;">
+            Mingle, match, and celebrate — one square at a time.
+        </p>
+
+        <!-- CTA button -->
+        <button
+            class="hero-cta"
+            hx-post="/start"
+            hx-target="#game-container"
+            hx-swap="outerHTML"
+            style="background: transparent; border: 1px solid var(--accent-gold); color: var(--accent-gold); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 3rem; border-radius: 0.25rem; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;">
+            BEGIN THE SHOW
+        </button>
+
+        <!-- Subtle scroll hint -->
+        <div aria-hidden="true" style="position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.375rem; opacity: 0.35;">
+            <span style="font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;">scroll</span>
+            <div style="width: 1px; height: 1.5rem; background: rgba(255,255,255,0.4);"></div>
+        </div>
+    </section>
+
+    <!-- Why Section -->
+    <section style="padding: 5rem 1.5rem; max-width: 52rem; margin: 0 auto;">
+        <h2 class="serif-title" style="text-align: center; font-size: 1.5rem; color: rgba(255,255,255,0.9); margin-bottom: 3.5rem; letter-spacing: 0.02em;">Why You'll Love It</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem;">
+
+            <div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--primary-magenta); border-radius: 0.25rem;">
+                <p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--primary-magenta); margin-bottom: 0.75rem;">Connect</p>
+                <p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Break the Ice</p>
+                <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">Discover fellow cinema lovers and start conversations that actually matter.</p>
+            </div>
+
+            <div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--accent-teal); border-radius: 0.25rem;">
+                <p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-teal); margin-bottom: 0.75rem;">Play</p>
+                <p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Simple Mechanics</p>
+                <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">No setup, no scorekeeping. Just mingle, find matches, and mark your card.</p>
+            </div>
+
+            <div style="padding: 1.75rem; border: 1px solid rgba(255,255,255,0.08); border-top: 2px solid var(--accent-gold); border-radius: 0.25rem;">
+                <p class="geom-bold" style="font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 0.75rem;">Celebrate</p>
+                <p class="serif-title" style="font-size: 1.125rem; color: rgba(255,255,255,0.9); margin-bottom: 0.5rem;">Win Together</p>
+                <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5);">Five in a row and the room erupts. Every game ends in shared joy.</p>
+            </div>
+
         </div>
+    </section>
+
+    <!-- Divider -->
+    <div style="max-width: 52rem; margin: 0 auto 5rem; padding: 0 1.5rem;">
+        <div style="height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);"></div>
+    </div>
+
+    <!-- How It Works Section -->
+    <section style="padding: 0 1.5rem 5rem; max-width: 38rem; margin: 0 auto;">
+        <h2 class="serif-title" style="text-align: center; font-size: 1.5rem; color: rgba(255,255,255,0.9); margin-bottom: 3.5rem; letter-spacing: 0.02em;">How to Play</h2>
+
+        <ol style="list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem;">
+            <li style="display: flex; gap: 1.5rem; align-items: flex-start;">
+                <span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">1</span>
+                <div style="padding-top: 0.25rem;">
+                    <p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Start your card</p>
+                    <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Tap the button and receive your unique 5×5 bingo card filled with social questions.</p>
+                </div>
+            </li>
+            <li style="display: flex; gap: 1.5rem; align-items: flex-start;">
+                <span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">2</span>
+                <div style="padding-top: 0.25rem;">
+                    <p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Find people who match</p>
+                    <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Mingle with the room. When someone fits a square, tap it to mark it.</p>
+                </div>
+            </li>
+            <li style="display: flex; gap: 1.5rem; align-items: flex-start;">
+                <span class="serif-display" style="font-size: 2.5rem; line-height: 1; color: rgba(255,255,255,0.12); flex-shrink: 0; width: 2.5rem; text-align: right;">3</span>
+                <div style="padding-top: 0.25rem;">
+                    <p class="geom-bold" style="font-size: 0.9rem; color: rgba(255,255,255,0.9); margin-bottom: 0.3rem;">Get five in a row</p>
+                    <p style="font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.45);">Horizontal, vertical, or diagonal — first to five wins the show!</p>
+                </div>
+            </li>
+        </ol>
+    </section>
 
-        <!-- Start button with glow and gradient -->
+    <!-- Final CTA Section -->
+    <section style="text-align: center; padding: 5rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06);">
+        <div style="width: 3rem; height: 1px; background: var(--accent-gold); margin: 0 auto 2.5rem; opacity: 0.5;"></div>
+        <h2 class="serif-title" style="font-size: 1.25rem; color: rgba(255,255,255,0.85); margin-bottom: 0.75rem; letter-spacing: 0.02em;">Ready to play?</h2>
+        <p style="font-size: 0.85rem; color: rgba(255,255,255,0.4); margin-bottom: 2.5rem; font-style: italic;">Your card is waiting.</p>
         <button
+            class="final-cta"
             hx-post="/start"
             hx-target="#game-container"
             hx-swap="outerHTML"
-            class="w-full text-white font-bold py-4 px-8 rounded-lg text-lg btn-glow" 
-            style="background: linear-gradient(135deg, var(--primary-magenta), var(--accent-saffron)); box-shadow: 0 8px 20px rgba(217, 70, 239, 0.4); font-family: 'Fredoka', sans-serif; transition: all 0.3s ease;">
+            style="background: var(--accent-gold); border: none; color: var(--bg-near-black); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 1rem 3rem; border-radius: 0.25rem; cursor: pointer; transition: opacity 0.2s ease, box-shadow 0.2s ease;">
             🎬 BEGIN THE SHOW 🎬
         </button>
-    </div>
+    </section>
+
 </div>
+
+<style>
+    @keyframes elegantFadeIn {
+        from { opacity: 0; transform: translateY(12px); }
+        to   { opacity: 1; transform: translateY(0); }
+    }
+    .hero-cta:hover {
+        background: rgba(252, 211, 77, 0.1) !important;
+        box-shadow: 0 0 24px rgba(252, 211, 77, 0.18);
+    }
+    .final-cta:hover {
+        opacity: 0.85;
+        box-shadow: 0 4px 20px rgba(252, 211, 77, 0.35);
+    }
+</style>
 </div>