diff --git a/.gitignore b/.gitignore
index 3b462cb..51f349b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Firehose logs
+/data
diff --git a/package.json b/package.json
index e9b2e27..ba5dd05 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest run",
-		"test:watch": "vitest"
+		"test:watch": "vitest",
+		"firehose": "npx tsx scripts/firehose-logger.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.10",
diff --git a/scripts/firehose-logger.ts b/scripts/firehose-logger.ts
new file mode 100644
index 0000000..4a772aa
--- /dev/null
+++ b/scripts/firehose-logger.ts
@@ -0,0 +1,70 @@
+import { createWriteStream } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { mkdir } from 'fs/promises';
+
+const JETSTREAM_URL = 'wss://jetstream2.us-east.bsky.network/subscribe';
+const COLLECTIONS = ['blue.checkmate.game', 'blue.checkmate.challenge'];
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const logDir = join(__dirname, '..', 'data');
+const logFile = join(logDir, 'firehose.jsonl');
+
+await mkdir(logDir, { recursive: true });
+const stream = createWriteStream(logFile, { flags: 'a' });
+
+let cursor: number | null = null;
+let reconnectAttempts = 0;
+
+function connect() {
+	const url = new URL(JETSTREAM_URL);
+	for (const c of COLLECTIONS) {
+		url.searchParams.append('wantedCollections', c);
+	}
+	if (cursor) url.searchParams.set('cursor', String(cursor));
+
+	console.log(`[firehose] connecting...${cursor ? ` (cursor: ${cursor})` : ''}`);
+	const ws = new WebSocket(url.toString());
+
+	ws.onopen = () => {
+		console.log('[firehose] connected');
+		reconnectAttempts = 0;
+	};
+
+	ws.onmessage = (event) => {
+		const data = JSON.parse(String(event.data));
+		if (data.time_us) cursor = data.time_us;
+		if (data.kind !== 'commit') return;
+
+		const line = JSON.stringify({
+			time: new Date().toISOString(),
+			time_us: data.time_us,
+			did: data.did,
+			operation: data.commit.operation,
+			collection: data.commit.collection,
+			rkey: data.commit.rkey,
+			record: data.commit.record ?? null,
+		});
+
+		stream.write(line + '\n');
+		console.log(
+			`[firehose] ${data.commit.operation} ${data.commit.collection} ${data.did.slice(0, 24)}...`
+		);
+	};
+
+	ws.onclose = (event: CloseEvent) => {
+		console.log(`[firehose] disconnected: ${event.code} ${event.reason}`);
+		const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30_000);
+		reconnectAttempts++;
+		console.log(`[firehose] reconnecting in ${delay}ms...`);
+		setTimeout(connect, delay);
+	};
+
+	ws.onerror = () => {
+		ws.close();
+	};
+}
+
+console.log(`[firehose] logging to ${logFile}`);
+console.log(`[firehose] watching: ${COLLECTIONS.join(', ')}`);
+connect();
diff --git a/src/lib/components/GameCard.svelte b/src/lib/components/GameCard.svelte
new file mode 100644
index 0000000..f203ded
--- /dev/null
+++ b/src/lib/components/GameCard.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { Chess } from 'chess.js';
+	import { resolveHandle } from '$lib/microcosm';
+	import type { GameRecord } from '$lib/types';
+
+	type Props = {
+		did: string;
+		rkey: string;
+		record: GameRecord;
+		timestamp?: number;
+	};
+
+	let { did, rkey, record, timestamp }: Props = $props();
+
+	let whiteHandle = $state('...');
+	let blackHandle = $state('...');
+
+	let pgnInfo = $derived.by(() => {
+		const chess = new Chess();
+		if (record.pgn) {
+			try { chess.loadPgn(record.pgn); } catch { /* empty pgn is fine */ }
+		}
+		return {
+			moveCount: Math.ceil(chess.history().length / 2),
+			turn: chess.turn() === 'w' ? 'White' : 'Black',
+		};
+	});
+
+	$effect(() => {
+		if (record.white) resolveHandle(record.white).then((h) => (whiteHandle = h));
+		else whiteHandle = '?';
+		if (record.black) resolveHandle(record.black).then((h) => (blackHandle = h));
+		else blackHandle = '?';
+	});
+
+	function statusText(): string {
+		switch (record.status) {
+			case 'waiting':
+				return 'Waiting for opponent';
+			case 'active':
+				return `${pgnInfo.turn} to move \u2013 ${pgnInfo.moveCount} move${pgnInfo.moveCount !== 1 ? 's' : ''}`;
+			case 'completed':
+				return resultText();
+			case 'abandoned':
+				return 'Abandoned';
+			default:
+				return record.status;
+		}
+	}
+
+	function resultText(): string {
+		const reason = record.resultReason?.replace('_', ' ');
+		if (record.result === '1-0') return `White wins${reason ? ` by ${reason}` : ''}`;
+		if (record.result === '0-1') return `Black wins${reason ? ` by ${reason}` : ''}`;
+		if (record.result === '1/2-1/2') return `Draw${reason ? ` \u2013 ${reason}` : ''}`;
+		return 'Completed';
+	}
+
+	function timeAgo(ts?: number | string): string {
+		if (!ts) return '';
+		const ms = typeof ts === 'number' ? ts : new Date(ts).getTime();
+		const seconds = Math.floor((Date.now() - ms) / 1000);
+		if (seconds < 60) return 'just now';
+		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+		return `${Math.floor(seconds / 86400)}d ago`;
+	}
+</script>
+
+<a
+	href="/game/{did}/{rkey}"
+	class="block rounded-lg border border-border bg-bg-secondary px-4 py-3 transition-colors hover:border-accent-blue"
+>
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-2 text-sm">
+			<span class="font-medium">{whiteHandle}</span>
+			<span class="text-text-secondary">vs</span>
+			<span class="font-medium">{blackHandle}</span>
+		</div>
+		{#if record.status === 'active'}
+			<span class="rounded-full bg-success/20 px-2 py-0.5 text-xs text-success">Live</span>
+		{:else if record.status === 'waiting'}
+			<span class="rounded-full bg-warning/20 px-2 py-0.5 text-xs text-warning">Waiting</span>
+		{/if}
+	</div>
+	<div class="mt-1 flex items-center justify-between text-xs text-text-secondary">
+		<span>{statusText()}</span>
+		<span>{timeAgo(timestamp ?? record.createdAt)}</span>
+	</div>
+</a>
diff --git a/src/lib/microcosm.ts b/src/lib/microcosm.ts
index a5cf303..5a7219e 100644
--- a/src/lib/microcosm.ts
+++ b/src/lib/microcosm.ts
@@ -33,3 +33,14 @@ export async function resolveIdentity(identifier: string): Promise<SlingshotProf
 	if (!response.ok) return null;
 	return response.json();
 }
