diff --git a/README.md b/README.md
index fab21615..89e73cde 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,16 @@ A dashboard for tracking GitHub issues, PRs, and Actions workflow runs across ma
 
 **Live demo:** https://gh.gordoncode.dev
 
-![Dashboard](docs/dashboard-screenshot.png)
+<table>
+<tr>
+<td align="center"><strong>Comfortable</strong></td>
+<td align="center"><strong>Compact</strong></td>
+</tr>
+<tr>
+<td><img src="docs/dashboard-screenshot.png" alt="Dashboard — comfortable view"></td>
+<td><img src="docs/dashboard-screenshot-compact.png" alt="Dashboard — compact view"></td>
+</tr>
+</table>
 
 ## Documentation
 
diff --git a/docs/dashboard-screenshot-compact.png b/docs/dashboard-screenshot-compact.png
new file mode 100644
index 00000000..d5e5709e
Binary files /dev/null and b/docs/dashboard-screenshot-compact.png differ
diff --git a/docs/dashboard-screenshot.png b/docs/dashboard-screenshot.png
index 6808a261..15113f2b 100644
Binary files a/docs/dashboard-screenshot.png and b/docs/dashboard-screenshot.png differ
diff --git a/e2e/capture-screenshot.spec.ts b/e2e/capture-screenshot.spec.ts
index e8d80cfd..c6ca0a38 100644
--- a/e2e/capture-screenshot.spec.ts
+++ b/e2e/capture-screenshot.spec.ts
@@ -461,15 +461,39 @@ test("capture dashboard screenshot", async ({ page }) => {
   await page.getByRole("tab", { name: /pull requests/i }).click();
   await page.getByRole("tab", { name: /pull requests/i, selected: true }).waitFor();
 
-  // Wait for repo group headers to render (visible even when collapsed)
-  await page.getByText("acme-corp/web-platform").first().waitFor();
+  // Expand several repo groups for a richer screenshot
+  const reposToExpand = ["acme-corp/web-platform", "openstack/nova", "acme-corp/api-gateway"];
 
-  // Expand a repo group by clicking its header button (scoped to avoid notification bell)
-  const repoGroupBtn = page.getByRole("button", { expanded: false }).filter({ hasText: "acme-corp/web-platform" });
-  if (await repoGroupBtn.isVisible()) {
-    await repoGroupBtn.click();
-    await page.getByRole("button", { expanded: true }).filter({ hasText: "acme-corp/web-platform" }).waitFor();
+  await page.getByText("acme-corp/web-platform").first().waitFor();
+  for (const repo of reposToExpand) {
+    const btn = page.getByRole("button", { expanded: false }).filter({ hasText: repo });
+    if (await btn.isVisible()) {
+      await btn.click();
+      await page.getByRole("button", { expanded: true }).filter({ hasText: repo }).waitFor();
+    }
   }
 
   await page.screenshot({ path: "docs/dashboard-screenshot.png" });
+
+  // Switch to compact density via settings UI (client-side nav to preserve store state)
+  await page.getByRole("link", { name: "Settings" }).click();
+  await page.getByRole("button", { name: /view density: compact/i }).waitFor();
+  await page.getByRole("button", { name: /view density: compact/i }).click();
+  await page.getByRole("button", { name: /view density: compact/i, pressed: true }).waitFor();
+
+  // Navigate back to dashboard (client-side, no full reload)
+  await page.getByRole("link", { name: "Back to dashboard" }).click();
+  await page.getByRole("tablist").waitFor();
+  await page.getByRole("tab", { name: /pull requests/i }).click();
+  await page.getByRole("tab", { name: /pull requests/i, selected: true }).waitFor();
+  await page.getByText("acme-corp/web-platform").first().waitFor();
+  for (const repo of reposToExpand) {
+    const btn = page.getByRole("button", { expanded: false }).filter({ hasText: repo });
+    if (await btn.isVisible()) {
+      await btn.click();
+      await page.getByRole("button", { expanded: true }).filter({ hasText: repo }).waitFor();
+    }
+  }
+
+  await page.screenshot({ path: "docs/dashboard-screenshot-compact.png" });
 });