diff --git a/docs/index.html b/docs/index.html
index 0c1787b..baee33f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,20 +3,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ShellMate - SSH into Chess Mastery</title>
+    <title>ShellMate — SSH into Chess Mastery</title>
     <meta name="description" content="Play chess in your terminal over SSH. Challenge AI, play friends, or learn with interactive tutorials.">
+    <meta property="og:title" content="ShellMate — SSH into Chess Mastery">
+    <meta property="og:description" content="Terminal chess over SSH. No installs. Just ssh play@shellmate.sh">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://shellmate.sh">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
+            --bg-deep: #050505;
             --bg: #0a0a0a;
-            --bg-secondary: #111;
-            --text: #e5e5e5;
-            --text-muted: #888;
-            --accent: #22c55e;
-            --accent-dim: #16a34a;
-            --border: #222;
+            --bg-elevated: #111111;
+            --bg-card: rgba(17, 17, 17, 0.7);
+            --text: #fafafa;
+            --text-secondary: #a1a1a1;
+            --text-muted: #525252;
+            --accent: #10b981;
+            --accent-glow: rgba(16, 185, 129, 0.4);
+            --accent-secondary: #06b6d4;
+            --gradient-1: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #8b5cf6 100%);
+            --gradient-2: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            --border: rgba(255, 255, 255, 0.06);
+            --border-hover: rgba(255, 255, 255, 0.1);
         }
 
         * {
@@ -25,22 +36,73 @@
             box-sizing: border-box;
         }
 
+        html {
+            scroll-behavior: smooth;
+        }
+
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg);
+            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-deep);
             color: var(--text);
             line-height: 1.6;
-            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        /* Animated gradient background */
+        .bg-gradient {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            overflow: hidden;
+        }
+
+        .bg-gradient::before {
+            content: '';
+            position: absolute;
+            width: 150%;
+            height: 150%;
+            top: -25%;
+            left: -25%;
+            background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
+                        radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
+                        radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
+            animation: float 20s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            33% { transform: translate(2%, 2%) rotate(1deg); }
+            66% { transform: translate(-1%, 1%) rotate(-1deg); }
+        }
+
+        /* Grid pattern overlay */
+        .bg-grid {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            background-image: 
+                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+            background-size: 64px 64px;
+            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
         }
 
         .container {
-            max-width: 1000px;
+            max-width: 1200px;
             margin: 0 auto;
             padding: 0 24px;
         }
 
+        /* Header */
         header {
-            padding: 24px 0;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 100;
+            padding: 20px 0;
+            background: rgba(5, 5, 5, 0.8);
+            backdrop-filter: blur(20px);
             border-bottom: 1px solid var(--border);
         }
 
@@ -51,77 +113,210 @@
         }
 
         .logo {
-            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 1.25rem;
             font-weight: 700;
             color: var(--text);
             text-decoration: none;
         }
 
-        .logo span {
-            color: var(--accent);
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: var(--gradient-2);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+        }
+
+        nav {
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
 
         nav a {
-            color: var(--text-muted);
+            color: var(--text-secondary);
             text-decoration: none;
-            margin-left: 32px;
-            transition: color 0.2s;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.2s;
         }
 
         nav a:hover {
-            color: var(--accent);
+            color: var(--text);
+            background: rgba(255, 255, 255, 0.05);
         }
 
+        .nav-cta {
+            background: var(--text) !important;
+            color: var(--bg) !important;
+            margin-left: 8px;
+        }
+
+        .nav-cta:hover {
+            opacity: 0.9;
+        }
+
+        /* Hero */
         .hero {
-            padding: 120px 0 80px;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
             text-align: center;
+            padding: 140px 24px 80px;
+            position: relative;
+        }
+
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 14px 6px 8px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 100px;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-bottom: 32px;
+            backdrop-filter: blur(10px);
+        }
+
+        .hero-badge-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--accent);
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(0.9); }
         }
 
         .hero h1 {
-            font-size: 3.5rem;
+            font-size: clamp(3rem, 10vw, 6rem);
             font-weight: 700;
+            line-height: 1;
             margin-bottom: 24px;
-            line-height: 1.1;
+            letter-spacing: -0.03em;
         }
 
