diff --git a/.gitignore b/.gitignore
index 5b4a962..b2f284f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,6 @@ import-meta.d.ts
 # dev artifacts
 mprocs.log
 .playwright-mcp/
+/*.png
+
+/certificates
diff --git a/README.md b/README.md
index 290f960..623c1e2 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,20 @@ Then open <http://localhost:3000/setup> and create the first admin account.
 
 `pnpm pb:bootstrap` upserts a PocketBase superuser from the env vars — run it once after editing credentials, or whenever you rotate them.
 
+### Phone testing (HTTPS)
+
+iOS Safari will not hand out camera access over plain HTTP on a LAN IP — `getUserMedia` needs a secure context. For the scan feature:
+
+```bash
+pnpm dev:https                    # next + pocketbase, Next on HTTPS bound to 127.0.0.1 (loopback)
+# or, if you need to reach it from another device on your LAN:
+pnpm dev:next:lan                 # binds Next to 0.0.0.0 — only on a trusted network
+```
+
+Only use `dev:next:lan` on a network you control: the `/pb/*` rewrite forwards requests to PocketBase at the same origin, so any device that can reach your laptop's IP (and accept the self-signed cert) can hit PB directly. Bind to loopback whenever possible.
+
+Set `NEXT_PUBLIC_POCKETBASE_URL=/pb` in `.env.local` so the browser hits PocketBase through Next's origin (a rewrite in `next.config.ts` proxies `/pb/*` → the real PB instance — development builds only). Open `https://<your-laptop-ip>:3000` on the phone and accept the self-signed cert. `pnpm pb:seed` populates the database with demo assets, locations, and service schedules for the walkthrough.
+
 ## Run with Docker
 
 ```bash
diff --git a/branch-docs/2026-04-21-mobile-and-scan-design.md b/branch-docs/2026-04-21-mobile-and-scan-design.md
new file mode 100644
index 0000000..1c634d3
--- /dev/null
+++ b/branch-docs/2026-04-21-mobile-and-scan-design.md
@@ -0,0 +1,404 @@
+# Mobile-first shell and `/scan` feature
+
+**Branch:** `feat/mobile-scan`
+**Date:** 2026-04-21
+**Scope:** Make Stowage mobile-friendly and add a camera-driven `/scan` page.
+
+## Summary
+
+Stowage is desktop-only today. This work adds:
+
+1. A responsive shell that swaps the sidebar for a bottom navigation bar on screens below `lg` (1024px).
+2. A new `/scan` route that uses the device camera to read Stowage barcodes and opens a quick-actions sheet for the scanned asset.
+3. Mobile-friendly layouts for the field flows (assets, asset detail, services, dashboard, locations) and "usable, not polished" treatment for admin flows.
+4. A web-app manifest so users can install Stowage to their home screen.
+
+No service worker, no offline support, no push notifications in this scope.
+
+## Navigation
+
+### Desktop (≥1024px)
+
+Unchanged. Existing `AppShell` renders `AppSidebar` + `Topbar` + `<main>`. SCAN does not appear in the sidebar — it is mobile-only.
+
+### Mobile (<1024px)
+
+Sidebar is hidden. A fixed `BottomNav` spans the bottom of the viewport with five slots:
+
+```
+Home · Assets · SCAN · Services · More
+```
+
+- Home → `/dashboard`
+- Assets → `/assets`
+- SCAN → `/scan` (elevated center button)
+- Services → `/services`
+- More → opens a bottom sheet with Locations, Taxonomy, Labels, Settings, Sign out, Theme toggle
+
+The topbar stays but shrinks to logo + search icon + avatar. The existing `SidebarTrigger` is hidden below `lg`. `<main>` gets `pb-20` below `lg` to clear the nav.
+
+### SCAN button
+
+- Icon: `ScanLine` from `lucide-react` (the universal "laser through a frame" icon).
+- Shape: 60×60px circle, floats ~18px above the bar on a notched background.
+- Colour: a new token `--scan` that mirrors the existing primary orange (`#c2410c` light / `#ea580c` dark) with `--scan-foreground` white. The button still stands out through its elevation, ring, and shadow glow, but the colour stays inside the warm palette used everywhere else. The token is kept (rather than referencing `--primary` directly) so the SCAN identity can diverge later without touching every call-site.
+- 4px `ring-background`, `shadow-lg` + `shadow-[--scan]/30` glow, `active:scale-95`, `navigator.vibrate(10)` on tap.
+- No label beneath; the icon alone carries it.
+- No idle animation on the icon.
+
+## `/scan` page
+
+### Route
+
+`src/app/(app)/scan/page.tsx` → renders `ScanPageClient`. Sits inside the authed app group so the existing `AppLayout` handles access control.
+
+### Layout
+
+Immersive, edge-to-edge. Shell (topbar + bottom nav) stays visible — SCAN must be exitable.
+
+```
+┌─────────────────────────────────────┐
+│  ← Back                       🔦    │
+├─────────────────────────────────────┤
+│                                     │
+│    ┌─────────────────────────┐      │
+│    │   [camera preview]      │      │
+│    │   ╭─╮             ╭─╮   │      │
+│    │                         │      │
+│    │  ← animated scan line → │      │
+│    │                         │      │
+│    │   ╭─╮             ╭─╮   │      │
+│    └─────────────────────────┘      │
+│                                     │
+│      Point at a Stowage label       │
+│                                     │
+│      ┌───────────────────────┐      │
+│      │  Enter asset tag      │      │
+│      └───────────────────────┘      │
+└─────────────────────────────────────┘
+```
+
+- **Reticle.** Four L-shaped corners in `--scan`, 2px stroke, 18px arms, framing a ~260px square.
+- **No scan-line sweep.** The four corner brackets are the only chrome over the camera feed. An animated sweeping line was considered and rejected as visual noise.
+- **Manual entry.** "Enter asset tag" button is always visible. Opens a sheet with a focused text input that runs the same resolver as a scan.
+- **Torch.** Top-right icon. Shown only when the active `MediaStreamTrack` reports `getCapabilities().torch === true`. Toggles via `applyConstraints({ advanced: [{ torch }] })`.
+- **Back.** Stops the stream and calls `router.back()`.
+- **Permission denied / insecure context.** Replace the camera viewport with a neutral state: `CameraOff` icon, one-line explainer, help link to browser settings, manual-entry button remains.
+
+## Scanner implementation
+
+### `@zxing/browser`
+
+One dependency, one code path, works everywhere including Firefox. Imported dynamically inside the hook so it does not enter the main bundle.
+
+### Hook
+
+`useBarcodeScanner` in `src/hooks/use-barcode-scanner.ts`:
+
+```ts
+type ScanResult = {
+  text: string;
+  format: "CODE_128" | "DATA_MATRIX" | "QR_CODE";
+};
+
+function useBarcodeScanner(options: {
+  videoRef: RefObject<HTMLVideoElement>;
+  onResult: (result: ScanResult) => void;
+  enabled: boolean;
+}): {
+  state: "idle" | "requesting" | "scanning" | "denied" | "insecure" | "error";
+  error: string | null;
+  torch: { supported: boolean; on: boolean; toggle: () => void };
+  restart: () => void;
+};
+```
+
+- Dynamic-imports `BrowserMultiFormatReader` restricted to `CODE_128`, `DATA_MATRIX`, `QR_CODE`.
+- Camera constraint: `{ facingMode: { ideal: "environment" } }`.
+- Decode cadence: ~200ms per frame.
+- Duplicate suppression: ignores repeat `text` values within a 2-second window.
+- Always stops every `MediaStreamTrack` on unmount and on `enabled: false`.
+
+### Resolver
+
+`src/lib/scan.ts` exports `resolveScanTarget(text, appOrigin)`:
+
+1. If `text` is a URL with matching origin and path `/assets/<id>` → fetch asset detail.
+2. Otherwise → unresolved.
+3. If asset fetch 404s or is forbidden → unresolved.
+
+Returns `{ status: "asset", asset } | { status: "unresolved", rawText }`. Strict by design — we do not pretend to understand foreign barcodes.
+
+### Post-scan state
+
+The page owns a `target` state. While `target !== null`, the scanner is paused. Dismissing the sheet clears `target` and resumes scanning so the user can walk a row of shelves scanning in sequence.
+
+- Success haptic: `navigator.vibrate?.(15)`.
+- Unresolved haptic: `[10, 60, 10]`.
+- Asset fetches go through TanStack Query keyed `["asset", id]`, so "View details" opens the asset page from cache.
+
+## Result sheet and quick actions
+
+When `target.status === "asset"`:
+
+```
+┌─────────────────────────────────────┐
+│            ─── drag handle ───      │
+├─────────────────────────────────────┤
+│  [STATUS] Drill #47                 │
+│  AST-0047 · Workshop / Bench 3      │
+├─────────────────────────────────────┤
+│  ┌───────┐ ┌───────┐ ┌───────┐     │
+│  │ View  │ │Status │ │ Move  │     │
+│  └───────┘ └───────┘ └───────┘     │
+│  ┌───────┐ ┌───────┐ ┌───────┐     │
+│  │ Photo │ │ Note  │ │Service│     │
+│  └───────┘ └───────┘ └───────┘     │
+├─────────────────────────────────────┤
+│  Scan another ↓                     │
+└─────────────────────────────────────┘
+```
+
+The six actions:
+
+1. **View details** → `router.push('/assets/' + id)`.
+2. **Status** → nested sheet with the five `ASSET_STATUS_OPTIONS` as a radio list → `updateAsset({ status })`.
+3. **Move** → nested sheet with a searchable location list → `updateAsset({ locationId })`.
+4. **Photo** → `<input type="file" accept="image/*" capture="environment">` launched programmatically → `attachments.uploadAttachment(assetId, file)`.
+5. **Note** → single `<textarea>`, appended to `asset.notes` with a timestamp + user prefix.
+6. **Log service** → service date, provider (optional), cost (optional), notes (optional) → `serviceRecords.createServiceRecord(...)`.
+
+Status and Move are optimistic. Photo and Log service are pessimistic. Any action except View details returns to the result sheet with the updated asset still shown; the scanner only resumes when the sheet is dismissed.
+
+When `target.status === "unresolved"` the sheet shows the decoded text and two buttons: _Try again_, _Enter manually_.
+
+## Mobile layouts per page
+
+### Field flows (mobile-first redesign)
+
+**Assets list (`/assets`).** Keep `AssetTable` on desktop. Below `lg`, swap in `AssetCardList` — each card shows category dot, name, status badge, asset tag, location path, up to three tag chips. Tap → detail. Always-visible kebab (top-right of each card) → the same six-action sheet as scan results. Filters move into a bottom sheet triggered by a sticky chip with an active-count badge. Sort becomes a segmented control inside the filter sheet.
+
+**Asset detail (`/assets/:id`).** Hero already stacks on narrow screens; needs less padding and thumb-friendly actions. Edit / Print / Delete collapse into a "⋯" menu. The existing tabs become sticky below the hero so they stay visible while scrolling the field list. Attachments gallery becomes a 2-column grid below `sm`.
+
+**Services list (`/services`).** Grouped card stream with collapsible sections: Overdue, Due this week, Due this month, Upcoming. Each card shows asset name, relative due date, and a "Log service" button that opens the same sheet as the scan flow.
+
+**Dashboard (`/dashboard`).** Single vertical feed on mobile. Order: stats (horizontally scrollable chip row), Upcoming services, Recent assets, Quick actions, Category/Location breakdown (collapsed by default).
+
+**Locations (`/locations`).** Tree becomes a full-width accordion. Each node shows name + asset count + chevron. Create / edit opens a bottom sheet.
+
+### Admin flows (usable, not polished)
+
+**Taxonomy pages (`/categories`, `/tags`, `/fields`).** Tables drop non-essential columns below `md`, keeping name + primary actions. Row-hover kebabs become always-visible buttons that open sheets. Form dialogs become full-height sheets below `md`.
+
+**Label designer (`/labels`).** Canvas drag-and-drop is bad on touch. Below `lg` the page shows the template list only, with a read-only preview for each template and a banner: "Open Stowage on desktop to edit label templates." Printing from mobile keeps working.
+
+**Settings (`/settings`).** Form-shaped already. Needs input sizing and button stacking.
+
+### Shared primitives
+
+- `useMediaQuery(query)` — generic `matchMedia` wrapper, SSR-safe (returns `false` on server to avoid hydration flicker). Used sparingly; layouts should prefer Tailwind breakpoints. Added alongside the existing `useIsMobile` (which stays at 768px for the shadcn Sidebar). The mobile shell uses `useMediaQuery("(min-width: 1024px)")`.
+- `MobileActionSheet` — wrapper around shadcn `Sheet side="bottom"` with drag handle, `env(safe-area-inset-bottom)` padding, shared visual vocabulary.
+- `EmptyState` — consolidated component so mobile empty states stay consistent.
+
+## PWA manifest
+
+`public/manifest.webmanifest`:
+
+```json
+{
+  "name": "Stowage",
+  "short_name": "Stowage",
+  "start_url": "/dashboard",
+  "display": "standalone",
+  "background_color": "#fafaf9",
+  "theme_color": "#c2410c",
+  "icons": [
+    {
+      "src": "/images/web/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/web/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/images/web/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
+```
+
+Linked from `src/app/layout.tsx` via `metadata.manifest` and `metadata.themeColor`. Apple meta tags added via `metadata.appleWebApp`.
+
+No service worker. Offline support is deliberately out of scope — a realtime-backed PocketBase app needs conflict resolution and queue semantics we are not taking on in this pass.
+
+## Testing plan
+
+Tests are written **alongside** each step, not bolted on at the end. Every step ships with matching Vitest or Playwright coverage before it's considered done. No step lands in a PR without its tests green.
+
+### Vitest (jsdom) — `pnpm test`
+
+Mirror the source structure under `src/__tests__/`. Each new source file gets a corresponding test file.
+
+**New files covered:**
+
+- `src/__tests__/lib/scan.test.ts` — `resolveScanTarget`:
+  - URL matching current origin + `/assets/<id>` → resolves to `asset` when fetch succeeds
+  - URL on a different origin → `unresolved`
+  - URL with matching origin but non-`/assets/` path → `unresolved`
+  - Non-URL raw text → `unresolved`
+  - Asset fetch returns 404 → `unresolved` (never `error`)
+  - Asset fetch returns 403 → `unresolved`
+  - Trimming and trailing-slash tolerance on `appOrigin`
+- `src/__tests__/hooks/use-barcode-scanner.test.tsx` — the scanner hook's state machine, with `@zxing/browser` and `navigator.mediaDevices` mocked:
+  - State transitions `idle` → `requesting` → `scanning` on enable
+  - Returns to `idle` on `enabled: false`; all tracks stopped
+  - `denied` state when `getUserMedia` rejects with `NotAllowedError`
+  - `insecure` state in non-secure context (stubbed `window.isSecureContext = false`)
+  - Duplicate-suppression window: same text twice within 2s fires once
+  - Distinct text values within the window both fire
+  - `torch.supported` reflects `getCapabilities().torch`; toggle calls `applyConstraints`
+  - Cleanup on unmount stops every track exactly once
+- `src/__tests__/hooks/use-media-query.test.tsx` — `useMediaQuery`:
+  - Returns `false` in SSR-ish environment (no `window.matchMedia`)
+  - Reflects initial `matches` value
+  - Updates when media-query changes fire
+  - Removes its listener on unmount
+- `src/__tests__/components/layout/bottom-nav.test.tsx`:
+  - Renders all five slots with correct icons (`ScanLine` in the center)
+  - Scan center button is present with the `--scan` token styling class
+  - Active-route highlighting: Home active on `/dashboard`, Assets active on `/assets` and `/assets/abc`, Services active on `/services`, More active when the sheet is open
+  - Tapping More opens the sheet with Locations / Taxonomy / Labels / Settings / theme / sign-out entries
+- `src/__tests__/components/scan/scan-page-client.test.tsx`:
+  - Renders camera viewport and reticle in idle state
+  - Shows "Enter asset tag" button in every state
+  - Permission-denied state shows `CameraOff` icon + explainer (no red banner)
+  - Insecure-context state shows specific HTTPS explainer
+  - Manual entry sheet: submitting tag calls the same resolver, opens result sheet
+- `src/__tests__/components/scan/scan-result-sheet.test.tsx`:
+  - Renders asset hero + 2×3 action grid
+  - All six actions open their nested sheets
+  - Status action: submitting a new status calls `updateAsset`; failure rolls back the optimistic update
+  - Move action: location picker submit calls `updateAsset({ locationId })`
+  - Photo action: file input has `accept="image/*"` and `capture="environment"`; chosen file calls `uploadAttachment`
+  - Note action: appends rather than replaces, timestamp + user prefix present
+  - Log service action: form submit calls `createServiceRecord` with the expected payload
+  - Unresolved sheet renders raw text + Try-again + Enter-manually buttons
+- `src/__tests__/components/assets/asset-card-list.test.tsx`:
+  - Renders one card per asset with correct name, tag, status, location, up-to-three tag chips + overflow count
+  - Tapping card navigates; kebab opens the action sheet
+- `src/__tests__/components/layout/mobile-action-sheet.test.tsx`:
+  - Drag handle present, backdrop dismisses, safe-area padding class applied
+
+**Existing tests that must stay green:**
+
+- `app-shell`, `app-sidebar`, `topbar`, `use-mobile`, `use-realtime-*` — these exist and must not regress when we add the mobile swap. Any required edits to the shell components are reflected by updating their tests deliberately (not by loosening assertions).
+
+### Vitest (Node / PocketBase) — `pnpm test:pb`
+
+No new backend endpoints are introduced. All scan mutations go through existing `updateAsset`, `uploadAttachment`, `createServiceRecord` whose PB-layer tests already exist in `src/server/**/__tests__`. I'll verify each of those tests still passes after the scan flow wires call them.
+
+### Playwright (e2e) — `pnpm test:e2e`
+
+**Config changes** (`playwright.config.ts`):
+
+- Add a second project `{ name: "mobile-chromium", use: { ...devices["Pixel 7"] } }` alongside the existing `chromium`.
+- Specs that assert desktop layout run on `chromium` only (via `test.describe.configure({ mode: "serial" })` + project filter).
+- Specs that assert mobile layout run on `mobile-chromium` only.
+- Specs that test route-level behavior (auth redirects, CRUD round-trips) run on **both** projects so we catch mobile-specific regressions cheaply.
+- All existing projects keep `fullyParallel: false, workers: 1` (the suite already shares a PB instance).
+
+**Auth credentials.** Every new authed spec uses the same pattern existing specs use (`e2e/assets.spec.ts`):
+
+```ts
+const email = process.env.E2E_AUTH_EMAIL;
+const password = process.env.E2E_AUTH_PASSWORD;
+test.skip(
+  !email || !password,
+  "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run …",
+);
+```
+
+Credentials live in `.env.local` as they already do. Playwright loads them because `pnpm dev:next` reads `.env.local` at boot, which the webServer command triggers. I will not touch `.env.local` or commit credentials.
+
+**New spec files:**
+
+- `e2e/mobile-shell.spec.ts` (runs on `mobile-chromium`):
+  - Unauthenticated user visiting a protected route redirects to login (sanity)
+  - Bottom nav is visible and sidebar is not, at the mobile viewport
+  - Each nav slot routes to its page; SCAN routes to `/scan`
+  - "More" opens a sheet containing Locations / Taxonomy / Labels / Settings / Sign out / Theme
+  - PWA manifest: `<link rel="manifest">` present, `theme-color` meta present, manifest JSON parses
+- `e2e/scan.spec.ts` (runs on both projects):
+  - Unauthenticated: `/scan` redirects to login
+  - Authenticated on desktop: scan page shows with reticle visible, camera permission prompt simulated (use `context.grantPermissions(['camera'])`)
+  - Authenticated on mobile: same, plus bottom nav present
+  - Manual entry path: create an asset first, navigate to `/scan`, open manual entry, type the asset's tag, verify result sheet opens with the right name + status
+  - Unresolved: type a bogus tag, verify "couldn't find asset" sheet with raw text
+  - Status quick action: change status through the sheet, reload asset page, confirm new status
+  - Move quick action: change location, reload, confirm new location
+  - Note quick action: add a note, reload, confirm note appended (content + timestamp prefix)
+  - Log service quick action: create service record, verify it appears in the asset's service list
+  - Photo action — skipped unless a fixture image is available; if so, upload and confirm attachment appears
+- `e2e/mobile-field-flows.spec.ts` (runs on `mobile-chromium` only):
+  - Assets list: cards render instead of table; tap opens detail
+  - Assets list: filters sheet opens, filter applies, active count badge updates
+  - Asset detail: hero stacks, tabs remain sticky on scroll, kebab menu shows Edit / Print / Delete
+  - Services list: Overdue / Due this week / Upcoming groupings render; "Log service" opens sheet
+  - Dashboard: single vertical feed, stats row horizontally scrollable
+  - Locations: accordion renders, expand/collapse works
+  - Labels: shows "Open Stowage on desktop to edit" banner, template list still visible, print still works
+
+**Camera handling in Playwright.** The scanner's decode loop can't be driven deterministically in CI without a synthetic video stream. Two pragmatic choices:
+
+- Every e2e assertion about "what happens after a scan" goes through the **manual-entry input**, which hits the exact same resolver and result-sheet code path as a real decode. Covers 100% of the post-decode UI.
+- The scanner hook itself (request camera, start/stop stream, decode loop, duplicate suppression) is tested with **Vitest + mocked MediaStream and mocked zxing** — not Playwright. This is more reliable than driving a fake camera in Chromium.
+
+### "Live" / real-device smoke checklist
+
+Before merging, manually verify on real hardware (checked off in the PR description):
+
+- iOS Safari 17+: camera opens, decodes a printed Code128 label, opens correct asset. Torch-capability probe returns `false` (known limitation); manual entry still works.
+- Chrome on Android: camera opens, decodes, torch toggle works, PWA install prompt available.
+- Desktop Chrome/Firefox on a 1280px window: sidebar visible. Dev-tools mobile emulator at 375px: bottom nav + scan button visible.
+- Install-to-home-screen on iOS: launches full-screen with Stowage icon and theme color.
+- `navigator.vibrate` triggers on Android success; no-op on iOS (expected).
+
+These are manual steps noted on the PR, not automated — they're the things that genuinely don't survive in a CI headless browser.
+
+### Serving HTTPS for phone testing
+
+`getUserMedia` only works in a secure context. Localhost is already a secure origin on desktop, but a LAN IP (e.g. `http://192.168.x.x:3000` on a phone) is not — iOS Safari will silently refuse camera access. Three options:
+
+1. **`pnpm dev:https`** — boots Next with `--experimental-https` on `0.0.0.0`, auto-generates a self-signed cert, and runs PocketBase alongside. Set `NEXT_PUBLIC_POCKETBASE_URL=/pb` in `.env.local` so the browser talks to PB through the Next origin (the rewrite in `next.config.ts` proxies `/pb/*` → `http://127.0.0.1:8090`). On the phone, open `https://<your-laptop-ip>:3000` and accept the cert warning. iOS needs `Settings → General → About → Certificate Trust Settings` to fully trust self-signed certs for camera features.
+2. **Public tunnel** — `cloudflared tunnel --url https://localhost:3000` or `ngrok http 3000` gives a real HTTPS URL that works on any phone without cert fiddling. Set `NEXT_PUBLIC_POCKETBASE_URL=/pb` first.
+3. **Existing TLS Docker profile** — `docker compose --profile tls up --build` (already in the repo) proxies everything through Caddy with Let's Encrypt on a public domain. This is the production path; also works for a staging phone test if you have a domain pointed at your dev machine.
+
+## Implementation order
+
+Each step includes its own tests before it's "done". No blanket "tests at the end" phase.
+
+1. `useMediaQuery` hook **+ its Vitest test**. Manifest file wiring in `src/app/layout.tsx` **+ e2e assertion that the `<link rel="manifest">` is present**.
+2. `MobileActionSheet` component **+ Vitest**. `BottomNav` component **+ Vitest for slots, active routes, More sheet**. Responsive swap inside `AppShell`. **New `e2e/mobile-shell.spec.ts`** runs green.
+3. `resolveScanTarget` util **+ exhaustive Vitest**. `useBarcodeScanner` hook **+ Vitest with mocked MediaStream and zxing**.
+4. `/scan` page UI with camera viewport, reticle, torch, manual entry, permission-denied state, insecure-context state. Vitest for `ScanPageClient` rendering branches. **`e2e/scan.spec.ts` manual-entry path** goes green.
+5. Result sheet + six quick actions. Each action has a Vitest test for the mutation call and optimistic-rollback behavior. Extend `e2e/scan.spec.ts` with the full set of quick-action round-trips.
+6. Assets list card view + filters sheet. Vitest for `AssetCardList`. Extend or add `e2e/mobile-field-flows.spec.ts` with the list + filter assertions.
+7. Remaining field-flow polish (asset detail, services, dashboard, locations). Each gets added to `e2e/mobile-field-flows.spec.ts`.
+8. Admin page polish (column drops, dialog → sheet, "edit on desktop" banner on labels). Minimal e2e: "labels page shows desktop banner on mobile viewport; template list still rendered".
+9. PWA icons + Apple meta tags. E2E asserts theme-color + manifest link + start URL.
+10. Live device smoke pass (iOS Safari, Android Chrome). Checked off in PR description, not in CI.
+
+## Open questions
+
+None at the time of writing. Revisit if field-testing shows that:
+
+- Foreign-barcode lookup (question 6 option b) is needed in practice.
+- Offline scanning is a real requirement (question 7 option b).
+- Tablet portrait should live on the desktop side of the breakpoint.
diff --git a/e2e/mobile-shell.spec.ts b/e2e/mobile-shell.spec.ts
new file mode 100644
index 0000000..8a8b3dd
--- /dev/null
+++ b/e2e/mobile-shell.spec.ts
@@ -0,0 +1,126 @@
+import { expect, test } from "@playwright/test";
+import { getLanding, signIn } from "./helpers";
+
+async function ensureAuthed(
+  page: import("@playwright/test").Page,
+  skipReason = "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run the mobile shell e2e",
+) {
+  const email = process.env.E2E_AUTH_EMAIL;
+  const password = process.env.E2E_AUTH_PASSWORD;
+  test.skip(!email || !password, skipReason);
+
+  const landing = await getLanding(page);
+  test.skip(landing !== "login", "Mobile shell e2e requires setup complete");
+
+  await signIn(page, email!, password!);
+}
+
+test.describe("mobile shell", () => {
+  test("bottom nav is only visible on mobile viewports", async ({
+    page,
+  }, testInfo) => {
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    const bottomNav = page.getByTestId("bottom-nav");
+    if (testInfo.project.name === "mobile-chromium") {
+      await expect(bottomNav).toBeVisible();
+      await expect(page.getByTestId("bottom-nav-scan")).toHaveAttribute(
+        "href",
+        "/scan",
+      );
+    } else {
+      await expect(bottomNav).toBeHidden();
+    }
+  });
+
+  test("mobile bottom nav routes each slot correctly", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(page);
+
+    await page.getByTestId("bottom-nav-assets").click();
+    await page.waitForURL(/\/assets$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-services").click();
+    await page.waitForURL(/\/services$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-home").click();
+    await page.waitForURL(/\/dashboard$/, { timeout: 10_000 });
+
+    await page.getByTestId("bottom-nav-scan").click();
+    await page.waitForURL(/\/scan$/, { timeout: 10_000 });
+  });
+
+  test("more sheet opens and contains admin entries", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    await page.getByTestId("bottom-nav-more").click();
+
+    const grid = page.getByTestId("more-sheet-grid");
+    await expect(grid).toBeVisible();
+    await expect(page.getByTestId("more-item-locations")).toBeVisible();
+    await expect(page.getByTestId("more-item-taxonomy")).toBeVisible();
+    await expect(page.getByTestId("more-item-labels")).toBeVisible();
+    await expect(page.getByTestId("more-item-settings")).toBeVisible();
+    await expect(page.getByTestId("more-sheet-signout")).toBeVisible();
+
+    await page.getByTestId("more-item-locations").click();
+    await page.waitForURL(/\/locations$/, { timeout: 10_000 });
+  });
+
+  test("assets list renders cards (not a table) on mobile", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "mobile-chromium",
+      "Runs only on mobile-chromium",
+    );
+
+    await ensureAuthed(
+      page,
+      "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run the assets card list e2e",
+    );
+    await page.goto("/assets");
+
+    // Card list is visible, mobile filters trigger is visible, no desktop table
+    await expect(page.getByTestId("asset-filters-mobile")).toBeVisible();
+    await expect(
+      page.getByTestId("asset-filters-mobile-trigger"),
+    ).toBeVisible();
+    await expect(page.locator("table")).toHaveCount(0);
+
+    const filterSheetButton = page.getByTestId("asset-filters-mobile-trigger");
+    await filterSheetButton.click();
+    await expect(page.getByTestId("asset-filters-sheet")).toBeVisible();
+    await expect(page.getByTestId("asset-sort-recent")).toBeVisible();
+  });
+
+  test("sidebar is visible on desktop viewports", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium",
+      "Runs only on desktop chromium",
+    );
+
+    await ensureAuthed(page);
+    await page.goto("/dashboard");
+
+    await expect(page.getByTestId("bottom-nav")).toBeHidden();
+    await expect(page.locator('[data-slot="sidebar-container"]')).toBeVisible();
+  });
+});
diff --git a/e2e/pwa-manifest.spec.ts b/e2e/pwa-manifest.spec.ts
new file mode 100644
index 0000000..3d6144f
--- /dev/null
+++ b/e2e/pwa-manifest.spec.ts
@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("web app manifest", () => {
+  test("links a manifest from every served HTML page", async ({ page }) => {
+    for (const route of ["/", "/dashboard", "/assets", "/scan"]) {
+      await page.goto(route);
+
+      const manifestLink = page.locator('link[rel="manifest"]');
+      await expect(manifestLink).toHaveAttribute(
+        "href",
+        /\/manifest\.webmanifest/,
+      );
+    }
+  });
+
+  test("serves the manifest JSON with PWA fields", async ({ request }) => {
+    const response = await request.get("/manifest.webmanifest");
+    expect(response.status()).toBe(200);
+
+    const manifest = await response.json();
+    expect(manifest.id).toBe("/");
+    expect(manifest.name).toBe("Stowage");
+    expect(manifest.short_name).toBe("Stowage");
+    expect(manifest.start_url).toBe("/dashboard");
+    expect(manifest.display).toBe("standalone");
+    expect(manifest.orientation).toBe("any");
+    expect(manifest.theme_color).toBe("#c2410c");
+    expect(Array.isArray(manifest.icons)).toBe(true);
+    expect(manifest.icons.length).toBeGreaterThan(0);
+
+    const maskable = manifest.icons.filter(
+      (icon: { purpose?: string }) => icon.purpose === "maskable",
+    );
+    expect(maskable.length).toBeGreaterThanOrEqual(2);
+    const maskableSizes = maskable.map(
+      (icon: { sizes?: string }) => icon.sizes,
+    );
+    expect(maskableSizes).toContain("192x192");
+    expect(maskableSizes).toContain("512x512");
+    for (const icon of maskable) {
+      expect(icon.src).toMatch(/-maskable\.png$/);
+    }
+  });
+
+  test("declares a theme-color meta tag", async ({ page }) => {
+    await page.goto("/");
+    const themeColor = page.locator('meta[name="theme-color"]').first();
+    await expect(themeColor).toHaveCount(1);
+    const content = await themeColor.getAttribute("content");
+    expect(content).toMatch(/#[0-9a-fA-F]{6}/);
+  });
+
+  test("declares apple-touch-icon and web-app meta tags", async ({ page }) => {
+    await page.goto("/");
+    const apple = page.locator('link[rel="apple-touch-icon"]').first();
+    await expect(apple).toHaveAttribute("href", /\/apple-touch-icon\.png/);
+    await expect(apple).toHaveAttribute("sizes", "180x180");
+
+    // Next 16 emits `mobile-web-app-capable` (the standardised replacement for
+    // the deprecated `apple-mobile-web-app-capable`). iOS Safari accepts both.
+    const capable = page.locator('meta[name="mobile-web-app-capable"]').first();
+    await expect(capable).toHaveAttribute("content", "yes");
+
+    const title = page
+      .locator('meta[name="apple-mobile-web-app-title"]')
+      .first();
+    await expect(title).toHaveAttribute("content", "Stowage");
+
+    const maskIcon = page.locator('link[rel="mask-icon"]').first();
+    await expect(maskIcon).toHaveAttribute("href", /safari-pinned-tab\.svg$/);
+  });
+
+  test("serves all referenced icon files with 200", async ({ request }) => {
+    const icons = [
+      "/images/web/icon-192.png",
+      "/images/web/icon-512.png",
+      "/images/web/icon-192-maskable.png",
+      "/images/web/icon-512-maskable.png",
+      "/images/web/safari-pinned-tab.svg",
+      "/images/web/apple-touch-icon.png",
+      "/images/web/favicon.ico",
+      // iOS also requests these at the server root as a legacy fallback;
+      // mirroring the file there silences the 404 we saw in dev logs.
+      "/apple-touch-icon.png",
+      "/apple-touch-icon-precomposed.png",
+    ];
+    for (const url of icons) {
+      const response = await request.get(url);
+      expect(response.status(), `GET ${url}`).toBe(200);
+    }
+  });
+});
diff --git a/e2e/scan.spec.ts b/e2e/scan.spec.ts
new file mode 100644
index 0000000..e649d60
--- /dev/null
+++ b/e2e/scan.spec.ts
@@ -0,0 +1,165 @@
+import { expect, test } from "@playwright/test";
+import {
+  fillRequiredFields,
+  getLanding,
+  getLeafPathSegment,
+  signIn,
+} from "./helpers";
+
+async function authedScan(page: import("@playwright/test").Page) {
+  const email = process.env.E2E_AUTH_EMAIL;
+  const password = process.env.E2E_AUTH_PASSWORD;
+  test.skip(
+    !email || !password,
+    "Set E2E_AUTH_EMAIL and E2E_AUTH_PASSWORD to run the scan e2e",
+  );
+
+  const landing = await getLanding(page);
+  test.skip(landing !== "login", "Scan e2e requires setup complete");
+
+  await signIn(page, email!, password!);
+  return { email: email!, password: password! };
+}
+
+async function readAssetTag(page: import("@playwright/test").Page) {
+  const tagBadge = page.getByTestId("asset-tag");
+  await expect(tagBadge).toBeVisible();
+  const assetTag = (await tagBadge.textContent())?.trim() ?? "";
+  expect(assetTag.length).toBeGreaterThan(0);
+  return assetTag;
+}
+
+test.describe("scan feature", () => {
+  test("protected /scan redirects when unauthenticated", async ({ page }) => {
+    const landing = await getLanding(page, "/scan");
+    expect(landing).toBe("login");
+  });
+
+  test("manual entry resolves a real asset and opens the result sheet", async ({
+    page,
+  }) => {
+    await authedScan(page);
+
+    const stamp = Date.now();
+    const name = `Scan E2E ${stamp}`;
+    await page.goto("/assets/new");
+    await page.getByLabel(/Name/i).fill(name);
+    await fillRequiredFields(page);
+    await page.getByRole("button", { name: "Create asset" }).click();
+    await expect(
+      page.getByRole("heading", { name: `${name} created` }),
+    ).toBeVisible({ timeout: 20_000 });
+
+    await page.getByRole("button", { name: "View asset" }).click();
+    await page.waitForURL(/\/assets\/[^/]+$/, { timeout: 20_000 });
+    const assetTag = await readAssetTag(page);
+
+    await page.goto("/scan");
+    await expect(page.getByTestId("scan-page")).toBeVisible();
+
+    await page.getByTestId("scan-manual-entry").click();
+    const input = page.getByTestId("scan-manual-input");
+    await expect(input).toBeVisible();
+    await input.fill(assetTag);
+    await page.getByTestId("scan-manual-submit").click();
+
+    const sheet = page.getByTestId("scan-result-asset");
+    await expect(sheet).toBeVisible({ timeout: 15_000 });
+    await expect(page.getByText(name, { exact: false }).first()).toBeVisible();
+    const viewLink = page.getByTestId("scan-result-view");
+    await expect(viewLink).toHaveAttribute("href", /\/assets\/[^/]+$/);
+  });
+
+  test("status quick action persists a new status on the asset", async ({
+    page,
+  }) => {
+    await authedScan(page);
+
+    const stamp = Date.now();
+    const name = `Scan Status ${stamp}`;
+    await page.goto("/assets/new");
+    await page.getByLabel(/Name/i).fill(name);
+    await fillRequiredFields(page);
+    await page.getByRole("button", { name: "Create asset" }).click();
+    await expect(
+      page.getByRole("heading", { name: `${name} created` }),
+    ).toBeVisible({ timeout: 20_000 });
+    await page.getByRole("button", { name: "View asset" }).click();
+    await page.waitForURL(/\/assets\/[^/]+$/, { timeout: 20_000 });
+    const assetTag = await readAssetTag(page);
+    const assetUrl = page.url();
+
+    await page.goto("/scan");
+    await page.getByTestId("scan-manual-entry").click();
+    await page.getByTestId("scan-manual-input").fill(assetTag);
+    await page.getByTestId("scan-manual-submit").click();
+    await expect(page.getByTestId("scan-result-asset")).toBeVisible({
+      timeout: 15_000,
+    });
+
+    await page.getByTestId("scan-action-status").click();
+    await page.getByTestId("scan-status-option-under_repair").click();
+
+    // Sheet returns to the grid view with the new status reflected.
+    await expect(page.getByTestId("scan-result-actions")).toBeVisible();
+
+    // The real asset page now carries the new status too.
+    await page.goto(assetUrl);
+    await expect(
+      page.getByText("Under repair", { exact: false }).first(),
+    ).toBeVisible({ timeout: 10_000 });
+  });
+
+  test("manual entry shows the unresolved sheet for a bogus tag", async ({
+    page,
+  }) => {
+    await authedScan(page);
+
+    await page.goto("/scan");
+    await page.getByTestId("scan-manual-entry").click();
+    await page.getByTestId("scan-manual-input").fill("DOES-NOT-EXIST-XYZ-0000");
+    await page.getByTestId("scan-manual-submit").click();
+
+    await expect(page.getByTestId("scan-result-unresolved")).toBeVisible({
+      timeout: 15_000,
+    });
+    await expect(page.getByText(/DOES-NOT-EXIST-XYZ-0000/)).toBeVisible();
+  });
+
+  test("the scan page falls back to a denied/insecure state gracefully", async ({
+    page,
+  }) => {
+    await authedScan(page);
+    await page.goto("/scan");
+    // Either the camera works (scanning) or we get one of the fallback states.
+    // All variants must show a manual-entry button.
+    await expect(page.getByTestId("scan-manual-entry")).toBeVisible();
+    const paths = [
+      page.getByTestId("scan-viewport"),
+      page.getByTestId("scan-state-denied"),
+      page.getByTestId("scan-state-insecure"),
+      page.getByTestId("scan-state-error"),
+    ];
+    // Exactly one of the scanner branches should be visible.
+    let matched = 0;
+    for (const locator of paths) {
+      if (await locator.isVisible().catch(() => false)) matched += 1;
+    }
+    expect(matched).toBe(1);
+  });
+
+  test("back navigation returns to the previous page", async ({ page }) => {
+    await authedScan(page);
+    await page.goto("/dashboard");
+    // Ensure a proper prior entry so router.back() has somewhere to go.
+    await page.goto("/scan");
+    await expect(page.getByTestId("scan-page")).toBeVisible();
+
+    await page.getByTestId("scan-back").click();
+    await page.waitForURL((url) => !url.pathname.endsWith("/scan"), {
+      timeout: 10_000,
+    });
+    const leaf = getLeafPathSegment(page.url());
+    expect(leaf).toBe("dashboard");
+  });
+});
diff --git a/mprocs.https.yaml b/mprocs.https.yaml
new file mode 100644
index 0000000..5c389e5
--- /dev/null
+++ b/mprocs.https.yaml
@@ -0,0 +1,7 @@
+procs:
+  next:
+    # Binds Next to 0.0.0.0 so a phone on the same LAN can reach it for scan
+    # testing. Only use on a trusted network — see README "Phone testing".
+    cmd: ["pnpm", "run", "dev:next:lan"]
+  pocketbase:
+    cmd: ["pnpm", "run", "pb:dev"]
diff --git a/next.config.ts b/next.config.ts
index cd8f14f..16dcece 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -5,6 +5,52 @@ const nextConfig: NextConfig = {
   turbopack: {
     root: process.cwd(),
   },
+  devIndicators: {
+    position: "top-right",
+  },
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          // Scope camera to our own origin (needed for /scan) and explicitly
+          // deny other powerful features we don't use. Without this, an
+          // iframe embed of Stowage could request camera on behalf of the
+          // page.
+          {
+            key: "Permissions-Policy",
+            value: "camera=(self), microphone=(), geolocation=()",
+          },
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+        ],
+      },
+    ];
+  },
+  async rewrites() {
+    // When NEXT_PUBLIC_POCKETBASE_URL is set to a relative path (e.g. `/pb`)
+    // we proxy /pb/* to the real PocketBase instance. This lets the browser
+    // talk to PB over the same origin — required when running `next dev
+    // --experimental-https` on a phone, where http://127.0.0.1:8090 would
+    // be blocked as mixed content.
+    //
+    // Guarded to development only: if this ran in a production deployment
+    // where NEXT_PUBLIC_POCKETBASE_URL is a relative path, every request
+    // under that prefix would be silently forwarded to PB — bypassing the
+    // Next route guards. Require NODE_ENV=development to be safe.
+    if (process.env.NODE_ENV !== "development") return [];
+    const publicUrl = process.env.NEXT_PUBLIC_POCKETBASE_URL ?? "";
+    if (!publicUrl.startsWith("/")) return [];
+    const target = process.env.POCKETBASE_URL ?? "http://127.0.0.1:8090";
+    const prefix = publicUrl.replace(/\/+$/, "");
+    if (!prefix) return [];
+    return [
+      {
+        source: `${prefix}/:path*`,
+        destination: `${target}/:path*`,
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index b2db9c1..b8ef035 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,9 @@
   "scripts": {
     "dev": "mprocs",
     "dev:next": "next dev --turbopack",
+    "dev:next:https": "next dev --turbopack --experimental-https -H 127.0.0.1",
+    "dev:next:lan": "next dev --turbopack --experimental-https -H 0.0.0.0",
+    "dev:https": "mprocs --config mprocs.https.yaml",
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
@@ -20,11 +23,13 @@
     "pb:setup": "bash scripts/setup-pocketbase.sh",
     "pb:dev": "./bin/pocketbase serve --http=127.0.0.1:8090 --dir=./pb_data --migrationsDir=./pb_migrations",
     "pb:bootstrap": "bash scripts/bootstrap-pocketbase.sh",
+    "pb:seed": "node --env-file=.env.local scripts/seed-demo-data.mjs",
     "pb:typegen": "pocketbase-typegen --db ./pb_data/data.db --out src/server/pb/types.generated.ts"
   },
   "dependencies": {
     "@auth/core": "^0.37.4",
     "@tanstack/react-query": "^5.99.2",
+    "@zxing/browser": "^0.1.5",
     "bwip-js": "^4.8.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/playwright.config.ts b/playwright.config.ts
index 58b2217..a0cfa6a 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,5 +1,22 @@
+import { existsSync } from "node:fs";
 import { defineConfig, devices } from "@playwright/test";
 
+// Load .env.local into process.env so E2E_AUTH_EMAIL / _PASSWORD and any other
+// local secrets are available to the test runner, matching how Next.js loads
+// them for the dev server. Node's native env-file loader is available from
+// 20.12+ which is within our engine floor.
+for (const file of [".env.local", ".env"]) {
+  if (existsSync(file)) {
+    try {
+      (
+        process as unknown as { loadEnvFile?: (p: string) => void }
+      ).loadEnvFile?.(file);
+    } catch {
+      // best effort — skip malformed files
+    }
+  }
+}
+
 export default defineConfig({
   testDir: "./e2e",
   // Run specs serially — the suite shares a single PocketBase instance and
@@ -19,6 +36,10 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
+    {
+      name: "mobile-chromium",
+      use: { ...devices["Pixel 7"] },
+    },
   ],
   webServer: [
     {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95b0590..408de2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.99.2
         version: 5.99.2(react@19.2.3)
+      '@zxing/browser':
+        specifier: ^0.1.5
+        version: 0.1.5(@zxing/library@0.21.3)
       bwip-js:
         specifier: ^4.8.0
         version: 4.8.0
@@ -2272,6 +2275,18 @@ packages:
   '@vitest/utils@4.0.18':
     resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==}
 
+  '@zxing/browser@0.1.5':
+    resolution: {integrity: sha512-4Lmrn/il4+UNb87Gk8h1iWnhj39TASEHpd91CwwSJtY5u+wa0iH9qS0wNLAWbNVYXR66WmT5uiMhZ7oVTrKfxw==}
+    peerDependencies:
+      '@zxing/library': ^0.21.0
+
+  '@zxing/library@0.21.3':
+    resolution: {integrity: sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==}
+    engines: {node: '>= 10.4.0'}
+
+  '@zxing/text-encoding@0.9.0':
+    resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -4722,6 +4737,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-custom-error@3.3.1:
+    resolution: {integrity: sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==}
+    engines: {node: '>=14.0.0'}
+
   ts-morph@26.0.0:
     resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
 
@@ -7175,6 +7194,21 @@ snapshots:
       '@vitest/pretty-format': 4.0.18
       tinyrainbow: 3.0.3
 
+  '@zxing/browser@0.1.5(@zxing/library@0.21.3)':
+    dependencies:
+      '@zxing/library': 0.21.3
+    optionalDependencies:
+      '@zxing/text-encoding': 0.9.0
+
+  '@zxing/library@0.21.3':
+    dependencies:
+      ts-custom-error: 3.3.1
+    optionalDependencies:
+      '@zxing/text-encoding': 0.9.0
+
+  '@zxing/text-encoding@0.9.0':
+    optional: true
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -9958,6 +9992,8 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  ts-custom-error@3.3.1: {}
+
   ts-morph@26.0.0:
     dependencies:
       '@ts-morph/common': 0.27.0
diff --git a/public/apple-touch-icon-precomposed.png b/public/apple-touch-icon-precomposed.png
new file mode 100644
index 0000000..e596a41
Binary files /dev/null and b/public/apple-touch-icon-precomposed.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..e596a41
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/images/ios/Contents.json b/public/images/ios/Contents.json
index bd04914..0767e12 100644
--- a/public/images/ios/Contents.json
+++ b/public/images/ios/Contents.json
@@ -131,4 +131,4 @@
     "author": "iconkitchen",
     "version": 1
   }
-}
\ No newline at end of file
+}
diff --git a/public/images/web/safari-pinned-tab.svg b/public/images/web/safari-pinned-tab.svg
new file mode 100644
index 0000000..4406151
--- /dev/null
+++ b/public/images/web/safari-pinned-tab.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path
+    fill="#000000"
+    d="M12 11h40a4 4 0 0 1 4 4v34a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V15a4 4 0 0 1 4-4Zm6 10v22h28v-6H25v-3h17v-6H25v-3h21v-4H18Z"
+  />
+</svg>
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
new file mode 100644
index 0000000..3fb5c1f
--- /dev/null
+++ b/public/manifest.webmanifest
@@ -0,0 +1,38 @@
+{
+  "id": "/",
+  "name": "Stowage",
+  "short_name": "Stowage",
+  "description": "Asset management for small teams",
+  "start_url": "/dashboard",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#fafaf9",
+  "theme_color": "#c2410c",
+  "icons": [
+    {
+      "src": "/images/web/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/images/web/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/images/web/icon-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/web/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/scripts/seed-demo-data.mjs b/scripts/seed-demo-data.mjs
new file mode 100644
index 0000000..69405d6
--- /dev/null
+++ b/scripts/seed-demo-data.mjs
@@ -0,0 +1,793 @@
+#!/usr/bin/env node
+/**
+ * Seed a batch of demo locations, categories, tags, assets, service
+ * schedules and service records so the mobile shell has something to walk
+ * through on a phone. Idempotent: records created previously with the DEMO-*
+ * prefix are removed before new ones are written.
+ *
+ *   pnpm pb:seed
+ *
+ * Reads POCKETBASE_URL, POCKETBASE_SUPERUSER_EMAIL and
+ * POCKETBASE_SUPERUSER_PASSWORD from the process env (the pnpm script loads
+ * .env.local).
+ */
+
+import PocketBase from "pocketbase";
+
+const DEMO_PREFIX = "DEMO";
+
+function env(name, fallback) {
+  const value = process.env[name];
+  if (value && value.trim()) return value.trim();
+  if (fallback !== undefined) return fallback;
+  throw new Error(`Missing required env var: ${name}`);
+}
+
+function todayIso(offsetDays = 0) {
+  const now = new Date();
+  now.setUTCHours(0, 0, 0, 0);
+  now.setUTCDate(now.getUTCDate() + offsetDays);
+  const yyyy = now.getUTCFullYear();
+  const mm = String(now.getUTCMonth() + 1).padStart(2, "0");
+  const dd = String(now.getUTCDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+function now() {
+  return Date.now();
+}
+
+async function main() {
+  const url = env("POCKETBASE_URL", "http://127.0.0.1:8090");
+  const email = env("POCKETBASE_SUPERUSER_EMAIL");
+  const password = env("POCKETBASE_SUPERUSER_PASSWORD");
+
+  const pb = new PocketBase(url);
+  pb.autoCancellation(false);
+  await pb.collection("_superusers").authWithPassword(email, password);
+  console.log(`authenticated superuser @ ${url}`);
+
+  const ownerId = await resolveOwnerId(pb, email);
+  console.log(`attributing seed records to user ${ownerId}`);
+
+  await clearPreviousDemoData(pb);
+  console.log("cleared previous DEMO- records");
+
+  const categoryIds = await seedCategories(pb, ownerId);
+  console.log(`seeded ${Object.keys(categoryIds).length} categories`);
+  const tagIds = await seedTags(pb);
+  console.log(`seeded ${Object.keys(tagIds).length} tags`);
+  const locationIds = await seedLocations(pb);
+  console.log(`seeded ${Object.keys(locationIds).length} locations`);
+  const groupIds = await seedServiceGroups(pb, ownerId);
+  console.log(`seeded ${Object.keys(groupIds).length} service groups`);
+  const providerIds = await seedProviders(pb, ownerId);
+  console.log(`seeded ${Object.keys(providerIds).length} service providers`);
+
+  const fieldIds = await seedCustomFields(pb);
+  console.log(`seeded ${Object.keys(fieldIds).length} custom fields`);
+
+  const assetRefs = await seedAssets(pb, {
+    ownerId,
+    categoryIds,
+    locationIds,
+    groupIds,
+    fieldIds,
+  });
+  console.log(`seeded ${assetRefs.length} assets`);
+
+  const tagLinks = await seedAssetTags(pb, assetRefs, tagIds, ownerId);
+  console.log(`linked ${tagLinks} asset-tags`);
+
+  const schedules = await seedServiceSchedules(pb, assetRefs, ownerId);
+  console.log(`seeded ${schedules} service schedules`);
+
+  const records = await seedServiceRecords(pb, {
+    assetRefs,
+    groupIds,
+    providerIds,
+    ownerId,
+  });
+  console.log(`seeded ${records} service records`);
+
+  console.log("\ndone — reload the app to see the demo data");
+}
+
+async function resolveOwnerId(pb, superuserEmail) {
+  const direct = await pb
+    .collection("users")
+    .getFirstListItem(`email = "${escapeFilter(superuserEmail)}"`, {
+      $autoCancel: false,
+    })
+    .catch(() => null);
+  if (direct) return direct.id;
+
+  const admin = await pb
+    .collection("users")
+    .getFirstListItem('role = "admin"', { $autoCancel: false })
+    .catch(() => null);
+  if (admin) return admin.id;
+
+  const anyone = await pb
+    .collection("users")
+    .getList(1, 1, { $autoCancel: false })
+    .then((result) => result.items[0] ?? null)
+    .catch(() => null);
+  if (anyone) return anyone.id;
+
+  throw new Error(
+    "No app users found — create one at /setup first, then rerun the seed.",
+  );
+}
+
+function escapeFilter(value) {
+  return value.replace(/"/g, '\\"');
+}
+
+async function clearPreviousDemoData(pb) {
+  const collections = [
+    {
+      name: "assets",
+      filter: `assetTag ~ "${DEMO_PREFIX}-%"`,
+    },
+    {
+      name: "categories",
+      filter: 'name ~ "(DEMO)"',
+    },
+    {
+      name: "tags",
+      filter: 'name ~ "(DEMO)"',
+    },
+    {
+      name: "locations",
+      filter: 'name ~ "(DEMO)"',
+    },
+    {
+      name: "serviceGroups",
+      filter: 'name ~ "(DEMO)"',
+    },
+    {
+      name: "serviceProviders",
+      filter: 'name ~ "(DEMO)"',
+    },
+    {
+      name: "customFieldDefinitions",
+      filter: 'name ~ "(DEMO)"',
+    },
+  ];
+
+  for (const { name, filter } of collections) {
+    const rows = await pb
+      .collection(name)
+      .getFullList({ filter, $autoCancel: false })
+      .catch(() => []);
+    for (const row of rows) {
+      await pb.collection(name).delete(row.id, { $autoCancel: false });
+    }
+  }
+}
+
+async function seedCategories(pb, ownerId) {
+  const entries = [
+    {
+      key: "power",
+      name: "Power tools (DEMO)",
+      prefix: "PT",
+      color: "#C2410C",
+    },
+    {
+      key: "hand",
+      name: "Hand tools (DEMO)",
+      prefix: "HT",
+      color: "#6B8E6B",
+    },
+    {
+      key: "it",
+      name: "IT equipment (DEMO)",
+      prefix: "IT",
+      color: "#2563EB",
+    },
+    {
+      key: "vehicle",
+      name: "Vehicles (DEMO)",
+      prefix: "VH",
+      color: "#D97706",
+    },
+  ];
+  const out = {};
+  for (const entry of entries) {
+    const record = await pb.collection("categories").create(
+      {
+        name: entry.name,
+        normalizedName: entry.name.toLowerCase(),
+        prefix: entry.prefix,
+        color: entry.color,
+        description: null,
+        createdAt: now(),
+        updatedAt: now(),
+        createdBy: ownerId,
+        updatedBy: ownerId,
+      },
+      { $autoCancel: false },
+    );
+    out[entry.key] = record.id;
+  }
+  return out;
+}
+
+async function seedTags(pb) {
+  const entries = [
+    { key: "electric", name: "electric (DEMO)", color: "#F59E0B" },
+    { key: "cordless", name: "cordless (DEMO)", color: "#0D9488" },
+    { key: "critical", name: "critical (DEMO)", color: "#DC2626" },
+    { key: "rentable", name: "rentable (DEMO)", color: "#6366F1" },
+    { key: "legacy", name: "legacy (DEMO)", color: "#737373" },
+  ];
+  const out = {};
+  for (const entry of entries) {
+    const record = await pb.collection("tags").create(
+      {
+        name: entry.name,
+        normalizedName: entry.name.toLowerCase(),
+        color: entry.color,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    out[entry.key] = record.id;
+  }
+  return out;
+}
+
+async function seedLocations(pb) {
+  const roots = [
+    {
+      key: "workshop",
+      name: "Workshop (DEMO)",
+      children: [
+        { key: "bench1", name: "Bench 1 (DEMO)" },
+        { key: "bench2", name: "Bench 2 (DEMO)" },
+        { key: "bench3", name: "Bench 3 (DEMO)" },
+        {
+          key: "wshelves",
+          name: "Shelves (DEMO)",
+          children: [
+            { key: "shelfA", name: "Shelf A (DEMO)" },
+            { key: "shelfB", name: "Shelf B (DEMO)" },
+          ],
+        },
+      ],
+    },
+    {
+      key: "office",
+      name: "Office (DEMO)",
+      children: [
+        { key: "serverroom", name: "Server room (DEMO)" },
+        { key: "deskA", name: "Desk A (DEMO)" },
+        { key: "deskB", name: "Desk B (DEMO)" },
+      ],
+    },
+    {
+      key: "warehouse",
+      name: "Warehouse (DEMO)",
+      children: [
+        { key: "loadingbay", name: "Loading bay (DEMO)" },
+        { key: "coldstorage", name: "Cold storage (DEMO)" },
+      ],
+    },
+  ];
+
+  const out = {};
+
+  async function createNode(parentId, parentPath, node) {
+    const path = parentPath ? `${parentPath} / ${node.name}` : node.name;
+    const record = await pb.collection("locations").create(
+      {
+        name: node.name,
+        normalizedName: node.name.toLowerCase(),
+        description: null,
+        parentId: parentId ?? null,
+        path,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    out[node.key] = record.id;
+    for (const child of node.children ?? []) {
+      await createNode(record.id, path, child);
+    }
+  }
+
+  for (const root of roots) {
+    await createNode(null, "", root);
+  }
+  return out;
+}
+
+async function seedServiceGroups(pb, ownerId) {
+  const entries = [
+    { key: "quarterly", name: "Quarterly inspection (DEMO)" },
+    { key: "annual", name: "Annual service (DEMO)" },
+  ];
+  const out = {};
+  for (const entry of entries) {
+    const record = await pb.collection("serviceGroups").create(
+      {
+        name: entry.name,
+        normalizedName: entry.name.toLowerCase(),
+        description: null,
+        createdAt: now(),
+        updatedAt: now(),
+        createdBy: ownerId,
+        updatedBy: ownerId,
+      },
+      { $autoCancel: false },
+    );
+    out[entry.key] = record.id;
+  }
+  return out;
+}
+
+async function seedCustomFields(pb) {
+  const entries = [
+    {
+      key: "serial",
+      name: "Serial number (DEMO)",
+      fieldType: "text",
+      options: [],
+      required: false,
+      sortOrder: 0,
+    },
+    {
+      key: "purchasePrice",
+      name: "Purchase price (DEMO)",
+      fieldType: "currency",
+      options: [],
+      required: false,
+      sortOrder: 1,
+    },
+    {
+      key: "warrantyExpiry",
+      name: "Warranty expiry (DEMO)",
+      fieldType: "date",
+      options: [],
+      required: false,
+      sortOrder: 2,
+    },
+    {
+      key: "condition",
+      name: "Condition (DEMO)",
+      fieldType: "dropdown",
+      options: ["Excellent", "Good", "Fair", "Poor"],
+      required: false,
+      sortOrder: 3,
+    },
+    {
+      key: "manualUrl",
+      name: "Manual URL (DEMO)",
+      fieldType: "url",
+      options: [],
+      required: false,
+      sortOrder: 4,
+    },
+  ];
+  const out = {};
+  for (const entry of entries) {
+    const record = await pb.collection("customFieldDefinitions").create(
+      {
+        name: entry.name,
+        fieldType: entry.fieldType,
+        options: entry.options,
+        required: entry.required,
+        sortOrder: entry.sortOrder,
+        usageCount: 0,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    out[entry.key] = record.id;
+  }
+  return out;
+}
+
+async function seedProviders(pb, ownerId) {
+  const entries = [
+    { key: "acme", name: "Acme Service Co. (DEMO)" },
+    { key: "roadside", name: "Roadside Repair (DEMO)" },
+  ];
+  const out = {};
+  for (const entry of entries) {
+    const record = await pb.collection("serviceProviders").create(
+      {
+        name: entry.name,
+        normalizedName: entry.name.toLowerCase(),
+        contactEmail: null,
+        contactPhone: null,
+        notes: null,
+        createdAt: now(),
+        updatedAt: now(),
+        createdBy: ownerId,
+        updatedBy: ownerId,
+      },
+      { $autoCancel: false },
+    );
+    out[entry.key] = record.id;
+  }
+  return out;
+}
+
+function pad(value, width) {
+  return String(value).padStart(width, "0");
+}
+
+async function seedAssets(
+  pb,
+  { ownerId, categoryIds, locationIds, groupIds, fieldIds },
+) {
+  const base = [
+    {
+      name: "Cordless drill",
+      category: "power",
+      location: "bench1",
+      status: "active",
+      group: "quarterly",
+      notes: "Bought 2024. DeWalt brand.",
+      values: {
+        serial: "DW-884213",
+        purchasePrice: 189.99,
+        warrantyExpiry: "2027-01-15",
+        condition: "Good",
+        manualUrl: "https://example.com/manuals/dw-drill.pdf",
+      },
+    },
+    {
+      name: "Impact driver",
+      category: "power",
+      location: "bench1",
+      status: "active",
+      group: "quarterly",
+      values: {
+        serial: "MK-200331",
+        purchasePrice: 145,
+        condition: "Excellent",
+      },
+    },
+    {
+      name: "Circular saw",
+      category: "power",
+      location: "bench2",
+      status: "under_repair",
+      group: "quarterly",
+      notes: "Blade guard stuck.",
+      values: {
+        serial: "BH-7110",
+        purchasePrice: 219,
+        condition: "Fair",
+      },
+    },
+    {
+      name: "Table saw",
+      category: "power",
+      location: "bench3",
+      status: "active",
+      group: "annual",
+      values: {
+        serial: "TS-99A",
+        purchasePrice: 899,
+        warrantyExpiry: "2026-09-30",
+        condition: "Good",
+      },
+    },
+    {
+      name: "Claw hammer",
+      category: "hand",
+      location: "shelfA",
+      status: "active",
+      group: null,
+      values: {
+        condition: "Good",
+      },
+    },
+    {
+      name: "Adjustable wrench",
+      category: "hand",
+      location: "shelfA",
+      status: "in_storage",
+      group: null,
+      values: {
+        condition: "Fair",
+      },
+    },
+    {
+      name: "Tape measure",
+      category: "hand",
+      location: "shelfB",
+      status: "active",
+      group: null,
+    },
+    {
+      name: "Level (900mm)",
+      category: "hand",
+      location: "shelfB",
+      status: "active",
+      group: null,
+      values: {
+        condition: "Excellent",
+      },
+    },
+    {
+      name: "Rack router",
+      category: "it",
+      location: "serverroom",
+      status: "active",
+      group: "annual",
+      notes: "Primary uplink.",
+      values: {
+        serial: "CISCO-RTR-8861",
+        purchasePrice: 1450,
+        warrantyExpiry: "2026-12-31",
+        condition: "Excellent",
+      },
+    },
+    {
+      name: "UPS (2kVA)",
+      category: "it",
+      location: "serverroom",
+      status: "active",
+      group: "annual",
+      values: {
+        serial: "APC-UPS-44102",
+        purchasePrice: 820,
+        warrantyExpiry: "2027-06-01",
+        condition: "Good",
+      },
+    },
+    {
+      name: "Laptop dock",
+      category: "it",
+      location: "deskA",
+      status: "active",
+      group: null,
+      values: {
+        serial: "DELL-WD19-90011",
+        purchasePrice: 230,
+        condition: "Good",
+      },
+    },
+    {
+      name: "External monitor",
+      category: "it",
+      location: "deskB",
+      status: "retired",
+      group: null,
+      values: {
+        serial: "LG-27UL850-2019",
+        condition: "Poor",
+      },
+    },
+    {
+      name: "Forklift",
+      category: "vehicle",
+      location: "loadingbay",
+      status: "active",
+      group: "annual",
+      notes: "Service overdue — see logs.",
+      values: {
+        serial: "TOYOTA-8FGU25",
+        purchasePrice: 32500,
+        warrantyExpiry: "2026-05-20",
+        condition: "Fair",
+        manualUrl: "https://example.com/manuals/toyota-8fgu25.pdf",
+      },
+    },
+    {
+      name: "Walk-behind pallet jack",
+      category: "vehicle",
+      location: "loadingbay",
+      status: "in_storage",
+      group: null,
+      values: {
+        purchasePrice: 480,
+        condition: "Good",
+      },
+    },
+    {
+      name: "Refrigerated unit",
+      category: "vehicle",
+      location: "coldstorage",
+      status: "active",
+      group: "quarterly",
+      values: {
+        serial: "CARRIER-XTRA-300",
+        purchasePrice: 14200,
+        warrantyExpiry: "2028-02-14",
+        condition: "Excellent",
+      },
+    },
+  ];
+
+  const refs = [];
+  let sequence = 1;
+  for (const entry of base) {
+    const categoryId = categoryIds[entry.category];
+    const locationId = locationIds[entry.location];
+    const serviceGroupId = entry.group ? groupIds[entry.group] : null;
+    const assetTag = `${DEMO_PREFIX}-${pad(sequence, 3)}`;
+    sequence += 1;
+    const customFieldValues = {};
+    for (const [key, value] of Object.entries(entry.values ?? {})) {
+      const fieldId = fieldIds[key];
+      if (!fieldId) continue;
+      customFieldValues[fieldId] = value;
+    }
+    const record = await pb.collection("assets").create(
+      {
+        name: `${entry.name} (DEMO)`,
+        normalizedName: `${entry.name} (demo)`.toLowerCase(),
+        assetTag,
+        status: entry.status,
+        categoryId,
+        locationId,
+        serviceGroupId,
+        notes: entry.notes ?? null,
+        customFieldValues,
+        createdBy: ownerId,
+        updatedBy: ownerId,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    refs.push({
+      id: record.id,
+      name: record.name,
+      tag: assetTag,
+      category: entry.category,
+      status: entry.status,
+      group: entry.group,
+    });
+  }
+
+  // Update usageCount on each field — totals assets that set any value for it
+  for (const fieldKey of Object.keys(fieldIds)) {
+    const fieldId = fieldIds[fieldKey];
+    const usageCount = base.reduce(
+      (sum, entry) =>
+        entry.values && entry.values[fieldKey] !== undefined ? sum + 1 : sum,
+      0,
+    );
+    await pb.collection("customFieldDefinitions").update(
+      fieldId,
+      {
+        usageCount,
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+  }
+
+  return refs;
+}
+
+async function seedAssetTags(pb, assets, tagIds, ownerId) {
+  const tagPlan = [
+    { category: "power", tags: ["electric", "cordless"] },
+    { category: "hand", tags: ["legacy"] },
+    { category: "it", tags: ["critical"] },
+    { category: "vehicle", tags: ["critical", "rentable"] },
+  ];
+  let count = 0;
+  for (const asset of assets) {
+    const plan = tagPlan.find((p) => p.category === asset.category);
+    if (!plan) continue;
+    for (const tagKey of plan.tags) {
+      const tagId = tagIds[tagKey];
+      if (!tagId) continue;
+      await pb.collection("assetTags").create(
+        {
+          assetId: asset.id,
+          tagId,
+          createdBy: ownerId,
+          createdAt: now(),
+        },
+        { $autoCancel: false },
+      );
+      count += 1;
+    }
+  }
+  return count;
+}
+
+async function seedServiceSchedules(pb, assets, ownerId) {
+  // Pick one schedule date per asset that has a service group. Mix the
+  // buckets deliberately so every section of the services list has rows.
+  const offsets = [-30, -5, 3, 12, 25, 60, 120];
+  let oi = 0;
+  let count = 0;
+  for (const asset of assets) {
+    if (!asset.group) continue;
+    const offset = offsets[oi % offsets.length];
+    oi += 1;
+    const nextServiceDate = todayIso(offset);
+    await pb.collection("serviceSchedules").create(
+      {
+        assetId: asset.id,
+        nextServiceDate,
+        intervalValue: asset.group === "annual" ? 12 : 3,
+        intervalUnit: "months",
+        reminderLeadValue: 5,
+        reminderLeadUnit: "days",
+        createdBy: ownerId,
+        updatedBy: ownerId,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    count += 1;
+  }
+  return count;
+}
+
+async function seedServiceRecords(
+  pb,
+  { assetRefs, groupIds, providerIds, ownerId },
+) {
+  // Give a couple of assets a completed service record in the past.
+  const plan = [
+    {
+      tag: `${DEMO_PREFIX}-001`,
+      daysAgo: 40,
+      description: "Replaced brushes, lubricated gears.",
+      cost: 18.5,
+      group: "quarterly",
+      provider: "acme",
+    },
+    {
+      tag: `${DEMO_PREFIX}-013`,
+      daysAgo: 120,
+      description: "Annual inspection — tires, hydraulics, brakes.",
+      cost: 240,
+      group: "annual",
+      provider: "roadside",
+    },
+  ];
+  let count = 0;
+  for (const entry of plan) {
+    const asset = assetRefs.find((a) => a.tag === entry.tag);
+    if (!asset) continue;
+    await pb.collection("serviceRecords").create(
+      {
+        assetId: asset.id,
+        serviceGroupId: groupIds[entry.group] ?? null,
+        serviceGroupNameSnapshot: null,
+        values: {},
+        fieldSnapshots: [],
+        scheduleId: null,
+        scheduledForDate: null,
+        serviceDate: todayIso(-entry.daysAgo),
+        description: entry.description,
+        cost: entry.cost,
+        providerId: providerIds[entry.provider] ?? null,
+        completedAt: now() - entry.daysAgo * 24 * 60 * 60 * 1000,
+        completedBy: ownerId,
+        createdBy: ownerId,
+        updatedBy: ownerId,
+        createdAt: now(),
+        updatedAt: now(),
+      },
+      { $autoCancel: false },
+    );
+    count += 1;
+  }
+  return count;
+}
+
+main().catch((err) => {
+  console.error("seed failed:");
+  console.error(err?.response?.data ?? err);
+  process.exit(1);
+});
diff --git a/src/__tests__/components/assets/asset-card-list.test.tsx b/src/__tests__/components/assets/asset-card-list.test.tsx
new file mode 100644
index 0000000..25e4b7f
--- /dev/null
+++ b/src/__tests__/components/assets/asset-card-list.test.tsx
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@/lib/api/assets", async () => {
+  const actual =
+    await vi.importActual<typeof import("@/lib/api/assets")>(
+      "@/lib/api/assets",
+    );
+  return { ...actual, getAsset: vi.fn().mockResolvedValue(null) };
+});
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+import { AssetCardList } from "@/components/assets/asset-card-list";
+import type { AssetListItem } from "@/components/assets/types";
+
+function makeRow(overrides: Partial<AssetListItem> = {}): AssetListItem {
+  return {
+    id: "a1",
+    name: "Drill #47",
+    assetTag: "AST-0047",
+    status: "active",
+    categoryId: "cat-1",
+    categoryName: "Power tools",
+    categoryColor: "#c2410c",
+    locationId: "loc-1",
+    locationPath: "Workshop / Bench 3",
+    serviceGroupId: null,
+    notes: null,
+    tagIds: ["t1", "t2"],
+    tagNames: ["electric", "cordless"],
+    createdAt: 0,
+    updatedAt: 0,
+    ...overrides,
+  };
+}
+
+function renderList(rows: AssetListItem[], loading = false) {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <AssetCardList rows={rows} loading={loading} />
+    </QueryClientProvider>,
+  );
+}
+
+describe("AssetCardList", () => {
+  it("renders skeleton rows while loading with no data", () => {
+    renderList([], true);
+    expect(screen.getByTestId("asset-card-list-loading")).toBeInTheDocument();
+  });
+
+  it("renders the empty state when no rows and not loading", () => {
+    renderList([], false);
+    expect(screen.getByText(/no assets match/i)).toBeInTheDocument();
+  });
+
+  it("renders one card per row with name, tag, location, and tag chips", () => {
+    renderList([
+      makeRow(),
+      makeRow({
+        id: "a2",
+        name: "Lathe",
+        assetTag: "AST-0048",
+        locationPath: "Workshop / Bench 5",
+        tagNames: ["legacy"],
+      }),
+    ]);
+    expect(screen.getByTestId("asset-card-a1")).toBeInTheDocument();
+    expect(screen.getByTestId("asset-card-a2")).toBeInTheDocument();
+    expect(screen.getByText("Drill #47")).toBeInTheDocument();
+    expect(screen.getByText("AST-0047")).toBeInTheDocument();
+    expect(screen.getByText("Workshop / Bench 3")).toBeInTheDocument();
+    expect(screen.getByText("Workshop / Bench 5")).toBeInTheDocument();
+    expect(screen.getByText("electric")).toBeInTheDocument();
+    expect(screen.getByText("cordless")).toBeInTheDocument();
+    expect(screen.getByText("legacy")).toBeInTheDocument();
+  });
+
+  it("shows an overflow count when more than three tags", () => {
+    renderList([
+      makeRow({
+        tagNames: ["one", "two", "three", "four", "five"],
+      }),
+    ]);
+    // three shown + overflow +2
+    expect(screen.getByText("one")).toBeInTheDocument();
+    expect(screen.getByText("two")).toBeInTheDocument();
+    expect(screen.getByText("three")).toBeInTheDocument();
+    expect(screen.getByText("+2")).toBeInTheDocument();
+    expect(screen.queryByText("four")).toBeNull();
+  });
+
+  it("renders an always-visible kebab that opens the actions sheet", async () => {
+    renderList([makeRow()]);
+    const kebab = screen.getByTestId("asset-card-kebab-a1");
+    expect(kebab).toBeVisible();
+    fireEvent.click(kebab);
+    // The sheet opens via AssetActionsSheet; since the fetched asset is null
+    // it doesn't render the action grid but the sheet is open.
+    // We verify the kebab handler fired by seeing the list still mounted.
+    expect(screen.getByTestId("asset-card-a1")).toBeInTheDocument();
+  });
+
+  it("includes a linked overlay for tapping the whole card to open details", () => {
+    renderList([makeRow()]);
+    const card = screen.getByTestId("asset-card-a1");
+    const link = card.querySelector("a") as HTMLAnchorElement;
+    expect(link).not.toBeNull();
+    expect(link.getAttribute("href")).toBe("/assets/a1");
+  });
+});
diff --git a/src/__tests__/components/assets/asset-detail.test.tsx b/src/__tests__/components/assets/asset-detail.test.tsx
index e290fae..7ed06ed 100644
--- a/src/__tests__/components/assets/asset-detail.test.tsx
+++ b/src/__tests__/components/assets/asset-detail.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AssetDetail } from "@/components/assets/asset-detail";
 import type { AssetDetail as AssetDetailType } from "@/components/assets/types";
@@ -148,4 +148,34 @@ describe("AssetDetail", () => {
     expect(screen.getByText("Edit")).toBeInTheDocument();
     expect(screen.getByText("Print label")).toBeInTheDocument();
   });
+
+  it("renders a mobile kebab menu that collapses Edit / Print / Delete", async () => {
+    renderWithProviders(<AssetDetail {...defaultProps} />);
+    const kebab = screen.getByTestId("asset-detail-kebab");
+    expect(kebab).toBeInTheDocument();
+    expect(kebab.className).toMatch(/lg:hidden/);
+
+    fireEvent.pointerDown(kebab, { pointerType: "mouse", button: 0 });
+    fireEvent.pointerUp(kebab, { pointerType: "mouse", button: 0 });
+    fireEvent.click(kebab);
+    const deleteItem = await screen.findByTestId("asset-detail-delete");
+    expect(deleteItem).toBeInTheDocument();
+  });
+
+  it("hides the kebab delete entry when canDelete is false", async () => {
+    renderWithProviders(<AssetDetail {...defaultProps} canDelete={false} />);
+    const kebab = screen.getByTestId("asset-detail-kebab");
+    fireEvent.pointerDown(kebab, { pointerType: "mouse", button: 0 });
+    fireEvent.pointerUp(kebab, { pointerType: "mouse", button: 0 });
+    fireEvent.click(kebab);
+    // Wait a microtask to let the menu render
+    await Promise.resolve();
+    expect(screen.queryByTestId("asset-detail-delete")).toBeNull();
+  });
+
+  it("makes the detail tabs sticky on mobile", () => {
+    renderWithProviders(<AssetDetail {...defaultProps} />);
+    const tabs = screen.getByTestId("asset-detail-tabs");
+    expect(tabs.className).toMatch(/sticky/);
+  });
 });
diff --git a/src/__tests__/components/assets/asset-filters-mobile.test.tsx b/src/__tests__/components/assets/asset-filters-mobile.test.tsx
new file mode 100644
index 0000000..b4bbd54
--- /dev/null
+++ b/src/__tests__/components/assets/asset-filters-mobile.test.tsx
@@ -0,0 +1,222 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { AssetFiltersMobile } from "@/components/assets/asset-filters-mobile";
+import type { AssetFiltersState } from "@/components/assets/asset-filters";
+import type {
+  AssetSortBy,
+  AssetSortDirection,
+} from "@/components/assets/asset-table";
+import type { AssetFilterOptions } from "@/components/assets/types";
+
+const options: AssetFilterOptions = {
+  categories: [
+    { id: "cat-1", name: "Power tools", prefix: null, color: "#c2410c" },
+    { id: "cat-2", name: "Hand tools", prefix: null, color: "#6b8e6b" },
+  ],
+  locations: [
+    {
+      id: "loc-1",
+      name: "Bench 1",
+      parentId: null,
+      path: "Workshop / Bench 1",
+    },
+    {
+      id: "loc-2",
+      name: "Bench 2",
+      parentId: null,
+      path: "Workshop / Bench 2",
+    },
+  ],
+  tags: [
+    {
+      id: "t1",
+      name: "electric",
+      color: "#f59e0b",
+      createdAt: 0,
+      updatedAt: 0,
+    },
+    {
+      id: "t2",
+      name: "cordless",
+      color: "#0d9488",
+      createdAt: 0,
+      updatedAt: 0,
+    },
+  ],
+  serviceGroups: [],
+};
+
+type FilterState = {
+  search: string;
+  filters: AssetFiltersState;
+  sortBy: AssetSortBy;
+  sortDirection: AssetSortDirection;
+};
+
+function noopFilters(): FilterState {
+  return {
+    search: "",
+    filters: {
+      categoryId: null,
+      status: null,
+      locationId: null,
+      tagIds: [],
+    },
+    sortBy: "createdAt",
+    sortDirection: "desc",
+  };
+}
+
+function renderFilters(overrides: Partial<FilterState> = {}) {
+  const state: FilterState = { ...noopFilters(), ...overrides };
+  const onSearchChange = vi.fn();
+  const onFiltersChange = vi.fn();
+  const onSortChange = vi.fn();
+  const onReset = vi.fn();
+  const utils = render(
+    <AssetFiltersMobile
+      options={options}
+      search={state.search}
+      filters={state.filters}
+      sortBy={state.sortBy}
+      sortDirection={state.sortDirection}
+      onSearchChange={onSearchChange}
+      onFiltersChange={onFiltersChange}
+      onSortChange={onSortChange}
+      onReset={onReset}
+    />,
+  );
+  return {
+    ...utils,
+    handlers: { onSearchChange, onFiltersChange, onSortChange, onReset },
+  };
+}
+
+describe("AssetFiltersMobile", () => {
+  it("renders a search input and a filters trigger chip", () => {
+    renderFilters();
+    expect(
+      screen.getByTestId("asset-filters-mobile-search"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("asset-filters-mobile-trigger"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("asset-filters-mobile-count")).toBeNull();
+  });
+
+  it("shows an active count badge when filters apply", () => {
+    renderFilters({
+      search: "drill",
+      filters: {
+        categoryId: "cat-1",
+        status: "active",
+        locationId: null,
+        tagIds: ["t1"],
+      },
+    });
+    const badge = screen.getByTestId("asset-filters-mobile-count");
+    expect(badge.textContent).toBe("4");
+  });
+
+  it("opens the filters sheet and shows sections for status, category, location, tags, and sort", () => {
+    renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+
+    const sheet = screen.getByTestId("asset-filters-sheet");
+    expect(sheet).toBeInTheDocument();
+    expect(screen.getByTestId("asset-sort-recent")).toBeInTheDocument();
+    expect(screen.getByTestId("asset-filter-status-all")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("asset-filter-status-active"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("asset-filter-category-cat-1"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("asset-filter-location-loc-2"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("asset-filter-tag-t1")).toBeInTheDocument();
+  });
+
+  it("selecting a status option emits onFiltersChange", () => {
+    const { handlers } = renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.click(screen.getByTestId("asset-filter-status-under_repair"));
+
+    expect(handlers.onFiltersChange).toHaveBeenCalledWith(
+      expect.objectContaining({ status: "under_repair" }),
+    );
+  });
+
+  it("announces the selected location option", () => {
+    renderFilters({
+      filters: {
+        categoryId: null,
+        status: null,
+        locationId: "loc-2",
+        tagIds: [],
+      },
+    });
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+
+    expect(screen.getByTestId("asset-filter-location-all")).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
+    expect(screen.getByTestId("asset-filter-location-loc-2")).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+  });
+
+  it("selecting a sort row emits onSortChange", () => {
+    const { handlers } = renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.click(screen.getByTestId("asset-sort-name"));
+
+    expect(handlers.onSortChange).toHaveBeenCalledWith("name", "asc");
+  });
+
+  it("toggling a tag emits onFiltersChange with the tag added / removed", () => {
+    const { handlers, rerender } = renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.click(screen.getByTestId("asset-filter-tag-t1"));
+
+    expect(handlers.onFiltersChange).toHaveBeenCalledWith(
+      expect.objectContaining({ tagIds: ["t1"] }),
+    );
+
+    rerender(
+      <AssetFiltersMobile
+        options={options}
+        search=""
+        filters={{
+          categoryId: null,
+          status: null,
+          locationId: null,
+          tagIds: ["t1"],
+        }}
+        sortBy="createdAt"
+        sortDirection="desc"
+        onSearchChange={() => {}}
+        onFiltersChange={handlers.onFiltersChange}
+        onSortChange={() => {}}
+        onReset={() => {}}
+      />,
+    );
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.click(screen.getByTestId("asset-filter-tag-t1"));
+
+    expect(handlers.onFiltersChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ tagIds: [] }),
+    );
+  });
+
+  it("reset button fires onReset and closes the sheet", () => {
+    const { handlers } = renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-reset"));
+    expect(handlers.onReset).toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/components/auth/setup-form.test.tsx b/src/__tests__/components/auth/setup-form.test.tsx
index 2046c4b..c46d0c7 100644
--- a/src/__tests__/components/auth/setup-form.test.tsx
+++ b/src/__tests__/components/auth/setup-form.test.tsx
@@ -37,7 +37,10 @@ describe("SetupForm", () => {
     replaceMock.mockReset();
     checkFirstRunMock.mockReset();
     createFirstAdminMock.mockReset();
-    checkFirstRunMock.mockResolvedValue(true);
+    checkFirstRunMock.mockResolvedValue({
+      firstRun: true,
+      adminConfigReady: true,
+    });
   });
 
   it("renders all setup fields", async () => {
@@ -71,7 +74,10 @@ describe("SetupForm", () => {
   });
 
   it("redirects to login if setup is already complete", async () => {
-    checkFirstRunMock.mockResolvedValue(false);
+    checkFirstRunMock.mockResolvedValue({
+      firstRun: false,
+      adminConfigReady: true,
+    });
     renderWithClient();
     await screen.findByRole("button", { name: "Create admin account" });
     expect(replaceMock).toHaveBeenCalledWith("/login");
diff --git a/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx b/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
index bcdd073..311d421 100644
--- a/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
+++ b/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
@@ -65,4 +65,10 @@ describe("DashboardStatsBar", () => {
       ).toBeTruthy();
     }
   });
+
+  it("is horizontally scrollable on mobile and a grid from sm up", () => {
+    render(<DashboardStatsBar totalAssets={21} statusCounts={statusCounts} />);
+    const bar = screen.getByTestId("dashboard-stats-bar");
+    expect(bar).toHaveAttribute("data-layout", "horizontal-scroll-to-grid");
+  });
 });
diff --git a/src/__tests__/components/labels/labels-page-client.test.tsx b/src/__tests__/components/labels/labels-page-client.test.tsx
index 7f73a68..8757500 100644
--- a/src/__tests__/components/labels/labels-page-client.test.tsx
+++ b/src/__tests__/components/labels/labels-page-client.test.tsx
@@ -8,6 +8,15 @@ const getLabelPreviewAssetMock = vi.fn();
 const listCustomFieldsMock = vi.fn();
 const getCurrentUserMock = vi.fn();
 const ensureMock = vi.fn();
+const useMediaQueryMock = vi.fn();
+
+vi.mock("@/hooks/use-media-query", () => ({
+  useMediaQuery: (query: string) => useMediaQueryMock(query),
+}));
+
+vi.mock("@/components/labels/label-preview", () => ({
+  LabelPreview: () => <div data-testid="mock-label-preview" />,
+}));
 
 vi.mock("@/lib/api/label-templates", () => ({
   listLabelTemplates: () => listLabelTemplatesMock(),
@@ -66,6 +75,8 @@ describe("LabelsPageClient", () => {
     getCurrentUserMock.mockReset();
     ensureMock.mockReset();
     ensureMock.mockResolvedValue({ seeded: false });
+    useMediaQueryMock.mockReset();
+    useMediaQueryMock.mockReturnValue(true); // default to desktop
   });
 
   it("shows loading state while queries are pending", () => {
@@ -137,4 +148,73 @@ describe("LabelsPageClient", () => {
       expect(screen.getByTestId("user-role")).toHaveTextContent("user");
     });
   });
+
+  it("shows a desktop-only banner + read-only previews on mobile viewports", async () => {
+    useMediaQueryMock.mockReturnValue(false);
+    getCurrentUserMock.mockResolvedValue({
+      id: "user-1",
+      email: "a@x.com",
+      name: "Admin",
+      role: "admin",
+    });
+    listLabelTemplatesMock.mockResolvedValue([
+      {
+        id: "template-1",
+        name: "Thermal 57x32 mm",
+        widthMm: 57,
+        heightMm: 32,
+        elements: [],
+        isDefault: true,
+        createdAt: 1,
+        updatedAt: 1,
+        createdBy: "user-1",
+        updatedBy: "user-1",
+      },
+    ]);
+    getLabelUrlBaseMock.mockResolvedValue("http://localhost:3000");
+    getLabelPreviewAssetMock.mockResolvedValue(null);
+    listCustomFieldsMock.mockResolvedValue([]);
+
+    renderWithClient(<LabelsPageClient />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("labels-mobile-view")).toBeInTheDocument();
+    });
+    expect(screen.getByTestId("labels-desktop-banner")).toHaveTextContent(
+      /Open Stowage on desktop to edit/,
+    );
+    expect(
+      screen.getByTestId("labels-mobile-template-template-1"),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("mock-label-preview")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-template-designer")).toBeNull();
+
+    const printLink = screen.getByRole("link", { name: /Print labels/ });
+    expect(printLink).toHaveAttribute("href", "/labels/print");
+  });
+
+  it("uses read-only mobile label copy for non-admin users", async () => {
+    useMediaQueryMock.mockReturnValue(false);
+    getCurrentUserMock.mockResolvedValue({
+      id: "user-2",
+      email: "u@x.com",
+      name: "User",
+      role: "user",
+    });
+    listLabelTemplatesMock.mockResolvedValue([]);
+    getLabelUrlBaseMock.mockResolvedValue("http://localhost:3000");
+    getLabelPreviewAssetMock.mockResolvedValue(null);
+    listCustomFieldsMock.mockResolvedValue([]);
+
+    renderWithClient(<LabelsPageClient />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("labels-desktop-banner")).toHaveTextContent(
+        "Label previews are read-only",
+      );
+    });
+    expect(screen.getByTestId("labels-desktop-banner")).toHaveTextContent(
+      "Ask an admin to change label templates.",
+    );
+  });
 });
diff --git a/src/__tests__/components/layout/bottom-nav.test.tsx b/src/__tests__/components/layout/bottom-nav.test.tsx
new file mode 100644
index 0000000..e0bcea3
--- /dev/null
+++ b/src/__tests__/components/layout/bottom-nav.test.tsx
@@ -0,0 +1,163 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+const pathnameSpy = vi.fn(() => "/dashboard");
+const replaceSpy = vi.fn();
+const logoutSpy = vi.fn();
+const toastErrorSpy = vi.fn();
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => pathnameSpy(),
+  useRouter: () => ({ replace: replaceSpy }),
+}));
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ theme: "light", setTheme: vi.fn() }),
+  ThemeProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock("@/lib/api/auth", () => ({
+  logout: () => logoutSpy(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: (...args: unknown[]) => toastErrorSpy(...args) },
+}));
+
+import { BottomNav } from "@/components/layout/bottom-nav";
+
+function renderNav() {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <BottomNav />
+    </QueryClientProvider>,
+  );
+}
+
+describe("BottomNav", () => {
+  beforeEach(() => {
+    pathnameSpy.mockReturnValue("/dashboard");
+    replaceSpy.mockReset();
+    logoutSpy.mockReset();
+    toastErrorSpy.mockReset();
+  });
+
+  it("renders all five slots with the scan button in the center", () => {
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-home")).toBeInTheDocument();
+    expect(screen.getByTestId("bottom-nav-assets")).toBeInTheDocument();
+    expect(screen.getByTestId("bottom-nav-scan")).toBeInTheDocument();
+    expect(screen.getByTestId("bottom-nav-services")).toBeInTheDocument();
+    expect(screen.getByTestId("bottom-nav-more")).toBeInTheDocument();
+
+    const scan = screen.getByTestId("bottom-nav-scan");
+    expect(scan).toHaveAttribute("href", "/scan");
+    expect(scan.className).toMatch(/var\(--scan\)/);
+  });
+
+  it("hides itself on large viewports", () => {
+    renderNav();
+    const nav = screen.getByTestId("bottom-nav");
+    expect(nav.className).toMatch(/lg:hidden/);
+  });
+
+  it("marks Home active on /dashboard", () => {
+    pathnameSpy.mockReturnValue("/dashboard");
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-home")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      screen.getByTestId("bottom-nav-assets").getAttribute("aria-current"),
+    ).toBeNull();
+  });
+
+  it("marks Assets active on /assets and nested routes", () => {
+    pathnameSpy.mockReturnValue("/assets/abc123");
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-assets")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      screen.getByTestId("bottom-nav-home").getAttribute("aria-current"),
+    ).toBeNull();
+  });
+
+  it("marks Services active on /services", () => {
+    pathnameSpy.mockReturnValue("/services");
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-services")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("marks SCAN active on /scan", () => {
+    pathnameSpy.mockReturnValue("/scan");
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-scan")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("opens the More sheet when tapped and shows the expected entries", () => {
+    renderNav();
+    expect(screen.queryByTestId("more-sheet-grid")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("bottom-nav-more"));
+
+    const grid = screen.getByTestId("more-sheet-grid");
+    expect(grid).toBeInTheDocument();
+    expect(screen.getByTestId("more-item-locations")).toHaveAttribute(
+      "href",
+      "/locations",
+    );
+    expect(screen.getByTestId("more-item-taxonomy")).toHaveAttribute(
+      "href",
+      "/taxonomy",
+    );
+    expect(screen.getByTestId("more-item-labels")).toHaveAttribute(
+      "href",
+      "/labels",
+    );
+    expect(screen.getByTestId("more-item-settings")).toHaveAttribute(
+      "href",
+      "/settings",
+    );
+    expect(screen.getByTestId("more-sheet-signout")).toBeInTheDocument();
+  });
+
+  it("triggers logout and redirects on sign-out", async () => {
+    logoutSpy.mockResolvedValue(undefined);
+    renderNav();
+    fireEvent.click(screen.getByTestId("bottom-nav-more"));
+    fireEvent.click(screen.getByTestId("more-sheet-signout"));
+
+    await waitFor(() => {
+      expect(logoutSpy).toHaveBeenCalledOnce();
+      expect(replaceSpy).toHaveBeenCalledWith("/login");
+    });
+  });
+
+  it("keeps the user signed in when logout rejects", async () => {
+    logoutSpy.mockRejectedValue(new Error("network"));
+    renderNav();
+    fireEvent.click(screen.getByTestId("bottom-nav-more"));
+    fireEvent.click(screen.getByTestId("more-sheet-signout"));
+
+    await waitFor(() => {
+      expect(logoutSpy).toHaveBeenCalledOnce();
+      expect(toastErrorSpy).toHaveBeenCalledWith(
+        "Could not sign out. Please try again.",
+      );
+    });
+    expect(replaceSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/components/layout/mobile-action-sheet.test.tsx b/src/__tests__/components/layout/mobile-action-sheet.test.tsx
new file mode 100644
index 0000000..22ea3cc
--- /dev/null
+++ b/src/__tests__/components/layout/mobile-action-sheet.test.tsx
@@ -0,0 +1,75 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+
+describe("MobileActionSheet", () => {
+  it("does not render content when closed", () => {
+    render(
+      <MobileActionSheet
+        open={false}
+        onOpenChange={() => {}}
+        title="Closed sheet"
+      >
+        <div data-testid="sheet-body">inside</div>
+      </MobileActionSheet>,
+    );
+    expect(screen.queryByTestId("sheet-body")).toBeNull();
+  });
+
+  it("renders children, title and drag handle when open", () => {
+    render(
+      <MobileActionSheet
+        open={true}
+        onOpenChange={() => {}}
+        title="Sheet title"
+        description="Sheet description"
+      >
+        <div data-testid="sheet-body">inside</div>
+      </MobileActionSheet>,
+    );
+    expect(screen.getByTestId("sheet-body")).toBeInTheDocument();
+    expect(screen.getByText("Sheet title")).toBeInTheDocument();
+    expect(screen.getByText("Sheet description")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("mobile-action-sheet-handle"),
+    ).toBeInTheDocument();
+  });
+
+  it("applies safe-area inset class to the content", () => {
+    render(
+      <MobileActionSheet open={true} onOpenChange={() => {}} title="T">
+        <div>body</div>
+      </MobileActionSheet>,
+    );
+    const content = screen.getByTestId("mobile-action-sheet");
+    expect(content.className).toMatch(/safe-area-inset-bottom/);
+  });
+
+  it("hides the header in sr-only when hideHeader is true", () => {
+    render(
+      <MobileActionSheet
+        open={true}
+        onOpenChange={() => {}}
+        title="Secret title"
+        hideHeader
+      >
+        <div>body</div>
+      </MobileActionSheet>,
+    );
+    const title = screen.getByText("Secret title");
+    const wrapper = title.closest("div");
+    expect(wrapper?.className).toMatch(/sr-only/);
+  });
+
+  it("calls onOpenChange when the user presses Escape", () => {
+    const onOpenChange = vi.fn();
+    render(
+      <MobileActionSheet open={true} onOpenChange={onOpenChange} title="T">
+        <div>body</div>
+      </MobileActionSheet>,
+    );
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/src/__tests__/components/scan/scan-detected-overlay.test.tsx b/src/__tests__/components/scan/scan-detected-overlay.test.tsx
new file mode 100644
index 0000000..0078a78
--- /dev/null
+++ b/src/__tests__/components/scan/scan-detected-overlay.test.tsx
@@ -0,0 +1,154 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import {
+  ScanDetectedOverlay,
+  __test__,
+} from "@/components/scan/scan-detected-overlay";
+
+const { mapPointsToViewport, boundingRect } = __test__;
+
+describe("mapPointsToViewport", () => {
+  it("returns [] when the video has no dimensions yet", () => {
+    expect(
+      mapPointsToViewport({
+        points: [{ x: 10, y: 10 }],
+        videoWidth: 0,
+        videoHeight: 0,
+        viewportWidth: 300,
+        viewportHeight: 300,
+      }),
+    ).toEqual([]);
+  });
+
+  it("returns [] for an empty point list", () => {
+    expect(
+      mapPointsToViewport({
+        points: [],
+        videoWidth: 640,
+        videoHeight: 480,
+        viewportWidth: 300,
+        viewportHeight: 300,
+      }),
+    ).toEqual([]);
+  });
+
+  it("defends against undefined point lists", () => {
+    expect(
+      mapPointsToViewport({
+        points: undefined as unknown as Array<{ x: number; y: number }>,
+        videoWidth: 640,
+        videoHeight: 480,
+        viewportWidth: 300,
+        viewportHeight: 300,
+      }),
+    ).toEqual([]);
+  });
+
+  it("maps square video 1:1 to square viewport", () => {
+    const points = mapPointsToViewport({
+      points: [{ x: 500, y: 500 }],
+      videoWidth: 1000,
+      videoHeight: 1000,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(points).toEqual([{ x: 250, y: 250 }]);
+  });
+
+  it("crops the larger axis when the stream is wider than the viewport (object-cover)", () => {
+    // 1000x500 video into 500x500 viewport: scale = max(500/1000, 500/500) = 1
+    // scaledW = 1000, scaledH = 500, offsetX = (1000-500)/2 = 250, offsetY = 0
+    const points = mapPointsToViewport({
+      points: [
+        { x: 250, y: 0 },
+        { x: 750, y: 500 },
+      ],
+      videoWidth: 1000,
+      videoHeight: 500,
+      viewportWidth: 500,
+      viewportHeight: 500,
+    });
+    expect(points).toEqual([
+      { x: 0, y: 0 },
+      { x: 500, y: 500 },
+    ]);
+  });
+});
+
+describe("boundingRect", () => {
+  it("returns null for an empty list", () => {
+    expect(boundingRect([])).toBeNull();
+  });
+
+  it("computes the tight axis-aligned box over the points", () => {
+    expect(
+      boundingRect([
+        { x: 10, y: 20 },
+        { x: 30, y: 5 },
+        { x: 25, y: 50 },
+      ]),
+    ).toEqual({ minX: 10, minY: 5, maxX: 30, maxY: 50 });
+  });
+});
+
+describe("<ScanDetectedOverlay />", () => {
+  it("renders nothing when there are no usable points", () => {
+    render(
+      <ScanDetectedOverlay
+        phase="detecting"
+        points={[]}
+        videoWidth={0}
+        videoHeight={0}
+        viewportWidth={0}
+        viewportHeight={0}
+      />,
+    );
+    expect(screen.queryByTestId("scan-detected-overlay")).toBeNull();
+  });
+
+  it("renders the bounding rectangle aligned in the viewport when points are valid", () => {
+    render(
+      <ScanDetectedOverlay
+        phase="detecting"
+        points={[
+          { x: 250, y: 125 },
+          { x: 750, y: 125 },
+          { x: 750, y: 375 },
+          { x: 250, y: 375 },
+        ]}
+        videoWidth={1000}
+        videoHeight={500}
+        viewportWidth={500}
+        viewportHeight={500}
+      />,
+    );
+    const overlay = screen.getByTestId("scan-detected-overlay");
+    expect(overlay).toHaveAttribute("data-phase", "detecting");
+    const box = overlay.querySelector("div") as HTMLDivElement;
+    expect(box).not.toBeNull();
+    expect(box.style.width).not.toBe("");
+    expect(box.style.height).not.toBe("");
+    expect(box.style.borderColor).toBe("var(--scan)");
+  });
+
+  it("paints the box green once the phase flips to confirmed", () => {
+    render(
+      <ScanDetectedOverlay
+        phase="confirmed"
+        points={[
+          { x: 250, y: 125 },
+          { x: 750, y: 375 },
+        ]}
+        videoWidth={1000}
+        videoHeight={500}
+        viewportWidth={500}
+        viewportHeight={500}
+      />,
+    );
+    const overlay = screen.getByTestId("scan-detected-overlay");
+    expect(overlay).toHaveAttribute("data-phase", "confirmed");
+    const box = overlay.querySelector("div") as HTMLDivElement;
+    expect(box.style.borderColor).toBe("rgb(16, 185, 129)");
+  });
+});
diff --git a/src/__tests__/components/scan/scan-page-client.test.tsx b/src/__tests__/components/scan/scan-page-client.test.tsx
new file mode 100644
index 0000000..5538e9c
--- /dev/null
+++ b/src/__tests__/components/scan/scan-page-client.test.tsx
@@ -0,0 +1,301 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
+
+import type { AssetDetail } from "@/lib/api/assets";
+
+type ScannerMockResult = {
+  text: string;
+  format: string;
+  points: Array<{ x: number; y: number }>;
+  videoWidth: number;
+  videoHeight: number;
+};
+
+const scannerMock: {
+  state: "idle" | "requesting" | "scanning" | "denied" | "insecure" | "error";
+  error: string | null;
+  torchSupported: boolean;
+  torchOn: boolean;
+  toggle: Mock;
+  restart: Mock;
+  onResult: ((result: ScannerMockResult) => void) | null;
+} = {
+  state: "scanning",
+  error: null,
+  torchSupported: false,
+  torchOn: false,
+  toggle: vi.fn(),
+  restart: vi.fn(),
+  onResult: null,
+};
+
+vi.mock("@/hooks/use-barcode-scanner", () => ({
+  useBarcodeScanner: (options: {
+    onResult: (result: ScannerMockResult) => void;
+    enabled: boolean;
+  }) => {
+    scannerMock.onResult = options.onResult;
+    return {
+      state: scannerMock.state,
+      error: scannerMock.error,
+      torch: {
+        supported: scannerMock.torchSupported,
+        on: scannerMock.torchOn,
+        toggle: scannerMock.toggle,
+      },
+      restart: scannerMock.restart,
+    };
+  },
+}));
+
+const resolverMock = vi.fn();
+vi.mock("@/lib/scan", () => ({
+  resolveScanTarget: (...args: unknown[]) => resolverMock(...args),
+}));
+
+const routerMock = { back: vi.fn(), push: vi.fn(), replace: vi.fn() };
+vi.mock("next/navigation", () => ({
+  useRouter: () => routerMock,
+  usePathname: () => "/scan",
+}));
+
+import { ScanPageClient } from "@/components/scan/scan-page-client";
+
+function makeAsset(overrides: Partial<AssetDetail> = {}): AssetDetail {
+  return {
+    id: "a1",
+    name: "Drill #47",
+    assetTag: "AST-0047",
+    status: "active",
+    categoryId: null,
+    locationId: null,
+    serviceGroupId: null,
+    notes: null,
+    customFieldValues: {},
+    createdBy: "u1",
+    updatedBy: "u1",
+    createdAt: 0,
+    updatedAt: 0,
+    ...overrides,
+  } as AssetDetail;
+}
+
+function renderScanPage() {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <ScanPageClient />
+    </QueryClientProvider>,
+  );
+}
+
+describe("ScanPageClient", () => {
+  beforeEach(() => {
+    scannerMock.state = "scanning";
+    scannerMock.error = null;
+    scannerMock.torchSupported = false;
+    scannerMock.torchOn = false;
+    scannerMock.toggle = vi.fn();
+    scannerMock.restart = vi.fn();
+    scannerMock.onResult = null;
+    resolverMock.mockReset();
+    routerMock.back.mockReset();
+  });
+
+  it("renders the camera viewport + reticle while scanning", () => {
+    renderScanPage();
+    expect(screen.getByTestId("scan-page")).toBeInTheDocument();
+    expect(screen.getByTestId("scan-viewport")).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    expect(screen.getByTestId("scan-manual-entry")).toBeInTheDocument();
+  });
+
+  it("shows the permission-denied state when the scanner reports 'denied'", () => {
+    scannerMock.state = "denied";
+    renderScanPage();
+    expect(screen.getByTestId("scan-state-denied")).toBeInTheDocument();
+    expect(screen.queryByTestId("scan-viewport")).toBeNull();
+    // manual-entry link stays visible in every state
+    expect(screen.getByTestId("scan-manual-entry")).toBeInTheDocument();
+  });
+
+  it("shows the insecure-context state when scanner.state is 'insecure'", () => {
+    scannerMock.state = "insecure";
+    renderScanPage();
+    expect(screen.getByTestId("scan-state-insecure")).toBeInTheDocument();
+  });
+
+  it("shows the generic error state with message when scanner.state is 'error'", () => {
+    scannerMock.state = "error";
+    scannerMock.error = "Camera busy";
+    renderScanPage();
+    expect(screen.getByTestId("scan-state-error")).toBeInTheDocument();
+    expect(screen.getByText("Camera busy")).toBeInTheDocument();
+  });
+
+  it("hides the torch button when not supported and shows it when supported", () => {
+    scannerMock.torchSupported = false;
+    const { unmount } = renderScanPage();
+    expect(screen.queryByTestId("scan-torch")).toBeNull();
+    unmount();
+
+    scannerMock.torchSupported = true;
+    renderScanPage();
+    const button = screen.getByTestId("scan-torch");
+    expect(button).toBeInTheDocument();
+    fireEvent.click(button);
+    expect(scannerMock.toggle).toHaveBeenCalled();
+  });
+
+  it("returns via router.back() when tapping Back", () => {
+    renderScanPage();
+    fireEvent.click(screen.getByTestId("scan-back"));
+    expect(routerMock.back).toHaveBeenCalled();
+  });
+
+  it("opens the manual-entry sheet and submits to the resolver", async () => {
+    const asset = makeAsset();
+    resolverMock.mockResolvedValue({ status: "asset", asset });
+
+    renderScanPage();
+    fireEvent.click(screen.getByTestId("scan-manual-entry"));
+    const input = await screen.findByTestId("scan-manual-input");
+    fireEvent.change(input, { target: { value: "AST-0047" } });
+    fireEvent.submit(screen.getByTestId("scan-manual-form"));
+
+    await waitFor(() => {
+      expect(resolverMock).toHaveBeenCalledWith("AST-0047", expect.any(String));
+    });
+    const resultSheet = await screen.findByTestId("scan-result-asset");
+    expect(resultSheet).toHaveAttribute("data-asset-id", "a1");
+    expect(screen.getByTestId("scan-result-view")).toHaveAttribute(
+      "href",
+      "/assets/a1",
+    );
+  });
+
+  it("shows the unresolved sheet with raw text on a missing asset", async () => {
+    resolverMock.mockResolvedValue({
+      status: "unresolved",
+      rawText: "AST-9999",
+    });
+
+    renderScanPage();
+    fireEvent.click(screen.getByTestId("scan-manual-entry"));
+    fireEvent.change(await screen.findByTestId("scan-manual-input"), {
+      target: { value: "AST-9999" },
+    });
+    fireEvent.submit(screen.getByTestId("scan-manual-form"));
+
+    await screen.findByTestId("scan-result-unresolved");
+    expect(screen.getByText(/AST-9999/)).toBeInTheDocument();
+  });
+
+  it("dismisses the result sheet when tapping Scan another", async () => {
+    const asset = makeAsset();
+    resolverMock.mockResolvedValue({ status: "asset", asset });
+
+    renderScanPage();
+    fireEvent.click(screen.getByTestId("scan-manual-entry"));
+    fireEvent.change(await screen.findByTestId("scan-manual-input"), {
+      target: { value: "AST-0047" },
+    });
+    fireEvent.submit(screen.getByTestId("scan-manual-form"));
+
+    await screen.findByTestId("scan-result-asset");
+    fireEvent.click(screen.getByTestId("scan-result-dismiss"));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("scan-result-asset")).toBeNull();
+    });
+  });
+
+  it("routes a decoded scanner result through the resolver", async () => {
+    const asset = makeAsset({ id: "b2", name: "Lathe" });
+    resolverMock.mockResolvedValue({ status: "asset", asset });
+
+    renderScanPage();
+    await waitFor(() => expect(scannerMock.onResult).toBeTruthy());
+    act(() => {
+      scannerMock.onResult?.({
+        text: "https://x.test/assets/b2",
+        format: "QR_CODE",
+        points: [
+          { x: 10, y: 20 },
+          { x: 90, y: 20 },
+          { x: 90, y: 80 },
+          { x: 10, y: 80 },
+        ],
+        videoWidth: 640,
+        videoHeight: 480,
+      });
+    });
+
+    const sheet = await screen.findByTestId("scan-result-asset", undefined, {
+      timeout: 3_000,
+    });
+    expect(sheet).toHaveAttribute("data-asset-id", "b2");
+    expect(resolverMock).toHaveBeenCalledWith(
+      "https://x.test/assets/b2",
+      expect.any(String),
+    );
+  });
+
+  it("shows the detected overlay in detecting → confirmed phases before opening the sheet", async () => {
+    const asset = makeAsset({ id: "b2" });
+    resolverMock.mockResolvedValue({ status: "asset", asset });
+
+    renderScanPage();
+    await waitFor(() => expect(scannerMock.onResult).toBeTruthy());
+    act(() => {
+      scannerMock.onResult?.({
+        text: "https://x.test/assets/b2",
+        format: "QR_CODE",
+        points: [
+          { x: 10, y: 20 },
+          { x: 90, y: 80 },
+        ],
+        videoWidth: 640,
+        videoHeight: 480,
+      });
+    });
+
+    // Phase 1: detecting — viewport reflects the orange/detecting phase
+    await waitFor(() =>
+      expect(screen.getByTestId("scan-viewport")).toHaveAttribute(
+        "data-phase",
+        "detecting",
+      ),
+    );
+
+    // Phase 2: confirmed — viewport flips to green/confirmed after ~1s
+    await waitFor(
+      () =>
+        expect(screen.getByTestId("scan-viewport")).toHaveAttribute(
+          "data-phase",
+          "confirmed",
+        ),
+      { timeout: 2_500 },
+    );
+
+    // Then the result sheet opens and the phase resets to idle
+    await screen.findByTestId("scan-result-asset", undefined, {
+      timeout: 3_000,
+    });
+    expect(screen.getByTestId("scan-viewport")).toHaveAttribute(
+      "data-phase",
+      "idle",
+    );
+  });
+});
diff --git a/src/__tests__/components/scan/scan-result-sheet.test.tsx b/src/__tests__/components/scan/scan-result-sheet.test.tsx
new file mode 100644
index 0000000..6617552
--- /dev/null
+++ b/src/__tests__/components/scan/scan-result-sheet.test.tsx
@@ -0,0 +1,343 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  act,
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+
+import type { AssetDetail } from "@/lib/api/assets";
+import type { ResolverResult } from "@/lib/scan";
+
+const updateAssetMock = vi.fn();
+const updateAssetStatusMock = vi.fn();
+const uploadAttachmentMock = vi.fn();
+const createServiceRecordMock = vi.fn();
+const listLocationsMock = vi.fn();
+const listServiceProviderOptionsMock = vi.fn();
+
+vi.mock("@/lib/api/assets", async () => {
+  const actual =
+    await vi.importActual<typeof import("@/lib/api/assets")>(
+      "@/lib/api/assets",
+    );
+  return {
+    ...actual,
+    updateAsset: (...args: unknown[]) => updateAssetMock(...args),
+    updateAssetStatus: (...args: unknown[]) => updateAssetStatusMock(...args),
+  };
+});
+
+vi.mock("@/lib/api/attachments", () => ({
+  uploadAttachment: (...args: unknown[]) => uploadAttachmentMock(...args),
+}));
+
+vi.mock("@/lib/api/service-records", () => ({
+  createServiceRecord: (...args: unknown[]) => createServiceRecordMock(...args),
+}));
+
+vi.mock("@/lib/api/service-providers", () => ({
+  listServiceProviderOptions: () => listServiceProviderOptionsMock(),
+}));
+
+vi.mock("@/lib/api/locations", () => ({
+  listLocations: () => listLocationsMock(),
+}));
+
+const currentUserMock: { data: { name?: string } | null } = {
+  data: { name: "Mads Sauer" },
+};
+
+vi.mock("@/hooks/use-current-user", () => ({
+  useCurrentUser: () => ({ data: currentUserMock.data }),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+const { toast } = await import("sonner");
+const toastSuccess = toast.success as unknown as Mock;
+const toastError = toast.error as unknown as Mock;
+
+import { ScanResultSheet } from "@/components/scan/scan-result-sheet";
+
+function makeAsset(overrides: Partial<AssetDetail> = {}): AssetDetail {
+  return {
+    id: "a1",
+    name: "Drill #47",
+    assetTag: "AST-0047",
+    status: "active",
+    categoryId: null,
+    locationId: "loc-1",
+    serviceGroupId: null,
+    notes: null,
+    customFieldValues: {},
+    createdBy: "u1",
+    updatedBy: "u1",
+    createdAt: 0,
+    updatedAt: 0,
+    category: null,
+    location: null,
+    serviceGroup: null,
+    tags: [],
+    ...overrides,
+  } as AssetDetail;
+}
+
+function renderSheet(target: ResolverResult) {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const handlers = {
+    onAssetUpdated: vi.fn(),
+    onDismiss: vi.fn(),
+  };
+  const utils = render(
+    <QueryClientProvider client={qc}>
+      <ScanResultSheet
+        target={target}
+        resolving={false}
+        onAssetUpdated={handlers.onAssetUpdated}
+        onDismiss={handlers.onDismiss}
+      />
+    </QueryClientProvider>,
+  );
+  return { ...utils, handlers };
+}
+
+describe("ScanResultSheet", () => {
+  beforeEach(() => {
+    updateAssetMock.mockReset();
+    updateAssetStatusMock.mockReset();
+    uploadAttachmentMock.mockReset();
+    createServiceRecordMock.mockReset();
+    listLocationsMock.mockReset();
+    listServiceProviderOptionsMock.mockReset();
+    toastSuccess.mockReset();
+    toastError.mockReset();
+    currentUserMock.data = { name: "Mads Sauer" };
+    listLocationsMock.mockResolvedValue([
+      {
+        id: "loc-1",
+        name: "Bench 1",
+        parentId: null,
+        description: null,
+        path: "Workshop / Bench 1",
+        createdAt: 0,
+        updatedAt: 0,
+      },
+      {
+        id: "loc-2",
+        name: "Bench 2",
+        parentId: null,
+        description: null,
+        path: "Workshop / Bench 2",
+        createdAt: 0,
+        updatedAt: 0,
+      },
+    ]);
+    listServiceProviderOptionsMock.mockResolvedValue([
+      { id: "prov-1", name: "Acme Service Co." },
+    ]);
+  });
+
+  it("renders the 2x3 grid and Scan-another dismiss", () => {
+    renderSheet({ status: "asset", asset: makeAsset() });
+    expect(screen.getByTestId("scan-result-asset")).toHaveAttribute(
+      "data-asset-id",
+      "a1",
+    );
+    expect(screen.getByTestId("scan-result-actions")).toBeInTheDocument();
+    const testIds = [
+      "scan-action-view",
+      "scan-action-status",
+      "scan-action-move",
+      "scan-action-photo",
+      "scan-action-note",
+      "scan-action-service",
+    ];
+    for (const id of testIds) {
+      expect(screen.getByTestId(id)).toBeInTheDocument();
+    }
+    expect(screen.getByTestId("scan-result-view")).toHaveAttribute(
+      "href",
+      "/assets/a1",
+    );
+    expect(screen.getByTestId("scan-result-dismiss")).toBeInTheDocument();
+  });
+
+  it("dismisses on the Scan another button", () => {
+    const { handlers } = renderSheet({
+      status: "asset",
+      asset: makeAsset(),
+    });
+    fireEvent.click(screen.getByTestId("scan-result-dismiss"));
+    expect(handlers.onDismiss).toHaveBeenCalled();
+  });
+
+  it("status → selecting a new status calls updateAssetStatus and bubbles the update", async () => {
+    updateAssetStatusMock.mockResolvedValue(undefined);
+    const { handlers } = renderSheet({
+      status: "asset",
+      asset: makeAsset(),
+    });
+    fireEvent.click(screen.getByTestId("scan-action-status"));
+
+    const option = await screen.findByTestId("scan-status-option-under_repair");
+    fireEvent.click(option);
+
+    await waitFor(() => {
+      expect(updateAssetStatusMock).toHaveBeenCalledWith("a1", "under_repair");
+    });
+    await waitFor(() => {
+      expect(handlers.onAssetUpdated).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "a1", status: "under_repair" }),
+      );
+    });
+  });
+
+  it("status → rolls back and toasts on failure", async () => {
+    updateAssetStatusMock.mockRejectedValue(new Error("nope"));
+    const { handlers } = renderSheet({
+      status: "asset",
+      asset: makeAsset(),
+    });
+    fireEvent.click(screen.getByTestId("scan-action-status"));
+    fireEvent.click(await screen.findByTestId("scan-status-option-retired"));
+
+    await waitFor(() => {
+      expect(toastError).toHaveBeenCalled();
+    });
+    expect(handlers.onAssetUpdated).not.toHaveBeenCalled();
+  });
+
+  it("move → picking a location calls updateAsset({ locationId })", async () => {
+    updateAssetMock.mockResolvedValue(undefined);
+    const { handlers } = renderSheet({
+      status: "asset",
+      asset: makeAsset(),
+    });
+    fireEvent.click(screen.getByTestId("scan-action-move"));
+
+    await screen.findByTestId("scan-move-view");
+    const loc2 = await screen.findByTestId("scan-move-option-loc-2");
+    fireEvent.click(loc2);
+
+    await waitFor(() => {
+      expect(updateAssetMock).toHaveBeenCalledWith("a1", {
+        locationId: "loc-2",
+      });
+    });
+    await waitFor(() =>
+      expect(handlers.onAssetUpdated).toHaveBeenCalledWith(
+        expect.objectContaining({ locationId: "loc-2" }),
+      ),
+    );
+  });
+
+  it("move → clearing location calls updateAsset with null", async () => {
+    updateAssetMock.mockResolvedValue(undefined);
+    renderSheet({ status: "asset", asset: makeAsset() });
+    fireEvent.click(screen.getByTestId("scan-action-move"));
+    fireEvent.click(await screen.findByTestId("scan-move-option-none"));
+
+    await waitFor(() => {
+      expect(updateAssetMock).toHaveBeenCalledWith("a1", {
+        locationId: null,
+      });
+    });
+  });
+
+  it("note → submitting appends a timestamped line to the asset's notes", async () => {
+    updateAssetMock.mockResolvedValue(undefined);
+    const { handlers } = renderSheet({
+      status: "asset",
+      asset: makeAsset({ notes: "Existing note" }),
+    });
+    fireEvent.click(screen.getByTestId("scan-action-note"));
+
+    const textarea = await screen.findByTestId("scan-note-input");
+    fireEvent.change(textarea, { target: { value: "Chipped paint" } });
+    fireEvent.submit(screen.getByTestId("scan-note-form"));
+
+    await waitFor(() => expect(updateAssetMock).toHaveBeenCalled());
+    const [, body] = updateAssetMock.mock.calls[0];
+    expect(body).toEqual({
+      notes: expect.stringContaining("Existing note"),
+    });
+    expect(body.notes).toMatch(/Mads Sauer:.*Chipped paint/);
+    await waitFor(() => {
+      expect(handlers.onAssetUpdated).toHaveBeenCalledWith(
+        expect.objectContaining({ notes: body.notes }),
+      );
+    });
+  });
+
+  it("photo → file input is accept=image and selecting a file calls uploadAttachment", async () => {
+    uploadAttachmentMock.mockResolvedValue({ attachmentId: "att-1" });
+    renderSheet({ status: "asset", asset: makeAsset() });
+
+    const input = screen.getByTestId("scan-photo-input") as HTMLInputElement;
+    expect(input.accept).toBe("image/*");
+    expect(input.getAttribute("capture")).toBe("environment");
+
+    const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+    await act(async () => {
+      fireEvent.change(input, { target: { files: [file] } });
+    });
+    await waitFor(() => expect(uploadAttachmentMock).toHaveBeenCalled());
+    const [assetId, uploaded] = uploadAttachmentMock.mock.calls[0];
+    expect(assetId).toBe("a1");
+    expect(uploaded).toBe(file);
+  });
+
+  it("service → submits createServiceRecord with the form values", async () => {
+    createServiceRecordMock.mockResolvedValue({
+      recordId: "sr-1",
+      nextServiceDate: null,
+    });
+    renderSheet({ status: "asset", asset: makeAsset() });
+    fireEvent.click(screen.getByTestId("scan-action-service"));
+
+    fireEvent.change(await screen.findByTestId("scan-service-description"), {
+      target: { value: "Lubricated bearings" },
+    });
+    fireEvent.change(screen.getByTestId("scan-service-cost"), {
+      target: { value: "19.50" },
+    });
+    await screen.findByTestId("scan-service-provider");
+    fireEvent.change(screen.getByTestId("scan-service-provider"), {
+      target: { value: "prov-1" },
+    });
+
+    fireEvent.submit(screen.getByTestId("scan-service-form"));
+
+    await waitFor(() => expect(createServiceRecordMock).toHaveBeenCalled());
+    const [payload] = createServiceRecordMock.mock.calls[0];
+    expect(payload).toEqual({
+      assetId: "a1",
+      serviceDate: expect.stringMatching(/^\d{4}-\d{2}-\d{2}$/),
+      description: "Lubricated bearings",
+      cost: 19.5,
+      providerId: "prov-1",
+      values: {},
+    });
+  });
+
+  it("unresolved branch renders the raw text and Try-again button", () => {
+    const { handlers } = renderSheet({
+      status: "unresolved",
+      rawText: "UNKNOWN-TAG",
+    });
+    expect(screen.getByTestId("scan-result-unresolved")).toBeInTheDocument();
+    expect(screen.getByText(/UNKNOWN-TAG/)).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("scan-result-retry"));
+    expect(handlers.onDismiss).toHaveBeenCalled();
+  });
+});
diff --git a/src/__tests__/components/services/service-group-assets-panel.test.tsx b/src/__tests__/components/services/service-group-assets-panel.test.tsx
index 3deeaad..3c09429 100644
--- a/src/__tests__/components/services/service-group-assets-panel.test.tsx
+++ b/src/__tests__/components/services/service-group-assets-panel.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 
 const listServiceGroupAssetsMock = vi.fn();
 
@@ -32,7 +32,8 @@ describe("ServiceGroupAssetsPanel", () => {
 
     renderWithClient(<ServiceGroupAssetsPanel groupId="group1" />);
 
-    expect(screen.getByText("Loading assets...")).toBeInTheDocument();
+    // Mobile card list and desktop table each render their own loading copy
+    expect(screen.getAllByText("Loading assets...").length).toBeGreaterThan(0);
   });
 
   it("shows empty state when no assets are assigned", async () => {
@@ -42,8 +43,9 @@ describe("ServiceGroupAssetsPanel", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText("No assets are currently assigned to this group."),
-      ).toBeInTheDocument();
+        screen.getAllByText("No assets are currently assigned to this group.")
+          .length,
+      ).toBeGreaterThan(0);
     });
   });
 
@@ -60,10 +62,17 @@ describe("ServiceGroupAssetsPanel", () => {
     renderWithClient(<ServiceGroupAssetsPanel groupId="group1" />);
 
     await waitFor(() => {
-      expect(screen.getByText("Generator")).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId("service-group-assets-card-list")).getByText(
+          "Generator",
+        ),
+      ).toBeInTheDocument();
     });
-    expect(screen.getByText("AST-0001")).toBeInTheDocument();
-    expect(screen.getByText("active")).toBeInTheDocument();
+    const mobile = within(screen.getByTestId("service-group-assets-card-list"));
+    const desktop = within(screen.getByTestId("service-group-assets-table"));
+    expect(mobile.getByText("AST-0001")).toBeInTheDocument();
+    expect(mobile.getByText("active")).toBeInTheDocument();
+    expect(desktop.getByText("Generator")).toBeInTheDocument();
     expect(screen.getByRole("link", { name: "Open asset" })).toHaveAttribute(
       "href",
       "/assets/asset1",
diff --git a/src/__tests__/components/services/service-group-fields-panel.test.tsx b/src/__tests__/components/services/service-group-fields-panel.test.tsx
index aeb03ec..b662701 100644
--- a/src/__tests__/components/services/service-group-fields-panel.test.tsx
+++ b/src/__tests__/components/services/service-group-fields-panel.test.tsx
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 
 const listServiceGroupFieldsMock = vi.fn();
 
@@ -33,7 +33,10 @@ describe("ServiceGroupFieldsPanel", () => {
 
     renderWithClient(<ServiceGroupFieldsPanel groupId="group1" canManage />);
 
-    expect(screen.getByText("Loading service fields...")).toBeInTheDocument();
+    // Both mobile card list and desktop table render copies of the text
+    expect(
+      screen.getAllByText("Loading service fields...").length,
+    ).toBeGreaterThan(0);
   });
 
   it("shows empty state when no fields exist", async () => {
@@ -43,10 +46,10 @@ describe("ServiceGroupFieldsPanel", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText(
+        screen.getAllByText(
           "No fields yet. Add required service fields for this group.",
-        ),
-      ).toBeInTheDocument();
+        ).length,
+      ).toBeGreaterThan(0);
     });
   });
 
@@ -72,8 +75,17 @@ describe("ServiceGroupFieldsPanel", () => {
     renderWithClient(<ServiceGroupFieldsPanel groupId="group1" canManage />);
 
     await waitFor(() => {
-      expect(screen.getByText("Technician note")).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId("service-group-fields-card-list")).getByText(
+          "Technician note",
+        ),
+      ).toBeInTheDocument();
     });
+    expect(
+      within(screen.getByTestId("service-group-fields-table")).getByText(
+        "Technician note",
+      ),
+    ).toBeInTheDocument();
     expect(screen.getAllByText("Required").length).toBeGreaterThanOrEqual(1);
 
     await user.click(screen.getByRole("button", { name: /Add field/ }));
diff --git a/src/__tests__/components/services/service-groups-list.test.tsx b/src/__tests__/components/services/service-groups-list.test.tsx
index f04d500..908f53d 100644
--- a/src/__tests__/components/services/service-groups-list.test.tsx
+++ b/src/__tests__/components/services/service-groups-list.test.tsx
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 
 const listServiceGroupsMock = vi.fn();
 const getCurrentUserMock = vi.fn();
@@ -55,8 +55,17 @@ describe("ServiceGroupsList", () => {
     renderWithClient(<ServiceGroupsList />);
 
     await waitFor(() => {
-      expect(screen.getByText("Engine checks")).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId("service-groups-card-list")).getByText(
+          "Engine checks",
+        ),
+      ).toBeInTheDocument();
     });
+    expect(
+      within(screen.getByTestId("service-groups-table")).getByText(
+        "Engine checks",
+      ),
+    ).toBeInTheDocument();
     await user.click(screen.getByRole("button", { name: "Create group" }));
     expect(
       screen.getByRole("heading", { name: "Create service group" }),
diff --git a/src/__tests__/components/services/services-scheduled-list.test.tsx b/src/__tests__/components/services/services-scheduled-list.test.tsx
index bcf3668..fdf4515 100644
--- a/src/__tests__/components/services/services-scheduled-list.test.tsx
+++ b/src/__tests__/components/services/services-scheduled-list.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 
 const listScheduledAssetsMock = vi.fn();
 
@@ -16,6 +16,10 @@ vi.mock("@/components/services/log-service-dialog", () => ({
   LogServiceDialog: () => null,
 }));
 
+vi.mock("@/lib/use-today-iso-date", () => ({
+  useTodayIsoDate: () => "2026-03-01",
+}));
+
 import { ServicesScheduledList } from "@/components/services/services-scheduled-list";
 
 function renderWithClient(ui: React.ReactElement) {
@@ -30,7 +34,7 @@ describe("ServicesScheduledList", () => {
     listScheduledAssetsMock.mockReset();
   });
 
-  it("renders schedule rows", async () => {
+  it("renders schedule rows inside a bucketed group with the relative due date", async () => {
     listScheduledAssetsMock.mockResolvedValue([
       {
         scheduleId: "schedule1",
@@ -56,10 +60,138 @@ describe("ServicesScheduledList", () => {
       expect(screen.getByText("Main Engine")).toBeInTheDocument();
     });
     expect(screen.getByText("ENG-0001")).toBeInTheDocument();
-    expect(screen.getByText("Due: 06-03-2026")).toBeInTheDocument();
+    // 2026-03-06 is 5 days from mocked today 2026-03-01 → "Due in 5 days"
+    expect(screen.getByText("Due in 5 days")).toBeInTheDocument();
+    // Group header for "Due this week" is shown with a count of 1
+    expect(screen.getByTestId("services-group-thisWeek")).toBeInTheDocument();
     expect(
       screen.getByText("Last service 01-02-2026 • Dockside Repair"),
     ).toBeInTheDocument();
+    expect(screen.getByTestId("log-service-schedule1")).toBeInTheDocument();
+  });
+
+  it("groups overdue, this-week, this-month and upcoming buckets", async () => {
+    listScheduledAssetsMock.mockResolvedValue([
+      {
+        scheduleId: "overdue1",
+        assetId: "a1",
+        assetName: "Late",
+        assetTag: "A-1",
+        assetStatus: "active",
+        nextServiceDate: "2026-02-10", // 19 days before today
+        intervalValue: 1,
+        intervalUnit: "months",
+        reminderLeadValue: 5,
+        reminderLeadUnit: "days",
+        reminderStartDate: "2026-02-05",
+        lastServiceDate: null,
+        lastServiceDescription: null,
+        lastServiceProviderName: null,
+      },
+      {
+        scheduleId: "week1",
+        assetId: "a2",
+        assetName: "Soon",
+        assetTag: "A-2",
+        assetStatus: "active",
+        nextServiceDate: "2026-03-05", // 4 days
+        intervalValue: 1,
+        intervalUnit: "months",
+        reminderLeadValue: 5,
+        reminderLeadUnit: "days",
+        reminderStartDate: "2026-03-01",
+        lastServiceDate: null,
+        lastServiceDescription: null,
+        lastServiceProviderName: null,
+      },
+      {
+        scheduleId: "month1",
+        assetId: "a3",
+        assetName: "Monthly",
+        assetTag: "A-3",
+        assetStatus: "active",
+        nextServiceDate: "2026-03-20", // 19 days
+        intervalValue: 1,
+        intervalUnit: "months",
+        reminderLeadValue: 5,
+        reminderLeadUnit: "days",
+        reminderStartDate: "2026-03-01",
+        lastServiceDate: null,
+        lastServiceDescription: null,
+        lastServiceProviderName: null,
+      },
+      {
+        scheduleId: "upcoming1",
+        assetId: "a4",
+        assetName: "Far",
+        assetTag: "A-4",
+        assetStatus: "active",
+        nextServiceDate: "2026-06-01", // ~3 months
+        intervalValue: 1,
+        intervalUnit: "months",
+        reminderLeadValue: 5,
+        reminderLeadUnit: "days",
+        reminderStartDate: "2026-05-26",
+        lastServiceDate: null,
+        lastServiceDescription: null,
+        lastServiceProviderName: null,
+      },
+    ]);
+
+    renderWithClient(<ServicesScheduledList />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Late")).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("services-group-overdue")).toBeInTheDocument();
+    expect(screen.getByTestId("services-group-thisWeek")).toBeInTheDocument();
+    expect(screen.getByTestId("services-group-thisMonth")).toBeInTheDocument();
+    expect(screen.getByTestId("services-group-upcoming")).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("services-group-overdue")).getByText("Late"),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("services-group-thisWeek")).getByText("Soon"),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("services-group-thisMonth")).getByText(
+        "Monthly",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("services-group-upcoming")).getByText("Far"),
+    ).toBeInTheDocument();
+    expect(screen.getAllByText(/days overdue/i).length).toBeGreaterThan(0);
+  });
+
+  it("keeps future reminder-window rows in upcoming", async () => {
+    listScheduledAssetsMock.mockResolvedValue([
+      {
+        scheduleId: "future-reminder",
+        assetId: "a1",
+        assetName: "Not Ready",
+        assetTag: "A-1",
+        assetStatus: "active",
+        nextServiceDate: "2026-03-05",
+        intervalValue: 1,
+        intervalUnit: "months",
+        reminderLeadValue: 1,
+        reminderLeadUnit: "days",
+        reminderStartDate: "2026-03-04",
+        lastServiceDate: null,
+        lastServiceDescription: null,
+        lastServiceProviderName: null,
+      },
+    ]);
+
+    renderWithClient(<ServicesScheduledList />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("services-group-upcoming")).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId("services-group-thisWeek")).toBeNull();
+    expect(screen.getByText("Scheduled")).toBeInTheDocument();
   });
 
   it("renders empty state when no schedules exist", async () => {
diff --git a/src/__tests__/components/settings/user-management-section.test.tsx b/src/__tests__/components/settings/user-management-section.test.tsx
index a0cb34f..7c47af5 100644
--- a/src/__tests__/components/settings/user-management-section.test.tsx
+++ b/src/__tests__/components/settings/user-management-section.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const listUsersMock = vi.fn();
@@ -74,10 +74,16 @@ describe("UserManagementSection", () => {
     renderWithClient(<UserManagementSection currentUserId={adminUser.id} />);
 
     await waitFor(() => {
-      expect(screen.getByText("Alex Admin")).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId("users-card-list")).getByText("Alex Admin"),
+      ).toBeInTheDocument();
     });
-    expect(screen.getByText("Morgan Member")).toBeInTheDocument();
-    expect(screen.getByText("member@example.com")).toBeInTheDocument();
+    const mobile = within(screen.getByTestId("users-card-list"));
+    const desktop = within(screen.getByTestId("users-table"));
+    expect(mobile.getByText("Morgan Member")).toBeInTheDocument();
+    expect(mobile.getByText("member@example.com")).toBeInTheDocument();
+    expect(desktop.getByText("Alex Admin")).toBeInTheDocument();
+    expect(desktop.getByText("Morgan Member")).toBeInTheDocument();
 
     await user.click(screen.getByRole("button", { name: /add user/i }));
 
@@ -90,11 +96,15 @@ describe("UserManagementSection", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByRole("combobox", { name: "Role for Alex Admin" }),
+        within(screen.getByTestId("users-card-list")).getByRole("combobox", {
+          name: "Role for Alex Admin",
+        }),
       ).toBeInTheDocument();
     });
     expect(
-      screen.getByRole("combobox", { name: "Role for Morgan Member" }),
+      within(screen.getByTestId("users-table")).getByRole("combobox", {
+        name: "Role for Morgan Member",
+      }),
     ).toBeInTheDocument();
   });
 
@@ -103,11 +113,12 @@ describe("UserManagementSection", () => {
     renderWithClient(<UserManagementSection currentUserId={adminUser.id} />);
 
     await waitFor(() => {
-      expect(screen.getByText("Alex Admin")).toBeInTheDocument();
+      expect(screen.getByTestId("users-card-list")).toBeInTheDocument();
     });
     await user.click(screen.getByRole("button", { name: /add user/i }));
 
     const comboboxes = screen.getAllByRole("combobox");
+    // 2 per user (card + table) plus the Role select in the dialog.
     expect(comboboxes.length).toBeGreaterThanOrEqual(3);
   });
 
@@ -115,9 +126,30 @@ describe("UserManagementSection", () => {
     renderWithClient(<UserManagementSection currentUserId={adminUser.id} />);
 
     await waitFor(() => {
-      const saveButtons = screen.getAllByRole("button", { name: "Save" });
-      expect(saveButtons).toHaveLength(2);
+      expect(
+        within(screen.getByTestId("users-card-list")).getAllByRole("button", {
+          name: "Save",
+        }),
+      ).toHaveLength(2);
+    });
+    expect(
+      within(screen.getByTestId("users-table")).getAllByRole("button", {
+        name: "Save",
+      }),
+    ).toHaveLength(2);
+  });
+
+  it("shows an error state when users fail to load", async () => {
+    listUsersMock.mockRejectedValue(new Error("database is gone"));
+
+    renderWithClient(<UserManagementSection currentUserId={adminUser.id} />);
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByText("Could not load users. Please try again.").length,
+      ).toBeGreaterThan(0);
     });
+    expect(screen.queryByText("No users found.")).not.toBeInTheDocument();
   });
 });
 
diff --git a/src/__tests__/hooks/use-barcode-scanner.test.tsx b/src/__tests__/hooks/use-barcode-scanner.test.tsx
new file mode 100644
index 0000000..d2fcce6
--- /dev/null
+++ b/src/__tests__/hooks/use-barcode-scanner.test.tsx
@@ -0,0 +1,352 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+  type Mock,
+} from "vitest";
+import { createRef } from "react";
+
+import { useBarcodeScanner } from "@/hooks/use-barcode-scanner";
+
+type CallbackFn = (result: unknown, err: unknown, controls: unknown) => void;
+
+const scannerState: {
+  capabilities: { torch?: boolean } | undefined;
+  lastCallback: CallbackFn | null;
+  stop: Mock;
+  switchTorch: Mock;
+  decodeFromConstraints: Mock;
+  throwOnDecode: Error | null;
+} = {
+  capabilities: undefined,
+  lastCallback: null,
+  stop: vi.fn(),
+  switchTorch: vi.fn(),
+  decodeFromConstraints: vi.fn(),
+  throwOnDecode: null,
+};
+
+vi.mock("@zxing/browser", () => {
+  class BrowserMultiFormatReader {
+    decodeFromConstraints = scannerState.decodeFromConstraints;
+  }
+  const BarcodeFormat = { CODE_128: 1, DATA_MATRIX: 2, QR_CODE: 11 };
+  return { BrowserMultiFormatReader, BarcodeFormat };
+});
+
+function makeControls() {
+  const controls = {
+    stop: scannerState.stop,
+    switchTorch: scannerState.switchTorch,
+    streamVideoCapabilitiesGet: () => scannerState.capabilities,
+  };
+  return controls;
+}
+
+function installMediaDevices(
+  getUserMedia: Mock = vi.fn().mockResolvedValue({ getTracks: () => [] }),
+) {
+  (
+    navigator as unknown as {
+      mediaDevices?: { getUserMedia: Mock };
+    }
+  ).mediaDevices = { getUserMedia };
+  return getUserMedia;
+}
+
+function setSecureContext(value: boolean) {
+  Object.defineProperty(window, "isSecureContext", {
+    configurable: true,
+    value,
+  });
+}
+
+function makeVideoRef() {
+  const ref = createRef<HTMLVideoElement | null>();
+  (ref as { current: HTMLVideoElement | null }).current =
+    document.createElement("video");
+  return ref;
+}
+
+describe("useBarcodeScanner", () => {
+  beforeEach(() => {
+    scannerState.capabilities = undefined;
+    scannerState.lastCallback = null;
+    scannerState.stop = vi.fn();
+    scannerState.switchTorch = vi.fn().mockResolvedValue(undefined);
+    scannerState.throwOnDecode = null;
+    scannerState.decodeFromConstraints = vi
+      .fn()
+      .mockImplementation(async (_constraints, _video, callback) => {
+        if (scannerState.throwOnDecode) throw scannerState.throwOnDecode;
+        scannerState.lastCallback = callback;
+        return makeControls();
+      });
+
+    setSecureContext(true);
+    installMediaDevices();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("transitions idle → requesting → scanning when enabled", async () => {
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+  });
+
+  it("returns to idle when disabled and stops the scanner", async () => {
+    const videoRef = makeVideoRef();
+    const { result, rerender } = renderHook(
+      ({ enabled }) =>
+        useBarcodeScanner({
+          videoRef,
+          onResult: () => {},
+          enabled,
+        }),
+      { initialProps: { enabled: true } },
+    );
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+
+    rerender({ enabled: false });
+    await waitFor(() => expect(result.current.state).toBe("idle"));
+    expect(scannerState.stop).toHaveBeenCalled();
+  });
+
+  it("fires onResult the first time and suppresses duplicates within 2s", async () => {
+    const onResult = vi.fn();
+    const videoRef = makeVideoRef();
+    renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult,
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(scannerState.lastCallback).not.toBeNull());
+
+    const now = Date.now();
+    vi.useFakeTimers();
+    vi.setSystemTime(now);
+
+    const result = {
+      getText: () => "https://stowage.local/assets/abc",
+      getBarcodeFormat: () => 2,
+    };
+
+    act(() => {
+      scannerState.lastCallback?.(result, undefined, makeControls());
+    });
+    expect(onResult).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.setSystemTime(now + 500);
+      scannerState.lastCallback?.(result, undefined, makeControls());
+    });
+    expect(onResult).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.setSystemTime(now + 2500);
+      scannerState.lastCallback?.(result, undefined, makeControls());
+    });
+    expect(onResult).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not suppress distinct texts", async () => {
+    const onResult = vi.fn();
+    const videoRef = makeVideoRef();
+    renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult,
+        enabled: true,
+      }),
+    );
+    await waitFor(() => expect(scannerState.lastCallback).not.toBeNull());
+
+    act(() => {
+      scannerState.lastCallback?.(
+        {
+          getText: () => "one",
+          getBarcodeFormat: () => 1,
+          getResultPoints: () => [{ getX: () => 10, getY: () => 20 }],
+        },
+        undefined,
+        makeControls(),
+      );
+      scannerState.lastCallback?.(
+        {
+          getText: () => "two",
+          getBarcodeFormat: () => 1,
+          getResultPoints: () => [],
+        },
+        undefined,
+        makeControls(),
+      );
+    });
+
+    expect(onResult).toHaveBeenCalledTimes(2);
+    expect(onResult).toHaveBeenCalledWith(
+      expect.objectContaining({ text: "one", format: "FORMAT_1" }),
+    );
+    const firstCall = onResult.mock.calls[0][0];
+    expect(firstCall.points).toEqual([{ x: 10, y: 20 }]);
+    expect(onResult).toHaveBeenCalledWith(
+      expect.objectContaining({ text: "two", format: "FORMAT_1" }),
+    );
+  });
+
+  it("enters 'denied' state on NotAllowedError", async () => {
+    scannerState.throwOnDecode = Object.assign(new Error("user blocked"), {
+      name: "NotAllowedError",
+    });
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("denied"));
+    expect(result.current.error).toBe("user blocked");
+  });
+
+  it("enters 'insecure' state outside a secure context", async () => {
+    setSecureContext(false);
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("insecure"));
+    expect(scannerState.decodeFromConstraints).not.toHaveBeenCalled();
+  });
+
+  it("enters 'error' when mediaDevices is missing", async () => {
+    (navigator as unknown as { mediaDevices?: unknown }).mediaDevices =
+      undefined;
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("error"));
+  });
+
+  it("reports torch capability from the active stream", async () => {
+    scannerState.capabilities = { torch: true };
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+    expect(result.current.torch.supported).toBe(true);
+    expect(result.current.torch.on).toBe(false);
+  });
+
+  it("does not report torch when the stream has no capability", async () => {
+    scannerState.capabilities = {};
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+    expect(result.current.torch.supported).toBe(false);
+  });
+
+  it("toggles the torch via switchTorch and updates state", async () => {
+    scannerState.capabilities = { torch: true };
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+
+    await act(async () => {
+      result.current.torch.toggle();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(result.current.torch.on).toBe(true));
+    expect(scannerState.switchTorch).toHaveBeenCalledWith(true);
+
+    await act(async () => {
+      result.current.torch.toggle();
+      await Promise.resolve();
+    });
+    await waitFor(() => expect(result.current.torch.on).toBe(false));
+    expect(scannerState.switchTorch).toHaveBeenCalledWith(false);
+  });
+
+  it("stops the scanner on unmount", async () => {
+    const videoRef = makeVideoRef();
+    const { result, unmount } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+    unmount();
+    expect(scannerState.stop).toHaveBeenCalled();
+  });
+
+  it("restart() re-invokes decodeFromConstraints", async () => {
+    const videoRef = makeVideoRef();
+    const { result } = renderHook(() =>
+      useBarcodeScanner({
+        videoRef,
+        onResult: () => {},
+        enabled: true,
+      }),
+    );
+    await waitFor(() => expect(result.current.state).toBe("scanning"));
+    expect(scannerState.decodeFromConstraints).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      result.current.restart();
+    });
+    await waitFor(() =>
+      expect(scannerState.decodeFromConstraints).toHaveBeenCalledTimes(2),
+    );
+  });
+});
diff --git a/src/__tests__/hooks/use-media-query.test.tsx b/src/__tests__/hooks/use-media-query.test.tsx
new file mode 100644
index 0000000..c57b56d
--- /dev/null
+++ b/src/__tests__/hooks/use-media-query.test.tsx
@@ -0,0 +1,92 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+type MqlListener = (event: MediaQueryListEvent) => void;
+
+function installMatchMedia(initial: boolean) {
+  const listeners: MqlListener[] = [];
+  const mql = {
+    matches: initial,
+    media: "",
+    addEventListener: (_event: string, cb: MqlListener) => {
+      listeners.push(cb);
+    },
+    removeEventListener: (_event: string, cb: MqlListener) => {
+      const index = listeners.indexOf(cb);
+      if (index >= 0) listeners.splice(index, 1);
+    },
+    dispatchChange: (matches: boolean) => {
+      mql.matches = matches;
+      listeners.slice().forEach((cb) => cb({ matches } as MediaQueryListEvent));
+    },
+    listenerCount: () => listeners.length,
+  };
+  (window as unknown as { matchMedia: typeof window.matchMedia }).matchMedia =
+    vi.fn().mockReturnValue(mql as unknown as MediaQueryList);
+  return mql;
+}
+
+describe("useMediaQuery", () => {
+  let originalMatchMedia: typeof window.matchMedia;
+
+  beforeEach(() => {
+    originalMatchMedia = window.matchMedia;
+  });
+
+  afterEach(() => {
+    (window as unknown as { matchMedia: typeof window.matchMedia }).matchMedia =
+      originalMatchMedia;
+  });
+
+  it("returns the initial match state", () => {
+    installMatchMedia(true);
+    const { result } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+    expect(result.current).toBe(true);
+  });
+
+  it("returns false when the query does not match", () => {
+    installMatchMedia(false);
+    const { result } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+    expect(result.current).toBe(false);
+  });
+
+  it("updates when the media query changes", () => {
+    const mql = installMatchMedia(false);
+    const { result } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+    expect(result.current).toBe(false);
+
+    act(() => {
+      mql.dispatchChange(true);
+    });
+    expect(result.current).toBe(true);
+
+    act(() => {
+      mql.dispatchChange(false);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it("removes its listener on unmount", () => {
+    const mql = installMatchMedia(false);
+    const { unmount } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+    expect(mql.listenerCount()).toBe(1);
+    unmount();
+    expect(mql.listenerCount()).toBe(0);
+  });
+
+  it("returns false when matchMedia is unavailable (SSR-like env)", () => {
+    const anyWin = window as unknown as {
+      matchMedia?: typeof window.matchMedia;
+    };
+    const saved = anyWin.matchMedia;
+    delete anyWin.matchMedia;
+    try {
+      const { result } = renderHook(() => useMediaQuery("(min-width: 1024px)"));
+      expect(result.current).toBe(false);
+    } finally {
+      anyWin.matchMedia = saved;
+    }
+  });
+});
diff --git a/src/__tests__/lib/scan.test.ts b/src/__tests__/lib/scan.test.ts
new file mode 100644
index 0000000..ce61a2e
--- /dev/null
+++ b/src/__tests__/lib/scan.test.ts
@@ -0,0 +1,229 @@
+import { describe, it, expect, vi } from "vitest";
+
+import type { AssetDetail } from "@/lib/api/assets";
+import { extractStowageAssetId, resolveScanTarget } from "@/lib/scan";
+
+const APP_ORIGIN = "https://stowage.example.com";
+
+function makeAsset(id: string, assetTag: string): AssetDetail {
+  return {
+    id,
+    name: `Test ${id}`,
+    assetTag,
+    status: "active",
+    categoryId: null,
+    locationId: null,
+    serviceGroupId: null,
+    notes: null,
+    customFieldValues: {},
+    createdBy: "u1",
+    updatedBy: "u1",
+    createdAt: 0,
+    updatedAt: 0,
+  } as AssetDetail;
+}
+
+describe("extractStowageAssetId", () => {
+  it("returns the id when the URL matches the app origin and /assets/<id>", () => {
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com/assets/abc123",
+        APP_ORIGIN,
+      ),
+    ).toBe("abc123");
+  });
+
+  it("tolerates a trailing slash on the app origin", () => {
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com/assets/abc123",
+        "https://stowage.example.com/",
+      ),
+    ).toBe("abc123");
+  });
+
+  it("trims whitespace from the scanned text", () => {
+    expect(
+      extractStowageAssetId(
+        "   https://stowage.example.com/assets/abc123   ",
+        APP_ORIGIN,
+      ),
+    ).toBe("abc123");
+  });
+
+  it("returns null for a URL on a different origin", () => {
+    expect(
+      extractStowageAssetId(
+        "https://evil.example.com/assets/abc123",
+        APP_ORIGIN,
+      ),
+    ).toBeNull();
+  });
+
+  it("returns null for a URL with matching origin but the wrong path", () => {
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com/foo/abc123",
+        APP_ORIGIN,
+      ),
+    ).toBeNull();
+    expect(
+      extractStowageAssetId("https://stowage.example.com/assets", APP_ORIGIN),
+    ).toBeNull();
+  });
+
+  it("extracts ids from deep links and base-path prefixed asset URLs", () => {
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com/assets/abc123/edit",
+        APP_ORIGIN,
+      ),
+    ).toBe("abc123");
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com/stowage/assets/abc123/service",
+        APP_ORIGIN,
+      ),
+    ).toBe("abc123");
+  });
+
+  it("returns null for a non-URL input", () => {
+    expect(extractStowageAssetId("AST-0047", APP_ORIGIN)).toBeNull();
+    expect(extractStowageAssetId("", APP_ORIGIN)).toBeNull();
+    expect(extractStowageAssetId("   ", APP_ORIGIN)).toBeNull();
+    expect(extractStowageAssetId("hello world", APP_ORIGIN)).toBeNull();
+  });
+
+  it("rejects URLs with a port mismatch", () => {
+    expect(
+      extractStowageAssetId(
+        "https://stowage.example.com:8443/assets/abc123",
+        APP_ORIGIN,
+      ),
+    ).toBeNull();
+  });
+});
+
+describe("resolveScanTarget", () => {
+  it("resolves a matching URL via fetchById", async () => {
+    const asset = makeAsset("abc123", "AST-0047");
+    const fetchById = vi.fn().mockResolvedValue(asset);
+    const fetchByTag = vi.fn();
+
+    const result = await resolveScanTarget(
+      "https://stowage.example.com/assets/abc123",
+      APP_ORIGIN,
+      { fetchById, fetchByTag },
+    );
+
+    expect(result).toEqual({ status: "asset", asset });
+    expect(fetchById).toHaveBeenCalledWith("abc123");
+    expect(fetchByTag).not.toHaveBeenCalled();
+  });
+
+  it("returns unresolved when fetchById returns null (404)", async () => {
+    const fetchById = vi.fn().mockResolvedValue(null);
+    const fetchByTag = vi.fn();
+
+    const result = await resolveScanTarget(
+      "https://stowage.example.com/assets/missing",
+      APP_ORIGIN,
+      { fetchById, fetchByTag },
+    );
+
+    expect(result.status).toBe("unresolved");
+    expect(fetchByTag).not.toHaveBeenCalled();
+  });
+
+  it("returns unresolved when fetchById throws (network / 403)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const fetchById = vi.fn().mockRejectedValue(new Error("forbidden"));
+    const fetchByTag = vi.fn();
+
+    const result = await resolveScanTarget(
+      "https://stowage.example.com/assets/nope",
+      APP_ORIGIN,
+      { fetchById, fetchByTag },
+    );
+
+    expect(result).toEqual({
+      status: "unresolved",
+      rawText: "https://stowage.example.com/assets/nope",
+    });
+    expect(fetchByTag).not.toHaveBeenCalled();
+    expect(warn).toHaveBeenCalledWith(
+      "safeLookup failed while resolving a scanned asset",
+      expect.any(Error),
+    );
+    warn.mockRestore();
+  });
+
+  it("falls back to fetchByTag for bare asset tags", async () => {
+    const asset = makeAsset("abc", "AST-0047");
+    const fetchById = vi.fn();
+    const fetchByTag = vi.fn().mockResolvedValue(asset);
+
+    const result = await resolveScanTarget("AST-0047", APP_ORIGIN, {
+      fetchById,
+      fetchByTag,
+    });
+
+    expect(result).toEqual({ status: "asset", asset });
+    expect(fetchById).not.toHaveBeenCalled();
+    expect(fetchByTag).toHaveBeenCalledWith("AST-0047");
+  });
+
+  it("does not call fetchByTag when the input looks like a URL on another origin", async () => {
+    const fetchById = vi.fn();
+    const fetchByTag = vi.fn();
+
+    const result = await resolveScanTarget(
+      "https://evil.example.com/assets/abc",
+      APP_ORIGIN,
+      { fetchById, fetchByTag },
+    );
+
+    expect(result.status).toBe("unresolved");
+    expect(fetchById).not.toHaveBeenCalled();
+    expect(fetchByTag).not.toHaveBeenCalled();
+  });
+
+  it("does not call fetchByTag for inputs with whitespace or non-tag characters", async () => {
+    const fetchById = vi.fn();
+    const fetchByTag = vi.fn();
+
+    const result = await resolveScanTarget("hello world", APP_ORIGIN, {
+      fetchById,
+      fetchByTag,
+    });
+
+    expect(result.status).toBe("unresolved");
+    expect(fetchByTag).not.toHaveBeenCalled();
+  });
+
+  it("returns unresolved when fetchByTag returns null", async () => {
+    const fetchById = vi.fn();
+    const fetchByTag = vi.fn().mockResolvedValue(null);
+
+    const result = await resolveScanTarget("AST-9999", APP_ORIGIN, {
+      fetchById,
+      fetchByTag,
+    });
+
+    expect(result).toEqual({ status: "unresolved", rawText: "AST-9999" });
+  });
+
+  it("returns unresolved for empty and whitespace-only input without calling any lookup", async () => {
+    const fetchById = vi.fn();
+    const fetchByTag = vi.fn();
+
+    expect(
+      await resolveScanTarget("", APP_ORIGIN, { fetchById, fetchByTag }),
+    ).toEqual({ status: "unresolved", rawText: "" });
+    expect(
+      await resolveScanTarget("   ", APP_ORIGIN, { fetchById, fetchByTag }),
+    ).toEqual({ status: "unresolved", rawText: "" });
+    expect(fetchById).not.toHaveBeenCalled();
+    expect(fetchByTag).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index cf610a4..362e12c 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { ChevronDown } from "lucide-react";
 import { PageHeader } from "@/components/layout/page-header";
 import { DashboardStatsBar } from "@/components/dashboard/dashboard-stats-bar";
 import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
@@ -8,12 +10,23 @@ import { LocationBreakdown } from "@/components/dashboard/location-breakdown";
 import { QuickActions } from "@/components/dashboard/quick-actions";
 import { RecentAssetsCard } from "@/components/dashboard/recent-assets-card";
 import { UpcomingServicesWidget } from "@/components/dashboard/upcoming-services-widget";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { getDashboardOverview } from "@/lib/api/dashboard";
 
 export default function DashboardPage() {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
   const { data: currentUser } = useCurrentUser();
-  const { data: overview } = useQuery({
+  const {
+    data: overview,
+    isError,
+    isPending,
+  } = useQuery({
     queryKey: ["dashboard", "overview"],
     queryFn: getDashboardOverview,
   });
@@ -22,46 +35,130 @@ export default function DashboardPage() {
     ? `Welcome back, ${currentUser.name}`
     : "Dashboard";
 
+  if (isPending) {
+    return (
+      <div className="flex h-full flex-col gap-4">
+        <PageHeader
+          title={greeting}
+          description="Overview of your assets and upcoming services."
+          breadcrumbs={[{ label: "Stowage", href: "/dashboard" }]}
+        />
+        <div className="rounded-xl border border-border/70 bg-card p-8 text-center text-sm text-muted-foreground">
+          Loading dashboard...
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !overview) {
+    return (
+      <div className="flex h-full flex-col gap-4">
+        <PageHeader
+          title={greeting}
+          description="Overview of your assets and upcoming services."
+          breadcrumbs={[{ label: "Stowage", href: "/dashboard" }]}
+        />
+        <div className="rounded-xl border border-destructive/30 bg-destructive/5 p-8 text-center text-sm text-destructive">
+          Could not load the dashboard. Please try again.
+        </div>
+      </div>
+    );
+  }
+
+  const recent = (
+    <RecentAssetsCard
+      items={overview.recentAssets}
+      dateFormat={overview.dateFormat}
+    />
+  );
+  const upcoming = (
+    <UpcomingServicesWidget
+      items={overview.upcomingServices}
+      overdueCount={overview.overdueServiceCount}
+      serviceSchedulingEnabled={overview.serviceSchedulingEnabled}
+      dateFormat={overview.dateFormat}
+    />
+  );
+  const categoryBreakdown = (
+    <CategoryBreakdown items={overview.categoryBreakdown} />
+  );
+  const locationBreakdown = (
+    <LocationBreakdown items={overview.locationBreakdown} />
+  );
+
   return (
-    <div className="flex h-full flex-col gap-4 overflow-hidden">
+    <div className="flex h-full flex-col gap-4 lg:overflow-hidden">
       <div className="flex shrink-0 flex-wrap items-end justify-between gap-4 [&>div:first-child]:mb-0">
         <PageHeader
           title={greeting}
           description="Overview of your assets and upcoming services."
           breadcrumbs={[{ label: "Stowage", href: "/dashboard" }]}
         />
-        <QuickActions />
+        <div className="hidden lg:block">
+          <QuickActions />
+        </div>
       </div>
 
-      {overview ? (
-        <div className="flex min-h-0 flex-1 flex-col gap-4">
-          <div className="shrink-0">
-            <DashboardStatsBar
-              totalAssets={overview.totalAssets}
-              statusCounts={overview.statusCounts}
-            />
-          </div>
+      <div className="shrink-0">
+        <DashboardStatsBar
+          totalAssets={overview.totalAssets}
+          statusCounts={overview.statusCounts}
+        />
+      </div>
 
-          <div className="grid min-h-0 flex-1 gap-4 lg:grid-cols-2 lg:grid-rows-2">
-            <RecentAssetsCard
-              items={overview.recentAssets}
-              dateFormat={overview.dateFormat}
-            />
-            <UpcomingServicesWidget
-              items={overview.upcomingServices}
-              overdueCount={overview.overdueServiceCount}
-              serviceSchedulingEnabled={overview.serviceSchedulingEnabled}
-              dateFormat={overview.dateFormat}
-            />
-            <CategoryBreakdown items={overview.categoryBreakdown} />
-            <LocationBreakdown items={overview.locationBreakdown} />
-          </div>
+      {isDesktop ? (
+        <div className="grid min-h-0 flex-1 gap-4 grid-cols-2 grid-rows-2">
+          {recent}
+          {upcoming}
+          {categoryBreakdown}
+          {locationBreakdown}
         </div>
       ) : (
-        <div className="rounded-xl border border-border/70 bg-card p-8 text-center text-sm text-muted-foreground">
-          Loading dashboard...
+        <div
+          className="flex flex-col gap-4"
+          data-testid="dashboard-mobile-feed"
+        >
+          {upcoming}
+          {recent}
+          <QuickActions />
+          <MobileCollapsibleBlock title="By category">
+            {categoryBreakdown}
+          </MobileCollapsibleBlock>
+          <MobileCollapsibleBlock title="By location">
+            {locationBreakdown}
+          </MobileCollapsibleBlock>
         </div>
       )}
     </div>
   );
 }
+
+function MobileCollapsibleBlock({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="rounded-xl border border-border/70 bg-card shadow-sm"
+      data-testid={`dashboard-collapsible-${title.toLowerCase().replace(/\s+/g, "-")}`}
+    >
+      <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between px-4 py-3 text-left">
+        <span className="text-sm font-semibold">{title}</span>
+        <ChevronDown
+          className={`h-4 w-4 text-muted-foreground transition-transform ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t border-border/60">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/src/app/(app)/scan/page.tsx b/src/app/(app)/scan/page.tsx
new file mode 100644
index 0000000..3d0849b
--- /dev/null
+++ b/src/app/(app)/scan/page.tsx
@@ -0,0 +1,5 @@
+import { ScanPageClient } from "@/components/scan/scan-page-client";
+
+export default function ScanPage() {
+  return <ScanPageClient />;
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 731fd7a..1e2037b 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 2af573e..f20f45f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,6 +26,8 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-scan: var(--scan);
+  --color-scan-foreground: var(--scan-foreground);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -80,6 +82,8 @@
   --sidebar-accent-foreground: #1c1917;
   --sidebar-border: #e7e5e4;
   --sidebar-ring: #c2410c;
+  --scan: #c2410c;
+  --scan-foreground: #ffffff;
 }
 
 .dark {
@@ -114,6 +118,8 @@
   --sidebar-accent-foreground: #fafaf9;
   --sidebar-border: #44403c;
   --sidebar-ring: #ea580c;
+  --scan: #ea580c;
+  --scan-foreground: #ffffff;
 }
 
 @layer base {
@@ -124,3 +130,28 @@
     @apply bg-background text-foreground;
   }
 }
+
+@keyframes scan-detected {
+  0% {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+  25% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scan-detected {
+  animation: scan-detected 220ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scan-detected {
+    animation: none;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 42f1361..d83059e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { PocketBaseClientProvider } from "@/app/PocketBaseClientProvider";
 import { ThemeProvider } from "@/components/theme-provider";
@@ -19,6 +19,13 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "Stowage",
   description: "Asset management for small teams",
+  manifest: "/manifest.webmanifest",
+  appleWebApp: {
+    capable: true,
+    title: "Stowage",
+    statusBarStyle: "default",
+    startupImage: ["/images/web/apple-touch-icon.png"],
+  },
   icons: {
     icon: [
       { url: "/images/web/favicon.ico", sizes: "any" },
@@ -34,10 +41,37 @@ export const metadata: Metadata = {
       },
     ],
     shortcut: "/images/web/favicon.ico",
-    apple: "/images/web/apple-touch-icon.png",
+    apple: [
+      {
+        url: "/images/web/apple-touch-icon.png",
+        sizes: "180x180",
+        type: "image/png",
+      },
+    ],
+    other: [
+      {
+        rel: "apple-touch-icon-precomposed",
+        url: "/images/web/apple-touch-icon.png",
+      },
+      {
+        rel: "mask-icon",
+        url: "/images/web/safari-pinned-tab.svg",
+        color: "#c2410c",
+      },
+    ],
   },
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#c2410c" },
+    { media: "(prefers-color-scheme: dark)", color: "#ea580c" },
+  ],
+};
+
 export default async function RootLayout({
   children,
 }: Readonly<{
diff --git a/src/components/assets/asset-actions-sheet.tsx b/src/components/assets/asset-actions-sheet.tsx
new file mode 100644
index 0000000..c6db613
--- /dev/null
+++ b/src/components/assets/asset-actions-sheet.tsx
@@ -0,0 +1,732 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  ArrowLeft,
+  Camera,
+  ChevronRight,
+  Eye,
+  MapPin,
+  StickyNote,
+  Wrench,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+import { StatusBadge } from "@/components/assets/status-badge";
+import {
+  ASSET_STATUS_LABELS,
+  ASSET_STATUS_OPTIONS,
+  type AssetStatus,
+} from "@/components/assets/types";
+import { useCurrentUser } from "@/hooks/use-current-user";
+import {
+  updateAsset,
+  updateAssetStatus,
+  type AssetDetail,
+} from "@/lib/api/assets";
+import { uploadAttachment } from "@/lib/api/attachments";
+import { listLocations, type Location } from "@/lib/api/locations";
+import {
+  createServiceRecord,
+  type ServiceRecordValue,
+} from "@/lib/api/service-records";
+import { listServiceProviderOptions } from "@/lib/api/service-providers";
+import { cn } from "@/lib/utils";
+
+type View = "grid" | "status" | "move" | "note" | "service";
+
+export type AssetActionsSheetProps = {
+  open: boolean;
+  asset: AssetDetail | null;
+  onOpenChange: (open: boolean) => void;
+  onAssetUpdated?: (asset: AssetDetail) => void;
+  dismissLabel?: string;
+  /** Test-id prefix so we can reuse the same component from scan vs list contexts. */
+  testIdPrefix?: string;
+};
+
+export function AssetActionsSheet({
+  open,
+  asset,
+  onOpenChange,
+  onAssetUpdated,
+  dismissLabel = "Dismiss ↓",
+  testIdPrefix = "scan",
+}: AssetActionsSheetProps) {
+  const [view, setView] = useState<View>("grid");
+  // Reset back to the grid view whenever the sheet opens or the asset id
+  // changes. Using the "previous value" render-time reset pattern (React docs:
+  // "Adjusting state based on props") instead of a useEffect, which triggers
+  // the react-hooks/set-state-in-effect rule and causes an extra render.
+  const resetKey = open && asset ? asset.id : null;
+  const [lastResetKey, setLastResetKey] = useState<string | null>(null);
+  if (resetKey !== lastResetKey) {
+    setLastResetKey(resetKey);
+    if (view !== "grid") setView("grid");
+  }
+
+  if (!asset) return null;
+
+  const title = view === "grid" ? asset.name : viewTitle(view);
+  const description = view === "grid" ? asset.assetTag : undefined;
+
+  return (
+    <MobileActionSheet
+      open={open}
+      onOpenChange={(next) => (next ? null : onOpenChange(false))}
+      title={title}
+      description={description}
+      hideHeader={view !== "grid"}
+    >
+      {view === "grid" ? (
+        <>
+          <ActionGrid
+            asset={asset}
+            onViewChange={setView}
+            testIdPrefix={testIdPrefix}
+          />
+          <button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            className="mt-1 w-full rounded-md px-3 py-2 text-center text-xs text-muted-foreground hover:bg-accent"
+            data-testid={`${testIdPrefix}-result-dismiss`}
+          >
+            {dismissLabel}
+          </button>
+        </>
+      ) : (
+        <NestedView
+          view={view}
+          asset={asset}
+          onBack={() => setView("grid")}
+          onAssetUpdated={(updated) => onAssetUpdated?.(updated)}
+          testIdPrefix={testIdPrefix}
+        />
+      )}
+    </MobileActionSheet>
+  );
+}
+
+function viewTitle(view: View): string {
+  switch (view) {
+    case "status":
+      return "Change status";
+    case "move":
+      return "Move to location";
+    case "note":
+      return "Add a note";
+    case "service":
+      return "Log service";
+    default:
+      return "";
+  }
+}
+
+function ActionGrid({
+  asset,
+  onViewChange,
+  testIdPrefix,
+}: {
+  asset: AssetDetail;
+  onViewChange: (view: View) => void;
+  testIdPrefix: string;
+}) {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const queryClient = useQueryClient();
+
+  const photoMutation = useMutation({
+    mutationFn: (file: File) => uploadAttachment(asset.id, file),
+    onSuccess: () => {
+      toast.success("Photo uploaded");
+      void queryClient.invalidateQueries({
+        queryKey: ["attachments", "list", asset.id],
+      });
+    },
+    onError: () => {
+      toast.error("Couldn't upload the photo. Try again from the asset page.");
+    },
+  });
+
+  return (
+    <div className="flex flex-col gap-3">
+      <header
+        className="flex items-center gap-3"
+        data-testid={`${testIdPrefix}-result-asset`}
+        data-asset-id={asset.id}
+      >
+        <StatusBadge status={asset.status} />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-base font-semibold">{asset.name}</p>
+          <p className="truncate text-xs text-muted-foreground">
+            {asset.assetTag}
+          </p>
+        </div>
+      </header>
+      <div
+        className="grid grid-cols-3 gap-2"
+        data-testid={`${testIdPrefix}-result-actions`}
+      >
+        <ActionTile
+          label="View"
+          icon={Eye}
+          testId={`${testIdPrefix}-action-view`}
+          asChild
+        >
+          <Link
+            href={`/assets/${asset.id}`}
+            data-testid={`${testIdPrefix}-result-view`}
+          >
+            <Eye className="h-5 w-5" aria-hidden="true" />
+            <span>View</span>
+          </Link>
+        </ActionTile>
+        <ActionTile
+          label="Status"
+          icon={ChevronRight}
+          testId={`${testIdPrefix}-action-status`}
+          onClick={() => onViewChange("status")}
+        />
+        <ActionTile
+          label="Move"
+          icon={MapPin}
+          testId={`${testIdPrefix}-action-move`}
+          onClick={() => onViewChange("move")}
+        />
+        <ActionTile
+          label="Photo"
+          icon={Camera}
+          testId={`${testIdPrefix}-action-photo`}
+          onClick={() => fileInputRef.current?.click()}
+          busy={photoMutation.isPending}
+        />
+        <ActionTile
+          label="Note"
+          icon={StickyNote}
+          testId={`${testIdPrefix}-action-note`}
+          onClick={() => onViewChange("note")}
+        />
+        <ActionTile
+          label="Service"
+          icon={Wrench}
+          testId={`${testIdPrefix}-action-service`}
+          onClick={() => onViewChange("service")}
+        />
+      </div>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        capture="environment"
+        className="hidden"
+        data-testid={`${testIdPrefix}-photo-input`}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file) {
+            photoMutation.mutate(file);
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+function ActionTile({
+  label,
+  icon: Icon,
+  testId,
+  onClick,
+  busy,
+  asChild,
+  children,
+}: {
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  testId: string;
+  onClick?: () => void;
+  busy?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+}) {
+  const className = cn(
+    "flex h-18 flex-col items-center justify-center gap-1 rounded-lg border border-border bg-card text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50",
+    "min-h-[72px] px-2 text-center",
+    busy && "opacity-70",
+  );
+  if (asChild && children) {
+    return (
+      <div className={className} data-testid={testId}>
+        {children}
+      </div>
+    );
+  }
+  return (
+    <button
+      type="button"
+      className={cn(className, "cursor-pointer")}
+      data-testid={testId}
+      onClick={onClick}
+      disabled={busy}
+    >
+      <Icon className="h-5 w-5" aria-hidden="true" />
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function NestedView({
+  view,
+  asset,
+  onBack,
+  onAssetUpdated,
+  testIdPrefix,
+}: {
+  view: Exclude<View, "grid">;
+  asset: AssetDetail;
+  onBack: () => void;
+  onAssetUpdated: (asset: AssetDetail) => void;
+  testIdPrefix: string;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="cursor-pointer"
+          data-testid={`${testIdPrefix}-nested-back`}
+          onClick={onBack}
+        >
+          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          Back
+        </Button>
+        <div className="text-sm font-medium">{viewTitle(view)}</div>
+      </div>
+      {view === "status" ? (
+        <StatusView
+          asset={asset}
+          onDone={(updated) => {
+            onAssetUpdated(updated);
+            onBack();
+          }}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : null}
+      {view === "move" ? (
+        <MoveView
+          asset={asset}
+          onDone={(updated) => {
+            onAssetUpdated(updated);
+            onBack();
+          }}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : null}
+      {view === "note" ? (
+        <NoteView
+          asset={asset}
+          onDone={(updated) => {
+            onAssetUpdated(updated);
+            onBack();
+          }}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : null}
+      {view === "service" ? (
+        <LogServiceView
+          asset={asset}
+          onDone={onBack}
+          testIdPrefix={testIdPrefix}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function StatusView({
+  asset,
+  onDone,
+  testIdPrefix,
+}: {
+  asset: AssetDetail;
+  onDone: (updated: AssetDetail) => void;
+  testIdPrefix: string;
+}) {
+  const queryClient = useQueryClient();
+  const [pendingStatus, setPendingStatus] = useState<AssetStatus | null>(null);
+
+  const mutation = useMutation({
+    mutationFn: async (status: AssetStatus) => {
+      await updateAssetStatus(asset.id, status);
+      return status;
+    },
+    onMutate: (status) => {
+      setPendingStatus(status);
+    },
+    onSuccess: (status) => {
+      toast.success("Status updated");
+      onDone({ ...asset, status });
+      void queryClient.invalidateQueries({
+        queryKey: ["assets", "detail", asset.id],
+      });
+      void queryClient.invalidateQueries({ queryKey: ["assets", "list"] });
+    },
+    onError: () => {
+      toast.error("Couldn't change status. Try again.");
+      setPendingStatus(null);
+    },
+  });
+
+  return (
+    <ul
+      className="flex flex-col gap-1"
+      data-testid={`${testIdPrefix}-status-list`}
+    >
+      {ASSET_STATUS_OPTIONS.map((option) => {
+        const active = asset.status === option;
+        const busy = pendingStatus === option && mutation.isPending;
+        return (
+          <li key={option}>
+            <button
+              type="button"
+              disabled={active || mutation.isPending}
+              data-testid={`${testIdPrefix}-status-option-${option}`}
+              className={cn(
+                "flex h-11 w-full items-center justify-between rounded-md border border-border px-3 text-sm",
+                active
+                  ? "border-primary/50 bg-primary/5 font-medium"
+                  : "bg-card hover:bg-accent",
+                busy && "opacity-70",
+              )}
+              onClick={() => mutation.mutate(option)}
+            >
+              <span>{ASSET_STATUS_LABELS[option]}</span>
+              {active ? (
+                <span className="text-xs text-muted-foreground">Current</span>
+              ) : null}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function MoveView({
+  asset,
+  onDone,
+  testIdPrefix,
+}: {
+  asset: AssetDetail;
+  onDone: (updated: AssetDetail) => void;
+  testIdPrefix: string;
+}) {
+  const queryClient = useQueryClient();
+  const [query, setQuery] = useState("");
+  const { data: locations = [], isPending } = useQuery({
+    queryKey: ["locations", "list"],
+    queryFn: listLocations,
+  });
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return locations;
+    return locations.filter(
+      (loc) =>
+        loc.name.toLowerCase().includes(needle) ||
+        loc.path.toLowerCase().includes(needle),
+    );
+  }, [locations, query]);
+
+  const mutation = useMutation({
+    mutationFn: async (target: Location | null) => {
+      await updateAsset(asset.id, {
+        locationId: target?.id ?? null,
+      });
+      return target;
+    },
+    onSuccess: (target) => {
+      toast.success(target ? `Moved to ${target.path}` : "Cleared location");
+      onDone({ ...asset, locationId: target?.id ?? null });
+      void queryClient.invalidateQueries({
+        queryKey: ["assets", "detail", asset.id],
+      });
+      void queryClient.invalidateQueries({ queryKey: ["assets", "list"] });
+    },
+    onError: () => {
+      toast.error("Couldn't move asset. Try again.");
+    },
+  });
+
+  return (
+    <div
+      className="flex flex-col gap-2"
+      data-testid={`${testIdPrefix}-move-view`}
+    >
+      <Input
+        placeholder="Search locations…"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        data-testid={`${testIdPrefix}-move-search`}
+      />
+      {isPending ? (
+        <p className="text-sm text-muted-foreground">Loading locations…</p>
+      ) : null}
+      <ul className="max-h-64 overflow-auto rounded-md border border-border">
+        <li>
+          <button
+            type="button"
+            disabled={!asset.locationId || mutation.isPending}
+            data-testid={`${testIdPrefix}-move-option-none`}
+            className={cn(
+              "flex w-full items-center justify-between border-b border-border px-3 py-3 text-left text-sm disabled:opacity-60",
+              !asset.locationId
+                ? "bg-primary/5 font-medium"
+                : "bg-card hover:bg-accent",
+            )}
+            onClick={() => mutation.mutate(null)}
+          >
+            <span>No location</span>
+            {!asset.locationId ? (
+              <span className="text-xs text-muted-foreground">Current</span>
+            ) : null}
+          </button>
+        </li>
+        {filtered.map((loc) => {
+          const active = asset.locationId === loc.id;
+          return (
+            <li key={loc.id}>
+              <button
+                type="button"
+                disabled={active || mutation.isPending}
+                data-testid={`${testIdPrefix}-move-option-${loc.id}`}
+                className={cn(
+                  "flex w-full flex-col items-start border-b border-border px-3 py-3 text-left text-sm last:border-b-0",
+                  active
+                    ? "bg-primary/5 font-medium"
+                    : "bg-card hover:bg-accent",
+                )}
+                onClick={() => mutation.mutate(loc)}
+              >
+                <span>{loc.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  {loc.path}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+        {filtered.length === 0 && !isPending ? (
+          <li className="px-3 py-4 text-center text-sm text-muted-foreground">
+            No matches
+          </li>
+        ) : null}
+      </ul>
+    </div>
+  );
+}
+
+function NoteView({
+  asset,
+  onDone,
+  testIdPrefix,
+}: {
+  asset: AssetDetail;
+  onDone: (updated: AssetDetail) => void;
+  testIdPrefix: string;
+}) {
+  const queryClient = useQueryClient();
+  const { data: currentUser } = useCurrentUser();
+  const [value, setValue] = useState("");
+
+  const mutation = useMutation({
+    mutationFn: async (note: string) => {
+      const prefix = buildNotePrefix(currentUser?.name);
+      const line = `${prefix} ${note.trim()}`;
+      const nextNotes = asset.notes ? `${asset.notes}\n${line}` : line;
+      await updateAsset(asset.id, { notes: nextNotes });
+      return nextNotes;
+    },
+    onSuccess: (nextNotes) => {
+      toast.success("Note saved");
+      onDone({ ...asset, notes: nextNotes });
+      void queryClient.invalidateQueries({
+        queryKey: ["assets", "detail", asset.id],
+      });
+    },
+    onError: () => {
+      toast.error("Couldn't save note. Try again.");
+    },
+  });
+
+  return (
+    <form
+      data-testid={`${testIdPrefix}-note-form`}
+      className="flex flex-col gap-2"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!value.trim()) return;
+        mutation.mutate(value);
+      }}
+    >
+      <Textarea
+        rows={4}
+        placeholder="Noticed something — a scratch, missing part, calibration due…"
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        data-testid={`${testIdPrefix}-note-input`}
+      />
+      <Button
+        type="submit"
+        className="cursor-pointer"
+        disabled={!value.trim() || mutation.isPending}
+        data-testid={`${testIdPrefix}-note-submit`}
+      >
+        {mutation.isPending ? "Saving…" : "Save note"}
+      </Button>
+    </form>
+  );
+}
+
+function LogServiceView({
+  asset,
+  onDone,
+  testIdPrefix,
+}: {
+  asset: AssetDetail;
+  onDone: () => void;
+  testIdPrefix: string;
+}) {
+  const queryClient = useQueryClient();
+  const [serviceDate, setServiceDate] = useState(() => todayIso());
+  const [description, setDescription] = useState("");
+  const [cost, setCost] = useState("");
+  const [providerId, setProviderId] = useState<string | "">("");
+
+  const providersQuery = useQuery({
+    queryKey: ["service-providers", "options"],
+    queryFn: listServiceProviderOptions,
+  });
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const input = {
+        assetId: asset.id,
+        serviceDate,
+        description: description.trim(),
+        cost: cost.trim() === "" ? null : Number(cost),
+        providerId: providerId === "" ? null : providerId,
+        values: {} as Record<string, ServiceRecordValue>,
+      };
+      return createServiceRecord(input);
+    },
+    onSuccess: () => {
+      toast.success("Service logged");
+      onDone();
+      void queryClient.invalidateQueries({
+        queryKey: ["service-records", "asset", asset.id],
+      });
+      void queryClient.invalidateQueries({ queryKey: ["service-schedules"] });
+      void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+    },
+    onError: () => {
+      toast.error(
+        "Couldn't log service. Open the asset page if extra fields are required.",
+      );
+    },
+  });
+
+  return (
+    <form
+      data-testid={`${testIdPrefix}-service-form`}
+      className="flex flex-col gap-3"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (!description.trim()) return;
+        mutation.mutate();
+      }}
+    >
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="text-xs text-muted-foreground">Service date</span>
+        <Input
+          type="date"
+          value={serviceDate}
+          onChange={(event) => setServiceDate(event.target.value)}
+          required
+          data-testid={`${testIdPrefix}-service-date`}
+        />
+      </label>
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="text-xs text-muted-foreground">What was done</span>
+        <Textarea
+          rows={3}
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="Replaced belt, topped up oil, …"
+          required
+          data-testid={`${testIdPrefix}-service-description`}
+        />
+      </label>
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="text-xs text-muted-foreground">
+          Cost <span className="opacity-60">(optional)</span>
+        </span>
+        <Input
+          type="number"
+          inputMode="decimal"
+          step="0.01"
+          min="0"
+          value={cost}
+          onChange={(event) => setCost(event.target.value)}
+          data-testid={`${testIdPrefix}-service-cost`}
+        />
+      </label>
+      <label className="flex flex-col gap-1 text-sm">
+        <span className="text-xs text-muted-foreground">
+          Provider <span className="opacity-60">(optional)</span>
+        </span>
+        <select
+          value={providerId}
+          onChange={(event) => setProviderId(event.target.value)}
+          data-testid={`${testIdPrefix}-service-provider`}
+          className="h-10 rounded-md border border-border bg-background px-3 text-sm"
+        >
+          <option value="">No provider</option>
+          {providersQuery.data?.map((provider) => (
+            <option key={provider.id} value={provider.id}>
+              {provider.name}
+            </option>
+          ))}
+        </select>
+      </label>
+      <Button
+        type="submit"
+        className="cursor-pointer"
+        disabled={!description.trim() || mutation.isPending}
+        data-testid={`${testIdPrefix}-service-submit`}
+      >
+        {mutation.isPending ? "Saving…" : "Log service"}
+      </Button>
+    </form>
+  );
+}
+
+function todayIso(): string {
+  const now = new Date();
+  const yyyy = now.getFullYear();
+  const mm = String(now.getMonth() + 1).padStart(2, "0");
+  const dd = String(now.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+function buildNotePrefix(userName: string | null | undefined): string {
+  const datePart = todayIso();
+  const name = userName?.trim() || "Someone";
+  return `[${datePart}] ${name}:`;
+}
diff --git a/src/components/assets/asset-card-list.tsx b/src/components/assets/asset-card-list.tsx
new file mode 100644
index 0000000..bdecc01
--- /dev/null
+++ b/src/components/assets/asset-card-list.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { MapPin, MoreHorizontal, Package } from "lucide-react";
+import { AssetActionsSheet } from "@/components/assets/asset-actions-sheet";
+import { StatusBadge } from "@/components/assets/status-badge";
+import type { AssetListItem } from "@/components/assets/types";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getAsset, type AssetDetail } from "@/lib/api/assets";
+import { cn } from "@/lib/utils";
+
+function rowToDetailPlaceholder(row: AssetListItem): AssetDetail {
+  const tags =
+    row.tagIds.length === row.tagNames.length
+      ? row.tagIds.map((id, index) => ({
+          id,
+          name: row.tagNames[index] ?? "",
+          color: "",
+        }))
+      : [];
+
+  return {
+    id: row.id,
+    name: row.name,
+    assetTag: row.assetTag,
+    status: row.status,
+    categoryId: row.categoryId,
+    locationId: row.locationId,
+    serviceGroupId: row.serviceGroupId,
+    notes: row.notes,
+    customFieldValues: {},
+    createdBy: "",
+    updatedBy: "",
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+    category: null,
+    location: row.locationPath
+      ? {
+          id: row.locationId ?? "",
+          name: row.locationPath,
+          parentId: null,
+          path: row.locationPath,
+        }
+      : null,
+    serviceGroup: null,
+    tags,
+  };
+}
+
+export function AssetCardList({
+  rows,
+  loading,
+}: {
+  rows: AssetListItem[];
+  loading: boolean;
+}) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const activeRow = useMemo(
+    () => (activeId ? (rows.find((row) => row.id === activeId) ?? null) : null),
+    [rows, activeId],
+  );
+
+  const detailQuery = useQuery<AssetDetail | null>({
+    queryKey: ["assets", "detail", activeId],
+    queryFn: () => (activeId ? getAsset(activeId) : Promise.resolve(null)),
+    enabled: !!activeId,
+    // Seed the sheet from the list row so it opens instantly instead of
+    // showing a blank closed state until the detail fetch completes. The
+    // background refetch fills in fields the list row doesn't carry.
+    placeholderData: activeRow ? rowToDetailPlaceholder(activeRow) : undefined,
+  });
+
+  if (loading && rows.length === 0) {
+    return (
+      <ul className="flex flex-col gap-2" data-testid="asset-card-list-loading">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <li
+            key={`skeleton-${i}`}
+            className="rounded-xl border border-border bg-card p-4"
+          >
+            <Skeleton className="h-5 w-2/3" />
+            <Skeleton className="mt-2 h-4 w-1/3" />
+            <Skeleton className="mt-3 h-4 w-1/2" />
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <EmptyState
+        icon={Package}
+        title="No assets match these filters"
+        description="Adjust the filters or reset them to see results."
+      />
+    );
+  }
+
+  return (
+    <>
+      <ul className="flex flex-col gap-2" data-testid="asset-card-list">
+        {rows.map((row) => (
+          <li key={row.id}>
+            <AssetCard row={row} onMore={() => setActiveId(row.id)} />
+          </li>
+        ))}
+      </ul>
+      <AssetActionsSheet
+        open={activeId !== null}
+        asset={detailQuery.data ?? null}
+        onOpenChange={(open) => {
+          if (!open) setActiveId(null);
+        }}
+        onAssetUpdated={() => {
+          // list invalidates via the nested mutations' query invalidation
+        }}
+        dismissLabel="Close ↓"
+        testIdPrefix="asset"
+      />
+    </>
+  );
+}
+
+function AssetCard({
+  row,
+  onMore,
+}: {
+  row: AssetListItem;
+  onMore: () => void;
+}) {
+  const visibleTags = row.tagNames.slice(0, 3);
+  const extraTagCount = Math.max(0, row.tagNames.length - visibleTags.length);
+
+  return (
+    <div
+      className="relative rounded-xl border border-border bg-card p-4 shadow-sm transition-colors hover:bg-accent/40"
+      data-testid={`asset-card-${row.id}`}
+    >
+      <div className="relative flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {row.categoryColor ? (
+              <span
+                aria-hidden="true"
+                className="inline-block h-2.5 w-2.5 shrink-0 rounded-full border border-black/10"
+                style={{ backgroundColor: row.categoryColor }}
+              />
+            ) : null}
+            <Link
+              href={`/assets/${row.id}`}
+              className="truncate text-sm font-semibold hover:text-primary"
+            >
+              {row.name}
+            </Link>
+          </div>
+          <p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+            {row.assetTag}
+          </p>
+          {row.locationPath ? (
+            <p className="mt-2 flex items-center gap-1 truncate text-xs text-muted-foreground">
+              <MapPin className="h-3 w-3" aria-hidden="true" />
+              <span className="truncate">{row.locationPath}</span>
+            </p>
+          ) : null}
+          {visibleTags.length > 0 ? (
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {visibleTags.map((name) => (
+                <span
+                  key={name}
+                  className={cn(
+                    "inline-flex items-center rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[11px] font-medium text-muted-foreground",
+                  )}
+                >
+                  {name}
+                </span>
+              ))}
+              {extraTagCount > 0 ? (
+                <span className="inline-flex items-center rounded-full border border-border/60 bg-muted/40 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+                  +{extraTagCount}
+                </span>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+        <div className="relative flex shrink-0 flex-col items-end gap-2">
+          <StatusBadge status={row.status} />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label="Asset actions"
+            data-testid={`asset-card-kebab-${row.id}`}
+            className="relative -m-1 h-8 w-8 cursor-pointer"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onMore();
+            }}
+          >
+            <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/assets/asset-detail.tsx b/src/components/assets/asset-detail.tsx
index a4ec092..7629687 100644
--- a/src/components/assets/asset-detail.tsx
+++ b/src/components/assets/asset-detail.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { MapPin, Pencil, Printer, Trash2 } from "lucide-react";
+import { MapPin, MoreHorizontal, Pencil, Printer, Trash2 } from "lucide-react";
 import type { FieldDefinition } from "@/components/fields/types";
 import { DynamicFieldDisplay } from "@/components/fields/dynamic-field-display";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
@@ -17,6 +17,13 @@ import {
 } from "@/components/assets/types";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Select,
   SelectContent,
@@ -62,13 +69,16 @@ export function AssetDetail({
     <div className="space-y-4">
       {/* Hero profile card */}
       <section className="rounded-xl border border-border/70 bg-gradient-to-r from-orange-50/60 to-background shadow-sm dark:from-stone-900/40 dark:to-card">
-        <div className="flex flex-col gap-4 p-5 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex flex-col gap-4 p-4 sm:p-5 lg:flex-row lg:items-start lg:justify-between">
           <div className="space-y-2">
             <h2 className="text-2xl font-semibold tracking-tight">
               {asset.name}
             </h2>
             <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-              <Badge className="border border-border/70 bg-background/80 font-mono text-xs tracking-wide">
+              <Badge
+                className="border border-border/70 bg-background/80 font-mono text-xs tracking-wide"
+                data-testid="asset-tag"
+              >
                 {asset.assetTag}
               </Badge>
               <StatusBadge status={asset.status} />
@@ -104,7 +114,10 @@ export function AssetDetail({
               onValueChange={(value) => onStatusChange(value as AssetStatus)}
               disabled={updatingStatus}
             >
-              <SelectTrigger className="min-w-44" aria-label="Change status">
+              <SelectTrigger
+                className="min-w-44 flex-1 lg:flex-none"
+                aria-label="Change status"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -116,42 +129,91 @@ export function AssetDetail({
               </SelectContent>
             </Select>
 
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button asChild variant="outline" className="cursor-pointer">
-                  <Link href={`/assets/${asset.id}/edit`}>
-                    <Pencil className="h-4 w-4" />
-                    Edit
-                  </Link>
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Edit asset details</TooltipContent>
-            </Tooltip>
-
-            <Button asChild variant="outline" className="cursor-pointer">
-              <Link href={`/labels/print?assetId=${asset.id}`}>
-                <Printer className="h-4 w-4" />
-                Print label
-              </Link>
-            </Button>
-
-            {canDelete ? (
+            {/* Desktop: inline buttons */}
+            <div className="hidden flex-wrap items-center gap-2 lg:flex">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    className="cursor-pointer"
-                    onClick={() => setConfirmDeleteOpen(true)}
-                    disabled={deleting}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                    Delete
+                  <Button asChild variant="outline" className="cursor-pointer">
+                    <Link href={`/assets/${asset.id}/edit`}>
+                      <Pencil className="h-4 w-4" />
+                      Edit
+                    </Link>
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Permanently delete this asset</TooltipContent>
+                <TooltipContent>Edit asset details</TooltipContent>
               </Tooltip>
-            ) : null}
+
+              <Button asChild variant="outline" className="cursor-pointer">
+                <Link href={`/labels/print?assetId=${asset.id}`}>
+                  <Printer className="h-4 w-4" />
+                  Print label
+                </Link>
+              </Button>
+
+              {canDelete ? (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      className="cursor-pointer"
+                      onClick={() => setConfirmDeleteOpen(true)}
+                      disabled={deleting}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      Delete
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Permanently delete this asset</TooltipContent>
+                </Tooltip>
+              ) : null}
+            </div>
+
+            {/* Mobile: kebab menu */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  aria-label="Asset actions"
+                  data-testid="asset-detail-kebab"
+                  className="cursor-pointer lg:hidden"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem asChild>
+                  <Link href={`/assets/${asset.id}/edit`}>
+                    <Pencil className="h-4 w-4" />
+                    Edit
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={`/labels/print?assetId=${asset.id}`}>
+                    <Printer className="h-4 w-4" />
+                    Print label
+                  </Link>
+                </DropdownMenuItem>
+                {canDelete ? (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      data-testid="asset-detail-delete"
+                      disabled={deleting}
+                      onSelect={() => {
+                        setConfirmDeleteOpen(true);
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
       </section>
@@ -159,9 +221,12 @@ export function AssetDetail({
       <AssetServiceRecordsPanel assetId={asset.id} />
 
       {/* Tabbed content */}
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
+      <section className="rounded-xl border border-border/70 bg-background p-4 shadow-sm sm:p-5">
         <Tabs defaultValue="info">
-          <TabsList className="mb-4">
+          <TabsList
+            className="sticky top-14 z-10 mb-4 w-full justify-start overflow-x-auto bg-background/95 backdrop-blur lg:static lg:top-auto lg:w-auto"
+            data-testid="asset-detail-tabs"
+          >
             <TabsTrigger value="info">Details</TabsTrigger>
             <TabsTrigger value="attachments">Attachments</TabsTrigger>
           </TabsList>
diff --git a/src/components/assets/asset-filters-mobile.tsx b/src/components/assets/asset-filters-mobile.tsx
new file mode 100644
index 0000000..f429f67
--- /dev/null
+++ b/src/components/assets/asset-filters-mobile.tsx
@@ -0,0 +1,410 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Search, SlidersHorizontal, X } from "lucide-react";
+import {
+  ASSET_STATUS_LABELS,
+  ASSET_STATUS_OPTIONS,
+  type AssetFilterOptions,
+} from "@/components/assets/types";
+import type {
+  AssetSortBy,
+  AssetSortDirection,
+} from "@/components/assets/asset-table";
+import type { AssetFiltersState } from "@/components/assets/asset-filters";
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+function countActiveFilters(
+  filters: AssetFiltersState,
+  search: string,
+): number {
+  return (
+    (search.trim() ? 1 : 0) +
+    (filters.categoryId ? 1 : 0) +
+    (filters.status ? 1 : 0) +
+    (filters.locationId ? 1 : 0) +
+    filters.tagIds.length
+  );
+}
+
+export function AssetFiltersMobile({
+  options,
+  search,
+  filters,
+  sortBy,
+  sortDirection,
+  onSearchChange,
+  onFiltersChange,
+  onSortChange,
+  onReset,
+}: {
+  options: AssetFilterOptions;
+  search: string;
+  filters: AssetFiltersState;
+  sortBy: AssetSortBy;
+  sortDirection: AssetSortDirection;
+  onSearchChange: (value: string) => void;
+  onFiltersChange: (next: AssetFiltersState) => void;
+  onSortChange: (sortBy: AssetSortBy, direction: AssetSortDirection) => void;
+  onReset: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const activeCount = countActiveFilters(filters, search);
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="asset-filters-mobile">
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(event) => onSearchChange(event.target.value)}
+            placeholder="Search assets"
+            className="pl-9"
+            aria-label="Search assets"
+            data-testid="asset-filters-mobile-search"
+          />
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setOpen(true)}
+          className="relative cursor-pointer gap-2"
+          data-testid="asset-filters-mobile-trigger"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+          Filters
+          {activeCount > 0 ? (
+            <Badge
+              className="ml-1 h-5 min-w-5 rounded-full bg-primary px-1 text-[11px] font-semibold text-primary-foreground"
+              data-testid="asset-filters-mobile-count"
+            >
+              {activeCount}
+            </Badge>
+          ) : null}
+        </Button>
+      </div>
+
+      <AssetFiltersSheet
+        open={open}
+        onOpenChange={setOpen}
+        options={options}
+        filters={filters}
+        sortBy={sortBy}
+        sortDirection={sortDirection}
+        onFiltersChange={onFiltersChange}
+        onSortChange={onSortChange}
+        onReset={() => {
+          onReset();
+          setOpen(false);
+        }}
+      />
+    </div>
+  );
+}
+
+function AssetFiltersSheet({
+  open,
+  onOpenChange,
+  options,
+  filters,
+  sortBy,
+  sortDirection,
+  onFiltersChange,
+  onSortChange,
+  onReset,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  options: AssetFilterOptions;
+  filters: AssetFiltersState;
+  sortBy: AssetSortBy;
+  sortDirection: AssetSortDirection;
+  onFiltersChange: (next: AssetFiltersState) => void;
+  onSortChange: (sortBy: AssetSortBy, direction: AssetSortDirection) => void;
+  onReset: () => void;
+}) {
+  return (
+    <MobileActionSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Filters"
+      description="Narrow down the asset list."
+    >
+      <div
+        className="flex max-h-[70svh] flex-col gap-4 overflow-auto"
+        data-testid="asset-filters-sheet"
+      >
+        <Section title="Sort by">
+          <SortRow
+            active={sortBy === "createdAt" && sortDirection === "desc"}
+            label="Recent"
+            onClick={() => onSortChange("createdAt", "desc")}
+            testId="asset-sort-recent"
+          />
+          <SortRow
+            active={sortBy === "name" && sortDirection === "asc"}
+            label="Name (A→Z)"
+            onClick={() => onSortChange("name", "asc")}
+            testId="asset-sort-name"
+          />
+          <SortRow
+            active={sortBy === "assetTag" && sortDirection === "asc"}
+            label="Asset tag"
+            onClick={() => onSortChange("assetTag", "asc")}
+            testId="asset-sort-tag"
+          />
+          <SortRow
+            active={sortBy === "status" && sortDirection === "asc"}
+            label="Status"
+            onClick={() => onSortChange("status", "asc")}
+            testId="asset-sort-status"
+          />
+        </Section>
+
+        <Section title="Status">
+          <OptionPill
+            active={filters.status === null}
+            label="All"
+            onClick={() => onFiltersChange({ ...filters, status: null })}
+            testId="asset-filter-status-all"
+          />
+          {ASSET_STATUS_OPTIONS.map((status) => (
+            <OptionPill
+              key={status}
+              active={filters.status === status}
+              label={ASSET_STATUS_LABELS[status]}
+              onClick={() => onFiltersChange({ ...filters, status })}
+              testId={`asset-filter-status-${status}`}
+            />
+          ))}
+        </Section>
+
+        {options.categories.length > 0 ? (
+          <Section title="Category">
+            <OptionPill
+              active={filters.categoryId === null}
+              label="All"
+              onClick={() => onFiltersChange({ ...filters, categoryId: null })}
+              testId="asset-filter-category-all"
+            />
+            {options.categories.map((category) => (
+              <OptionPill
+                key={category.id}
+                active={filters.categoryId === category.id}
+                label={category.name}
+                dotColor={category.color}
+                onClick={() =>
+                  onFiltersChange({ ...filters, categoryId: category.id })
+                }
+                testId={`asset-filter-category-${category.id}`}
+              />
+            ))}
+          </Section>
+        ) : null}
+
+        {options.locations.length > 0 ? (
+          <Section title="Location">
+            <LocationList
+              options={options}
+              selectedId={filters.locationId}
+              onChange={(locationId) =>
+                onFiltersChange({ ...filters, locationId })
+              }
+            />
+          </Section>
+        ) : null}
+
+        {options.tags.length > 0 ? (
+          <Section title="Tags">
+            {options.tags.map((tag) => {
+              const active = filters.tagIds.includes(tag.id);
+              return (
+                <OptionPill
+                  key={tag.id}
+                  active={active}
+                  label={tag.name}
+                  dotColor={tag.color}
+                  onClick={() =>
+                    onFiltersChange({
+                      ...filters,
+                      tagIds: active
+                        ? filters.tagIds.filter((id) => id !== tag.id)
+                        : [...filters.tagIds, tag.id],
+                    })
+                  }
+                  testId={`asset-filter-tag-${tag.id}`}
+                />
+              );
+            })}
+          </Section>
+        ) : null}
+      </div>
+
+      <div className="flex gap-2 pt-2">
+        <Button
+          type="button"
+          variant="outline"
+          className="flex-1 cursor-pointer"
+          onClick={onReset}
+          data-testid="asset-filters-mobile-reset"
+        >
+          <X className="h-4 w-4" />
+          Reset
+        </Button>
+        <Button
+          type="button"
+          className="flex-1 cursor-pointer"
+          onClick={() => onOpenChange(false)}
+          data-testid="asset-filters-mobile-apply"
+        >
+          Apply
+        </Button>
+      </div>
+    </MobileActionSheet>
+  );
+}
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-2">
+      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {title}
+      </h3>
+      <div className="flex flex-wrap gap-2">{children}</div>
+    </div>
+  );
+}
+
+function OptionPill({
+  active,
+  label,
+  dotColor,
+  onClick,
+  testId,
+}: {
+  active: boolean;
+  label: string;
+  dotColor?: string;
+  onClick: () => void;
+  testId: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-testid={testId}
+      aria-pressed={active}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
+        active
+          ? "border-primary bg-primary/10 text-primary"
+          : "border-border bg-card text-muted-foreground hover:bg-accent",
+      )}
+    >
+      {dotColor ? (
+        <span
+          className="inline-block h-2 w-2 shrink-0 rounded-full border border-black/10"
+          style={{ backgroundColor: dotColor }}
+          aria-hidden="true"
+        />
+      ) : null}
+      {label}
+      {active ? <Check className="h-3 w-3" aria-hidden="true" /> : null}
+    </button>
+  );
+}
+
+function SortRow({
+  active,
+  label,
+  onClick,
+  testId,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  testId: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-testid={testId}
+      aria-pressed={active}
+      className={cn(
+        "rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
+        active
+          ? "border-primary bg-primary/10 text-primary"
+          : "border-border bg-card text-muted-foreground hover:bg-accent",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
+function LocationList({
+  options,
+  selectedId,
+  onChange,
+}: {
+  options: AssetFilterOptions;
+  selectedId: string | null;
+  onChange: (id: string | null) => void;
+}) {
+  return (
+    <ul
+      className="w-full max-h-56 overflow-auto rounded-md border border-border"
+      data-testid="asset-filter-location-list"
+    >
+      <li>
+        <button
+          type="button"
+          onClick={() => onChange(null)}
+          data-testid="asset-filter-location-all"
+          aria-pressed={selectedId === null}
+          className={cn(
+            "flex w-full items-center justify-between border-b border-border px-3 py-2 text-left text-sm last:border-b-0",
+            selectedId === null
+              ? "bg-primary/5 font-medium text-primary"
+              : "hover:bg-accent",
+          )}
+        >
+          All locations
+        </button>
+      </li>
+      {options.locations.map((loc) => {
+        const active = selectedId === loc.id;
+        return (
+          <li key={loc.id}>
+            <button
+              type="button"
+              onClick={() => onChange(loc.id)}
+              data-testid={`asset-filter-location-${loc.id}`}
+              aria-pressed={active}
+              className={cn(
+                "flex w-full flex-col border-b border-border px-3 py-2 text-left last:border-b-0",
+                active ? "bg-primary/5 text-primary" : "hover:bg-accent",
+              )}
+            >
+              <span className="text-sm font-medium">{loc.name}</span>
+              <span className="text-xs text-muted-foreground">{loc.path}</span>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/components/assets/assets-page-client.tsx b/src/components/assets/assets-page-client.tsx
index 91296ed..bbf7f65 100644
--- a/src/components/assets/assets-page-client.tsx
+++ b/src/components/assets/assets-page-client.tsx
@@ -2,13 +2,22 @@
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { startTransition, useDeferredValue, useMemo, useState } from "react";
+import {
+  startTransition,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Package, Plus, Printer, X } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import {
   AssetFilters,
   type AssetFiltersState,
 } from "@/components/assets/asset-filters";
+import { AssetFiltersMobile } from "@/components/assets/asset-filters-mobile";
+import { AssetCardList } from "@/components/assets/asset-card-list";
 import {
   AssetTable,
   type AssetSortBy,
@@ -20,6 +29,7 @@ import type {
 } from "@/components/assets/types";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/ui/empty-state";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import {
   getAssetFilterOptions,
   listAssets,
@@ -43,37 +53,64 @@ function buildFiltersKey(searchParams: URLSearchParams) {
   ].join("|");
 }
 
-function AssetsPageClientContent({
-  initialFilters,
-}: {
-  initialFilters: AssetFiltersState;
-}) {
+export function AssetsPageClient() {
+  const searchParams = useSearchParams();
   const router = useRouter();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
 
   const [searchInput, setSearchInput] = useState("");
   const deferredSearch = useDeferredValue(searchInput);
 
-  const [filters, setFilters] = useState<AssetFiltersState>(initialFilters);
+  const [filters, setFilters] = useState<AssetFiltersState>(() =>
+    getInitialFilters(searchParams),
+  );
   const [sortBy, setSortBy] = useState<AssetSortBy>("createdAt");
   const [sortDirection, setSortDirection] =
     useState<AssetSortDirection>("desc");
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
+  // Sync URL → state when the filter-defining params actually change (e.g.,
+  // clicking a category pill on the dashboard). Previously the wrapper used
+  // `key={filtersKey}` to remount the entire subtree, which blew away the
+  // table, in-flight queries, selection, and sort — a visible jank when the
+  // user navigated between pre-filtered links.
+  const lastFiltersKeyRef = useRef(buildFiltersKey(searchParams));
+  useEffect(() => {
+    const nextKey = buildFiltersKey(searchParams);
+    if (nextKey === lastFiltersKeyRef.current) return;
+    lastFiltersKeyRef.current = nextKey;
+    startTransition(() => {
+      setFilters(getInitialFilters(searchParams));
+      setSelectedIds(new Set());
+    });
+  }, [searchParams]);
+
   const filterOptionsQuery = useQuery({
     queryKey: ["assets", "filter-options"],
     queryFn: getAssetFilterOptions,
     staleTime: 60_000,
   });
 
-  const listParams: ListAssetsParams = {
-    categoryId: filters.categoryId ?? undefined,
-    status: filters.status ?? undefined,
-    locationId: filters.locationId ?? undefined,
-    tagIds: filters.tagIds,
-    search: deferredSearch.trim() ? deferredSearch.trim() : undefined,
-    sortBy,
-    sortDirection,
-  };
+  const listParams: ListAssetsParams = useMemo(
+    () => ({
+      categoryId: filters.categoryId ?? undefined,
+      status: filters.status ?? undefined,
+      locationId: filters.locationId ?? undefined,
+      tagIds: filters.tagIds,
+      search: deferredSearch.trim() ? deferredSearch.trim() : undefined,
+      sortBy,
+      sortDirection,
+    }),
+    [
+      filters.categoryId,
+      filters.status,
+      filters.locationId,
+      filters.tagIds,
+      deferredSearch,
+      sortBy,
+      sortDirection,
+    ],
+  );
   const assetsQuery = useQuery({
     queryKey: ["assets", "list", listParams],
     queryFn: () => listAssets(listParams),
@@ -153,32 +190,67 @@ function AssetsPageClientContent({
         </Button>
       </div>
 
-      <AssetFilters
-        options={options}
-        search={searchInput}
-        filters={filters}
-        onSearchChange={(value) => {
-          startTransition(() => {
-            setSearchInput(value);
-          });
-        }}
-        onFiltersChange={(nextFilters) => {
-          startTransition(() => {
-            setFilters(nextFilters);
-          });
-        }}
-        onReset={() => {
-          startTransition(() => {
-            setSearchInput("");
-            setFilters({
-              categoryId: null,
-              status: null,
-              locationId: null,
-              tagIds: [],
+      {isDesktop ? (
+        <AssetFilters
+          options={options}
+          search={searchInput}
+          filters={filters}
+          onSearchChange={(value) => {
+            startTransition(() => {
+              setSearchInput(value);
+            });
+          }}
+          onFiltersChange={(nextFilters) => {
+            startTransition(() => {
+              setFilters(nextFilters);
+            });
+          }}
+          onReset={() => {
+            startTransition(() => {
+              setSearchInput("");
+              setFilters({
+                categoryId: null,
+                status: null,
+                locationId: null,
+                tagIds: [],
+              });
+            });
+          }}
+        />
+      ) : (
+        <AssetFiltersMobile
+          options={options}
+          search={searchInput}
+          filters={filters}
+          sortBy={sortBy}
+          sortDirection={sortDirection}
+          onSearchChange={(value) => {
+            startTransition(() => {
+              setSearchInput(value);
+            });
+          }}
+          onFiltersChange={(nextFilters) => {
+            startTransition(() => {
+              setFilters(nextFilters);
             });
-          });
-        }}
-      />
+          }}
+          onSortChange={(nextSortBy, nextDirection) => {
+            setSortBy(nextSortBy);
+            setSortDirection(nextDirection);
+          }}
+          onReset={() => {
+            startTransition(() => {
+              setSearchInput("");
+              setFilters({
+                categoryId: null,
+                status: null,
+                locationId: null,
+                tagIds: [],
+              });
+            });
+          }}
+        />
+      )}
 
       {showEmptyState ? (
         <EmptyState
@@ -196,35 +268,39 @@ function AssetsPageClientContent({
         />
       ) : null}
 
-      <AssetTable
-        rows={rows}
-        loading={loading}
-        sortBy={sortBy}
-        sortDirection={sortDirection}
-        selectedIds={selectedIds}
-        onSort={handleSort}
-        onSelectRow={(assetId, checked) => {
-          setSelectedIds((prev) => {
-            const next = new Set(prev);
-            if (checked) {
-              next.add(assetId);
-            } else {
-              next.delete(assetId);
+      {isDesktop ? (
+        <AssetTable
+          rows={rows}
+          loading={loading}
+          sortBy={sortBy}
+          sortDirection={sortDirection}
+          selectedIds={selectedIds}
+          onSort={handleSort}
+          onSelectRow={(assetId, checked) => {
+            setSelectedIds((prev) => {
+              const next = new Set(prev);
+              if (checked) {
+                next.add(assetId);
+              } else {
+                next.delete(assetId);
+              }
+              return next;
+            });
+          }}
+          onSelectAll={(checked) => {
+            if (!checked) {
+              setSelectedIds(new Set());
+              return;
             }
-            return next;
-          });
-        }}
-        onSelectAll={(checked) => {
-          if (!checked) {
-            setSelectedIds(new Set());
-            return;
-          }
 
-          setSelectedIds(new Set(rows.map((row) => row.id)));
-        }}
-        onRowOpen={(assetId) => router.push(`/assets/${assetId}`)}
-        onRowEdit={(assetId) => router.push(`/assets/${assetId}/edit`)}
-      />
+            setSelectedIds(new Set(rows.map((row) => row.id)));
+          }}
+          onRowOpen={(assetId) => router.push(`/assets/${assetId}`)}
+          onRowEdit={(assetId) => router.push(`/assets/${assetId}/edit`)}
+        />
+      ) : (
+        <AssetCardList rows={rows} loading={loading} />
+      )}
 
       {selectedCount > 0 ? (
         <div className="sticky bottom-4 z-10 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border/70 bg-background px-4 py-3 shadow-lg">
@@ -266,16 +342,3 @@ function AssetsPageClientContent({
     </div>
   );
 }
-
-export function AssetsPageClient() {
-  const searchParams = useSearchParams();
-  const filtersKey = buildFiltersKey(searchParams);
-  const initialFilters = useMemo(
-    () => getInitialFilters(searchParams),
-    [searchParams],
-  );
-
-  return (
-    <AssetsPageClientContent key={filtersKey} initialFilters={initialFilters} />
-  );
-}
diff --git a/src/components/attachments/attachment-list.tsx b/src/components/attachments/attachment-list.tsx
index 6c4966a..3205f3e 100644
--- a/src/components/attachments/attachment-list.tsx
+++ b/src/components/attachments/attachment-list.tsx
@@ -55,7 +55,7 @@ export function AttachmentList({ assetId }: { assetId: string }) {
   }
 
   return (
-    <div className="grid gap-3 md:grid-cols-2">
+    <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
       {rows.map((attachment) => (
         <AttachmentCard
           key={attachment.id}
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index cad4424..a9ced26 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -115,9 +115,10 @@ export function LoginForm() {
             role="alert"
             className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
           >
-            Server setup is incomplete. Set
-            {" `POCKETBASE_SUPERUSER_EMAIL` and `POCKETBASE_SUPERUSER_PASSWORD` "}
-            in your environment, then restart the app.
+            Server setup is incomplete. Set{" "}
+            <code>POCKETBASE_SUPERUSER_EMAIL</code> and{" "}
+            <code>POCKETBASE_SUPERUSER_PASSWORD</code> in your environment, then
+            restart the app.
           </p>
         ) : null}
 
diff --git a/src/components/auth/setup-form.tsx b/src/components/auth/setup-form.tsx
index 2a8fcef..929ad38 100644
--- a/src/components/auth/setup-form.tsx
+++ b/src/components/auth/setup-form.tsx
@@ -95,9 +95,10 @@ export function SetupForm() {
             role="alert"
             className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
           >
-            Server setup is incomplete. Set
-            {" `POCKETBASE_SUPERUSER_EMAIL` and `POCKETBASE_SUPERUSER_PASSWORD` "}
-            in your Docker or Next environment, then restart the app.
+            Server setup is incomplete. Set{" "}
+            <code>POCKETBASE_SUPERUSER_EMAIL</code> and{" "}
+            <code>POCKETBASE_SUPERUSER_PASSWORD</code> in your Docker or Next
+            environment, then restart the app.
           </p>
         ) : null}
 
diff --git a/src/components/crud/modal.tsx b/src/components/crud/modal.tsx
index 20ae4b1..4d10323 100644
--- a/src/components/crud/modal.tsx
+++ b/src/components/crud/modal.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 export function CrudModal({
   open,
@@ -18,13 +20,71 @@ export function CrudModal({
   children: React.ReactNode;
   footer?: React.ReactNode;
 }) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousActiveElement = document.activeElement;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    modalRef.current?.focus();
+
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+
+      if (event.key !== "Tab" || !modalRef.current) {
+        return;
+      }
+
+      const focusable = Array.from(
+        modalRef.current.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter((element) => !element.hasAttribute("disabled"));
+
+      if (focusable.length === 0) {
+        event.preventDefault();
+        modalRef.current.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+      if (previousActiveElement instanceof HTMLElement) {
+        previousActiveElement.focus();
+      }
+    };
+  }, [open, onClose]);
+
   if (!open) {
     return null;
   }
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-6"
+      className={cn(
+        "fixed inset-0 z-50 flex bg-black/50",
+        // Mobile: bottom-sheet alignment
+        "items-end justify-center px-0 pb-0 pt-10",
+        // Desktop: centered modal
+        "md:items-center md:justify-center md:px-4 md:py-6",
+      )}
       role="dialog"
       aria-modal="true"
       aria-labelledby="crud-modal-title"
@@ -34,7 +94,19 @@ export function CrudModal({
         }
       }}
     >
-      <div className="flex max-h-[calc(100dvh-3rem)] w-full max-w-lg flex-col rounded-xl border border-border bg-background shadow-xl">
+      <div
+        ref={modalRef}
+        data-testid="crud-modal-surface"
+        tabIndex={-1}
+        className={cn(
+          "flex w-full flex-col border border-border bg-background shadow-xl",
+          // Mobile: attached to bottom, rounded only at top, safe-area padding
+          "max-h-[90svh] rounded-t-2xl animate-in slide-in-from-bottom-8 duration-200",
+          "pb-[env(safe-area-inset-bottom)]",
+          // Desktop: centered card, rounded, bounded
+          "md:max-h-[calc(100dvh-3rem)] md:max-w-lg md:rounded-xl md:pb-0 md:slide-in-from-bottom-0 md:zoom-in-95",
+        )}
+      >
         <div className="flex shrink-0 items-start justify-between gap-3 border-b border-border/60 px-5 py-4">
           <div className="space-y-1">
             <h2
diff --git a/src/components/dashboard/dashboard-stats-bar.tsx b/src/components/dashboard/dashboard-stats-bar.tsx
index 92dea97..204bc1e 100644
--- a/src/components/dashboard/dashboard-stats-bar.tsx
+++ b/src/components/dashboard/dashboard-stats-bar.tsx
@@ -75,18 +75,26 @@ export function DashboardStatsBar({
   }
 
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
+    <div
+      className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-1 sm:mx-0 sm:grid sm:grid-cols-3 sm:overflow-visible sm:px-0 sm:pb-0 xl:grid-cols-6"
+      data-layout="horizontal-scroll-to-grid"
+      data-testid="dashboard-stats-bar"
+    >
       {statCards.map((card) => {
         const value = getValue(card.key);
         return (
-          <StatCard
+          <div
             key={card.key}
-            statKey={card.key}
-            label={card.label}
-            value={value}
-            icon={card.icon}
-            className={card.className}
-          />
+            className="min-w-[150px] shrink-0 snap-start sm:min-w-0 sm:shrink"
+          >
+            <StatCard
+              statKey={card.key}
+              label={card.label}
+              value={value}
+              icon={card.icon}
+              className={card.className}
+            />
+          </div>
         );
       })}
     </div>
diff --git a/src/components/fields/fields-page-client.tsx b/src/components/fields/fields-page-client.tsx
index 3e1c3f0..f4f62fa 100644
--- a/src/components/fields/fields-page-client.tsx
+++ b/src/components/fields/fields-page-client.tsx
@@ -2,6 +2,8 @@
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  ArrowDown,
+  ArrowUp,
   GripVertical,
   Loader2,
   MoreHorizontal,
@@ -233,7 +235,136 @@ export function FieldsPageClient() {
           ) : null}
         </div>
 
-        <div className="mt-4 overflow-x-auto rounded-lg border border-border/60">
+        {loading ? (
+          <p className="mt-4 text-sm text-muted-foreground md:hidden">
+            Loading...
+          </p>
+        ) : null}
+
+        {!loading && rows.length === 0 ? (
+          <div className="mt-4 md:hidden">
+            <EmptyState
+              icon={SlidersHorizontal}
+              title="No custom fields"
+              description="Define reusable fields to capture extra asset data."
+              action={
+                canManage ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="cursor-pointer"
+                    onClick={openCreate}
+                  >
+                    <Plus className="h-4 w-4" />
+                    Add field
+                  </Button>
+                ) : undefined
+              }
+            />
+          </div>
+        ) : null}
+
+        {rows.length > 0 ? (
+          <ul
+            className="mt-4 flex flex-col gap-2 md:hidden"
+            data-testid="field-card-list"
+          >
+            {rows.map((definition, index) => (
+              <li
+                key={definition.id}
+                data-testid={`field-card-${definition.id}`}
+                className="flex items-start justify-between gap-3 rounded-lg border border-border/70 bg-card p-3 shadow-sm"
+              >
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="inline-flex shrink-0 items-center rounded-md border border-border/70 bg-muted/20 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+                      {definition.sortOrder + 1}
+                    </span>
+                    <span className="truncate text-sm font-semibold">
+                      {definition.name}
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <Badge className="bg-muted/20 capitalize">
+                      {definition.fieldType}
+                    </Badge>
+                    {definition.required ? (
+                      <Badge className="border-amber-300/70 bg-amber-100 text-amber-900 dark:border-amber-400/30 dark:bg-amber-500/15 dark:text-amber-200">
+                        Required
+                      </Badge>
+                    ) : null}
+                    <span className="text-[11px] text-muted-foreground">
+                      Used by {definition.usageCount}
+                    </span>
+                  </div>
+                </div>
+                {canManage ? (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon-sm"
+                        className="cursor-pointer"
+                        aria-label={`Actions for ${definition.name}`}
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        disabled={reordering || index === 0}
+                        onClick={() => {
+                          const next = rows.map((row) => row.id);
+                          [next[index - 1], next[index]] = [
+                            next[index],
+                            next[index - 1],
+                          ];
+                          void saveOrder(next);
+                        }}
+                      >
+                        <ArrowUp className="h-4 w-4" />
+                        Move up
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        disabled={reordering || index === rows.length - 1}
+                        onClick={() => {
+                          const next = rows.map((row) => row.id);
+                          [next[index], next[index + 1]] = [
+                            next[index + 1],
+                            next[index],
+                          ];
+                          void saveOrder(next);
+                        }}
+                      >
+                        <ArrowDown className="h-4 w-4" />
+                        Move down
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => openEdit(definition.id)}>
+                        <Pencil className="h-4 w-4" />
+                        Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        variant="destructive"
+                        onClick={() => setDeleteId(definition.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                ) : (
+                  <span className="text-xs text-muted-foreground">
+                    Read only
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
           <table className="min-w-full text-sm">
             <thead className="bg-muted/40 text-left">
               <tr>
diff --git a/src/components/labels/labels-page-client.tsx b/src/components/labels/labels-page-client.tsx
index ab3f18a..914b33a 100644
--- a/src/components/labels/labels-page-client.tsx
+++ b/src/components/labels/labels-page-client.tsx
@@ -1,15 +1,20 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect, useRef } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Monitor, Printer } from "lucide-react";
 import { toast } from "sonner";
 import type { FieldDefinition } from "@/components/fields/types";
+import { LabelPreview } from "@/components/labels/label-preview";
 import { TemplateDesigner } from "@/components/labels/template-designer";
 import type {
   LabelPreviewAsset,
   LabelTemplate,
 } from "@/components/labels/types";
+import { Button } from "@/components/ui/button";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { getLabelPreviewAsset } from "@/lib/api/assets";
 import { listCustomFields } from "@/lib/api/custom-fields";
 import {
@@ -21,6 +26,7 @@ import {
 export function LabelsPageClient() {
   const queryClient = useQueryClient();
   const { data: currentUser } = useCurrentUser();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
 
   const templatesQuery = useQuery({
     queryKey: ["label-templates"],
@@ -96,6 +102,18 @@ export function LabelsPageClient() {
   const fieldDefinitions = (fieldDefinitionsQuery.data ??
     []) as FieldDefinition[];
 
+  if (!isDesktop) {
+    return (
+      <MobileLabelList
+        currentUserRole={currentUser?.role ?? null}
+        templates={templates}
+        sampleAsset={sampleAsset}
+        fieldDefinitions={fieldDefinitions}
+        labelUrlBase={labelUrlBase}
+      />
+    );
+  }
+
   return (
     <TemplateDesigner
       currentUserRole={currentUser?.role ?? null}
@@ -106,3 +124,86 @@ export function LabelsPageClient() {
     />
   );
 }
+
+function MobileLabelList({
+  currentUserRole,
+  templates,
+  sampleAsset,
+  fieldDefinitions,
+  labelUrlBase,
+}: {
+  currentUserRole: "admin" | "user" | null;
+  templates: LabelTemplate[];
+  sampleAsset: LabelPreviewAsset | null;
+  fieldDefinitions: FieldDefinition[];
+  labelUrlBase: string | null;
+}) {
+  return (
+    <div className="flex flex-col gap-4" data-testid="labels-mobile-view">
+      <div
+        className="flex items-start gap-3 rounded-xl border border-amber-300/70 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200"
+        data-testid="labels-desktop-banner"
+      >
+        <Monitor className="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
+        <div className="space-y-1">
+          <p className="font-medium">
+            {currentUserRole === "admin"
+              ? "Open Stowage on desktop to edit"
+              : "Label previews are read-only"}
+          </p>
+          <p>
+            {currentUserRole === "admin"
+              ? "The label designer is a drag-and-drop canvas and really only works with a mouse. You can still preview templates and print labels from a phone."
+              : "You can preview templates and print labels from a phone. Ask an admin to change label templates."}
+          </p>
+        </div>
+      </div>
+
+      <Button asChild className="w-full cursor-pointer">
+        <Link href="/labels/print">
+          <Printer className="h-4 w-4" />
+          Print labels
+        </Link>
+      </Button>
+
+      {templates.length === 0 ? (
+        <p className="rounded-xl border border-dashed border-border/70 bg-muted/10 p-6 text-center text-sm text-muted-foreground">
+          No templates yet.
+        </p>
+      ) : (
+        <ul
+          className="flex flex-col gap-3"
+          data-testid="labels-mobile-template-list"
+        >
+          {templates.map((template) => (
+            <li
+              key={template.id}
+              className="rounded-xl border border-border/70 bg-background p-4 shadow-sm"
+              data-testid={`labels-mobile-template-${template.id}`}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 space-y-0.5">
+                  <p className="truncate text-sm font-semibold">
+                    {template.name}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {template.widthMm} × {template.heightMm} mm
+                  </p>
+                </div>
+              </div>
+              <div className="mt-3 flex items-center justify-center overflow-hidden rounded-md bg-white p-2">
+                <LabelPreview
+                  template={template}
+                  asset={sampleAsset}
+                  fieldDefinitions={fieldDefinitions}
+                  origin={labelUrlBase ?? undefined}
+                  scale={0.7}
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index bb9725c..856fab9 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -1,14 +1,20 @@
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/layout/app-sidebar";
+import { BottomNav } from "@/components/layout/bottom-nav";
 import { Topbar } from "@/components/layout/topbar";
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   return (
-    <SidebarProvider>
-      <AppSidebar />
+    <SidebarProvider className="max-lg:h-auto max-lg:overflow-visible">
+      <div className="hidden lg:contents">
+        <AppSidebar />
+      </div>
       <SidebarInset>
         <Topbar />
-        <main className="flex-1 overflow-auto p-6">{children}</main>
+        <main className="flex-1 p-4 pb-24 lg:overflow-auto lg:p-6 lg:pb-6">
+          {children}
+        </main>
+        <BottomNav />
       </SidebarInset>
     </SidebarProvider>
   );
diff --git a/src/components/layout/bottom-nav.tsx b/src/components/layout/bottom-nav.tsx
new file mode 100644
index 0000000..8c192a9
--- /dev/null
+++ b/src/components/layout/bottom-nav.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter, usePathname } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Home,
+  Layers,
+  LayoutGrid,
+  LogOut,
+  MapPin,
+  MoreHorizontal,
+  Package,
+  Printer,
+  ScanLine,
+  Settings,
+  Wrench,
+} from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { logout } from "@/lib/api/auth";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+
+type Slot = {
+  key: "home" | "assets" | "services" | "more";
+  label: string;
+  href?: string;
+  icon: React.ComponentType<{ className?: string }>;
+};
+
+const SLOTS: Slot[] = [
+  { key: "home", label: "Home", href: "/dashboard", icon: Home },
+  { key: "assets", label: "Assets", href: "/assets", icon: Package },
+  { key: "services", label: "Services", href: "/services", icon: Wrench },
+  { key: "more", label: "More", icon: MoreHorizontal },
+];
+
+const MORE_PATH_PREFIXES = ["/locations", "/taxonomy", "/labels", "/settings"];
+
+function isSlotActive(pathname: string, slot: Slot, moreOpen: boolean) {
+  if (slot.key === "more") {
+    if (moreOpen) return true;
+    return MORE_PATH_PREFIXES.some((prefix) => pathname.startsWith(prefix));
+  }
+  if (slot.key === "home") return pathname === "/dashboard";
+  if (!slot.href) return false;
+  return pathname.startsWith(slot.href);
+}
+
+export function BottomNav() {
+  const pathname = usePathname();
+  const [moreOpen, setMoreOpen] = useState(false);
+  const scanActive = pathname.startsWith("/scan");
+
+  return (
+    <>
+      <nav
+        aria-label="Primary"
+        data-testid="bottom-nav"
+        className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur lg:hidden"
+        style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+      >
+        <div className="relative mx-auto grid max-w-xl grid-cols-5 items-end">
+          {SLOTS.slice(0, 2).map((slot) => (
+            <NavItem
+              key={slot.key}
+              slot={slot}
+              active={isSlotActive(pathname, slot, moreOpen)}
+              onMoreClick={() => setMoreOpen(true)}
+            />
+          ))}
+          <ScanSlot active={scanActive} />
+          {SLOTS.slice(2).map((slot) => (
+            <NavItem
+              key={slot.key}
+              slot={slot}
+              active={isSlotActive(pathname, slot, moreOpen)}
+              onMoreClick={() => setMoreOpen(true)}
+            />
+          ))}
+        </div>
+      </nav>
+      <MoreSheet open={moreOpen} onOpenChange={setMoreOpen} />
+    </>
+  );
+}
+
+function NavItem({
+  slot,
+  active,
+  onMoreClick,
+}: {
+  slot: Slot;
+  active: boolean;
+  onMoreClick: () => void;
+}) {
+  const Icon = slot.icon;
+  const iconEl = <Icon className="h-5 w-5" aria-hidden="true" />;
+  const labelEl = <span className="text-[10px] font-medium">{slot.label}</span>;
+  const className = cn(
+    "flex h-14 flex-col items-center justify-center gap-1 text-muted-foreground transition-colors hover:text-foreground",
+    active && "text-primary",
+  );
+
+  if (slot.key === "more") {
+    return (
+      <button
+        type="button"
+        data-testid={`bottom-nav-${slot.key}`}
+        aria-current={active ? "page" : undefined}
+        aria-label={slot.label}
+        className={cn(className, "cursor-pointer")}
+        onClick={onMoreClick}
+      >
+        {iconEl}
+        {labelEl}
+      </button>
+    );
+  }
+
+  if (!slot.href) return null;
+
+  return (
+    <Link
+      href={slot.href}
+      data-testid={`bottom-nav-${slot.key}`}
+      aria-current={active ? "page" : undefined}
+      aria-label={slot.label}
+      className={className}
+    >
+      {iconEl}
+      {labelEl}
+    </Link>
+  );
+}
+
+function ScanSlot({ active }: { active: boolean }) {
+  return (
+    <div className="relative -mt-5 flex items-end justify-center">
+      <Link
+        href="/scan"
+        data-testid="bottom-nav-scan"
+        aria-label="Scan an asset"
+        aria-current={active ? "page" : undefined}
+        onClick={() => {
+          if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+            navigator.vibrate?.(10);
+          }
+        }}
+        className={cn(
+          "flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[var(--scan)] text-[var(--scan-foreground)] shadow-lg ring-4 ring-background transition-transform active:scale-95",
+          "shadow-[var(--scan)]/30",
+          active && "ring-[var(--scan)]/40",
+        )}
+      >
+        <ScanLine className="h-7 w-7" aria-hidden="true" />
+      </Link>
+    </div>
+  );
+}
+
+function MoreSheet({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  async function handleLogout() {
+    setLoggingOut(true);
+    try {
+      await logout();
+    } catch {
+      toast.error("Could not sign out. Please try again.");
+      setLoggingOut(false);
+      return;
+    }
+    queryClient.clear();
+    onOpenChange(false);
+    // Note: no `finally { setLoggingOut(false) }` — the router.replace below
+    // unmounts this component, and setting state on an unmounted component
+    // warns in React 19.
+    router.replace("/login");
+  }
+
+  const items: { label: string; href: string; icon: typeof MapPin }[] = [
+    { label: "Locations", href: "/locations", icon: MapPin },
+    { label: "Taxonomy", href: "/taxonomy", icon: Layers },
+    { label: "Labels", href: "/labels", icon: Printer },
+    { label: "Settings", href: "/settings", icon: Settings },
+  ];
+
+  return (
+    <MobileActionSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      title="More"
+      description="Additional pages and account actions"
+      hideHeader
+      aria-label="More menu"
+    >
+      <ul className="grid grid-cols-2 gap-2" data-testid="more-sheet-grid">
+        {items.map((item) => (
+          <li key={item.href}>
+            <Link
+              href={item.href}
+              data-testid={`more-item-${item.href.replace("/", "")}`}
+              onClick={() => onOpenChange(false)}
+              className="flex h-20 flex-col items-center justify-center gap-1 rounded-lg border border-border bg-card text-sm font-medium text-foreground transition-colors hover:bg-accent"
+            >
+              <item.icon className="h-5 w-5" aria-hidden="true" />
+              <span>{item.label}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <div className="mt-2 flex items-center justify-between gap-2 rounded-lg border border-border bg-card p-3">
+        <div className="flex items-center gap-2">
+          <LayoutGrid
+            className="h-4 w-4 text-muted-foreground"
+            aria-hidden="true"
+          />
+          <span className="text-sm text-muted-foreground">Appearance</span>
+        </div>
+        <ThemeToggle />
+      </div>
+      <button
+        type="button"
+        data-testid="more-sheet-signout"
+        disabled={loggingOut}
+        onClick={(event) => {
+          event.preventDefault();
+          void handleLogout();
+        }}
+        className="flex h-12 w-full items-center justify-center gap-2 rounded-lg border border-border bg-card text-sm font-medium text-destructive transition-colors hover:bg-accent disabled:opacity-50"
+      >
+        <LogOut className="h-4 w-4" aria-hidden="true" />
+        {loggingOut ? "Signing out…" : "Sign out"}
+      </button>
+    </MobileActionSheet>
+  );
+}
diff --git a/src/components/layout/mobile-action-sheet.tsx b/src/components/layout/mobile-action-sheet.tsx
new file mode 100644
index 0000000..37d9713
--- /dev/null
+++ b/src/components/layout/mobile-action-sheet.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+type MobileActionSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  hideHeader?: boolean;
+  children: React.ReactNode;
+  contentClassName?: string;
+  "aria-label"?: string;
+};
+
+export function MobileActionSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  hideHeader,
+  children,
+  contentClassName,
+  "aria-label": ariaLabel,
+}: MobileActionSheetProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="bottom"
+        data-testid="mobile-action-sheet"
+        aria-label={ariaLabel}
+        className={cn(
+          "gap-0 rounded-t-2xl border-t pb-[max(1rem,env(safe-area-inset-bottom))]",
+          contentClassName,
+        )}
+        showCloseButton={false}
+      >
+        <div className="flex justify-center pt-2 pb-1">
+          <span
+            aria-hidden="true"
+            className="h-1.5 w-10 rounded-full bg-muted-foreground/30"
+            data-testid="mobile-action-sheet-handle"
+          />
+        </div>
+        {hideHeader ? (
+          <div className="sr-only">
+            <SheetTitle>{title}</SheetTitle>
+            {description ? (
+              <SheetDescription>{description}</SheetDescription>
+            ) : null}
+          </div>
+        ) : (
+          <SheetHeader className="pt-2 pb-3">
+            <SheetTitle>{title}</SheetTitle>
+            {description ? (
+              <SheetDescription>{description}</SheetDescription>
+            ) : null}
+          </SheetHeader>
+        )}
+        <div className="flex flex-col gap-2 px-4 pb-4">{children}</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 1189185..38d717d 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -56,9 +56,9 @@ export function Topbar() {
   }
 
   return (
-    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border px-4">
-      <SidebarTrigger className="cursor-pointer" />
-      <Separator orientation="vertical" className="mr-2 h-4" />
+    <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background/95 px-4 backdrop-blur lg:static lg:z-auto lg:bg-background lg:backdrop-blur-none">
+      <SidebarTrigger className="hidden cursor-pointer lg:flex" />
+      <Separator orientation="vertical" className="mr-2 hidden h-4 lg:block" />
 
       <div className="flex flex-1 items-center gap-2">
         <GlobalSearch />
diff --git a/src/components/locations/location-tree.module.css b/src/components/locations/location-tree.module.css
index 3f95ef4..e0c4d0a 100644
--- a/src/components/locations/location-tree.module.css
+++ b/src/components/locations/location-tree.module.css
@@ -10,6 +10,9 @@
     var(--color-muted-foreground) 40%,
     transparent
   );
+
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .tree,
@@ -34,7 +37,13 @@
 }
 
 .tree ul > .node {
-  padding-left: calc(var(--tree-spacing) * 1.25);
+  padding-left: calc(var(--tree-spacing) * 0.8);
+}
+
+@media (min-width: 640px) {
+  .tree ul > .node {
+    padding-left: calc(var(--tree-spacing) * 1.25);
+  }
 }
 
 .tree > .node:last-child,
diff --git a/src/components/locations/location-tree.tsx b/src/components/locations/location-tree.tsx
index 0d30321..2fadf50 100644
--- a/src/components/locations/location-tree.tsx
+++ b/src/components/locations/location-tree.tsx
@@ -168,18 +168,18 @@ export function LocationTree({
               className="min-w-0 flex-1 cursor-pointer text-left"
               onClick={() => onSelect(node.id)}
             >
-              <div className="flex items-center gap-2">
-                <FolderTree className="h-4 w-4 text-muted-foreground" />
-                <span className="truncate text-sm font-medium">
+              <div className="flex min-w-0 items-center gap-2">
+                <FolderTree className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate text-sm font-medium">
                   {node.name}
                 </span>
                 {hasChildren ? (
-                  <span className="rounded-full border border-border/70 px-1.5 py-0 text-[11px] text-muted-foreground">
+                  <span className="shrink-0 rounded-full border border-border/70 px-1.5 py-0 text-[11px] text-muted-foreground">
                     {children.length}
                   </span>
                 ) : null}
               </div>
-              <div className="mt-0.5 truncate text-xs text-muted-foreground">
+              <div className="mt-0.5 min-w-0 truncate text-xs text-muted-foreground">
                 {node.path}
               </div>
             </button>
diff --git a/src/components/locations/locations-page-client.tsx b/src/components/locations/locations-page-client.tsx
index 66de869..fc01e28 100644
--- a/src/components/locations/locations-page-client.tsx
+++ b/src/components/locations/locations-page-client.tsx
@@ -323,8 +323,11 @@ export function LocationsPageClient() {
     : null;
 
   return (
-    <div className="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
-      <section className="flex max-h-[calc(100dvh-14rem)] flex-col rounded-xl border border-border/70 bg-background p-5 shadow-sm">
+    <div
+      className="grid gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:gap-6"
+      data-testid="locations-page"
+    >
+      <section className="flex flex-col rounded-xl border border-border/70 bg-background p-4 shadow-sm sm:p-5 lg:max-h-[calc(100dvh-14rem)]">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div className="space-y-1">
             <h2 className="text-lg font-semibold tracking-tight">
@@ -343,7 +346,7 @@ export function LocationsPageClient() {
             <Button
               type="button"
               variant="outline"
-              className="cursor-pointer"
+              className="w-full cursor-pointer sm:w-auto"
               onClick={openCreateRoot}
             >
               <Plus className="h-4 w-4" />
@@ -352,7 +355,7 @@ export function LocationsPageClient() {
           ) : null}
         </div>
 
-        <div className="mt-4 min-h-0 flex-1 overflow-y-auto">
+        <div className="mt-4 min-h-0 flex-1 lg:overflow-y-auto">
           {loading ? (
             <div className="rounded-lg border border-border/60 px-4 py-8 text-center text-sm text-muted-foreground">
               Loading locations...
@@ -375,7 +378,7 @@ export function LocationsPageClient() {
         </div>
       </section>
 
-      <section className="max-h-[calc(100dvh-14rem)] overflow-y-auto rounded-xl border border-border/70 bg-background p-5 shadow-sm">
+      <section className="rounded-xl border border-border/70 bg-background p-4 shadow-sm sm:p-5 lg:max-h-[calc(100dvh-14rem)] lg:overflow-y-auto">
         {!selectedLocation || !panelDraft ? (
           <div className="flex h-full min-h-72 flex-col items-start justify-center gap-3 rounded-lg border border-dashed border-border/60 bg-muted/20 p-6">
             <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
diff --git a/src/components/scan/scan-detected-overlay.tsx b/src/components/scan/scan-detected-overlay.tsx
new file mode 100644
index 0000000..91970e9
--- /dev/null
+++ b/src/components/scan/scan-detected-overlay.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import type { DetectedPhase } from "@/components/scan/scan-viewport";
+import type { ScanResultPoint } from "@/hooks/use-barcode-scanner";
+
+type Props = {
+  phase: DetectedPhase;
+  points: ScanResultPoint[];
+  videoWidth: number;
+  videoHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+};
+
+const PHASE_STYLE: Record<DetectedPhase, { border: string; glow: string }> = {
+  detecting: {
+    border: "var(--scan)",
+    glow: "rgba(194, 65, 12, 0.55)",
+  },
+  confirmed: {
+    border: "#10b981",
+    glow: "rgba(16, 185, 129, 0.55)",
+  },
+};
+
+export function ScanDetectedOverlay({
+  phase,
+  points,
+  videoWidth,
+  videoHeight,
+  viewportWidth,
+  viewportHeight,
+}: Props) {
+  const mapped = mapPointsToViewport({
+    points,
+    videoWidth,
+    videoHeight,
+    viewportWidth,
+    viewportHeight,
+  });
+
+  const rect = boundingRect(mapped);
+  if (!rect) return null;
+
+  const padding = 8;
+  const x = Math.max(0, rect.minX - padding);
+  const y = Math.max(0, rect.minY - padding);
+  const right = Math.min(viewportWidth, rect.maxX + padding);
+  const bottom = Math.min(viewportHeight, rect.maxY + padding);
+  const width = Math.max(0, right - x);
+  const height = Math.max(0, bottom - y);
+
+  const style = PHASE_STYLE[phase];
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-0"
+      data-testid="scan-detected-overlay"
+      data-phase={phase}
+    >
+      <div
+        className="absolute rounded-md border-2 animate-scan-detected transition-[border-color,box-shadow] duration-500"
+        style={{
+          left: x,
+          top: y,
+          width,
+          height,
+          borderColor: style.border,
+          boxShadow: `0 0 18px ${style.glow}`,
+        }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+}
+
+type MapInput = {
+  points: ScanResultPoint[];
+  videoWidth: number;
+  videoHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+};
+
+function mapPointsToViewport({
+  points,
+  videoWidth,
+  videoHeight,
+  viewportWidth,
+  viewportHeight,
+}: MapInput): ScanResultPoint[] {
+  if (
+    !Array.isArray(points) ||
+    points.length === 0 ||
+    videoWidth <= 0 ||
+    videoHeight <= 0 ||
+    viewportWidth <= 0 ||
+    viewportHeight <= 0
+  ) {
+    return [];
+  }
+  const scale = Math.max(
+    viewportWidth / videoWidth,
+    viewportHeight / videoHeight,
+  );
+  const scaledW = videoWidth * scale;
+  const scaledH = videoHeight * scale;
+  const offsetX = (scaledW - viewportWidth) / 2;
+  const offsetY = (scaledH - viewportHeight) / 2;
+  return points.map((p) => ({
+    x: p.x * scale - offsetX,
+    y: p.y * scale - offsetY,
+  }));
+}
+
+function boundingRect(points: ScanResultPoint[]) {
+  if (points.length === 0) return null;
+  let minX = points[0].x;
+  let minY = points[0].y;
+  let maxX = points[0].x;
+  let maxY = points[0].y;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+
+export const __test__ = { mapPointsToViewport, boundingRect };
diff --git a/src/components/scan/scan-page-client.tsx b/src/components/scan/scan-page-client.tsx
new file mode 100644
index 0000000..aad905c
--- /dev/null
+++ b/src/components/scan/scan-page-client.tsx
@@ -0,0 +1,395 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  ArrowLeft,
+  CameraOff,
+  Flashlight,
+  FlashlightOff,
+  Keyboard,
+  Lock,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+import {
+  ScanViewport,
+  type DetectedFrame,
+} from "@/components/scan/scan-viewport";
+import { ScanResultSheet } from "@/components/scan/scan-result-sheet";
+import { useBarcodeScanner } from "@/hooks/use-barcode-scanner";
+import { resolveScanTarget, type ResolverResult } from "@/lib/scan";
+import { cn } from "@/lib/utils";
+
+function appOrigin(): string {
+  if (typeof window !== "undefined" && window.location?.origin) {
+    return window.location.origin;
+  }
+  return "";
+}
+
+export function ScanPageClient() {
+  const router = useRouter();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [target, setTarget] = useState<ResolverResult | null>(null);
+  const [manualOpen, setManualOpen] = useState(false);
+  const [manualValue, setManualValue] = useState("");
+  const [resolving, setResolving] = useState(false);
+  const [detected, setDetected] = useState<DetectedFrame | null>(null);
+  const [pageHidden, setPageHidden] = useState(false);
+  // Synchronous re-entry guard for decoder callbacks that fire while a
+  // previous `handleScanResult` is still in flight (dedupe window + 1100ms
+  // dwell). React state flips lag the next camera frame by a tick; this ref
+  // blocks the second call immediately.
+  const busyRef = useRef(false);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const scannerEnabled =
+    target === null && !manualOpen && detected === null && !pageHidden;
+
+  const handleResolved = useCallback((result: ResolverResult) => {
+    setTarget(result);
+    const vibrate =
+      typeof navigator !== "undefined" && "vibrate" in navigator
+        ? navigator.vibrate?.bind(navigator)
+        : undefined;
+    if (vibrate) {
+      if (result.status === "asset") vibrate(15);
+      else vibrate([10, 60, 10]);
+    }
+  }, []);
+
+  const handleScanResult = useCallback(
+    async (result: {
+      text: string;
+      points: DetectedFrame["points"];
+      videoWidth: number;
+      videoHeight: number;
+    }) => {
+      if (busyRef.current) return;
+      busyRef.current = true;
+      setDetected({
+        points: result.points,
+        videoWidth: result.videoWidth,
+        videoHeight: result.videoHeight,
+        phase: "detecting",
+      });
+      setResolving(true);
+      try {
+        const [resolved] = await Promise.all([
+          resolveScanTarget(result.text, appOrigin()),
+          new Promise((resolve) => setTimeout(resolve, 1100)),
+        ]);
+        if (!mountedRef.current) return;
+        setDetected((current) =>
+          current ? { ...current, phase: "confirmed" } : current,
+        );
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        if (!mountedRef.current) return;
+        handleResolved(resolved);
+      } catch (err) {
+        console.warn("[scan] resolver failed", err);
+        if (!mountedRef.current) return;
+        toast.error("Couldn't look up the scan. Try again.");
+        handleResolved({ status: "unresolved", rawText: result.text });
+      } finally {
+        if (mountedRef.current) {
+          setResolving(false);
+          setDetected(null);
+        }
+        busyRef.current = false;
+      }
+    },
+    [handleResolved],
+  );
+
+  const scanner = useBarcodeScanner({
+    videoRef,
+    enabled: scannerEnabled,
+    onResult: (result) => {
+      void handleScanResult(result);
+    },
+  });
+
+  const handleManualSubmit = useCallback(
+    async (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (!manualValue.trim()) return;
+      if (busyRef.current) return;
+      busyRef.current = true;
+      setResolving(true);
+      try {
+        const resolved = await resolveScanTarget(manualValue, appOrigin());
+        if (!mountedRef.current) return;
+        setManualOpen(false);
+        setManualValue("");
+        handleResolved(resolved);
+      } catch (err) {
+        console.warn("[scan] manual resolver failed", err);
+        if (!mountedRef.current) return;
+        toast.error("Couldn't look up the tag. Try again.");
+        handleResolved({ status: "unresolved", rawText: manualValue });
+        setManualOpen(false);
+        setManualValue("");
+      } finally {
+        if (mountedRef.current) setResolving(false);
+        busyRef.current = false;
+      }
+    },
+    [manualValue, handleResolved],
+  );
+
+  useEffect(() => {
+    function onVisibility() {
+      // Pausing the scanner when the tab is hidden releases the camera stream
+      // (the scanner effect tears down when `enabled` flips to false) so the
+      // OS camera indicator turns off and we don't hold the sensor while the
+      // page is in the background.
+      setPageHidden(document.hidden);
+    }
+    setPageHidden(document.hidden);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+
+  return (
+    <div
+      className="relative -m-4 flex min-h-[calc(100svh-8rem)] flex-col items-center gap-5 bg-background px-4 pt-4 pb-10 lg:-m-6 lg:min-h-[calc(100svh-4rem)]"
+      data-testid="scan-page"
+    >
+      <div className="flex w-full items-center justify-between">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="cursor-pointer"
+          data-testid="scan-back"
+          onClick={() => router.back()}
+        >
+          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          Back
+        </Button>
+        <TorchButton
+          supported={scanner.torch.supported}
+          on={scanner.torch.on}
+          onToggle={scanner.torch.toggle}
+        />
+      </div>
+
+      <ScannerBody scanner={scanner} videoRef={videoRef} detected={detected} />
+
+      <Button
+        type="button"
+        variant="outline"
+        data-testid="scan-manual-entry"
+        onClick={() => setManualOpen(true)}
+      >
+        <Keyboard className="h-4 w-4" aria-hidden="true" />
+        Enter asset tag
+      </Button>
+
+      <ManualEntrySheet
+        open={manualOpen}
+        onOpenChange={setManualOpen}
+        value={manualValue}
+        onChange={setManualValue}
+        onSubmit={handleManualSubmit}
+        busy={resolving}
+      />
+
+      <ScanResultSheet
+        target={target}
+        resolving={resolving}
+        onAssetUpdated={(asset) =>
+          setTarget((current) =>
+            // Guard against a late mutation from a previously-open asset:
+            // only apply the update if it's still the asset the sheet is
+            // showing.
+            current?.status === "asset" && current.asset.id === asset.id
+              ? { status: "asset", asset }
+              : current,
+          )
+        }
+        onDismiss={() => setTarget(null)}
+      />
+    </div>
+  );
+}
+
+function ScannerBody({
+  scanner,
+  videoRef,
+  detected,
+}: {
+  scanner: ReturnType<typeof useBarcodeScanner>;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  detected: DetectedFrame | null;
+}) {
+  if (scanner.state === "denied") {
+    return (
+      <ScannerState
+        icon={CameraOff}
+        title="Camera access is blocked"
+        description="Allow camera access in your browser settings, or type the asset tag below."
+        testId="scan-state-denied"
+      />
+    );
+  }
+  if (scanner.state === "insecure") {
+    return (
+      <ScannerState
+        icon={Lock}
+        title="Camera requires HTTPS"
+        description="Ask your admin to serve Stowage over HTTPS, or type the asset tag below."
+        testId="scan-state-insecure"
+      />
+    );
+  }
+  if (scanner.state === "error") {
+    return (
+      <ScannerState
+        icon={CameraOff}
+        title="Scanner unavailable"
+        description={
+          scanner.error ?? "Something went wrong starting the camera."
+        }
+        testId="scan-state-error"
+      />
+    );
+  }
+  return (
+    <>
+      <ScanViewport
+        videoRef={videoRef}
+        active={scanner.state === "scanning"}
+        detected={detected}
+      />
+      <p className="text-sm text-muted-foreground">
+        {detected?.phase === "confirmed"
+          ? "Got it — opening…"
+          : detected?.phase === "detecting"
+            ? "Barcode detected — reading…"
+            : "Point at a Stowage label"}
+      </p>
+    </>
+  );
+}
+
+function ScannerState({
+  icon: Icon,
+  title,
+  description,
+  testId,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+  testId: string;
+}) {
+  return (
+    <div
+      className="flex aspect-square w-full max-w-md flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border bg-muted/30 px-6 text-center"
+      data-testid={testId}
+    >
+      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted/60">
+        <Icon className="h-6 w-6 text-muted-foreground" />
+      </div>
+      <p className="text-base font-medium">{title}</p>
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+function TorchButton({
+  supported,
+  on,
+  onToggle,
+}: {
+  supported: boolean;
+  on: boolean;
+  onToggle: () => void;
+}) {
+  if (!supported) return null;
+  const Icon = on ? Flashlight : FlashlightOff;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      aria-label={on ? "Turn off flashlight" : "Turn on flashlight"}
+      aria-pressed={on}
+      className={cn("cursor-pointer", on && "text-[var(--scan)]")}
+      data-testid="scan-torch"
+      onClick={onToggle}
+    >
+      <Icon className="h-4 w-4" aria-hidden="true" />
+    </Button>
+  );
+}
+
+function ManualEntrySheet({
+  open,
+  onOpenChange,
+  value,
+  onChange,
+  onSubmit,
+  busy,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  busy: boolean;
+}) {
+  return (
+    <MobileActionSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Enter asset tag"
+      description="Type the tag printed on the label (or paste a Stowage asset URL)."
+    >
+      <form
+        onSubmit={onSubmit}
+        className="flex flex-col gap-3"
+        data-testid="scan-manual-form"
+      >
+        <Input
+          autoFocus
+          placeholder="AST-0047"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          data-testid="scan-manual-input"
+          aria-label="Asset tag"
+        />
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            className="flex-1"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            className="flex-1 cursor-pointer"
+            disabled={busy || !value.trim()}
+            data-testid="scan-manual-submit"
+          >
+            {busy ? "Looking up…" : "Go"}
+          </Button>
+        </div>
+      </form>
+    </MobileActionSheet>
+  );
+}
diff --git a/src/components/scan/scan-result-sheet.tsx b/src/components/scan/scan-result-sheet.tsx
new file mode 100644
index 0000000..b196da0
--- /dev/null
+++ b/src/components/scan/scan-result-sheet.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
+import { AssetActionsSheet } from "@/components/assets/asset-actions-sheet";
+import type { AssetDetail } from "@/lib/api/assets";
+import type { ResolverResult } from "@/lib/scan";
+
+const RAW_TEXT_DISPLAY_MAX = 40;
+
+function truncateForDisplay(value: string): string {
+  if (value.length <= RAW_TEXT_DISPLAY_MAX) return value;
+  return `${value.slice(0, RAW_TEXT_DISPLAY_MAX)}…`;
+}
+
+export function ScanResultSheet({
+  target,
+  resolving,
+  onAssetUpdated,
+  onDismiss,
+}: {
+  target: ResolverResult | null;
+  resolving: boolean;
+  onAssetUpdated: (asset: AssetDetail) => void;
+  onDismiss: () => void;
+}) {
+  if (target?.status === "asset") {
+    return (
+      <AssetActionsSheet
+        open={true}
+        asset={target.asset}
+        onOpenChange={(open) => {
+          if (!open) onDismiss();
+        }}
+        onAssetUpdated={onAssetUpdated}
+        dismissLabel="Scan another ↓"
+        testIdPrefix="scan"
+      />
+    );
+  }
+
+  if (target?.status === "unresolved") {
+    return (
+      <MobileActionSheet
+        open={true}
+        onOpenChange={(next) => (next ? null : onDismiss())}
+        title="Couldn't find an asset"
+        description={
+          target.rawText
+            ? `The code was "${truncateForDisplay(target.rawText)}" but doesn't match any asset you can access.`
+            : "Try scanning again or enter the tag manually."
+        }
+      >
+        <div className="flex gap-2" data-testid="scan-result-unresolved">
+          <Button
+            type="button"
+            className="flex-1 cursor-pointer"
+            data-testid="scan-result-retry"
+            onClick={onDismiss}
+          >
+            Try again
+          </Button>
+        </div>
+      </MobileActionSheet>
+    );
+  }
+
+  if (resolving) {
+    return (
+      <MobileActionSheet
+        open={true}
+        // Stay dismissible while resolving — a slow lookup shouldn't trap the
+        // user in a modal. The resolver is idempotent and the caller already
+        // guards state updates with a mounted ref.
+        onOpenChange={(next) => (next ? null : onDismiss())}
+        title="Looking up asset…"
+        description="Resolving the scanned code."
+        hideHeader
+        aria-label="Looking up asset"
+      >
+        <p className="py-2 text-center text-sm text-muted-foreground">
+          Looking up asset…
+        </p>
+      </MobileActionSheet>
+    );
+  }
+
+  return null;
+}
diff --git a/src/components/scan/scan-viewport.tsx b/src/components/scan/scan-viewport.tsx
new file mode 100644
index 0000000..e7f36f1
--- /dev/null
+++ b/src/components/scan/scan-viewport.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { ScanDetectedOverlay } from "@/components/scan/scan-detected-overlay";
+import type { ScanResultPoint } from "@/hooks/use-barcode-scanner";
+import { cn } from "@/lib/utils";
+
+export type DetectedPhase = "detecting" | "confirmed";
+
+export type DetectedFrame = {
+  points: ScanResultPoint[];
+  videoWidth: number;
+  videoHeight: number;
+  phase: DetectedPhase;
+};
+
+export function ScanViewport({
+  videoRef,
+  active,
+  detected,
+  className,
+}: {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  active: boolean;
+  detected: DetectedFrame | null;
+  className?: string;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const update = () =>
+      setSize({ width: node.clientWidth, height: node.clientHeight });
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative aspect-square w-full max-w-md overflow-hidden rounded-2xl bg-black",
+        className,
+      )}
+      data-testid="scan-viewport"
+      data-active={active}
+      data-detected={Boolean(detected)}
+      data-phase={detected?.phase ?? "idle"}
+    >
+      <video
+        ref={videoRef}
+        className="absolute inset-0 h-full w-full object-cover"
+        playsInline
+        muted
+        autoPlay
+        aria-hidden="true"
+      />
+      {detected ? null : <ScanReticle />}
+      {detected ? (
+        <ScanDetectedOverlay
+          phase={detected.phase}
+          points={detected.points}
+          videoWidth={detected.videoWidth}
+          videoHeight={detected.videoHeight}
+          viewportWidth={size.width}
+          viewportHeight={size.height}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ScanReticle() {
+  const color = "var(--scan)";
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      <div className="relative h-[68%] w-[68%]">
+        <Corner className="left-0 top-0" rotate="0deg" color={color} />
+        <Corner className="right-0 top-0" rotate="90deg" color={color} />
+        <Corner className="right-0 bottom-0" rotate="180deg" color={color} />
+        <Corner className="left-0 bottom-0" rotate="270deg" color={color} />
+      </div>
+    </div>
+  );
+}
+
+function Corner({
+  className,
+  rotate,
+  color,
+}: {
+  className: string;
+  rotate: string;
+  color: string;
+}) {
+  return (
+    <div
+      className={cn("absolute h-6 w-6", className)}
+      style={{ transform: `rotate(${rotate})` }}
+    >
+      <div
+        className="absolute left-0 top-0 h-[2px] w-full transition-colors duration-150"
+        style={{ background: color }}
+      />
+      <div
+        className="absolute left-0 top-0 h-full w-[2px] transition-colors duration-150"
+        style={{ background: color }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/services/service-group-assets-panel.tsx b/src/components/services/service-group-assets-panel.tsx
index d5e5617..9ce6d09 100644
--- a/src/components/services/service-group-assets-panel.tsx
+++ b/src/components/services/service-group-assets-panel.tsx
@@ -29,8 +29,49 @@ export function ServiceGroupAssetsPanel({ groupId }: { groupId: string }) {
         </p>
       </div>
 
-      <div className="mt-4 overflow-x-auto rounded-lg border border-border/60">
-        <table className="min-w-full text-sm">
+      {rowsQuery.isPending ? (
+        <p className="mt-4 text-sm text-muted-foreground md:hidden">
+          Loading assets...
+        </p>
+      ) : assets.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground md:hidden">
+          No assets are currently assigned to this group.
+        </p>
+      ) : (
+        <ul
+          className="mt-4 flex flex-col gap-2 md:hidden"
+          data-testid="service-group-assets-card-list"
+        >
+          {assets.map((asset) => (
+            <li
+              key={asset.id}
+              data-testid={`service-group-asset-card-${asset.id}`}
+              className="rounded-lg border border-border/70 bg-card shadow-sm transition hover:border-primary/30 hover:bg-accent/40"
+            >
+              <Link
+                href={`/assets/${asset.id}`}
+                className="flex items-start justify-between gap-3 p-3"
+              >
+                <div className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-semibold">
+                    {asset.name}
+                  </span>
+                  <p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+                    {asset.assetTag}
+                  </p>
+                </div>
+                <StatusBadge status={asset.status} />
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
+        <table
+          className="min-w-full text-sm"
+          data-testid="service-group-assets-table"
+        >
           <thead className="bg-muted/40 text-left">
             <tr>
               <th className="px-3 py-2 font-medium">Asset</th>
diff --git a/src/components/services/service-group-fields-panel.tsx b/src/components/services/service-group-fields-panel.tsx
index 0143a92..c710ab7 100644
--- a/src/components/services/service-group-fields-panel.tsx
+++ b/src/components/services/service-group-fields-panel.tsx
@@ -1,7 +1,15 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { GripVertical, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
+import {
+  ArrowDown,
+  ArrowUp,
+  GripVertical,
+  Loader2,
+  Pencil,
+  Plus,
+  Trash2,
+} from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
@@ -376,6 +384,18 @@ export function ServiceGroupFieldsPanel({
   const submitting = createMutation.isPending || updateMutation.isPending;
   const reordering = reorderMutation.isPending;
 
+  function moveFieldByOffset(fieldId: string, offset: number) {
+    const index = fields.findIndex((field) => field.id === fieldId);
+    const targetIndex = index + offset;
+    if (index === -1 || targetIndex < 0 || targetIndex >= fields.length) {
+      return;
+    }
+
+    const next = fields.map((field) => field.id);
+    [next[index], next[targetIndex]] = [next[targetIndex], next[index]];
+    void handleReorder(next);
+  }
+
   return (
     <>
       <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
@@ -385,7 +405,14 @@ export function ServiceGroupFieldsPanel({
               Required record fields
             </h3>
             <p className="text-xs text-muted-foreground">
-              Drag to reorder the fields shown when a service record is logged.
+              <span className="hidden md:inline">
+                Drag to reorder the fields shown when a service record is
+                logged.
+              </span>
+              <span className="md:hidden">
+                Use the buttons to reorder the fields shown when a service
+                record is logged.
+              </span>
             </p>
           </div>
           {canManage ? (
@@ -405,8 +432,109 @@ export function ServiceGroupFieldsPanel({
           ) : null}
         </div>
 
-        <div className="mt-4 overflow-x-auto rounded-lg border border-border/60">
-          <table className="min-w-full text-sm">
+        {rowsQuery.isPending ? (
+          <p className="mt-4 text-sm text-muted-foreground md:hidden">
+            Loading service fields...
+          </p>
+        ) : fields.length === 0 ? (
+          <p className="mt-4 text-sm text-muted-foreground md:hidden">
+            No fields yet. Add required service fields for this group.
+          </p>
+        ) : (
+          <ul
+            className="mt-4 flex flex-col gap-2 md:hidden"
+            data-testid="service-group-fields-card-list"
+          >
+            {fields.map((field, index) => (
+              <li
+                key={field.id}
+                data-testid={`service-group-field-card-${field.id}`}
+                className="flex items-start justify-between gap-3 rounded-lg border border-border/70 bg-card p-3 shadow-sm"
+              >
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="inline-flex shrink-0 items-center rounded-md border border-border/70 bg-muted/20 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+                      {field.sortOrder + 1}
+                    </span>
+                    <p className="truncate text-sm font-semibold">
+                      {field.label}
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <Badge className="bg-muted/20 capitalize">
+                      {field.fieldType}
+                    </Badge>
+                    {field.required ? (
+                      <Badge className="border-amber-300/70 bg-amber-100 text-amber-900 dark:border-amber-400/30 dark:bg-amber-500/15 dark:text-amber-200">
+                        Required
+                      </Badge>
+                    ) : null}
+                  </div>
+                </div>
+                {canManage ? (
+                  <div className="flex shrink-0 items-center gap-1">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="cursor-pointer"
+                      disabled={reordering || index === 0}
+                      onClick={() => moveFieldByOffset(field.id, -1)}
+                      aria-label={`Move field ${field.label} up`}
+                    >
+                      <ArrowUp className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="cursor-pointer"
+                      disabled={reordering || index === fields.length - 1}
+                      onClick={() => moveFieldByOffset(field.id, 1)}
+                      aria-label={`Move field ${field.label} down`}
+                    >
+                      <ArrowDown className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="cursor-pointer"
+                      onClick={() => {
+                        setEditorMode("edit");
+                        setActiveFieldId(field.id);
+                        setEditorOpen(true);
+                      }}
+                      aria-label={`Edit field ${field.label}`}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      className="cursor-pointer text-destructive"
+                      onClick={() => setDeleteFieldId(field.id)}
+                      aria-label={`Delete field ${field.label}`}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ) : (
+                  <span className="text-xs text-muted-foreground">
+                    Read only
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
+          <table
+            className="min-w-full text-sm"
+            data-testid="service-group-fields-table"
+          >
             <thead className="bg-muted/40 text-left">
               <tr>
                 <th className="w-10 px-3 py-2 font-medium">Order</th>
diff --git a/src/components/services/service-groups-list.tsx b/src/components/services/service-groups-list.tsx
index 71c8c13..5cacea8 100644
--- a/src/components/services/service-groups-list.tsx
+++ b/src/components/services/service-groups-list.tsx
@@ -158,8 +158,93 @@ export function ServiceGroupsList() {
           ) : null}
         </div>
 
-        <div className="mt-4 overflow-x-auto rounded-lg border border-border/60">
-          <table className="min-w-full text-sm">
+        {groupsQuery.isPending ? (
+          <p className="mt-4 text-sm text-muted-foreground md:hidden">
+            Loading service groups...
+          </p>
+        ) : rows.length === 0 ? (
+          <p className="mt-4 text-sm text-muted-foreground md:hidden">
+            No service groups yet.
+          </p>
+        ) : (
+          <ul
+            className="mt-4 flex flex-col gap-2 md:hidden"
+            data-testid="service-groups-card-list"
+          >
+            {rows.map((group) => (
+              <li
+                key={group.id}
+                data-testid={`service-group-card-${group.id}`}
+                className="rounded-lg border border-border/70 bg-card p-3 shadow-sm"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <Link
+                      href={`/services/groups/${group.id}`}
+                      className="block truncate text-sm font-semibold hover:text-primary"
+                    >
+                      {group.name}
+                    </Link>
+                    {group.description ? (
+                      <p className="line-clamp-2 text-xs text-muted-foreground">
+                        {group.description}
+                      </p>
+                    ) : null}
+                    <p className="text-[11px] text-muted-foreground">
+                      {group.fieldCount} field
+                      {group.fieldCount === 1 ? "" : "s"} · {group.assetCount}{" "}
+                      asset
+                      {group.assetCount === 1 ? "" : "s"}
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 flex-col items-end gap-1">
+                    <Button
+                      asChild
+                      variant="ghost"
+                      size="sm"
+                      className="cursor-pointer"
+                    >
+                      <Link href={`/services/groups/${group.id}`}>Open</Link>
+                    </Button>
+                    {canManage ? (
+                      <div className="flex items-center gap-1">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="cursor-pointer"
+                          onClick={() => {
+                            setEditorMode("edit");
+                            setActiveGroup(group);
+                            setEditorOpen(true);
+                          }}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-sm"
+                          className="cursor-pointer text-destructive"
+                          onClick={() => setDeleteGroupId(group.id)}
+                          aria-label={`Delete ${group.name}`}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
+          <table
+            className="min-w-full text-sm"
+            data-testid="service-groups-table"
+          >
             <thead className="bg-muted/40 text-left">
               <tr>
                 <th className="px-3 py-2 font-medium">Name</th>
diff --git a/src/components/services/services-scheduled-list.tsx b/src/components/services/services-scheduled-list.tsx
index 6b1e8f5..0290142 100644
--- a/src/components/services/services-scheduled-list.tsx
+++ b/src/components/services/services-scheduled-list.tsx
@@ -2,13 +2,22 @@
 
 import Link from "next/link";
 import { useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { LogServiceDialog } from "@/components/services/log-service-dialog";
 import type { ScheduledServiceItem } from "@/components/services/types";
 import { listScheduledAssets } from "@/lib/api/service-schedules";
-import { formatDateFromIsoDateOnly } from "@/lib/date-format";
+import {
+  formatDateFromIsoDateOnly,
+  type AppDateFormat,
+} from "@/lib/date-format";
 import { useAppDateFormat } from "@/lib/use-app-date-format";
 import { useTodayIsoDate } from "@/lib/use-today-iso-date";
 
@@ -18,6 +27,64 @@ type ActiveTarget = {
   assetName: string;
 };
 
+type BucketKey = "overdue" | "thisWeek" | "thisMonth" | "upcoming";
+
+const BUCKET_ORDER: BucketKey[] = [
+  "overdue",
+  "thisWeek",
+  "thisMonth",
+  "upcoming",
+];
+
+const BUCKET_LABELS: Record<BucketKey, string> = {
+  overdue: "Overdue",
+  thisWeek: "Due this week",
+  thisMonth: "Due this month",
+  upcoming: "Upcoming",
+};
+
+const BUCKET_ACCENTS: Record<BucketKey, string> = {
+  overdue: "text-rose-700 dark:text-rose-300",
+  thisWeek: "text-amber-700 dark:text-amber-300",
+  thisMonth: "text-foreground",
+  upcoming: "text-muted-foreground",
+};
+
+function daysBetween(fromIso: string, toIso: string) {
+  const start = new Date(`${fromIso}T00:00:00Z`).getTime();
+  const end = new Date(`${toIso}T00:00:00Z`).getTime();
+  return Math.round((end - start) / (1000 * 60 * 60 * 24));
+}
+
+function bucketForRow(row: ScheduledServiceItem, today: string): BucketKey {
+  const diff = daysBetween(today, row.nextServiceDate);
+  if (diff < 0) return "overdue";
+  if (row.reminderStartDate > today) return "upcoming";
+  if (diff <= 7) return "thisWeek";
+  if (diff <= 30) return "thisMonth";
+  return "upcoming";
+}
+
+function relativeDueDescription(
+  nextServiceDate: string,
+  today: string,
+): string {
+  const diff = daysBetween(today, nextServiceDate);
+  if (diff < 0) {
+    const overdue = Math.abs(diff);
+    return `${overdue} day${overdue === 1 ? "" : "s"} overdue`;
+  }
+  if (diff === 0) return "Due today";
+  if (diff === 1) return "Due tomorrow";
+  if (diff <= 7) return `Due in ${diff} days`;
+  if (diff <= 30) {
+    const weeks = Math.round(diff / 7);
+    return `Due in ${weeks} week${weeks === 1 ? "" : "s"}`;
+  }
+  const months = Math.round(diff / 30);
+  return `Due in ${months} month${months === 1 ? "" : "s"}`;
+}
+
 function getScheduleStatus({
   nextServiceDate,
   reminderStartDate,
@@ -38,16 +105,6 @@ function getScheduleStatus({
   return "scheduled" as const;
 }
 
-function getDaysOverdue(nextServiceDate: string, today: string) {
-  if (nextServiceDate >= today) {
-    return 0;
-  }
-
-  const start = new Date(`${nextServiceDate}T00:00:00Z`).getTime();
-  const end = new Date(`${today}T00:00:00Z`).getTime();
-  return Math.max(0, Math.round((end - start) / (1000 * 60 * 60 * 24)));
-}
-
 const STATUS_LABELS: Record<ReturnType<typeof getScheduleStatus>, string> = {
   overdue: "Overdue",
   due_soon: "Due soon",
@@ -85,6 +142,7 @@ export function ServicesScheduledList() {
     () => (rowsQuery.data ?? []) as ScheduledServiceItem[],
     [rowsQuery.data],
   );
+  const grouped = useMemo(() => groupByBucket(items, today), [items, today]);
 
   if (rowsQuery.isPending) {
     return (
@@ -104,96 +162,19 @@ export function ServicesScheduledList() {
 
   return (
     <>
-      <div className="space-y-3">
-        {items.map((row) => {
-          const status = getScheduleStatus({
-            nextServiceDate: row.nextServiceDate,
-            reminderStartDate: row.reminderStartDate,
-            today,
-          });
-          const daysOverdue = getDaysOverdue(row.nextServiceDate, today);
-
+      <div className="space-y-3" data-testid="services-scheduled-list">
+        {BUCKET_ORDER.map((bucket) => {
+          const rows = grouped[bucket];
+          if (rows.length === 0) return null;
           return (
-            <article
-              key={row.scheduleId}
-              className={`rounded-xl border border-border/70 bg-background shadow-sm transition hover:border-primary/30 ${URGENCY_STRIPE[status]}`}
-            >
-              <div className="flex flex-wrap items-start justify-between gap-3 px-4 py-3">
-                <div className="space-y-2">
-                  <div>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Link
-                        href={`/assets/${row.assetId}`}
-                        className="text-sm font-semibold tracking-tight hover:text-primary"
-                      >
-                        {row.assetName}
-                      </Link>
-                      <span className="font-mono text-xs text-muted-foreground">
-                        {row.assetTag}
-                      </span>
-                    </div>
-                    <p className="mt-0.5 text-xs text-muted-foreground">
-                      Due:{" "}
-                      {formatDateFromIsoDateOnly(
-                        row.nextServiceDate,
-                        dateFormat,
-                      )}
-                    </p>
-                  </div>
-
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Badge className={STATUS_CLASSNAMES[status]}>
-                      {STATUS_LABELS[status]}
-                    </Badge>
-                    {daysOverdue > 0 ? (
-                      <Badge className="bg-rose-500/10 text-rose-800 dark:text-rose-300">
-                        {daysOverdue} day{daysOverdue === 1 ? "" : "s"} overdue
-                      </Badge>
-                    ) : null}
-                  </div>
-
-                  <div className="space-y-0.5 text-xs text-muted-foreground">
-                    {row.lastServiceDate ? (
-                      <p>
-                        Last service{" "}
-                        {formatDateFromIsoDateOnly(
-                          row.lastServiceDate,
-                          dateFormat,
-                        )}
-                        {row.lastServiceProviderName
-                          ? ` • ${row.lastServiceProviderName}`
-                          : ""}
-                      </p>
-                    ) : (
-                      <p>No previous service record</p>
-                    )}
-                    {row.lastServiceDescription ? (
-                      <p className="line-clamp-2">
-                        {row.lastServiceDescription}
-                      </p>
-                    ) : null}
-                  </div>
-                </div>
-
-                <div className="flex flex-wrap items-center gap-2">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    className="cursor-pointer"
-                    onClick={() =>
-                      setActiveTarget({
-                        scheduleId: row.scheduleId,
-                        assetId: row.assetId,
-                        assetName: row.assetName,
-                      })
-                    }
-                  >
-                    Log service
-                  </Button>
-                </div>
-              </div>
-            </article>
+            <ServicesGroupSection
+              key={bucket}
+              bucket={bucket}
+              rows={rows}
+              today={today}
+              dateFormat={dateFormat}
+              onLog={setActiveTarget}
+            />
           );
         })}
       </div>
@@ -208,3 +189,147 @@ export function ServicesScheduledList() {
     </>
   );
 }
+
+function groupByBucket(rows: ScheduledServiceItem[], today: string) {
+  const groups: Record<BucketKey, ScheduledServiceItem[]> = {
+    overdue: [],
+    thisWeek: [],
+    thisMonth: [],
+    upcoming: [],
+  };
+  for (const row of rows) {
+    groups[bucketForRow(row, today)].push(row);
+  }
+  return groups;
+}
+
+function ServicesGroupSection({
+  bucket,
+  rows,
+  today,
+  dateFormat,
+  onLog,
+}: {
+  bucket: BucketKey;
+  rows: ScheduledServiceItem[];
+  today: string;
+  dateFormat: AppDateFormat;
+  onLog: (target: ActiveTarget) => void;
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="rounded-xl border border-border/70 bg-background shadow-sm"
+      data-testid={`services-group-${bucket}`}
+    >
+      <CollapsibleTrigger className="flex w-full items-center justify-between px-4 py-3 text-left">
+        <div className="flex items-center gap-2">
+          <span className={`text-sm font-semibold ${BUCKET_ACCENTS[bucket]}`}>
+            {BUCKET_LABELS[bucket]}
+          </span>
+          <Badge className="border border-border/60 bg-muted/30 text-xs text-muted-foreground">
+            {rows.length}
+          </Badge>
+        </div>
+        <ChevronDown
+          className={`h-4 w-4 text-muted-foreground transition-transform ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <ul className="space-y-2 border-t border-border/60 px-3 py-3">
+          {rows.map((row) => (
+            <li key={row.scheduleId}>
+              <ScheduledServiceCard
+                row={row}
+                today={today}
+                dateFormat={dateFormat}
+                onLog={() =>
+                  onLog({
+                    scheduleId: row.scheduleId,
+                    assetId: row.assetId,
+                    assetName: row.assetName,
+                  })
+                }
+              />
+            </li>
+          ))}
+        </ul>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function ScheduledServiceCard({
+  row,
+  today,
+  dateFormat,
+  onLog,
+}: {
+  row: ScheduledServiceItem;
+  today: string;
+  dateFormat: AppDateFormat;
+  onLog: () => void;
+}) {
+  const status = getScheduleStatus({
+    nextServiceDate: row.nextServiceDate,
+    reminderStartDate: row.reminderStartDate,
+    today,
+  });
+  const relative = relativeDueDescription(row.nextServiceDate, today);
+
+  return (
+    <article
+      className={`rounded-lg border border-border/70 bg-card shadow-sm transition hover:border-primary/30 ${URGENCY_STRIPE[status]}`}
+      data-testid={`scheduled-service-${row.scheduleId}`}
+    >
+      <div className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0 space-y-1.5">
+          <div className="flex flex-wrap items-center gap-2">
+            <Link
+              href={`/assets/${row.assetId}`}
+              className="truncate text-sm font-semibold tracking-tight hover:text-primary"
+            >
+              {row.assetName}
+            </Link>
+            <span className="font-mono text-xs text-muted-foreground">
+              {row.assetTag}
+            </span>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">{relative}</span>
+            <span> · </span>
+            {formatDateFromIsoDateOnly(row.nextServiceDate, dateFormat)}
+          </p>
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge className={STATUS_CLASSNAMES[status]}>
+              {STATUS_LABELS[status]}
+            </Badge>
+          </div>
+          {row.lastServiceDate ? (
+            <p className="text-xs text-muted-foreground">
+              Last service{" "}
+              {formatDateFromIsoDateOnly(row.lastServiceDate, dateFormat)}
+              {row.lastServiceProviderName
+                ? ` • ${row.lastServiceProviderName}`
+                : ""}
+            </p>
+          ) : null}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="cursor-pointer sm:self-start"
+          onClick={onLog}
+          data-testid={`log-service-${row.scheduleId}`}
+        >
+          Log service
+        </Button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/settings/user-management-section.tsx b/src/components/settings/user-management-section.tsx
index f564d6e..a46fecb 100644
--- a/src/components/settings/user-management-section.tsx
+++ b/src/components/settings/user-management-section.tsx
@@ -203,8 +203,100 @@ export function UserManagementSection({
         </Button>
       </div>
 
-      <div className="mt-4 overflow-x-auto rounded-lg border border-border/60">
-        <table className="min-w-full text-sm">
+      {usersQuery.isPending ? (
+        <p className="mt-4 text-sm text-muted-foreground md:hidden">
+          Loading users...
+        </p>
+      ) : usersQuery.isError ? (
+        <p
+          role="alert"
+          className="mt-4 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive md:hidden"
+        >
+          Could not load users. Please try again.
+        </p>
+      ) : rows.length === 0 ? (
+        <p className="mt-4 text-sm text-muted-foreground md:hidden">
+          No users found.
+        </p>
+      ) : (
+        <ul
+          className="mt-4 flex flex-col gap-2 md:hidden"
+          data-testid="users-card-list"
+        >
+          {rows.map((user) => {
+            const pendingRole = roleEdits[user.id] ?? user.role;
+            const roleChanged = pendingRole !== user.role;
+            const isSaving = savingRoleUserId === user.id;
+            return (
+              <li
+                key={user.id}
+                data-testid={`user-card-${user.id}`}
+                className="space-y-2 rounded-lg border border-border/70 bg-card p-3 shadow-sm"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="truncate text-sm font-semibold">
+                        {user.name}
+                      </span>
+                      {user.id === currentUserId ? (
+                        <span className="rounded-full border border-border/70 bg-muted/40 px-2 py-0.5 text-[11px] text-muted-foreground">
+                          You
+                        </span>
+                      ) : null}
+                    </div>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {user.email}
+                    </p>
+                    <p className="text-[11px] text-muted-foreground">
+                      Created {formatCreatedDate(user.createdAt, dateFormat)}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Select
+                    value={pendingRole}
+                    onValueChange={(value) =>
+                      setRoleEdits((prev) => ({
+                        ...prev,
+                        [user.id]: value as "admin" | "user",
+                      }))
+                    }
+                    disabled={isSaving}
+                  >
+                    <SelectTrigger
+                      className="h-9 flex-1"
+                      aria-label={`Role for ${user.name}`}
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="user">User</SelectItem>
+                      <SelectItem value="admin">Admin</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="cursor-pointer"
+                    disabled={!roleChanged || isSaving}
+                    onClick={() => void handleSaveRole(user.id, user.role)}
+                  >
+                    {isSaving ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : null}
+                    Save
+                  </Button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
+        <table className="min-w-full text-sm" data-testid="users-table">
           <thead className="bg-muted/40 text-left">
             <tr>
               <th className="px-3 py-2 font-medium">Name</th>
@@ -215,7 +307,16 @@ export function UserManagementSection({
             </tr>
           </thead>
           <tbody>
-            {usersQuery.isPending ? null : rows.length === 0 ? (
+            {usersQuery.isPending ? null : usersQuery.isError ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="px-3 py-6 text-center text-destructive"
+                >
+                  Could not load users. Please try again.
+                </td>
+              </tr>
+            ) : rows.length === 0 ? (
               <tr>
                 <td
                   colSpan={5}
diff --git a/src/hooks/use-barcode-scanner.ts b/src/hooks/use-barcode-scanner.ts
new file mode 100644
index 0000000..9ce0234
--- /dev/null
+++ b/src/hooks/use-barcode-scanner.ts
@@ -0,0 +1,315 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import type { IScannerControls } from "@zxing/browser";
+
+export type ScanResultPoint = { x: number; y: number };
+
+export type ScanResult = {
+  text: string;
+  format: string;
+  points: ScanResultPoint[];
+  videoWidth: number;
+  videoHeight: number;
+};
+
+export type ScannerState =
+  | "idle"
+  | "requesting"
+  | "scanning"
+  | "denied"
+  | "insecure"
+  | "error";
+
+export type TorchControls = {
+  supported: boolean;
+  on: boolean;
+  toggle: () => void;
+};
+
+export type UseBarcodeScannerOptions = {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  onResult: (result: ScanResult) => void;
+  enabled: boolean;
+  /** Duplicate-suppression window in ms. Same text within this window fires once. */
+  dedupeWindowMs?: number;
+};
+
+export type UseBarcodeScannerReturn = {
+  state: ScannerState;
+  error: string | null;
+  torch: TorchControls;
+  restart: () => void;
+};
+
+const DEFAULT_DEDUPE_WINDOW_MS = 2000;
+const MAX_SCAN_TEXT_LENGTH = 2048;
+// zxing DecodeHintType enum key for POSSIBLE_FORMATS (inlined to avoid
+// importing from @zxing/library, which is only a transitive dep).
+const DECODE_HINT_POSSIBLE_FORMATS = 2;
+
+export function useBarcodeScanner(
+  options: UseBarcodeScannerOptions,
+): UseBarcodeScannerReturn {
+  const { videoRef, onResult, enabled } = options;
+  const dedupeWindowMs = options.dedupeWindowMs ?? DEFAULT_DEDUPE_WINDOW_MS;
+
+  const [state, setState] = useState<ScannerState>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [torchSupported, setTorchSupported] = useState(false);
+  const [torchOn, setTorchOn] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+
+  const controlsRef = useRef<IScannerControls | null>(null);
+  const lastResultRef = useRef<{ text: string; at: number } | null>(null);
+  const onResultRef = useRef(onResult);
+  onResultRef.current = onResult;
+
+  useEffect(() => {
+    // Capture the video node at effect-run time so the cleanup below always
+    // releases the tracks on the element we wired up, even if the ref has
+    // been re-pointed (React will re-run the effect in that case anyway).
+    const videoAtMount = videoRef.current;
+
+    if (!enabled) {
+      teardown(controlsRef);
+      clearVideoSource(videoAtMount);
+      setState("idle");
+      setError(null);
+      setTorchSupported(false);
+      setTorchOn(false);
+      lastResultRef.current = null;
+      return;
+    }
+
+    let cancelled = false;
+
+    const run = async () => {
+      if (typeof window === "undefined") return;
+      if (!window.isSecureContext) {
+        setState("insecure");
+        setError(null);
+        return;
+      }
+
+      if (!navigator.mediaDevices?.getUserMedia) {
+        setState("error");
+        setError("Camera API is not available in this browser.");
+        return;
+      }
+
+      setState("requesting");
+      setError(null);
+
+      try {
+        const zxing = await import("@zxing/browser");
+        const { BrowserMultiFormatReader, BarcodeFormat } = zxing;
+        const hints = new Map<number, unknown>();
+        hints.set(DECODE_HINT_POSSIBLE_FORMATS, [
+          BarcodeFormat.CODE_128,
+          BarcodeFormat.DATA_MATRIX,
+          BarcodeFormat.QR_CODE,
+        ]);
+        const reader = new BrowserMultiFormatReader(hints);
+
+        const video = videoRef.current;
+        if (!video) {
+          setState("error");
+          setError("Video element is not available.");
+          return;
+        }
+
+        const controls = await reader.decodeFromConstraints(
+          { video: { facingMode: { ideal: "environment" } } },
+          video,
+          (result) => {
+            if (cancelled || !result) return;
+            const raw = safeGetText(result);
+            if (!raw) return;
+            const text =
+              raw.length > MAX_SCAN_TEXT_LENGTH
+                ? raw.slice(0, MAX_SCAN_TEXT_LENGTH)
+                : raw;
+            const now = Date.now();
+            const last = lastResultRef.current;
+            if (last && last.text === text && now - last.at < dedupeWindowMs) {
+              return;
+            }
+            lastResultRef.current = { text, at: now };
+            const format = safeGetFormat(result);
+            const points = safeGetPoints(result);
+            const videoEl = videoRef.current;
+            onResultRef.current({
+              text,
+              format,
+              points,
+              videoWidth: videoEl?.videoWidth ?? 0,
+              videoHeight: videoEl?.videoHeight ?? 0,
+            });
+          },
+        );
+
+        if (cancelled) {
+          controls.stop();
+          clearVideoSource(videoAtMount);
+          return;
+        }
+
+        // If a previous effect instance already left controls behind (e.g.,
+        // two quick `enabled` toggles during the async init above), stop it
+        // before replacing — otherwise the old MediaStream keeps the camera
+        // indicator on.
+        const previous = controlsRef.current;
+        if (previous) {
+          try {
+            previous.stop();
+          } catch {
+            // ignore
+          }
+        }
+        controlsRef.current = controls;
+        setState("scanning");
+
+        const capabilities = controls.streamVideoCapabilitiesGet?.(firstTrack);
+        const supportsTorch = Boolean(
+          capabilities && "torch" in capabilities && capabilities.torch,
+        );
+        setTorchSupported(supportsTorch);
+        setTorchOn(false);
+      } catch (err) {
+        if (cancelled) return;
+        const mapped = mapGetUserMediaError(err);
+        setState(mapped.state);
+        setError(mapped.message);
+      }
+    };
+
+    void run();
+
+    return () => {
+      cancelled = true;
+      teardown(controlsRef);
+      clearVideoSource(videoAtMount);
+    };
+  }, [enabled, attempt, dedupeWindowMs, videoRef]);
+
+  const toggleTorch = useCallback(() => {
+    const controls = controlsRef.current;
+    if (!controls?.switchTorch) return;
+    const next = !torchOn;
+    void controls
+      .switchTorch(next)
+      .then(() => setTorchOn(next))
+      .catch((err) => {
+        // leave UI state as-is; log so operators can distinguish "unsupported"
+        // from "permission revoked mid-session" during incident response.
+        console.warn("[scanner] torch toggle failed", err);
+      });
+  }, [torchOn]);
+
+  const restart = useCallback(() => {
+    setAttempt((value) => value + 1);
+  }, []);
+
+  return {
+    state,
+    error,
+    torch: {
+      supported: torchSupported,
+      on: torchOn,
+      toggle: toggleTorch,
+    },
+    restart,
+  };
+}
+
+function teardown(controlsRef: RefObject<IScannerControls | null>) {
+  const controls = controlsRef.current;
+  controlsRef.current = null;
+  if (controls) {
+    try {
+      controls.stop();
+    } catch (err) {
+      console.warn("[scanner] controls.stop() failed", err);
+    }
+  }
+}
+
+function clearVideoSource(video: HTMLVideoElement | null) {
+  if (!video) return;
+  const stream = video.srcObject;
+  if (stream && "getTracks" in stream) {
+    try {
+      for (const track of (stream as MediaStream).getTracks()) {
+        track.stop();
+      }
+    } catch {
+      // ignore — zxing's stop() should have already released tracks
+    }
+  }
+  video.srcObject = null;
+}
+
+function firstTrack(track: MediaStreamTrack) {
+  return [track];
+}
+
+function safeGetText(result: unknown): string | null {
+  if (!result || typeof result !== "object") return null;
+  const maybe = result as { getText?: () => string; text?: string };
+  if (typeof maybe.getText === "function") return maybe.getText();
+  if (typeof maybe.text === "string") return maybe.text;
+  return null;
+}
+
+function safeGetPoints(result: unknown): ScanResultPoint[] {
+  if (!result || typeof result !== "object") return [];
+  const maybe = result as {
+    getResultPoints?: () => Array<{ getX?: () => number; getY?: () => number }>;
+    resultPoints?: Array<{ x?: number; y?: number }>;
+  };
+  const raw = maybe.getResultPoints?.() ?? maybe.resultPoints ?? [];
+  const points: ScanResultPoint[] = [];
+  for (const p of raw) {
+    if (!p) continue;
+    const getter = p as { getX?: () => number; getY?: () => number };
+    const fallback = p as { x?: number; y?: number };
+    const x = getter.getX?.() ?? fallback.x;
+    const y = getter.getY?.() ?? fallback.y;
+    if (typeof x === "number" && typeof y === "number") {
+      points.push({ x, y });
+    }
+  }
+  return points;
+}
+
+function safeGetFormat(result: unknown): string {
+  if (!result || typeof result !== "object") return "UNKNOWN";
+  const maybe = result as {
+    getBarcodeFormat?: () => number | string;
+    format?: number | string;
+  };
+  const raw = maybe.getBarcodeFormat?.() ?? maybe.format;
+  if (typeof raw === "string") return raw;
+  if (typeof raw === "number") return `FORMAT_${raw}`;
+  return "UNKNOWN";
+}
+
+function mapGetUserMediaError(err: unknown): {
+  state: ScannerState;
+  message: string;
+} {
+  if (err instanceof Error) {
+    if (err.name === "NotAllowedError" || err.name === "SecurityError") {
+      return { state: "denied", message: err.message };
+    }
+    return { state: "error", message: err.message };
+  }
+  return { state: "error", message: "Unknown scanner error." };
+}
diff --git a/src/hooks/use-media-query.ts b/src/hooks/use-media-query.ts
new file mode 100644
index 0000000..bb779b4
--- /dev/null
+++ b/src/hooks/use-media-query.ts
@@ -0,0 +1,30 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  // useSyncExternalStore is the SSR-safe primitive for this: on the server it
+  // uses `getServerSnapshot` (always `false`), and on the first client render
+  // it returns the real matchMedia value. React handles the transition
+  // without flagging a hydration mismatch, so consumers get the correct
+  // viewport value without the "flash desktop, then swap to mobile"
+  // behaviour that a `useState(false) + useEffect` pattern produces.
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (typeof window === "undefined" || !window.matchMedia) {
+        return () => {};
+      }
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia(query).matches;
+  }, [query]);
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
diff --git a/src/lib/api/assets.ts b/src/lib/api/assets.ts
index ab70d08..05ff776 100644
--- a/src/lib/api/assets.ts
+++ b/src/lib/api/assets.ts
@@ -114,6 +114,19 @@ export async function listAssets(
   return assets;
 }
 
+export async function getAssetByTag(
+  assetTag: string,
+): Promise<AssetDetail | null> {
+  const trimmed = assetTag.trim();
+  if (!trimmed) return null;
+  const matches = await listAssets({ search: trimmed });
+  const hit = matches.find(
+    (item) => item.assetTag.toLowerCase() === trimmed.toLowerCase(),
+  );
+  if (!hit) return null;
+  return getAsset(hit.id);
+}
+
 export async function getAsset(assetId: string): Promise<AssetDetail | null> {
   const { asset } = await apiFetch<{ asset: AssetDetail | null }>(
     `/api/assets/${assetId}`,
diff --git a/src/lib/api/auth.ts b/src/lib/api/auth.ts
index a169c77..3418a5e 100644
--- a/src/lib/api/auth.ts
+++ b/src/lib/api/auth.ts
@@ -33,9 +33,7 @@ export async function logout(): Promise<void> {
 }
 
 export async function checkFirstRun(): Promise<AuthBootstrapState> {
-  return await apiFetch<AuthBootstrapState>(
-    "/api/auth/first-run",
-  );
+  return apiFetch<AuthBootstrapState>("/api/auth/first-run");
 }
 
 export async function createFirstAdmin(input: {
diff --git a/src/lib/scan.ts b/src/lib/scan.ts
new file mode 100644
index 0000000..70c577b
--- /dev/null
+++ b/src/lib/scan.ts
@@ -0,0 +1,92 @@
+import type { AssetDetail } from "@/lib/api/assets";
+import { getAsset, getAssetByTag } from "@/lib/api/assets";
+
+export type ResolverResult =
+  | { status: "asset"; asset: AssetDetail }
+  | { status: "unresolved"; rawText: string };
+
+export type ResolverLookups = {
+  fetchById?: (id: string) => Promise<AssetDetail | null>;
+  fetchByTag?: (tag: string) => Promise<AssetDetail | null>;
+};
+
+export function extractStowageAssetId(
+  text: string,
+  appOrigin: string,
+): string | null {
+  if (!text) return null;
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return null;
+  }
+
+  const expectedOrigin = stripTrailingSlash(appOrigin);
+  if (stripTrailingSlash(parsed.origin) !== expectedOrigin) {
+    return null;
+  }
+
+  const segments = parsed.pathname.split("/").filter(Boolean);
+  const assetsIndex = segments.indexOf("assets");
+  if (assetsIndex === -1) return null;
+  const id = segments[assetsIndex + 1];
+  if (!id) return null;
+  return id;
+}
+
+export async function resolveScanTarget(
+  text: string,
+  appOrigin: string,
+  lookups: ResolverLookups = {},
+): Promise<ResolverResult> {
+  const raw = text?.trim() ?? "";
+  if (!raw) {
+    return { status: "unresolved", rawText: raw };
+  }
+
+  const fetchById = lookups.fetchById ?? getAsset;
+  const fetchByTag = lookups.fetchByTag ?? getAssetByTag;
+
+  const id = extractStowageAssetId(raw, appOrigin);
+  if (id) {
+    const asset = await safeLookup(() => fetchById(id));
+    if (asset) return { status: "asset", asset };
+    return { status: "unresolved", rawText: raw };
+  }
+
+  // Bare asset tag (manual entry). Only try this for inputs that look like an
+  // asset tag rather than a random URL — prevents us from accidentally sending
+  // arbitrary decoded text to a server-side search.
+  if (looksLikeAssetTag(raw)) {
+    const asset = await safeLookup(() => fetchByTag(raw));
+    if (asset) return { status: "asset", asset };
+  }
+
+  return { status: "unresolved", rawText: raw };
+}
+
+async function safeLookup(
+  fn: () => Promise<AssetDetail | null>,
+): Promise<AssetDetail | null> {
+  try {
+    return await fn();
+  } catch (error) {
+    console.warn("safeLookup failed while resolving a scanned asset", error);
+    return null;
+  }
+}
+
+function looksLikeAssetTag(value: string): boolean {
+  if (value.length === 0 || value.length > 64) return false;
+  if (/\s/.test(value)) return false;
+  if (/^https?:/i.test(value)) return false;
+  return /^[A-Za-z0-9_-]+$/.test(value);
+}
+
+function stripTrailingSlash(value: string): string {
+  return value.replace(/\/+$/, "");
+}