+
+const handleCache = new Map<string, string>();
+
+export async function resolveHandle(did: string): Promise<string> {
+	const cached = handleCache.get(did);
+	if (cached) return cached;
+	const profile = await resolveIdentity(did);
+	const handle = profile?.handle ?? did;
+	handleCache.set(did, handle);
+	return handle;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f44d831..5e0fb88 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,47 +1,144 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { auth } from '$lib/stores/auth.svelte';
-	import { findGamesForPlayer, type ConstellationLink } from '$lib/microcosm';
+	import { findGamesForPlayer } from '$lib/microcosm';
+	import { getGamePublic, COLLECTIONS } from '$lib/atproto';
+	import type { GameRecord } from '$lib/types';
+	import GameCard from '$lib/components/GameCard.svelte';
 	import LoginButton from '$lib/components/LoginButton.svelte';
 
-	let games: ConstellationLink[] = $state([]);
-	let loadingGames = $state(false);
+	interface GameEntry {
+		did: string;
+		rkey: string;
+		record: GameRecord;
+		timestamp: number;
+	}
+
+	let userGames: GameEntry[] = $state([]);
+	let loadingUserGames = $state(false);
+	let liveGames: GameEntry[] = $state([]);
+	let liveConnected = $state(false);
+
+	const JETSTREAM_URL = 'wss://jetstream2.us-east.bsky.network/subscribe';
+	const liveGameMap = new Map<string, GameEntry>();
+	let ws: WebSocket | null = null;
+	let destroyed = false;
+	let cursor = (Date.now() - 7_200_000) * 1000;
+	let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
-		if (auth.isLoggedIn && auth.did) {
-			loadGames(auth.did);
-		}
+		if (auth.isLoggedIn && auth.did) loadUserGames(auth.did);
 	});
 
