diff --git a/src/lib/components/CollapsibleTable.svelte b/src/lib/components/CollapsibleTable.svelte
new file mode 100644
index 0000000..4cebf87
--- /dev/null
+++ b/src/lib/components/CollapsibleTable.svelte
@@ -0,0 +1,102 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	interface Header {
+		label: string;
+		align?: 'left' | 'right';
+		width?: string;
+	}
+
+	interface Mode {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		rows: T[];
+		headers: Header[];
+		row: Snippet<[item: T]>;
+		empty?: Snippet;
+		initialRows?: number;
+		modes?: Mode[];
+		mode?: string;
+	}
+
+	let {
+		rows,
+		headers,
+		row: rowSnippet,
+		empty,
+		initialRows = 3,
+		modes,
+		mode = $bindable(modes && modes.length > 0 ? modes[0].value : undefined),
+	}: Props = $props();
+
+	let expanded = $state(false);
+
+	// Reset expanded when mode changes (e.g. switching Rolling 30d ↔ Calendar)
+	$effect(() => {
+		mode;
+		expanded = false;
+	});
+
+	function toggleExpanded() {
+		expanded = !expanded;
+	}
+
+	const displayedRows = $derived(expanded ? rows : rows.slice(0, initialRows));
+</script>
+
+{#if modes && modes.length > 1}
+	<div class="flex gap-1 bg-white/5 rounded-lg p-1 w-fit ml-auto mb-3">
+		{#each modes as m (m.value)}
+			{@const active = mode === m.value}
+			<button
+				onclick={() => (mode = m.value)}
+				class="px-3 py-1 text-xs rounded-md transition-colors {active ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
+			>
+				{m.label}
+			</button>
+		{/each}
+	</div>
+{/if}
+
+{#if rows.length === 0}
+	{#if empty}
+		{@render empty()}
+	{:else}
+		<p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
+	{/if}
+{:else}
+	<div class="overflow-x-auto rounded-xl border border-white/10">
+		<table class="w-full text-sm">
+			<thead>
+				<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
+					{#each headers as header (header.label)}
+						<th
+							class="{header.align === 'right' ? 'text-right' : 'text-left'} px-4 py-3{header.width ? ' ' + header.width : ''}"
+						>
+							{header.label}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each displayedRows as item, i (i)}
+					<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
+						{@render rowSnippet(item)}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+
+	{#if rows.length > initialRows}
+		<button
+			onclick={toggleExpanded}
+			class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
+		>
+			<span>{expanded ? '▲ Show less' : '▼ Show more'}</span>
+		</button>
+	{/if}
+{/if}
diff --git a/src/routes/global/+page.svelte b/src/routes/global/+page.svelte
index 727d5af..2ec9ba6 100644
--- a/src/routes/global/+page.svelte
+++ b/src/routes/global/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Container from "$lib/components/Container.svelte";
+	import CollapsibleTable from "$lib/components/CollapsibleTable.svelte";
 
 	interface Stats {
 		todayCount: number;
@@ -86,14 +87,6 @@
 		sessionDepthCards,
 	} = $derived(data);
 
-	// Collapsible table state
-	let returnExpanded = $state(false);
-	let wauExpanded = $state(false);
-	let completionsExpanded = $state(false);
-	let streakExpanded = $state(false);
-	let ret7dExpanded = $state(false);
-	let ret30dExpanded = $state(false);
-	let mauExpanded = $state(false);
 	let mauMode = $state<'rolling' | 'calendar'>('rolling');
 
 	function signed(n: number, unit = ""): string {
@@ -109,12 +102,10 @@
 	}
 
 	const maxCount = $derived(Math.max(1, ...last14Days.map((d) => d.count)));
-
 	const maxWau = $derived(Math.max(1, ...wauWeeks.map((w) => w.wau)));
-
-	const maxStreakCount = $derived(
-		Math.max(1, ...streakChart.map((r) => r.count)),
-	);
+	const maxStreakCount = $derived(Math.max(1, ...streakChart.map((r) => r.count)));
+	const maxMau = $derived(Math.max(1, ...mauMonths.map((m) => m.mau)));
+	const maxCalMau = $derived(Math.max(1, ...calendarMauMonths.map((m) => m.projectedMau ?? m.mau)));
 
 	const statCards = $derived([
 		{ label: "Completions Today", value: String(stats.todayCount) },
@@ -129,6 +120,11 @@
 			value: overallReturnRate != null ? `${overallReturnRate}%` : "N/A",
 		},
 	]);
+
+	const mauModes = [
+		{ value: 'rolling', label: 'Rolling 30d' },
+		{ value: 'calendar', label: 'Calendar' },
+	];
 </script>
 
 <svelte:head>
@@ -362,74 +358,34 @@
 				</Container>
 			</div>
 
-			{#if newPlayerReturnSeries.length > 0}
-				<div class="overflow-x-auto rounded-xl border border-white/10">
-					<table class="w-full text-sm">
-						<thead>
-							<tr
-								class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-							>
-								<th class="text-left px-4 py-3">Date</th>
-								<th class="text-right px-4 py-3">New Players</th
-								>
-								<th class="text-right px-4 py-3">Return Rate</th
-								>
-								<th class="text-right px-4 py-3">7d Avg</th>
-								<th class="px-4 py-3 w-32"></th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each (returnExpanded ? newPlayerReturnSeries : newPlayerReturnSeries.slice(0, 3)) as row (row.date)}
-								<tr
-									class="border-t border-white/5 hover:bg-white/5 transition-colors"
-								>
-									<td class="px-4 py-3 text-gray-300"
-										>{row.date}</td
-									>
-									<td
-										class="px-4 py-3 text-right text-gray-400 text-xs"
-										>{row.cohort}</td
-									>
-									<td
-										class="px-4 py-3 text-right text-gray-400"
-										>{row.rate != null
-											? `${row.rate}%`
-											: "—"}</td
-									>
-									<td
-										class="px-4 py-3 text-right text-gray-100 font-medium"
-										>{row.rollingAvg != null
-											? `${row.rollingAvg}%`
-											: "—"}</td
-									>
-									<td class="px-4 py-3">
-										<div class="w-full min-w-20">
-											{#if row.rollingAvg != null}
-												<div
-													class="bg-sky-500 h-4 rounded"
-													style="width: {row.rollingAvg}%"
-												></div>
-											{/if}
-										</div>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-				{#if newPlayerReturnSeries.length > 3}
-					<button
-						onclick={() => (returnExpanded = !returnExpanded)}
-						class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-					>
-						<span>{returnExpanded ? '▲ Show less' : '▼ Show more'}</span>
-					</button>
-				{/if}
-			{:else}
-				<p class="text-gray-400 text-sm px-4 py-6">
-					Not enough data yet.
-				</p>
-			{/if}
+			<CollapsibleTable
+				rows={newPlayerReturnSeries}
+				headers={[
+					{ label: 'Date' },
+					{ label: 'New Players', align: 'right' },
+					{ label: 'Return Rate', align: 'right' },
+					{ label: '7d Avg', align: 'right' },
+					{ label: '', width: 'w-32' },
+				]}
+			>
+				{#snippet row(item)}
+					<td class="px-4 py-3 text-gray-300">{item.date}</td>
+					<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohort}</td>
+					<td class="px-4 py-3 text-right text-gray-400">
+						{item.rate != null ? `${item.rate}%` : '—'}
+					</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">
+						{item.rollingAvg != null ? `${item.rollingAvg}%` : '—'}
+					</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-20">
+							{#if item.rollingAvg != null}
+								<div class="bg-sky-500 h-4 rounded" style="width: {item.rollingAvg}%"></div>
+							{/if}
+						</div>
+					</td>
+				{/snippet}
+			</CollapsibleTable>
 		</section>
 
 		<section class="mt-8">
@@ -440,184 +396,113 @@
 				Unique players per 7-day window. Most recent week first. Avg
 				WAU: <span class="text-gray-100 font-medium">{avgWau}</span>
 			</p>
-			<div class="overflow-x-auto rounded-xl border border-white/10">
-				<table class="w-full text-sm">
-					<thead>
-						<tr
-							class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-						>
-							<th class="text-left px-4 py-3">Week</th>
-							<th class="text-right px-4 py-3">Active Users</th>
-							<th class="text-right px-4 py-3">Wk/Wk Change</th>
-							<th class="px-4 py-3 w-48"></th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each (wauExpanded ? wauWeeks : wauWeeks.slice(0, 3)) as row (row.weekEnd)}
-							{@const barPct = Math.round(
-								(row.wau / maxWau) * 100,
-							)}
-							<tr
-								class="border-t border-white/5 hover:bg-white/5 transition-colors"
-							>
-								<td class="px-4 py-3 text-gray-300 text-xs"
-									>{row.weekStart} – {row.weekEnd}</td
-								>
-								<td
-									class="px-4 py-3 text-right text-gray-100 font-medium"
-									>{row.wau}</td
-								>
-								<td
-									class="px-4 py-3 text-right text-xs font-medium {row.changePct !=
-									null
-										? row.changePct > 0
-											? 'text-green-400'
-											: row.changePct < 0
-												? 'text-red-400'
-												: 'text-gray-400'
-										: 'text-gray-500'}"
-								>
-									{row.changePct != null
-										? signed(row.changePct, "%")
-										: "—"}
-								</td>
-								<td class="px-4 py-3">
-									<div class="w-full min-w-24">
-										<div
-											class="bg-indigo-500 h-4 rounded"
-											style="width: {barPct}%"
-										></div>
-									</div>
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
-			{#if wauWeeks.length > 3}
-				<button
-					onclick={() => (wauExpanded = !wauExpanded)}
-					class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-				>
-					<span>{wauExpanded ? '▲ Show less' : '▼ Show more'}</span>
-				</button>
-			{/if}
+			<CollapsibleTable
+				rows={wauWeeks}
+				headers={[
+					{ label: 'Week' },
+					{ label: 'Active Users', align: 'right' },
+					{ label: 'Wk/Wk Change', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.wau / maxWau) * 100)}
+					<td class="px-4 py-3 text-gray-300 text-xs">{item.weekStart} – {item.weekEnd}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.wau}</td>
+					<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+						? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+						: 'text-gray-500'}">
+						{item.changePct != null ? signed(item.changePct, '%') : '—'}
+					</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-24">
+							<div class="bg-indigo-500 h-4 rounded" style="width: {barPct}%"></div>
+						</div>
+					</td>
+				{/snippet}
+			</CollapsibleTable>
 		</section>
 
 		<section class="mt-8">
-			<div class="flex items-center justify-between mb-1">
-				<h2 class="text-lg font-semibold text-gray-100">Monthly Active Users</h2>
-				<div class="flex gap-1 bg-white/5 rounded-lg p-1">
-					<button
-						onclick={() => (mauMode = 'rolling')}
-						class="px-3 py-1 text-xs rounded-md transition-colors {mauMode === 'rolling' ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
-					>Rolling 30d</button>
-					<button
-						onclick={() => (mauMode = 'calendar')}
-						class="px-3 py-1 text-xs rounded-md transition-colors {mauMode === 'calendar' ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
-					>Calendar</button>
-				</div>
-			</div>
+			<h2 class="text-lg font-semibold text-gray-100 mb-1">Monthly Active Users</h2>
 			<p class="text-gray-400 text-sm mb-4">
-				{mauMode === 'rolling' ? 'Unique players per 30-day window. Most recent first.' : 'Unique players per calendar month. Current month projected to end of month.'}
+				{mauMode === 'rolling'
+					? 'Unique players per 30-day window. Most recent first.'
+					: 'Unique players per calendar month. Current month projected to end of month.'}
 			</p>
 
 			{#if mauMode === 'rolling'}
-				{@const displayedMauMonths = mauExpanded ? mauMonths : mauMonths.slice(0, 3)}
-				{@const maxMau = Math.max(1, ...mauMonths.map((m) => m.mau))}
-				<div class="overflow-x-auto rounded-xl border border-white/10">
-					<table class="w-full text-sm">
-						<thead>
-							<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
-								<th class="text-left px-4 py-3">Period</th>
-								<th class="text-right px-4 py-3">Active Users</th>
-								<th class="text-right px-4 py-3">Mo/Mo Change</th>
-								<th class="px-4 py-3 w-48"></th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each displayedMauMonths as row (row.monthEnd)}
-								{@const barPct = Math.round((row.mau / maxMau) * 100)}
-								<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
-									<td class="px-4 py-3 text-gray-300 text-xs">{row.monthStart} – {row.monthEnd}</td>
-									<td class="px-4 py-3 text-right text-gray-100 font-medium">{row.mau}</td>
-									<td class="px-4 py-3 text-right text-xs font-medium {row.changePct != null ? row.changePct > 0 ? 'text-green-400' : row.changePct < 0 ? 'text-red-400' : 'text-gray-400' : 'text-gray-500'}">
-										{row.changePct != null ? signed(row.changePct, '%') : '—'}
-									</td>
-									<td class="px-4 py-3">
-										<div class="w-full min-w-24">
-											<div class="bg-teal-500 h-4 rounded" style="width: {barPct}%"></div>
-										</div>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-				{#if mauMonths.length > 3}
-					<button
-						onclick={() => (mauExpanded = !mauExpanded)}
-						class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-					>
-						<span>{mauExpanded ? '▲ Show less' : '▼ Show more'}</span>
-					</button>
-				{/if}
+				<CollapsibleTable
+					rows={mauMonths}
+					headers={[
+						{ label: 'Period' },
+						{ label: 'Active Users', align: 'right' },
+						{ label: 'Mo/Mo Change', align: 'right' },
+						{ label: '', width: 'w-48' },
+					]}
+					modes={mauModes}
+					bind:mode={mauMode}
+				>
+					{#snippet row(item)}
+						{@const barPct = Math.round((item.mau / maxMau) * 100)}
+						<td class="px-4 py-3 text-gray-300 text-xs">{item.monthStart} – {item.monthEnd}</td>
+						<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.mau}</td>
+						<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+							? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+							: 'text-gray-500'}">
+							{item.changePct != null ? signed(item.changePct, '%') : '—'}
+						</td>
+						<td class="px-4 py-3">
+							<div class="w-full min-w-24">
+								<div class="bg-teal-500 h-4 rounded" style="width: {barPct}%"></div>
+							</div>
+						</td>
+					{/snippet}
+				</CollapsibleTable>
 			{:else}
-				{@const displayedCalMau = mauExpanded ? calendarMauMonths : calendarMauMonths.slice(0, 3)}
-				{@const maxCalMau = Math.max(1, ...calendarMauMonths.map((m) => m.projectedMau ?? m.mau))}
-				<div class="overflow-x-auto rounded-xl border border-white/10">
-					<table class="w-full text-sm">
-						<thead>
-							<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
-								<th class="text-left px-4 py-3">Month</th>
-								<th class="text-right px-4 py-3">Active Users</th>
-								<th class="text-right px-4 py-3">Mo/Mo Change</th>
-								<th class="px-4 py-3 w-48"></th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each displayedCalMau as row (row.monthStart)}
-								{@const displayMau = row.projectedMau ?? row.mau}
-								{@const barPct = Math.round((displayMau / maxCalMau) * 100)}
-								<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
-									<td class="px-4 py-3 text-gray-300">
-										{row.label}
-										{#if row.isCurrentMonth}
-											<span class="text-xs text-gray-500 ml-1">(projected)</span>
-										{/if}
-									</td>
-									<td class="px-4 py-3 text-right font-medium {row.isCurrentMonth ? 'text-gray-400' : 'text-gray-100'}">
-										{#if row.isCurrentMonth}
-											<span class="text-gray-500 text-xs">{row.mau} → </span>{row.projectedMau ?? row.mau}
-										{:else}
-											{row.mau}
-										{/if}
-									</td>
-									<td class="px-4 py-3 text-right text-xs font-medium {row.changePct != null ? row.changePct > 0 ? 'text-green-400' : row.changePct < 0 ? 'text-red-400' : 'text-gray-400' : 'text-gray-500'}">
-										{#if row.changePct != null}
-											{row.isCurrentMonth ? '~' : ''}{signed(row.changePct, '%')}
-										{:else}
-											—
-										{/if}
-									</td>
-									<td class="px-4 py-3">
-										<div class="w-full min-w-24">
-											<div class="bg-teal-500 h-4 rounded {row.isCurrentMonth ? 'opacity-50' : ''}" style="width: {barPct}%"></div>
-										</div>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-				{#if calendarMauMonths.length > 3}
-					<button
-						onclick={() => (mauExpanded = !mauExpanded)}
-						class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-					>
-						<span>{mauExpanded ? '▲ Show less' : '▼ Show more'}</span>
-					</button>
-				{/if}
+				<CollapsibleTable
+					rows={calendarMauMonths}
+					headers={[
+						{ label: 'Month' },
+						{ label: 'Active Users', align: 'right' },
+						{ label: 'Mo/Mo Change', align: 'right' },
+						{ label: '', width: 'w-48' },
+					]}
+					modes={mauModes}
+					bind:mode={mauMode}
+				>
+					{#snippet row(item)}
+						{@const displayMau = item.projectedMau ?? item.mau}
+						{@const barPct = Math.round((displayMau / maxCalMau) * 100)}
+						<td class="px-4 py-3 text-gray-300">
+							{item.label}
+							{#if item.isCurrentMonth}
+								<span class="text-xs text-gray-500 ml-1">(projected)</span>
+							{/if}
+						</td>
+						<td class="px-4 py-3 text-right font-medium {item.isCurrentMonth ? 'text-gray-400' : 'text-gray-100'}">
+							{#if item.isCurrentMonth}
+								<span class="text-gray-500 text-xs">{item.mau} → </span>{item.projectedMau ?? item.mau}
+							{:else}
+								{item.mau}
+							{/if}
+						</td>
+						<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
+							? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
+							: 'text-gray-500'}">
+							{#if item.changePct != null}
+								{item.isCurrentMonth ? '~' : ''}{signed(item.changePct, '%')}
+							{:else}
+								—
+							{/if}
+						</td>
+						<td class="px-4 py-3">
+							<div class="w-full min-w-24">
+								<div class="bg-teal-500 h-4 rounded {item.isCurrentMonth ? 'opacity-50' : ''}" style="width: {barPct}%"></div>
+							</div>
+						</td>
+					{/snippet}
+				</CollapsibleTable>
 			{/if}
 		</section>
 
@@ -625,112 +510,53 @@
 			<h2 class="text-lg font-semibold text-gray-100 mb-4">
 				Last 14 Days — Completions
 			</h2>
-			<div class="overflow-x-auto rounded-xl border border-white/10">
-				<table class="w-full text-sm">
-					<thead>
-						<tr
-							class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-						>
-							<th class="text-left px-4 py-3">Date</th>
-							<th class="text-right px-4 py-3">Completions</th>
-							<th class="px-4 py-3 w-48"></th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each (completionsExpanded ? last14Days : last14Days.slice(0, 3)) as row (row.date)}
-							{@const barPct = Math.round(
-								(row.count / maxCount) * 100,
-							)}
-							<tr
-								class="border-t border-white/5 hover:bg-white/5 transition-colors"
-							>
-								<td class="px-4 py-3 text-gray-300"
-									>{row.date}</td
-								>
-								<td
-									class="px-4 py-3 text-right text-gray-100 font-medium"
-									>{row.count}</td
-								>
-								<td class="px-4 py-3">
-									<div class="w-full min-w-24">
-										<div
-											class="bg-amber-500 h-4 rounded"
-											style="width: {barPct}%"
-										></div>
-									</div>
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			</div>
-			{#if last14Days.length > 3}
-				<button
-					onclick={() => (completionsExpanded = !completionsExpanded)}
-					class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-				>
-					<span>{completionsExpanded ? '▲ Show less' : '▼ Show more'}</span>
-				</button>
-			{/if}
+			<CollapsibleTable
+				rows={last14Days}
+				headers={[
+					{ label: 'Date' },
+					{ label: 'Completions', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.count / maxCount) * 100)}
+					<td class="px-4 py-3 text-gray-300">{item.date}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.count}</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-24">
+							<div class="bg-amber-500 h-4 rounded" style="width: {barPct}%"></div>
+						</div>
+					</td>
+				{/snippet}
+			</CollapsibleTable>
 		</section>
 
 		<section class="mt-8">
 			<h2 class="text-lg font-semibold text-gray-100 mb-4">
 				Active Streak Distribution
 			</h2>
-			{#if streakChart.length === 0}
-				<p class="text-gray-400 text-sm px-4 py-6">
-					No active streaks yet.
-				</p>
-			{:else}
-				<div class="overflow-x-auto rounded-xl border border-white/10">
-					<table class="w-full text-sm">
-						<thead>
-							<tr
-								class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-							>
-								<th class="text-left px-4 py-3">Days</th>
-								<th class="text-right px-4 py-3">Players</th>
-								<th class="px-4 py-3 w-48"></th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each (streakExpanded ? streakChart : streakChart.slice(0, 3)) as row (row.days)}
-								{@const barPct = Math.round(
-									(row.count / maxStreakCount) * 100,
-								)}
-								<tr
-									class="border-t border-white/5 hover:bg-white/5 transition-colors"
-								>
-									<td class="px-4 py-3 text-gray-300"
-										>{row.days}</td
-									>
-									<td
-										class="px-4 py-3 text-right text-gray-100 font-medium"
-										>{row.count}</td
-									>
-									<td class="px-4 py-3">
-										<div class="w-full min-w-24">
-											<div
-												class="bg-blue-500 h-4 rounded"
-												style="width: {barPct}%"
-											></div>
-										</div>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-				{#if streakChart.length > 3}
-					<button
-						onclick={() => (streakExpanded = !streakExpanded)}
-						class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-					>
-						<span>{streakExpanded ? '▲ Show less' : '▼ Show more'}</span>
-					</button>
-				{/if}
-			{/if}
+			<CollapsibleTable
+				rows={streakChart}
+				headers={[
+					{ label: 'Days' },
+					{ label: 'Players', align: 'right' },
+					{ label: '', width: 'w-48' },
+				]}
+			>
+				{#snippet row(item)}
+					{@const barPct = Math.round((item.count / maxStreakCount) * 100)}
+					<td class="px-4 py-3 text-gray-300">{item.days}</td>
+					<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.count}</td>
+					<td class="px-4 py-3">
+						<div class="w-full min-w-24">
+							<div class="bg-blue-500 h-4 rounded" style="width: {barPct}%"></div>
+						</div>
+					</td>
+				{/snippet}
+				{#snippet empty()}
+					<p class="text-gray-400 text-sm px-4 py-6">No active streaks yet.</p>
+				{/snippet}
+			</CollapsibleTable>
 		</section>
 
 		<section class="mt-8">
@@ -747,67 +573,26 @@
 					<h3 class="text-base font-semibold text-gray-200 mb-3">
 						7-Day Retention
 					</h3>
-					{#if retention7dSeries.length === 0}
-						<p class="text-gray-400 text-sm px-4 py-6">
-							Not enough data yet.
-						</p>
-					{:else}
-						<div
-							class="overflow-x-auto rounded-xl border border-white/10"
-						>
-							<table class="w-full text-sm">
-								<thead>
-									<tr
-										class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-									>
-										<th class="text-left px-4 py-3"
-											>Cohort Date</th
-										>
-										<th class="text-right px-4 py-3">n</th>
-										<th class="text-right px-4 py-3"
-											>Ret. %</th
-										>
-										<th class="px-4 py-3 w-32"></th>
-									</tr>
-								</thead>
-								<tbody>
-									{#each (ret7dExpanded ? retention7dSeries : retention7dSeries.slice(0, 3)) as row (row.date)}
-										<tr
-											class="border-t border-white/5 hover:bg-white/5 transition-colors"
-										>
-											<td class="px-4 py-3 text-gray-300"
-												>{row.date}</td
-											>
-											<td
-												class="px-4 py-3 text-right text-gray-400 text-xs"
-												>{row.cohortSize}</td
-											>
-											<td
-												class="px-4 py-3 text-right text-gray-100 font-medium"
-												>{row.rate}%</td
-											>
-											<td class="px-4 py-3">
-												<div class="w-full min-w-20">
-													<div
-														class="bg-emerald-500 h-4 rounded"
-														style="width: {row.rate}%"
-													></div>
-												</div>
-											</td>
-										</tr>
-									{/each}
-								</tbody>
-							</table>
-						</div>
-						{#if retention7dSeries.length > 3}
-							<button
-								onclick={() => (ret7dExpanded = !ret7dExpanded)}
-								class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-							>
-								<span>{ret7dExpanded ? '▲ Show less' : '▼ Show more'}</span>
-							</button>
-						{/if}
-					{/if}
+					<CollapsibleTable
+						rows={retention7dSeries}
+						headers={[
+							{ label: 'Cohort Date' },
+							{ label: 'n', align: 'right' },
+							{ label: 'Ret. %', align: 'right' },
+							{ label: '', width: 'w-32' },
+						]}
+					>
+						{#snippet row(item)}
+							<td class="px-4 py-3 text-gray-300">{item.date}</td>
+							<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
+							<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.rate}%</td>
+							<td class="px-4 py-3">
+								<div class="w-full min-w-20">
+									<div class="bg-emerald-500 h-4 rounded" style="width: {item.rate}%"></div>
+								</div>
+							</td>
+						{/snippet}
+					</CollapsibleTable>
 				</div>
 
 				<!-- 30-day retention -->
@@ -815,67 +600,26 @@
 					<h3 class="text-base font-semibold text-gray-200 mb-3">
 						30-Day Retention
 					</h3>
-					{#if retention30dSeries.length === 0}
-						<p class="text-gray-400 text-sm px-4 py-6">
-							Not enough data yet.
-						</p>
-					{:else}
-						<div
-							class="overflow-x-auto rounded-xl border border-white/10"
-						>
-							<table class="w-full text-sm">
-								<thead>
-									<tr
-										class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide"
-									>
-										<th class="text-left px-4 py-3"
-											>Cohort Date</th
-										>
-										<th class="text-right px-4 py-3">n</th>
-										<th class="text-right px-4 py-3"
-											>Ret. %</th
-										>
-										<th class="px-4 py-3 w-32"></th>
-									</tr>
-								</thead>
-								<tbody>
-									{#each (ret30dExpanded ? retention30dSeries : retention30dSeries.slice(0, 3)) as row (row.date)}
-										<tr
-											class="border-t border-white/5 hover:bg-white/5 transition-colors"
-										>
-											<td class="px-4 py-3 text-gray-300"
-												>{row.date}</td
-											>
-											<td
-												class="px-4 py-3 text-right text-gray-400 text-xs"
-												>{row.cohortSize}</td
-											>
-											<td
-												class="px-4 py-3 text-right text-gray-100 font-medium"
-												>{row.rate}%</td
-											>
-											<td class="px-4 py-3">
-												<div class="w-full min-w-20">
-													<div
-														class="bg-violet-500 h-4 rounded"
-														style="width: {row.rate}%"
-													></div>
-												</div>
-											</td>
-										</tr>
-									{/each}
-								</tbody>
-							</table>
-						</div>
-						{#if retention30dSeries.length > 3}
-							<button
-								onclick={() => (ret30dExpanded = !ret30dExpanded)}
-								class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
-							>
-								<span>{ret30dExpanded ? '▲ Show less' : '▼ Show more'}</span>
-							</button>
-						{/if}
-					{/if}
+					<CollapsibleTable
+						rows={retention30dSeries}
+						headers={[
+							{ label: 'Cohort Date' },
+							{ label: 'n', align: 'right' },
+							{ label: 'Ret. %', align: 'right' },
+							{ label: '', width: 'w-32' },
+						]}
+					>
+						{#snippet row(item)}
+							<td class="px-4 py-3 text-gray-300">{item.date}</td>
+							<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
+							<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.rate}%</td>
+							<td class="px-4 py-3">
+								<div class="w-full min-w-20">
+									<div class="bg-violet-500 h-4 rounded" style="width: {item.rate}%"></div>
+								</div>
+							</td>
+						{/snippet}
+					</CollapsibleTable>
 				</div>
 			</div>
 		</section>