diff --git a/tests/e2e/visual/mobile-shell.spec.ts b/tests/e2e/visual/mobile-shell.spec.ts
new file mode 100644
index 0000000..4e81326
--- /dev/null
+++ b/tests/e2e/visual/mobile-shell.spec.ts
@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test';
+import { IPHONE_DEVICES } from '../fixtures/devices';
+import { login, navigateTo } from '../smoke/helpers';
+
+test.use({
+  ...IPHONE_DEVICES.iphone16,
+});
+
+/**
+ * Freeze CSS animations/transitions and hide dev-only overlays
+ * (TanStack Query devtools) so pixel diffs are stable.
+ */
+async function freezeAnimations(page: import('@playwright/test').Page) {
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after {
+        animation-duration: 0s !important;
+        animation-delay: 0s !important;
+        transition-duration: 0s !important;
+        transition-delay: 0s !important;
+        caret-color: transparent !important;
+      }
+      /* Hide TanStack Query devtools so they don't overlap bottom tabs */
+      .tsqd-parent-container {
+        display: none !important;
+      }
+    `,
+  });
+}
+
+test('mobile shell renders bottom tabs and compact topbar on dashboard', async ({ page }) => {
+  await login(page, 'super_admin');
+  await navigateTo(page, '/dashboard');
+  await freezeAnimations(page);
+  // Allow charts and TanStack Query to settle
+  await page.waitForTimeout(1200);
+
+  // Viewport-only screenshot captures the fixed topbar + bottom tabs
+  await expect(page).toHaveScreenshot('mobile-shell-dashboard.png', {
+    fullPage: false,
+    maxDiffPixelRatio: 0.03,
+  });
+});
+
+test('More sheet opens from bottom tabs', async ({ page }) => {
+  await login(page, 'super_admin');
+  await navigateTo(page, '/dashboard');
+  await freezeAnimations(page);
+
+  // Click the More button inside the primary nav (5th item in the 5-col bottom tab grid)
+  await page
+    .locator('nav[aria-label="Primary navigation"] button', { hasText: 'More' })
+    .click({ force: true });
+  await page.waitForTimeout(500);
+  await freezeAnimations(page);
+
+  // Viewport-only screenshot captures the bottom-anchored More drawer
+  await expect(page).toHaveScreenshot('mobile-shell-more-sheet.png', {
+    fullPage: false,
+    maxDiffPixelRatio: 0.03,
+  });
+});
diff --git a/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-dashboard-visual-darwin.png b/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-dashboard-visual-darwin.png
new file mode 100644
index 0000000..6839973
Binary files /dev/null and b/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-dashboard-visual-darwin.png differ
diff --git a/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-more-sheet-visual-darwin.png b/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-more-sheet-visual-darwin.png
new file mode 100644
index 0000000..ebdd7a7
Binary files /dev/null and b/tests/e2e/visual/mobile-shell.spec.ts-snapshots/mobile-shell-more-sheet-visual-darwin.png differ