-	async function loadGames(did: string) {
-		loadingGames = true;
-		try {
-			games = await findGamesForPlayer(did);
-		} catch {
-			games = [];
-		}
-		loadingGames = false;
-	}
+	onMount(() => {
+		connectLiveFeed();
+		return () => {
+			destroyed = true;
+			ws?.close();
+			if (reconnectTimer) clearTimeout(reconnectTimer);
+		};
+	});
 
 	function parseAtUri(uri: string): { did: string; rkey: string } | null {
 		const match = uri.match(/^at:\/\/([^/]+)\/[^/]+\/(.+)$/);
 		if (!match) return null;
 		return { did: match[1], rkey: match[2] };
 	}
+
+	async function loadUserGames(did: string) {
+		loadingUserGames = true;
+		try {
+			const links = await findGamesForPlayer(did);
+			const results = await Promise.all(
+				links.slice(0, 20).map(async (link) => {
+					const parsed = parseAtUri(link.uri);
+					if (!parsed) return null;
+					const record = await getGamePublic(parsed.did, parsed.rkey);
+					if (!record || record.parentGameUri) return null;
+					return {
+						did: parsed.did,
+						rkey: parsed.rkey,
+						record,
+						timestamp: new Date(record.createdAt).getTime(),
+					};
+				})
+			);
+			userGames = results
+				.filter((g): g is GameEntry => g !== null)
+				.sort((a, b) => b.timestamp - a.timestamp);
+		} catch {
+			userGames = [];
+		}
+		loadingUserGames = false;
+	}
+
+	function connectLiveFeed() {
+		if (destroyed) return;
+
+		const url = new URL(JETSTREAM_URL);
+		url.searchParams.set('wantedCollections', COLLECTIONS.game);
+		url.searchParams.set('cursor', String(cursor));
+
+		ws = new WebSocket(url.toString());
+
+		ws.onopen = () => {
+			liveConnected = true;
+		};
+
+		ws.onmessage = (event) => {
+			const data = JSON.parse(event.data);
+			if (data.time_us) cursor = data.time_us;
+			if (data.kind !== 'commit') return;
+
+			const { did, commit } = data;
+			if (commit.collection !== COLLECTIONS.game) return;
+
+			const key = `${did}/${commit.rkey}`;
+
+			if (commit.operation === 'delete') {
+				liveGameMap.delete(key);
+			} else {
+				const record = commit.record as GameRecord;
+				if (!record || record.parentGameUri) return;
+				if (record.status === 'active' || record.status === 'waiting') {
+					liveGameMap.set(key, {
+						did,
+						rkey: commit.rkey,
+						record,
+						timestamp: (data.time_us ?? Date.now() * 1000) / 1000,
+					});
+				} else {
+					liveGameMap.delete(key);
+				}
+			}
+
+			liveGames = [...liveGameMap.values()].sort((a, b) => b.timestamp - a.timestamp);
+		};
+
+		ws.onclose = () => {
+			liveConnected = false;
+			if (!destroyed) {
+				reconnectTimer = setTimeout(connectLiveFeed, 5000);
+			}
+		};
+
+		ws.onerror = () => ws?.close();
+	}
+
+	let activeUserGames = $derived(
+		userGames.filter((g) => g.record.status === 'active' || g.record.status === 'waiting')
+	);
+	let completedUserGames = $derived(
+		userGames.filter((g) => g.record.status === 'completed')
+	);
 </script>
 
