diff --git a/public/home/use-case/conferencing.svg b/public/home/use-case/conferencing.svg
new file mode 100644
index 0000000..0fd3bbe
--- /dev/null
+++ b/public/home/use-case/conferencing.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#01BB2D"><path d="M8 4a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm8 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM8 12.5c3.04 0 5.5 1.79 5.5 4V20H2.5v-3.5c0-2.21 2.46-4 5.5-4Zm8 .5c2.76 0 5.5 1.34 5.5 3.5V20h-6.5v-3.5c0-1.13-.44-2.14-1.17-2.97A7.6 7.6 0 0 1 16 13Z"/></svg>
diff --git a/public/home/use-case/contribution.svg b/public/home/use-case/contribution.svg
new file mode 100644
index 0000000..e7886c8
--- /dev/null
+++ b/public/home/use-case/contribution.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#01BB2D"><path d="M12 2 5.5 8.5l1.41 1.41L11 5.83V16h2V5.83l4.09 4.08 1.41-1.41L12 2Zm-8 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2h-2v2H6v-2H4Z"/></svg>
diff --git a/public/home/use-case/distribution.svg b/public/home/use-case/distribution.svg
new file mode 100644
index 0000000..2766e03
--- /dev/null
+++ b/public/home/use-case/distribution.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#01BB2D"><path d="M12 8.5a2.5 2.5 0 0 1 1 4.79V22h-2v-8.71A2.5 2.5 0 0 1 12 8.5Zm-4.24-1.74 1.41 1.41A4 4 0 0 0 8 11c0 1.1.45 2.1 1.17 2.83l-1.41 1.41A6 6 0 0 1 6 11c0-1.66.67-3.16 1.76-4.24Zm8.48 0A6 6 0 0 1 18 11a6 6 0 0 1-1.76 4.24l-1.41-1.41A4 4 0 0 0 16 11a4 4 0 0 0-1.17-2.83l1.41-1.41ZM4.93 3.93l1.41 1.41A8 8 0 0 0 4 11a8 8 0 0 0 2.34 5.66l-1.41 1.41A10 10 0 0 1 2 11c0-2.76 1.12-5.26 2.93-7.07Zm14.14 0A10 10 0 0 1 22 11c0 2.76-1.12 5.26-2.93 7.07l-1.41-1.41A8 8 0 0 0 20 11a8 8 0 0 0-2.34-5.66l1.41-1.41Z"/></svg>
diff --git a/public/home/use-case/robotics.svg b/public/home/use-case/robotics.svg
new file mode 100644
index 0000000..0873276
--- /dev/null
+++ b/public/home/use-case/robotics.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#01BB2D"><path d="M11 2h2v2.1A5 5 0 0 1 17 9v1h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2v1a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3v-1H5a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h2V9a5 5 0 0 1 4-4.9V2ZM9 9v10a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V9a3 3 0 0 0-6 0Zm1 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-4 5h4v1.5h-4V16Z"/></svg>
diff --git a/public/layout/pro.svg b/public/layout/pro-word.svg
similarity index 100%
rename from public/layout/pro.svg
rename to public/layout/pro-word.svg
diff --git a/public/layout/underline.svg b/public/layout/underline.svg
new file mode 100644
index 0000000..d764914
--- /dev/null
+++ b/public/layout/underline.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-22.5 -22.5 1172.1 165.1" preserveAspectRatio="xMidYMid meet">
+	<!-- Hand-drawn stroke from moq.pro/app/art/underline.png, traced as underline-1.svg. -->
+	<g transform="translate(0,120) scale(0.1,-0.1)" fill="#00BE2D" stroke="none">
+		<path d="M10550 1069 c-87 -10 -637 -46 -1160 -74 -576 -32 -1566 -137 -4140
+-441 -1967 -232 -2467 -282 -3250 -329 -362 -22 -1063 -38 -1400 -32 -319 5
+-519 -3 -562 -23 -51 -24 -43 -60 19 -86 33 -14 363 -44 708 -65 244 -14 903
+-7 1250 15 810 51 1348 106 3380 346 871 103 1245 146 2355 270 913 102 1326
+156 1805 234 342 56 1105 185 1125 190 27 7 -63 3 -130 -5z"/>
+	</g>
+</svg>
diff --git a/src/components/author.astro b/src/components/author.astro
index 60f95ad..1a02733 100644
--- a/src/components/author.astro
+++ b/src/components/author.astro
@@ -1,14 +1,6 @@
 ---
 // The sign-off at the bottom of every post: avatar plus wherever you can find me.