-        .hero h1 .chess {
-            display: inline-block;
-            animation: float 3s ease-in-out infinite;
+        .hero h1 .gradient-text {
+            background: var(--gradient-1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        @keyframes float {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-
-        .hero p {
-            font-size: 1.25rem;
-            color: var(--text-muted);
+        .hero-subtitle {
+            font-size: clamp(1.1rem, 2.5vw, 1.35rem);
+            color: var(--text-secondary);
             max-width: 600px;
             margin: 0 auto 48px;
+            line-height: 1.7;
         }
 
-        .terminal {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 24px 32px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 1.1rem;
-            display: inline-block;
-            text-align: left;
+        /* Terminal */
+        .terminal-wrapper {
+            position: relative;
             margin-bottom: 48px;
         }
 
-        .terminal .prompt {
+        .terminal {
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
+                        0 20px 50px -20px rgba(0, 0, 0, 0.5),
+                        0 0 100px -50px var(--accent-glow);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        .terminal-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 16px 20px;
+            background: rgba(255, 255, 255, 0.02);
+            border-bottom: 1px solid var(--border);
+        }
+
+        .terminal-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+
+        .terminal-dot.red { background: #ff5f57; }
+        .terminal-dot.yellow { background: #febc2e; }
+        .terminal-dot.green { background: #28c840; }
+
+        .terminal-title {
+            flex: 1;
+            text-align: center;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+
+        .terminal-body {
+            padding: 24px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1rem;
+            min-height: 120px;
+        }
+
+        .terminal-line {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .terminal-prompt {
             color: var(--accent);
         }
 
-        .terminal .cmd {
+        .terminal-command {
             color: var(--text);
         }
 
-        .cta-buttons {
+        .terminal-cursor {
+            display: inline-block;
+            width: 10px;
+            height: 20px;
+            background: var(--accent);
+            animation: blink 1s step-end infinite;
+            vertical-align: middle;
+            margin-left: 2px;
+        }
+
+        @keyframes blink {
+            50% { opacity: 0; }
+        }
+
+        .terminal-output {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-top: 16px;
+            padding-top: 16px;
+            border-top: 1px dashed var(--border);
+        }
+
+        /* CTA Buttons */
+        .cta-group {
             display: flex;
             gap: 16px;
             justify-content: center;
@@ -129,21 +324,27 @@
         }
 
         .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
             padding: 14px 28px;
-            border-radius: 8px;
+            border-radius: 12px;
             font-size: 1rem;
             font-weight: 600;
             text-decoration: none;
             transition: all 0.2s;
+            border: none;
+            cursor: pointer;
         }
 
         .btn-primary {
-            background: var(--accent);
-            color: #000;
+            background: var(--text);
+            color: var(--bg);
         }
 
         .btn-primary:hover {
-            background: var(--accent-dim);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 40px -10px rgba(255, 255, 255, 0.3);
         }
 
         .btn-secondary {
@@ -153,199 +354,450 @@
         }
 
         .btn-secondary:hover {
-            border-color: var(--accent);
-            color: var(--accent);
+            border-color: var(--text-secondary);
+            background: rgba(255, 255, 255, 0.03);
         }
 
-        .features {
-            padding: 80px 0;
-            border-top: 1px solid var(--border);
+        /* Floating chess pieces */
+        .floating-pieces {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
         }
 
-        .features h2 {
-            text-align: center;
+        .floating-piece {
+            position: absolute;
             font-size: 2rem;
-            margin-bottom: 48px;
+            opacity: 0.1;
+            animation: float-piece 15s ease-in-out infinite;
+        }
+
+        .floating-piece:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
+        .floating-piece:nth-child(2) { top: 25%; right: 15%; animation-delay: -3s; }
+        .floating-piece:nth-child(3) { top: 60%; left: 8%; animation-delay: -6s; }
+        .floating-piece:nth-child(4) { top: 70%; right: 10%; animation-delay: -9s; }
+        .floating-piece:nth-child(5) { top: 40%; left: 5%; animation-delay: -12s; }
+        .floating-piece:nth-child(6) { top: 50%; right: 5%; animation-delay: -2s; }
+
+        @keyframes float-piece {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-30px) rotate(10deg); }
+        }
+
+        /* Features */
+        .features {
+            padding: 120px 0;
+            position: relative;
+        }
+
+        .section-header {
+            text-align: center;
+            margin-bottom: 64px;
+        }
+
+        .section-label {
+            display: inline-block;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--accent);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 16px;
+        }
+
+        .section-title {
+            font-size: clamp(2rem, 5vw, 3rem);
+            font-weight: 700;
+            letter-spacing: -0.02em;
         }
 
         .features-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            grid-template-columns: repeat(3, 1fr);
             gap: 24px;
         }
 
-        .feature {
-            background: var(--bg-secondary);
+        @media (max-width: 900px) {
+            .features-grid { grid-template-columns: repeat(2, 1fr); }
+        }
+
+        @media (max-width: 600px) {
+            .features-grid { grid-template-columns: 1fr; }
+        }
+
+        .feature-card {
+            background: var(--bg-card);
             border: 1px solid var(--border);
-            border-radius: 12px;
+            border-radius: 20px;
             padding: 32px;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.03) 100%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .feature-card:hover {
+            border-color: var(--border-hover);
+            transform: translateY(-4px);
+        }
+
+        .feature-card:hover::before {
+            opacity: 1;
         }
 
         .feature-icon {
-            font-size: 2rem;
-            margin-bottom: 16px;
+            width: 48px;
+            height: 48px;
+            background: rgba(16, 185, 129, 0.1);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin-bottom: 20px;
         }
 
-        .feature h3 {
+        .feature-card h3 {
             font-size: 1.25rem;
+            font-weight: 600;
             margin-bottom: 8px;
         }
 
-        .feature p {
-            color: var(--text-muted);
+        .feature-card p {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
         }
 
-        .quick-start {
-            padding: 80px 0;
-            border-top: 1px solid var(--border);
+        /* Demo Section */
+        .demo {
+            padding: 120px 0;
+            position: relative;
         }
 
-        .quick-start h2 {
-            text-align: center;
-            font-size: 2rem;
-            margin-bottom: 48px;
-        }
-
-        .commands {
+        .demo-content {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            grid-template-columns: 1fr 1fr;
+            gap: 64px;
+            align-items: center;
+        }
+
+        @media (max-width: 900px) {
+            .demo-content {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+        }
+
+        .demo-text h2 {
+            font-size: clamp(2rem, 4vw, 2.75rem);
+            font-weight: 700;
+            margin-bottom: 24px;
+            letter-spacing: -0.02em;
+        }
+
+        .demo-text p {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            margin-bottom: 32px;
+        }
+
+        .demo-board {
+            font-family: 'JetBrains Mono', monospace;
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 24px;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            white-space: pre;
+            color: var(--text-secondary);
+            box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
+        }
+
+        .demo-board .piece-white { color: var(--text); }
+        .demo-board .piece-black { color: var(--accent); }
+        .demo-board .coords { color: var(--text-muted); }
+
+        /* Commands Section */
+        .commands {
+            padding: 120px 0;
+            background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.02) 50%, transparent 100%);
+        }
+
+        .commands-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
             gap: 16px;
             max-width: 800px;
             margin: 0 auto;
         }
 
-        .command {
-            background: var(--bg-secondary);
+        @media (max-width: 600px) {
+            .commands-grid { grid-template-columns: 1fr; }
+        }
+
+        .command-card {
+            background: var(--bg-card);
             border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 20px 24px;
-            font-family: 'JetBrains Mono', monospace;
+            border-radius: 12px;
+            padding: 24px;
+            backdrop-filter: blur(10px);
+            transition: all 0.2s;
+        }
+
+        .command-card:hover {
+            border-color: var(--accent);
         }
 
         .command-label {
-            color: var(--text-muted);
             font-size: 0.85rem;
+            color: var(--text-muted);
             margin-bottom: 8px;
-            font-family: 'Inter', sans-serif;
         }
 
-        .command code {
+        .command-code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1rem;
             color: var(--accent);
         }
 
+        /* Footer */
         footer {
-            padding: 48px 0;
+            padding: 64px 0;
             border-top: 1px solid var(--border);
-            text-align: center;
-            color: var(--text-muted);
         }
 
-        footer a {
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 24px;
+        }
+
+        .footer-links {
+            display: flex;
+            gap: 32px;
+        }
+
+        .footer-links a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.2s;
+        }
+
+        .footer-links a:hover {
             color: var(--text);
+        }
+
+        .footer-credit {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        .footer-credit a {
+            color: var(--text-secondary);
             text-decoration: none;
         }
 
-        footer a:hover {
-            color: var(--accent);
-        }
-
-        @media (max-width: 640px) {
-            .hero h1 {
-                font-size: 2.5rem;
-            }
-            .terminal {
-                font-size: 0.9rem;
-                padding: 16px 20px;
-            }
+        /* Mobile nav */
+        @media (max-width: 768px) {
+            nav { display: none; }
+            .hero h1 { font-size: 2.5rem; }
+            .terminal-body { font-size: 0.85rem; padding: 16px; }
         }
     </style>
 </head>
 <body>
+    <div class="bg-gradient"></div>
+    <div class="bg-grid"></div>
+
     <header>
         <div class="container">
-            <a href="/" class="logo">♟️ Shell<span>Mate</span></a>
+            <a href="/" class="logo">
+                <span class="logo-icon">♟</span>
+                ShellMate
+            </a>
             <nav>
                 <a href="#features">Features</a>
+                <a href="#demo">Demo</a>
                 <a href="#start">Quick Start</a>
                 <a href="https://github.com/ghndrx/shellmate">GitHub</a>
+                <a href="#start" class="nav-cta">Play Now</a>
             </nav>
         </div>
     </header>
 
     <main>
         <section class="hero">
+            <div class="floating-pieces">
+                <span class="floating-piece">♔</span>
+                <span class="floating-piece">♕</span>
+                <span class="floating-piece">♘</span>
+                <span class="floating-piece">♗</span>
+                <span class="floating-piece">♖</span>
+                <span class="floating-piece">♙</span>
+            </div>
+
             <div class="container">
-                <h1><span class="chess">♟️</span> SSH into Chess Mastery</h1>
-                <p>Play chess in your terminal. Challenge AI, battle friends, or learn with interactive tutorials — all over SSH.</p>
-                
-                <div class="terminal">
-                    <span class="prompt">$</span> <span class="cmd">ssh play@shellmate.sh</span>
+                <div class="hero-badge">
+                    <span class="hero-badge-dot"></span>
+                    Now in public beta
                 </div>
 
-                <div class="cta-buttons">
-                    <a href="#start" class="btn btn-primary">Get Started</a>
-                    <a href="https://github.com/ghndrx/shellmate" class="btn btn-secondary">View Source</a>
+                <h1>
+                    SSH into<br>
+                    <span class="gradient-text">Chess Mastery</span>
+                </h1>
+
+                <p class="hero-subtitle">
+                    Play chess entirely in your terminal. No installs, no accounts, no nonsense. 
+                    Just pure chess over SSH.
+                </p>
+
+                <div class="terminal-wrapper">
+                    <div class="terminal">
+                        <div class="terminal-header">
+                            <span class="terminal-dot red"></span>
+                            <span class="terminal-dot yellow"></span>
+                            <span class="terminal-dot green"></span>
+                            <span class="terminal-title">Terminal — ssh</span>
+                        </div>
+                        <div class="terminal-body">
+                            <div class="terminal-line">
+                                <span class="terminal-prompt">$</span>
+                                <span class="terminal-command" id="typed-command"></span>
+                                <span class="terminal-cursor"></span>
+                            </div>
+                            <div class="terminal-output" id="terminal-output" style="display: none;">
+                                ✓ Connected to ShellMate<br>
+                                ♟ Welcome! Choose your game mode...
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="cta-group">
+                    <a href="#start" class="btn btn-primary">
+                        <span>→</span> Start Playing
+                    </a>
+                    <a href="https://github.com/ghndrx/shellmate" class="btn btn-secondary">
+                        View on GitHub
+                    </a>
                 </div>
             </div>
         </section>
 
         <section class="features" id="features">
             <div class="container">
-                <h2>Features</h2>
+                <div class="section-header">
+                    <span class="section-label">Features</span>
+                    <h2 class="section-title">Everything you need to master chess</h2>
+                </div>
+
                 <div class="features-grid">
-                    <div class="feature">
+                    <div class="feature-card">
                         <div class="feature-icon">🤖</div>
-                        <h3>vs AI</h3>
-                        <p>Challenge Stockfish at any difficulty — from beginner to grandmaster level.</p>
+                        <h3>AI Opponent</h3>
+                        <p>Challenge Stockfish at any difficulty. From beginner-friendly to grandmaster-crushing.</p>
                     </div>
-                    <div class="feature">
+                    <div class="feature-card">
                         <div class="feature-icon">⚔️</div>
-                        <h3>vs Player</h3>
-                        <p>Real-time PvP matchmaking with ELO ratings. Climb the leaderboard.</p>
+                        <h3>PvP Matchmaking</h3>
+                        <p>Real-time multiplayer with ELO ratings. Find opponents at your skill level instantly.</p>
                     </div>
-                    <div class="feature">
+                    <div class="feature-card">
                         <div class="feature-icon">📚</div>
-                        <h3>Learn</h3>
-                        <p>Interactive tutorials, puzzles, and AI-powered move explanations.</p>
+                        <h3>Interactive Tutorials</h3>
+                        <p>Learn from absolute basics to advanced tactics with step-by-step guidance.</p>
                     </div>
-                    <div class="feature">
-                        <div class="feature-icon">👀</div>
-                        <h3>Spectate</h3>
-                        <p>Watch live games and learn from other players.</p>
-                    </div>
-                    <div class="feature">
+                    <div class="feature-card">
                         <div class="feature-icon">🧠</div>
                         <h3>Move Analysis</h3>
-                        <p>Understand why moves are good or bad with AI explanations.</p>
+                        <p>Understand every move. AI explains why it's brilliant—or a blunder.</p>
                     </div>
-                    <div class="feature">
+                    <div class="feature-card">
+                        <div class="feature-icon">👀</div>
+                        <h3>Spectate</h3>
+                        <p>Watch live games in progress. Learn from the best players on the server.</p>
+                    </div>
+                    <div class="feature-card">
                         <div class="feature-icon">🏆</div>
-                        <h3>Rankings</h3>
-                        <p>Global leaderboard, game history, and personal stats.</p>
+                        <h3>Leaderboard</h3>
+                        <p>Climb the global rankings. Track your progress with detailed statistics.</p>
                     </div>
                 </div>
             </div>
         </section>
 
-        <section class="quick-start" id="start">
+        <section class="demo" id="demo">
             <div class="container">
-                <h2>Quick Start</h2>
-                <div class="commands">
-                    <div class="command">
+                <div class="demo-content">
+                    <div class="demo-text">
+                        <h2>Beautiful chess in your terminal</h2>
+                        <p>
+                            A clean, responsive TUI that works in any terminal emulator. 
+                            Unicode pieces, intuitive controls, and zero latency.
+                        </p>
+                        <a href="#start" class="btn btn-primary">Try it yourself →</a>
+                    </div>
+                    <div class="demo-board"><span class="coords">    a   b   c   d   e   f   g   h</span>
+  <span class="coords">┌───┬───┬───┬───┬───┬───┬───┬───┐</span>
+<span class="coords">8</span> │ <span class="piece-black">♜</span> │ <span class="piece-black">♞</span> │ <span class="piece-black">♝</span> │ <span class="piece-black">♛</span> │ <span class="piece-black">♚</span> │ <span class="piece-black">♝</span> │ <span class="piece-black">♞</span> │ <span class="piece-black">♜</span> │ <span class="coords">8</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">7</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="piece-black">♟</span> │ <span class="coords">7</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">6</span> │   │   │   │   │   │   │   │   │ <span class="coords">6</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">5</span> │   │   │   │   │   │   │   │   │ <span class="coords">5</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">4</span> │   │   │   │   │ <span class="piece-white">♙</span> │   │   │   │ <span class="coords">4</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">3</span> │   │   │   │   │   │   │   │   │ <span class="coords">3</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">2</span> │ <span class="piece-white">♙</span> │ <span class="piece-white">♙</span> │ <span class="piece-white">♙</span> │ <span class="piece-white">♙</span> │   │ <span class="piece-white">♙</span> │ <span class="piece-white">♙</span> │ <span class="piece-white">♙</span> │ <span class="coords">2</span>
+  <span class="coords">├───┼───┼───┼───┼───┼───┼───┼───┤</span>
+<span class="coords">1</span> │ <span class="piece-white">♖</span> │ <span class="piece-white">♘</span> │ <span class="piece-white">♗</span> │ <span class="piece-white">♕</span> │ <span class="piece-white">♔</span> │ <span class="piece-white">♗</span> │ <span class="piece-white">♘</span> │ <span class="piece-white">♖</span> │ <span class="coords">1</span>
+  <span class="coords">└───┴───┴───┴───┴───┴───┴───┴───┘</span>
+<span class="coords">    a   b   c   d   e   f   g   h</span></div>
+                </div>
+            </div>
+        </section>
+
+        <section class="commands" id="start">
+            <div class="container">
+                <div class="section-header">
+                    <span class="section-label">Quick Start</span>
+                    <h2 class="section-title">One command. That's it.</h2>
+                </div>
+
+                <div class="commands-grid">
+                    <div class="command-card">
                         <div class="command-label">Play a game</div>
-                        <code>ssh play@shellmate.sh</code>
+                        <div class="command-code">ssh play@shellmate.sh</div>
                     </div>
-                    <div class="command">
+                    <div class="command-card">
                         <div class="command-label">Learn chess</div>
-                        <code>ssh learn@shellmate.sh</code>
+                        <div class="command-code">ssh learn@shellmate.sh</div>
                     </div>
-                    <div class="command">
-                        <div class="command-label">Watch live games</div>
-                        <code>ssh watch@shellmate.sh</code>
+                    <div class="command-card">
+                        <div class="command-label">Spectate games</div>
+                        <div class="command-code">ssh watch@shellmate.sh</div>
                     </div>
-                    <div class="command">
+                    <div class="command-card">
                         <div class="command-label">Self-host</div>
-                        <code>docker compose up -d</code>
+                        <div class="command-code">docker compose up -d</div>
                     </div>
                 </div>
             </div>
@@ -354,9 +806,50 @@
 
     <footer>
         <div class="container">
-            <p>Built with ♟️ by <a href="https://gregh.dev">Greg Hendrickson</a></p>
-            <p style="margin-top: 8px;"><a href="https://github.com/ghndrx/shellmate">GitHub</a></p>
+            <div class="footer-content">
+                <div class="footer-links">
+                    <a href="https://github.com/ghndrx/shellmate">GitHub</a>
+                    <a href="https://github.com/ghndrx/shellmate/issues">Issues</a>
+                    <a href="https://github.com/ghndrx/shellmate/blob/develop/CONTRIBUTING.md">Contribute</a>
+                </div>
+                <div class="footer-credit">
+                    Built with ♟ by <a href="https://gregh.dev">Greg Hendrickson</a>
+                </div>
+            </div>
         </div>
     </footer>
+
+    <script>
+        // Typing animation
+        const command = 'ssh play@shellmate.sh';
+        const typedCommand = document.getElementById('typed-command');
+        const terminalOutput = document.getElementById('terminal-output');
+        let i = 0;
+
+        function typeWriter() {
+            if (i < command.length) {
+                typedCommand.textContent += command.charAt(i);
+                i++;
+                setTimeout(typeWriter, 80 + Math.random() * 40);
+            } else {
+                setTimeout(() => {
+                    terminalOutput.style.display = 'block';
+                }, 500);
+            }
+        }
+
+        // Start typing after page load
+        setTimeout(typeWriter, 1000);
+
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
 </body>
 </html>