-<div class="flex min-h-screen flex-col items-center justify-center gap-6 p-4">
-	<div class="text-center">
+<div class="mx-auto max-w-2xl px-4 py-8">
+	<div class="mb-8 text-center">
 		<h1 class="text-4xl font-bold text-accent-blue">checkmate.blue</h1>
 		<p class="mt-2 text-text-secondary">Chess on the Atmosphere</p>
-	</div>
-
-	{#if auth.isLoggedIn}
-		<div class="flex flex-col items-center gap-4">
-			<p class="text-lg">
-				Signed in as <span class="font-semibold text-accent-blue">{auth.handle}</span>
-			</p>
-			<div class="flex gap-3">
+		{#if auth.isLoggedIn}
+			<div class="mt-4 flex justify-center gap-3">
 				<a
 					href="/play"
 					class="rounded-lg bg-accent-blue px-6 py-2 font-semibold text-white transition-colors hover:bg-accent-blue-hover"
@@ -55,31 +152,69 @@
 					Sign out
 				</button>
 			</div>
-		</div>
-
-		{#if loadingGames}
-			<p class="text-sm text-text-secondary">Loading games...</p>
-		{:else if games.length > 0}
-			<div class="w-full max-w-md">
-				<h2 class="mb-3 text-lg font-semibold">Your Games</h2>
-				<div class="flex flex-col gap-2">
-					{#each games as game}
-						{@const parsed = parseAtUri(game.uri)}
-						{#if parsed}
-							<a
-								href="/game/{parsed.did}/{parsed.rkey}"
-								class="rounded-lg border border-border bg-bg-secondary px-4 py-3 transition-colors hover:border-accent-blue"
-							>
-								<span class="font-mono text-sm text-text-secondary">{parsed.rkey}</span>
-							</a>
-						{/if}
-					{/each}
-				</div>
+		{:else}
+			<div class="mx-auto mt-4 w-full max-w-sm">
+				<LoginButton />
 			</div>
 		{/if}
-	{:else}
-		<div class="w-full max-w-sm">
-			<LoginButton />
-		</div>
+	</div>
+
+	{#if auth.isLoggedIn}
+		{#if loadingUserGames}
+			<p class="mb-8 text-sm text-text-secondary">Loading your games...</p>
+		{:else}
+			{#if activeUserGames.length > 0}
+				<section class="mb-8">
+					<h2 class="mb-3 text-lg font-semibold">Your Active Games</h2>
+					<div class="flex flex-col gap-2">
+						{#each activeUserGames as game}
+							<GameCard did={game.did} rkey={game.rkey} record={game.record} />
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			{#if completedUserGames.length > 0}
+				<section class="mb-8">
+					<h2 class="mb-3 text-lg font-semibold">Completed</h2>
+					<div class="flex flex-col gap-2">
+						{#each completedUserGames.slice(0, 5) as game}
+							<GameCard did={game.did} rkey={game.rkey} record={game.record} />
+						{/each}
+					</div>
+				</section>
+			{/if}
+
+			{#if userGames.length === 0}
+				<p class="mb-8 text-center text-sm text-text-secondary">
+					No games yet. <a href="/play" class="text-accent-blue hover:underline">Start one!</a>
+				</p>
+			{/if}
+		{/if}
 	{/if}
+
+	<section>
+		<div class="mb-3 flex items-center gap-2">
+			<h2 class="text-lg font-semibold">Live on the Atmosphere</h2>
+			{#if liveConnected}
+				<span class="h-2 w-2 rounded-full bg-success"></span>
+			{/if}
+		</div>
+		{#if liveGames.length > 0}
+			<div class="flex flex-col gap-2">
+				{#each liveGames.slice(0, 20) as game}
+					<GameCard
+						did={game.did}
+						rkey={game.rkey}
+						record={game.record}
+						timestamp={game.timestamp}
+					/>
+				{/each}
+			</div>
+		{:else}
+			<p class="text-sm text-text-secondary">
+				{liveConnected ? 'No active games right now. Be the first!' : 'Connecting to live feed...'}
+			</p>
+		{/if}
+	</section>
 </div>