-// The icons in public/social/ are placeholders waiting on hand-drawn versions,
-// same as the ones in public/layout/.
-const socials = [
-	{ name: "Email", icon: "email", href: "mailto:me@kixel.me" },
-	{ name: "X", icon: "x", href: "https://x.com/kixelated" },
-	{ name: "Bluesky", icon: "bluesky", href: "https://bsky.app/profile/kixel.me" },
-	{ name: "LinkedIn", icon: "linkedin", href: "https://www.linkedin.com/in/luke-curley-635a457/" },
-	{ name: "Discord", icon: "discord", href: "https://discord.moq.dev" },
-];
+import { socials } from "@/socials";
 ---
 
 <aside class="not-prose mt-12 flex items-center gap-4">
diff --git a/src/components/feature.astro b/src/components/feature.astro
index 750ffe8..1fc6c61 100644
--- a/src/components/feature.astro
+++ b/src/components/feature.astro
@@ -6,7 +6,11 @@ type Feature =
 	| "scale"
 	| "native"
 	| "discover"
-	| "efficient";
+	| "efficient"
+	| "distribution"
+	| "contribution"
+	| "robotics"
+	| "conferencing";
 
 interface Props {
 	icon: Feature;
@@ -14,21 +18,27 @@ interface Props {
 
 const { icon } = Astro.props;
 
-// These are Kixel's original hand-drawn icons from moq.pro.
+// The first set are Kixel's original hand-drawn icons from moq.pro. The
+// use-case icons in public/home/use-case/ are placeholders waiting on
+// hand-drawn versions, same as public/social/.
 const artwork: Record<Feature, string> = {
-	source: "box",
-	web: "globe",
-	realtime: "rocket",
-	scale: "stonk",
-	native: "puzzle",
-	discover: "link",
-	efficient: "battery",
+	source: "https://moq.pro/icons/box.svg",
+	web: "https://moq.pro/icons/globe.svg",
+	realtime: "https://moq.pro/icons/rocket.svg",
+	scale: "https://moq.pro/icons/stonk.svg",
+	native: "https://moq.pro/icons/puzzle.svg",
+	discover: "https://moq.pro/icons/link.svg",
+	efficient: "https://moq.pro/icons/battery.svg",
+	distribution: "/home/use-case/distribution.svg",
+	contribution: "/home/use-case/contribution.svg",
+	robotics: "/home/use-case/robotics.svg",
+	conferencing: "/home/use-case/conferencing.svg",
 };
 ---
 
 <li class="flex items-start gap-3">
 	<span class="mt-0.5 flex h-9 w-11 shrink-0 items-center justify-center" aria-hidden="true">
-		<img src={`https://moq.pro/icons/${artwork[icon]}.svg`} class="h-9 w-11 object-contain" alt="" />
+		<img src={artwork[icon]} class="h-9 w-11 object-contain" alt="" />
 	</span>
 	<span><slot /></span>
 </li>
diff --git a/src/components/nav-link.astro b/src/components/nav-link.astro
new file mode 100644
index 0000000..58a2b4d
--- /dev/null
+++ b/src/components/nav-link.astro
@@ -0,0 +1,22 @@
+---
+// One entry in the sidebar: a hand-drawn icon that wiggles on hover, the
+// matching hand-drawn word, and optionally a line of small print underneath.
+// Both images live in public/layout/ as <icon>-icon.svg and <icon>-word.svg.
+interface Props {
+	href: string;
+	icon: string;
+	word: string;
+}
+
+const { href, icon, word } = Astro.props;
+---
+
+<a href={href} class="group flex items-center gap-2 w-32">
+	<span class="flex w-9 justify-center shrink-0">
+		<img src={`/layout/${icon}-icon.svg`} class="h-9 transition-transform group-hover:-rotate-6" alt="" />
+	</span>
+	<span class="flex flex-col items-start">
+		<img src={`/layout/${icon}-word.svg`} class="h-9 w-auto" alt={word} />
+		<slot />
+	</span>
+</a>
diff --git a/src/layouts/global.astro b/src/layouts/global.astro
index e04bf82..11e37ab 100644
--- a/src/layouts/global.astro
+++ b/src/layouts/global.astro
@@ -3,6 +3,7 @@ import "./global.css";
 // Imported after global.css so the theme's .hljs-* color rules land later in
 // the cascade and beat the prose plugin's .markdown :where(pre code) { color: inherit }.
 import "highlight.js/styles/atom-one-dark.css";
+import NavLink from "@/components/nav-link.astro";
 
 // NOTE: This is magically used as the type for Astro.props
 interface Props {
@@ -76,42 +77,19 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
 					</a>
 				</div>
 				<div class="flex md:flex-col flex-row flex-wrap items-center justify-center gap-4 md:w-32 w-1/2">
-					<a href="/demo" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/demo-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/demo-word.svg" class="h-9 w-auto" alt="Demo" />
-					</a>
-					<a href="/blog" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/blog-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/blog-word.svg" class="h-9 w-auto" alt="Blog" />
-					</a>
-					<a href="https://doc.moq.dev" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/docs-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/docs-word.svg" class="h-9 w-auto" alt="Docs" />
-					</a>
-					<a href="https://github.com/moq-dev/moq" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/github-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/github-word.svg" class="h-9 w-auto" alt="GitHub" />
-					</a>
-					<a href="https://discord.moq.dev" class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/discord-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/discord-word.svg" class="h-9 w-auto" alt="Discord" />
-					</a>
-					<a href={proUrl} class="group flex items-center gap-2 w-32">
-						<span class="flex w-9 justify-center shrink-0">
-							<img src="/layout/pro-icon.svg" class="h-9 transition-transform group-hover:-rotate-6" alt="" />
-						</span>
-						<img src="/layout/pro.svg" class="h-9 w-auto" alt="Pro" />
-					</a>
+					<NavLink href="/demo" icon="demo" word="Demo" />
+					<NavLink href="/blog" icon="blog" word="Blog" />
+					<NavLink href="https://doc.moq.dev" icon="docs" word="Docs" />
+					<NavLink href={proUrl} icon="pro" word="Pro" />
+
+					<img src="/layout/underline.svg" class="hidden md:block w-32" alt="" />
+
+					<NavLink href="https://github.com/moq-dev/moq" icon="github" word="GitHub">
+						<span data-stat="stars" class="text-xs font-bold text-green-500 -mt-1 whitespace-nowrap"></span>
+					</NavLink>
+					<NavLink href="https://discord.moq.dev" icon="discord" word="Discord">
+						<span data-stat="chatters" class="text-xs font-bold text-green-500 -mt-1 whitespace-nowrap"></span>
+					</NavLink>
 				</div>
 			</nav>
 			<article class="markdown p-4 flex-1 min-w-0">
@@ -127,3 +105,9 @@ const proUrl = import.meta.env.MODE === "staging" ? "https://moq.wtf" : "https:/
 		</div>
 	</body>
 </html>
+
+<script>
+	import { renderStats } from "@/stats";
+
+	renderStats();
+</script>
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 47ab295..952edbd 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -33,10 +33,13 @@ Supports any **latency**, any **scale**, and any **content** (not just media!).
 </ul>
 
 ### Use Cases
-- [Distribution](/blog/replacing-hls-dash): Scalable and on-demand, plus [HLS compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-hls). Think HTTP but live.
-- **Contribution**: Dynamic origins and failover, plus [TS/SRT compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-srt).
-- [Robotics](/blog/on-a-boat): Real-time teleoperation with custom telemetry, plus [WebRTC compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-rtc).
-- [Conferencing](/blog/first-app): Web support and dynamic peer discovery. [P2P](https://www.iroh.computer/) for native apps.
+
+<ul class="list-none pl-0">
+	<Feature icon="distribution">**[Distribution](/blog/replacing-hls-dash)**: Scalable and on-demand, plus [HLS compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-hls). Think HTTP but live.</Feature>
+	<Feature icon="contribution">**Contribution**: Dynamic origins and failover, plus [TS/SRT compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-srt).</Feature>
+	<Feature icon="robotics">**[Robotics](/blog/on-a-boat)**: Real-time teleoperation with custom telemetry, plus [WebRTC compatibility](https://github.com/moq-dev/moq/tree/main/rs/moq-rtc).</Feature>
+	<Feature icon="conferencing">**[Conferencing](/blog/first-app)**: Web support and dynamic peer discovery. [P2P](https://www.iroh.computer/) for native apps.</Feature>
+</ul>
 
 Enough pondering, <a href="/demo">try the demos already</a>. There's even a gameboy emulator. Don't pretend like you're not excited.
 
diff --git a/src/socials.ts b/src/socials.ts
new file mode 100644
index 0000000..77ffd5b
--- /dev/null
+++ b/src/socials.ts
@@ -0,0 +1,10 @@
+// Wherever you can find me. Rendered in the <Author /> sign-off at the bottom
+// of each post (and the homepage). The icons in public/social/ are placeholders
+// waiting on hand-drawn versions.
+export const socials = [
+	{ name: "Email", icon: "email", href: "mailto:me@kixel.me" },
+	{ name: "X", icon: "x", href: "https://x.com/kixelated" },
+	{ name: "Bluesky", icon: "bluesky", href: "https://bsky.app/profile/kixel.me" },
+	{ name: "LinkedIn", icon: "linkedin", href: "https://www.linkedin.com/in/luke-curley-635a457/" },
+	{ name: "Discord", icon: "discord", href: "https://discord.moq.dev" },
+];
diff --git a/src/stats.ts b/src/stats.ts
new file mode 100644
index 0000000..76a35a6
--- /dev/null
+++ b/src/stats.ts
@@ -0,0 +1,87 @@
+// Live community numbers for the nav: GitHub stars and Discord members.
+//
+// Fetched in the browser rather than at build time because deploys are manual
+// and infrequent, so a baked-in count would be weeks stale. Both APIs allow
+// anonymous CORS requests; GitHub's limit is 60/hour per IP, which is why the
+// result is cached in localStorage for an hour instead of refetched per page.
+
+const GITHUB = "https://api.github.com/repos/moq-dev/moq";
+const DISCORD = "https://discord.com/api/v10/invites/FCYF3p99mr?with_counts=true";
+
+const CACHE_KEY = "moq.stats";
+const CACHE_TTL = 60 * 60 * 1000;
+
+interface Stats {
+	stars?: number;
+	chatters?: number;
+}
+
+interface Cached extends Stats {
+	at: number;
+}
+
+function asCount(value: unknown): number | undefined {
+	return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+function readCache(): Stats | undefined {
+	try {
+		const raw = localStorage.getItem(CACHE_KEY);
+		if (!raw) return;
+		const cached = JSON.parse(raw) as Cached;
+		if (typeof cached.at !== "number" || Date.now() - cached.at > CACHE_TTL) return;
+		const stars = asCount(cached.stars);
+		const chatters = asCount(cached.chatters);
+		if (stars === undefined && chatters === undefined) return;
+		return { stars, chatters };
+	} catch {
+		return;
+	}
+}
+
+function writeCache(stats: Stats) {
+	try {
+		localStorage.setItem(CACHE_KEY, JSON.stringify({ ...stats, at: Date.now() } satisfies Cached));
+	} catch {
+		// Private mode, quota, etc. Not worth surfacing.
+	}
+}
+
+async function fetchNumber(url: string, key: string): Promise<number | undefined> {
+	try {
+		// Discord echoes the requesting origin in Access-Control-Allow-Origin but
+		// marks the response cacheable without `Vary: Origin`, so a response cached
+		// for moq.dev fails the CORS check on doc.moq.dev. Skip the HTTP cache;
+		// localStorage above is the cache.
+		const res = await fetch(url, { cache: "no-store" });
+		if (!res.ok) return;
+		const json = await res.json();
+		const value = json[key];
+		return typeof value === "number" ? value : undefined;
+	} catch {
+		return;
+	}
+}
+
+async function fetchStats(): Promise<Stats> {
+	const [stars, chatters] = await Promise.all([
+		fetchNumber(GITHUB, "stargazers_count"),
+		fetchNumber(DISCORD, "approximate_member_count"),
+	]);
+	return { stars, chatters };
+}
+
+// Fills every element with a `data-stat="stars"` / `data-stat="chatters"`
+// attribute, e.g. "1,515 stars". Elements stay empty if a fetch fails; the
+// links around them still work.
+export async function renderStats() {
+	const cached = readCache();
+	const stats = cached ?? (await fetchStats());
+	if (!cached && (stats.stars !== undefined || stats.chatters !== undefined)) writeCache(stats);
+
+	for (const el of document.querySelectorAll<HTMLElement>("[data-stat]")) {
+		const key = el.dataset.stat as keyof Stats;
+		const value = stats[key];
+		if (typeof value === "number") el.textContent = `${value.toLocaleString()} ${key}`;
+	}
+}