diff --git a/docs/CNAME b/docs/CNAME
new file mode 100644
index 0000000..bc5e7fe
--- /dev/null
+++ b/docs/CNAME
@@ -0,0 +1 @@
+shellmate.sh
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..0c1787b
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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.">
+    <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">
+    <style>
+        :root {
+            --bg: #0a0a0a;
+            --bg-secondary: #111;
+            --text: #e5e5e5;
+            --text-muted: #888;
+            --accent: #22c55e;
+            --accent-dim: #16a34a;
+            --border: #222;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 0 24px;
+        }
+
+        header {
+            padding: 24px 0;
+            border-bottom: 1px solid var(--border);
+        }
+
+        header .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text);
+            text-decoration: none;
+        }
+
+        .logo span {
+            color: var(--accent);
+        }
+
+        nav a {
+            color: var(--text-muted);
+            text-decoration: none;
+            margin-left: 32px;
+            transition: color 0.2s;
+        }
+
+        nav a:hover {
+            color: var(--accent);
+        }
+
+        .hero {
+            padding: 120px 0 80px;
+            text-align: center;
+        }
+
+        .hero h1 {
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 24px;
+            line-height: 1.1;
+        }
+
+        .hero h1 .chess {
+            display: inline-block;
+            animation: float 3s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .hero p {
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            max-width: 600px;
+            margin: 0 auto 48px;
+        }
+
+        .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;
+            margin-bottom: 48px;
+        }
+
+        .terminal .prompt {
+            color: var(--accent);
+        }
+
+        .terminal .cmd {
+            color: var(--text);
+        }
+
+        .cta-buttons {
+            display: flex;
+            gap: 16px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 14px 28px;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: all 0.2s;
+        }
+
+        .btn-primary {
+            background: var(--accent);
+            color: #000;
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-dim);
+        }
+
+        .btn-secondary {
+            background: transparent;
+            color: var(--text);
+            border: 1px solid var(--border);
+        }
+
+        .btn-secondary:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+        }
+
+        .features {
+            padding: 80px 0;
+            border-top: 1px solid var(--border);
+        }
+
+        .features h2 {
+            text-align: center;
+            font-size: 2rem;
+            margin-bottom: 48px;
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 24px;
+        }
+
+        .feature {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 32px;
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 16px;
+        }
+
+        .feature h3 {
+            font-size: 1.25rem;
+            margin-bottom: 8px;
+        }
+
+        .feature p {
+            color: var(--text-muted);
+        }
+
+        .quick-start {
+            padding: 80px 0;
+            border-top: 1px solid var(--border);
+        }
+
+        .quick-start h2 {
+            text-align: center;
+            font-size: 2rem;
+            margin-bottom: 48px;
+        }
+
+        .commands {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 16px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .command {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 20px 24px;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .command-label {
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            margin-bottom: 8px;
+            font-family: 'Inter', sans-serif;
+        }
+
+        .command code {
+            color: var(--accent);
+        }
+
+        footer {
+            padding: 48px 0;
+            border-top: 1px solid var(--border);
+            text-align: center;
+            color: var(--text-muted);
+        }
+
+        footer a {
+            color: var(--text);
+            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;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <a href="/" class="logo">♟️ Shell<span>Mate</span></a>
+            <nav>
+                <a href="#features">Features</a>
+                <a href="#start">Quick Start</a>
+                <a href="https://github.com/ghndrx/shellmate">GitHub</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section class="hero">
+            <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>
+
+                <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>
+                </div>
+            </div>
+        </section>
+
+        <section class="features" id="features">
+            <div class="container">
+                <h2>Features</h2>
+                <div class="features-grid">
+                    <div class="feature">
+                        <div class="feature-icon">🤖</div>
+                        <h3>vs AI</h3>
+                        <p>Challenge Stockfish at any difficulty — from beginner to grandmaster level.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon">⚔️</div>
+                        <h3>vs Player</h3>
+                        <p>Real-time PvP matchmaking with ELO ratings. Climb the leaderboard.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon">📚</div>
+                        <h3>Learn</h3>
+                        <p>Interactive tutorials, puzzles, and AI-powered move explanations.</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-icon">🧠</div>
+                        <h3>Move Analysis</h3>
+                        <p>Understand why moves are good or bad with AI explanations.</p>
+                    </div>
+                    <div class="feature">
+                        <div class="feature-icon">🏆</div>
+                        <h3>Rankings</h3>
+                        <p>Global leaderboard, game history, and personal stats.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="quick-start" id="start">
+            <div class="container">
+                <h2>Quick Start</h2>
+                <div class="commands">
+                    <div class="command">
+                        <div class="command-label">Play a game</div>
+                        <code>ssh play@shellmate.sh</code>
+                    </div>
+                    <div class="command">
+                        <div class="command-label">Learn chess</div>
+                        <code>ssh learn@shellmate.sh</code>
+                    </div>
+                    <div class="command">
+                        <div class="command-label">Watch live games</div>
+                        <code>ssh watch@shellmate.sh</code>
+                    </div>
+                    <div class="command">
+                        <div class="command-label">Self-host</div>
+                        <code>docker compose up -d</code>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <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>
+    </footer>
+</body>
+</html>
