diff --git a/e2e/assets.spec.ts b/e2e/assets.spec.ts
index f26d956..20ad98b 100644
--- a/e2e/assets.spec.ts
+++ b/e2e/assets.spec.ts
@@ -18,7 +18,13 @@ test.describe.serial("phase 5 assets", () => {
     }
   });
 
-  test("can create, edit, and update status for an asset", async ({ page }) => {
+  test("can create, edit, and update status for an asset", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium",
+      "Desktop flow: phones use asset cards and the asset back bar",
+    );
     const email = process.env.E2E_AUTH_EMAIL;
     const password = process.env.E2E_AUTH_PASSWORD;
 
@@ -41,16 +47,16 @@ test.describe.serial("phase 5 assets", () => {
     await fillRequiredFields(page);
     await page.getByRole("button", { name: "Create asset" }).click();
     await expect(
-      page.getByRole("heading", { name: `${baseName} created` }),
+      page.getByRole("heading", { name: baseName, exact: true }),
     ).toBeVisible({
       timeout: 20_000,
     });
 
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/[^/]+$/, { timeout: 20_000 });
     await expect(page.getByRole("heading", { name: baseName })).toBeVisible();
 
-    await page.getByRole("link", { name: "Edit" }).click();
+    await page.getByRole("link", { name: "Edit", exact: true }).click();
     await page.waitForURL(/\/assets\/.+\/edit/, { timeout: 15_000 });
 
     const nameInput = page.getByLabel(/Name/i);
@@ -64,12 +70,7 @@ test.describe.serial("phase 5 assets", () => {
 
     await page.getByLabel("Change status").click();
     await page.getByRole("option", { name: "Retired" }).click();
-    await expect(
-      page
-        .locator("[data-slot='badge']")
-        .filter({ hasText: "Retired" })
-        .first(),
-    ).toBeVisible();
+    await expect(page.getByLabel("Change status")).toHaveText("Retired");
 
     await page.goto("/assets");
     await page.getByLabel("Search assets").fill(updatedName);
@@ -77,31 +78,26 @@ test.describe.serial("phase 5 assets", () => {
       page.locator("tbody tr").filter({ hasText: updatedName }),
     ).toBeVisible();
 
-    await page.getByLabel("Filter by status").click();
-    await page.getByRole("option", { name: "Retired" }).click();
+    await page
+      .getByRole("navigation", { name: "Status" })
+      .getByRole("button", { name: /^Retired/ })
+      .click();
     await expect(
       page.locator("tbody tr").filter({ hasText: updatedName }),
     ).toBeVisible();
 
-    await page
-      .locator("tbody tr")
-      .filter({ hasText: updatedName })
-      .first()
-      .click();
+    // Table rows open on click; the name cell is the safest hit target.
+    await page.getByRole("cell", { name: updatedName, exact: true }).click();
     await page.waitForURL(/\/assets\/.+$/, { timeout: 15_000 });
     await expect(
       page.getByRole("heading", { name: updatedName }),
     ).toBeVisible();
-    await expect(
-      page
-        .locator("[data-slot='badge']")
-        .filter({ hasText: "Retired" })
-        .first(),
-    ).toBeVisible();
+    await expect(page.getByLabel("Change status")).toHaveText("Retired");
 
-    await page.getByRole("button", { name: "Delete" }).click();
+    await page.getByRole("button", { name: "More actions" }).click();
+    await page.getByRole("menuitem", { name: "Delete…" }).click();
     await expect(
-      page.getByRole("heading", { name: "Delete asset" }),
+      page.getByRole("heading", { name: "Delete asset?" }),
     ).toBeVisible();
     await page.getByRole("button", { name: "Delete asset" }).click();
     await page.waitForURL(
diff --git a/e2e/attachments.spec.ts b/e2e/attachments.spec.ts
index 7023083..42281cf 100644
--- a/e2e/attachments.spec.ts
+++ b/e2e/attachments.spec.ts
@@ -30,7 +30,7 @@ test.describe.serial("phase 6 attachments", () => {
     await page.getByRole("button", { name: "Create asset" }).click();
 
     await expect(
-      page.getByRole("heading", { name: `${assetName} created` }),
+      page.getByRole("heading", { name: assetName, exact: true }),
     ).toBeVisible({
       timeout: 20_000,
     });
@@ -83,7 +83,7 @@ test.describe.serial("phase 6 attachments", () => {
       timeout: 15_000,
     });
 
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/.+$/, { timeout: 20_000 });
     await expect(page.getByRole("heading", { name: assetName })).toBeVisible();
   });
diff --git a/e2e/auth.spec.ts b/e2e/auth.spec.ts
index b9c3fee..0ba5f17 100644
--- a/e2e/auth.spec.ts
+++ b/e2e/auth.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test, type Page } from "@playwright/test";
-import { getLeafPathSegment, type Landing } from "./helpers";
+import { getLeafPathSegment, hideNextDevTools, type Landing } from "./helpers";
 
 async function getUnauthenticatedLanding(page: Page): Promise<Landing> {
   await page.goto("/dashboard");
@@ -70,7 +70,9 @@ test.describe.serial("auth flow", () => {
 
     const email = `playwright-invalid-${Date.now()}@example.com`;
     await page.getByLabel("Email").fill(email);
-    await page.getByLabel("Password").fill("not-the-right-password");
+    await page
+      .getByLabel("Password", { exact: true })
+      .fill("not-the-right-password");
 
     await expectNoLocalAuthProxyRequests(page, async () => {
       await page.getByRole("button", { name: "Sign in" }).click();
@@ -98,8 +100,9 @@ test.describe.serial("auth flow", () => {
     );
 
     await expect.poll(() => getLeafPathSegment(page.url())).toBe("login");
+    await hideNextDevTools(page);
     await page.getByLabel("Email").fill(email!);
-    await page.getByLabel("Password").fill(password!);
+    await page.getByLabel("Password", { exact: true }).fill(password!);
 
     await expectNoLocalAuthProxyRequests(page, async () => {
       await page.getByRole("button", { name: "Sign in" }).click();
@@ -111,14 +114,16 @@ test.describe.serial("auth flow", () => {
       );
     });
 
-    await page.getByLabel("Open user menu").click();
+    // The shell mounts a user menu per layout (sidebar, rail, phone bar);
+    // only the one for this viewport is visible.
+    await page.getByLabel("Open user menu").filter({ visible: true }).click();
     const logoutResponse = page.waitForResponse(
       (res) =>
         res.url().endsWith("/api/auth/logout") &&
         res.request().method() === "POST",
       { timeout: 10_000 },
     );
-    await page.getByRole("menuitem", { name: "Log out" }).click();
+    await page.getByRole("menuitem", { name: "Sign out" }).click();
     await logoutResponse;
     await page.waitForURL(
       (url) => getLeafPathSegment(url.toString()) === "login",
diff --git a/e2e/categories-tags-locations.spec.ts b/e2e/categories-tags-locations.spec.ts
index 8265e13..c9d9852 100644
--- a/e2e/categories-tags-locations.spec.ts
+++ b/e2e/categories-tags-locations.spec.ts
@@ -15,7 +15,11 @@ test.describe.serial("phase 3 pages", () => {
 
   test("admin can create category, tag, and nested locations", async ({
     page,
-  }) => {
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium",
+      "Desktop flow: phones replace the location tree with a picker",
+    );
     const email = process.env.E2E_AUTH_EMAIL;
     const password = process.env.E2E_AUTH_PASSWORD;
 
@@ -39,56 +43,76 @@ test.describe.serial("phase 3 pages", () => {
     const childName = `PW Child ${stamp}`;
     const grandchildName = `PW Bin ${stamp}`;
 
+    // /categories and /tags redirect to the taxonomy tabs.
     await page.goto("/categories");
-    await page.getByRole("button", { name: "Add Category" }).click();
-    const categoryDialog = page.getByRole("dialog");
+    await page.waitForURL(/\/taxonomy\?tab=categories/);
+    await page.getByRole("button", { name: "New category…" }).first().click();
+    const categoryDialog = page.getByRole("dialog", { name: "New category" });
     await categoryDialog.getByLabel("Name").fill(categoryName);
     await categoryDialog.getByLabel("Prefix").fill("PW");
     await categoryDialog.getByLabel("Description").fill("Playwright category");
     await categoryDialog
-      .getByRole("textbox", { name: "Color" })
-      .fill("#2563EB");
-    await page.getByRole("button", { name: "Create Category" }).click();
-    await expect(page.getByText(categoryName)).toBeVisible();
+      .getByRole("button", { name: "Create category" })
+      .click();
+    await expect(page.getByRole("link", { name: categoryName })).toBeVisible();
 
     await page.goto("/tags");
-    await page.getByRole("button", { name: "Add Tag" }).click();
-    const tagDialog = page.getByRole("dialog");
+    await page.waitForURL(/\/taxonomy\?tab=tags/);
+    await page.getByRole("button", { name: "New keyword…" }).first().click();
+    const tagDialog = page.getByRole("dialog", { name: "New keyword" });
     await tagDialog.getByLabel("Name").fill(tagName);
-    await tagDialog.getByRole("textbox", { name: "Color" }).fill("#E11D48");
-    await page.getByRole("button", { name: "Create Tag" }).click();
-    await expect(page.getByText(tagName)).toBeVisible();
+    await tagDialog.getByRole("button", { name: "Create keyword" }).click();
+    await expect(
+      page.getByRole("link", { name: `Assets with keyword ${tagName}` }),
+    ).toBeVisible();
+
+    // Locations: a site, a location inside it, and one inside that. Each new
+    // location becomes the selection and its row is revealed in the tree.
+    const tree = page.getByRole("list", { name: "Location tree" });
+    // A row's select button reads as its name followed by its asset count.
+    const treeRow = (name: string) =>
+      tree.getByRole("button", { name: new RegExp(`^${name}\\s*\\d+$`) });
+    const detail = page.getByTestId("location-detail");
 
     await page.goto("/locations");
-    await page
-      .getByRole("button", { name: "Add root location" })
-      .first()
-      .click();
-    let locationDialog = page.getByRole("dialog");
+    await page.getByRole("button", { name: "New location…" }).first().click();
+    let locationDialog = page.getByRole("dialog", { name: "New location" });
     await locationDialog.getByLabel("Name").fill(rootName);
-    await page.getByRole("button", { name: "Create location" }).click();
+    await locationDialog
+      .getByRole("button", { name: "Create location" })
+      .click();
     await expect(
-      page.getByRole("button", { name: `Actions for ${rootName}` }),
+      detail.getByRole("heading", { level: 2, name: rootName }),
     ).toBeVisible();
+    await expect(treeRow(rootName)).toHaveAttribute("aria-current", "true");
 
-    await page.getByRole("button", { name: `Actions for ${rootName}` }).click();
-    await page.getByRole("menuitem", { name: "Add child" }).click();
-    locationDialog = page.getByRole("dialog");
-    await locationDialog.getByLabel("Name").fill(childName);
-    await page.getByRole("button", { name: "Create location" }).click();
-    await expect(
-      page.getByRole("button", { name: `Actions for ${childName}` }),
-    ).toBeVisible();
+    for (const [parentName, name] of [
+      [rootName, childName],
+      [childName, grandchildName],
+    ]) {
+      await page.getByRole("button", { name: "Location actions" }).click();
+      await page
+        .getByRole("menuitem", { name: "New location inside…" })
+        .click();
+      locationDialog = page.getByRole("dialog", { name: "New location" });
+      await locationDialog.getByLabel("Name").fill(name);
+      await locationDialog
+        .getByRole("button", { name: "Create location" })
+        .click();
+      await expect(
+        detail.getByRole("heading", {
+          level: 2,
+          name: `${name} in ${parentName}`,
+        }),
+      ).toBeVisible();
+      await expect(treeRow(name)).toHaveAttribute("aria-current", "true");
+    }
 
-    await page
-      .getByRole("button", { name: `Actions for ${childName}` })
-      .click();
-    await page.getByRole("menuitem", { name: "Add child" }).click();
-    locationDialog = page.getByRole("dialog");
-    await locationDialog.getByLabel("Name").fill(grandchildName);
-    await page.getByRole("button", { name: "Create location" }).click();
+    // A location with something inside it cannot be deleted.
+    await treeRow(rootName).click();
+    await page.getByRole("button", { name: "Location actions" }).click();
     await expect(
-      page.getByRole("button", { name: `Actions for ${grandchildName}` }),
-    ).toBeVisible();
+      page.getByRole("menuitem", { name: /Delete…/ }),
+    ).toHaveAttribute("aria-disabled", "true");
   });
 });
diff --git a/e2e/dashboard.spec.ts b/e2e/dashboard.spec.ts
index 246e61d..dc8a3d7 100644
--- a/e2e/dashboard.spec.ts
+++ b/e2e/dashboard.spec.ts
@@ -6,6 +6,10 @@ import {
   signIn,
 } from "./helpers";
 
+// The dashboard title is today's date, e.g. "Saturday 7 November".
+const DATE_HEADING =
+  /^(Mon|Tues|Wednes|Thurs|Fri|Satur|Sun)day \d{1,2} [A-Z][a-z]+$/;
+
 function getStatusLabel(status: "active" | "retired") {
   return status === "retired" ? "Retired" : "Active";
 }
@@ -38,11 +42,11 @@ async function createAsset(
 
   await page.getByRole("button", { name: "Create asset" }).click();
   await expect(
-    page.getByRole("heading", { name: `${options.name} created` }),
+    page.getByRole("heading", { name: options.name, exact: true }),
   ).toBeVisible({
     timeout: 20_000,
   });
-  await page.getByRole("button", { name: "View asset" }).click();
+  await page.getByRole("button", { name: "Open asset" }).click();
   await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
 }
 
@@ -69,7 +73,7 @@ test.describe.serial("phase 10 dashboard", () => {
     await page.goto("/");
     await page.waitForURL(/\/dashboard$/, { timeout: 20_000 });
     await expect(
-      page.getByRole("heading", { name: /Welcome back|Dashboard/ }),
+      page.getByRole("heading", { level: 1, name: DATE_HEADING }),
     ).toBeVisible();
   });
 
@@ -108,35 +112,23 @@ test.describe.serial("phase 10 dashboard", () => {
 
     await page.goto("/dashboard");
     await expect(
-      page.getByRole("heading", { name: /Welcome back|Dashboard/ }),
+      page.getByRole("heading", { level: 1, name: DATE_HEADING }),
     ).toBeVisible();
-    await expect(
-      page.locator('[data-dashboard-stat="total"] [data-dashboard-stat-value]'),
-    ).toHaveText(/\d+/);
-    await expect(
-      page.locator(
-        '[data-dashboard-stat="active"] [data-dashboard-stat-value]',
-      ),
-    ).toHaveText(/\d+/);
-    await expect(
-      page.locator(
-        '[data-dashboard-stat="retired"] [data-dashboard-stat-value]',
-      ),
-    ).toHaveText(/\d+/);
-
-    const recentAssetsSection = page
-      .locator("section")
-      .filter({ hasText: "Recent assets" })
-      .first();
+    const stats = page.getByTestId("dashboard-stats-bar");
+    await expect(stats).toContainText(/\d+\s*Assets/);
+    await expect(stats).toContainText(/\d+\s*Retired/);
+
+    const recentAssetsSection = page.getByRole("region", {
+      name: "Recently updated",
+    });
     await expect(
       recentAssetsSection.getByText(scheduledAssetName),
     ).toBeVisible();
     await expect(recentAssetsSection.getByText(retiredAssetName)).toBeVisible();
 
-    const serviceQueueSection = page
-      .locator("section")
-      .filter({ hasText: "Service queue" })
-      .first();
+    const serviceQueueSection = page.getByRole("region", {
+      name: "Service due",
+    });
     await expect(serviceQueueSection).toBeVisible();
     await expect(
       serviceQueueSection.getByText(scheduledAssetName),
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index 8618143..0ee563e 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -34,10 +34,41 @@ export async function getLanding(
   return getLeafPathSegment(page.url()) === "setup" ? "setup" : "login";
 }
 
+/*
+  In dev, Next.js draws its dev-tools badge in a corner of the page. On a
+  phone it sits on top of the top bar's user menu and swallows taps, so tests
+  hide it. Production builds have no badge.
+*/
+export async function hideNextDevTools(page: Page) {
+  await page.addInitScript(() => {
+    const style = document.createElement("style");
+    style.textContent = "nextjs-portal { display: none !important; }";
+    document.addEventListener("DOMContentLoaded", () =>
+      document.head.appendChild(style),
+    );
+  });
+  // The page that is already open (client-side navigations keep it).
+  await page
+    .addStyleTag({ content: "nextjs-portal { display: none !important; }" })
+    .catch(() => undefined);
+}
+
+/*
+  A page's name: the h1 on tablet and desktop, the top bar title on phones
+  (where the page header is hidden). Only one of them is visible.
+*/
+export function pageTitle(page: Page, name: string | RegExp) {
+  return page
+    .getByRole("heading", { level: 1, name })
+    .or(page.getByTestId("mobile-top-bar-controls").getByText(name))
+    .filter({ visible: true });
+}
+
 export async function signIn(page: Page, email: string, password: string) {
+  await hideNextDevTools(page);
   await page.goto("/login");
   await page.getByLabel("Email").fill(email);
-  await page.getByLabel("Password").fill(password);
+  await page.getByLabel("Password", { exact: true }).fill(password);
   await page.getByRole("button", { name: "Sign in" }).click();
   await page.waitForURL(
     (url) => getLeafPathSegment(url.toString()) === "dashboard",
diff --git a/e2e/labels.spec.ts b/e2e/labels.spec.ts
index 8f0c75b..c58ee7b 100644
--- a/e2e/labels.spec.ts
+++ b/e2e/labels.spec.ts
@@ -1,10 +1,11 @@
 import { expect, test } from "@playwright/test";
-import { fillRequiredFields, getLanding, signIn } from "./helpers";
+import { fillRequiredFields, getLanding, pageTitle, signIn } from "./helpers";
 
 test.describe.serial("phase 9 label system", () => {
   test("admin can design a template and print single + batch labels", async ({
     page,
-  }) => {
+  }, testInfo) => {
+    const isPhone = testInfo.project.name === "mobile-chromium";
     const email = process.env.E2E_AUTH_EMAIL;
     const password = process.env.E2E_AUTH_PASSWORD;
 
@@ -25,15 +26,15 @@ test.describe.serial("phase 9 label system", () => {
     await page.getByRole("button", { name: "Create asset" }).click();
 
     await expect(
-      page.getByRole("heading", { name: `${assetName} created` }),
+      page.getByRole("heading", { name: assetName, exact: true }),
     ).toBeVisible({ timeout: 20_000 });
 
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
     const detailUrl = page.url();
 
     await page.goto("/labels");
-    await expect(page.getByRole("heading", { name: "Labels" })).toBeVisible();
+    await expect(pageTitle(page, "Labels")).toBeVisible();
     await expect(page.getByText("Thermal 57x32 mm")).toBeVisible({
       timeout: 20_000,
     });
@@ -41,17 +42,23 @@ test.describe.serial("phase 9 label system", () => {
       timeout: 20_000,
     });
 
-    await page.getByRole("button", { name: /^New$/ }).click();
-    const templateName = `Playwright Label ${Date.now()}`;
-    await page.getByLabel("Name").fill(templateName);
-    await page.locator('[data-label-element="staticText"]').click();
-    await page.locator("#label-element-text").fill("Deck A");
-    await page.locator('[data-label-element="dataMatrix"]').click();
-    await page.locator("[data-label-template-save]").click();
-    await expect(page.getByText("Label template created")).toBeVisible();
-    await expect(
-      page.getByRole("button", { name: new RegExp(templateName) }),
-    ).toBeVisible();
+    // Phones get previews and printing; the drag-and-drop designer is
+    // desktop and tablet only.
+    if (!isPhone) {
+      await page.getByRole("button", { name: "New template" }).first().click();
+      const templateName = `Playwright Label ${Date.now()}`;
+      await page.getByLabel("Name", { exact: true }).fill(templateName);
+      await page.locator('[data-label-element="staticText"]').click();
+      await page.locator("#label-element-text").fill("Deck A");
+      await page.locator('[data-label-element="dataMatrix"]').click();
+      await page.locator("[data-label-template-save]").click();
+      await expect(page.getByText("Label template created")).toBeVisible();
+      await expect(
+        page
+          .getByRole("list", { name: "Label templates" })
+          .getByRole("button", { name: new RegExp(templateName) }),
+      ).toBeVisible();
+    }
 
     await page.goto(detailUrl);
     await page.getByRole("link", { name: "Print label" }).click();
@@ -69,15 +76,24 @@ test.describe.serial("phase 9 label system", () => {
     await page.getByRole("option", { name: "Compact 35x12 mm" }).click();
     await expect(page.getByText("35 x 12 mm").first()).toBeVisible();
 
-    await page.goto("/assets", { waitUntil: "domcontentloaded" });
-    await page.getByRole("checkbox", { name: `Select ${assetName}` }).check();
-    const batchPrintLink = page.getByRole("link", { name: "Print labels" });
-    await expect(batchPrintLink).toHaveAttribute("href", /\/labels\/print\?/);
-    await batchPrintLink.click();
-    await expect(page).toHaveURL(/\/labels\/print\?assetIds=/, {
-      timeout: 20_000,
-    });
-    await expect(page.getByText("1 asset")).toBeVisible();
-    await expect(page.getByRole("heading", { name: assetName })).toBeVisible();
+    // Batch printing starts from the desktop selection tray; phones select
+    // with a long press instead.
+    if (!isPhone) {
+      await page.goto("/assets", { waitUntil: "domcontentloaded" });
+      await page.getByRole("checkbox", { name: `Select ${assetName}` }).check();
+      // The selection tray's link; the page header has "Print labels…" too.
+      const batchPrintLink = page
+        .getByRole("region", { name: "Selection" })
+        .getByRole("link", { name: "Print labels…" });
+      await expect(batchPrintLink).toHaveAttribute("href", /\/labels\/print\?/);
+      await batchPrintLink.click();
+      await expect(page).toHaveURL(/\/labels\/print\?assetIds=/, {
+        timeout: 20_000,
+      });
+      await expect(page.getByText("1 asset")).toBeVisible();
+      await expect(
+        page.getByRole("heading", { name: assetName }),
+      ).toBeVisible();
+    }
   });
 });
diff --git a/e2e/mobile-shell.spec.ts b/e2e/mobile-shell.spec.ts
index 8a8b3dd..58a376b 100644
--- a/e2e/mobile-shell.spec.ts
+++ b/e2e/mobile-shell.spec.ts
@@ -121,6 +121,14 @@ test.describe("mobile shell", () => {
     await page.goto("/dashboard");
 
     await expect(page.getByTestId("bottom-nav")).toBeHidden();
-    await expect(page.locator('[data-slot="sidebar-container"]')).toBeVisible();
+    // The full sidebar (desktop) and the rail (tablet) are both labelled
+    // "Main"; exactly one is shown at desktop width, with the full nav.
+    const sidebar = page
+      .getByRole("complementary", { name: "Main" })
+      .filter({ visible: true });
+    await expect(sidebar).toHaveCount(1);
+    await expect(
+      sidebar.getByRole("link", { name: "Locations" }),
+    ).toBeVisible();
   });
 });
diff --git a/e2e/scan.spec.ts b/e2e/scan.spec.ts
index e649d60..6c1e34b 100644
--- a/e2e/scan.spec.ts
+++ b/e2e/scan.spec.ts
@@ -22,8 +22,10 @@ async function authedScan(page: import("@playwright/test").Page) {
 }
 
 async function readAssetTag(page: import("@playwright/test").Page) {
+  // The hero chip is desktop/tablet only; phones show the tag in the back
+  // bar. Either way the text is in the DOM.
   const tagBadge = page.getByTestId("asset-tag");
-  await expect(tagBadge).toBeVisible();
+  await expect(tagBadge).toBeAttached();
   const assetTag = (await tagBadge.textContent())?.trim() ?? "";
   expect(assetTag.length).toBeGreaterThan(0);
   return assetTag;
@@ -47,10 +49,10 @@ test.describe("scan feature", () => {
     await fillRequiredFields(page);
     await page.getByRole("button", { name: "Create asset" }).click();
     await expect(
-      page.getByRole("heading", { name: `${name} created` }),
+      page.getByRole("heading", { name: name, exact: true }),
     ).toBeVisible({ timeout: 20_000 });
 
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/[^/]+$/, { timeout: 20_000 });
     const assetTag = await readAssetTag(page);
 
@@ -82,9 +84,9 @@ test.describe("scan feature", () => {
     await fillRequiredFields(page);
     await page.getByRole("button", { name: "Create asset" }).click();
     await expect(
-      page.getByRole("heading", { name: `${name} created` }),
+      page.getByRole("heading", { name: name, exact: true }),
     ).toBeVisible({ timeout: 20_000 });
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/[^/]+$/, { timeout: 20_000 });
     const assetTag = await readAssetTag(page);
     const assetUrl = page.url();
diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
index c22e9c5..04c4c94 100644
--- a/e2e/search.spec.ts
+++ b/e2e/search.spec.ts
@@ -8,21 +8,14 @@ async function createAssetForSearch(page: Page, name: string, notes: string) {
   await page.getByLabel("Notes").fill(notes);
   await page.getByRole("button", { name: "Create asset" }).click();
   await expect(
-    page.getByRole("heading", { name: `${name} created` }),
+    page.getByRole("heading", { name: name, exact: true }),
   ).toBeVisible({
     timeout: 20_000,
   });
-  await page.getByRole("button", { name: "View asset" }).click();
+  await page.getByRole("button", { name: "Open asset" }).click();
   await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
 
-  const assetTag = (
-    await page
-      .locator("section")
-      .first()
-      .locator(".font-mono")
-      .first()
-      .textContent()
-  )?.trim();
+  const assetTag = (await page.getByTestId("asset-tag").textContent())?.trim();
   expect(assetTag).toMatch(/[A-Z]{2,4}-\d{4}/);
 
   return {
diff --git a/e2e/service-groups.spec.ts b/e2e/service-groups.spec.ts
index 94c13f4..21eb6f7 100644
--- a/e2e/service-groups.spec.ts
+++ b/e2e/service-groups.spec.ts
@@ -40,31 +40,44 @@ test.describe.serial("phase 7.5 service groups and records", () => {
     const dueDate = getUtcIsoDateWithOffset(-1);
 
     await page.goto("/services/groups");
-    await page.getByRole("button", { name: "Create group" }).click();
-    await page.getByLabel("Name").fill(groupName);
-    await page.getByLabel("Description").fill("Playwright service group");
     await page
-      .getByRole("dialog", { name: "Create service group" })
-      .getByRole("button", { name: "Create group" })
+      .getByRole("button", { name: "New service plan…" })
+      .first()
       .click();
-    await expect(page.getByText(groupName)).toBeVisible();
-
-    await page.getByRole("link", { name: groupName }).first().click();
+    const planDialog = page.getByRole("dialog", { name: "New service plan" });
+    await planDialog.getByLabel("Name").fill(groupName);
+    await planDialog
+      .getByLabel(/^Description/)
+      .fill("Playwright service group");
+    await planDialog.getByRole("button", { name: "Create plan" }).click();
+    // Plans render as a table on desktop and a list on phones.
+    const planLink = page
+      .getByRole("link", { name: groupName })
+      .filter({ visible: true });
+    await expect(planLink).toBeVisible();
+
+    await planLink.click();
     await page.waitForURL(/\/services\/groups\/[^/]+$/, { timeout: 20_000 });
     await expect(
       page.getByRole("heading", { name: groupName, exact: true }),
     ).toBeVisible();
 
-    await page.getByRole("button", { name: "Add field" }).click();
-    await page.getByLabel("Label").fill("Technician note");
-    await page.getByRole("button", { name: "Create field" }).click();
-    await expect(page.getByText("Technician note")).toBeVisible();
-
-    await page.getByRole("button", { name: "Add field" }).click();
-    await page.getByLabel("Label").fill("Verified");
-    await page.getByLabel("Type").selectOption("checkbox");
-    await page.getByRole("button", { name: "Create field" }).click();
-    await expect(page.getByText("Verified")).toBeVisible();
+    for (const [label, type] of [
+      ["Technician note", null],
+      ["Verified", "checkbox"],
+    ] as const) {
+      await page.getByRole("button", { name: "Add field…" }).first().click();
+      const fieldDialog = page.getByRole("dialog", {
+        name: "Add required field",
+      });
+      await fieldDialog.getByLabel("Label").fill(label);
+      if (type) await fieldDialog.getByLabel("Type").selectOption(type);
+      await fieldDialog.getByRole("button", { name: "Create field" }).click();
+      await expect(fieldDialog).toBeHidden();
+      await expect(
+        page.getByText(label, { exact: true }).filter({ visible: true }),
+      ).toBeVisible();
+    }
 
     await page.goto("/assets/new");
     await page.getByLabel(/Name/i).fill(assetName);
@@ -78,11 +91,11 @@ test.describe.serial("phase 7.5 service groups and records", () => {
     await page.getByRole("button", { name: "Create asset" }).click();
 
     await expect(
-      page.getByRole("heading", { name: `${assetName} created` }),
+      page.getByRole("heading", { name: assetName, exact: true }),
     ).toBeVisible({
       timeout: 20_000,
     });
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
     const assetId = page.url().split("/").filter(Boolean).at(-1);
     expect(assetId).toBeTruthy();
@@ -93,9 +106,9 @@ test.describe.serial("phase 7.5 service groups and records", () => {
     });
     const assetLink = page.getByRole("link", { name: assetName, exact: true });
     await expect(assetLink).toBeVisible({ timeout: 20_000 });
-    const scheduleRow = assetLink.locator("xpath=ancestor::article[1]");
-    await expect(scheduleRow).toBeVisible({ timeout: 20_000 });
-    await scheduleRow.getByRole("button", { name: "Log service" }).click();
+    await page
+      .getByRole("button", { name: `Log service for ${assetName}` })
+      .click();
 
     const plannerDialog = page.getByRole("dialog", {
       name: new RegExp(`Log service: ${assetName}`),
@@ -133,29 +146,28 @@ test.describe.serial("phase 7.5 service groups and records", () => {
     await expect(plannerDialog).toBeHidden();
 
     await page.goto(`/assets/${assetId}`);
-    const serviceHistoryHeading = page.getByRole("heading", {
-      name: "Service history",
-      exact: true,
-    });
-    await expect(serviceHistoryHeading).toBeVisible();
-    const serviceHistorySection = serviceHistoryHeading.locator(
-      "xpath=ancestor::section[1]",
-    );
-    const firstHistoryRecord = serviceHistorySection.locator("details").first();
-    await expect(firstHistoryRecord).toBeVisible();
-    await firstHistoryRecord.locator("summary").click();
+    const serviceHistorySection = page.getByTestId("service-history");
     await expect(
-      firstHistoryRecord.getByText("Completed from services list"),
+      serviceHistorySection.getByRole("heading", { name: /^Service history/ }),
     ).toBeVisible();
+    // Each record shows its description; fields and files sit behind a
+    // disclosure.
+    const firstHistoryRecord = serviceHistorySection
+      .getByRole("listitem")
+      .filter({ hasText: "Completed from services list" });
+    await expect(firstHistoryRecord).toBeVisible();
+    await firstHistoryRecord
+      .getByText("Fields and files", { exact: true })
+      .click();
     await expect(
       firstHistoryRecord.getByText("service-report.pdf"),
     ).toBeVisible();
 
     await serviceHistorySection
-      .getByRole("button", { name: "Log manual service" })
+      .getByRole("button", { name: "Log other service…" })
       .click();
     const manualDialog = page.getByRole("dialog", {
-      name: "Log manual service",
+      name: "Log other service",
     });
     await manualDialog
       .getByLabel(/^Description/i)
diff --git a/e2e/service-scheduling.spec.ts b/e2e/service-scheduling.spec.ts
index 5857a27..a084c54 100644
--- a/e2e/service-scheduling.spec.ts
+++ b/e2e/service-scheduling.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { fillRequiredFields, getLanding, signIn } from "./helpers";
+import { fillRequiredFields, getLanding, pageTitle, signIn } from "./helpers";
 
 function escapeRegex(value: string) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -70,13 +70,13 @@ test.describe.serial("phase 7 service scheduling", () => {
 
     await page.goto("/services");
     await expect(
-      page.getByText(
-        "Service scheduling is disabled by an admin. Enable it in Settings to use the planner views.",
-      ),
+      page.getByText("Service scheduling is turned off."),
     ).toBeVisible();
 
     await page.goto("/assets/new");
-    await expect(page.getByText("Preventive schedule")).toHaveCount(0);
+    await expect(
+      page.getByRole("heading", { name: "Service schedule" }),
+    ).toHaveCount(0);
 
     await page.goto("/settings");
     const reenabledSchedulingSwitch = page.getByRole("switch", {
@@ -87,7 +87,9 @@ test.describe.serial("phase 7 service scheduling", () => {
     await expect(page.getByText("Service scheduling enabled")).toBeVisible();
 
     await page.goto("/assets/new");
-    await expect(page.getByText("Preventive schedule")).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Service schedule" }),
+    ).toBeVisible();
 
     const assetName = `PW Service Schedule ${Date.now()}`;
     const dueDate = getUtcIsoDateWithOffset(5);
@@ -99,12 +101,12 @@ test.describe.serial("phase 7 service scheduling", () => {
     await page.getByRole("button", { name: "Create asset" }).click();
 
     await expect(
-      page.getByRole("heading", { name: `${assetName} created` }),
+      page.getByRole("heading", { name: assetName, exact: true }),
     ).toBeVisible({
       timeout: 20_000,
     });
 
-    await page.getByRole("button", { name: "View asset" }).click();
+    await page.getByRole("button", { name: "Open asset" }).click();
     await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
     const detailUrl = page.url();
     const assetId = detailUrl.split("/").filter(Boolean).at(-1);
@@ -113,31 +115,34 @@ test.describe.serial("phase 7 service scheduling", () => {
 
     await page.goto("/services");
     const scheduleRow = page
-      .locator("article")
+      .getByTestId("services-scheduled-list")
+      .getByRole("listitem")
       .filter({ hasText: assetName })
       .first();
     await expect(scheduleRow).toBeVisible({ timeout: 20_000 });
     await expect(scheduleRow).toContainText(getDisplayDatePattern(dueDate));
 
     await page.goto("/dashboard");
-    const upcomingServicesSection = page
-      .locator("section")
-      .filter({ hasText: "Service queue" })
-      .first();
+    const upcomingServicesSection = page.getByRole("region", {
+      name: "Service due",
+    });
     await expect(upcomingServicesSection).toBeVisible();
 
     await page.goto("/services/calendar");
+    await expect(pageTitle(page, /^Services/)).toBeVisible();
+    const servicesTabs = page.getByRole("navigation", {
+      name: "Services sections",
+    });
     await expect(
-      page.getByRole("heading", { name: "Services Calendar" }),
-    ).toBeVisible();
+      servicesTabs.getByRole("link", { name: "Calendar" }),
+    ).toHaveAttribute("aria-current", "page");
     await expect(page.getByText("Loading service calendar...")).not.toBeVisible(
       {
         timeout: 20_000,
       },
     );
-    await expect(page.locator('a[href="/services"]').first()).toBeVisible();
     await expect(
-      page.locator('a[href="/services/calendar"]').first(),
+      servicesTabs.getByRole("link", { name: "Schedule" }),
     ).toBeVisible();
     const targetMonthLabel = getMonthLabelForIsoDate(dueDate);
     const monthHeading = page.locator("[data-testid='calendar-month-heading']");
@@ -147,7 +152,7 @@ test.describe.serial("phase 7 service scheduling", () => {
       if (currentMonth === targetMonthLabel) {
         break;
       }
-      await page.getByRole("button", { name: /^Next$/ }).click();
+      await page.getByRole("button", { name: "Next month" }).click();
     }
     await expect(monthHeading.first()).toHaveText(targetMonthLabel);
 
@@ -159,6 +164,7 @@ test.describe.serial("phase 7 service scheduling", () => {
       })
       .first();
     await expect(dayCell).toBeVisible();
+    // The day lists its due assets (a busy day folds the rest into "+N").
     await expect(dayCell.getByRole("button").first()).toBeVisible();
   });
 });
diff --git a/e2e/services-lifecycle.spec.ts b/e2e/services-lifecycle.spec.ts
index 455c2d6..93fcb7e 100644
--- a/e2e/services-lifecycle.spec.ts
+++ b/e2e/services-lifecycle.spec.ts
@@ -64,12 +64,12 @@ async function createScheduledAsset(
   await page.getByRole("button", { name: "Create asset" }).click();
 
   await expect(
-    page.getByRole("heading", { name: `${assetName} created` }),
+    page.getByRole("heading", { name: assetName, exact: true }),
   ).toBeVisible({
     timeout: 20_000,
   });
 
-  await page.getByRole("button", { name: "View asset" }).click();
+  await page.getByRole("button", { name: "Open asset" }).click();
   await page.waitForURL(/\/assets\/(?!new$)[^/]+$/, { timeout: 20_000 });
 
   const assetId = page.url().split("/").filter(Boolean).at(-1);
@@ -77,11 +77,17 @@ async function createScheduledAsset(
   return assetId!;
 }
 
+function providerRow(page: Page, name: string) {
+  return page.getByRole("listitem").filter({
+    has: page.getByRole("heading", { name, exact: true }),
+  });
+}
+
 async function createProvider(page: Page, name: string) {
   const normalizedEmailSeed = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
   await page.goto("/services/providers");
-  await page.getByRole("button", { name: "Add provider" }).click();
-  const dialog = page.getByRole("dialog", { name: "Add provider" });
+  await page.getByRole("button", { name: "New provider…" }).first().click();
+  const dialog = page.getByRole("dialog", { name: "New provider" });
   await dialog.getByLabel("Name").fill(name);
   await dialog
     .getByLabel("Contact email")
@@ -90,38 +96,37 @@ async function createProvider(page: Page, name: string) {
   await dialog.getByLabel("Notes").fill("Playwright provider");
   await dialog.getByRole("button", { name: "Create provider" }).click();
   await expect(page.getByText("Service provider created")).toBeVisible();
-  await expect(
-    page.locator("article").filter({ hasText: name }).first(),
-  ).toBeVisible();
+  await expect(providerRow(page, name)).toBeVisible();
 }
 
 async function editProvider(page: Page, name: string, nextName: string) {
-  const providerCard = page
-    .locator("article")
-    .filter({ hasText: name })
-    .first();
-  await providerCard.getByRole("button", { name: "Edit" }).click();
+  await providerRow(page, name).getByRole("button", { name: "Edit…" }).click();
   const dialog = page.getByRole("dialog", { name: "Edit provider" });
   await dialog.getByLabel("Name").fill(nextName);
   await dialog.getByLabel("Notes").fill("Edited by Playwright");
   await dialog.getByRole("button", { name: "Save provider" }).click();
   await expect(page.getByText("Service provider updated")).toBeVisible();
-  await expect(
-    page.locator("article").filter({ hasText: nextName }).first(),
-  ).toBeVisible();
+  await expect(providerRow(page, nextName)).toBeVisible();
 }
 
 async function deleteProvider(page: Page, name: string) {
-  const providerCard = page
-    .locator("article")
-    .filter({ hasText: name })
-    .first();
-  await providerCard.getByRole("button", { name: "Delete" }).click();
-  await page.getByRole("button", { name: "Delete provider" }).click();
+  await page
+    .getByRole("button", { name: `Delete ${name}`, exact: true })
+    .click();
+  await page
+    .getByRole("dialog", { name: "Delete provider?" })
+    .getByRole("button", { name: "Delete provider" })
+    .click();
   await expect(page.getByText("Service provider deleted")).toBeVisible();
-  await expect(page.locator("article").filter({ hasText: name })).toHaveCount(
-    0,
-  );
+  await expect(providerRow(page, name)).toHaveCount(0);
+}
+
+function scheduleRowFor(page: Page, assetName: string) {
+  return page
+    .getByTestId("services-scheduled-list")
+    .getByRole("listitem")
+    .filter({ hasText: assetName })
+    .first();
 }
 
 async function completeScheduledService({
@@ -139,7 +144,9 @@ async function completeScheduledService({
   providerName?: string;
   cost?: string;
 }) {
-  await row.getByRole("button", { name: "Log service" }).click();
+  await row
+    .getByRole("button", { name: `Log service for ${assetName}` })
+    .click();
   const dialog = page.getByRole("dialog", {
     name: new RegExp(`Log service: ${escapeRegex(assetName)}`),
   });
@@ -168,18 +175,13 @@ async function logManualService({
   providerName?: string;
   cost?: string;
 }) {
-  const serviceHistorySection = page
-    .locator("section")
-    .filter({
-      has: page.getByRole("heading", { name: "Service history", exact: true }),
-    })
-    .first();
+  const serviceHistorySection = page.getByTestId("service-history");
 
   await serviceHistorySection
-    .getByRole("button", { name: "Log manual service" })
+    .getByRole("button", { name: "Log other service…" })
     .click();
 
-  const dialog = page.getByRole("dialog", { name: "Log manual service" });
+  const dialog = page.getByRole("dialog", { name: "Log other service" });
   await dialog.getByLabel(/^Description/i).fill(description);
   if (providerName) {
     await dialog.getByLabel(/^Provider$/i).click();
@@ -237,10 +239,7 @@ test.describe.serial("phase 8 service lifecycle", () => {
     const assetId = await createScheduledAsset(page, assetName, dueDate);
 
     await page.goto("/services");
-    const scheduleRow = page
-      .locator("article")
-      .filter({ hasText: assetName })
-      .first();
+    const scheduleRow = scheduleRowFor(page, assetName);
     await expect(scheduleRow).toBeVisible({ timeout: 20_000 });
     await expect(scheduleRow).toContainText(getDisplayDatePattern(dueDate));
 
@@ -256,20 +255,14 @@ test.describe.serial("phase 8 service lifecycle", () => {
     await expect(scheduleRow).toContainText(
       getDisplayDatePattern(expectedNextDue),
     );
-    await expect(scheduleRow).toContainText(description);
+    // The row now reads "Last <date> by <provider>".
     await expect(scheduleRow).toContainText(providerName);
-    await expect(scheduleRow.getByText(/^Overdue$/)).toHaveCount(0);
+    await expect(scheduleRow.getByText(/^Overdue \d+( days?|d)$/)).toHaveCount(
+      0,
+    );
 
     await page.goto(`/assets/${assetId}`);
-    const serviceHistorySection = page
-      .locator("section")
-      .filter({
-        has: page.getByRole("heading", {
-          name: "Service history",
-          exact: true,
-        }),
-      })
-      .first();
+    const serviceHistorySection = page.getByTestId("service-history");
     await expect(serviceHistorySection).toBeVisible();
     await expect(serviceHistorySection.getByText(description)).toBeVisible();
     await expect(serviceHistorySection.getByText(providerName)).toBeVisible();
@@ -314,18 +307,12 @@ test.describe.serial("phase 8 service lifecycle", () => {
       cost: "88.00",
     });
 
-    const serviceHistorySection = page
-      .locator("section")
-      .filter({
-        has: page.getByRole("heading", {
-          name: "Service history",
-          exact: true,
-        }),
-      })
-      .first();
-    await expect(serviceHistorySection).toContainText(
+    // Logging a record moves the schedule on; the next service card shows
+    // the new date.
+    await expect(page.getByTestId("next-service-panel")).toContainText(
       getDisplayDatePattern(expectedNextDue),
     );
+    const serviceHistorySection = page.getByTestId("service-history");
     await expect(serviceHistorySection.getByText(providerName)).toBeVisible();
     await expect(
       serviceHistorySection.getByText(/Cost 88([.,]00)?/),
@@ -364,12 +351,14 @@ test.describe.serial("phase 8 service lifecycle", () => {
     await createScheduledAsset(page, assetName, dueDate);
 
     await page.goto("/services");
-    const scheduleRow = page
-      .locator("article")
-      .filter({ hasText: assetName })
-      .first();
+    const scheduleRow = scheduleRowFor(page, assetName);
     await expect(scheduleRow).toBeVisible({ timeout: 20_000 });
-    await expect(scheduleRow).toContainText("Overdue");
+    // The row carries a due tag per layout; one is visible.
+    await expect(
+      scheduleRow
+        .getByText(/^Overdue \d+( days?|d)$/)
+        .filter({ visible: true }),
+    ).toBeVisible();
 
     await completeScheduledService({
       page,
@@ -381,8 +370,9 @@ test.describe.serial("phase 8 service lifecycle", () => {
     await expect(scheduleRow).toContainText(
       getDisplayDatePattern(expectedNextDue),
     );
-    await expect(scheduleRow.getByText(/^Overdue$/)).toHaveCount(0);
-    await expect(scheduleRow.getByText(/day[s]? overdue/i)).toHaveCount(0);
-    await expect(scheduleRow).toContainText(description);
+    await expect(scheduleRow.getByText(/^Overdue \d+( days?|d)$/)).toHaveCount(
+      0,
+    );
+    await expect(scheduleRow).toContainText(/Last /);
   });
 });
diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
index a3d7954..49f55df 100644
--- a/e2e/settings.spec.ts
+++ b/e2e/settings.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { getLanding, signIn } from "./helpers";
+import { getLanding, pageTitle, signIn } from "./helpers";
 
 test.describe.serial("settings page", () => {
   test("protected settings page redirects when unauthenticated", async ({
@@ -29,7 +29,7 @@ test.describe.serial("settings page", () => {
     await signIn(page, email!, password!);
 
     await page.goto("/settings");
-    await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+    await expect(pageTitle(page, "Settings")).toBeVisible();
 
     // Admin-only sections
     await expect(
diff --git a/e2e/taxonomy.spec.ts b/e2e/taxonomy.spec.ts
index 0252fe4..289c02a 100644
--- a/e2e/taxonomy.spec.ts
+++ b/e2e/taxonomy.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { getLanding, signIn } from "./helpers";
+import { getLanding, pageTitle, signIn } from "./helpers";
 
 test.describe.serial("taxonomy page", () => {
   test("protected taxonomy page redirects when unauthenticated", async ({
@@ -29,27 +29,31 @@ test.describe.serial("taxonomy page", () => {
     await signIn(page, email!, password!);
 
     await page.goto("/taxonomy");
-    await expect(page.getByRole("heading", { name: "Taxonomy" })).toBeVisible();
+    await expect(pageTitle(page, "Taxonomy")).toBeVisible();
 
     // Default tab is categories
     await expect(page.getByRole("tab", { name: "Categories" })).toBeVisible();
-    await expect(page.getByRole("tab", { name: "Tags" })).toBeVisible();
-    await expect(page.getByRole("tab", { name: "Fields" })).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Keywords" })).toBeVisible();
+    await expect(
+      page.getByRole("tab", { name: "Custom fields" }),
+    ).toBeVisible();
 
     // Categories tab shows content
     await expect(
-      page.getByRole("heading", { name: "Categories" }),
+      page.getByRole("heading", { name: /^Categories/ }),
     ).toBeVisible();
 
-    // Switch to tags tab
-    await page.getByRole("tab", { name: "Tags" }).click();
-    await expect(page.getByRole("heading", { name: "Tags" })).toBeVisible();
+    // Switch to the keywords tab ("tags" in the URL)
+    await page.getByRole("tab", { name: "Keywords" }).click();
+    await expect(
+      page.getByRole("heading", { name: /^Keywords/ }),
+    ).toBeVisible();
     await expect(page).toHaveURL(/tab=tags/);
 
     // Switch to fields tab
-    await page.getByRole("tab", { name: "Fields" }).click();
+    await page.getByRole("tab", { name: "Custom fields" }).click();
     await expect(
-      page.getByRole("heading", { name: "Field definitions" }),
+      page.getByRole("heading", { name: /^Custom fields/ }),
     ).toBeVisible();
     await expect(page).toHaveURL(/tab=fields/);
   });
@@ -79,28 +83,31 @@ test.describe.serial("taxonomy page", () => {
 
     await page.goto("/taxonomy?tab=fields");
     await expect(
-      page.getByRole("heading", { name: "Field definitions" }),
+      page.getByRole("heading", { name: /^Custom fields/ }),
     ).toBeVisible();
 
-    // Create field — the page renders an "Add field" button in the header
-    // and another in the empty state; click the first one.
-    await page.getByRole("button", { name: "Add field" }).first().click();
-    const dialog = page.getByRole("dialog");
+    // Create field — the header and the empty state can both offer
+    // "New field…"; click the first one.
+    await page.getByRole("button", { name: "New field…" }).first().click();
+    const dialog = page.getByRole("dialog", { name: "New field" });
     await dialog.getByLabel("Name").fill(fieldName);
-    await dialog.getByRole("button", { name: /Create/i }).click();
-    const fieldRow = page.getByRole("cell", { name: fieldName, exact: true });
+    await dialog.getByRole("button", { name: "Create field" }).click();
+    // The fields render as a table on desktop and a list on phones; only
+    // one of them is visible.
+    const fieldRow = page
+      .getByText(fieldName, { exact: true })
+      .filter({ visible: true });
     await expect(fieldRow).toBeVisible({ timeout: 10_000 });
 
     // Delete field via actions menu
     await page
       .getByRole("button", { name: `Actions for ${fieldName}` })
+      .filter({ visible: true })
       .click();
-    await page.getByRole("menuitem", { name: "Delete" }).click();
-    const confirmDialog = page
-      .getByRole("alertdialog")
-      .or(page.getByRole("dialog").filter({ hasText: "Delete" }));
-    await confirmDialog.getByRole("button", { name: /Delete/i }).click();
-    await expect(fieldRow).not.toBeVisible({ timeout: 10_000 });
+    await page.getByRole("menuitem", { name: "Delete…" }).click();
+    const confirmDialog = page.getByRole("dialog", { name: "Delete field?" });
+    await confirmDialog.getByRole("button", { name: "Delete field" }).click();
+    await expect(fieldRow).toHaveCount(0, { timeout: 10_000 });
   });
 
   test("/fields redirects to /taxonomy?tab=fields", async ({ page }) => {
@@ -123,7 +130,7 @@ test.describe.serial("taxonomy page", () => {
     await page.goto("/fields");
     await page.waitForURL(/\/taxonomy\?tab=fields/, { timeout: 10_000 });
     await expect(
-      page.getByRole("heading", { name: "Field definitions" }),
+      page.getByRole("heading", { name: /^Custom fields/ }),
     ).toBeVisible();
   });
 });
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 05d5e64..d246830 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,6 +17,8 @@ const eslintConfig = defineConfig([
     "pb_data/**",
     "pb_migrations/**",
     "bin/**",
+    // Local design references (generated mockups, not app code).
+    "docs/design/**",
   ]),
 ]);
 
diff --git a/next.config.ts b/next.config.ts
index 16dcece..2314f69 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,11 @@
 import type { NextConfig } from "next";
+import packageJson from "./package.json";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  env: {
+    NEXT_PUBLIC_APP_VERSION: packageJson.version,
+  },
   turbopack: {
     root: process.cwd(),
   },
diff --git a/src/__tests__/components/assets/asset-card-list.test.tsx b/src/__tests__/components/assets/asset-card-list.test.tsx
index 25e4b7f..96d9801 100644
--- a/src/__tests__/components/assets/asset-card-list.test.tsx
+++ b/src/__tests__/components/assets/asset-card-list.test.tsx
@@ -1,6 +1,8 @@
-import { describe, it, expect, vi } from "vitest";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { act, render, screen, fireEvent, within } from "@testing-library/react";
+
+const pushSpy = vi.fn();
 
 vi.mock("@/lib/api/assets", async () => {
   const actual =
@@ -11,9 +13,32 @@ vi.mock("@/lib/api/assets", async () => {
 });
 
 vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: vi.fn() }),
+  useRouter: () => ({ push: pushSpy }),
+}));
+
+vi.mock("@/components/assets/asset-actions-sheet", () => ({
+  AssetActionsSheet: ({
+    open,
+    asset,
+    onOpenChange,
+  }: {
+    open: boolean;
+    asset: { name: string } | null;
+    onOpenChange: (open: boolean) => void;
+  }) =>
+    open ? (
+      <div role="dialog" aria-label="Asset actions">
+        {asset?.name}
+        <button type="button" onClick={() => onOpenChange(false)}>
+          Close
+        </button>
+      </div>
+    ) : null,
 }));
 
+const NOW = new Date(2026, 10, 6, 12, 0, 0).getTime();
+const DAY = 24 * 60 * 60 * 1000;
+
 import { AssetCardList } from "@/components/assets/asset-card-list";
 import type { AssetListItem } from "@/components/assets/types";
 
@@ -33,7 +58,7 @@ function makeRow(overrides: Partial<AssetListItem> = {}): AssetListItem {
     tagIds: ["t1", "t2"],
     tagNames: ["electric", "cordless"],
     createdAt: 0,
-    updatedAt: 0,
+    updatedAt: NOW - DAY,
     ...overrides,
   };
 }
@@ -50,6 +75,16 @@ function renderList(rows: AssetListItem[], loading = false) {
 }
 
 describe("AssetCardList", () => {
+  beforeEach(() => {
+    pushSpy.mockReset();
+    vi.useFakeTimers({ toFake: ["Date"] });
+    vi.setSystemTime(NOW);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("renders skeleton rows while loading with no data", () => {
     renderList([], true);
     expect(screen.getByTestId("asset-card-list-loading")).toBeInTheDocument();
@@ -60,7 +95,7 @@ describe("AssetCardList", () => {
     expect(screen.getByText(/no assets match/i)).toBeInTheDocument();
   });
 
-  it("renders one card per row with name, tag, location, and tag chips", () => {
+  it("renders one card link per row with tag and name", () => {
     renderList([
       makeRow(),
       makeRow({
@@ -68,50 +103,155 @@ describe("AssetCardList", () => {
         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", () => {
+
+    const drill = screen.getByRole("link", { name: "AST-0047, Drill #47" });
+    expect(drill).toHaveAttribute("href", "/assets/a1");
+    expect(drill).toHaveAttribute("data-testid", "asset-card-a1");
+    expect(
+      screen.getByRole("link", { name: "AST-0048, Lathe" }),
+    ).toHaveAttribute("href", "/assets/a2");
+  });
+
+  it("shows the location path and short relative time on line two", () => {
+    renderList([makeRow()]);
+    expect(screen.getByTestId("asset-card-a1")).toHaveTextContent(
+      "Workshop / Bench 3 · 1d",
+    );
+  });
+
+  it("leads line two with the category when asked", () => {
+    const qc = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    render(
+      <QueryClientProvider client={qc}>
+        <AssetCardList
+          rows={[makeRow()]}
+          loading={false}
+          secondary="category"
+        />
+      </QueryClientProvider>,
+    );
+    const card = screen.getByTestId("asset-card-a1");
+    expect(card).toHaveTextContent("Power tools · 1d");
+    expect(card).not.toHaveTextContent("Bench 3");
+  });
+
+  it("says No location when an asset has none", () => {
+    renderList([makeRow({ locationPath: null, locationId: null })]);
+    expect(
+      within(screen.getByTestId("asset-card-a1")).getByText("No location"),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show keyword chips on cards", () => {
+    renderList([makeRow()]);
+    expect(screen.queryByText("electric")).toBeNull();
+    expect(screen.queryByText("cordless")).toBeNull();
+  });
+
+  it("adds a status line only for non-active assets", () => {
     renderList([
-      makeRow({
-        tagNames: ["one", "two", "three", "four", "five"],
-      }),
+      makeRow(),
+      makeRow({ id: "a2", name: "Lathe", status: "under_repair" }),
     ]);
-    // 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();
+    expect(
+      within(screen.getByTestId("asset-card-a1")).queryByText("Active"),
+    ).toBeNull();
+    expect(
+      within(screen.getByTestId("asset-card-a2")).getByText("Under repair"),
+    ).toBeInTheDocument();
   });
 
-  it("renders an always-visible kebab that opens the actions sheet", async () => {
+  it("navigates to the asset on a plain tap", () => {
     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();
+    fireEvent.click(screen.getByTestId("asset-card-a1"));
+    expect(pushSpy).toHaveBeenCalledWith("/assets/a1");
+    expect(screen.queryByRole("dialog", { name: "Asset actions" })).toBeNull();
   });
 
-  it("includes a linked overlay for tapping the whole card to open details", () => {
+  it("leaves modifier and middle clicks to the browser so new tabs work", () => {
     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");
+    for (const init of [
+      { metaKey: true },
+      { ctrlKey: true },
+      { shiftKey: true },
+      { button: 1 },
+    ]) {
+      const notCancelled = fireEvent.click(card, init);
+      expect(notCancelled).toBe(true);
+    }
+    expect(pushSpy).not.toHaveBeenCalled();
+  });
+
+  it("opens the actions sheet from a named button on each card", () => {
+    renderList([makeRow()]);
+    fireEvent.click(
+      screen.getByRole("button", { name: "Asset actions, AST-0047" }),
+    );
+    expect(
+      screen.getByRole("dialog", { name: "Asset actions" }),
+    ).toHaveTextContent("Drill #47");
+    expect(pushSpy).not.toHaveBeenCalled();
+  });
+
+  it("press and hold also opens the actions sheet", () => {
+    vi.useFakeTimers({ toFake: ["Date", "setTimeout", "clearTimeout"] });
+    vi.setSystemTime(NOW);
+    try {
+      renderList([makeRow()]);
+
+      const card = screen.getByTestId("asset-card-a1");
+      fireEvent.pointerDown(card);
+      act(() => {
+        vi.advanceTimersByTime(450);
+      });
+      fireEvent.pointerUp(card);
+
+      const sheet = screen.getByRole("dialog", { name: "Asset actions" });
+      expect(sheet).toHaveTextContent("Drill #47");
+
+      // The click that ends the long press must not navigate.
+      fireEvent.click(card);
+      expect(pushSpy).not.toHaveBeenCalled();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("a short press does not open the actions sheet", () => {
+    vi.useFakeTimers({ toFake: ["Date", "setTimeout", "clearTimeout"] });
+    vi.setSystemTime(NOW);
+    try {
+      renderList([makeRow()]);
+      const card = screen.getByTestId("asset-card-a1");
+      fireEvent.pointerDown(card);
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
+      fireEvent.pointerUp(card);
+      act(() => {
+        vi.advanceTimersByTime(1000);
+      });
+      expect(
+        screen.queryByRole("dialog", { name: "Asset actions" }),
+      ).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("opens the actions sheet on right-click", () => {
+    renderList([makeRow()]);
+    fireEvent.contextMenu(screen.getByTestId("asset-card-a1"));
+    expect(
+      screen.getByRole("dialog", { name: "Asset actions" }),
+    ).toHaveTextContent("Drill #47");
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(screen.queryByRole("dialog", { name: "Asset actions" })).toBeNull();
   });
 });
diff --git a/src/__tests__/components/assets/asset-create-page-client.test.tsx b/src/__tests__/components/assets/asset-create-page-client.test.tsx
index 4dbde8b..5751159 100644
--- a/src/__tests__/components/assets/asset-create-page-client.test.tsx
+++ b/src/__tests__/components/assets/asset-create-page-client.test.tsx
@@ -26,6 +26,7 @@ vi.mock("@/lib/api/service-schedules", () => ({
 
 vi.mock("next/navigation", () => ({
   useRouter: () => ({ push: mockPush }),
+  useSearchParams: () => new URLSearchParams(),
 }));
 
 vi.mock("@/components/assets/asset-form", () => ({
diff --git a/src/__tests__/components/assets/asset-detail.test.tsx b/src/__tests__/components/assets/asset-detail.test.tsx
index 7ed06ed..84a69ca 100644
--- a/src/__tests__/components/assets/asset-detail.test.tsx
+++ b/src/__tests__/components/assets/asset-detail.test.tsx
@@ -1,14 +1,45 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { AssetDetail } from "@/components/assets/asset-detail";
 import type { AssetDetail as AssetDetailType } from "@/components/assets/types";
 import type { FieldDefinition } from "@/components/fields/types";
 
+const listAttachmentsMock = vi.fn();
+const listLocationsMock = vi.fn();
+const nextServiceSpy = vi.fn();
+const labelPanelSpy = vi.fn();
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/assets/asset1",
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+}));
+
 vi.mock("@/lib/use-app-date-format", () => ({
   useAppDateFormat: () => "DD-MM-YYYY",
 }));
 
+vi.mock("@/lib/api/attachments", () => ({
+  listAttachments: (assetId: string) => listAttachmentsMock(assetId),
+}));
+
+vi.mock("@/lib/api/locations", () => ({
+  listLocations: () => listLocationsMock(),
+}));
+
 vi.mock("@/components/fields/dynamic-field-display", () => ({
   DynamicFieldDisplay: ({ definition }: { definition: { name: string } }) => (
     <span>field:{definition.name}</span>
@@ -20,23 +51,54 @@ vi.mock("@/components/attachments/attachments-panel", () => ({
 }));
 
 vi.mock("@/components/services/asset-service-records-panel", () => ({
-  AssetServiceRecordsPanel: () => <div>service-records-panel</div>,
+  AssetServiceRecordsPanel: ({ assetId }: { assetId: string }) => (
+    <div>service-records-panel:{assetId}</div>
+  ),
 }));
 
+vi.mock("@/components/services/next-service-panel", () => ({
+  NextServicePanel: (props: {
+    assetId: string;
+    assetName: string;
+    serviceGroupName: string | null;
+  }) => {
+    nextServiceSpy(props);
+    return <div>next-service-panel</div>;
+  },
+}));
+
+vi.mock("@/components/labels/asset-label-panel", () => ({
+  AssetLabelPanel: (props: { asset: { assetTag: string } }) => {
+    labelPanelSpy(props);
+    return <div>asset-label-panel</div>;
+  },
+}));
+
+vi.mock("@/components/assets/asset-photo-slot", () => ({
+  AssetPhotoSlot: ({ assetName }: { assetName: string }) => (
+    <div>photo-slot:{assetName}</div>
+  ),
+}));
+
+import { AssetDetail } from "@/components/assets/asset-detail";
+
+const DAY = 24 * 60 * 60 * 1000;
+const NOW = new Date(2026, 10, 6, 12, 0, 0).getTime();
+
 const baseAsset: AssetDetailType = {
   id: "asset1",
   name: "Core Router",
   assetTag: "IT-0042",
   status: "active",
   categoryId: "cat1",
-  locationId: "loc1",
+  locationId: "loc2",
   serviceGroupId: null,
   notes: "Main network router",
   customFieldValues: { field1: "SN-12345" },
   createdBy: "user1",
   updatedBy: "user1",
-  createdAt: 1700000000000,
-  updatedAt: 1700000000000,
+  createdAt: new Date(2026, 0, 15, 12).getTime(),
+  updatedAt: NOW - 2 * DAY,
   category: {
     id: "cat1",
     name: "Networking",
@@ -44,9 +106,9 @@ const baseAsset: AssetDetailType = {
     color: "#3b82f6",
   },
   location: {
-    id: "loc1",
+    id: "loc2",
     name: "Server Room",
-    parentId: null,
+    parentId: "loc1",
     path: "Building A / Server Room",
   },
   serviceGroup: null,
@@ -82,100 +144,319 @@ const fieldDefinitions: FieldDefinition[] = [
   },
 ];
 
-const defaultProps = {
-  asset: baseAsset,
-  fieldDefinitions,
-  canDelete: true,
-  deleting: false,
-  updatingStatus: false,
-  onStatusChange: vi.fn(),
-  onDelete: vi.fn().mockResolvedValue(undefined),
-};
+function makeProps(overrides: Partial<React.ComponentProps<typeof AssetDetail>> = {}) {
+  return {
+    asset: baseAsset,
+    fieldDefinitions,
+    canDelete: true,
+    deleting: false,
+    updatingStatus: false,
+    onStatusChange: vi.fn(),
+    onDelete: vi.fn().mockResolvedValue(undefined),
+    ...overrides,
+  };
+}
+
+function renderDetail(props = makeProps()) {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <TooltipProvider>
+        <AssetDetail {...props} />
+      </TooltipProvider>
+    </QueryClientProvider>,
+  );
+}
 
-function renderWithProviders(ui: React.ReactElement) {
-  return render(<TooltipProvider>{ui}</TooltipProvider>);
+async function openMoreActions() {
+  const user = userEvent.setup();
+  await user.click(screen.getByRole("button", { name: "More actions" }));
+  await screen.findByRole("menu");
+  return user;
 }
 
 describe("AssetDetail", () => {
-  it("renders basic asset information", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
+  beforeEach(() => {
+    vi.useFakeTimers({ toFake: ["Date"] });
+    vi.setSystemTime(NOW);
+    listAttachmentsMock.mockReset();
+    listAttachmentsMock.mockResolvedValue([]);
+    listLocationsMock.mockReset();
+    listLocationsMock.mockResolvedValue([]);
+    nextServiceSpy.mockReset();
+    labelPanelSpy.mockReset();
+  });
 
-    expect(screen.getByText("Core Router")).toBeInTheDocument();
-    expect(screen.getByText("IT-0042")).toBeInTheDocument();
-    expect(screen.getByText("Networking")).toBeInTheDocument();
-    expect(screen.getByText("Building A / Server Room")).toBeInTheDocument();
+  afterEach(() => {
+    vi.useRealTimers();
+    document.getElementById("mobile-top-bar-slot")?.remove();
   });
 
-  it("renders tags when present", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
+  describe("hero", () => {
+    it("shows the tag, name, status, location, category and keywords", () => {
+      renderDetail();
 
-    expect(screen.getByText("Critical")).toBeInTheDocument();
-    expect(screen.getByText("Production")).toBeInTheDocument();
-  });
+      expect(
+        screen.getByRole("heading", { level: 1, name: "Core Router" }),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId("asset-tag")).toHaveTextContent("IT-0042");
+      expect(
+        screen.getByRole("combobox", { name: "Change status" }),
+      ).toHaveTextContent("Active");
+      expect(screen.getByText("Building A / Server Room")).toBeInTheDocument();
+      // Category sits in the status row on desktop and the keyword row below.
+      expect(screen.getAllByText("Networking")).toHaveLength(2);
+      expect(screen.getByText("Critical")).toBeInTheDocument();
+      expect(screen.getByText("Production")).toBeInTheDocument();
+      expect(screen.getByText("photo-slot:Core Router")).toBeInTheDocument();
+    });
 
-  it("renders notes", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
+    it("links back to Assets", () => {
+      renderDetail();
+      expect(screen.getByRole("link", { name: "Assets" })).toHaveAttribute(
+        "href",
+        "/assets",
+      );
+    });
 
-    expect(screen.getByText("Main network router")).toBeInTheDocument();
-  });
+    it("turns the location into a picker run when it can be changed", async () => {
+      listLocationsMock.mockResolvedValue([
+        { id: "loc1", name: "Building A", parentId: null, path: "Building A" },
+        {
+          id: "loc2",
+          name: "Server Room",
+          parentId: "loc1",
+          path: "Building A / Server Room",
+        },
+      ]);
+      renderDetail(makeProps({ onLocationChange: vi.fn() }));
 
-  it("shows 'No notes' when notes are null", () => {
-    renderWithProviders(
-      <AssetDetail {...defaultProps} asset={{ ...baseAsset, notes: null }} />,
-    );
+      expect(
+        await screen.findByRole("button", {
+          name: "Location: Building A / Server Room. Change location",
+        }),
+      ).toBeInTheDocument();
+    });
 
-    expect(screen.getByText("No notes")).toBeInTheDocument();
-  });
+    it("keeps showing the current location while the location list loads", () => {
+      listLocationsMock.mockReturnValue(new Promise(() => {}));
+      renderDetail(makeProps({ onLocationChange: vi.fn() }));
 
-  it("renders custom fields", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
+      expect(screen.queryByText("No locations available.")).toBeNull();
+      expect(
+        screen.getByRole("button", {
+          name: "Location: Building A / Server Room. Change location",
+        }),
+      ).toBeInTheDocument();
+    });
 
-    expect(screen.getByText("Serial Number")).toBeInTheDocument();
-    expect(screen.getByText("field:Serial Number")).toBeInTheDocument();
-  });
+    it("says No location in the picker run when the asset has none", async () => {
+      listLocationsMock.mockResolvedValue([
+        { id: "loc1", name: "Building A", parentId: null, path: "Building A" },
+      ]);
+      renderDetail(
+        makeProps({
+          asset: { ...baseAsset, location: null, locationId: null },
+          onLocationChange: vi.fn(),
+        }),
+      );
 
-  it("hides delete button when canDelete is false", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} canDelete={false} />);
+      const run = await screen.findByRole("button", {
+        name: "Location: none. Change location",
+      });
+      expect(run).toHaveTextContent("No location");
+    });
 
-    expect(
-      screen.queryByRole("button", { name: /delete/i }),
-    ).not.toBeInTheDocument();
+    it("shows no location run when the location is read-only and unset", () => {
+      renderDetail(
+        makeProps({ asset: { ...baseAsset, location: null, locationId: null } }),
+      );
+      expect(screen.queryByText("Building A / Server Room")).toBeNull();
+      expect(screen.queryByRole("button", { name: /Change location/ })).toBeNull();
+    });
   });
 
-  it("shows edit and print label links", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
+  describe("actions", () => {
+    it("shows an Edit link", () => {
+      renderDetail();
+      expect(screen.getByRole("link", { name: "Edit" })).toHaveAttribute(
+        "href",
+        "/assets/asset1/edit",
+      );
+    });
+
+    it("collects Edit, Print label and Delete… in the More actions menu", async () => {
+      renderDetail();
+      await openMoreActions();
+
+      const menu = screen.getByRole("menu");
+      expect(
+        within(menu).getByRole("menuitem", { name: "Edit" }),
+      ).toHaveAttribute("href", "/assets/asset1/edit");
+      expect(
+        within(menu).getByRole("menuitem", { name: "Print label" }),
+      ).toHaveAttribute("href", "/labels/print?assetId=asset1");
+      expect(
+        within(menu).getByRole("menuitem", { name: "Delete…" }),
+      ).toBeInTheDocument();
+    });
+
+    it("leaves Delete… out of the menu when the user cannot delete", async () => {
+      renderDetail(makeProps({ canDelete: false }));
+      await openMoreActions();
+
+      expect(screen.getByRole("menuitem", { name: "Print label" })).toBeInTheDocument();
+      expect(screen.queryByRole("menuitem", { name: /Delete/ })).toBeNull();
+      expect(screen.queryByTestId("asset-detail-delete")).toBeNull();
+    });
+
+    it("confirms before deleting", async () => {
+      const props = makeProps();
+      renderDetail(props);
+      const user = await openMoreActions();
+
+      await user.click(screen.getByRole("menuitem", { name: "Delete…" }));
+      const dialog = await screen.findByRole("dialog", { name: "Delete asset?" });
+      expect(
+        within(dialog).getByText(
+          "IT-0042 Core Router and its service history are deleted.",
+        ),
+      ).toBeInTheDocument();
+      expect(props.onDelete).not.toHaveBeenCalled();
+
+      await user.click(
+        within(dialog).getByRole("button", { name: "Delete asset" }),
+      );
+      expect(props.onDelete).toHaveBeenCalledOnce();
+    });
 
-    expect(screen.getByText("Edit")).toBeInTheDocument();
-    expect(screen.getByText("Print label")).toBeInTheDocument();
+    it("changes status from the status picker run", async () => {
+      const user = userEvent.setup();
+      const props = makeProps();
+      renderDetail(props);
+
+      await user.click(screen.getByRole("combobox", { name: "Change status" }));
+      await user.click(await screen.findByRole("option", { name: "Under repair" }));
+      expect(props.onStatusChange).toHaveBeenCalledWith("under_repair");
+    });
   });
 
-  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();
+  describe("details card", () => {
+    it("renders custom fields", () => {
+      renderDetail();
+      expect(screen.getByText("Serial Number")).toBeInTheDocument();
+      expect(screen.getByText("field:Serial Number")).toBeInTheDocument();
+    });
+
+    it("shows the service plan when the asset has one", () => {
+      renderDetail(
+        makeProps({
+          asset: {
+            ...baseAsset,
+            serviceGroupId: "sg1",
+            serviceGroup: { id: "sg1", name: "Quarterly check" } as never,
+          },
+        }),
+      );
+      expect(screen.getByText("Service plan")).toBeInTheDocument();
+      expect(screen.getByText("Quarterly check")).toBeInTheDocument();
+      expect(nextServiceSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({ serviceGroupName: "Quarterly check" }),
+      );
+    });
+
+    it("renders notes", () => {
+      renderDetail();
+      expect(screen.getByText("Main network router")).toBeInTheDocument();
+    });
+
+    it("shows 'No notes' when notes are null", () => {
+      renderDetail(makeProps({ asset: { ...baseAsset, notes: null } }));
+      expect(screen.getByText("No notes")).toBeInTheDocument();
+    });
+
+    it("counts attachments on the tab and shows them when selected", async () => {
+      listAttachmentsMock.mockResolvedValue([{ id: "f1" }, { id: "f2" }]);
+      const user = userEvent.setup();
+      renderDetail();
+
+      const tab = screen.getByRole("tab", { name: /Attachments/ });
+      await waitFor(() => expect(tab).toHaveTextContent("Attachments2"));
+      expect(listAttachmentsMock).toHaveBeenCalledWith("asset1");
+
+      await user.click(tab);
+      expect(await screen.findByText("attachments-panel")).toBeInTheDocument();
+    });
+
+    it("shows created and last-changed dates", () => {
+      renderDetail();
+      expect(screen.getByText(/Created 15-01-2026\./)).toBeInTheDocument();
+      expect(screen.getByText("2 days ago")).toBeInTheDocument();
+      expect(screen.getByText("2d")).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();
+  describe("panels", () => {
+    it("renders Next service, service history and the label panel for the asset", () => {
+      renderDetail();
+      expect(screen.getByText("next-service-panel")).toBeInTheDocument();
+      expect(screen.getByText("service-records-panel:asset1")).toBeInTheDocument();
+      expect(screen.getByText("asset-label-panel")).toBeInTheDocument();
+
+      expect(nextServiceSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          assetId: "asset1",
+          assetName: "Core Router",
+          serviceGroupName: null,
+        }),
+      );
+      expect(labelPanelSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          asset: expect.objectContaining({
+            id: "asset1",
+            assetTag: "IT-0042",
+            categoryName: "Networking",
+            locationPath: "Building A / Server Room",
+          }),
+        }),
+      );
+    });
   });
 
-  it("makes the detail tabs sticky on mobile", () => {
-    renderWithProviders(<AssetDetail {...defaultProps} />);
-    const tabs = screen.getByTestId("asset-detail-tabs");
-    expect(tabs.className).toMatch(/sticky/);
+  describe("phone top bar", () => {
+    it("renders nothing into the phone bar when the slot is absent", () => {
+      renderDetail();
+      expect(
+        screen.queryByRole("link", { name: "Back to Assets" }),
+      ).toBeNull();
+      expect(screen.queryByTestId("asset-detail-kebab")).toBeNull();
+    });
+
+    it("replaces the phone top bar with back, tag, edit and actions", async () => {
+      const slot = document.createElement("div");
+      slot.id = "mobile-top-bar-slot";
+      document.body.appendChild(slot);
+
+      renderDetail();
+
+      const bar = within(slot);
+      expect(
+        await bar.findByRole("link", { name: "Back to Assets" }),
+      ).toHaveAttribute("href", "/assets");
+      expect(bar.getByText("IT-0042")).toBeInTheDocument();
+      expect(bar.getByRole("link", { name: "Edit asset" })).toHaveAttribute(
+        "href",
+        "/assets/asset1/edit",
+      );
+
+      const user = userEvent.setup();
+      await user.click(bar.getByRole("button", { name: "Asset actions" }));
+      expect(
+        await screen.findByRole("menuitem", { name: "Print label" }),
+      ).toBeInTheDocument();
+      expect(screen.getByTestId("asset-detail-delete")).toBeInTheDocument();
+    });
   });
 });
diff --git a/src/__tests__/components/assets/asset-filters-mobile.test.tsx b/src/__tests__/components/assets/asset-filters-mobile.test.tsx
index b4bbd54..e6b7eb0 100644
--- a/src/__tests__/components/assets/asset-filters-mobile.test.tsx
+++ b/src/__tests__/components/assets/asset-filters-mobile.test.tsx
@@ -94,15 +94,68 @@ function renderFilters(overrides: Partial<FilterState> = {}) {
 }
 
 describe("AssetFiltersMobile", () => {
-  it("renders a search input and a filters trigger chip", () => {
+  it("renders a status select and a filters trigger in the row, with search inside the sheet", () => {
     renderFilters();
+    const status = screen.getByRole("combobox", { name: "Filter by status" });
+    expect(status).toHaveAttribute("data-testid", "asset-filters-mobile-status");
+    expect(status).toHaveValue("");
     expect(
-      screen.getByTestId("asset-filters-mobile-search"),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByTestId("asset-filters-mobile-trigger"),
-    ).toBeInTheDocument();
+      screen.getByRole("button", { name: "Filters" }),
+    ).toHaveAttribute("data-testid", "asset-filters-mobile-trigger");
     expect(screen.queryByTestId("asset-filters-mobile-count")).toBeNull();
+
+    // Search moved into the sheet.
+    expect(screen.queryByTestId("asset-filters-mobile-search")).toBeNull();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    expect(screen.getByTestId("asset-filters-mobile-search")).toHaveAccessibleName(
+      "Search assets",
+    );
+  });
+
+  it("emits a status change from the row select", () => {
+    const { handlers } = renderFilters();
+    fireEvent.change(screen.getByRole("combobox", { name: "Filter by status" }), {
+      target: { value: "under_repair" },
+    });
+    expect(handlers.onFiltersChange).toHaveBeenCalledWith({
+      categoryId: null,
+      status: "under_repair",
+      locationId: null,
+      tagIds: [],
+    });
+  });
+
+  it("clears the status back to All from the row select", () => {
+    const { handlers } = renderFilters({
+      filters: {
+        categoryId: null,
+        status: "retired",
+        locationId: null,
+        tagIds: [],
+      },
+    });
+    const select = screen.getByRole("combobox", { name: "Filter by status" });
+    expect(select).toHaveValue("retired");
+    fireEvent.change(select, { target: { value: "" } });
+    expect(handlers.onFiltersChange).toHaveBeenCalledWith(
+      expect.objectContaining({ status: null }),
+    );
+  });
+
+  it("types into the sheet's search field", () => {
+    const { handlers } = renderFilters();
+    fireEvent.click(screen.getByTestId("asset-filters-mobile-trigger"));
+    fireEvent.change(screen.getByTestId("asset-filters-mobile-search"), {
+      target: { value: "drill" },
+    });
+    expect(handlers.onSearchChange).toHaveBeenCalledWith("drill");
+  });
+
+  it("shows the active search under the row with a Clear action", () => {
+    const { handlers } = renderFilters({ search: "drill" });
+    expect(screen.getByText("“drill”")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+    expect(handlers.onSearchChange).toHaveBeenCalledWith("");
   });
 
   it("shows an active count badge when filters apply", () => {
diff --git a/src/__tests__/components/assets/asset-filters.test.tsx b/src/__tests__/components/assets/asset-filters.test.tsx
index b731d20..6e27c44 100644
--- a/src/__tests__/components/assets/asset-filters.test.tsx
+++ b/src/__tests__/components/assets/asset-filters.test.tsx
@@ -96,7 +96,23 @@ describe("AssetFilters", () => {
     expect(onReset).toHaveBeenCalledOnce();
   });
 
-  it("exposes accessible labels for custom location and tag filters", async () => {
+  it("exposes accessible labels for custom location and keyword filters", () => {
+    render(
+      <AssetFilters
+        options={options}
+        search=""
+        filters={emptyFilters}
+        onSearchChange={vi.fn()}
+        onFiltersChange={vi.fn()}
+        onReset={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Location" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Keywords" })).toBeInTheDocument();
+  });
+
+  it("shows the one set of dropdowns when More filters is opened", async () => {
     const user = userEvent.setup();
 
     render(
@@ -110,9 +126,89 @@ describe("AssetFilters", () => {
       />,
     );
 
-    await user.click(screen.getByRole("button", { name: "More filters" }));
+    const more = screen.getByRole("button", { name: "More filters" });
+    expect(more).toHaveAttribute("aria-expanded", "false");
+    const row = screen.getByRole("button", { name: "Keywords" }).parentElement!;
+    expect(row).toHaveClass("hidden");
+
+    await user.click(more);
+    expect(more).toHaveAttribute("aria-expanded", "true");
+    // Rendered once, so ids such as asset-filter-tags stay unique.
+    expect(screen.getAllByRole("button", { name: "Keywords" })).toHaveLength(1);
+    expect(row).not.toHaveClass("hidden");
+  });
+
+  it("toggles a keyword from the keywords picker", async () => {
+    const user = userEvent.setup();
+    const onFiltersChange = vi.fn();
+
+    render(
+      <AssetFilters
+        options={options}
+        search=""
+        filters={emptyFilters}
+        onSearchChange={vi.fn()}
+        onFiltersChange={onFiltersChange}
+        onReset={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Keywords" }));
+    await user.click(await screen.findByRole("option", { name: /Urgent/ }));
+    expect(onFiltersChange).toHaveBeenCalledWith({
+      ...emptyFilters,
+      tagIds: ["tag1"],
+    });
+  });
+
+  it("shows applied filters as removable chips", async () => {
+    const user = userEvent.setup();
+    const onFiltersChange = vi.fn();
+    const onSearchChange = vi.fn();
+    const filters: AssetFiltersState = {
+      categoryId: "cat1",
+      status: null,
+      locationId: "loc1",
+      tagIds: ["tag1"],
+    };
+
+    render(
+      <AssetFilters
+        options={options}
+        search="router"
+        filters={filters}
+        onSearchChange={onSearchChange}
+        onFiltersChange={onFiltersChange}
+        onReset={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Remove category filter" }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith({ ...filters, categoryId: null });
+
+    await user.click(screen.getByRole("button", { name: "Remove location filter" }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith({ ...filters, locationId: null });
+
+    await user.click(screen.getByRole("button", { name: "Remove keyword filter" }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith({ ...filters, tagIds: [] });
+
+    await user.click(screen.getByRole("button", { name: "Remove search filter" }));
+    expect(onSearchChange).toHaveBeenLastCalledWith("");
+  });
+
+  it("never shows status as a chip, because status has its own tabs", () => {
+    render(
+      <AssetFilters
+        options={options}
+        search=""
+        filters={{ ...emptyFilters, status: "under_repair" }}
+        onSearchChange={vi.fn()}
+        onFiltersChange={vi.fn()}
+        onReset={vi.fn()}
+      />,
+    );
 
-    expect(screen.getByLabelText("Location")).toBeInTheDocument();
-    expect(screen.getByLabelText("Tags")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Remove status filter" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Reset" })).toBeNull();
   });
 });
diff --git a/src/__tests__/components/assets/asset-photo-slot.test.tsx b/src/__tests__/components/assets/asset-photo-slot.test.tsx
new file mode 100644
index 0000000..bc19385
--- /dev/null
+++ b/src/__tests__/components/assets/asset-photo-slot.test.tsx
@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+
+const listAttachmentsMock = vi.fn();
+
+vi.mock("@/lib/api/attachments", () => ({
+  listAttachments: (assetId: string) => listAttachmentsMock(assetId),
+  uploadAttachment: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+import { AssetPhotoSlot } from "@/components/assets/asset-photo-slot";
+
+function image(status: string, url: string | null = null) {
+  return { id: `att-${status}`, fileKind: "image", status, url };
+}
+
+function renderSlot() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <AssetPhotoSlot assetId="asset1" assetName="Drill #47" />
+    </QueryClientProvider>,
+  );
+}
+
+describe("AssetPhotoSlot", () => {
+  beforeEach(() => {
+    listAttachmentsMock.mockReset();
+  });
+
+  it("offers Add photo… when the asset has no image", async () => {
+    listAttachmentsMock.mockResolvedValue([]);
+    renderSlot();
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add photo…" })).toBeEnabled(),
+    );
+  });
+
+  it("shows the first ready image", async () => {
+    listAttachmentsMock.mockResolvedValue([
+      image("ready", "https://pb/img.jpg"),
+    ]);
+    renderSlot();
+    const img = await screen.findByRole("img", { name: "Drill #47" });
+    expect(img).toHaveAttribute("src", "https://pb/img.jpg");
+  });
+
+  it("says Processing photo… while an upload is optimised, then shows it once ready", async () => {
+    listAttachmentsMock
+      .mockResolvedValueOnce([image("pending")])
+      .mockResolvedValue([image("ready", "https://pb/img.jpg")]);
+    renderSlot();
+
+    const button = await screen.findByRole("button", {
+      name: "Processing photo…",
+    });
+    expect(button).toBeDisabled();
+
+    // The slot polls on its own while the image is pending.
+    expect(
+      await screen.findByRole("img", { name: "Drill #47" }, { timeout: 4000 }),
+    ).toBeInTheDocument();
+    expect(listAttachmentsMock.mock.calls.length).toBeGreaterThanOrEqual(2);
+  });
+});
diff --git a/src/__tests__/components/assets/assets-page-client.test.tsx b/src/__tests__/components/assets/assets-page-client.test.tsx
index 6fa6a29..42a4837 100644
--- a/src/__tests__/components/assets/assets-page-client.test.tsx
+++ b/src/__tests__/components/assets/assets-page-client.test.tsx
@@ -1,10 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const listAssetsMock = vi.fn();
 const getFilterOptionsMock = vi.fn();
+const getOverviewMock = vi.fn();
 const mockPush = vi.fn();
+const isPhoneMock = vi.fn(() => false);
+const tableProps = vi.fn();
+const cardListProps = vi.fn();
 let currentSearchParams = new URLSearchParams();
 
 vi.mock("@/lib/api/assets", () => ({
@@ -12,21 +16,100 @@ vi.mock("@/lib/api/assets", () => ({
   getAssetFilterOptions: () => getFilterOptionsMock(),
 }));
 
+vi.mock("@/lib/api/dashboard", () => ({
+  getDashboardOverview: () => getOverviewMock(),
+}));
+
+vi.mock("@/hooks/use-media-query", () => ({
+  useMediaQuery: () => isPhoneMock(),
+}));
+
 vi.mock("next/navigation", () => ({
   useRouter: () => ({ push: mockPush }),
   useSearchParams: () => currentSearchParams,
 }));
 
-vi.mock("@/components/assets/asset-filters", () => ({
-  AssetFilters: () => <div>filters</div>,
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("@/components/assets/asset-filters", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/components/assets/asset-filters")>();
+  return {
+    ...actual,
+    AssetFilters: () => <div>desktop-filters</div>,
+  };
+});
+
+vi.mock("@/components/assets/asset-filters-mobile", () => ({
+  AssetFiltersMobile: () => <div>mobile-filters</div>,
 }));
 
 vi.mock("@/components/assets/asset-table", () => ({
-  AssetTable: () => <div>table</div>,
+  AssetTable: (props: { rows: { id: string }[] }) => {
+    tableProps(props);
+    return <div>table:{props.rows.length}</div>;
+  },
+}));
+
+vi.mock("@/components/assets/asset-card-list", () => ({
+  AssetCardList: (props: { rows: { id: string }[] }) => {
+    cardListProps(props);
+    return <div>cards:{props.rows.length}</div>;
+  },
 }));
 
 import { AssetsPageClient } from "@/components/assets/assets-page-client";
 
+const overview = {
+  dateFormat: "DD-MM-YYYY",
+  totalAssets: 21,
+  statusCounts: {
+    active: 10,
+    in_storage: 5,
+    under_repair: 3,
+    retired: 2,
+    disposed: 1,
+  },
+  recentAssets: [],
+  changedLastDayCount: 0,
+  categoryBreakdown: [],
+  locationBreakdown: [],
+  serviceSchedulingEnabled: true,
+  overdueServiceCount: 2,
+  scheduledServiceCount: 4,
+  upcomingServices: [],
+};
+
+function makeRow(id: string) {
+  return {
+    id,
+    name: `Asset ${id}`,
+    assetTag: `AS-${id}`,
+    status: "active",
+    categoryId: null,
+    categoryName: null,
+    categoryColor: null,
+    locationId: null,
+    locationPath: null,
+    serviceGroupId: null,
+    notes: null,
+    tagIds: [],
+    tagNames: [],
+    createdAt: 0,
+    updatedAt: 0,
+  };
+}
+
 function renderWithClient(ui: React.ReactElement) {
   const qc = new QueryClient({
     defaultOptions: { queries: { retry: false } },
@@ -47,10 +130,16 @@ describe("AssetsPageClient", () => {
   beforeEach(() => {
     listAssetsMock.mockReset();
     getFilterOptionsMock.mockReset();
+    getOverviewMock.mockReset();
     mockPush.mockReset();
+    tableProps.mockReset();
+    cardListProps.mockReset();
+    isPhoneMock.mockReturnValue(false);
+    window.localStorage.clear();
     currentSearchParams = new URLSearchParams("category=cat1");
 
     listAssetsMock.mockResolvedValue([]);
+    getOverviewMock.mockResolvedValue(overview);
     getFilterOptionsMock.mockResolvedValue({
       categories: [],
       locations: [],
@@ -82,4 +171,139 @@ describe("AssetsPageClient", () => {
       });
     });
   });
+
+  it("sorts by most recently updated by default", async () => {
+    renderWithClient(<AssetsPageClient />);
+
+    await waitFor(() => expect(listAssetsMock).toHaveBeenCalled());
+    expect(listAssetsMock.mock.calls[0]?.[0]).toMatchObject({
+      sortBy: "updatedAt",
+      sortDirection: "desc",
+    });
+  });
+
+  it("shows the total and a status subline from the dashboard overview", async () => {
+    renderWithClient(<AssetsPageClient />);
+
+    expect(
+      await screen.findByRole("heading", { level: 1, name: /^Assets\s*21$/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("10 active · 3 under repair · 2 overdue"),
+    ).toBeInTheDocument();
+    expect(getOverviewMock).toHaveBeenCalled();
+  });
+
+  it("renders status tabs with counts and filters by the chosen tab", async () => {
+    currentSearchParams = new URLSearchParams();
+    renderWithClient(<AssetsPageClient />);
+
+    const tabs = screen.getByRole("navigation", { name: "Status" });
+    const all = within(tabs).getByRole("button", { name: "All" });
+    expect(all).toHaveAttribute("aria-current", "page");
+
+    const repair = await within(tabs).findByRole("button", {
+      name: /^Under repair\s*3$/,
+    });
+    for (const name of [/^Active\s*10$/, /^In storage\s*5$/, /^Retired\s*2$/, /^Disposed\s*1$/]) {
+      expect(within(tabs).getByRole("button", { name })).toBeInTheDocument();
+    }
+
+    fireEvent.click(repair);
+
+    await waitFor(() => {
+      expect(listAssetsMock.mock.calls.at(-1)?.[0]).toMatchObject({
+        status: "under_repair",
+      });
+    });
+    expect(repair).toHaveAttribute("aria-current", "page");
+    expect(all.getAttribute("aria-current")).toBeNull();
+  });
+
+  it("selects the status tab from the URL", async () => {
+    currentSearchParams = new URLSearchParams("status=retired");
+    renderWithClient(<AssetsPageClient />);
+
+    const tabs = screen.getByRole("navigation", { name: "Status" });
+    expect(
+      within(tabs).getByRole("button", { name: /^Retired/ }),
+    ).toHaveAttribute("aria-current", "page");
+    await waitFor(() => expect(listAssetsMock).toHaveBeenCalled());
+    expect(listAssetsMock.mock.calls[0]?.[0]).toMatchObject({
+      status: "retired",
+    });
+  });
+
+  it("ignores an unknown status in the URL", async () => {
+    currentSearchParams = new URLSearchParams("status=bogus");
+    renderWithClient(<AssetsPageClient />);
+
+    await waitFor(() => expect(listAssetsMock).toHaveBeenCalled());
+    expect(listAssetsMock.mock.calls[0]?.[0]).toMatchObject({
+      status: undefined,
+    });
+  });
+
+  it("offers New asset… and Print labels… in the header", () => {
+    renderWithClient(<AssetsPageClient />);
+
+    expect(screen.getByRole("link", { name: "New asset…" })).toHaveAttribute(
+      "href",
+      "/assets/new",
+    );
+    expect(screen.getByRole("link", { name: "Print labels…" })).toHaveAttribute(
+      "href",
+      "/labels/print",
+    );
+  });
+
+  it("shows the first-run empty state when there are no assets and no filters", async () => {
+    currentSearchParams = new URLSearchParams();
+    renderWithClient(<AssetsPageClient />);
+
+    expect(await screen.findByText("No assets yet.")).toBeInTheDocument();
+    expect(screen.queryByText(/^table:/)).toBeNull();
+  });
+
+  it("renders the table with desktop filters on wider screens", async () => {
+    listAssetsMock.mockResolvedValue([makeRow("a1"), makeRow("a2")]);
+    renderWithClient(<AssetsPageClient />);
+
+    expect(screen.getByText("desktop-filters")).toBeInTheDocument();
+    expect(await screen.findByText("table:2")).toBeInTheDocument();
+    expect(screen.getByText("1 to 2 of 2")).toBeInTheDocument();
+    expect(screen.queryByText("mobile-filters")).toBeNull();
+  });
+
+  it("renders cards, mobile filters and the long-press hint on phones", async () => {
+    isPhoneMock.mockReturnValue(true);
+    listAssetsMock.mockResolvedValue([makeRow("a1"), makeRow("a2")]);
+    renderWithClient(<AssetsPageClient />);
+
+    expect(screen.getByText("mobile-filters")).toBeInTheDocument();
+    expect(await screen.findByText("cards:2")).toBeInTheDocument();
+    expect(screen.queryByText("desktop-filters")).toBeNull();
+
+    expect(
+      screen.getByText("Press and hold an asset for quick actions."),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(
+      screen.queryByText("Press and hold an asset for quick actions."),
+    ).toBeNull();
+    expect(window.localStorage.getItem("stowage:hint-long-press")).toBe("1");
+  });
+
+  it("pages phone results with Show more", async () => {
+    isPhoneMock.mockReturnValue(true);
+    listAssetsMock.mockResolvedValue(
+      Array.from({ length: 20 }, (_, i) => makeRow(`a${i}`)),
+    );
+    renderWithClient(<AssetsPageClient />);
+
+    expect(await screen.findByText("cards:15")).toBeInTheDocument();
+    expect(screen.getByText("1 to 15 of 20")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Show 5 more" }));
+    expect(await screen.findByText("cards:20")).toBeInTheDocument();
+  });
 });
diff --git a/src/__tests__/components/catalog/taxonomy-manager.test.tsx b/src/__tests__/components/catalog/taxonomy-manager.test.tsx
index 2e8eb0d..07bac5f 100644
--- a/src/__tests__/components/catalog/taxonomy-manager.test.tsx
+++ b/src/__tests__/components/catalog/taxonomy-manager.test.tsx
@@ -76,11 +76,11 @@ describe("TaxonomyManager (categories)", () => {
     );
 
     expect(
-      screen.getByRole("heading", { name: "Categories" }),
+      screen.getByRole("heading", { name: /^Categories/ }),
     ).toBeInTheDocument();
     expect(screen.getByText("Laptops")).toBeInTheDocument();
     expect(screen.getByText("Monitors")).toBeInTheDocument();
-    expect(screen.getByText("Prefix: LAP")).toBeInTheDocument();
+    expect(screen.getByText("LAP")).toBeInTheDocument();
     expect(screen.getByText("Portable computers")).toBeInTheDocument();
   });
 
@@ -114,14 +114,14 @@ describe("TaxonomyManager (categories)", () => {
     );
 
     expect(
-      screen.queryByRole("button", { name: /add category/i }),
+      screen.queryByRole("button", { name: /new category/i }),
     ).not.toBeInTheDocument();
     expect(
       screen.getByText("Only admins can add, edit, or delete categories."),
     ).toBeInTheDocument();
   });
 
-  it("opens create modal on Add Category click", async () => {
+  it("opens create modal on New category click", async () => {
     const user = userEvent.setup();
 
     render(
@@ -136,11 +136,11 @@ describe("TaxonomyManager (categories)", () => {
       />,
     );
 
-    await user.click(screen.getByRole("button", { name: /add category/i }));
+    await user.click(screen.getByRole("button", { name: /new category/i }));
 
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     expect(
-      screen.getByRole("heading", { name: "Add Category" }),
+      screen.getByRole("heading", { name: "New category" }),
     ).toBeInTheDocument();
     expect(screen.getByLabelText("Name")).toBeInTheDocument();
   });
@@ -160,7 +160,9 @@ describe("TaxonomyManager (tags)", () => {
       />,
     );
 
-    expect(screen.getByRole("heading", { name: "Tags" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: /^Keywords/ }),
+    ).toBeInTheDocument();
     expect(screen.getByText("Fragile")).toBeInTheDocument();
     expect(screen.getByText("Heavy")).toBeInTheDocument();
   });
@@ -178,6 +180,6 @@ describe("TaxonomyManager (tags)", () => {
       />,
     );
 
-    expect(screen.getByText("No tags yet.")).toBeInTheDocument();
+    expect(screen.getByText("No keywords yet.")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/components/crud/color-field.test.tsx b/src/__tests__/components/crud/color-field.test.tsx
deleted file mode 100644
index 922a3a3..0000000
--- a/src/__tests__/components/crud/color-field.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ColorField, PRESET_COLORS } from "@/components/crud/color-field";
-
-describe("ColorField", () => {
-  it("renders label, input with initial value, and preset swatches", () => {
-    render(<ColorField id="test-color" value="#EA580C" onChange={vi.fn()} />);
-
-    expect(screen.getByLabelText("Color")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("#EA580C")).toBeInTheDocument();
-    expect(
-      screen.getByRole("list", { name: "Preset colors" }),
-    ).toBeInTheDocument();
-
-    const swatches = screen.getAllByRole("listitem");
-    expect(swatches).toHaveLength(PRESET_COLORS.length);
-  });
-
-  it("calls onChange when a preset swatch is clicked", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-
-    render(<ColorField id="test-color" value="#EA580C" onChange={onChange} />);
-
-    await user.click(
-      screen.getByRole("listitem", { name: `Select ${PRESET_COLORS[3]}` }),
-    );
-    expect(onChange).toHaveBeenCalledWith(PRESET_COLORS[3]);
-  });
-
-  it("renders custom label", () => {
-    render(
-      <ColorField
-        id="cat-color"
-        value="#000000"
-        onChange={vi.fn()}
-        label="Category color"
-      />,
-    );
-
-    expect(screen.getByLabelText("Category color")).toBeInTheDocument();
-  });
-});
diff --git a/src/__tests__/components/dashboard/category-breakdown.test.tsx b/src/__tests__/components/dashboard/category-breakdown.test.tsx
index 42370b8..6460fb5 100644
--- a/src/__tests__/components/dashboard/category-breakdown.test.tsx
+++ b/src/__tests__/components/dashboard/category-breakdown.test.tsx
@@ -20,24 +20,35 @@ const items = [
 ];
 
 describe("CategoryBreakdown", () => {
-  it("renders category names and counts", () => {
+  it("renders the heading, category names and counts", () => {
     render(<CategoryBreakdown items={items} />);
 
-    expect(screen.getByText("By Category")).toBeVisible();
+    expect(
+      screen.getByRole("region", { name: "Assets by category" }),
+    ).toBeInTheDocument();
     expect(screen.getByText("Electronics")).toBeVisible();
     expect(screen.getByText("15")).toBeVisible();
     expect(screen.getByText("Furniture")).toBeVisible();
     expect(screen.getByText("8")).toBeVisible();
   });
 
+  it("links to the taxonomy page from the heading", () => {
+    render(<CategoryBreakdown items={items} />);
+
+    expect(screen.getByRole("link", { name: "Open Taxonomy" })).toHaveAttribute(
+      "href",
+      "/taxonomy",
+    );
+  });
+
   it("links each category to filtered assets page", () => {
     render(<CategoryBreakdown items={items} />);
 
-    expect(screen.getByText("Electronics").closest("a")).toHaveAttribute(
+    expect(screen.getByRole("link", { name: /Electronics/ })).toHaveAttribute(
       "href",
       "/assets?category=cat1",
     );
-    expect(screen.getByText("Furniture").closest("a")).toHaveAttribute(
+    expect(screen.getByRole("link", { name: /Furniture/ })).toHaveAttribute(
       "href",
       "/assets?category=cat2",
     );
diff --git a/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx b/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
index 311d421..c6e3b4d 100644
--- a/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
+++ b/src/__tests__/components/dashboard/dashboard-stats-bar.test.tsx
@@ -1,7 +1,19 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
 import { DashboardStatsBar } from "@/components/dashboard/dashboard-stats-bar";
 
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
 const statusCounts = {
   active: 10,
   in_storage: 5,
@@ -11,64 +23,75 @@ const statusCounts = {
 };
 
 describe("DashboardStatsBar", () => {
-  it("renders all 6 stat cards with correct labels and values", () => {
-    render(<DashboardStatsBar totalAssets={21} statusCounts={statusCounts} />);
-
-    expect(screen.getByText("Total Assets")).toBeVisible();
-    expect(screen.getByText("21")).toBeVisible();
-
-    expect(screen.getByText("Active")).toBeVisible();
-    expect(screen.getByText("10")).toBeVisible();
+  it("renders five cells: assets, overdue, under repair, in storage, retired", () => {
+    render(
+      <DashboardStatsBar
+        totalAssets={21}
+        statusCounts={statusCounts}
+        overdueCount={4}
+      />,
+    );
 
-    expect(screen.getByText("In Storage")).toBeVisible();
-    expect(screen.getByText("5")).toBeVisible();
-
-    expect(screen.getByText("Under Repair")).toBeVisible();
-    expect(screen.getByText("3")).toBeVisible();
-
-    expect(screen.getByText("Retired")).toBeVisible();
-    expect(screen.getByText("2")).toBeVisible();
+    const bar = screen.getByTestId("dashboard-stats-bar");
+    const links = within(bar).getAllByRole("link");
+    expect(links).toHaveLength(5);
 
-    expect(screen.getByText("Disposed")).toBeVisible();
-    expect(screen.getByText("1")).toBeVisible();
+    const expected: Array<[RegExp, string, string]> = [
+      [/Assets/, "21", "/assets"],
+      [/Overdue/, "4", "/services"],
+      [/Under repair/, "3", "/assets?status=under_repair"],
+      [/In storage/, "5", "/assets?status=in_storage"],
+      [/Retired/, "2", "/assets?status=retired"],
+    ];
+    expected.forEach(([name, value, href], index) => {
+      const link = links[index];
+      expect(link).toHaveAccessibleName(name);
+      expect(link).toHaveAttribute("href", href);
+      expect(within(link).getByText(value)).toBeInTheDocument();
+    });
   });
 
-  it("renders zero counts correctly", () => {
-    const zeroCounts = {
-      active: 0,
-      in_storage: 0,
-      under_repair: 0,
-      retired: 0,
-      disposed: 0,
-    };
-
-    render(<DashboardStatsBar totalAssets={0} statusCounts={zeroCounts} />);
+  it("does not show active or disposed counts", () => {
+    render(
+      <DashboardStatsBar
+        totalAssets={21}
+        statusCounts={statusCounts}
+        overdueCount={4}
+      />,
+    );
 
-    const zeros = screen.getAllByText("0");
-    expect(zeros).toHaveLength(6);
+    expect(screen.queryByText("Active")).not.toBeInTheDocument();
+    expect(screen.queryByText("Disposed")).not.toBeInTheDocument();
   });
 
-  it("renders data-dashboard-stat attributes for each card", () => {
-    render(<DashboardStatsBar totalAssets={21} statusCounts={statusCounts} />);
+  it("keeps short phone labels next to the full labels", () => {
+    render(
+      <DashboardStatsBar
+        totalAssets={21}
+        statusCounts={statusCounts}
+        overdueCount={0}
+      />,
+    );
 
-    const keys = [
-      "total",
-      "active",
-      "in_storage",
-      "under_repair",
-      "retired",
-      "disposed",
-    ];
-    for (const key of keys) {
-      expect(
-        document.querySelector(`[data-dashboard-stat="${key}"]`),
-      ).toBeTruthy();
-    }
+    expect(screen.getByText("In repair")).toBeInTheDocument();
+    expect(screen.getByText("Stored")).toBeInTheDocument();
   });
 
-  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");
+  it("renders zero counts", () => {
+    render(
+      <DashboardStatsBar
+        totalAssets={0}
+        statusCounts={{
+          active: 0,
+          in_storage: 0,
+          under_repair: 0,
+          retired: 0,
+          disposed: 0,
+        }}
+        overdueCount={0}
+      />,
+    );
+
+    expect(screen.getAllByText("0")).toHaveLength(5);
   });
 });
diff --git a/src/__tests__/components/dashboard/location-breakdown.test.tsx b/src/__tests__/components/dashboard/location-breakdown.test.tsx
deleted file mode 100644
index e3613bb..0000000
--- a/src/__tests__/components/dashboard/location-breakdown.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { LocationBreakdown } from "@/components/dashboard/location-breakdown";
-
-vi.mock("next/link", () => ({
-  default: ({
-    children,
-    href,
-    ...props
-  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
-    <a href={href} {...props}>
-      {children}
-    </a>
-  ),
-}));
-
-const items = [
-  { id: "loc1", name: "Warehouse A", count: 20 },
-  { id: "loc2", name: "Office B", count: 5 },
-];
-
-describe("LocationBreakdown", () => {
-  it("renders location names and counts", () => {
-    render(<LocationBreakdown items={items} />);
-
-    expect(screen.getByText("By Location")).toBeVisible();
-    expect(screen.getByText("Warehouse A")).toBeVisible();
-    expect(screen.getByText("20")).toBeVisible();
-    expect(screen.getByText("Office B")).toBeVisible();
-    expect(screen.getByText("5")).toBeVisible();
-  });
-
-  it("links each location to filtered assets page", () => {
-    render(<LocationBreakdown items={items} />);
-
-    expect(screen.getByText("Warehouse A").closest("a")).toHaveAttribute(
-      "href",
-      "/assets?location=loc1",
-    );
-    expect(screen.getByText("Office B").closest("a")).toHaveAttribute(
-      "href",
-      "/assets?location=loc2",
-    );
-  });
-
-  it("shows empty state when no locations", () => {
-    render(<LocationBreakdown items={[]} />);
-
-    expect(screen.getByText("No locations with assets yet.")).toBeVisible();
-  });
-});
diff --git a/src/__tests__/components/dashboard/quick-actions.test.tsx b/src/__tests__/components/dashboard/quick-actions.test.tsx
deleted file mode 100644
index 66c2b0a..0000000
--- a/src/__tests__/components/dashboard/quick-actions.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { QuickActions } from "@/components/dashboard/quick-actions";
-
-vi.mock("next/link", () => ({
-  default: ({
-    children,
-    href,
-    ...props
-  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
-    <a href={href} {...props}>
-      {children}
-    </a>
-  ),
-}));
-
-describe("QuickActions", () => {
-  it("renders New Asset and View All Assets links", () => {
-    render(<QuickActions />);
-
-    expect(screen.getByText("New Asset")).toBeVisible();
-    expect(screen.getByText("View All Assets")).toBeVisible();
-  });
-
-  it("links to correct hrefs", () => {
-    render(<QuickActions />);
-
-    expect(screen.getByText("New Asset").closest("a")).toHaveAttribute(
-      "href",
-      "/assets/new",
-    );
-    expect(screen.getByText("View All Assets").closest("a")).toHaveAttribute(
-      "href",
-      "/assets",
-    );
-  });
-});
diff --git a/src/__tests__/components/dashboard/recent-assets-card.test.tsx b/src/__tests__/components/dashboard/recent-assets-card.test.tsx
index 4ad6618..aff1870 100644
--- a/src/__tests__/components/dashboard/recent-assets-card.test.tsx
+++ b/src/__tests__/components/dashboard/recent-assets-card.test.tsx
@@ -1,5 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
 import { RecentAssetsCard } from "@/components/dashboard/recent-assets-card";
 
 vi.mock("next/link", () => ({
@@ -14,59 +14,100 @@ vi.mock("next/link", () => ({
   ),
 }));
 
-vi.mock("@/components/assets/status-badge", () => ({
-  StatusBadge: ({ status }: { status: string }) => (
-    <span data-testid="status-badge">{status}</span>
-  ),
-}));
+const NOW = new Date(2026, 10, 6, 12, 0, 0).getTime();
+const DAY = 24 * 60 * 60 * 1000;
 
-const items = [
-  {
-    id: "asset1",
-    name: "Forklift A",
-    assetTag: "FK-001",
+function makeItem(index: number, overrides: Record<string, unknown> = {}) {
+  return {
+    id: `asset${index}`,
+    name: `Asset ${index}`,
+    assetTag: `AS-00${index}`,
     status: "active" as const,
-    updatedAt: 1709251200000,
-  },
-  {
-    id: "asset2",
+    updatedAt: NOW - index * DAY,
+    ...overrides,
+  };
+}
+
+const items = [
+  makeItem(1, { name: "Forklift A", assetTag: "FK-001" }),
+  makeItem(2, {
     name: "Generator B",
     assetTag: "GN-002",
     status: "in_storage" as const,
-    updatedAt: 1709164800000,
-  },
+  }),
 ];
 
 describe("RecentAssetsCard", () => {
-  it("renders items with name, tag, and status", () => {
-    render(<RecentAssetsCard items={items} dateFormat="DD-MM-YYYY" />);
-
-    expect(screen.getByText("Forklift A")).toBeVisible();
-    expect(screen.getByText("FK-001")).toBeVisible();
-    expect(screen.getByText("Generator B")).toBeVisible();
-    expect(screen.getByText("GN-002")).toBeVisible();
-    expect(screen.getAllByTestId("status-badge")).toHaveLength(2);
+  beforeEach(() => {
+    vi.useFakeTimers({ toFake: ["Date"] });
+    vi.setSystemTime(NOW);
   });
 
-  it("shows empty state when items is empty", () => {
-    render(<RecentAssetsCard items={[]} dateFormat="DD-MM-YYYY" />);
+  afterEach(() => {
+    vi.useRealTimers();
+  });
 
-    expect(screen.getByText("No assets have been added yet.")).toBeVisible();
+  it("renders the Recently updated heading", () => {
+    render(<RecentAssetsCard items={items} />);
+
+    expect(
+      screen.getByRole("region", { name: "Recently updated" }),
+    ).toBeInTheDocument();
   });
 
-  it("renders 'View all' link pointing to /assets", () => {
-    render(<RecentAssetsCard items={items} dateFormat="DD-MM-YYYY" />);
+  it("links each row to the asset with its name, tag and relative time", () => {
+    render(<RecentAssetsCard items={items} />);
 
-    const link = screen.getByText("View all");
-    expect(link).toBeVisible();
-    expect(link.closest("a")).toHaveAttribute("href", "/assets");
+    const forklift = screen.getByRole("link", { name: /Forklift A/ });
+    expect(forklift).toHaveAttribute("href", "/assets/asset1");
+    expect(within(forklift).getByText("FK-001")).toBeInTheDocument();
+    expect(within(forklift).getByText("Yesterday")).toBeInTheDocument();
+    expect(within(forklift).getByText("1d")).toBeInTheDocument();
+
+    const generator = screen.getByRole("link", { name: /Generator B/ });
+    expect(generator).toHaveAttribute("href", "/assets/asset2");
+    expect(within(generator).getByText("GN-002")).toBeInTheDocument();
+    expect(within(generator).getByText("2 days ago")).toBeInTheDocument();
   });
 
-  it("renders per-asset 'View' links", () => {
-    render(<RecentAssetsCard items={items} dateFormat="DD-MM-YYYY" />);
+  it("shows status only for exceptions, not for active assets", () => {
+    render(<RecentAssetsCard items={items} />);
 
-    const viewLinks = screen.getAllByText("View");
-    expect(viewLinks).toHaveLength(2);
-    expect(viewLinks[0].closest("a")).toHaveAttribute("href", "/assets/asset1");
+    const badges = screen.getAllByTestId("status-badge");
+    expect(badges).toHaveLength(1);
+    expect(badges[0]).toHaveTextContent("In storage");
+    expect(
+      within(screen.getByRole("link", { name: /Forklift A/ })).queryByTestId(
+        "status-badge",
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes the list with an Open in Assets link", () => {
+    render(<RecentAssetsCard items={items} />);
+
+    expect(screen.getByRole("link", { name: "Open in Assets" })).toHaveAttribute(
+      "href",
+      "/assets",
+    );
+    expect(screen.queryByText(/of the last/)).not.toBeInTheDocument();
+  });
+
+  it("shows at most five rows and says how many changes were cut", () => {
+    const many = Array.from({ length: 7 }, (_, i) => makeItem(i + 1));
+    render(<RecentAssetsCard items={many} />);
+
+    expect(screen.getAllByRole("listitem")).toHaveLength(5);
+    expect(screen.queryByText("Asset 6")).not.toBeInTheDocument();
+    expect(screen.getByText(/5 of the last 7 changes/)).toBeInTheDocument();
+  });
+
+  it("shows empty state when items is empty", () => {
+    render(<RecentAssetsCard items={[]} />);
+
+    expect(screen.getByText("No assets have been added yet.")).toBeVisible();
+    expect(
+      screen.queryByRole("link", { name: "Open in Assets" }),
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/components/dashboard/stat-card.test.tsx b/src/__tests__/components/dashboard/stat-card.test.tsx
deleted file mode 100644
index 9d54963..0000000
--- a/src/__tests__/components/dashboard/stat-card.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Package } from "lucide-react";
-import { StatCard } from "@/components/dashboard/stat-card";
-
-describe("StatCard", () => {
-  it("renders the label and count", () => {
-    render(
-      <StatCard
-        label="Total assets"
-        value={42}
-        icon={Package}
-        className="bg-card"
-        statKey="total"
-      />,
-    );
-
-    expect(screen.getByText("Total assets")).toBeVisible();
-    expect(screen.getByText("42")).toBeVisible();
-  });
-
-  it("renders zero values", () => {
-    render(
-      <StatCard
-        label="Disposed"
-        value={0}
-        icon={Package}
-        className="bg-card"
-        statKey="disposed"
-      />,
-    );
-
-    expect(screen.getByText("Disposed")).toBeVisible();
-    expect(screen.getByText("0")).toBeVisible();
-  });
-});
diff --git a/src/__tests__/components/dashboard/upcoming-services-widget.test.tsx b/src/__tests__/components/dashboard/upcoming-services-widget.test.tsx
index d33e52c..f35b4e7 100644
--- a/src/__tests__/components/dashboard/upcoming-services-widget.test.tsx
+++ b/src/__tests__/components/dashboard/upcoming-services-widget.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { UpcomingServicesWidget } from "@/components/dashboard/upcoming-services-widget";
 
 vi.mock("next/link", () => ({
@@ -36,7 +36,7 @@ const items = [
 ];
 
 describe("UpcomingServicesWidget", () => {
-  it("renders items with asset name, tag, and due label", () => {
+  it("renders the Service due heading", () => {
     render(
       <UpcomingServicesWidget
         items={items}
@@ -46,26 +46,65 @@ describe("UpcomingServicesWidget", () => {
       />,
     );
 
-    expect(screen.getByText("Forklift A")).toBeVisible();
-    expect(screen.getByText("FK-001")).toBeVisible();
-    expect(screen.getByText("2 days overdue")).toBeVisible();
+    expect(
+      screen.getByRole("region", { name: "Service due" }),
+    ).toBeInTheDocument();
+  });
+
+  it("links each row to the asset with tag, date and due marker", () => {
+    render(
+      <UpcomingServicesWidget
+        items={items}
+        overdueCount={1}
+        serviceSchedulingEnabled={true}
+        dateFormat="DD-MM-YYYY"
+      />,
+    );
+
+    const forklift = screen.getByRole("link", { name: /Forklift A/ });
+    expect(forklift).toHaveAttribute("href", "/assets/asset1");
+    expect(within(forklift).getByText("FK-001")).toBeInTheDocument();
+    expect(within(forklift).getByText("05-03-2026")).toBeInTheDocument();
+    expect(within(forklift).getByText("Overdue 2 days")).toBeInTheDocument();
+    expect(within(forklift).getByText("Overdue 2d")).toBeInTheDocument();
 
-    expect(screen.getByText("Generator B")).toBeVisible();
-    expect(screen.getByText("GN-002")).toBeVisible();
-    expect(screen.getByText("Due in 3 days")).toBeVisible();
+    const generator = screen.getByRole("link", { name: /Generator B/ });
+    expect(generator).toHaveAttribute("href", "/assets/asset2");
+    expect(within(generator).getByText("GN-002")).toBeInTheDocument();
+    expect(within(generator).getByText("10-03-2026")).toBeInTheDocument();
+    expect(within(generator).getByText("In 3 days")).toBeInTheDocument();
   });
 
-  it("shows overdue badge when overdueCount > 0", () => {
+  it("closes the list with overdue and more-scheduled counts and a services link", () => {
     render(
       <UpcomingServicesWidget
         items={items}
         overdueCount={3}
+        scheduledCount={6}
+        serviceSchedulingEnabled={true}
+        dateFormat="DD-MM-YYYY"
+      />,
+    );
+
+    expect(screen.getByText(/3 overdue/)).toBeInTheDocument();
+    expect(screen.getByText(/4 more scheduled/)).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "See all services" }),
+    ).toHaveAttribute("href", "/services");
+  });
+
+  it("omits the overdue and more counts when there are none", () => {
+    render(
+      <UpcomingServicesWidget
+        items={items}
+        overdueCount={0}
         serviceSchedulingEnabled={true}
         dateFormat="DD-MM-YYYY"
       />,
     );
 
-    expect(screen.getByText("3 overdue")).toBeVisible();
+    expect(screen.queryByText(/overdue ·/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/more scheduled/)).not.toBeInTheDocument();
   });
 
   it("shows disabled message when service scheduling is off", () => {
diff --git a/src/__tests__/components/labels/asset-label-panel.test.tsx b/src/__tests__/components/labels/asset-label-panel.test.tsx
new file mode 100644
index 0000000..aa63274
--- /dev/null
+++ b/src/__tests__/components/labels/asset-label-panel.test.tsx
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+
+const getDefaultLabelTemplateMock = vi.fn();
+const getLabelUrlBaseMock = vi.fn();
+const ensureDefaultLabelTemplatesMock = vi.fn();
+
+vi.mock("@/lib/api/label-templates", () => ({
+  getDefaultLabelTemplate: () => getDefaultLabelTemplateMock(),
+  getLabelUrlBase: () => getLabelUrlBaseMock(),
+  ensureDefaultLabelTemplates: () => ensureDefaultLabelTemplatesMock(),
+}));
+
+vi.mock("@/hooks/use-current-user", () => ({
+  useCurrentUser: () => ({ data: { role: "admin" } }),
+}));
+
+vi.mock("@/components/labels/label-preview", () => ({
+  LabelPreview: () => <div>label-preview</div>,
+}));
+
+import { AssetLabelPanel } from "@/components/labels/asset-label-panel";
+
+const asset = {
+  id: "asset1",
+  name: "Drill #47",
+  assetTag: "AST-0047",
+} as never;
+
+function renderPanel() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <AssetLabelPanel asset={asset} fieldDefinitions={[]} />
+    </QueryClientProvider>,
+  );
+}
+
+describe("AssetLabelPanel", () => {
+  beforeEach(() => {
+    getDefaultLabelTemplateMock.mockReset();
+    getLabelUrlBaseMock.mockReset().mockResolvedValue(null);
+    ensureDefaultLabelTemplatesMock.mockReset();
+  });
+
+  it("points to the Labels page without re-creating templates when none exist", async () => {
+    getDefaultLabelTemplateMock.mockResolvedValue(null);
+    renderPanel();
+
+    expect(
+      await screen.findByText(/No label template yet\./),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Set one up…" })).toHaveAttribute(
+      "href",
+      "/labels",
+    );
+    expect(ensureDefaultLabelTemplatesMock).not.toHaveBeenCalled();
+  });
+
+  it("links Print label to the print page for this asset", async () => {
+    getDefaultLabelTemplateMock.mockResolvedValue(null);
+    renderPanel();
+
+    expect(screen.getByRole("link", { name: /Print label/ })).toHaveAttribute(
+      "href",
+      "/labels/print?assetId=asset1",
+    );
+    await screen.findByText(/No label template yet\./);
+  });
+});
diff --git a/src/__tests__/components/labels/element-properties.test.tsx b/src/__tests__/components/labels/element-properties.test.tsx
new file mode 100644
index 0000000..b9763b0
--- /dev/null
+++ b/src/__tests__/components/labels/element-properties.test.tsx
@@ -0,0 +1,54 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ElementProperties } from "@/components/labels/element-properties";
+import type { EditableLabelTemplate } from "@/components/labels/types";
+
+function renderProps(
+  template: Partial<EditableLabelTemplate>,
+  onDeleteTemplate = vi.fn(),
+) {
+  render(
+    <ElementProperties
+      template={{
+        id: "t1",
+        name: "Thermal",
+        widthMm: 57,
+        heightMm: 32,
+        elements: [],
+        isDefault: false,
+        ...template,
+      }}
+      selectedElement={null}
+      fieldDefinitions={[]}
+      canEdit
+      dirty={false}
+      saving={false}
+      deleting={false}
+      onTemplateChange={vi.fn()}
+      onSelectPreset={vi.fn()}
+      onChangeElement={vi.fn()}
+      onDeleteElement={vi.fn()}
+      onDeleteTemplate={onDeleteTemplate}
+      onSave={vi.fn()}
+    />,
+  );
+  return onDeleteTemplate;
+}
+
+describe("ElementProperties template footer", () => {
+  it("offers a named delete button for a non-default template", () => {
+    const onDelete = renderProps({ isDefault: false });
+    fireEvent.click(screen.getByRole("button", { name: "Delete template…" }));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("says in visible text that the default template can't be deleted", () => {
+    renderProps({ isDefault: true });
+    expect(
+      screen.queryByRole("button", { name: "Delete template…" }),
+    ).toBeNull();
+    expect(
+      screen.getByText("Default template, can't be deleted"),
+    ).toBeVisible();
+  });
+});
diff --git a/src/__tests__/components/labels/template-designer.test.tsx b/src/__tests__/components/labels/template-designer.test.tsx
index 37c6fbc..d8c7158 100644
--- a/src/__tests__/components/labels/template-designer.test.tsx
+++ b/src/__tests__/components/labels/template-designer.test.tsx
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import { TemplateDesigner } from "@/components/labels/template-designer";
 import type {
   LabelPreviewAsset,
@@ -141,6 +141,35 @@ describe("TemplateDesigner", () => {
     expect(screen.getByText("57 x 32 mm")).toBeInTheDocument();
   });
 
+  it("lists templates as list items holding buttons, marking the active one", () => {
+    renderWithClient(
+      <TemplateDesigner
+        currentUserRole="admin"
+        templates={[
+          sampleTemplate,
+          {
+            ...sampleTemplate,
+            id: "template-2",
+            name: "Small",
+            isDefault: false,
+          },
+        ]}
+        labelUrlBase="http://localhost:3000"
+        sampleAsset={sampleAsset}
+        fieldDefinitions={sampleFieldDefs}
+      />,
+    );
+
+    const list = screen.getByRole("list", { name: "Label templates" });
+    const items = within(list).getAllByRole("listitem");
+    expect(items).toHaveLength(2);
+    const first = within(items[0]).getByRole("button");
+    expect(first).toHaveAttribute("aria-current", "true");
+    expect(within(items[1]).getByRole("button")).not.toHaveAttribute(
+      "aria-current",
+    );
+  });
+
   it("shows empty state when no templates exist", () => {
     renderWithClient(
       <TemplateDesigner
diff --git a/src/__tests__/components/layout/app-shell.test.tsx b/src/__tests__/components/layout/app-shell.test.tsx
index 6c76dc1..030c6fb 100644
--- a/src/__tests__/components/layout/app-shell.test.tsx
+++ b/src/__tests__/components/layout/app-shell.test.tsx
@@ -27,12 +27,17 @@ vi.mock("@/lib/api/auth", () => ({
   logout: vi.fn(),
 }));
 
+vi.mock("@/hooks/use-overdue-count", () => ({
+  useOverdueCount: () => 0,
+}));
+
 vi.mock("@/components/search/global-search", () => ({
   GlobalSearch: () => (
     <button type="button" aria-label="Open global search">
       Search assets...
     </button>
   ),
+  GlobalSearchDialog: () => null,
 }));
 
 import { AppShell } from "@/components/layout/app-shell";
@@ -55,18 +60,23 @@ describe("AppShell", () => {
     expect(screen.getByText("Hello Stowage")).toBeInTheDocument();
   });
 
-  it("renders sidebar and topbar together", () => {
+  it("renders the sidebar, tablet rail, phone top bar and bottom nav around main", () => {
     renderWithClient(
       <AppShell>
         <div>Content</div>
       </AppShell>,
     );
-    const brands = screen.getAllByText("Stowage");
-    expect(brands.length).toBeGreaterThanOrEqual(1);
-    const triggers = screen.getAllByRole("button", {
-      name: "Open global search",
-    });
-    expect(triggers.length).toBeGreaterThanOrEqual(1);
-    expect(screen.getByText("Content")).toBeInTheDocument();
+    // Desktop sidebar and tablet rail are both "Main" complementary landmarks;
+    // CSS decides which one shows.
+    expect(screen.getAllByRole("complementary", { name: "Main" })).toHaveLength(
+      2,
+    );
+    expect(screen.getByRole("banner")).toBeInTheDocument();
+    expect(screen.getByRole("navigation", { name: "Primary" })).toBeInTheDocument();
+    expect(screen.getByRole("main")).toHaveTextContent("Content");
+    // Sidebar, rail and phone top bar each carry a search trigger.
+    expect(
+      screen.getAllByRole("button", { name: "Open global search" }),
+    ).toHaveLength(3);
   });
 });
diff --git a/src/__tests__/components/layout/app-sidebar.test.tsx b/src/__tests__/components/layout/app-sidebar.test.tsx
index 08a6ccf..cb8b13c 100644
--- a/src/__tests__/components/layout/app-sidebar.test.tsx
+++ b/src/__tests__/components/layout/app-sidebar.test.tsx
@@ -1,67 +1,156 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+
+const pathnameSpy = vi.fn(() => "/dashboard");
+const overdueSpy = vi.fn(() => 0);
 
-// Mock next/navigation
 vi.mock("next/navigation", () => ({
-  usePathname: () => "/dashboard",
+  usePathname: () => pathnameSpy(),
+}));
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("@/hooks/use-overdue-count", () => ({
+  useOverdueCount: () => overdueSpy(),
+}));
+
+vi.mock("@/components/search/global-search", () => ({
+  GlobalSearch: ({ variant }: { variant?: string }) => (
+    <button type="button" data-variant={variant}>
+      Search assets
+    </button>
+  ),
 }));
 
-// Mock use-mobile hook
-vi.mock("@/hooks/use-mobile", () => ({
-  useIsMobile: () => false,
+vi.mock("@/components/layout/user-menu", () => ({
+  UserMenu: () => (
+    <button type="button" aria-label="Open user menu">
+      User
+    </button>
+  ),
 }));
 
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { AppRail, AppSidebar } from "@/components/layout/app-sidebar";
 
-function renderWithProviders() {
-  return render(
-    <SidebarProvider>
-      <AppSidebar />
-    </SidebarProvider>,
-  );
-}
+const NAV_LINKS: Record<string, string> = {
+  Home: "/dashboard",
+  Services: "/services",
+  Assets: "/assets",
+  Locations: "/locations",
+  Taxonomy: "/taxonomy",
+  Labels: "/labels",
+  Settings: "/settings",
+};
 
 describe("AppSidebar", () => {
-  it("renders the Stowage brand name", () => {
-    renderWithProviders();
-    // SidebarProvider renders desktop + mobile, so brand may appear multiple times
-    const brands = screen.getAllByText("Stowage");
-    expect(brands.length).toBeGreaterThanOrEqual(1);
+  beforeEach(() => {
+    pathnameSpy.mockReturnValue("/dashboard");
+    overdueSpy.mockReturnValue(0);
+  });
+
+  it("renders the Stowage brand linking home", () => {
+    render(<AppSidebar />);
+    expect(screen.getByRole("link", { name: "Stowage" })).toHaveAttribute(
+      "href",
+      "/dashboard",
+    );
   });
 
-  it("renders all navigation links", () => {
-    renderWithProviders();
-    const expectedItems = [
-      "Dashboard",
-      "Assets",
-      "Locations",
-      "Taxonomy",
-      "Services",
-      "Labels",
-      "Settings",
-    ];
-    for (const item of expectedItems) {
-      const elements = screen.getAllByText(item);
-      expect(elements.length).toBeGreaterThanOrEqual(1);
+  it("renders search, Scan a label and the user menu", () => {
+    render(<AppSidebar />);
+    const sidebar = screen.getByRole("complementary", { name: "Main" });
+    expect(
+      within(sidebar).getByRole("button", { name: "Search assets" }),
+    ).toHaveAttribute("data-variant", "sidebar");
+    expect(
+      within(sidebar).getByRole("link", { name: "Scan a label" }),
+    ).toHaveAttribute("href", "/scan");
+    expect(
+      within(sidebar).getByRole("button", { name: "Open user menu" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders every nav item with its href", () => {
+    render(<AppSidebar />);
+    for (const [name, href] of Object.entries(NAV_LINKS)) {
+      expect(screen.getByRole("link", { name })).toHaveAttribute("href", href);
     }
+    expect(screen.queryByRole("link", { name: "Dashboard" })).toBeNull();
+    expect(screen.getByText("Inventory")).toBeInTheDocument();
   });
 
-  it("renders navigation links with correct hrefs", () => {
-    renderWithProviders();
-    const links: Record<string, string> = {
-      Dashboard: "/dashboard",
-      Assets: "/assets",
-      Locations: "/locations",
-      Taxonomy: "/taxonomy",
-      Services: "/services",
-      Labels: "/labels",
-      Settings: "/settings",
-    };
-    for (const [name, href] of Object.entries(links)) {
-      const elements = screen.getAllByText(name);
-      const link = elements[0].closest("a");
-      expect(link).toHaveAttribute("href", href);
+  it("marks the current item with aria-current", () => {
+    pathnameSpy.mockReturnValue("/categories");
+    render(<AppSidebar />);
+    expect(screen.getByRole("link", { name: "Taxonomy" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      screen.getByRole("link", { name: "Home" }).getAttribute("aria-current"),
+    ).toBeNull();
+  });
+
+  it("shows the overdue badge on Services only when there are overdue services", () => {
+    overdueSpy.mockReturnValue(3);
+    const { unmount } = render(<AppSidebar />);
+    const services = screen.getByRole("link", { name: /Services/ });
+    expect(within(services).getByLabelText("3 overdue")).toHaveTextContent("3");
+    unmount();
+
+    overdueSpy.mockReturnValue(0);
+    render(<AppSidebar />);
+    expect(screen.queryByLabelText(/overdue/)).toBeNull();
+  });
+});
+
+describe("AppRail", () => {
+  beforeEach(() => {
+    pathnameSpy.mockReturnValue("/assets/abc");
+    overdueSpy.mockReturnValue(0);
+  });
+
+  it("renders labelled icon links for every nav item plus home, search and scan", () => {
+    render(<AppRail />);
+    expect(screen.getByRole("link", { name: "Stowage home" })).toHaveAttribute(
+      "href",
+      "/dashboard",
+    );
+    for (const [name, href] of Object.entries(NAV_LINKS)) {
+      expect(screen.getByRole("link", { name })).toHaveAttribute("href", href);
     }
+    expect(screen.getByRole("link", { name: "Scan" })).toHaveAttribute(
+      "href",
+      "/scan",
+    );
+    expect(
+      screen.getByRole("button", { name: "Search assets" }),
+    ).toHaveAttribute("data-variant", "rail");
+  });
+
+  it("announces the overdue count in the Services link name", () => {
+    overdueSpy.mockReturnValue(4);
+    render(<AppRail />);
+    expect(
+      screen.getByRole("link", { name: "Services, 4 overdue" }),
+    ).toHaveAttribute("href", "/services");
+  });
+
+  it("marks the current item with aria-current", () => {
+    render(<AppRail />);
+    expect(screen.getByRole("link", { name: "Assets" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
   });
 });
diff --git a/src/__tests__/components/layout/bottom-nav.test.tsx b/src/__tests__/components/layout/bottom-nav.test.tsx
index e0bcea3..4897bdb 100644
--- a/src/__tests__/components/layout/bottom-nav.test.tsx
+++ b/src/__tests__/components/layout/bottom-nav.test.tsx
@@ -5,7 +5,11 @@ 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();
+const overdueSpy = vi.fn(() => 0);
+
+vi.mock("@/hooks/use-overdue-count", () => ({
+  useOverdueCount: () => overdueSpy(),
+}));
 
 vi.mock("next/navigation", () => ({
   usePathname: () => pathnameSpy(),
@@ -21,10 +25,6 @@ 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() {
@@ -43,7 +43,7 @@ describe("BottomNav", () => {
     pathnameSpy.mockReturnValue("/dashboard");
     replaceSpy.mockReset();
     logoutSpy.mockReset();
-    toastErrorSpy.mockReset();
+    overdueSpy.mockReturnValue(0);
   });
 
   it("renders all five slots with the scan button in the center", () => {
@@ -56,13 +56,43 @@ describe("BottomNav", () => {
 
     const scan = screen.getByTestId("bottom-nav-scan");
     expect(scan).toHaveAttribute("href", "/scan");
-    expect(scan.className).toMatch(/var\(--scan\)/);
+    expect(scan).toHaveAccessibleName("Scan a label");
+    // The amber slab is the inner span; it is the only use of --scan.
+    expect(scan.querySelector("span")?.className).toMatch(/var\(--scan\)/);
+
+    const order = Array.from(
+      screen.getByTestId("bottom-nav").querySelectorAll("[data-testid]"),
+    ).map((el) => el.getAttribute("data-testid"));
+    expect(order).toEqual([
+      "bottom-nav-home",
+      "bottom-nav-assets",
+      "bottom-nav-scan",
+      "bottom-nav-services",
+      "bottom-nav-more",
+    ]);
   });
 
-  it("hides itself on large viewports", () => {
+  it("links the tabs to their pages", () => {
+    renderNav();
+    expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute(
+      "href",
+      "/dashboard",
+    );
+    expect(screen.getByRole("link", { name: "Assets" })).toHaveAttribute(
+      "href",
+      "/assets",
+    );
+    expect(screen.getByRole("link", { name: "Services" })).toHaveAttribute(
+      "href",
+      "/services",
+    );
+    expect(screen.getByRole("button", { name: "More" })).toBeInTheDocument();
+  });
+
+  it("hides itself from tablet width up", () => {
     renderNav();
     const nav = screen.getByTestId("bottom-nav");
-    expect(nav.className).toMatch(/lg:hidden/);
+    expect(nav.className).toMatch(/(^|\s)md:hidden(\s|$)/);
   });
 
   it("marks Home active on /dashboard", () => {
@@ -98,6 +128,26 @@ describe("BottomNav", () => {
     );
   });
 
+  it("shows the overdue count on Services", () => {
+    overdueSpy.mockReturnValue(2);
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-services")).toHaveTextContent(
+      "Services2",
+    );
+    expect(
+      screen.getByRole("link", { name: "Services, 2 overdue" }),
+    ).toBe(screen.getByTestId("bottom-nav-services"));
+  });
+
+  it("marks More active on pages that live in the More sheet", () => {
+    pathnameSpy.mockReturnValue("/locations");
+    renderNav();
+    expect(screen.getByTestId("bottom-nav-more")).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
   it("marks SCAN active on /scan", () => {
     pathnameSpy.mockReturnValue("/scan");
     renderNav();
@@ -145,19 +195,4 @@ describe("BottomNav", () => {
       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
index 22ea3cc..adc7f38 100644
--- a/src/__tests__/components/layout/mobile-action-sheet.test.tsx
+++ b/src/__tests__/components/layout/mobile-action-sheet.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 
 import { MobileActionSheet } from "@/components/layout/mobile-action-sheet";
 
@@ -72,4 +72,38 @@ describe("MobileActionSheet", () => {
     fireEvent.keyDown(document.body, { key: "Escape" });
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  it("focuses the sheet itself by default so the phone keyboard stays down", async () => {
+    render(
+      <MobileActionSheet open={true} onOpenChange={() => {}} title="Actions">
+        <input aria-label="Plain field" />
+      </MobileActionSheet>,
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId("mobile-action-sheet")).toHaveFocus();
+    });
+  });
+
+  it("keeps focus on a field that asks for it with autoFocus", async () => {
+    render(
+      <MobileActionSheet open={true} onOpenChange={() => {}} title="Type the tag">
+        <input aria-label="Asset tag" autoFocus />
+      </MobileActionSheet>,
+    );
+    await waitFor(() => {
+      expect(screen.getByLabelText("Asset tag")).toHaveFocus();
+    });
+  });
+
+  it("focuses a field marked data-autofocus", async () => {
+    render(
+      <MobileActionSheet open={true} onOpenChange={() => {}} title="Rename">
+        <input aria-label="First" />
+        <input aria-label="Name" data-autofocus="" />
+      </MobileActionSheet>,
+    );
+    await waitFor(() => {
+      expect(screen.getByLabelText("Name")).toHaveFocus();
+    });
+  });
 });
diff --git a/src/__tests__/components/layout/mobile-top-bar.test.tsx b/src/__tests__/components/layout/mobile-top-bar.test.tsx
new file mode 100644
index 0000000..e8ce1e8
--- /dev/null
+++ b/src/__tests__/components/layout/mobile-top-bar.test.tsx
@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+
+const nav = vi.hoisted(() => ({ pathname: "/assets/abc", role: "admin" }));
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => nav.pathname,
+}));
+
+vi.mock("@/hooks/use-current-user", () => ({
+  useCurrentUser: () => ({ data: { role: nav.role } }),
+}));
+
+vi.mock("@/components/search/global-search", () => ({
+  GlobalSearch: () => (
+    <button type="button" aria-label="Open global search">
+      Search
+    </button>
+  ),
+}));
+
+vi.mock("@/components/layout/user-menu", () => ({
+  UserMenu: () => <button type="button">Account</button>,
+}));
+
+import { MobileBar, MobileTopBar } from "@/components/layout/mobile-top-bar";
+
+describe("MobileTopBar", () => {
+  it("makes its own controls inert while a page bar covers it", async () => {
+    const { rerender } = render(<MobileTopBar />);
+    const controls = screen.getByTestId("mobile-top-bar-controls");
+    expect(controls).not.toHaveAttribute("inert");
+
+    await act(async () => {
+      rerender(
+        <>
+          <MobileTopBar />
+          <MobileBar backHref="/assets" backLabel="Back to assets" />
+        </>,
+      );
+    });
+
+    expect(screen.getByRole("link", { name: "Back to assets" })).toBeInTheDocument();
+    expect(screen.getByTestId("mobile-top-bar-controls")).toHaveAttribute("inert");
+
+    await act(async () => {
+      rerender(<MobileTopBar />);
+    });
+    expect(screen.getByTestId("mobile-top-bar-controls")).not.toHaveAttribute(
+      "inert",
+    );
+  });
+
+  it("offers New location on Locations only to admins", () => {
+    nav.pathname = "/locations";
+    nav.role = "admin";
+    const { unmount } = render(<MobileTopBar />);
+    expect(screen.getByRole("link", { name: "New location" })).toHaveAttribute(
+      "href",
+      "/locations?new=1",
+    );
+    unmount();
+
+    nav.role = "user";
+    render(<MobileTopBar />);
+    expect(screen.queryByRole("link", { name: "New location" })).toBeNull();
+    expect(screen.getByRole("link", { name: "New asset" })).toHaveAttribute(
+      "href",
+      "/assets/new",
+    );
+    nav.pathname = "/assets/abc";
+    nav.role = "admin";
+  });
+});
diff --git a/src/__tests__/components/layout/topbar.test.tsx b/src/__tests__/components/layout/topbar.test.tsx
deleted file mode 100644
index 06f6e46..0000000
--- a/src/__tests__/components/layout/topbar.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen } from "@testing-library/react";
-
-vi.mock("next/navigation", () => ({
-  usePathname: () => "/dashboard",
-  useRouter: () => ({ replace: vi.fn() }),
-}));
-
-vi.mock("next-themes", () => ({
-  useTheme: () => ({ theme: "light", setTheme: vi.fn() }),
-  ThemeProvider: ({ children }: { children: React.ReactNode }) => children,
-}));
-
-vi.mock("@/hooks/use-mobile", () => ({
-  useIsMobile: () => false,
-}));
-
-vi.mock("@/lib/api/auth", () => ({
-  getCurrentUser: () =>
-    Promise.resolve({
-      id: "u1",
-      email: "alex@example.com",
-      name: "Alex Admin",
-      role: "admin",
-    }),
-  logout: vi.fn(),
-}));
-
-vi.mock("@/components/search/global-search", () => ({
-  GlobalSearch: () => (
-    <button type="button" aria-label="Open global search">
-      Search assets...
-    </button>
-  ),
-}));
-
-import { SidebarProvider } from "@/components/ui/sidebar";
-import { Topbar } from "@/components/layout/topbar";
-
-function renderWithProviders() {
-  const qc = new QueryClient({
-    defaultOptions: { queries: { retry: false } },
-  });
-  return render(
-    <QueryClientProvider client={qc}>
-      <SidebarProvider>
-        <Topbar />
-      </SidebarProvider>
-    </QueryClientProvider>,
-  );
-}
-
-describe("Topbar", () => {
-  it("renders the global search trigger", () => {
-    renderWithProviders();
-    const triggers = screen.getAllByRole("button", {
-      name: "Open global search",
-    });
-    expect(triggers.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("renders the theme toggle button", () => {
-    renderWithProviders();
-    const toggles = screen.getAllByText("Toggle theme");
-    expect(toggles.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("renders the user menu button", () => {
-    renderWithProviders();
-    const menus = screen.getAllByLabelText("Open user menu");
-    expect(menus.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("search trigger is interactive", () => {
-    renderWithProviders();
-    expect(
-      screen.getAllByRole("button", { name: "Open global search" })[0],
-    ).not.toBeDisabled();
-  });
-});
diff --git a/src/__tests__/components/layout/user-menu.test.tsx b/src/__tests__/components/layout/user-menu.test.tsx
new file mode 100644
index 0000000..649f118
--- /dev/null
+++ b/src/__tests__/components/layout/user-menu.test.tsx
@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const replaceSpy = vi.fn();
+const logoutSpy = vi.fn();
+const setThemeSpy = vi.fn();
+const toastErrorSpy = vi.fn();
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: replaceSpy }),
+}));
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ theme: "light", setTheme: setThemeSpy }),
+}));
+
+vi.mock("@/lib/api/auth", () => ({
+  getCurrentUser: () =>
+    Promise.resolve({
+      id: "u1",
+      email: "alex@example.com",
+      name: "Alex Admin",
+      role: "admin",
+    }),
+  logout: () => logoutSpy(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { error: (...args: unknown[]) => toastErrorSpy(...args) },
+}));
+
+import { UserMenu } from "@/components/layout/user-menu";
+
+function renderMenu() {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <UserMenu />
+    </QueryClientProvider>,
+  );
+}
+
+async function openMenu() {
+  const user = userEvent.setup();
+  const trigger = screen.getByRole("button", { name: "Open user menu" });
+  await waitFor(() => expect(trigger).toBeEnabled());
+  await user.click(trigger);
+  return user;
+}
+
+describe("UserMenu", () => {
+  beforeEach(() => {
+    replaceSpy.mockReset();
+    logoutSpy.mockReset();
+    setThemeSpy.mockReset();
+    toastErrorSpy.mockReset();
+  });
+
+  it("shows the signed-in user's name and role on the trigger", async () => {
+    renderMenu();
+    expect(await screen.findByText("Alex Admin")).toBeInTheDocument();
+    expect(screen.getByText("Admin")).toBeInTheDocument();
+  });
+
+  it("opens with the email, appearance options and sign out", async () => {
+    renderMenu();
+    const user = await openMenu();
+
+    expect(await screen.findByText("alex@example.com")).toBeInTheDocument();
+    await user.click(screen.getByRole("menuitem", { name: "Dark" }));
+    expect(setThemeSpy).toHaveBeenCalledWith("dark");
+  });
+
+  it("signs out and redirects to login", async () => {
+    logoutSpy.mockResolvedValue(undefined);
+    renderMenu();
+    const user = await openMenu();
+
+    await user.click(await screen.findByRole("menuitem", { name: "Sign out" }));
+
+    await waitFor(() => {
+      expect(logoutSpy).toHaveBeenCalledOnce();
+      expect(replaceSpy).toHaveBeenCalledWith("/login");
+    });
+  });
+
+  it("keeps the user signed in when logout rejects", async () => {
+    logoutSpy.mockRejectedValue(new Error("network"));
+    renderMenu();
+    const user = await openMenu();
+
+    await user.click(await screen.findByRole("menuitem", { name: "Sign out" }));
+
+    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/locations/location-tree.test.tsx b/src/__tests__/components/locations/location-tree.test.tsx
deleted file mode 100644
index a495282..0000000
--- a/src/__tests__/components/locations/location-tree.test.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  LocationTree,
-  buildLocationChildrenMap,
-  collectDescendantIds,
-  type LocationTreeItem,
-} from "@/components/locations/location-tree";
-
-const locations: LocationTreeItem[] = [
-  {
-    id: "root",
-    name: "Warehouse",
-    parentId: null,
-    description: null,
-    path: "Warehouse",
-    createdAt: 1,
-    updatedAt: 1,
-  },
-  {
-    id: "child",
-    name: "Aisle 1",
-    parentId: "root",
-    description: null,
-    path: "Warehouse / Aisle 1",
-    createdAt: 2,
-    updatedAt: 2,
-  },
-  {
-    id: "grandchild",
-    name: "Bin 2",
-    parentId: "child",
-    description: null,
-    path: "Warehouse / Aisle 1 / Bin 2",
-    createdAt: 3,
-    updatedAt: 3,
-  },
-];
-
-describe("location tree helpers", () => {
-  it("collects descendant ids", () => {
-    const childrenByParent = buildLocationChildrenMap(locations);
-    expect(
-      Array.from(collectDescendantIds("root", childrenByParent)).sort(),
-    ).toEqual(["child", "grandchild"]);
-    expect(Array.from(collectDescendantIds("child", childrenByParent))).toEqual(
-      ["grandchild"],
-    );
-  });
-});
-
-describe("LocationTree", () => {
-  it("renders root nodes and expands nested children", async () => {
-    const user = userEvent.setup();
-    const onToggleExpand = vi.fn();
-    const onSelect = vi.fn();
-
-    const { rerender } = render(
-      <LocationTree
-        locations={locations}
-        selectedId={null}
-        expandedIds={new Set<string>()}
-        canManage={false}
-        onToggleExpand={onToggleExpand}
-        onSelect={onSelect}
-        onAddChild={vi.fn()}
-        onDelete={vi.fn()}
-      />,
-    );
-
-    expect(
-      screen.getByRole("button", { name: /Warehouse/i }),
-    ).toBeInTheDocument();
-    expect(screen.queryByText("Aisle 1")).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Expand" }));
-    expect(onToggleExpand).toHaveBeenCalledWith("root");
-
-    rerender(
-      <LocationTree
-        locations={locations}
-        selectedId={null}
-        expandedIds={new Set(["root", "child"])}
-        canManage={false}
-        onToggleExpand={onToggleExpand}
-        onSelect={onSelect}
-        onAddChild={vi.fn()}
-        onDelete={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByText("Aisle 1")).toBeInTheDocument();
-    expect(screen.getByText("Warehouse / Aisle 1 / Bin 2")).toBeInTheDocument();
-
-    const rootLabel = screen.getAllByText("Warehouse")[0];
-    const rootSelectButton = rootLabel.closest("button");
-    expect(rootSelectButton).not.toBeNull();
-    await user.click(rootSelectButton!);
-    expect(onSelect).toHaveBeenCalledWith("root");
-  });
-});
diff --git a/src/__tests__/components/locations/locations-page-client.test.tsx b/src/__tests__/components/locations/locations-page-client.test.tsx
new file mode 100644
index 0000000..3742ab5
--- /dev/null
+++ b/src/__tests__/components/locations/locations-page-client.test.tsx
@@ -0,0 +1,267 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const listLocationsMock = vi.fn();
+const listAssetsMock = vi.fn();
+const deleteLocationMock = vi.fn();
+const currentUserMock = vi.fn();
+const mockReplace = vi.fn();
+const mockPush = vi.fn();
+const toastInfo = vi.fn();
+let currentSearchParams = new URLSearchParams();
+
+vi.mock("@/lib/api/locations", () => ({
+  listLocations: () => listLocationsMock(),
+  createLocation: vi.fn(),
+  updateLocation: vi.fn(),
+  deleteLocation: (id: string) => deleteLocationMock(id),
+}));
+
+vi.mock("@/lib/api/assets", () => ({
+  listAssets: () => listAssetsMock(),
+}));
+
+vi.mock("@/lib/api/app-settings", () => ({
+  getAppSettings: () => Promise.resolve({ serviceSchedulingEnabled: false }),
+}));
+
+vi.mock("@/lib/api/service-schedules", () => ({
+  listScheduledAssets: () => Promise.resolve([]),
+}));
+
+vi.mock("@/hooks/use-current-user", () => ({
+  useCurrentUser: () => ({ data: currentUserMock() }),
+}));
+
+vi.mock("@/hooks/use-media-query", () => ({
+  useMediaQuery: () => false,
+}));
+
+vi.mock("@/components/layout/mobile-top-bar", () => ({
+  MobileTitleCount: () => null,
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    info: (message: string) => toastInfo(message),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: mockReplace, push: mockPush }),
+  useSearchParams: () => currentSearchParams,
+}));
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+import { LocationsPageClient } from "@/components/locations/locations-page-client";
+
+function location(
+  id: string,
+  name: string,
+  parentId: string | null,
+  path: string,
+) {
+  return {
+    id,
+    name,
+    parentId,
+    description: null,
+    path,
+    createdAt: 0,
+    updatedAt: 0,
+  };
+}
+
+const LOCATIONS = [
+  location("w", "Workshop", null, "Workshop"),
+  location("b", "Bench 2", "w", "Workshop / Bench 2"),
+  location("d", "Drawer", "b", "Workshop / Bench 2 / Drawer"),
+  location("s", "Store", null, "Store"),
+  location("e", "Shelf", "s", "Store / Shelf"),
+];
+
+function asset(
+  id: string,
+  locationId: string | null,
+  locationPath: string | null,
+) {
+  return {
+    id,
+    name: `Asset ${id}`,
+    assetTag: `AS-${id}`,
+    status: "active",
+    categoryId: null,
+    categoryName: null,
+    categoryColor: null,
+    locationId,
+    locationPath,
+    serviceGroupId: null,
+    notes: null,
+    tagIds: [],
+    tagNames: [],
+    createdAt: 0,
+    updatedAt: 0,
+  };
+}
+
+const ASSETS = [
+  asset("1", "b", "Workshop / Bench 2"),
+  asset("2", "d", "Workshop / Bench 2 / Drawer"),
+  asset("3", "w", "Workshop"),
+  asset("4", null, null),
+];
+
+function renderPage() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const ui = () => (
+    <QueryClientProvider client={qc}>
+      <LocationsPageClient />
+    </QueryClientProvider>
+  );
+  const result = render(ui());
+  return { ...result, rerenderPage: () => result.rerender(ui()) };
+}
+
+function treeRow(name: string) {
+  const tree = screen.getByRole("list", { name: "Location tree" });
+  return within(tree).queryByRole("button", {
+    name: new RegExp(`^${name}\\d+$`),
+  });
+}
+
+describe("LocationsPageClient", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    currentSearchParams = new URLSearchParams();
+    listLocationsMock.mockResolvedValue(LOCATIONS);
+    listAssetsMock.mockResolvedValue(ASSETS);
+    currentUserMock.mockReturnValue({ id: "u1", role: "admin" });
+  });
+
+  it("rolls asset counts up the tree and leaves unplaced assets out of the subline", async () => {
+    currentSearchParams = new URLSearchParams("location=d");
+    renderPage();
+
+    await screen.findByRole("list", { name: "Location tree" });
+    expect(treeRow("Workshop")).toHaveTextContent("Workshop3");
+    expect(treeRow("Bench 2")).toHaveTextContent("Bench 22");
+    expect(treeRow("Drawer")).toHaveTextContent("Drawer1");
+    expect(treeRow("Store")).toHaveTextContent("Store0");
+    expect(screen.getByText("3 assets across 2 sites")).toBeInTheDocument();
+  });
+
+  it("selects the location named in ?location= and opens the path to it", async () => {
+    currentSearchParams = new URLSearchParams("location=d");
+    renderPage();
+
+    const drawer = await waitFor(() => {
+      const row = treeRow("Drawer");
+      expect(row).not.toBeNull();
+      return row!;
+    });
+    expect(drawer).toHaveAttribute("aria-current", "true");
+    expect(
+      within(screen.getByTestId("location-detail")).getByRole("heading", {
+        level: 2,
+      }),
+    ).toHaveTextContent("Drawer");
+  });
+
+  it("reveals a newly selected location even after rows were collapsed", async () => {
+    const user = userEvent.setup();
+    currentSearchParams = new URLSearchParams("location=w");
+    const { rerenderPage } = renderPage();
+
+    await waitFor(() => expect(treeRow("Bench 2")).not.toBeNull());
+    await user.click(screen.getByRole("button", { name: "Collapse Workshop" }));
+    expect(treeRow("Bench 2")).toBeNull();
+
+    currentSearchParams = new URLSearchParams("location=d");
+    rerenderPage();
+
+    expect(treeRow("Bench 2")).not.toBeNull();
+    expect(treeRow("Drawer")).toHaveAttribute("aria-current", "true");
+
+    // Once revealed, the user can still close the path again.
+    await user.click(screen.getByRole("button", { name: "Collapse Workshop" }));
+    expect(treeRow("Drawer")).toBeNull();
+  });
+
+  it("opens New location for admins on ?new=1", async () => {
+    currentSearchParams = new URLSearchParams("new=1");
+    renderPage();
+
+    expect(
+      await screen.findByRole("dialog", { name: "New location" }),
+    ).toBeInTheDocument();
+  });
+
+  it("drops ?new=1 for non-admins and says why", async () => {
+    currentUserMock.mockReturnValue({ id: "u2", role: "user" });
+    currentSearchParams = new URLSearchParams("new=1&location=s");
+    renderPage();
+
+    await waitFor(() =>
+      expect(toastInfo).toHaveBeenCalledWith("Only admins can add locations."),
+    );
+    expect(mockReplace).toHaveBeenCalledWith("/locations?location=s", {
+      scroll: false,
+    });
+    expect(
+      screen.queryByRole("dialog", { name: "New location" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("blocks deleting a location that still holds assets or sub-locations", async () => {
+    const user = userEvent.setup();
+    currentSearchParams = new URLSearchParams("location=w");
+    renderPage();
+
+    await screen.findByTestId("location-detail");
+    await user.click(screen.getByRole("button", { name: "Location actions" }));
+    const item = await screen.findByRole("menuitem", { name: /Delete…/ });
+    expect(item).toHaveAttribute("aria-disabled", "true");
+    expect(item).toHaveTextContent(
+      "Move out its 1 asset and 1 sub-location first",
+    );
+  });
+
+  it("deletes an empty location", async () => {
+    const user = userEvent.setup();
+    deleteLocationMock.mockResolvedValue(undefined);
+    currentSearchParams = new URLSearchParams("location=e");
+    renderPage();
+
+    await screen.findByTestId("location-detail");
+    await user.click(screen.getByRole("button", { name: "Location actions" }));
+    const item = await screen.findByRole("menuitem", { name: "Delete…" });
+    expect(item).not.toHaveAttribute("aria-disabled");
+    await user.click(item);
+
+    const dialog = await screen.findByRole("dialog", {
+      name: "Delete location?",
+    });
+    expect(dialog).toHaveTextContent(
+      "Store / Shelf is deleted. It holds no assets or sub-locations",
+    );
+    await user.click(
+      within(dialog).getByRole("button", { name: "Delete location" }),
+    );
+    await waitFor(() => expect(deleteLocationMock).toHaveBeenCalledWith("e"));
+  });
+});
diff --git a/src/__tests__/components/scan/scan-page-client.test.tsx b/src/__tests__/components/scan/scan-page-client.test.tsx
index 5538e9c..36e4b18 100644
--- a/src/__tests__/components/scan/scan-page-client.test.tsx
+++ b/src/__tests__/components/scan/scan-page-client.test.tsx
@@ -185,6 +185,15 @@ describe("ScanPageClient", () => {
     );
   });
 
+  it("puts the cursor in the tag field when the manual sheet opens", async () => {
+    renderScanPage();
+    fireEvent.click(screen.getByTestId("scan-manual-entry"));
+    const input = await screen.findByTestId("scan-manual-input");
+    await waitFor(() => {
+      expect(input).toHaveFocus();
+    });
+  });
+
   it("shows the unresolved sheet with raw text on a missing asset", async () => {
     resolverMock.mockResolvedValue({
       status: "unresolved",
diff --git a/src/__tests__/components/search/global-search.test.tsx b/src/__tests__/components/search/global-search.test.tsx
index 96e7aca..47317ae 100644
--- a/src/__tests__/components/search/global-search.test.tsx
+++ b/src/__tests__/components/search/global-search.test.tsx
@@ -14,7 +14,10 @@ vi.mock("@/lib/api/search", () => ({
   searchAssets: (term: string) => searchAssetsMock(term),
 }));
 
-import { GlobalSearch } from "@/components/search/global-search";
+import {
+  GlobalSearch,
+  GlobalSearchDialog,
+} from "@/components/search/global-search";
 
 function createResult(overrides?: Partial<Record<string, unknown>>) {
   return {
@@ -48,7 +51,12 @@ describe("GlobalSearch", () => {
 
     const user = userEvent.setup();
 
-    renderWithClient(<GlobalSearch />);
+    renderWithClient(
+      <>
+        <GlobalSearch />
+        <GlobalSearchDialog />
+      </>,
+    );
 
     await user.click(
       screen.getByRole("button", { name: "Open global search" }),
@@ -77,7 +85,12 @@ describe("GlobalSearch", () => {
 
     const user = userEvent.setup();
 
-    renderWithClient(<GlobalSearch />);
+    renderWithClient(
+      <>
+        <GlobalSearch />
+        <GlobalSearchDialog />
+      </>,
+    );
 
     await act(async () => {
       window.dispatchEvent(
@@ -102,4 +115,50 @@ describe("GlobalSearch", () => {
       { timeout: 2000 },
     );
   });
+
+  it("opens exactly one dialog from the shortcut with every trigger mounted", async () => {
+    searchAssetsMock.mockResolvedValue([]);
+
+    renderWithClient(
+      <>
+        <GlobalSearch variant="sidebar" />
+        <GlobalSearch variant="rail" />
+        <GlobalSearch variant="icon" />
+        <GlobalSearchDialog />
+      </>,
+    );
+
+    expect(
+      screen.getAllByRole("button", { name: "Open global search" }),
+    ).toHaveLength(3);
+
+    await act(async () => {
+      window.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "k", metaKey: true }),
+      );
+    });
+
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    expect(
+      screen.getAllByPlaceholderText("Search assets by name, tag, or notes..."),
+    ).toHaveLength(1);
+  });
+
+  it("opens the one dialog from any trigger", async () => {
+    searchAssetsMock.mockResolvedValue([]);
+    const user = userEvent.setup();
+
+    renderWithClient(
+      <>
+        <GlobalSearch variant="sidebar" />
+        <GlobalSearch variant="icon" />
+        <GlobalSearchDialog />
+      </>,
+    );
+
+    await user.click(
+      screen.getAllByRole("button", { name: "Open global search" })[1],
+    );
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+  });
 });
diff --git a/src/__tests__/components/services/next-service-panel.test.tsx b/src/__tests__/components/services/next-service-panel.test.tsx
new file mode 100644
index 0000000..0ad3dd8
--- /dev/null
+++ b/src/__tests__/components/services/next-service-panel.test.tsx
@@ -0,0 +1,198 @@
+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 } from "@testing-library/react";
+
+const getScheduleByAssetIdMock = vi.fn();
+const getAppSettingsMock = vi.fn();
+
+vi.mock("@/lib/api/service-schedules", () => ({
+  getScheduleByAssetId: (assetId: string) => getScheduleByAssetIdMock(assetId),
+}));
+
+vi.mock("@/lib/api/app-settings", () => ({
+  getAppSettings: () => getAppSettingsMock(),
+}));
+
+vi.mock("@/lib/use-today-iso-date", () => ({
+  useTodayIsoDate: () => "2026-03-07",
+}));
+
+vi.mock("@/lib/use-app-date-format", () => ({
+  useAppDateFormat: () => "DD-MM-YYYY",
+}));
+
+vi.mock("@/components/services/service-record-form", () => ({
+  ServiceRecordForm: ({ mode }: { mode: string }) => (
+    <div>Service record form ({mode})</div>
+  ),
+}));
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+import { NextServicePanel } from "@/components/services/next-service-panel";
+
+function makeSchedule(overrides: Record<string, unknown> = {}) {
+  return {
+    id: "schedule1",
+    assetId: "asset1",
+    nextServiceDate: "2026-03-17",
+    intervalValue: 3,
+    intervalUnit: "months",
+    reminderLeadValue: 14,
+    reminderLeadUnit: "days",
+    reminderStartDate: "2026-03-03",
+    createdAt: 1,
+    updatedAt: 1,
+    createdBy: "user1",
+    updatedBy: "user1",
+    ...overrides,
+  };
+}
+
+function renderPanel(serviceGroupName: string | null = "Engine checks") {
+  const qc = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={qc}>
+      <NextServicePanel
+        assetId="asset1"
+        assetName="Forklift A"
+        serviceGroupName={serviceGroupName}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe("NextServicePanel", () => {
+  beforeEach(() => {
+    getScheduleByAssetIdMock.mockReset();
+    getAppSettingsMock.mockReset();
+    getAppSettingsMock.mockResolvedValue({
+      serviceSchedulingEnabled: true,
+      dateFormat: "DD-MM-YYYY",
+    });
+  });
+
+  it("shows the due distance, plan and date, interval and reminder when scheduled", async () => {
+    getScheduleByAssetIdMock.mockResolvedValue(makeSchedule());
+    renderPanel();
+
+    expect(await screen.findByText("In 10 days")).toBeInTheDocument();
+    expect(screen.getByText("Engine checks · 17-03-2026")).toBeInTheDocument();
+    expect(screen.getByText("Interval")).toBeInTheDocument();
+    expect(screen.getByText("Every 3 months")).toBeInTheDocument();
+    expect(screen.getByText("Reminder")).toBeInTheDocument();
+    expect(screen.getByText("14 days before")).toBeInTheDocument();
+    expect(getScheduleByAssetIdMock).toHaveBeenCalledWith("asset1");
+  });
+
+  it("states how far overdue a past-due service is", async () => {
+    getScheduleByAssetIdMock.mockResolvedValue(
+      makeSchedule({ nextServiceDate: "2026-03-04" }),
+    );
+    renderPanel(null);
+
+    expect(await screen.findByText("Overdue 3 days")).toBeInTheDocument();
+    expect(screen.getByText("04-03-2026")).toBeInTheDocument();
+  });
+
+  it("uses singular units for an interval or reminder of one", async () => {
+    getScheduleByAssetIdMock.mockResolvedValue(
+      makeSchedule({
+        intervalValue: 1,
+        intervalUnit: "years",
+        reminderLeadValue: 1,
+        reminderLeadUnit: "weeks",
+      }),
+    );
+    renderPanel();
+
+    expect(await screen.findByText("Every year")).toBeInTheDocument();
+    expect(screen.getByText("1 week before")).toBeInTheDocument();
+  });
+
+  it("keeps Log service… disabled until the schedule has loaded", async () => {
+    let resolveSchedule: (value: unknown) => void = () => {};
+    getScheduleByAssetIdMock.mockReturnValue(
+      new Promise((resolve) => {
+        resolveSchedule = resolve;
+      }),
+    );
+    renderPanel();
+
+    expect(screen.getByRole("button", { name: "Log service…" })).toBeDisabled();
+
+    resolveSchedule(makeSchedule());
+    await screen.findByText("In 10 days");
+    expect(screen.getByRole("button", { name: "Log service…" })).toBeEnabled();
+  });
+
+  it("offers Log service… and Reschedule… when scheduled", async () => {
+    const user = userEvent.setup();
+    getScheduleByAssetIdMock.mockResolvedValue(makeSchedule());
+    renderPanel();
+
+    await screen.findByText("In 10 days");
+    expect(screen.getByRole("link", { name: "Reschedule…" })).toHaveAttribute(
+      "href",
+      "/assets/asset1/edit#service",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Log service…" }));
+    expect(
+      await screen.findByText("Service record form (complete)"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Log service: Forklift A")).toBeInTheDocument();
+  });
+
+  it("shows Not scheduled with Schedule… and a plain log entry when there is no schedule", async () => {
+    const user = userEvent.setup();
+    getScheduleByAssetIdMock.mockResolvedValue(null);
+    renderPanel();
+
+    expect(await screen.findByText("Not scheduled")).toBeInTheDocument();
+    expect(
+      screen.getByText("Set an interval to get reminders before it is due."),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Schedule…" })).toHaveAttribute(
+      "href",
+      "/assets/asset1/edit#service",
+    );
+    expect(screen.queryByRole("link", { name: "Reschedule…" })).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "Log service…" }));
+    expect(
+      await screen.findByText("Service record form (create)"),
+    ).toBeInTheDocument();
+  });
+
+  it("hides scheduling when it is turned off in Settings", async () => {
+    getAppSettingsMock.mockResolvedValue({
+      serviceSchedulingEnabled: false,
+      dateFormat: "DD-MM-YYYY",
+    });
+    getScheduleByAssetIdMock.mockResolvedValue(makeSchedule());
+    renderPanel();
+
+    expect(
+      await screen.findByText("Service scheduling is turned off in Settings."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Not scheduled")).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /Schedule…/ })).toBeNull();
+    expect(
+      screen.getByRole("button", { name: "Log service…" }),
+    ).toBeInTheDocument();
+  });
+});
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 3c09429..74e6cc9 100644
--- a/src/__tests__/components/services/service-group-assets-panel.test.tsx
+++ b/src/__tests__/components/services/service-group-assets-panel.test.tsx
@@ -43,9 +43,8 @@ describe("ServiceGroupAssetsPanel", () => {
 
     await waitFor(() => {
       expect(
-        screen.getAllByText("No assets are currently assigned to this group.")
-          .length,
-      ).toBeGreaterThan(0);
+        screen.getByText(/No assets are on this plan yet/),
+      ).toBeInTheDocument();
     });
   });
 
@@ -68,12 +67,11 @@ describe("ServiceGroupAssetsPanel", () => {
         ),
       ).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(
+    const list = within(screen.getByTestId("service-group-assets-card-list"));
+    expect(list.getByText("AST-0001")).toBeInTheDocument();
+    // Active is the norm, so it carries no status text.
+    expect(list.queryByText("Active")).toBeNull();
+    expect(screen.getByRole("link", { name: /Generator/ })).toHaveAttribute(
       "href",
       "/assets/asset1",
     );
diff --git a/src/__tests__/components/services/service-group-detail-page-client.test.tsx b/src/__tests__/components/services/service-group-detail-page-client.test.tsx
index 03feca5..8f87e0c 100644
--- a/src/__tests__/components/services/service-group-detail-page-client.test.tsx
+++ b/src/__tests__/components/services/service-group-detail-page-client.test.tsx
@@ -66,10 +66,10 @@ describe("ServiceGroupDetailPageClient", () => {
     renderWithClient(<ServiceGroupDetailPageClient groupId="group1" />);
 
     await waitFor(() => {
-      expect(screen.getByText("Group not found")).toBeInTheDocument();
+      expect(screen.getByText("Plan not found")).toBeInTheDocument();
     });
     expect(
-      screen.getByRole("link", { name: "Back to groups" }),
+      screen.getByRole("link", { name: "Back to service plans" }),
     ).toHaveAttribute("href", "/services/groups");
   });
 
@@ -87,7 +87,7 @@ describe("ServiceGroupDetailPageClient", () => {
     });
     expect(screen.getByText("Quarterly maintenance")).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "Edit group" }),
+      screen.getByRole("button", { name: "Edit…" }),
     ).toBeInTheDocument();
     expect(screen.getByText("FieldsPanel")).toBeInTheDocument();
     expect(screen.getByText("AssetsPanel")).toBeInTheDocument();
diff --git a/src/__tests__/components/services/service-group-editor.test.tsx b/src/__tests__/components/services/service-group-editor.test.tsx
index f9814ec..51703ee 100644
--- a/src/__tests__/components/services/service-group-editor.test.tsx
+++ b/src/__tests__/components/services/service-group-editor.test.tsx
@@ -17,7 +17,7 @@ describe("ServiceGroupEditor", () => {
     );
 
     expect(
-      screen.queryByRole("heading", { name: "Create service group" }),
+      screen.queryByRole("heading", { name: "New service plan" }),
     ).not.toBeInTheDocument();
   });
 
@@ -34,12 +34,12 @@ describe("ServiceGroupEditor", () => {
     );
 
     expect(
-      screen.getByRole("heading", { name: "Create service group" }),
+      screen.getByRole("heading", { name: "New service plan" }),
     ).toBeVisible();
     expect(screen.getByLabelText("Name")).toHaveValue("");
-    expect(screen.getByLabelText("Description")).toHaveValue("");
+    expect(screen.getByLabelText(/^Description/)).toHaveValue("");
     expect(
-      screen.getByRole("button", { name: "Create group" }),
+      screen.getByRole("button", { name: "Create plan" }),
     ).toBeInTheDocument();
   });
 
@@ -63,12 +63,12 @@ describe("ServiceGroupEditor", () => {
     );
 
     expect(
-      screen.getByRole("heading", { name: "Edit service group" }),
+      screen.getByRole("heading", { name: "Edit service plan" }),
     ).toBeVisible();
     expect(screen.getByLabelText("Name")).toHaveValue("Engine checks");
-    expect(screen.getByLabelText("Description")).toHaveValue("Quarterly");
+    expect(screen.getByLabelText(/^Description/)).toHaveValue("Quarterly");
 
-    await user.click(screen.getByRole("button", { name: "Save changes" }));
+    await user.click(screen.getByRole("button", { name: "Save plan" }));
     expect(onSubmit).toHaveBeenCalledWith({
       name: "Engine checks",
       description: "Quarterly",
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 b662701..89bb801 100644
--- a/src/__tests__/components/services/service-group-fields-panel.test.tsx
+++ b/src/__tests__/components/services/service-group-fields-panel.test.tsx
@@ -47,7 +47,7 @@ describe("ServiceGroupFieldsPanel", () => {
     await waitFor(() => {
       expect(
         screen.getAllByText(
-          "No fields yet. Add required service fields for this group.",
+          "No fields yet. A logged service then only asks for the date and a note.",
         ).length,
       ).toBeGreaterThan(0);
     });
diff --git a/src/__tests__/components/services/service-groups-list.test.tsx b/src/__tests__/components/services/service-groups-list.test.tsx
index 908f53d..2bf3e34 100644
--- a/src/__tests__/components/services/service-groups-list.test.tsx
+++ b/src/__tests__/components/services/service-groups-list.test.tsx
@@ -66,9 +66,9 @@ describe("ServiceGroupsList", () => {
         "Engine checks",
       ),
     ).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Create group" }));
+    await user.click(screen.getByRole("button", { name: "New service plan…" }));
     expect(
-      screen.getByRole("heading", { name: "Create service group" }),
+      screen.getByRole("heading", { name: "New service plan" }),
     ).toBeVisible();
   });
 });
diff --git a/src/__tests__/components/services/service-history.test.tsx b/src/__tests__/components/services/service-history.test.tsx
index 9f2a499..978cf61 100644
--- a/src/__tests__/components/services/service-history.test.tsx
+++ b/src/__tests__/components/services/service-history.test.tsx
@@ -3,14 +3,9 @@ import userEvent from "@testing-library/user-event";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen, waitFor } from "@testing-library/react";
 
-const getScheduleByAssetIdMock = vi.fn();
 const listAssetServiceRecordsMock = vi.fn();
 const getCurrentUserMock = vi.fn();
 
-vi.mock("@/lib/api/service-schedules", () => ({
-  getScheduleByAssetId: (assetId: string) => getScheduleByAssetIdMock(assetId),
-}));
-
 vi.mock("@/lib/api/service-records", () => ({
   listAssetServiceRecords: (assetId: string) =>
     listAssetServiceRecordsMock(assetId),
@@ -35,6 +30,33 @@ vi.mock("@/lib/use-app-date-format", () => ({
 
 import { ServiceHistory } from "@/components/services/service-history";
 
+const record = {
+  id: "record1",
+  assetId: "asset1",
+  serviceGroupId: "group1",
+  serviceGroupName: "Engine checks",
+  values: { field1: "Checked belts" },
+  valueEntries: [
+    {
+      fieldId: "field1",
+      label: "Technician note",
+      value: "Checked belts",
+    },
+  ],
+  scheduleId: "schedule1",
+  scheduledForDate: "2026-03-10",
+  serviceDate: "2026-03-04",
+  description: "Completed service",
+  cost: 125,
+  providerId: "provider1",
+  providerName: "Dockside Repair",
+  completedAt: 1,
+  completedBy: "user1",
+  completedByName: "Admin User",
+  createdAt: 1,
+  updatedAt: 1,
+};
+
 function renderWithClient(ui: React.ReactElement) {
   const qc = new QueryClient({
     defaultOptions: { queries: { retry: false } },
@@ -44,7 +66,6 @@ function renderWithClient(ui: React.ReactElement) {
 
 describe("ServiceHistory", () => {
   beforeEach(() => {
-    getScheduleByAssetIdMock.mockReset();
     listAssetServiceRecordsMock.mockReset();
     getCurrentUserMock.mockReset();
     getCurrentUserMock.mockResolvedValue({
@@ -55,65 +76,86 @@ describe("ServiceHistory", () => {
     });
   });
 
-  it("renders schedule summary and service records", async () => {
+  it("renders service records as a timeline with details behind a disclosure", async () => {
     const user = userEvent.setup();
-    getScheduleByAssetIdMock.mockResolvedValue({
-      id: "schedule1",
-      assetId: "asset1",
-      nextServiceDate: "2026-03-10",
-      intervalValue: 6,
-      intervalUnit: "months",
-      reminderLeadValue: 14,
-      reminderLeadUnit: "days",
-      reminderStartDate: "2026-02-24",
-      createdAt: 1,
-      updatedAt: 1,
-      createdBy: "user1",
-      updatedBy: "user1",
-    });
-    listAssetServiceRecordsMock.mockResolvedValue([
-      {
-        id: "record1",
-        assetId: "asset1",
-        serviceGroupId: "group1",
-        serviceGroupName: "Engine checks",
-        values: { field1: "Checked belts" },
-        valueEntries: [
-          {
-            fieldId: "field1",
-            label: "Technician note",
-            value: "Checked belts",
-          },
-        ],
-        scheduleId: "schedule1",
-        scheduledForDate: "2026-03-10",
-        serviceDate: "2026-03-04",
-        description: "Completed service",
-        cost: 125,
-        providerId: "provider1",
-        providerName: "Dockside Repair",
-        completedAt: 1,
-        completedBy: "user1",
-        completedByName: "Admin User",
-        createdAt: 1,
-        updatedAt: 1,
-      },
-    ]);
+    listAssetServiceRecordsMock.mockResolvedValue([record]);
 
     renderWithClient(<ServiceHistory assetId="asset1" />);
 
-    await waitFor(() => {
-      expect(screen.getByText("Next due 10-03-2026")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: /Service history/ }),
+    ).toBeInTheDocument();
+    expect(await screen.findByText("Completed service")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /^Service history\s*1$/ })).toBeInTheDocument();
+
+    // Date (desktop and phone placements), what was done, and by whom.
+    expect(screen.getAllByText("04-03-2026")).toHaveLength(2);
+    expect(screen.getByText("Engine checks")).toBeInTheDocument();
+    expect(screen.getByText("by Admin User")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Dockside Repair · Cost 125[.,]00 · Due 10-03-2026/),
+    ).toBeInTheDocument();
+
+    // Fields, files and actions stay closed until the disclosure is opened.
+    expect(screen.getByText("Technician note")).not.toBeVisible();
+    expect(screen.getByText("Record attachments")).not.toBeVisible();
+
+    await user.click(screen.getByText("Fields and files"));
+    expect(screen.getByText("Technician note")).toBeVisible();
+    expect(screen.getByText("Checked belts")).toBeVisible();
+    expect(screen.getByText("Record attachments")).toBeVisible();
+    expect(screen.getByRole("button", { name: "Edit…" })).toBeVisible();
+    expect(screen.getByRole("button", { name: "Delete…" })).toBeVisible();
+  });
+
+  it("does not schedule anything itself (the Next service panel owns that)", async () => {
+    listAssetServiceRecordsMock.mockResolvedValue([record]);
+
+    renderWithClient(<ServiceHistory assetId="asset1" />);
+
+    await screen.findByText("Completed service");
+    expect(screen.queryByText(/Next due/)).not.toBeInTheDocument();
+  });
+
+  it("hides record actions from users who neither completed the record nor are admin", async () => {
+    getCurrentUserMock.mockResolvedValue({
+      id: "user2",
+      email: "b@x.com",
+      name: "Other User",
+      role: "user",
     });
-    expect(screen.getByText("Completed service")).toBeInTheDocument();
+    listAssetServiceRecordsMock.mockResolvedValue([record]);
+
+    renderWithClient(<ServiceHistory assetId="asset1" />);
+
+    await screen.findByText("Completed service");
+    expect(screen.queryByRole("button", { name: "Edit…" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Delete…" })).toBeNull();
+  });
+
+  it("offers Log other service… unless the Next service panel owns logging", async () => {
+    const user = userEvent.setup();
+    listAssetServiceRecordsMock.mockResolvedValue([]);
 
-    await user.click(screen.getByText("Completed service"));
-    expect(screen.getByText("Technician note")).toBeInTheDocument();
-    expect(screen.getByText("Record attachments")).toBeInTheDocument();
+    const { unmount } = renderWithClient(<ServiceHistory assetId="asset1" />);
+    await user.click(
+      screen.getByRole("button", { name: "Log other service…" }),
+    );
+    expect(await screen.findByText("Service record form")).toBeInTheDocument();
+    // Logging any service advances an existing schedule; the copy must say so.
+    expect(
+      screen.getByText(/next service moves to one interval after this service date/),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/without touching its schedule/)).toBeNull();
+    unmount();
+
+    renderWithClient(<ServiceHistory assetId="asset1" showLogAction={false} />);
+    expect(
+      screen.queryByRole("button", { name: "Log other service…" }),
+    ).toBeNull();
   });
 
   it("renders empty state when no records exist", async () => {
-    getScheduleByAssetIdMock.mockResolvedValue(null);
     listAssetServiceRecordsMock.mockResolvedValue([]);
 
     renderWithClient(<ServiceHistory assetId="asset1" />);
diff --git a/src/__tests__/components/services/service-providers-page-client.test.tsx b/src/__tests__/components/services/service-providers-page-client.test.tsx
index b5ded12..135e8a1 100644
--- a/src/__tests__/components/services/service-providers-page-client.test.tsx
+++ b/src/__tests__/components/services/service-providers-page-client.test.tsx
@@ -61,8 +61,8 @@ describe("ServiceProvidersPageClient", () => {
       expect(screen.getByText("No service providers yet.")).toBeInTheDocument();
     });
     expect(
-      screen.getByRole("button", { name: /Add provider/ }),
-    ).toBeInTheDocument();
+      screen.getAllByRole("button", { name: /New provider…/ }).length,
+    ).toBeGreaterThan(0);
   });
 
   it("renders provider list and opens create dialog for admins", async () => {
@@ -89,7 +89,7 @@ describe("ServiceProvidersPageClient", () => {
     });
     expect(screen.getByText("dock@example.com")).toBeInTheDocument();
 
-    await user.click(screen.getByRole("button", { name: /Add provider/ }));
-    expect(screen.getByRole("heading", { name: "Add provider" })).toBeVisible();
+    await user.click(screen.getByRole("button", { name: /New provider…/ }));
+    expect(screen.getByRole("heading", { name: "New provider" })).toBeVisible();
   });
 });
diff --git a/src/__tests__/components/services/services-calendar-page-client.test.tsx b/src/__tests__/components/services/services-calendar-page-client.test.tsx
index 7de2a26..7555ca9 100644
--- a/src/__tests__/components/services/services-calendar-page-client.test.tsx
+++ b/src/__tests__/components/services/services-calendar-page-client.test.tsx
@@ -50,7 +50,6 @@ describe("ServicesCalendarPageClient", () => {
     await waitFor(() => {
       expect(screen.getByText("CalendarMonth")).toBeInTheDocument();
     });
-    expect(screen.getByText("NavTabs")).toBeInTheDocument();
   });
 
   it("shows disabled message when service scheduling is off", async () => {
@@ -64,7 +63,7 @@ describe("ServicesCalendarPageClient", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText(/Service scheduling is disabled/),
+        screen.getByText(/Service scheduling is turned off/),
       ).toBeInTheDocument();
     });
   });
diff --git a/src/__tests__/components/services/services-header.test.tsx b/src/__tests__/components/services/services-header.test.tsx
new file mode 100644
index 0000000..a1822a6
--- /dev/null
+++ b/src/__tests__/components/services/services-header.test.tsx
@@ -0,0 +1,97 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+
+const listScheduledAssetsMock = vi.fn();
+const pathnameMock = vi.fn(() => "/services");
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => pathnameMock(),
+}));
+
+vi.mock("@/lib/api/service-schedules", () => ({
+  listScheduledAssets: () => listScheduledAssetsMock(),
+}));
+
+vi.mock("@/lib/api/app-settings", () => ({
+  getAppSettings: () => Promise.resolve({ serviceSchedulingEnabled: true }),
+}));
+
+vi.mock("@/lib/use-today-iso-date", () => ({
+  useTodayIsoDate: () => "2026-03-01",
+}));
+
+import { ServicesHeader } from "@/components/services/services-header";
+
+function row(id: string, nextServiceDate: string, reminderStartDate: string) {
+  return {
+    scheduleId: id,
+    assetId: `asset-${id}`,
+    assetName: `Asset ${id}`,
+    assetTag: `T-${id}`,
+    assetStatus: "active",
+    nextServiceDate,
+    intervalValue: 1,
+    intervalUnit: "months",
+    reminderLeadValue: 1,
+    reminderLeadUnit: "days",
+    reminderStartDate,
+    lastServiceDate: null,
+    lastServiceDescription: null,
+    lastServiceProviderName: null,
+  };
+}
+
+function renderHeader() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <ServicesHeader />
+    </QueryClientProvider>,
+  );
+}
+
+describe("ServicesHeader", () => {
+  beforeEach(() => {
+    listScheduledAssetsMock.mockReset();
+    pathnameMock.mockReturnValue("/services");
+  });
+
+  it("counts due this week with the same buckets as the schedule list", async () => {
+    listScheduledAssetsMock.mockResolvedValue([
+      // overdue
+      row("a", "2026-02-20", "2026-02-19"),
+      // due in 3 days, reminder already started: this week
+      row("b", "2026-03-04", "2026-02-25"),
+      // due in 5 days, reminder starts tomorrow: Later, not this week
+      row("c", "2026-03-06", "2026-03-05"),
+      // due in 20 days: this month
+      row("d", "2026-03-21", "2026-02-21"),
+    ]);
+
+    renderHeader();
+
+    expect(
+      await screen.findByText("1 overdue · 1 due this week · 4 scheduled"),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      "Services4",
+    );
+  });
+
+  it("leaves the count off the title outside the schedule views", async () => {
+    pathnameMock.mockReturnValue("/services/providers");
+    listScheduledAssetsMock.mockResolvedValue([
+      row("a", "2026-03-04", "2026-02-25"),
+    ]);
+
+    renderHeader();
+
+    expect(
+      await screen.findByText("1 due this week · 1 scheduled"),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      /^Services$/,
+    );
+  });
+});
diff --git a/src/__tests__/components/services/services-list-page-client.test.tsx b/src/__tests__/components/services/services-list-page-client.test.tsx
index f254f8e..e2a5c9b 100644
--- a/src/__tests__/components/services/services-list-page-client.test.tsx
+++ b/src/__tests__/components/services/services-list-page-client.test.tsx
@@ -50,7 +50,6 @@ describe("ServicesListPageClient", () => {
     await waitFor(() => {
       expect(screen.getByText("ScheduledList")).toBeInTheDocument();
     });
-    expect(screen.getByText("NavTabs")).toBeInTheDocument();
   });
 
   it("shows disabled message when service scheduling is off", async () => {
@@ -64,9 +63,8 @@ describe("ServicesListPageClient", () => {
 
     await waitFor(() => {
       expect(
-        screen.getByText(/Service scheduling is disabled/),
+        screen.getByText(/Service scheduling is turned off/),
       ).toBeInTheDocument();
     });
-    expect(screen.getByText("NavTabs")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/components/services/services-nav-tabs.test.tsx b/src/__tests__/components/services/services-nav-tabs.test.tsx
index dfa1f99..afd031d 100644
--- a/src/__tests__/components/services/services-nav-tabs.test.tsx
+++ b/src/__tests__/components/services/services-nav-tabs.test.tsx
@@ -14,9 +14,9 @@ describe("ServicesNavTabs", () => {
 
     render(<ServicesNavTabs />);
 
-    const listLink = screen.getByRole("link", { name: "List" });
+    const listLink = screen.getByRole("link", { name: "Schedule" });
     const calendarLink = screen.getByRole("link", { name: "Calendar" });
-    const groupsLink = screen.getByRole("link", { name: "Groups" });
+    const groupsLink = screen.getByRole("link", { name: "Service plans" });
     const providersLink = screen.getByRole("link", { name: "Providers" });
 
     expect(listLink).toHaveAttribute("href", "/services");
@@ -25,15 +25,15 @@ describe("ServicesNavTabs", () => {
     expect(providersLink).toHaveAttribute("href", "/services/providers");
   });
 
-  it("applies active styling to the matching tab", () => {
+  it("marks the matching tab as the current page", () => {
     mockPathname = "/services/groups/group1";
 
     render(<ServicesNavTabs />);
 
-    const groupsLink = screen.getByRole("link", { name: "Groups" });
-    expect(groupsLink.className).toContain("bg-background");
+    const groupsLink = screen.getByRole("link", { name: "Service plans" });
+    expect(groupsLink).toHaveAttribute("aria-current", "page");
 
-    const listLink = screen.getByRole("link", { name: "List" });
-    expect(listLink.className).not.toContain("bg-background");
+    const listLink = screen.getByRole("link", { name: "Schedule" });
+    expect(listLink).not.toHaveAttribute("aria-current");
   });
 });
diff --git a/src/__tests__/components/services/services-scheduled-list.test.tsx b/src/__tests__/components/services/services-scheduled-list.test.tsx
index fdf4515..cde23bf 100644
--- a/src/__tests__/components/services/services-scheduled-list.test.tsx
+++ b/src/__tests__/components/services/services-scheduled-list.test.tsx
@@ -60,12 +60,12 @@ describe("ServicesScheduledList", () => {
       expect(screen.getByText("Main Engine")).toBeInTheDocument();
     });
     expect(screen.getByText("ENG-0001")).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();
+    // 2026-03-06 is 5 days from mocked today 2026-03-01
+    expect(screen.getAllByText("In 5 days").length).toBeGreaterThan(0);
     // 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"),
+      screen.getByText("Last 01-02-2026 by Dockside Repair"),
     ).toBeInTheDocument();
     expect(screen.getByTestId("log-service-schedule1")).toBeInTheDocument();
   });
@@ -162,7 +162,7 @@ describe("ServicesScheduledList", () => {
     expect(
       within(screen.getByTestId("services-group-upcoming")).getByText("Far"),
     ).toBeInTheDocument();
-    expect(screen.getAllByText(/days overdue/i).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/^Overdue \d+ days?$/).length).toBeGreaterThan(0);
   });
 
   it("keeps future reminder-window rows in upcoming", async () => {
@@ -191,7 +191,9 @@ describe("ServicesScheduledList", () => {
       expect(screen.getByTestId("services-group-upcoming")).toBeInTheDocument();
     });
     expect(screen.queryByTestId("services-group-thisWeek")).toBeNull();
-    expect(screen.getByText("Scheduled")).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("services-group-upcoming")).getByText("Not Ready"),
+    ).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 7c47af5..4aabedc 100644
--- a/src/__tests__/components/settings/user-management-section.test.tsx
+++ b/src/__tests__/components/settings/user-management-section.test.tsx
@@ -139,6 +139,16 @@ describe("UserManagementSection", () => {
     ).toHaveLength(2);
   });
 
+  it("shows a loading state in the table while users load", () => {
+    listUsersMock.mockReturnValue(new Promise(() => {}));
+
+    renderWithClient(<UserManagementSection currentUserId={adminUser.id} />);
+
+    const table = screen.getByTestId("users-table");
+    expect(within(table).getByText("Loading users...")).toBeInTheDocument();
+    expect(within(table).getAllByRole("row").length).toBeGreaterThan(1);
+  });
+
   it("shows an error state when users fail to load", async () => {
     listUsersMock.mockRejectedValue(new Error("database is gone"));
 
diff --git a/src/__tests__/components/tags/tag-picker.test.tsx b/src/__tests__/components/tags/tag-picker.test.tsx
index d50d8d1..20286fa 100644
--- a/src/__tests__/components/tags/tag-picker.test.tsx
+++ b/src/__tests__/components/tags/tag-picker.test.tsx
@@ -20,10 +20,12 @@ describe("TagPicker", () => {
   it("shows empty message when no tags defined", () => {
     render(<TagPicker value={[]} options={[]} onChange={vi.fn()} />);
 
-    expect(screen.getByText("No tags defined.")).toBeInTheDocument();
+    expect(
+      screen.getByText("No keywords yet. Add them under Taxonomy."),
+    ).toBeInTheDocument();
   });
 
-  it("renders selected tag badges", () => {
+  it("marks selected keywords as pressed", () => {
     render(
       <TagPicker
         value={["tag1", "tag3"]}
@@ -32,9 +34,17 @@ describe("TagPicker", () => {
       />,
     );
 
-    const fragileElements = screen.getAllByText("Fragile");
-    expect(fragileElements.length).toBeGreaterThanOrEqual(2);
-    const expensiveElements = screen.getAllByText("Expensive");
-    expect(expensiveElements.length).toBeGreaterThanOrEqual(2);
+    expect(screen.getByRole("button", { name: /Fragile/ })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(screen.getByRole("button", { name: /Expensive/ })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(screen.getByRole("button", { name: /Heavy/ })).toHaveAttribute(
+      "aria-pressed",
+      "false",
+    );
   });
 });
diff --git a/src/__tests__/components/tags/tags-page-client.test.tsx b/src/__tests__/components/tags/tags-page-client.test.tsx
index 3a2c34d..498515e 100644
--- a/src/__tests__/components/tags/tags-page-client.test.tsx
+++ b/src/__tests__/components/tags/tags-page-client.test.tsx
@@ -75,12 +75,12 @@ describe("TagsPageClient", () => {
     ]);
     renderWithClient();
     expect(await screen.findByText("Fragile")).toBeInTheDocument();
-    expect(screen.getByText("Tags")).toBeInTheDocument();
+    expect(screen.getByText("Keywords")).toBeInTheDocument();
   });
 
   it("shows empty state when no tags exist", async () => {
     listTagsMock.mockResolvedValue([]);
     renderWithClient();
-    expect(await screen.findByText("No tags yet.")).toBeInTheDocument();
+    expect(await screen.findByText("No keywords yet.")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/components/ui/button.test.tsx b/src/__tests__/components/ui/button.test.tsx
new file mode 100644
index 0000000..8d68abe
--- /dev/null
+++ b/src/__tests__/components/ui/button.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Button } from "@/components/ui/button";
+
+describe("Button", () => {
+  it("keeps the link variant bare at every size", () => {
+    for (const size of ["default", "sm", "xs", "lg"] as const) {
+      const { unmount } = render(
+        <Button variant="link" size={size}>
+          Reset
+        </Button>,
+      );
+      const classes = screen.getByRole("button", { name: "Reset" }).className.split(/\s+/);
+      expect(classes).toContain("h-auto");
+      expect(classes).toContain("px-0");
+      expect(classes.some((c) => /^h-(7|8|9|11)$/.test(c))).toBe(false);
+      expect(classes.some((c) => /^px-(2|2\.5|3\.5|4)$/.test(c))).toBe(false);
+      unmount();
+    }
+  });
+
+  it("does not drop the focus outline", () => {
+    render(<Button>Save</Button>);
+    expect(screen.getByRole("button", { name: "Save" }).className).not.toMatch(
+      /\boutline-none\b/,
+    );
+  });
+});
diff --git a/src/__tests__/lib/relative-time.test.ts b/src/__tests__/lib/relative-time.test.ts
new file mode 100644
index 0000000..b11e186
--- /dev/null
+++ b/src/__tests__/lib/relative-time.test.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { formatRelativeTime } from "@/lib/relative-time";
+
+// Local-time construction keeps the day maths independent of the TZ.
+const NOW = new Date(2026, 10, 7, 15, 30, 0);
+const at = (y: number, m: number, d: number, h = 12, min = 0) =>
+  new Date(y, m, d, h, min, 0).getTime();
+
+describe("formatRelativeTime", () => {
+  it("shows today's clock time", () => {
+    expect(formatRelativeTime(at(2026, 10, 7, 9, 4), NOW)).toEqual({
+      long: "Today 09:04",
+      short: "09:04",
+    });
+  });
+
+  it("treats a future timestamp as today", () => {
+    expect(formatRelativeTime(at(2026, 10, 9, 8, 0), NOW).long).toBe(
+      "Today 08:00",
+    );
+  });
+
+  it("counts calendar days, not 24-hour spans", () => {
+    // 23:59 yesterday is under a day ago but still "Yesterday".
+    expect(formatRelativeTime(at(2026, 10, 6, 23, 59), NOW)).toEqual({
+      long: "Yesterday",
+      short: "1d",
+    });
+  });
+
+  it("uses days below a week", () => {
+    expect(formatRelativeTime(at(2026, 10, 1), NOW)).toEqual({
+      long: "6 days ago",
+      short: "6d",
+    });
+  });
+
+  it("uses weeks below 30 days, singular for one", () => {
+    expect(formatRelativeTime(at(2026, 9, 31), NOW)).toEqual({
+      long: "1 week ago",
+      short: "1w",
+    });
+    expect(formatRelativeTime(at(2026, 9, 15), NOW)).toEqual({
+      long: "3 weeks ago",
+      short: "3w",
+    });
+  });
+
+  it("uses months below a year", () => {
+    expect(formatRelativeTime(at(2026, 9, 7), NOW)).toEqual({
+      long: "1 month ago",
+      short: "1mo",
+    });
+    expect(formatRelativeTime(at(2026, 4, 7), NOW).long).toBe("6 months ago");
+  });
+
+  it("uses years from 365 days", () => {
+    expect(formatRelativeTime(at(2025, 10, 7), NOW)).toEqual({
+      long: "1 year ago",
+      short: "1y",
+    });
+    expect(formatRelativeTime(at(2023, 10, 1), NOW).short).toBe("3y");
+  });
+
+  it("returns a dash for an invalid timestamp", () => {
+    expect(formatRelativeTime(Number.NaN, NOW)).toEqual({
+      long: "—",
+      short: "—",
+    });
+  });
+});
diff --git a/src/app/(app)/assets/[id]/edit/page.tsx b/src/app/(app)/assets/[id]/edit/page.tsx
index 4f9cd90..c8e1bed 100644
--- a/src/app/(app)/assets/[id]/edit/page.tsx
+++ b/src/app/(app)/assets/[id]/edit/page.tsx
@@ -9,13 +9,11 @@ export default async function EditAssetPage({
   const { id } = await params;
 
   return (
-    <div className="space-y-6">
+    <div>
       <PageHeader
         title="Edit asset"
-        description="Update this asset record."
         breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Assets", href: "/assets" },
+          { label: "Asset", href: `/assets/${id}` },
           { label: "Edit asset" },
         ]}
       />
diff --git a/src/app/(app)/assets/[id]/page.tsx b/src/app/(app)/assets/[id]/page.tsx
index 1615ffd..bd3c14b 100644
--- a/src/app/(app)/assets/[id]/page.tsx
+++ b/src/app/(app)/assets/[id]/page.tsx
@@ -1,5 +1,4 @@
 import { AssetDetailPageClient } from "@/components/assets/asset-detail-page-client";
-import { PageHeader } from "@/components/layout/page-header";
 
 export default async function AssetDetailPage({
   params,
@@ -7,19 +6,5 @@ export default async function AssetDetailPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Asset detail"
-        description="View asset information and lifecycle data."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Assets", href: "/assets" },
-          { label: "Asset detail" },
-        ]}
-      />
-      <AssetDetailPageClient assetId={id} />
-    </div>
-  );
+  return <AssetDetailPageClient assetId={id} />;
 }
diff --git a/src/app/(app)/assets/new/page.tsx b/src/app/(app)/assets/new/page.tsx
index aaa8601..35ca036 100644
--- a/src/app/(app)/assets/new/page.tsx
+++ b/src/app/(app)/assets/new/page.tsx
@@ -1,19 +1,17 @@
+import { Suspense } from "react";
 import { AssetCreatePageClient } from "@/components/assets/asset-create-page-client";
 import { PageHeader } from "@/components/layout/page-header";
 
 export default function NewAssetPage() {
   return (
-    <div className="space-y-6">
+    <div>
       <PageHeader
         title="New asset"
-        description="Create a new asset record."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Assets", href: "/assets" },
-          { label: "New asset" },
-        ]}
+        breadcrumbs={[{ label: "Assets", href: "/assets" }, { label: "New asset" }]}
       />
-      <AssetCreatePageClient />
+      <Suspense>
+        <AssetCreatePageClient />
+      </Suspense>
     </div>
   );
 }
diff --git a/src/app/(app)/assets/page.tsx b/src/app/(app)/assets/page.tsx
index d0f305b..9f0bf1a 100644
--- a/src/app/(app)/assets/page.tsx
+++ b/src/app/(app)/assets/page.tsx
@@ -1,17 +1,10 @@
 import { Suspense } from "react";
 import { AssetsPageClient } from "@/components/assets/assets-page-client";
-import { PageHeader } from "@/components/layout/page-header";
 
 export default function AssetsPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Assets"
-        description="Track, filter, and manage your inventory."
-      />
-      <Suspense>
-        <AssetsPageClient />
-      </Suspense>
-    </div>
+    <Suspense>
+      <AssetsPageClient />
+    </Suspense>
   );
 }
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index 362e12c..abe749e 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -1,26 +1,38 @@
 "use client";
 
-import { useState } from "react";
+import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
-import { ChevronDown } from "lucide-react";
+import { Plus } 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";
-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 { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
-import { useMediaQuery } from "@/hooks/use-media-query";
+import { useHydrated } from "@/hooks/use-hydrated";
 import { getDashboardOverview } from "@/lib/api/dashboard";
 
+function partOfDay(date: Date) {
+  const hour = date.getHours();
+  if (hour < 12) return "Morning";
+  if (hour < 18) return "Afternoon";
+  return "Evening";
+}
+
+function todayTitle(date: Date) {
+  return date.toLocaleDateString("en-GB", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+  });
+}
+
 export default function DashboardPage() {
-  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  // The date and greeting depend on the viewer's clock and time zone, so the
+  // server renders the loading state and the client fills them in.
+  const hydrated = useHydrated();
   const { data: currentUser } = useCurrentUser();
   const {
     data: overview,
@@ -31,134 +43,91 @@ export default function DashboardPage() {
     queryFn: getDashboardOverview,
   });
 
-  const greeting = currentUser?.name
-    ? `Welcome back, ${currentUser.name}`
-    : "Dashboard";
+  const now = hydrated ? new Date() : null;
+  const title = now ? todayTitle(now) : "Today";
+  const firstName = currentUser?.name?.split(/\s+/)[0];
+  const actions = (
+    <Button asChild>
+      <Link href="/assets/new">
+        <Plus />
+        New asset…
+      </Link>
+    </Button>
+  );
 
-  if (isPending) {
+  if (!now || 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>
+        <PageHeader title={title} description="Loading…" actions={actions} />
+        <Skeleton className="h-[88px] rounded-md" />
       </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>
+        <PageHeader title={title} actions={actions} />
+        <p role="alert" className="text-sm font-medium text-destructive">
+          Could not load the dashboard. Reload to try again.
+        </p>
       </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} />
+  const changedToday = overview.changedLastDayCount;
+  const overdue = overview.serviceSchedulingEnabled
+    ? overview.overdueServiceCount
+    : 0;
+
+  const summary = (
+    <>
+      {partOfDay(now)}
+      {firstName ? `, ${firstName}` : ""}.{" "}
+      {overdue > 0 ? (
+        <>
+          <Link href="/services">
+            {overdue} {overdue === 1 ? "service" : "services"} overdue
+          </Link>
+          {changedToday > 0 ? " and " : "."}
+        </>
+      ) : changedToday > 0 ? null : (
+        "Nothing is overdue."
+      )}
+      {changedToday > 0 ? (
+        <>
+          <Link href="/assets">
+            {changedToday} {changedToday === 1 ? "asset" : "assets"} changed
+          </Link>{" "}
+          in the last day.
+        </>
+      ) : null}
+    </>
   );
 
   return (
-    <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" }]}
-        />
-        <div className="hidden lg:block">
-          <QuickActions />
-        </div>
-      </div>
+    <div>
+      <PageHeader title={title} description={summary} actions={actions} />
 
-      <div className="shrink-0">
-        <DashboardStatsBar
-          totalAssets={overview.totalAssets}
-          statusCounts={overview.statusCounts}
-        />
-      </div>
+      <DashboardStatsBar
+        totalAssets={overview.totalAssets}
+        statusCounts={overview.statusCounts}
+        overdueCount={overdue}
+      />
 
-      {isDesktop ? (
-        <div className="grid min-h-0 flex-1 gap-4 grid-cols-2 grid-rows-2">
-          {recent}
-          {upcoming}
-          {categoryBreakdown}
-          {locationBreakdown}
-        </div>
-      ) : (
-        <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 className="mt-7 grid gap-7 min-[861px]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-8">
+        <UpcomingServicesWidget
+          items={overview.upcomingServices}
+          overdueCount={overdue}
+          scheduledCount={overview.scheduledServiceCount}
+          serviceSchedulingEnabled={overview.serviceSchedulingEnabled}
+          dateFormat={overview.dateFormat}
+        />
+        <div className="grid content-start gap-7">
+          <CategoryBreakdown items={overview.categoryBreakdown} />
+          <RecentAssetsCard items={overview.recentAssets} />
         </div>
-      )}
+      </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)/labels/page.tsx b/src/app/(app)/labels/page.tsx
index dc9e0de..0330124 100644
--- a/src/app/(app)/labels/page.tsx
+++ b/src/app/(app)/labels/page.tsx
@@ -1,16 +1,24 @@
+import Link from "next/link";
+import { Printer } from "lucide-react";
 import { LabelsPageClient } from "@/components/labels/labels-page-client";
 import { PageHeader } from "@/components/layout/page-header";
+import { Button } from "@/components/ui/button";
 
 export default function LabelsPage() {
   return (
-    <div className="space-y-6">
+    <div>
       <PageHeader
         title="Labels"
-        description="Design reusable label templates and print accurate previews."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Labels" },
-        ]}
+        description="Templates for the labels you print and stick on assets."
+        className="max-md:hidden"
+        actions={
+          <Button asChild variant="secondary">
+            <Link href="/labels/print">
+              <Printer />
+              Print labels…
+            </Link>
+          </Button>
+        }
       />
       <LabelsPageClient />
     </div>
diff --git a/src/app/(app)/locations/page.tsx b/src/app/(app)/locations/page.tsx
index 8722063..b1c564a 100644
--- a/src/app/(app)/locations/page.tsx
+++ b/src/app/(app)/locations/page.tsx
@@ -1,14 +1,10 @@
-import { PageHeader } from "@/components/layout/page-header";
+import { Suspense } from "react";
 import { LocationsPageClient } from "@/components/locations/locations-page-client";
 
 export default function LocationsPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Locations"
-        description="Manage your location hierarchy."
-      />
+    <Suspense>
       <LocationsPageClient />
-    </div>
+    </Suspense>
   );
 }
diff --git a/src/app/(app)/services/calendar/page.tsx b/src/app/(app)/services/calendar/page.tsx
index 2c0609e..3d863ee 100644
--- a/src/app/(app)/services/calendar/page.tsx
+++ b/src/app/(app)/services/calendar/page.tsx
@@ -1,19 +1,7 @@
-import { PageHeader } from "@/components/layout/page-header";
 import { ServicesCalendarPageClient } from "@/components/services/services-calendar-page-client";
 
 export default function ServicesCalendarPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Services Calendar"
-        description="Month view of scheduled due dates."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Services", href: "/services" },
-          { label: "Calendar" },
-        ]}
-      />
-      <ServicesCalendarPageClient />
-    </div>
+    <ServicesCalendarPageClient />
   );
 }
diff --git a/src/app/(app)/services/groups/[id]/page.tsx b/src/app/(app)/services/groups/[id]/page.tsx
index 2c0da34..b1553e3 100644
--- a/src/app/(app)/services/groups/[id]/page.tsx
+++ b/src/app/(app)/services/groups/[id]/page.tsx
@@ -1,4 +1,3 @@
-import { PageHeader } from "@/components/layout/page-header";
 import { ServiceGroupDetailPageClient } from "@/components/services/service-group-detail-page-client";
 
 export default async function ServiceGroupDetailPage({
@@ -8,19 +7,5 @@ export default async function ServiceGroupDetailPage({
 }) {
   const { id } = await params;
 
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Service Group"
-        description="Configure required service fields and review assigned assets."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Services", href: "/services" },
-          { label: "Groups", href: "/services/groups" },
-          { label: "Group detail" },
-        ]}
-      />
-      <ServiceGroupDetailPageClient groupId={id} />
-    </div>
-  );
+  return <ServiceGroupDetailPageClient groupId={id} />;
 }
diff --git a/src/app/(app)/services/groups/page.tsx b/src/app/(app)/services/groups/page.tsx
index d314786..a6f33ac 100644
--- a/src/app/(app)/services/groups/page.tsx
+++ b/src/app/(app)/services/groups/page.tsx
@@ -1,19 +1,7 @@
-import { PageHeader } from "@/components/layout/page-header";
 import { ServiceGroupsList } from "@/components/services/service-groups-list";
 
 export default function ServiceGroupsPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Service Groups"
-        description="Manage reusable service checklists and asset assignments."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Services", href: "/services" },
-          { label: "Groups" },
-        ]}
-      />
-      <ServiceGroupsList />
-    </div>
+    <ServiceGroupsList />
   );
 }
diff --git a/src/app/(app)/services/layout.tsx b/src/app/(app)/services/layout.tsx
new file mode 100644
index 0000000..dcbae42
--- /dev/null
+++ b/src/app/(app)/services/layout.tsx
@@ -0,0 +1,10 @@
+import { ServicesHeader } from "@/components/services/services-header";
+
+export default function ServicesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <ServicesHeader />
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/(app)/services/page.tsx b/src/app/(app)/services/page.tsx
index 55548a5..c73c284 100644
--- a/src/app/(app)/services/page.tsx
+++ b/src/app/(app)/services/page.tsx
@@ -1,18 +1,7 @@
-import { PageHeader } from "@/components/layout/page-header";
 import { ServicesListPageClient } from "@/components/services/services-list-page-client";
 
 export default function ServicesPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Services"
-        description="Upcoming and overdue service schedule."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Services" },
-        ]}
-      />
-      <ServicesListPageClient />
-    </div>
+    <ServicesListPageClient />
   );
 }
diff --git a/src/app/(app)/services/providers/page.tsx b/src/app/(app)/services/providers/page.tsx
index ec5a708..fa26e66 100644
--- a/src/app/(app)/services/providers/page.tsx
+++ b/src/app/(app)/services/providers/page.tsx
@@ -1,19 +1,7 @@
-import { PageHeader } from "@/components/layout/page-header";
 import { ServiceProvidersPageClient } from "@/components/services/service-providers-page-client";
 
 export default function ServiceProvidersPage() {
   return (
-    <div className="space-y-6">
-      <PageHeader
-        title="Service Providers"
-        description="Manage vendors and contractors used in service records."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Services", href: "/services" },
-          { label: "Providers" },
-        ]}
-      />
-      <ServiceProvidersPageClient />
-    </div>
+    <ServiceProvidersPageClient />
   );
 }
diff --git a/src/app/(app)/settings/page.tsx b/src/app/(app)/settings/page.tsx
index 68fc289..3ad10fc 100644
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -3,10 +3,11 @@ import { SettingsPageClient } from "@/components/settings/settings-page-client";
 
 export default function SettingsPage() {
   return (
-    <div className="space-y-6">
+    <div>
       <PageHeader
         title="Settings"
-        description="Manage regional preferences, users, roles, and account security."
+        description="Date format, features, users and your password."
+        className="max-md:hidden"
       />
       <SettingsPageClient />
     </div>
diff --git a/src/app/(app)/taxonomy/page.tsx b/src/app/(app)/taxonomy/page.tsx
index 260c1fd..570292b 100644
--- a/src/app/(app)/taxonomy/page.tsx
+++ b/src/app/(app)/taxonomy/page.tsx
@@ -8,6 +8,7 @@ import { CategoriesPageClient } from "@/components/categories/categories-page-cl
 import { TagsPageClient } from "@/components/tags/tags-page-client";
 import { FieldsPageClient } from "@/components/fields/fields-page-client";
 
+// "tags" stays the URL and code name; the UI calls them keywords.
 const VALID_TABS = ["categories", "tags", "fields"] as const;
 type TabValue = (typeof VALID_TABS)[number];
 
@@ -26,11 +27,11 @@ function TaxonomyTabs() {
   }
 
   return (
-    <Tabs value={tab} onValueChange={handleTabChange}>
-      <TabsList>
+    <Tabs value={tab} onValueChange={handleTabChange} className="gap-0">
+      <TabsList className="-mt-2 -ml-3 max-md:-mt-1">
         <TabsTrigger value="categories">Categories</TabsTrigger>
-        <TabsTrigger value="tags">Tags</TabsTrigger>
-        <TabsTrigger value="fields">Fields</TabsTrigger>
+        <TabsTrigger value="tags">Keywords</TabsTrigger>
+        <TabsTrigger value="fields">Custom fields</TabsTrigger>
       </TabsList>
       <TabsContent value="categories" className="mt-6">
         <CategoriesPageClient />
@@ -47,14 +48,11 @@ function TaxonomyTabs() {
 
 export default function TaxonomyPage() {
   return (
-    <div className="space-y-6">
+    <div>
       <PageHeader
         title="Taxonomy"
-        description="Manage categories, tags, and custom fields."
-        breadcrumbs={[
-          { label: "Stowage", href: "/dashboard" },
-          { label: "Taxonomy" },
-        ]}
+        description="How assets are grouped, labelled and described."
+        className="max-md:hidden"
       />
       <Suspense>
         <TaxonomyTabs />
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 1c36862..25586e5 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -1,11 +1,9 @@
+import { AuthShell } from "@/components/auth/auth-shell";
+
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50/40 via-background to-stone-100/30 dark:from-stone-950 dark:via-background dark:to-stone-900/30">
-      {children}
-    </div>
-  );
+  return <AuthShell>{children}</AuthShell>;
 }
diff --git a/src/app/(print)/labels/print/page.tsx b/src/app/(print)/labels/print/page.tsx
index 2344a9e..a3f1c91 100644
--- a/src/app/(print)/labels/print/page.tsx
+++ b/src/app/(print)/labels/print/page.tsx
@@ -3,15 +3,14 @@ import { PageHeader } from "@/components/layout/page-header";
 
 export default function LabelPrintPage() {
   return (
-    <div className="space-y-6">
+    <div>
       <div className="print:hidden">
         <PageHeader
           title="Print labels"
-          description="Review label output before sending it to your printer."
+          description="Check the labels, then print them from your browser."
           breadcrumbs={[
-            { label: "Stowage", href: "/dashboard" },
             { label: "Labels", href: "/labels" },
-            { label: "Print" },
+            { label: "Print labels" },
           ]}
         />
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index f20f45f..28ff45b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,11 +4,21 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/*
+  Workshop design system.
+
+  Concrete grey background, charcoal sidebar, one safety-amber accent.
+  Bright amber is the one primary action per screen and the current item in
+  the charcoal sidebar. The darker amber is the 3px "where you are" mark on
+  light surfaces. Ink is what you have ticked. Status colour appears only on
+  exceptions. Only printable things carry a border.
+*/
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-archivo), system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains), ui-monospace, monospace;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -16,6 +26,7 @@
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-muted: var(--sidebar-muted);
   --color-sidebar: var(--sidebar);
   --color-chart-5: var(--chart-5);
   --color-chart-4: var(--chart-4);
@@ -25,6 +36,7 @@
   --color-ring: var(--ring);
   --color-input: var(--input);
   --color-border: var(--border);
+  --color-line-2: var(--line-2);
   --color-destructive: var(--destructive);
   --color-scan: var(--scan);
   --color-scan-foreground: var(--scan-foreground);
@@ -36,101 +48,200 @@
   --color-secondary: var(--secondary);
   --color-primary-foreground: var(--primary-foreground);
   --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --color-ink: var(--foreground);
+  --color-ink-2: var(--ink-2);
+  --color-ink-3: var(--muted-foreground);
+  --color-amber: var(--primary);
+  --color-amber-ink: var(--amber-ink);
+  --color-chip: var(--chip);
+  --color-repair: var(--repair);
+  --color-slate: var(--slate);
+  --color-retired: var(--retired);
+  --color-disposed: var(--disposed);
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 3px;
+  --radius-xl: 4px;
+  --radius-2xl: 6px;
+  --radius-3xl: 8px;
+  --radius-4xl: 12px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: #fafaf9;
-  --foreground: #1c1917;
-  --card: #ffffff;
-  --card-foreground: #1c1917;
-  --popover: #ffffff;
-  --popover-foreground: #1c1917;
-  --primary: #c2410c;
-  --primary-foreground: #ffffff;
-  --secondary: #f5f0e8;
-  --secondary-foreground: #1c1917;
-  --muted: #f5f5f4;
-  --muted-foreground: #78716c;
-  --accent: #fff7ed;
-  --accent-foreground: #1c1917;
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: #e7e5e4;
-  --input: #e7e5e4;
-  --ring: #c2410c;
-  --chart-1: #c2410c;
-  --chart-2: #d97706;
-  --chart-3: #6b8e6b;
-  --chart-4: #a0826d;
-  --chart-5: #c2b280;
-  --sidebar: #faf8f5;
-  --sidebar-foreground: #1c1917;
-  --sidebar-primary: #c2410c;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #f5efe8;
-  --sidebar-accent-foreground: #1c1917;
-  --sidebar-border: #e7e5e4;
-  --sidebar-ring: #c2410c;
-  --scan: #c2410c;
-  --scan-foreground: #ffffff;
+  --radius: 3px;
+  --background: #ecede9;
+  --foreground: #1b1d1a;
+  --ink-2: #4e524b;
+  --card: #fbfbf9;
+  --card-foreground: #1b1d1a;
+  --popover: #fbfbf9;
+  --popover-foreground: #1b1d1a;
+  --primary: #e8a80c;
+  --primary-hover: #d39a08;
+  --primary-foreground: #1b1d1a;
+  --amber-ink: #a87700;
+  --secondary: #f2f2ee;
+  --secondary-foreground: #1b1d1a;
+  --muted: #f2f2ee;
+  --muted-foreground: #666a62;
+  --accent: #f2f2ee;
+  --accent-foreground: #1b1d1a;
+  --chip: #e1e2dc;
+  --destructive: #b3261e;
+  --repair: #a4521a;
+  --slate: #4f6475;
+  --retired: #6b7066;
+  --disposed: #a3252d;
+  --border: #d9dad4;
+  --line-2: #bdbfb7;
+  --input: #7a7e76;
+  --ring: #1b1d1a;
+  --chart-1: #1b1d1a;
+  --chart-2: #3a3d39;
+  --chart-3: #595d56;
+  --chart-4: #777a72;
+  --chart-5: #8e918a;
+  --sidebar: #1f2220;
+  --sidebar-foreground: #d9dbd5;
+  --sidebar-muted: #9a9e96;
+  --sidebar-primary: #e8a80c;
+  --sidebar-primary-foreground: #1b1d1a;
+  --sidebar-accent: #2a2d2a;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #33372f;
+  --sidebar-ring: #ffffff;
+  --scan: #e8a80c;
+  --scan-foreground: #1b1d1a;
 }
 
 .dark {
-  --background: #0c0a09;
-  --foreground: #fafaf9;
-  --card: #1c1917;
-  --card-foreground: #fafaf9;
-  --popover: #1c1917;
-  --popover-foreground: #fafaf9;
-  --primary: #ea580c;
-  --primary-foreground: #ffffff;
-  --secondary: #292524;
-  --secondary-foreground: #fafaf9;
-  --muted: #292524;
-  --muted-foreground: #a8a29e;
-  --accent: #292524;
-  --accent-foreground: #fafaf9;
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: #44403c;
-  --input: #44403c;
-  --ring: #ea580c;
-  --chart-1: #ea580c;
-  --chart-2: #f59e0b;
-  --chart-3: #86a886;
-  --chart-4: #b8977e;
-  --chart-5: #d4c99a;
-  --sidebar: #1c1917;
-  --sidebar-foreground: #fafaf9;
-  --sidebar-primary: #ea580c;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #292524;
-  --sidebar-accent-foreground: #fafaf9;
-  --sidebar-border: #44403c;
-  --sidebar-ring: #ea580c;
-  --scan: #ea580c;
-  --scan-foreground: #ffffff;
+  --background: #1b1d1a;
+  --foreground: #ecede9;
+  --ink-2: #c9ccc5;
+  --card: #242725;
+  --card-foreground: #ecede9;
+  --popover: #242725;
+  --popover-foreground: #ecede9;
+  --primary: #e8a80c;
+  --primary-hover: #f0b526;
+  --primary-foreground: #1b1d1a;
+  --amber-ink: #e8a80c;
+  --secondary: #2a2d2a;
+  --secondary-foreground: #ecede9;
+  --muted: #2a2d2a;
+  --muted-foreground: #9a9e96;
+  --accent: #2a2d2a;
+  --accent-foreground: #ecede9;
+  --chip: #2f3230;
+  --destructive: #e5534b;
+  --repair: #e08a4a;
+  --slate: #8fa6b8;
+  --retired: #9a9e96;
+  --disposed: #e5534b;
+  --border: #33372f;
+  --line-2: #4a4e48;
+  --input: #7a7e76;
+  --ring: #ecede9;
+  --chart-1: #ecede9;
+  --chart-2: #c9ccc5;
+  --chart-3: #9a9e96;
+  --chart-4: #777a72;
+  --chart-5: #595d56;
+  --sidebar: #141615;
+  --sidebar-foreground: #d9dbd5;
+  --sidebar-muted: #9a9e96;
+  --sidebar-primary: #e8a80c;
+  --sidebar-primary-foreground: #1b1d1a;
+  --sidebar-accent: #202321;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #2a2d2a;
+  --sidebar-ring: #ffffff;
+  --scan: #e8a80c;
+  --scan-foreground: #1b1d1a;
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-sm text-foreground;
+    line-height: 1.45;
+  }
+  /* Focus: a 2px ink outline plus a 3px ink offset shadow. White on charcoal. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    box-shadow: 3px 3px 0 var(--ring);
+  }
+  .on-charcoal :focus-visible {
+    outline-color: #fff;
+    box-shadow: 3px 3px 0 #fff;
   }
 }
 
+/*
+  Unlayered on purpose: it beats `outline-none` (outline-style: none) from the
+  utilities layer, so no control can drop the keyboard focus outline, and the
+  outline (unlike the shadow) survives forced-colors mode. Containers that
+  should not show it use `outline-hidden`, whose transparent colour stays.
+*/
+:focus-visible {
+  outline-style: solid;
+}
+
+/* Archivo set wide for headings. */
+@utility wide {
+  font-stretch: 118%;
+  letter-spacing: -0.01em;
+}
+
+/* 13px tracked-caps mono eyebrow (NEXT SERVICE, LABEL, STATUS). */
+@utility eyebrow {
+  font-family: var(--font-jetbrains), "JetBrains Mono", ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
+
+/* The one heavy rule: under page titles, table heads and sheet headings. */
+@utility rule-ink {
+  border-bottom: 2px solid var(--foreground);
+}
+
+/* Long-dash (6 on, 4 off) control-border frame for "add something here". */
+@utility dash-slot {
+  border: 0;
+  background: transparent
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='calc(100%25 - 2px)' height='calc(100%25 - 2px)' fill='none' rx='3' stroke='%237A7E76' stroke-width='1' stroke-dasharray='6 4'/%3E%3C/svg%3E")
+    no-repeat;
+  background-size: 100% 100%;
+}
+
+/* Picker runs: a dotted underline so a control never looks like a link. */
+@utility picker-run {
+  text-decoration: underline dotted;
+  text-decoration-thickness: 1.5px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--foreground);
+}
+
 @keyframes scan-detected {
   0% {
     opacity: 0;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d83059e..5286c2a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,21 @@
 import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Archivo, JetBrains_Mono } from "next/font/google";
 import { PocketBaseClientProvider } from "@/app/PocketBaseClientProvider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const archivo = Archivo({
+  variable: "--font-archivo",
   subsets: ["latin"],
+  axes: ["wdth"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains",
   subsets: ["latin"],
+  weight: ["500", "600", "700"],
 });
 
 export const metadata: Metadata = {
@@ -23,7 +25,7 @@ export const metadata: Metadata = {
   appleWebApp: {
     capable: true,
     title: "Stowage",
-    statusBarStyle: "default",
+    statusBarStyle: "black",
     startupImage: ["/images/web/apple-touch-icon.png"],
   },
   icons: {
@@ -56,7 +58,7 @@ export const metadata: Metadata = {
       {
         rel: "mask-icon",
         url: "/images/web/safari-pinned-tab.svg",
-        color: "#c2410c",
+        color: "#1f2220",
       },
     ],
   },
@@ -67,8 +69,8 @@ export const viewport: Viewport = {
   initialScale: 1,
   viewportFit: "cover",
   themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#c2410c" },
-    { media: "(prefers-color-scheme: dark)", color: "#ea580c" },
+    { media: "(prefers-color-scheme: light)", color: "#1f2220" },
+    { media: "(prefers-color-scheme: dark)", color: "#141615" },
   ],
 };
 
@@ -83,13 +85,13 @@ export default async function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${archivo.variable} ${jetbrainsMono.variable} font-sans antialiased`}
       >
         <PocketBaseClientProvider pocketbaseUrl={pocketbaseUrl}>
           <ThemeProvider>
             <TooltipProvider>
               {children}
-              <Toaster richColors closeButton />
+              <Toaster closeButton />
             </TooltipProvider>
           </ThemeProvider>
         </PocketBaseClientProvider>
diff --git a/src/components/assets/asset-actions-sheet.tsx b/src/components/assets/asset-actions-sheet.tsx
index c6db613..b57f304 100644
--- a/src/components/assets/asset-actions-sheet.tsx
+++ b/src/components/assets/asset-actions-sheet.tsx
@@ -630,7 +630,7 @@ function LogServiceView({
       toast.success("Service logged");
       onDone();
       void queryClient.invalidateQueries({
-        queryKey: ["service-records", "asset", asset.id],
+        queryKey: ["service-records", "by-asset", asset.id],
       });
       void queryClient.invalidateQueries({ queryKey: ["service-schedules"] });
       void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
diff --git a/src/components/assets/asset-card-list.tsx b/src/components/assets/asset-card-list.tsx
index bdecc01..e54c478 100644
--- a/src/components/assets/asset-card-list.tsx
+++ b/src/components/assets/asset-card-list.tsx
@@ -1,17 +1,18 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
-import { MapPin, MoreHorizontal, Package } from "lucide-react";
+import { 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 { StatusText } from "@/components/ui/status-text";
+import { TagChip } from "@/components/ui/tag-chip";
+import { LocationPath } from "@/components/locations/location-path";
+import { useLongPress } from "@/hooks/use-long-press";
 import { getAsset, type AssetDetail } from "@/lib/api/assets";
-import { cn } from "@/lib/utils";
+import { formatRelativeTime } from "@/lib/relative-time";
 
 function rowToDetailPlaceholder(row: AssetListItem): AssetDetail {
   const tags =
@@ -51,12 +52,21 @@ function rowToDetailPlaceholder(row: AssetListItem): AssetDetail {
   };
 }
 
+/*
+  Phone list: stacked cards on one card surface. Line one is the tag chip and
+  the name; line two is "path · time" on every row; exception statuses take a
+  13px third line. Quick actions open from the "…" button on each card, or
+  by pressing and holding the card.
+*/
 export function AssetCardList({
   rows,
   loading,
+  secondary = "location",
 }: {
   rows: AssetListItem[];
   loading: boolean;
+  /* What line two leads with; inside one location the category says more. */
+  secondary?: "location" | "category";
 }) {
   const [activeId, setActiveId] = useState<string | null>(null);
 
@@ -69,23 +79,25 @@ export function AssetCardList({
     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) => (
+      <ul
+        className="rounded-md border border-border bg-card"
+        data-testid="asset-card-list-loading"
+      >
+        {Array.from({ length: 5 }).map((_, i) => (
           <li
             key={`skeleton-${i}`}
-            className="rounded-xl border border-border bg-card p-4"
+            className="flex items-start gap-2.5 border-b border-border px-3.5 py-3 last:border-b-0"
           >
-            <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" />
+            <span className="block h-[23px] w-[70px] shrink-0 rounded-xs border border-line-2" />
+            <div className="flex-1 space-y-2 pt-1.5">
+              <span className="block h-2.5 w-2/3 rounded-full bg-border" />
+              <span className="block h-2.5 w-1/3 rounded-full bg-border" />
+            </div>
           </li>
         ))}
       </ul>
@@ -96,18 +108,25 @@ export function AssetCardList({
     return (
       <EmptyState
         icon={Package}
-        title="No assets match these filters"
-        description="Adjust the filters or reset them to see results."
+        title="No assets match these filters."
+        description="Clear a filter or try fewer words."
       />
     );
   }
 
   return (
     <>
-      <ul className="flex flex-col gap-2" data-testid="asset-card-list">
+      <ul
+        className="rounded-md border border-border bg-card"
+        data-testid="asset-card-list"
+      >
         {rows.map((row) => (
-          <li key={row.id}>
-            <AssetCard row={row} onMore={() => setActiveId(row.id)} />
+          <li key={row.id} className="border-b border-border last:border-b-0">
+            <AssetCard
+              row={row}
+              secondary={secondary}
+              onActions={() => setActiveId(row.id)}
+            />
           </li>
         ))}
       </ul>
@@ -120,7 +139,7 @@ export function AssetCardList({
         onAssetUpdated={() => {
           // list invalidates via the nested mutations' query invalidation
         }}
-        dismissLabel="Close ↓"
+        dismissLabel="Close"
         testIdPrefix="asset"
       />
     </>
@@ -129,84 +148,76 @@ export function AssetCardList({
 
 function AssetCard({
   row,
-  onMore,
+  secondary,
+  onActions,
 }: {
   row: AssetListItem;
-  onMore: () => void;
+  secondary: "location" | "category";
+  onActions: () => void;
 }) {
-  const visibleTags = row.tagNames.slice(0, 3);
-  const extraTagCount = Math.max(0, row.tagNames.length - visibleTags.length);
+  const router = useRouter();
+  const { handlers, consumeClick } = useLongPress(onActions);
+  const time = formatRelativeTime(row.updatedAt);
 
   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 className="flex items-center">
+      <a
+        href={`/assets/${row.id}`}
+        data-testid={`asset-card-${row.id}`}
+        aria-label={`${row.assetTag}, ${row.name}`}
+        className="grid min-h-14 min-w-0 flex-1 grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2.5 gap-y-1 py-2.5 pr-1 pl-3.5 select-none active:bg-secondary [-webkit-touch-callout:none]"
+        {...handlers}
+        onClick={(event) => {
+          // A long press already opened the sheet; swallow its trailing click.
+          if (consumeClick()) {
+            event.preventDefault();
+            return;
+          }
+          // Let the browser handle new-tab and new-window clicks.
+          if (
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey
+          ) {
+            return;
+          }
+          event.preventDefault();
+          router.push(`/assets/${row.id}`);
+        }}
+      >
+        <TagChip weight="table">{row.assetTag}</TagChip>
+        <span className="truncate text-[15px] leading-snug font-semibold text-foreground">
+          {row.name}
+        </span>
+        <span className="col-start-2 flex min-w-0 items-baseline text-sm whitespace-nowrap">
+          {secondary === "category" ? (
+            <span className="truncate text-ink-2">
+              {row.categoryName ?? "No category"}
+            </span>
+          ) : (
+            <LocationPath path={row.locationPath} compact />
+          )}
+          <span className="shrink-0 whitespace-pre text-muted-foreground">
+            {" · "}
+            {time.short}
+          </span>
+        </span>
+        {row.status !== "active" ? (
+          <StatusText status={row.status} className="col-start-2 text-[13px]" />
+        ) : null}
+      </a>
+      <button
+        type="button"
+        aria-label={`Asset actions, ${row.assetTag}`}
+        aria-haspopup="dialog"
+        data-testid={`asset-card-kebab-${row.id}`}
+        onClick={onActions}
+        className="mr-1.5 inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-md text-ink-2 hover:bg-secondary hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-foreground"
+      >
+        <MoreHorizontal className="size-[18px]" aria-hidden="true" />
+      </button>
     </div>
   );
 }
diff --git a/src/components/assets/asset-create-page-client.tsx b/src/components/assets/asset-create-page-client.tsx
index d20f1d5..04e3e50 100644
--- a/src/components/assets/asset-create-page-client.tsx
+++ b/src/components/assets/asset-create-page-client.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check } from "lucide-react";
 import { toast } from "sonner";
 import { AttachmentsPanel } from "@/components/attachments/attachments-panel";
 import {
@@ -18,6 +19,9 @@ import type {
 } from "@/components/assets/types";
 import type { FieldDefinition } from "@/components/fields/types";
 import { Button } from "@/components/ui/button";
+import { Panel, PanelBody, PanelFooter } from "@/components/ui/panel";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { getAppSettings } from "@/lib/api/app-settings";
 import { createAsset, getAssetFilterOptions } from "@/lib/api/assets";
 import { listCustomFields } from "@/lib/api/custom-fields";
@@ -37,6 +41,12 @@ const INITIAL_VALUES: AssetFormValues = {
 export function AssetCreatePageClient() {
   const router = useRouter();
   const queryClient = useQueryClient();
+  // "Add asset here…" on the Locations page presets the location.
+  const presetLocationId = useSearchParams().get("location");
+  const initialValues = useMemo(
+    () => ({ ...INITIAL_VALUES, locationId: presetLocationId }),
+    [presetLocationId],
+  );
 
   const filterOptionsQuery = useQuery({
     queryKey: ["assets", "filter-options"],
@@ -129,62 +139,70 @@ export function AssetCreatePageClient() {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading form...
+      <div className="max-w-[880px]">
+        <span className="sr-only">Loading form...</span>
+        <Skeleton className="mb-5 h-4 w-28 rounded-md" />
+        <div className="grid gap-x-6 gap-y-5 sm:grid-cols-2" aria-hidden="true">
+          {[0, 1, 2, 3].map((index) => (
+            <Skeleton key={index} className="h-9 rounded-md" />
+          ))}
+        </div>
       </div>
     );
   }
 
   if (createdAssetId) {
     return (
-      <div className="space-y-4">
-        <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-          <h2 className="text-base font-semibold tracking-tight">
-            {createdAssetName} created
-          </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Upload attachments now, then continue to the asset page.
-          </p>
-          <div className="mt-4 flex flex-wrap gap-2">
+      <div className="max-w-[880px] space-y-10">
+        <Panel>
+          <PanelBody className="py-4">
+            <p className="flex items-center gap-2 text-sm font-medium text-ink-2">
+              <Check className="size-4 text-foreground" aria-hidden="true" />
+              Asset created
+            </p>
+            <h2 className="wide mt-1 text-xl leading-tight font-bold text-foreground">
+              {createdAssetName}
+            </h2>
+            <p className="mt-1 text-sm text-ink-2">
+              Upload attachments now, then continue to the asset page.
+            </p>
+          </PanelBody>
+          <PanelFooter className="flex-wrap">
             <Button
               type="button"
-              className="cursor-pointer"
               onClick={() => router.push(`/assets/${createdAssetId}`)}
             >
-              View asset
+              Open asset
             </Button>
             <Button
               type="button"
               variant="outline"
-              className="cursor-pointer"
               onClick={() => router.push(`/assets/${createdAssetId}/edit`)}
             >
-              Edit details
+              Edit details…
             </Button>
             <Button
               type="button"
               variant="ghost"
-              className="cursor-pointer"
               onClick={() => {
                 setCreatedAssetId(null);
                 setCreatedAssetName("");
                 setServiceScheduleDraft(getDefaultServiceScheduleDraft());
               }}
             >
-              Create another asset
+              Add another asset…
             </Button>
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-          <div className="mb-4">
-            <h3 className="text-sm font-semibold tracking-tight">
-              Attachments
-            </h3>
-            <p className="text-xs text-muted-foreground">
-              Upload files now. Images and PDFs are optimized in the background.
-            </p>
-          </div>
+          </PanelFooter>
+        </Panel>
+
+        <section aria-labelledby="asset-create-attachments">
+          <SheetHeading
+            title={<span id="asset-create-attachments">Attachments</span>}
+          />
+          <p className="px-0.5 pt-1.5 pb-3 text-[13px] text-muted-foreground">
+            Files upload straight away. Images and PDFs are optimized in the
+            background.
+          </p>
           <AttachmentsPanel assetId={createdAssetId} />
         </section>
       </div>
@@ -192,25 +210,26 @@ export function AssetCreatePageClient() {
   }
 
   return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <AssetForm
-        mode="create"
-        categories={options.categories}
-        locations={options.locations}
-        serviceGroups={options.serviceGroups}
-        tags={options.tags}
-        fieldDefinitions={customFieldDefinitions}
-        initialValues={INITIAL_VALUES}
-        submitLabel="Create asset"
-        submitting={submitting}
-        serviceSchedulingEnabled={serviceSchedulingEnabled}
-        serviceScheduleDraft={serviceScheduleDraft}
-        onServiceScheduleChange={setServiceScheduleDraft}
-        onClearServiceSchedule={() =>
-          setServiceScheduleDraft(getDefaultServiceScheduleDraft())
-        }
-        onSubmit={handleSubmit}
-      />
-    </section>
+    <AssetForm
+      mode="create"
+      categories={options.categories}
+      locations={options.locations}
+      serviceGroups={options.serviceGroups}
+      tags={options.tags}
+      fieldDefinitions={customFieldDefinitions}
+      initialValues={initialValues}
+      submitLabel="Create asset"
+      cancelHref={
+        presetLocationId ? `/locations?location=${presetLocationId}` : "/assets"
+      }
+      submitting={submitting}
+      serviceSchedulingEnabled={serviceSchedulingEnabled}
+      serviceScheduleDraft={serviceScheduleDraft}
+      onServiceScheduleChange={setServiceScheduleDraft}
+      onClearServiceSchedule={() =>
+        setServiceScheduleDraft(getDefaultServiceScheduleDraft())
+      }
+      onSubmit={handleSubmit}
+    />
   );
 }
diff --git a/src/components/assets/asset-detail-page-client.tsx b/src/components/assets/asset-detail-page-client.tsx
index 7c4aa71..295ab29 100644
--- a/src/components/assets/asset-detail-page-client.tsx
+++ b/src/components/assets/asset-detail-page-client.tsx
@@ -13,8 +13,14 @@ import type {
 } from "@/components/assets/types";
 import type { FieldDefinition } from "@/components/fields/types";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
-import { deleteAsset, getAsset, updateAssetStatus } from "@/lib/api/assets";
+import {
+  deleteAsset,
+  getAsset,
+  updateAsset,
+  updateAssetStatus,
+} from "@/lib/api/assets";
 import { listCustomFields } from "@/lib/api/custom-fields";
 
 export function AssetDetailPageClient({ assetId }: { assetId: string }) {
@@ -46,6 +52,23 @@ export function AssetDetailPageClient({ assetId }: { assetId: string }) {
     },
   });
 
+  const updateLocationMutation = useMutation({
+    mutationFn: (locationId: string | null) =>
+      updateAsset(assetId, { locationId }),
+    onSuccess: () => {
+      toast.success("Location updated");
+      void queryClient.invalidateQueries({
+        queryKey: ["assets", "detail", assetId],
+      });
+      void queryClient.invalidateQueries({ queryKey: ["assets", "list"] });
+      void queryClient.invalidateQueries({ queryKey: ["locations"] });
+      void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+    },
+    onError: (error) => {
+      toast.error(getAssetUiErrorMessage(error, "Unable to move asset"));
+    },
+  });
+
   const deleteMutation = useMutation({
     mutationFn: () => deleteAsset(assetId),
     onSuccess: () => {
@@ -82,22 +105,30 @@ export function AssetDetailPageClient({ assetId }: { assetId: string }) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading asset...
+      <div aria-busy="true">
+        <span className="sr-only">Loading asset...</span>
+        <div className="mb-7 grid grid-cols-[minmax(0,1fr)_88px] gap-x-3 rule-ink pb-6 md:grid-cols-[112px_minmax(0,1fr)] md:gap-x-6 lg:grid-cols-[144px_minmax(0,1fr)]">
+          <div className="dash-slot col-start-2 row-start-1 size-[88px] md:col-start-1 md:size-28 lg:h-32 lg:w-36" />
+          <div className="col-start-1 row-start-1 space-y-4 pt-1 md:col-start-2">
+            <span className="block h-[34px] w-24 rounded-xs border-2 border-line-2 max-md:hidden" />
+            <Skeleton className="h-5 w-2/3 max-w-md" />
+            <Skeleton className="h-2.5 w-1/3 max-w-60" />
+          </div>
+        </div>
+        <Skeleton className="h-40 rounded-md md:w-[calc(100%-324px)] lg:w-[calc(100%-368px)]" />
       </div>
     );
   }
 
   if (!detail) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 shadow-sm">
-        <h2 className="text-lg font-semibold tracking-tight">
-          Asset not found
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          The requested asset could not be found.
+      <div className="max-w-xl py-6">
+        <h1 className="wide text-2xl font-bold text-foreground">Asset not found</h1>
+        <p className="mt-1.5 text-[15px] text-ink-2">
+          It may have been deleted, or the link is wrong. Search for it, or go
+          back to the list.
         </p>
-        <Button asChild className="mt-4 cursor-pointer" variant="outline">
+        <Button asChild className="mt-5" variant="outline">
           <Link href="/assets">Back to assets</Link>
         </Button>
       </div>
@@ -111,7 +142,13 @@ export function AssetDetailPageClient({ assetId }: { assetId: string }) {
       canDelete={currentUser?.role === "admin"}
       deleting={deleteMutation.isPending}
       updatingStatus={updateStatusMutation.isPending}
+      updatingLocation={updateLocationMutation.isPending}
       onStatusChange={handleStatusChange}
+      onLocationChange={(locationId) => {
+        if (locationId !== detail.locationId) {
+          updateLocationMutation.mutate(locationId);
+        }
+      }}
       onDelete={handleDelete}
     />
   );
diff --git a/src/components/assets/asset-detail.tsx b/src/components/assets/asset-detail.tsx
index 7629687..4cc3223 100644
--- a/src/components/assets/asset-detail.tsx
+++ b/src/components/assets/asset-detail.tsx
@@ -2,20 +2,35 @@
 
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { MapPin, MoreHorizontal, Pencil, Printer, Trash2 } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  ArrowLeft,
+  ChevronDown,
+  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";
 import { AttachmentsPanel } from "@/components/attachments/attachments-panel";
 import { AssetServiceRecordsPanel } from "@/components/services/asset-service-records-panel";
-import { StatusBadge } from "@/components/assets/status-badge";
+import { NextServicePanel } from "@/components/services/next-service-panel";
+import { AssetLabelPanel } from "@/components/labels/asset-label-panel";
+import { AssetPhotoSlot } from "@/components/assets/asset-photo-slot";
 import {
   ASSET_STATUS_LABELS,
   ASSET_STATUS_OPTIONS,
   type AssetDetail as AssetDetailType,
   type AssetStatus,
 } from "@/components/assets/types";
-import { Badge } from "@/components/ui/badge";
+import { MobileBar } from "@/components/layout/mobile-top-bar";
+import {
+  LocationPicker,
+  type LocationPickerOption,
+} from "@/components/locations/location-picker";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -24,29 +39,90 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Panel } from "@/components/ui/panel";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from "@/components/ui/select";
+import { STATUS_COLOR } from "@/components/ui/status-text";
+import { KeywordChip, TagChip } from "@/components/ui/tag-chip";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { listAttachments } from "@/lib/api/attachments";
+import { listLocations } from "@/lib/api/locations";
 import { formatDateFromTimestamp } from "@/lib/date-format";
+import { formatRelativeTime } from "@/lib/relative-time";
 import { useAppDateFormat } from "@/lib/use-app-date-format";
+import { cn } from "@/lib/utils";
+
+const pickerRun =
+  "inline-flex h-8 max-w-full cursor-pointer items-center gap-1.5 rounded-xs text-[15px] font-medium outline-none hover:text-foreground disabled:cursor-default disabled:opacity-60";
+
+function AssetMenu({
+  asset,
+  canDelete,
+  deleting,
+  onDelete,
+  trigger,
+}: {
+  asset: AssetDetailType;
+  canDelete: boolean;
+  deleting: boolean;
+  onDelete: () => void;
+  trigger: React.ReactElement;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuItem asChild>
+          <Link href={`/assets/${asset.id}/edit`}>
+            <Pencil />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href={`/labels/print?assetId=${asset.id}`}>
+            <Printer />
+            Print label
+          </Link>
+        </DropdownMenuItem>
+        {canDelete ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              data-testid="asset-detail-delete"
+              disabled={deleting}
+              onSelect={onDelete}
+            >
+              <Trash2 />
+              Delete…
+            </DropdownMenuItem>
+          </>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 
+/*
+  The asset page. A hero (photo slot, the tag chip at its heaviest, the name,
+  then status and location as picker runs and the keywords), the 2px rule,
+  then two columns: the tabbed details card and the service history sheet on
+  the left; Next service and the label on the right. On a phone the order is
+  Next service, details, history, label.
+*/
 export function AssetDetail({
   asset,
   fieldDefinitions,
   canDelete,
   deleting,
   updatingStatus,
+  updatingLocation = false,
   onStatusChange,
+  onLocationChange,
   onDelete,
 }: {
   asset: AssetDetailType;
@@ -54,73 +130,165 @@ export function AssetDetail({
   canDelete: boolean;
   deleting: boolean;
   updatingStatus: boolean;
+  updatingLocation?: boolean;
   onStatusChange: (status: AssetStatus) => void;
+  onLocationChange?: (locationId: string | null) => void;
   onDelete: () => Promise<void>;
 }) {
   const dateFormat = useAppDateFormat();
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
 
+  const locationsQuery = useQuery({
+    queryKey: ["locations", "list"],
+    queryFn: listLocations,
+    enabled: Boolean(onLocationChange),
+  });
+  const attachmentsQuery = useQuery({
+    queryKey: ["attachments", asset.id],
+    queryFn: () => listAttachments(asset.id),
+  });
+  const attachmentCount = attachmentsQuery.data?.length ?? 0;
+
   const orderedFieldDefinitions = useMemo(
     () => fieldDefinitions.slice().sort((a, b) => a.sortOrder - b.sortOrder),
     [fieldDefinitions],
   );
 
+  const locationParts = asset.location?.path.split(" / ") ?? [];
+  const locationLeaf = locationParts.pop();
+  const locationAncestors = locationParts.join(" / ");
+
+  const labelAsset = useMemo(
+    () => ({
+      id: asset.id,
+      name: asset.name,
+      assetTag: asset.assetTag,
+      categoryName: asset.category?.name ?? null,
+      locationPath: asset.location?.path ?? null,
+      notes: asset.notes,
+      customFieldValues: asset.customFieldValues,
+    }),
+    [asset],
+  );
+
+  const updated = formatRelativeTime(asset.updatedAt);
+
+  const locationTrigger = (
+    <button
+      type="button"
+      disabled={updatingLocation}
+      aria-label={`Location: ${asset.location?.path ?? "none"}. Change location`}
+      className={cn(pickerRun, "min-w-0 text-ink-2")}
+    >
+      <MapPin className="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <span className="picker-run truncate">
+        {asset.location ? (
+          <>
+            {locationAncestors ? `${locationAncestors} / ` : null}
+            <b className="font-semibold text-foreground">{locationLeaf}</b>
+          </>
+        ) : (
+          "No location"
+        )}
+      </span>
+      <ChevronDown className="size-3.5 shrink-0 text-ink-2" aria-hidden="true" />
+    </button>
+  );
+
+  const locationRun = onLocationChange ? (
+    <LocationPicker
+      value={asset.locationId}
+      options={(locationsQuery.data ?? []) as LocationPickerOption[]}
+      onChange={onLocationChange}
+      disabled={updatingLocation}
+      trigger={locationTrigger}
+      compact
+    />
+  ) : asset.location ? (
+    <span className="inline-flex items-center gap-1.5 text-[15px] text-ink-2">
+      <MapPin className="size-3.5 text-muted-foreground" aria-hidden="true" />
+      {asset.location.path}
+    </span>
+  ) : null;
+
   return (
-    <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-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"
-                data-testid="asset-tag"
-              >
-                {asset.assetTag}
-              </Badge>
-              <StatusBadge status={asset.status} />
-              {asset.category ? (
-                <span className="inline-flex items-center gap-1.5">
-                  <span
-                    className="inline-block h-2.5 w-2.5 rounded-full"
-                    style={{ backgroundColor: asset.category.color }}
-                  />
-                  {asset.category.name}
-                </span>
-              ) : null}
-              {asset.location ? (
-                <span className="inline-flex items-center gap-1">
-                  <MapPin className="h-3.5 w-3.5" />
-                  {asset.location.path}
-                </span>
-              ) : null}
-            </div>
-            {asset.serviceGroup ? (
-              <p className="text-xs text-muted-foreground">
-                Service group: {asset.serviceGroup.name}
-              </p>
-            ) : null}
-            <p className="text-xs text-muted-foreground">
-              Created {formatDateFromTimestamp(asset.createdAt, dateFormat)}
-            </p>
-          </div>
+    <div>
+      <MobileBar
+        backHref="/assets"
+        backLabel="Back to Assets"
+        center={
+          <TagChip className="border-white bg-transparent text-white">{asset.assetTag}</TagChip>
+        }
+        actions={
+          <>
+            <Link
+              href={`/assets/${asset.id}/edit`}
+              aria-label="Edit asset"
+              className="grid size-11 place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent"
+            >
+              <Pencil className="size-5" />
+            </Link>
+            <AssetMenu
+              asset={asset}
+              canDelete={canDelete}
+              deleting={deleting}
+              onDelete={() => setConfirmDeleteOpen(true)}
+              trigger={
+                <button
+                  type="button"
+                  aria-label="Asset actions"
+                  data-testid="asset-detail-kebab"
+                  className="grid size-11 cursor-pointer place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent"
+                >
+                  <MoreHorizontal className="size-5" />
+                </button>
+              }
+            />
+          </>
+        }
+      />
 
-          <div className="flex flex-wrap items-center gap-2">
+      <Link
+        href="/assets"
+        className="mb-3 inline-flex items-center gap-1 text-[13px] font-medium text-ink-2 hover:text-foreground max-md:hidden"
+      >
+        <ArrowLeft className="size-3.5" aria-hidden="true" />
+        Assets
+      </Link>
+
+      <header className="mb-6 grid grid-cols-[minmax(0,1fr)_88px] items-start gap-x-3 gap-y-3 rule-ink pb-5 md:mb-7 md:grid-cols-[112px_minmax(0,1fr)_auto] md:gap-x-6 md:pb-6 lg:grid-cols-[144px_minmax(0,1fr)_auto]">
+        <AssetPhotoSlot
+          assetId={asset.id}
+          assetName={asset.name}
+          className="col-start-2 row-start-1 mt-1 size-[88px] md:col-start-1 md:mt-0 md:h-full md:min-h-28 md:w-full"
+        />
+
+        <div className="col-start-1 row-start-1 min-w-0 md:col-start-2">
+          <TagChip weight="hero" data-testid="asset-tag" className="max-md:hidden">
+            {asset.assetTag}
+          </TagChip>
+          <h1 className="wide mt-0 text-2xl leading-[1.08] font-bold text-balance text-foreground md:mt-3 md:text-[30px] lg:text-[34px]">
+            {asset.name}
+          </h1>
+
+          <div className="mt-2.5 flex flex-wrap items-center gap-x-4 gap-y-1">
             <Select
               value={asset.status}
               onValueChange={(value) => onStatusChange(value as AssetStatus)}
               disabled={updatingStatus}
             >
               <SelectTrigger
-                className="min-w-44 flex-1 lg:flex-none"
                 aria-label="Change status"
+                className={cn(
+                  pickerRun,
+                  "h-8 w-auto min-w-0 gap-1.5 border-0 bg-transparent px-0 py-0 shadow-none hover:bg-transparent data-[size=default]:h-8 [&>svg]:opacity-100",
+                  STATUS_COLOR[asset.status],
+                  asset.status === "active" && "text-foreground",
+                )}
               >
-                <SelectValue />
+                <span className="picker-run">{ASSET_STATUS_LABELS[asset.status]}</span>
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent position="popper" align="start">
                 {ASSET_STATUS_OPTIONS.map((status) => (
                   <SelectItem key={status} value={status}>
                     {ASSET_STATUS_LABELS[status]}
@@ -128,188 +296,146 @@ export function AssetDetail({
                 ))}
               </SelectContent>
             </Select>
+            {locationRun}
+            {asset.category ? (
+              <span className="text-[15px] text-ink-2 max-lg:hidden">
+                <span aria-hidden="true" className="mr-3 text-muted-foreground">·</span>
+                {asset.category.name}
+              </span>
+            ) : null}
+          </div>
 
-            {/* Desktop: inline buttons */}
-            <div className="hidden flex-wrap items-center gap-2 lg:flex">
-              <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 ? (
-                <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>
+          {asset.tags.length > 0 || asset.category ? (
+            <div className="mt-2.5 flex flex-wrap items-center gap-2">
+              {asset.category ? (
+                <span className="mr-1.5 text-sm text-ink-2 lg:hidden">{asset.category.name}</span>
               ) : null}
+              {asset.tags.map((tag) => (
+                <KeywordChip key={tag.id}>{tag.name}</KeywordChip>
+              ))}
             </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>
+          ) : null}
         </div>
-      </section>
 
-      <AssetServiceRecordsPanel assetId={asset.id} />
+        <div className="col-start-3 row-start-1 flex items-center gap-2 max-md:hidden">
+          <Button asChild variant="outline">
+            <Link href={`/assets/${asset.id}/edit`}>
+              <Pencil />
+              Edit
+            </Link>
+          </Button>
+          <AssetMenu
+            asset={asset}
+            canDelete={canDelete}
+            deleting={deleting}
+            onDelete={() => setConfirmDeleteOpen(true)}
+            trigger={
+              <Button type="button" variant="outline" size="icon" aria-label="More actions">
+                <MoreHorizontal />
+              </Button>
+            }
+          />
+        </div>
+      </header>
 
-      {/* Tabbed content */}
-      <section className="rounded-xl border border-border/70 bg-background p-4 shadow-sm sm:p-5">
-        <Tabs defaultValue="info">
-          <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>
+      <div className="flex flex-col gap-6 md:grid md:grid-cols-[minmax(0,1fr)_300px] md:items-start md:gap-6 lg:grid-cols-[minmax(0,1fr)_340px] lg:gap-7">
+        <div className="max-md:contents md:space-y-8">
+          <Panel className="order-2 overflow-hidden">
+            <Tabs defaultValue="info" className="gap-0">
+              <TabsList variant="line" data-testid="asset-detail-tabs">
+                <TabsTrigger value="info">Details</TabsTrigger>
+                <TabsTrigger value="attachments">
+                  Attachments
+                  {attachmentCount > 0 ? (
+                    <small className="font-mono text-[13px] font-medium text-muted-foreground">
+                      {attachmentCount}
+                    </small>
+                  ) : null}
+                </TabsTrigger>
+              </TabsList>
 
-          <TabsContent value="info">
-            <div className="space-y-6">
-              {/* Tags */}
-              {asset.tags.length > 0 ? (
-                <div className="space-y-1.5">
-                  <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    Tags
-                  </h3>
-                  <div className="flex flex-wrap gap-1.5">
-                    {asset.tags.map((tag) => (
-                      <Badge
-                        key={tag.id}
-                        className="border border-border/70 bg-muted/20 text-xs"
-                      >
-                        <span
-                          className="inline-block h-2 w-2 rounded-full"
-                          style={{ backgroundColor: tag.color }}
-                        />
-                        {tag.name}
-                      </Badge>
-                    ))}
+              <TabsContent value="info">
+                {orderedFieldDefinitions.length > 0 || asset.serviceGroup ? (
+                  <div className="overflow-hidden border-b border-border">
+                    <dl className="-mr-px -mb-px grid grid-cols-2 lg:grid-cols-3">
+                      {orderedFieldDefinitions.map((definition) => (
+                        <div
+                          key={definition.id}
+                          className="min-w-0 border-r border-b border-border px-[18px] py-3.5"
+                        >
+                          <dt className="text-[13px] text-ink-2">{definition.name}</dt>
+                          <dd className="mt-1 text-[15px] font-semibold break-words text-foreground">
+                            <DynamicFieldDisplay
+                              definition={definition}
+                              value={asset.customFieldValues[definition.id as string] ?? null}
+                              dateFormat={dateFormat}
+                            />
+                          </dd>
+                        </div>
+                      ))}
+                      {asset.serviceGroup ? (
+                        <div className="min-w-0 border-r border-b border-border px-[18px] py-3.5">
+                          <dt className="text-[13px] text-ink-2">Service plan</dt>
+                          <dd className="mt-1 text-[15px] font-semibold text-foreground">
+                            {asset.serviceGroup.name}
+                          </dd>
+                        </div>
+                      ) : null}
+                    </dl>
                   </div>
+                ) : null}
+
+                <div className="px-[18px] pt-3.5 pb-4">
+                  <h3 className="text-[13px] font-medium text-ink-2">Notes</h3>
+                  <p
+                    className={cn(
+                      "mt-1 max-w-[68ch] text-[15px] leading-relaxed whitespace-pre-wrap",
+                      asset.notes ? "text-foreground" : "text-muted-foreground",
+                    )}
+                  >
+                    {asset.notes ?? "No notes"}
+                  </p>
                 </div>
-              ) : null}
+              </TabsContent>
 
-              {/* Notes */}
-              <div className="space-y-1.5">
-                <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                  Notes
-                </h3>
-                <p className="whitespace-pre-wrap text-sm text-muted-foreground">
-                  {asset.notes ?? "No notes"}
-                </p>
-              </div>
+              <TabsContent value="attachments" className="p-[18px]">
+                <AttachmentsPanel assetId={asset.id} />
+              </TabsContent>
+            </Tabs>
+          </Panel>
 
-              {/* Custom fields */}
-              {orderedFieldDefinitions.length > 0 ? (
-                <div className="space-y-3">
-                  <h3 className="border-b border-primary/20 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-                    Custom fields
-                  </h3>
-                  <div className="grid gap-3 md:grid-cols-2">
-                    {orderedFieldDefinitions.map((definition) => (
-                      <div
-                        key={definition.id}
-                        className="rounded-lg border border-border/60 p-3"
-                      >
-                        <p className="text-xs uppercase tracking-wide text-muted-foreground">
-                          {definition.name}
-                        </p>
-                        <p className="mt-1 text-sm">
-                          <DynamicFieldDisplay
-                            definition={definition}
-                            value={
-                              asset.customFieldValues[
-                                definition.id as string
-                              ] ?? null
-                            }
-                            dateFormat={dateFormat}
-                          />
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          </TabsContent>
+          <div className="order-3">
+            <AssetServiceRecordsPanel assetId={asset.id} />
+          </div>
+
+          <p className="order-5 border-t border-border pt-3.5 text-sm text-muted-foreground">
+            Created {formatDateFromTimestamp(asset.createdAt, dateFormat)}.{" "}
+            <span className="whitespace-nowrap">
+              Last changed <span className="max-md:hidden">{updated.long}</span>
+              <span className="md:hidden">{updated.short}</span>.
+            </span>
+          </p>
+        </div>
 
-          <TabsContent value="attachments">
-            <AttachmentsPanel assetId={asset.id} />
-          </TabsContent>
-        </Tabs>
-      </section>
+        <aside className="max-md:contents md:space-y-5">
+          <NextServicePanel
+            className="order-1"
+            assetId={asset.id}
+            assetName={asset.name}
+            serviceGroupName={asset.serviceGroup?.name ?? null}
+          />
+          <AssetLabelPanel
+            className="order-4"
+            asset={labelAsset}
+            fieldDefinitions={fieldDefinitions}
+          />
+        </aside>
+      </div>
 
       <ConfirmDialog
         open={confirmDeleteOpen}
-        title="Delete asset"
-        description={`Delete ${asset.name}?`}
+        title="Delete asset?"
+        description={`${asset.assetTag} ${asset.name} and its service history are deleted.`}
         confirmLabel="Delete asset"
         busy={deleting}
         onConfirm={() => {
diff --git a/src/components/assets/asset-edit-page-client.tsx b/src/components/assets/asset-edit-page-client.tsx
index 75ef42d..e8362d9 100644
--- a/src/components/assets/asset-edit-page-client.tsx
+++ b/src/components/assets/asset-edit-page-client.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react";
 import Link from "next/link";
+import { PackageX } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -20,6 +21,9 @@ import type {
 } from "@/components/assets/types";
 import type { FieldDefinition } from "@/components/fields/types";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { getAppSettings } from "@/lib/api/app-settings";
 import { getAsset, getAssetFilterOptions, updateAsset } from "@/lib/api/assets";
 import { listCustomFields } from "@/lib/api/custom-fields";
@@ -191,60 +195,67 @@ export function AssetEditPageClient({ assetId }: { assetId: string }) {
 
   if (loading) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading asset...
+      <div className="max-w-[880px]">
+        <span className="sr-only">Loading asset...</span>
+        <Skeleton className="mb-5 h-4 w-28 rounded-md" />
+        <div className="grid gap-x-6 gap-y-5 sm:grid-cols-2" aria-hidden="true">
+          {[0, 1, 2, 3].map((index) => (
+            <Skeleton key={index} className="h-9 rounded-md" />
+          ))}
+        </div>
       </div>
     );
   }
 
   if (!detail || !initialValues) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 shadow-sm">
-        <h2 className="text-lg font-semibold tracking-tight">
-          Asset not found
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          The asset may have been deleted.
-        </p>
-        <Button asChild className="mt-4 cursor-pointer" variant="outline">
-          <Link href="/assets">Back to assets</Link>
-        </Button>
-      </div>
+      <EmptyState
+        icon={PackageX}
+        title="Asset not found."
+        description="The asset may have been deleted."
+        action={
+          <Button asChild variant="outline">
+            <Link href="/assets">Back to assets</Link>
+          </Button>
+        }
+      />
     );
   }
 
   return (
-    <div className="space-y-4">
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <AssetForm
-          mode="edit"
-          categories={options.categories}
-          locations={options.locations}
-          serviceGroups={options.serviceGroups}
-          tags={options.tags}
-          fieldDefinitions={customFieldDefinitions}
-          initialValues={initialValues}
-          assetTag={detail.assetTag}
-          submitLabel="Save changes"
-          submitting={submitting}
-          serviceSchedulingEnabled={serviceSchedulingEnabled}
-          serviceScheduleDraft={serviceScheduleDraft}
-          onServiceScheduleChange={setServiceScheduleDraft}
-          onClearServiceSchedule={() =>
-            setServiceScheduleDraft(getDefaultServiceScheduleDraft())
-          }
-          onSubmit={handleSubmit}
-        />
-      </section>
+    <div className="space-y-10">
+      <AssetForm
+        mode="edit"
+        categories={options.categories}
+        locations={options.locations}
+        serviceGroups={options.serviceGroups}
+        tags={options.tags}
+        fieldDefinitions={customFieldDefinitions}
+        initialValues={initialValues}
+        assetTag={detail.assetTag}
+        submitLabel="Save changes"
+        cancelHref={`/assets/${assetId}`}
+        submitting={submitting}
+        serviceSchedulingEnabled={serviceSchedulingEnabled}
+        serviceScheduleDraft={serviceScheduleDraft}
+        onServiceScheduleChange={setServiceScheduleDraft}
+        onClearServiceSchedule={() =>
+          setServiceScheduleDraft(getDefaultServiceScheduleDraft())
+        }
+        onSubmit={handleSubmit}
+      />
 
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <div className="mb-4">
-          <h3 className="text-sm font-semibold tracking-tight">Attachments</h3>
-          <p className="text-xs text-muted-foreground">
-            Upload files immediately. Images and PDFs are optimized in the
-            background.
-          </p>
-        </div>
+      <section
+        aria-labelledby="asset-edit-attachments"
+        className="max-w-[880px]"
+      >
+        <SheetHeading
+          title={<span id="asset-edit-attachments">Attachments</span>}
+        />
+        <p className="px-0.5 pt-1.5 pb-3 text-[13px] text-muted-foreground">
+          Files upload straight away. Images and PDFs are optimized in the
+          background.
+        </p>
         <AttachmentsPanel assetId={assetId} />
       </section>
     </div>
diff --git a/src/components/assets/asset-filters-mobile.tsx b/src/components/assets/asset-filters-mobile.tsx
index f429f67..18c9fcd 100644
--- a/src/components/assets/asset-filters-mobile.tsx
+++ b/src/components/assets/asset-filters-mobile.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Check, Search, SlidersHorizontal, X } from "lucide-react";
+import { Check, ChevronDown, Search, SlidersHorizontal, X } from "lucide-react";
 import {
   ASSET_STATUS_LABELS,
   ASSET_STATUS_OPTIONS,
@@ -13,7 +13,6 @@ import type {
 } 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";
@@ -56,39 +55,62 @@ export function AssetFiltersMobile({
   const activeCount = countActiveFilters(filters, search);
 
   return (
-    <div className="flex flex-col gap-2" data-testid="asset-filters-mobile">
+    <div className="mb-3.5" 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
+        <label className="relative flex h-11 min-w-0 flex-1 items-center gap-2.5 rounded-md border-[1.5px] border-foreground bg-card px-3.5">
+          <span className="eyebrow shrink-0">Status</span>
+          <select
+            value={filters.status ?? ""}
+            onChange={(event) =>
+              onFiltersChange({
+                ...filters,
+                status: (event.target.value || null) as AssetFiltersState["status"],
+              })
+            }
+            aria-label="Filter by status"
+            data-testid="asset-filters-mobile-status"
+            className="min-w-0 flex-1 cursor-pointer appearance-none bg-transparent pr-6 text-sm font-semibold text-foreground outline-none"
+          >
+            <option value="">All</option>
+            {ASSET_STATUS_OPTIONS.map((status) => (
+              <option key={status} value={status}>
+                {ASSET_STATUS_LABELS[status]}
+              </option>
+            ))}
+          </select>
+          <ChevronDown className="pointer-events-none absolute right-3.5 size-3.5 text-foreground" aria-hidden="true" />
+        </label>
+        <button
           type="button"
-          variant="outline"
-          size="sm"
           onClick={() => setOpen(true)}
-          className="relative cursor-pointer gap-2"
+          aria-label="Filters"
+          title="Filters"
+          className="relative grid size-11 shrink-0 cursor-pointer place-items-center rounded-md border-[1.5px] border-foreground bg-card text-foreground"
           data-testid="asset-filters-mobile-trigger"
         >
-          <SlidersHorizontal className="h-4 w-4" />
-          Filters
+          <SlidersHorizontal className="size-[18px]" />
           {activeCount > 0 ? (
-            <Badge
-              className="ml-1 h-5 min-w-5 rounded-full bg-primary px-1 text-[11px] font-semibold text-primary-foreground"
+            <span
+              className="absolute -top-1.5 -right-1.5 grid h-[18px] min-w-[18px] place-items-center rounded-md bg-foreground px-1 font-mono text-xs font-semibold text-background"
               data-testid="asset-filters-mobile-count"
             >
               {activeCount}
-            </Badge>
+            </span>
           ) : null}
-        </Button>
+        </button>
       </div>
+      {search.trim() ? (
+        <div className="mt-2 flex items-center gap-2 text-[13px] text-ink-2">
+          Searching for <b className="font-semibold text-foreground">“{search.trim()}”</b>
+          <button
+            type="button"
+            onClick={() => onSearchChange("")}
+            className="cursor-pointer font-medium underline underline-offset-[3px]"
+          >
+            Clear
+          </button>
+        </div>
+      ) : null}
 
       <AssetFiltersSheet
         open={open}
@@ -97,6 +119,8 @@ export function AssetFiltersMobile({
         filters={filters}
         sortBy={sortBy}
         sortDirection={sortDirection}
+        search={search}
+        onSearchChange={onSearchChange}
         onFiltersChange={onFiltersChange}
         onSortChange={onSortChange}
         onReset={() => {
@@ -115,10 +139,14 @@ function AssetFiltersSheet({
   filters,
   sortBy,
   sortDirection,
+  search,
+  onSearchChange,
   onFiltersChange,
   onSortChange,
   onReset,
 }: {
+  search: string;
+  onSearchChange: (value: string) => void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   options: AssetFilterOptions;
@@ -134,16 +162,32 @@ function AssetFiltersSheet({
       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"
       >
+        <div className="relative">
+          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(event) => onSearchChange(event.target.value)}
+            placeholder="Search by name, tag or serial"
+            className="h-11 pl-9"
+            aria-label="Search assets"
+            data-testid="asset-filters-mobile-search"
+          />
+        </div>
         <Section title="Sort by">
+          <SortRow
+            active={sortBy === "updatedAt" && sortDirection === "desc"}
+            label="Recently updated"
+            onClick={() => onSortChange("updatedAt", "desc")}
+            testId="asset-sort-updated"
+          />
           <SortRow
             active={sortBy === "createdAt" && sortDirection === "desc"}
-            label="Recent"
+            label="Recently added"
             onClick={() => onSortChange("createdAt", "desc")}
             testId="asset-sort-recent"
           />
@@ -198,7 +242,6 @@ function AssetFiltersSheet({
                 key={category.id}
                 active={filters.categoryId === category.id}
                 label={category.name}
-                dotColor={category.color}
                 onClick={() =>
                   onFiltersChange({ ...filters, categoryId: category.id })
                 }
@@ -221,7 +264,7 @@ function AssetFiltersSheet({
         ) : null}
 
         {options.tags.length > 0 ? (
-          <Section title="Tags">
+          <Section title="Keywords">
             {options.tags.map((tag) => {
               const active = filters.tagIds.includes(tag.id);
               return (
@@ -229,7 +272,6 @@ function AssetFiltersSheet({
                   key={tag.id}
                   active={active}
                   label={tag.name}
-                  dotColor={tag.color}
                   onClick={() =>
                     onFiltersChange({
                       ...filters,
@@ -250,20 +292,23 @@ function AssetFiltersSheet({
         <Button
           type="button"
           variant="outline"
-          className="flex-1 cursor-pointer"
+          size="lg"
+          className="flex-1"
           onClick={onReset}
           data-testid="asset-filters-mobile-reset"
         >
           <X className="h-4 w-4" />
-          Reset
+          Reset filters
         </Button>
         <Button
           type="button"
-          className="flex-1 cursor-pointer"
+          variant="outline"
+          size="lg"
+          className="flex-1 bg-foreground text-background hover:bg-foreground/90"
           onClick={() => onOpenChange(false)}
           data-testid="asset-filters-mobile-apply"
         >
-          Apply
+          Show assets
         </Button>
       </div>
     </MobileActionSheet>
@@ -279,9 +324,7 @@ function Section({
 }) {
   return (
     <div className="space-y-2">
-      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-        {title}
-      </h3>
+      <h3 className="eyebrow">{title}</h3>
       <div className="flex flex-wrap gap-2">{children}</div>
     </div>
   );
@@ -307,10 +350,10 @@ function OptionPill({
       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",
+        "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-md border-[1.5px] px-3 text-sm font-medium transition-colors",
         active
-          ? "border-primary bg-primary/10 text-primary"
-          : "border-border bg-card text-muted-foreground hover:bg-accent",
+          ? "border-foreground bg-foreground text-background"
+          : "border-input bg-card text-foreground hover:bg-secondary",
       )}
     >
       {dotColor ? (
@@ -344,10 +387,10 @@ function SortRow({
       data-testid={testId}
       aria-pressed={active}
       className={cn(
-        "rounded-full border px-3 py-1.5 text-xs font-medium transition-colors",
+        "h-9 cursor-pointer rounded-md border-[1.5px] px-3 text-sm font-medium transition-colors",
         active
-          ? "border-primary bg-primary/10 text-primary"
-          : "border-border bg-card text-muted-foreground hover:bg-accent",
+          ? "border-foreground bg-foreground text-background"
+          : "border-input bg-card text-foreground hover:bg-secondary",
       )}
     >
       {label}
@@ -378,8 +421,8 @@ function LocationList({
           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",
+              ? "bg-secondary font-semibold text-foreground shadow-[inset_3px_0_0_var(--foreground)]"
+              : "hover:bg-secondary",
           )}
         >
           All locations
@@ -396,7 +439,9 @@ function LocationList({
               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",
+                active
+                  ? "bg-secondary font-semibold shadow-[inset_3px_0_0_var(--foreground)]"
+                  : "hover:bg-secondary",
               )}
             >
               <span className="text-sm font-medium">{loc.name}</span>
diff --git a/src/components/assets/asset-filters.tsx b/src/components/assets/asset-filters.tsx
index e5c98c3..3138427 100644
--- a/src/components/assets/asset-filters.tsx
+++ b/src/components/assets/asset-filters.tsx
@@ -1,24 +1,13 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { Check, ChevronDown, Filter, Search, X } from "lucide-react";
-import {
-  ASSET_STATUS_LABELS,
-  ASSET_STATUS_OPTIONS,
-  type AssetFilterOptions,
-  type AssetStatus,
-} from "@/components/assets/types";
+import { Check, ChevronDown, Search, SlidersHorizontal, X } from "lucide-react";
+import type { AssetFilterOptions, AssetStatus } from "@/components/assets/types";
 import {
   LocationPicker,
   type LocationPickerOption,
 } from "@/components/locations/location-picker";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import {
   Command,
   CommandEmpty,
@@ -47,21 +36,25 @@ export type AssetFiltersState = {
   status: AssetStatus | null;
   locationId: string | null;
   tagIds: string[];
+  serviceGroupId?: string | null;
+};
+
+export const EMPTY_FILTERS: AssetFiltersState = {
+  categoryId: null,
+  status: null,
+  locationId: null,
+  tagIds: [],
+  serviceGroupId: null,
 };
 
 function removeTagId(tagIds: string[], tagId: string) {
   return tagIds.filter((candidate) => candidate !== tagId);
 }
 
-function addTagId(tagIds: string[], tagId: string) {
-  if (tagIds.includes(tagId)) {
-    return tagIds;
-  }
+const triggerClass =
+  "flex h-9 min-w-32 cursor-pointer items-center justify-between gap-2 rounded-md border-[1.5px] border-input bg-card px-3 text-sm font-medium text-foreground outline-none hover:bg-secondary data-[state=open]:border-foreground";
 
-  return [...tagIds, tagId];
-}
-
-function TagsPicker({
+function KeywordsPicker({
   id,
   labelledBy,
   tags,
@@ -84,31 +77,24 @@ function TagsPicker({
           type="button"
           id={id}
           aria-labelledby={labelledBy}
-          className="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-sm outline-none transition-colors data-[state=open]:border-ring data-[state=open]:ring-[3px] data-[state=open]:ring-ring/40"
+          aria-label={labelledBy ? undefined : "Filter by keywords"}
+          className={triggerClass}
         >
-          <span
-            className={cn(
-              "truncate",
-              selectedCount > 0 ? "text-foreground" : "text-muted-foreground",
-            )}
-          >
+          <span className="truncate">
             {selectedCount === 0
-              ? "All tags"
+              ? "Keywords"
               : selectedCount === 1
-                ? (tags.find((t) => t.id === selectedIds[0])?.name ?? "1 tag")
-                : `${selectedCount} tags`}
+                ? (tags.find((t) => t.id === selectedIds[0])?.name ?? "1 keyword")
+                : `${selectedCount} keywords`}
           </span>
-          <ChevronDown className="size-4 text-muted-foreground" />
+          <ChevronDown className="size-3.5 text-ink-2" />
         </button>
       </PopoverTrigger>
-      <PopoverContent
-        className="w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
-        align="start"
-      >
+      <PopoverContent className="w-64 p-0" align="start">
         <Command>
-          <CommandInput placeholder="Search tags..." />
+          <CommandInput placeholder="Find a keyword…" />
           <CommandList>
-            <CommandEmpty>No tags found.</CommandEmpty>
+            <CommandEmpty>No keywords found.</CommandEmpty>
             <CommandGroup>
               {tags.map((tag) => {
                 const checked = selectedIds.includes(tag.id);
@@ -120,18 +106,13 @@ function TagsPicker({
                       onChange(
                         checked
                           ? removeTagId(selectedIds, tag.id)
-                          : addTagId(selectedIds, tag.id),
+                          : [...selectedIds, tag.id],
                       )
                     }
                   >
-                    <span
-                      className="inline-block h-2.5 w-2.5 shrink-0 rounded-full border border-black/10"
-                      style={{ backgroundColor: tag.color }}
-                    />
+                    <span className="text-muted-foreground">#</span>
                     <span className="truncate">{tag.name}</span>
-                    {checked ? (
-                      <Check className="ml-auto size-4 text-muted-foreground" />
-                    ) : null}
+                    {checked ? <Check className="ml-auto size-4" /> : null}
                   </CommandItem>
                 );
               })}
@@ -143,83 +124,37 @@ function TagsPicker({
   );
 }
 
-function MoreFilters({
-  filters,
-  options,
-  onFiltersChange,
+function FilterChip({
+  label,
+  value,
+  onRemove,
 }: {
-  filters: AssetFiltersState;
-  options: AssetFilterOptions;
-  onFiltersChange: (nextFilters: AssetFiltersState) => void;
+  label: string;
+  value: string;
+  onRemove: () => void;
 }) {
-  const defaultOpen = filters.locationId !== null || filters.tagIds.length > 0;
-  const [open, setOpen] = useState(defaultOpen);
-
-  const locationOptions = useMemo(
-    () => options.locations as LocationPickerOption[],
-    [options.locations],
-  );
-
   return (
-    <Collapsible
-      open={open}
-      onOpenChange={setOpen}
-      className="rounded-lg border border-border/60 bg-muted/20"
-    >
-      <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm font-medium">
-        <span className="inline-flex items-center gap-2 text-muted-foreground">
-          <Filter className="h-4 w-4" />
-          More filters
-        </span>
-        <ChevronDown
-          className={`h-4 w-4 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}`}
-        />
-      </CollapsibleTrigger>
-
-      <CollapsibleContent>
-        <div className="grid gap-3 border-t border-border/60 px-3 py-3 lg:grid-cols-2">
-          <div className="space-y-1.5">
-            <label
-              htmlFor="asset-filter-location"
-              id="asset-filter-location-label"
-              className="text-sm font-medium"
-            >
-              Location
-            </label>
-            <LocationPicker
-              id="asset-filter-location"
-              labelledBy="asset-filter-location-label"
-              value={filters.locationId}
-              options={locationOptions}
-              nullLabel="All locations"
-              onChange={(locationId) =>
-                onFiltersChange({ ...filters, locationId })
-              }
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <label
-              htmlFor="asset-filter-tags"
-              id="asset-filter-tags-label"
-              className="text-sm font-medium"
-            >
-              Tags
-            </label>
-            <TagsPicker
-              id="asset-filter-tags"
-              labelledBy="asset-filter-tags-label"
-              tags={options.tags}
-              selectedIds={filters.tagIds}
-              onChange={(tagIds) => onFiltersChange({ ...filters, tagIds })}
-            />
-          </div>
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
+    <span className="inline-flex h-7 items-center gap-1.5 rounded-md border-[1.5px] border-foreground bg-chip pr-0.5 pl-2.5 text-[13px] text-ink-2">
+      {label}
+      <b className="font-semibold text-foreground">{value}</b>
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label={`Remove ${label.toLowerCase()} filter`}
+        className="grid size-6 cursor-pointer place-items-center rounded-md hover:bg-card hover:text-foreground"
+      >
+        <X className="size-3.5" />
+      </button>
+    </span>
   );
 }
 
+/*
+  The Assets toolbar: the search field fills the row, then Category, Location,
+  Keywords and Service plan as quiet dropdowns of one width. On tablet the
+  dropdowns collapse to one Filters button. Applied filters show as chips in
+  the keyword family; only "Reset" has a button's silhouette.
+*/
 export function AssetFilters({
   options,
   search,
@@ -235,185 +170,173 @@ export function AssetFilters({
   onFiltersChange: (nextFilters: AssetFiltersState) => void;
   onReset: () => void;
 }) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const locationOptions = useMemo(
+    () => options.locations as LocationPickerOption[],
+    [options.locations],
+  );
+  // Status has its own tabs above the toolbar, so it never shows as a chip.
   const hasFilters =
     Boolean(search.trim()) ||
     filters.categoryId !== null ||
-    filters.status !== null ||
     filters.locationId !== null ||
-    filters.tagIds.length > 0;
+    filters.tagIds.length > 0 ||
+    Boolean(filters.serviceGroupId);
+
+  const dropdowns = (
+    <>
+      <Select
+        value={filters.categoryId ?? "__all__"}
+        onValueChange={(value) =>
+          onFiltersChange({
+            ...filters,
+            categoryId: value === "__all__" ? null : value,
+          })
+        }
+      >
+        <SelectTrigger className="min-w-32" aria-label="Filter by category">
+          <SelectValue placeholder="Category" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="__all__">All categories</SelectItem>
+          {options.categories.map((category) => (
+            <SelectItem key={category.id} value={category.id}>
+              {category.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="min-w-32">
+        <span id="asset-filter-location-label" className="sr-only">
+          Location
+        </span>
+        <LocationPicker
+          id="asset-filter-location"
+          labelledBy="asset-filter-location-label"
+          value={filters.locationId}
+          options={locationOptions}
+          nullLabel="Location"
+          onChange={(locationId) => onFiltersChange({ ...filters, locationId })}
+          compact
+        />
+      </div>
+
+      <span id="asset-filter-tags-label" className="sr-only">
+        Keywords
+      </span>
+      <KeywordsPicker
+        id="asset-filter-tags"
+        labelledBy="asset-filter-tags-label"
+        tags={options.tags}
+        selectedIds={filters.tagIds}
+        onChange={(tagIds) => onFiltersChange({ ...filters, tagIds })}
+      />
+
+      {options.serviceGroups.length > 0 ? (
+        <Select
+          value={filters.serviceGroupId ?? "__all__"}
+          onValueChange={(value) =>
+            onFiltersChange({
+              ...filters,
+              serviceGroupId: value === "__all__" ? null : value,
+            })
+          }
+        >
+          <SelectTrigger className="min-w-32" aria-label="Filter by service plan">
+            <SelectValue placeholder="Service plan" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__all__">All service plans</SelectItem>
+            {options.serviceGroups.map((group) => (
+              <SelectItem key={group.id} value={group.id}>
+                {group.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : null}
+    </>
+  );
 
   return (
-    <div className="space-y-3 rounded-xl border border-border/70 bg-background p-4 shadow-sm">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-        <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" />
+    <div className="mb-3.5 space-y-2.5">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative min-w-60 flex-1">
+          <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
             onChange={(event) => onSearchChange(event.target.value)}
-            placeholder="Search assets by name, tag, or notes"
+            placeholder="Search by name, tag or serial"
             className="pl-9"
             aria-label="Search assets"
           />
         </div>
-
-        <div className="grid gap-2 sm:grid-cols-2 lg:flex lg:items-center">
-          <Select
-            value={filters.categoryId ?? "__all__"}
-            onValueChange={(value) =>
-              onFiltersChange({
-                ...filters,
-                categoryId: value === "__all__" ? null : value,
-              })
-            }
-          >
-            <SelectTrigger className="min-w-44" aria-label="Filter by category">
-              <SelectValue placeholder="All categories" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__all__">All categories</SelectItem>
-              {options.categories.map((category) => (
-                <SelectItem key={category.id} value={category.id}>
-                  {category.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-
-          <Select
-            value={filters.status ?? "__all__"}
-            onValueChange={(value) =>
-              onFiltersChange({
-                ...filters,
-                status: value === "__all__" ? null : (value as AssetStatus),
-              })
-            }
-          >
-            <SelectTrigger className="min-w-44" aria-label="Filter by status">
-              <SelectValue placeholder="All statuses" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__all__">All statuses</SelectItem>
-              {ASSET_STATUS_OPTIONS.map((status) => (
-                <SelectItem key={status} value={status}>
-                  {ASSET_STATUS_LABELS[status]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <button
+          type="button"
+          aria-label="More filters"
+          aria-expanded={moreOpen}
+          onClick={() => setMoreOpen((open) => !open)}
+          className={cn(
+            "grid size-9 cursor-pointer place-items-center rounded-md border-[1.5px] border-foreground bg-card text-foreground hover:bg-secondary lg:hidden",
+            moreOpen && "bg-secondary",
+          )}
+        >
+          <SlidersHorizontal className="size-4" />
+        </button>
+        {/* One set of dropdowns: inline on desktop, a wrapped second row on
+            tablet when "More filters" is open. */}
+        <div
+          className={cn(
+            "basis-full flex-wrap items-center gap-2 lg:flex lg:basis-auto lg:flex-nowrap",
+            moreOpen ? "flex" : "hidden",
+          )}
+        >
+          {dropdowns}
         </div>
       </div>
 
-      <MoreFilters
-        filters={filters}
-        options={options}
-        onFiltersChange={onFiltersChange}
-      />
-
-      <div className="flex flex-wrap items-center justify-between gap-2">
+      {hasFilters ? (
         <div className="flex flex-wrap items-center gap-2">
           {filters.categoryId ? (
-            <Badge className="gap-1 border-border/60 bg-muted/30 pr-1 text-xs">
-              Category:{" "}
-              {options.categories.find((c) => c.id === filters.categoryId)
-                ?.name ?? "Unknown"}
-              <button
-                type="button"
-                className="ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
-                onClick={() =>
-                  onFiltersChange({ ...filters, categoryId: null })
-                }
-                aria-label="Remove category filter"
-              >
-                <X className="h-3 w-3" />
-              </button>
-            </Badge>
-          ) : null}
-          {filters.status ? (
-            <Badge className="gap-1 border-border/60 bg-muted/30 pr-1 text-xs">
-              Status: {ASSET_STATUS_LABELS[filters.status]}
-              <button
-                type="button"
-                className="ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
-                onClick={() => onFiltersChange({ ...filters, status: null })}
-                aria-label="Remove status filter"
-              >
-                <X className="h-3 w-3" />
-              </button>
-            </Badge>
+            <FilterChip
+              label="Category"
+              value={options.categories.find((c) => c.id === filters.categoryId)?.name ?? "Unknown"}
+              onRemove={() => onFiltersChange({ ...filters, categoryId: null })}
+            />
           ) : null}
           {filters.locationId ? (
-            <Badge className="gap-1 border-border/60 bg-muted/30 pr-1 text-xs">
-              Location:{" "}
-              {options.locations.find((l) => l.id === filters.locationId)
-                ?.path ?? "Unknown"}
-              <button
-                type="button"
-                className="ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
-                onClick={() =>
-                  onFiltersChange({ ...filters, locationId: null })
-                }
-                aria-label="Remove location filter"
-              >
-                <X className="h-3 w-3" />
-              </button>
-            </Badge>
+            <FilterChip
+              label="Location"
+              value={options.locations.find((l) => l.id === filters.locationId)?.name ?? "Unknown"}
+              onRemove={() => onFiltersChange({ ...filters, locationId: null })}
+            />
           ) : null}
-          {filters.tagIds.map((tagId) => {
-            const tag = options.tags.find((t) => t.id === tagId);
-            return (
-              <Badge
-                key={tagId}
-                className="gap-1 border-border/60 bg-muted/30 pr-1 text-xs"
-              >
-                Tag: {tag?.name ?? "Unknown"}
-                <button
-                  type="button"
-                  className="ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
-                  onClick={() =>
-                    onFiltersChange({
-                      ...filters,
-                      tagIds: removeTagId(filters.tagIds, tagId),
-                    })
-                  }
-                  aria-label={`Remove tag ${tag?.name ?? ""} filter`}
-                >
-                  <X className="h-3 w-3" />
-                </button>
-              </Badge>
-            );
-          })}
-          {search.trim() ? (
-            <Badge className="gap-1 border-border/60 bg-muted/30 pr-1 text-xs">
-              Search: {search.trim()}
-              <button
-                type="button"
-                className="ml-0.5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
-                onClick={() => onSearchChange("")}
-                aria-label="Clear search"
-              >
-                <X className="h-3 w-3" />
-              </button>
-            </Badge>
+          {filters.tagIds.map((tagId) => (
+            <FilterChip
+              key={tagId}
+              label="Keyword"
+              value={options.tags.find((t) => t.id === tagId)?.name ?? "Unknown"}
+              onRemove={() =>
+                onFiltersChange({ ...filters, tagIds: removeTagId(filters.tagIds, tagId) })
+              }
+            />
+          ))}
+          {filters.serviceGroupId ? (
+            <FilterChip
+              label="Service plan"
+              value={options.serviceGroups.find((g) => g.id === filters.serviceGroupId)?.name ?? "Unknown"}
+              onRemove={() => onFiltersChange({ ...filters, serviceGroupId: null })}
+            />
           ) : null}
-          {!hasFilters ? (
-            <span className="text-xs text-muted-foreground">
-              No active filters
-            </span>
+          {search.trim() ? (
+            <FilterChip label="Search" value={search.trim()} onRemove={() => onSearchChange("")} />
           ) : null}
+          <Button type="button" variant="link" size="xs" onClick={onReset}>
+            Reset
+          </Button>
         </div>
-
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="cursor-pointer"
-          onClick={onReset}
-          disabled={!hasFilters}
-        >
-          <X className="h-4 w-4" />
-          Reset
-        </Button>
-      </div>
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/assets/asset-form.tsx b/src/components/assets/asset-form.tsx
index b37858a..3a95f5e 100644
--- a/src/components/assets/asset-form.tsx
+++ b/src/components/assets/asset-form.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { Loader2 } from "lucide-react";
+import Link from "next/link";
+import { Loader2, TriangleAlert } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { DynamicField } from "@/components/fields/dynamic-field";
 import type { FieldDefinition, FieldValue } from "@/components/fields/types";
@@ -27,8 +28,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { TagChip } from "@/components/ui/tag-chip";
 import { Textarea } from "@/components/ui/textarea";
 import { previewAssetTag } from "@/lib/api/assets";
+import { cn } from "@/lib/utils";
 
 type CategoryOption = {
   id: string;
@@ -65,6 +69,7 @@ export function AssetForm({
   assetTag,
   submitting,
   submitLabel,
+  cancelHref,
   serviceSchedulingEnabled,
   serviceScheduleDraft,
   onServiceScheduleChange,
@@ -81,6 +86,8 @@ export function AssetForm({
   assetTag?: string | null;
   submitting: boolean;
   submitLabel: string;
+  /* Where Cancel goes; omit to hide it. */
+  cancelHref?: string;
   serviceSchedulingEnabled?: boolean;
   serviceScheduleDraft?: ServiceScheduleDraft;
   onServiceScheduleChange?: (next: ServiceScheduleDraft) => void;
@@ -211,175 +218,208 @@ export function AssetForm({
     });
   }
 
-  return (
-    <form className="space-y-5" onSubmit={handleSubmit} noValidate>
-      <div className="grid gap-4 lg:grid-cols-2">
-        <div className="space-y-1.5">
-          <label htmlFor="asset-name" className="text-sm font-medium">
-            Name
-            <span className="ml-1 text-destructive">*</span>
-          </label>
-          <Input
-            id="asset-name"
-            value={values.name}
-            onChange={(event) => setFieldValue("name", event.target.value)}
-            placeholder="Asset name"
-            disabled={submitting}
-            aria-invalid={Boolean(errors.name)}
-          />
-          {errors.name ? (
-            <p className="text-xs text-destructive">{errors.name}</p>
-          ) : null}
-        </div>
-
-        <div className="space-y-1.5">
-          <label className="text-sm font-medium">Category</label>
-          <Select
-            value={values.categoryId ?? "__none__"}
-            onValueChange={(value) =>
-              setFieldValue("categoryId", value === "__none__" ? null : value)
-            }
-            disabled={submitting}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="No category" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__none__">No category</SelectItem>
-              {categories.map((category) => (
-                <SelectItem key={category.id} value={category.id}>
-                  {category.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+  const sectionGrid = "grid gap-x-6 gap-y-4 px-0.5 pt-4 sm:grid-cols-2";
 
-        <div className="space-y-1.5">
-          <label htmlFor="asset-tag" className="text-sm font-medium">
-            Asset tag
-          </label>
-          <div className="flex h-9 items-center rounded-md border border-border/70 bg-muted/20 px-3 text-sm font-mono tracking-wide">
-            {showTagLoading ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+  return (
+    <form
+      className="max-w-[880px] space-y-10"
+      onSubmit={handleSubmit}
+      noValidate
+    >
+      <section aria-labelledby="asset-form-details">
+        <SheetHeading title={<span id="asset-form-details">Details</span>} />
+        <div className={sectionGrid}>
+          <div className="space-y-1.5 sm:col-span-2">
+            <label htmlFor="asset-name" className="text-sm font-semibold">
+              Name
+            </label>
+            <Input
+              id="asset-name"
+              value={values.name}
+              onChange={(event) => setFieldValue("name", event.target.value)}
+              placeholder="Festool TS 55 plunge saw"
+              disabled={submitting}
+              aria-invalid={Boolean(errors.name)}
+              aria-describedby={errors.name ? "asset-name-error" : undefined}
+            />
+            {errors.name ? (
+              <FieldError id="asset-name-error">{errors.name}</FieldError>
             ) : null}
-            {activeAssetTag}
           </div>
-        </div>
 
-        <div className="space-y-1.5">
-          <label htmlFor="asset-status" className="text-sm font-medium">
-            Status
-          </label>
-          <Select
-            value={values.status}
-            onValueChange={(value) =>
-              setFieldValue("status", value as AssetStatus)
-            }
-            disabled={submitting}
-          >
-            <SelectTrigger id="asset-status" className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {ASSET_STATUS_OPTIONS.map((status) => (
-                <SelectItem key={status} value={status}>
-                  {ASSET_STATUS_LABELS[status]}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
+          <div className="space-y-1.5">
+            <OptionalLabel id="asset-category-label">Category</OptionalLabel>
+            <Select
+              value={values.categoryId ?? "__none__"}
+              onValueChange={(value) =>
+                setFieldValue("categoryId", value === "__none__" ? null : value)
+              }
+              disabled={submitting}
+            >
+              <SelectTrigger
+                className="w-full"
+                aria-labelledby="asset-category-label"
+              >
+                <SelectValue placeholder="No category" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">No category</SelectItem>
+                {categories.map((category) => (
+                  <SelectItem key={category.id} value={category.id}>
+                    {category.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-      <div className="grid gap-4 lg:grid-cols-2">
-        <div className="space-y-1.5">
-          <label htmlFor="asset-location" className="text-sm font-medium">
-            Location
-          </label>
-          <LocationPicker
-            id="asset-location"
-            value={values.locationId}
-            options={locations}
-            onChange={(locationId) => setFieldValue("locationId", locationId)}
-            disabled={submitting}
-          />
-        </div>
+          <div className="space-y-1.5">
+            <span id="asset-tag-label" className="block text-sm font-semibold">
+              Tag
+            </span>
+            <div
+              className="flex h-9 items-center gap-2.5"
+              aria-labelledby="asset-tag-label"
+              role="group"
+            >
+              {showTagLoading ? (
+                <Loader2 className="size-4 animate-spin text-muted-foreground" />
+              ) : (
+                <TagChip>{activeAssetTag}</TagChip>
+              )}
+              <span className="text-[13px] text-muted-foreground">
+                {mode === "create"
+                  ? "Assigned from the category prefix when you save."
+                  : "Printed on the label. It does not change."}
+              </span>
+            </div>
+          </div>
 
-        <div className="space-y-1.5">
-          <label htmlFor="asset-service-group" className="text-sm font-medium">
-            Service group
-          </label>
-          <Select
-            value={values.serviceGroupId ?? "__none__"}
-            onValueChange={(value) =>
-              setFieldValue(
-                "serviceGroupId",
-                value === "__none__" ? null : value,
-              )
-            }
-            disabled={submitting}
-          >
-            <SelectTrigger id="asset-service-group" className="w-full">
-              <SelectValue placeholder="No service group" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="__none__">No service group</SelectItem>
-              {serviceGroups.map((group) => (
-                <SelectItem key={group.id} value={group.id}>
-                  {group.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+          <div className="space-y-1.5">
+            <label htmlFor="asset-location" className="text-sm font-semibold">
+              Location{" "}
+              <span className="font-normal text-muted-foreground">
+                optional
+              </span>
+            </label>
+            <LocationPicker
+              id="asset-location"
+              value={values.locationId}
+              options={locations}
+              onChange={(locationId) => setFieldValue("locationId", locationId)}
+              disabled={submitting}
+            />
+          </div>
 
-        <div className="space-y-1.5">
-          <label className="text-sm font-medium">Tags</label>
-          <TagPicker
-            value={values.tagIds}
-            options={tags}
-            onChange={(tagIds) => setFieldValue("tagIds", tagIds)}
-            disabled={submitting}
-          />
-        </div>
-      </div>
+          <div className="space-y-1.5">
+            <label htmlFor="asset-status" className="text-sm font-semibold">
+              Status
+            </label>
+            <Select
+              value={values.status}
+              onValueChange={(value) =>
+                setFieldValue("status", value as AssetStatus)
+              }
+              disabled={submitting}
+            >
+              <SelectTrigger id="asset-status" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {ASSET_STATUS_OPTIONS.map((status) => (
+                  <SelectItem key={status} value={status}>
+                    {ASSET_STATUS_LABELS[status]}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-      <div className="space-y-1.5">
-        <label htmlFor="asset-notes" className="text-sm font-medium">
-          Notes
-        </label>
-        <Textarea
-          id="asset-notes"
-          value={values.notes}
-          onChange={(event) => setFieldValue("notes", event.target.value)}
-          placeholder="Optional notes"
-          className="min-h-24"
-          disabled={submitting}
-        />
-      </div>
+          <div className="space-y-1.5">
+            <label
+              htmlFor="asset-service-group"
+              className="text-sm font-semibold"
+            >
+              Service plan{" "}
+              <span className="font-normal text-muted-foreground">
+                optional
+              </span>
+            </label>
+            <Select
+              value={values.serviceGroupId ?? "__none__"}
+              onValueChange={(value) =>
+                setFieldValue(
+                  "serviceGroupId",
+                  value === "__none__" ? null : value,
+                )
+              }
+              disabled={submitting}
+            >
+              <SelectTrigger id="asset-service-group" className="w-full">
+                <SelectValue placeholder="No service plan" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">No service plan</SelectItem>
+                {serviceGroups.map((group) => (
+                  <SelectItem key={group.id} value={group.id}>
+                    {group.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
 
-      <section className="space-y-3 rounded-lg border border-border/60 bg-muted/10 p-4">
-        <div>
-          <h3 className="text-sm font-semibold tracking-tight">
-            Custom fields
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            Values are based on your field definitions.
-          </p>
+          <div className="space-y-1.5 sm:col-span-2">
+            <OptionalLabel id="asset-keywords-label">Keywords</OptionalLabel>
+            <TagPicker
+              value={values.tagIds}
+              options={tags}
+              onChange={(tagIds) => setFieldValue("tagIds", tagIds)}
+              disabled={submitting}
+              labelledBy="asset-keywords-label"
+            />
+          </div>
+
+          <div className="space-y-1.5 sm:col-span-2">
+            <label htmlFor="asset-notes" className="text-sm font-semibold">
+              Notes{" "}
+              <span className="font-normal text-muted-foreground">
+                optional
+              </span>
+            </label>
+            <Textarea
+              id="asset-notes"
+              value={values.notes}
+              onChange={(event) => setFieldValue("notes", event.target.value)}
+              placeholder="Serial number, quirks, who to ask"
+              className="min-h-24"
+              disabled={submitting}
+            />
+          </div>
         </div>
+      </section>
 
+      <section aria-labelledby="asset-form-custom-fields">
+        <SheetHeading
+          title={<span id="asset-form-custom-fields">Custom fields</span>}
+        />
         {fieldDefinitions.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
-            No custom fields defined.
+          <p className="px-0.5 py-4 text-sm text-ink-2">
+            No custom fields defined.{" "}
+            <Link
+              href="/taxonomy?tab=fields"
+              className="font-medium text-foreground underline underline-offset-[3px]"
+            >
+              Open Taxonomy
+            </Link>
           </p>
         ) : (
-          <div className="grid gap-4 lg:grid-cols-2">
+          <div className={sectionGrid}>
             {fieldDefinitions.map((definition) => {
               const fieldId = definition.id as string;
 
               return (
-                <div key={definition.id} className="space-y-1">
+                <div key={definition.id} className="space-y-1.5">
                   <DynamicField
                     definition={definition}
                     value={values.customFieldValues[fieldId] ?? null}
@@ -387,9 +427,7 @@ export function AssetForm({
                     disabled={submitting}
                   />
                   {errors[`custom:${fieldId}`] ? (
-                    <p className="text-xs text-destructive">
-                      {errors[`custom:${fieldId}`]}
-                    </p>
+                    <FieldError>{errors[`custom:${fieldId}`]}</FieldError>
                   ) : null}
                 </div>
               );
@@ -410,12 +448,57 @@ export function AssetForm({
         />
       ) : null}
 
-      <div className="flex items-center justify-end gap-2">
-        <Button type="submit" className="cursor-pointer" disabled={submitting}>
-          {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+      <div className="flex flex-wrap items-center gap-2 border-t border-border pt-4 max-sm:flex-col-reverse max-sm:items-stretch">
+        <Button type="submit" disabled={submitting} className="max-sm:h-11">
+          {submitting ? <Loader2 className="animate-spin" /> : null}
           {submitLabel}
         </Button>
+        {cancelHref ? (
+          <Button
+            asChild
+            variant="secondary"
+            className={cn(
+              "max-sm:h-11",
+              submitting && "pointer-events-none opacity-50",
+            )}
+          >
+            <Link href={cancelHref}>Cancel</Link>
+          </Button>
+        ) : null}
       </div>
     </form>
   );
 }
+
+function OptionalLabel({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span className="block text-sm font-semibold">
+      <span id={id}>{children}</span>{" "}
+      <span className="font-normal text-muted-foreground">optional</span>
+    </span>
+  );
+}
+
+function FieldError({
+  id,
+  children,
+}: {
+  id?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <p
+      id={id}
+      className="flex items-start gap-1.5 text-sm font-medium text-destructive"
+    >
+      <TriangleAlert className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+      <span>{children}</span>
+    </p>
+  );
+}
diff --git a/src/components/assets/asset-photo-slot.tsx b/src/components/assets/asset-photo-slot.tsx
new file mode 100644
index 0000000..47f3724
--- /dev/null
+++ b/src/components/assets/asset-photo-slot.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Camera } from "lucide-react";
+import { toast } from "sonner";
+import { getAttachmentUiErrorMessage } from "@/components/attachments/error-messages";
+import { listAttachments, uploadAttachment } from "@/lib/api/attachments";
+import { cn } from "@/lib/utils";
+
+const PROCESSING_POLL_MS = 2_000;
+
+/*
+  The hero photo: the asset's first ready image attachment. Without one, a
+  long-dash slot says "Add photo…"; phones offer the camera or the library.
+  A fresh upload is optimised in the background, so while an image is still
+  pending the slot says "Processing photo…" and polls until it is ready.
+*/
+function isProcessingImage(item: { fileKind: string; status: string }) {
+  return (
+    item.fileKind === "image" &&
+    (item.status === "pending" || item.status === "processing")
+  );
+}
+
+export function AssetPhotoSlot({
+  assetId,
+  assetName,
+  className,
+}: {
+  assetId: string;
+  assetName: string;
+  className?: string;
+}) {
+  const queryClient = useQueryClient();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const attachmentsQuery = useQuery({
+    queryKey: ["attachments", assetId],
+    queryFn: () => listAttachments(assetId),
+    refetchInterval: (query) =>
+      (query.state.data ?? []).some(isProcessingImage)
+        ? PROCESSING_POLL_MS
+        : false,
+  });
+
+  const attachments = attachmentsQuery.data ?? [];
+  const photo = attachments.find(
+    (item) => item.fileKind === "image" && item.status === "ready" && item.url,
+  );
+  const processing = !photo && attachments.some(isProcessingImage);
+
+  async function handleFile(file: File | undefined) {
+    if (!file) return;
+    setUploading(true);
+    try {
+      await uploadAttachment(assetId, file);
+      toast.success("Photo added");
+      void queryClient.invalidateQueries({
+        queryKey: ["attachments", assetId],
+      });
+      void queryClient.invalidateQueries({ queryKey: ["storage-usage"] });
+    } catch (error) {
+      toast.error(
+        getAttachmentUiErrorMessage(
+          error,
+          "Couldn't add the photo. Try again.",
+        ),
+      );
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+
+  if (photo?.url) {
+    return (
+      <a
+        href={photo.url}
+        target="_blank"
+        rel="noreferrer"
+        className={cn(
+          "block overflow-hidden rounded-md border border-border bg-card",
+          className,
+        )}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element -- served by PocketBase */}
+        <img
+          src={photo.url}
+          alt={assetName}
+          className="size-full object-cover"
+        />
+      </a>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={uploading || processing || attachmentsQuery.isPending}
+        aria-label={processing ? "Processing photo…" : "Add photo…"}
+        className={cn(
+          "dash-slot flex cursor-pointer flex-col items-center justify-center gap-1.5 px-2 text-ink-2 hover:bg-card/60 disabled:cursor-default",
+          className,
+        )}
+      >
+        <Camera
+          className="size-[22px] text-muted-foreground md:size-7"
+          aria-hidden="true"
+        />
+        <span className="text-xs font-medium md:text-[13px]">
+          {uploading
+            ? "Adding…"
+            : processing
+              ? "Processing photo…"
+              : "Add photo…"}
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="sr-only"
+        tabIndex={-1}
+        aria-hidden="true"
+        onChange={(event) => void handleFile(event.target.files?.[0])}
+      />
+    </>
+  );
+}
diff --git a/src/components/assets/asset-table.tsx b/src/components/assets/asset-table.tsx
index d4af96a..8157ba9 100644
--- a/src/components/assets/asset-table.tsx
+++ b/src/components/assets/asset-table.tsx
@@ -1,80 +1,72 @@
 "use client";
 
-import {
-  ArrowDownUp,
-  ArrowUp,
-  ArrowDown,
-  CheckSquare,
-  Eye,
-  Pencil,
-  Square,
-} from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { ArrowDown, ArrowUp, Eye, MoreHorizontal, Pencil, CheckSquare, Square } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { StatusBadge } from "@/components/assets/status-badge";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { StatusText } from "@/components/ui/status-text";
+import { TagChip } from "@/components/ui/tag-chip";
+import { Skeleton } from "@/components/ui/skeleton";
+import { LocationPath } from "@/components/locations/location-path";
 import type { AssetListItem } from "@/components/assets/types";
-import { formatDateFromTimestamp } from "@/lib/date-format";
-import { useAppDateFormat } from "@/lib/use-app-date-format";
+import { formatRelativeTime } from "@/lib/relative-time";
+import { cn } from "@/lib/utils";
 
-export type AssetSortBy = "createdAt" | "name" | "assetTag" | "status";
+export type AssetSortBy =
+  | "createdAt"
+  | "updatedAt"
+  | "name"
+  | "assetTag"
+  | "status";
 export type AssetSortDirection = "asc" | "desc";
 
-function SortIcon({
-  active,
-  direction,
-}: {
-  active: boolean;
-  direction: AssetSortDirection;
-}) {
-  if (!active) {
-    return <ArrowDownUp className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-
-  if (direction === "asc") {
-    return <ArrowUp className="h-3.5 w-3.5" />;
-  }
-
-  return <ArrowDown className="h-3.5 w-3.5" />;
-}
-
-function SortButton({
+function SortHeader({
   label,
   field,
-  activeField,
-  activeDirection,
+  sortBy,
+  sortDirection,
   onSort,
+  arrowFirst = false,
 }: {
   label: string;
   field: AssetSortBy;
-  activeField: AssetSortBy;
-  activeDirection: AssetSortDirection;
+  sortBy: AssetSortBy;
+  sortDirection: AssetSortDirection;
   onSort: (field: AssetSortBy) => void;
+  arrowFirst?: boolean;
 }) {
-  const active = activeField === field;
-
+  const active = sortBy === field;
+  const Arrow = sortDirection === "asc" ? ArrowUp : ArrowDown;
+  const arrow = active ? (
+    <Arrow className="size-3 text-muted-foreground" aria-hidden="true" />
+  ) : null;
   return (
-    <Button
+    <button
       type="button"
-      variant="ghost"
-      size="xs"
-      className="cursor-pointer px-1.5"
       onClick={() => onSort(field)}
       aria-label={`Sort by ${label}`}
+      className="inline-flex cursor-pointer items-center gap-1 font-semibold hover:underline hover:underline-offset-[3px]"
     >
-      <span>{label}</span>
-      <SortIcon active={active} direction={activeDirection} />
-    </Button>
+      {arrowFirst ? arrow : null}
+      {label}
+      {arrowFirst ? null : arrow}
+    </button>
   );
 }
 
+/*
+  The Assets table lives on a card (its named exception: selection, the bulk
+  tray and pagination live on it). Two type tones per row; the Name is the
+  only ink 500 run. On tablet, Category and Location drop and the location
+  becomes a 13px second line under the name. Updated is the sort key,
+  right-aligned with the arrow leading. The overflow column is a fixed 44px
+  that shows on hover, focus or selection.
+*/
 export function AssetTable({
   rows,
   loading,
@@ -98,187 +90,161 @@ export function AssetTable({
   onRowOpen: (assetId: string) => void;
   onRowEdit?: (assetId: string) => void;
 }) {
-  const dateFormat = useAppDateFormat();
   const allSelected =
     rows.length > 0 && rows.every((row) => selectedIds.has(row.id));
+  const someSelected = !allSelected && rows.some((row) => selectedIds.has(row.id));
+
+  const th = "h-[42px] rule-ink px-3.5 text-left text-[13px] font-semibold whitespace-nowrap text-foreground";
+  const ariaSort = (field: AssetSortBy) =>
+    sortBy === field ? (sortDirection === "asc" ? "ascending" : "descending") : undefined;
 
   return (
-    <div className="overflow-x-auto rounded-xl border border-border/70 bg-background shadow-sm">
-      <table className="min-w-full text-sm">
-        <thead className="bg-muted/35 text-left">
+    <div className="overflow-x-auto">
+      <table className="w-full min-w-0 border-collapse text-sm">
+        <thead>
           <tr>
-            <th className="w-10 px-3 py-2">
+            <th className={cn(th, "w-11 pr-0")}>
               <Checkbox
                 aria-label="Select all assets"
-                checked={allSelected}
+                checked={allSelected ? true : someSelected ? "indeterminate" : false}
                 onCheckedChange={(checked) => onSelectAll(checked === true)}
                 disabled={rows.length === 0}
               />
             </th>
-            <th className="px-3 py-2">
-              <SortButton
-                label="Asset tag"
-                field="assetTag"
-                activeField={sortBy}
-                activeDirection={sortDirection}
-                onSort={onSort}
-              />
+            <th className={th} aria-sort={ariaSort("assetTag")}>
+              <SortHeader label="Tag" field="assetTag" sortBy={sortBy} sortDirection={sortDirection} onSort={onSort} />
             </th>
-            <th className="px-3 py-2">
-              <SortButton
-                label="Name"
-                field="name"
-                activeField={sortBy}
-                activeDirection={sortDirection}
-                onSort={onSort}
-              />
+            <th className={th} aria-sort={ariaSort("name")}>
+              <SortHeader label="Name" field="name" sortBy={sortBy} sortDirection={sortDirection} onSort={onSort} />
             </th>
-            <th className="px-3 py-2">Category</th>
-            <th className="px-3 py-2">
-              <SortButton
-                label="Status"
-                field="status"
-                activeField={sortBy}
-                activeDirection={sortDirection}
-                onSort={onSort}
-              />
+            <th className={cn(th, "hidden lg:table-cell")}>Category</th>
+            <th className={cn(th, "hidden lg:table-cell")}>Location</th>
+            <th className={cn(th, "pl-[30px]")} aria-sort={ariaSort("status")}>
+              <SortHeader label="Status" field="status" sortBy={sortBy} sortDirection={sortDirection} onSort={onSort} />
             </th>
-            <th className="px-3 py-2">Location</th>
-            <th className="px-3 py-2 text-right">
-              <SortButton
-                label="Created"
-                field="createdAt"
-                activeField={sortBy}
-                activeDirection={sortDirection}
-                onSort={onSort}
-              />
+            <th className={cn(th, "pr-1.5 text-right")} aria-sort={ariaSort("updatedAt")}>
+              <SortHeader label="Updated" field="updatedAt" sortBy={sortBy} sortDirection={sortDirection} onSort={onSort} arrowFirst />
+            </th>
+            <th className={cn(th, "w-11 p-0")}>
+              <span className="sr-only">Actions</span>
             </th>
           </tr>
         </thead>
         <tbody>
           {loading ? (
-            <tr>
-              <td
-                colSpan={7}
-                className="px-3 py-10 text-center text-muted-foreground"
-              >
-                Loading assets...
-              </td>
-            </tr>
+            Array.from({ length: 6 }).map((_, index) => (
+              <tr key={`skeleton-${index}`} className="h-12 border-b border-border">
+                <td className="px-3.5 pr-0">
+                  <span className="block size-[18px] rounded-xs border-[1.5px] border-line-2" />
+                </td>
+                <td className="px-3.5">
+                  <span className="block h-[23px] w-[62px] rounded-xs border border-line-2" />
+                </td>
+                <td className="px-3.5">
+                  <Skeleton className="h-2.5" style={{ width: `${[60, 48, 70, 52, 64, 44][index]}%` }} />
+                </td>
+                <td className="hidden px-3.5 lg:table-cell"><Skeleton className="h-2.5 w-16" /></td>
+                <td className="hidden px-3.5 lg:table-cell"><Skeleton className="h-2.5 w-24" /></td>
+                <td className="pl-[30px]"><Skeleton className="h-2.5 w-14" /></td>
+                <td className="pr-1.5"><Skeleton className="ml-auto h-2.5 w-16" /></td>
+                <td />
+              </tr>
+            ))
           ) : rows.length === 0 ? (
             <tr>
-              <td
-                colSpan={7}
-                className="px-3 py-10 text-center text-muted-foreground"
-              >
+              <td colSpan={8} className="px-3.5 py-10 text-center text-ink-2">
                 No assets match your filters.
               </td>
             </tr>
           ) : (
             rows.map((asset) => {
               const selected = selectedIds.has(asset.id);
-
+              const time = formatRelativeTime(asset.updatedAt);
               return (
-                <ContextMenu key={asset.id}>
-                  <ContextMenuTrigger asChild>
-                    <tr
-                      className="cursor-pointer border-t border-border/50 transition hover:bg-orange-50/50 focus-visible:bg-orange-50/50 dark:hover:bg-stone-800/50 dark:focus-visible:bg-stone-800/50"
-                      onClick={() => onRowOpen(asset.id)}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter" || event.key === " ") {
-                          event.preventDefault();
-                          onRowOpen(asset.id);
-                        }
-                      }}
-                      tabIndex={0}
-                    >
-                      <td
-                        className="px-3 py-2"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <Checkbox
-                          aria-label={`Select ${asset.name}`}
-                          checked={selected}
-                          onCheckedChange={(checked) =>
-                            onSelectRow(asset.id, checked === true)
-                          }
-                        />
-                      </td>
-                      <td className="px-3 py-2 font-mono text-xs font-semibold tracking-wide text-muted-foreground">
-                        {asset.assetTag}
-                      </td>
-                      <td className="px-3 py-2">
-                        <div className="text-sm font-semibold">
-                          {asset.name}
-                        </div>
-                        {asset.tagNames.length > 0 ? (
-                          <div className="mt-1 flex flex-wrap gap-1">
-                            {asset.tagNames.slice(0, 2).map((tagName) => (
-                              <Badge
-                                key={tagName}
-                                className="border border-border/70 bg-muted/20 text-[10px]"
-                              >
-                                {tagName}
-                              </Badge>
-                            ))}
-                            {asset.tagNames.length > 2 ? (
-                              <Badge className="border border-border/70 bg-muted/20 text-[10px]">
-                                +{asset.tagNames.length - 2}
-                              </Badge>
-                            ) : null}
-                          </div>
+                <tr
+                  key={asset.id}
+                  aria-selected={selected}
+                  className={cn(
+                    "group h-12 cursor-pointer border-b border-border transition-colors last:border-b-0 hover:bg-secondary focus-visible:bg-secondary md:h-14 lg:h-12",
+                    selected && "bg-secondary shadow-[inset_2px_0_0_var(--foreground)]",
+                  )}
+                  onClick={() => onRowOpen(asset.id)}
+                  onKeyDown={(event) => {
+                    if (event.target !== event.currentTarget) return;
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      onRowOpen(asset.id);
+                    }
+                  }}
+                  tabIndex={0}
+                >
+                  <td className="px-3.5 pr-0" onClick={(event) => event.stopPropagation()}>
+                    <Checkbox
+                      aria-label={`Select ${asset.name}`}
+                      checked={selected}
+                      onCheckedChange={(checked) => onSelectRow(asset.id, checked === true)}
+                    />
+                  </td>
+                  <td className="px-3.5">
+                    <TagChip weight="table">{asset.assetTag}</TagChip>
+                  </td>
+                  <td className="px-3.5 py-2">
+                    <span className="block font-medium text-foreground">{asset.name}</span>
+                    <LocationPath
+                      path={asset.locationPath}
+                      leafWeight="regular"
+                      className="mt-0.5 text-[13px] leading-snug lg:hidden"
+                    />
+                  </td>
+                  <td className="hidden px-3.5 whitespace-nowrap text-foreground lg:table-cell">
+                    {asset.categoryName ?? <span className="text-muted-foreground">—</span>}
+                  </td>
+                  <td className="hidden px-3.5 lg:table-cell">
+                    <div className="flex max-w-[280px] whitespace-nowrap">
+                      <LocationPath path={asset.locationPath} leafWeight="regular" />
+                    </div>
+                  </td>
+                  <td className="px-3.5 whitespace-nowrap">
+                    <StatusText status={asset.status} inTable className="max-lg:text-[13px]" />
+                  </td>
+                  <td className="pr-1.5 pl-3.5 text-right whitespace-nowrap text-ink-2">
+                    <span className="hidden lg:inline">{time.long}</span>
+                    <span className="lg:hidden">{time.short}</span>
+                  </td>
+                  <td className="w-11 p-0 pr-1.5 text-right" onClick={(event) => event.stopPropagation()}>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          aria-label={`Actions for ${asset.name}`}
+                          className={cn(
+                            "grid size-9 cursor-pointer place-items-center rounded-md text-ink-2 opacity-0 hover:bg-card group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100",
+                            selected && "opacity-100",
+                          )}
+                        >
+                          <MoreHorizontal className="size-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => onRowOpen(asset.id)}>
+                          <Eye className="size-4" />
+                          Open asset
+                        </DropdownMenuItem>
+                        {onRowEdit ? (
+                          <DropdownMenuItem onClick={() => onRowEdit(asset.id)}>
+                            <Pencil className="size-4" />
+                            Edit
+                          </DropdownMenuItem>
                         ) : null}
-                      </td>
-                      <td className="px-3 py-2">
-                        {asset.categoryName ? (
-                          <Badge className="border border-border/60 bg-muted/20 text-xs">
-                            {asset.categoryColor ? (
-                              <span
-                                className="inline-block h-2 w-2 shrink-0 rounded-full"
-                                style={{ backgroundColor: asset.categoryColor }}
-                              />
-                            ) : null}
-                            {asset.categoryName}
-                          </Badge>
-                        ) : (
-                          <span className="text-muted-foreground">—</span>
-                        )}
-                      </td>
-                      <td className="px-3 py-2">
-                        <StatusBadge status={asset.status} />
-                      </td>
-                      <td className="px-3 py-2 text-muted-foreground">
-                        {asset.locationPath ?? "—"}
-                      </td>
-                      <td className="px-3 py-2 text-right text-muted-foreground">
-                        {formatDateFromTimestamp(asset.createdAt, dateFormat)}
-                      </td>
-                    </tr>
-                  </ContextMenuTrigger>
-                  <ContextMenuContent>
-                    <ContextMenuItem onClick={() => onRowOpen(asset.id)}>
-                      <Eye className="h-4 w-4" />
-                      View details
-                    </ContextMenuItem>
-                    {onRowEdit ? (
-                      <ContextMenuItem onClick={() => onRowEdit(asset.id)}>
-                        <Pencil className="h-4 w-4" />
-                        Edit
-                      </ContextMenuItem>
-                    ) : null}
-                    <ContextMenuSeparator />
-                    <ContextMenuItem
-                      onClick={() => onSelectRow(asset.id, !selected)}
-                    >
-                      {selected ? (
-                        <Square className="h-4 w-4" />
-                      ) : (
-                        <CheckSquare className="h-4 w-4" />
-                      )}
-                      {selected ? "Deselect" : "Select"}
-                    </ContextMenuItem>
-                  </ContextMenuContent>
-                </ContextMenu>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem onClick={() => onSelectRow(asset.id, !selected)}>
+                          {selected ? <Square className="size-4" /> : <CheckSquare className="size-4" />}
+                          {selected ? "Deselect" : "Select"}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </td>
+                </tr>
               );
             })
           )}
diff --git a/src/components/assets/assets-page-client.tsx b/src/components/assets/assets-page-client.tsx
index bbf7f65..c1f7056 100644
--- a/src/components/assets/assets-page-client.tsx
+++ b/src/components/assets/assets-page-client.tsx
@@ -9,11 +9,13 @@ import {
   useMemo,
   useRef,
   useState,
+  useSyncExternalStore,
 } from "react";
-import { Package, Plus, Printer, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, Package, Plus, Printer, X } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import {
   AssetFilters,
+  EMPTY_FILTERS,
   type AssetFiltersState,
 } from "@/components/assets/asset-filters";
 import { AssetFiltersMobile } from "@/components/assets/asset-filters-mobile";
@@ -23,23 +25,42 @@ import {
   type AssetSortBy,
   type AssetSortDirection,
 } from "@/components/assets/asset-table";
-import type {
-  AssetFilterOptions,
-  AssetListItem,
+import {
+  ASSET_STATUS_LABELS,
+  ASSET_STATUS_OPTIONS,
+  type AssetFilterOptions,
+  type AssetListItem,
+  type AssetStatus,
 } from "@/components/assets/types";
+import { PageHeader } from "@/components/layout/page-header";
+import { MobileTitleCount } from "@/components/layout/mobile-top-bar";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/ui/empty-state";
+import { useHydrated } from "@/hooks/use-hydrated";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import {
   getAssetFilterOptions,
   listAssets,
   type ListAssetsParams,
 } from "@/lib/api/assets";
+import { getDashboardOverview } from "@/lib/api/dashboard";
+import { cn } from "@/lib/utils";
+
+const PAGE_SIZE = 15;
+const HINT_KEY = "stowage:hint-long-press";
+const noopSubscribe = () => () => {};
+
+function parseStatus(value: string | null): AssetStatus | null {
+  return value && (ASSET_STATUS_OPTIONS as readonly string[]).includes(value)
+    ? (value as AssetStatus)
+    : null;
+}
 
 function getInitialFilters(searchParams: URLSearchParams): AssetFiltersState {
   return {
+    ...EMPTY_FILTERS,
     categoryId: searchParams.get("category"),
-    status: null,
+    status: parseStatus(searchParams.get("status")),
     locationId: searchParams.get("location"),
     tagIds: searchParams.get("tag") ? [searchParams.get("tag") as string] : [],
   };
@@ -48,15 +69,31 @@ function getInitialFilters(searchParams: URLSearchParams): AssetFiltersState {
 function buildFiltersKey(searchParams: URLSearchParams) {
   return [
     searchParams.get("category") ?? "",
+    searchParams.get("status") ?? "",
     searchParams.get("location") ?? "",
     searchParams.get("tag") ?? "",
   ].join("|");
 }
 
+function pageList(current: number, total: number): (number | "gap")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = new Set([1, total, current - 1, current, current + 1]);
+  const sorted = [...pages].filter((p) => p >= 1 && p <= total).sort((a, b) => a - b);
+  const out: (number | "gap")[] = [];
+  sorted.forEach((page, index) => {
+    if (index > 0 && page - sorted[index - 1] > 1) out.push("gap");
+    out.push(page);
+  });
+  return out;
+}
+
 export function AssetsPageClient() {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const isPhone = useMediaQuery("(max-width: 767px)");
+  // The shell fetches the overview before this suspended page hydrates; keep
+  // cached data out of the hydration render so it matches the server HTML.
+  const hydrated = useHydrated();
 
   const [searchInput, setSearchInput] = useState("");
   const deferredSearch = useDeferredValue(searchInput);
@@ -64,16 +101,21 @@ export function AssetsPageClient() {
   const [filters, setFilters] = useState<AssetFiltersState>(() =>
     getInitialFilters(searchParams),
   );
-  const [sortBy, setSortBy] = useState<AssetSortBy>("createdAt");
-  const [sortDirection, setSortDirection] =
-    useState<AssetSortDirection>("desc");
+  const [sortBy, setSortBy] = useState<AssetSortBy>("updatedAt");
+  const [sortDirection, setSortDirection] = useState<AssetSortDirection>("desc");
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [page, setPage] = useState(1);
+  const [phoneVisible, setPhoneVisible] = useState(PAGE_SIZE);
+  const [hintDismissedNow, setHintDismissedNow] = useState(false);
+  const hintStored = useSyncExternalStore(
+    noopSubscribe,
+    () => window.localStorage.getItem(HINT_KEY) === "1",
+    () => true,
+  );
+  const hintDismissed = hintStored || hintDismissedNow;
 
-  // 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.
+  // Sync URL → state when the filter-defining params change (for example a
+  // category link on the dashboard), without remounting the table.
   const lastFiltersKeyRef = useRef(buildFiltersKey(searchParams));
   useEffect(() => {
     const nextKey = buildFiltersKey(searchParams);
@@ -82,6 +124,7 @@ export function AssetsPageClient() {
     startTransition(() => {
       setFilters(getInitialFilters(searchParams));
       setSelectedIds(new Set());
+      setPage(1);
     });
   }, [searchParams]);
 
@@ -90,6 +133,11 @@ export function AssetsPageClient() {
     queryFn: getAssetFilterOptions,
     staleTime: 60_000,
   });
+  const overviewQuery = useQuery({
+    queryKey: ["dashboard", "overview"],
+    queryFn: getDashboardOverview,
+    staleTime: 60_000,
+  });
 
   const listParams: ListAssetsParams = useMemo(
     () => ({
@@ -116,227 +164,331 @@ export function AssetsPageClient() {
     queryFn: () => listAssets(listParams),
   });
 
-  const loading = assetsQuery.isPending || filterOptionsQuery.isPending;
-  const rows = useMemo(
-    () => (assetsQuery.data ?? []) as AssetListItem[],
-    [assetsQuery.data],
-  );
+  const loading = !hydrated || assetsQuery.isPending || filterOptionsQuery.isPending;
+  const listData = hydrated ? assetsQuery.data : undefined;
+  const rows = useMemo(() => {
+    const all = (listData ?? []) as AssetListItem[];
+    if (!filters.serviceGroupId) return all;
+    return all.filter((row) => row.serviceGroupId === filters.serviceGroupId);
+  }, [listData, filters.serviceGroupId]);
+
   const hasFilters =
     Boolean(deferredSearch.trim()) ||
     filters.categoryId !== null ||
     filters.status !== null ||
     filters.locationId !== null ||
-    filters.tagIds.length > 0;
+    filters.tagIds.length > 0 ||
+    Boolean(filters.serviceGroupId);
   const showEmptyState = !loading && rows.length === 0 && !hasFilters;
-  const options: AssetFilterOptions = filterOptionsQuery.data ?? {
+  const options: AssetFilterOptions = (hydrated ? filterOptionsQuery.data : undefined) ?? {
     categories: [],
     locations: [],
     tags: [],
     serviceGroups: [],
   };
 
+  const pageCount = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
+  const currentPage = Math.min(page, pageCount);
+  const pageRows = rows.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+  const phoneRows = rows.slice(0, phoneVisible);
+
+  function updateFilters(next: AssetFiltersState) {
+    startTransition(() => {
+      setFilters(next);
+      setPage(1);
+      setPhoneVisible(PAGE_SIZE);
+    });
+  }
+
+  function resetFilters() {
+    startTransition(() => {
+      setSearchInput("");
+      setFilters(EMPTY_FILTERS);
+      setPage(1);
+    });
+  }
+
   function handleSort(field: AssetSortBy) {
     if (sortBy === field) {
       setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"));
       return;
     }
-
     setSortBy(field);
-    setSortDirection(field === "createdAt" ? "desc" : "asc");
+    setSortDirection(field === "createdAt" || field === "updatedAt" ? "desc" : "asc");
   }
 
-  const selectedAssetNames = useMemo(() => {
-    if (selectedIds.size === 0) {
-      return [] as string[];
-    }
-
-    const selectedSet = selectedIds;
-    return rows.filter((row) => selectedSet.has(row.id)).map((row) => row.name);
-  }, [rows, selectedIds]);
-
-  const selectedCount = selectedAssetNames.length;
-  const selectedAssetIds = useMemo(
-    () => Array.from(selectedIds.values()),
-    [selectedIds],
-  );
+  const selectedAssetIds = useMemo(() => Array.from(selectedIds.values()), [selectedIds]);
+  const selectedCount = rows.filter((row) => selectedIds.has(row.id)).length;
   const printHref = useMemo(() => {
-    if (selectedAssetIds.length === 0) {
-      return "/labels/print";
-    }
-
-    const params = new URLSearchParams({
-      assetIds: selectedAssetIds.join(","),
-    });
+    if (selectedAssetIds.length === 0) return "/labels/print";
+    const params = new URLSearchParams({ assetIds: selectedAssetIds.join(",") });
     return `/labels/print?${params.toString()}`;
   }, [selectedAssetIds]);
 
+  const overview = hydrated ? overviewQuery.data : undefined;
+  const counts = overview?.statusCounts;
+  const total = overview?.totalAssets;
+  const subline = overview
+    ? [
+        `${overview.statusCounts.active} active`,
+        overview.statusCounts.under_repair > 0
+          ? `${overview.statusCounts.under_repair} under repair`
+          : null,
+        overview.serviceSchedulingEnabled && overview.overdueServiceCount > 0
+          ? `${overview.overdueServiceCount} overdue`
+          : null,
+      ]
+        .filter(Boolean)
+        .join(" · ")
+    : " ";
+
+  const tabs: { value: AssetStatus | null; label: string; count?: number }[] = [
+    { value: null, label: "All" },
+    ...ASSET_STATUS_OPTIONS.map((status) => ({
+      value: status,
+      label: ASSET_STATUS_LABELS[status],
+      count: counts?.[status],
+    })),
+  ];
+
   return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h2 className="text-lg font-semibold tracking-tight">
-            Asset inventory
-          </h2>
-          <p className="text-sm text-muted-foreground">
-            Filter and manage your assets from a single table view.
-          </p>
-        </div>
+    <div>
+      <PageHeader
+        title="Assets"
+        count={total}
+        description={subline}
+        className="max-md:hidden"
+        actions={
+          <>
+            <Button asChild variant="secondary">
+              <Link href={printHref}>
+                <Printer />
+                Print labels…
+              </Link>
+            </Button>
+            <Button asChild>
+              <Link href="/assets/new">
+                <Plus />
+                New asset…
+              </Link>
+            </Button>
+          </>
+        }
+      />
+      {total !== undefined ? <MobileTitleCount count={total} /> : null}
 
-        <Button asChild className="cursor-pointer">
-          <Link href="/assets/new">
-            <Plus className="h-4 w-4" />
-            Add asset
-          </Link>
-        </Button>
-      </div>
+      <nav aria-label="Status" className="mb-5 flex gap-0.5 overflow-x-auto max-md:hidden">
+        {tabs.map((tab) => {
+          const active = filters.status === tab.value;
+          return (
+            <button
+              key={tab.label}
+              type="button"
+              aria-current={active ? "page" : undefined}
+              onClick={() => updateFilters({ ...filters, status: tab.value })}
+              className={cn(
+                "inline-flex cursor-pointer items-center gap-[7px] border-b-[3px] border-transparent px-3 pt-2 pb-2.5 text-sm font-medium whitespace-nowrap text-ink-2 hover:text-foreground",
+                active && "border-amber-ink font-semibold text-foreground",
+              )}
+            >
+              {tab.label}
+              {tab.count !== undefined ? (
+                <b className={cn("font-mono text-[13px] font-medium", active ? "text-foreground" : "text-muted-foreground")}>
+                  {tab.count}
+                </b>
+              ) : null}
+            </button>
+          );
+        })}
+      </nav>
 
-      {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: [],
-              });
-            });
-          }}
-        />
+      {isPhone ? (
+        <>
+          <AssetFiltersMobile
+            options={options}
+            search={searchInput}
+            filters={filters}
+            sortBy={sortBy}
+            sortDirection={sortDirection}
+            onSearchChange={(value) => startTransition(() => setSearchInput(value))}
+            onFiltersChange={updateFilters}
+            onSortChange={(nextSortBy, nextDirection) => {
+              setSortBy(nextSortBy);
+              setSortDirection(nextDirection);
+            }}
+            onReset={resetFilters}
+          />
+          {!hintDismissed && rows.length > 0 ? (
+            <div className="-mt-1.5 mb-2.5 flex items-center justify-between px-0.5 text-[13px] text-muted-foreground">
+              <span>Press and hold an asset for quick actions.</span>
+              <button
+                type="button"
+                aria-label="Dismiss"
+                onClick={() => {
+                  window.localStorage.setItem(HINT_KEY, "1");
+                  setHintDismissedNow(true);
+                }}
+                className="grid size-7 cursor-pointer place-items-center"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+          ) : null}
+        </>
       ) : (
-        <AssetFiltersMobile
+        <AssetFilters
           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: [],
-              });
-            });
-          }}
+          onSearchChange={(value) => startTransition(() => setSearchInput(value))}
+          onFiltersChange={updateFilters}
+          onReset={resetFilters}
         />
       )}
 
       {showEmptyState ? (
         <EmptyState
           icon={Package}
-          title="No assets found"
-          description="Get started by adding your first asset."
+          title="No assets yet."
+          description="Add your first asset and print its label."
           action={
-            <Button asChild className="cursor-pointer">
+            <Button asChild>
               <Link href="/assets/new">
-                <Plus className="h-4 w-4" />
-                Add asset
+                <Plus />
+                New asset…
               </Link>
             </Button>
           }
         />
-      ) : null}
-
-      {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;
-            }
-
-            setSelectedIds(new Set(rows.map((row) => row.id)));
-          }}
-          onRowOpen={(assetId) => router.push(`/assets/${assetId}`)}
-          onRowEdit={(assetId) => router.push(`/assets/${assetId}/edit`)}
-        />
+      ) : isPhone ? (
+        <>
+          <AssetCardList rows={phoneRows} loading={loading} />
+          {rows.length > 0 ? (
+            <div className="mt-3 space-y-2.5 text-center text-sm text-ink-2">
+              <div>
+                1 to {phoneRows.length} of {rows.length}
+              </div>
+              {phoneRows.length < rows.length ? (
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="w-full"
+                  onClick={() => setPhoneVisible((n) => n + PAGE_SIZE)}
+                >
+                  Show {Math.min(PAGE_SIZE, rows.length - phoneRows.length)} more
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </>
       ) : (
-        <AssetCardList rows={rows} loading={loading} />
+        <div className="overflow-hidden rounded-md border border-border bg-card">
+          <AssetTable
+            rows={pageRows}
+            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) => {
+              setSelectedIds((prev) => {
+                const next = new Set(prev);
+                for (const row of pageRows) {
+                  if (checked) next.add(row.id);
+                  else next.delete(row.id);
+                }
+                return next;
+              });
+            }}
+            onRowOpen={(assetId) => router.push(`/assets/${assetId}`)}
+            onRowEdit={(assetId) => router.push(`/assets/${assetId}/edit`)}
+          />
+          {rows.length > 0 ? (
+            <div className="flex items-center gap-4 border-t border-border px-3.5 py-3 text-[13px] text-ink-2">
+              <span>
+                {(currentPage - 1) * PAGE_SIZE + 1} to {Math.min(currentPage * PAGE_SIZE, rows.length)} of {rows.length}
+              </span>
+              {pageCount > 1 ? (
+                <div className="ml-auto flex items-center gap-1">
+                  <button
+                    type="button"
+                    aria-label="Previous page"
+                    disabled={currentPage === 1}
+                    onClick={() => setPage(currentPage - 1)}
+                    className="grid size-8 cursor-pointer place-items-center rounded-md border-[1.5px] border-input bg-card text-foreground disabled:opacity-40"
+                  >
+                    <ChevronLeft className="size-4" />
+                  </button>
+                  {pageList(currentPage, pageCount).map((entry, index) =>
+                    entry === "gap" ? (
+                      <span key={`gap-${index}`} className="px-1 text-muted-foreground">
+                        …
+                      </span>
+                    ) : (
+                      <button
+                        key={entry}
+                        type="button"
+                        aria-current={entry === currentPage ? "page" : undefined}
+                        onClick={() => setPage(entry)}
+                        className={cn(
+                          "h-8 min-w-8 cursor-pointer px-2 text-[13px] font-semibold text-foreground",
+                          entry === currentPage && "font-bold shadow-[inset_0_-3px_0_var(--amber-ink)]",
+                        )}
+                      >
+                        {entry}
+                      </button>
+                    ),
+                  )}
+                  <button
+                    type="button"
+                    aria-label="Next page"
+                    disabled={currentPage === pageCount}
+                    onClick={() => setPage(currentPage + 1)}
+                    className="grid size-8 cursor-pointer place-items-center rounded-md border-[1.5px] border-input bg-card text-foreground disabled:opacity-40"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
       )}
 
-      {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">
-          <div className="text-sm">
-            <span className="font-medium">{selectedCount} selected</span>
-            <span className="ml-2 text-muted-foreground">
-              {selectedAssetNames.slice(0, 3).join(", ")}
-              {selectedAssetNames.length > 3
-                ? ` +${selectedAssetNames.length - 3} more`
-                : ""}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              asChild
-              type="button"
-              variant="outline"
-              size="sm"
-              className="cursor-pointer"
-            >
-              <Link href={printHref}>
-                <Printer className="h-4 w-4" />
-                Print labels
-              </Link>
-            </Button>
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="cursor-pointer"
-              onClick={() => setSelectedIds(new Set())}
-            >
-              <X className="h-4 w-4" />
-              Clear selection
-            </Button>
-          </div>
+      {selectedCount > 0 && !isPhone ? (
+        <div
+          role="region"
+          aria-label="Selection"
+          className="on-charcoal fixed bottom-5 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2 rounded-md bg-sidebar py-2 pr-2.5 pl-4 text-sm text-white shadow-[0_12px_32px_rgba(0,0,0,.28)] md:left-[calc(88px+(100vw-88px)/2)] lg:left-[calc(252px+(100vw-252px)/2)]"
+        >
+          <b className="mr-1 font-semibold">{selectedCount} selected</b>
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            className="border-white bg-transparent text-white hover:bg-sidebar-accent"
+          >
+            <Link href={printHref}>
+              <Printer />
+              Print labels…
+            </Link>
+          </Button>
+          <button
+            type="button"
+            aria-label="Clear selection"
+            onClick={() => setSelectedIds(new Set())}
+            className="grid size-8 cursor-pointer place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent"
+          >
+            <X className="size-4" />
+          </button>
         </div>
       ) : null}
     </div>
diff --git a/src/components/assets/service-schedule-fields.tsx b/src/components/assets/service-schedule-fields.tsx
index 5ca073f..ff4f3e4 100644
--- a/src/components/assets/service-schedule-fields.tsx
+++ b/src/components/assets/service-schedule-fields.tsx
@@ -6,6 +6,8 @@ import {
   type ServiceIntervalUnit,
   type ServiceScheduleDraft,
 } from "@/components/assets/types";
+import { Input } from "@/components/ui/input";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 
 type ParsedServiceSchedule =
   | {
@@ -156,27 +158,48 @@ export function ServiceScheduleFields({
   onChange: (next: ServiceScheduleDraft) => void;
   onClear: () => void;
 }) {
+  const unitSelect =
+    "h-9 cursor-pointer rounded-md border-[1.5px] border-input bg-card px-2.5 text-sm appearance-none bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2714%27%20height=%2714%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%234e524b%27%20stroke-width=%272.5%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27m6%209%206%206%206-6%27/%3E%3C/svg%3E')] bg-[length:14px] bg-[position:right_10px_center] bg-no-repeat pr-8 font-medium text-foreground outline-none focus-visible:border-foreground disabled:cursor-not-allowed disabled:opacity-50";
+  const hasSchedule =
+    Boolean(value.nextServiceDate.trim()) ||
+    Boolean(value.intervalValue.trim()) ||
+    Boolean(value.reminderLeadValue.trim());
+
   return (
-    <section className="space-y-3 rounded-lg border border-border/60 bg-muted/10 p-4">
-      <div className="space-y-1">
-        <h3 className="text-sm font-semibold tracking-tight">
-          Preventive schedule
-        </h3>
-        <p className="text-xs text-muted-foreground">
-          Optional. If you set any schedule field, all schedule fields are
-          required.
-        </p>
-      </div>
+    <section
+      id="service"
+      aria-labelledby="service-schedule-title"
+      className="scroll-mt-20"
+    >
+      <SheetHeading
+        title={<span id="service-schedule-title">Service schedule</span>}
+        aside={
+          hasSchedule ? (
+            <button
+              type="button"
+              className="cursor-pointer text-sm font-medium text-ink-2 underline underline-offset-[3px] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={disabled}
+              onClick={onClear}
+            >
+              Clear schedule
+            </button>
+          ) : null
+        }
+      />
+      <p className="px-0.5 pt-1.5 text-[13px] text-muted-foreground">
+        Optional. If you set any schedule field, all schedule fields are
+        required.
+      </p>
 
-      <div className="grid gap-4 lg:grid-cols-3">
-        <div className="space-y-1.5">
-          <label htmlFor="service-next-date" className="text-sm font-medium">
+      <div className="grid gap-x-6 gap-y-4 px-0.5 pt-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="space-y-1.5 sm:col-span-2 lg:col-span-1">
+          <label htmlFor="service-next-date" className="text-sm font-semibold">
             Next service date
           </label>
-          <input
+          <Input
             id="service-next-date"
             type="date"
-            className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+            className="w-full"
             value={value.nextServiceDate}
             disabled={disabled}
             onChange={(event) =>
@@ -186,7 +209,7 @@ export function ServiceScheduleFields({
               })
             }
           />
-          <p className="text-xs text-muted-foreground">
+          <p className="text-[13px] text-muted-foreground">
             Selecting today means service now, and the next due date is
             auto-shifted by interval on save.
           </p>
@@ -195,17 +218,18 @@ export function ServiceScheduleFields({
         <div className="space-y-1.5">
           <label
             htmlFor="service-interval-value"
-            className="text-sm font-medium"
+            className="text-sm font-semibold"
           >
             Interval
           </label>
-          <div className="grid grid-cols-[1fr_auto] gap-2">
-            <input
+          <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+            <Input
               id="service-interval-value"
               type="number"
+              inputMode="numeric"
               min={1}
               step={1}
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+              placeholder="6"
               value={value.intervalValue}
               disabled={disabled}
               onChange={(event) =>
@@ -216,7 +240,8 @@ export function ServiceScheduleFields({
               }
             />
             <select
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+              aria-label="Interval unit"
+              className={unitSelect}
               value={value.intervalUnit}
               disabled={disabled}
               onChange={(event) =>
@@ -238,17 +263,18 @@ export function ServiceScheduleFields({
         <div className="space-y-1.5">
           <label
             htmlFor="service-reminder-value"
-            className="text-sm font-medium"
+            className="text-sm font-semibold"
           >
             Reminder lead
           </label>
-          <div className="grid grid-cols-[1fr_auto] gap-2">
-            <input
+          <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-2">
+            <Input
               id="service-reminder-value"
               type="number"
+              inputMode="numeric"
               min={0}
               step={1}
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+              placeholder="1"
               value={value.reminderLeadValue}
               disabled={disabled}
               onChange={(event) =>
@@ -259,7 +285,8 @@ export function ServiceScheduleFields({
               }
             />
             <select
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+              aria-label="Reminder unit"
+              className={unitSelect}
               value={value.reminderLeadUnit}
               disabled={disabled}
               onChange={(event) =>
@@ -278,15 +305,6 @@ export function ServiceScheduleFields({
           </div>
         </div>
       </div>
-
-      <button
-        type="button"
-        className="text-xs font-medium text-muted-foreground underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-60"
-        disabled={disabled}
-        onClick={onClear}
-      >
-        Clear schedule
-      </button>
     </section>
   );
 }
diff --git a/src/components/assets/status-badge.tsx b/src/components/assets/status-badge.tsx
index 23af5bc..226e4a4 100644
--- a/src/components/assets/status-badge.tsx
+++ b/src/components/assets/status-badge.tsx
@@ -1,39 +1,18 @@
-import { Badge } from "@/components/ui/badge";
-import {
-  ASSET_STATUS_LABELS,
-  type AssetStatus,
-} from "@/components/assets/types";
-import { cn } from "@/lib/utils";
-
-const STATUS_CLASS_NAME: Record<AssetStatus, string> = {
-  active:
-    "border-emerald-300/70 bg-emerald-100 text-emerald-900 dark:border-emerald-400/30 dark:bg-emerald-500/15 dark:text-emerald-200",
-  in_storage:
-    "border-amber-300/70 bg-amber-100 text-amber-900 dark:border-amber-400/30 dark:bg-amber-500/15 dark:text-amber-200",
-  under_repair:
-    "border-orange-300/70 bg-orange-100 text-orange-900 dark:border-orange-400/30 dark:bg-orange-500/15 dark:text-orange-200",
-  retired:
-    "border-stone-300/70 bg-stone-100 text-stone-700 dark:border-stone-400/30 dark:bg-stone-500/15 dark:text-stone-300",
-  disposed:
-    "border-rose-300/70 bg-rose-100 text-rose-900 dark:border-rose-400/30 dark:bg-rose-500/15 dark:text-rose-200",
-};
+import { StatusText } from "@/components/ui/status-text";
+import type { AssetStatus } from "@/components/assets/types";
 
+/*
+  Kept for the many call sites that import StatusBadge. The Workshop rule is
+  status colour only on exceptions, so this is the status text, not a pill.
+*/
 export function StatusBadge({
   status,
   className,
+  inTable,
 }: {
   status: AssetStatus;
   className?: string;
+  inTable?: boolean;
 }) {
-  return (
-    <Badge
-      className={cn(
-        "border text-xs font-medium",
-        STATUS_CLASS_NAME[status],
-        className,
-      )}
-    >
-      {ASSET_STATUS_LABELS[status]}
-    </Badge>
-  );
+  return <StatusText status={status} className={className} inTable={inTable} />;
 }
diff --git a/src/components/attachments/attachment-card.tsx b/src/components/attachments/attachment-card.tsx
index 1d72010..516a1b8 100644
--- a/src/components/attachments/attachment-card.tsx
+++ b/src/components/attachments/attachment-card.tsx
@@ -10,7 +10,6 @@ import {
   Trash2,
 } from "lucide-react";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { AttachmentItem } from "@/components/attachments/types";
 import { formatDateFromTimestamp } from "@/lib/date-format";
@@ -30,46 +29,37 @@ function formatSize(size: number | null) {
 
 function FileKindIcon({ fileKind }: { fileKind: AttachmentItem["fileKind"] }) {
   if (fileKind === "image") {
-    return <FileImage className="size-5 text-muted-foreground" />;
+    return <FileImage className="size-5 text-ink-2" />;
   }
 
   if (fileKind === "pdf") {
-    return <FileText className="size-5 text-muted-foreground" />;
+    return <FileText className="size-5 text-ink-2" />;
   }
 
-  return <FileSpreadsheet className="size-5 text-muted-foreground" />;
+  return <FileSpreadsheet className="size-5 text-ink-2" />;
 }
 
-function StatusBadge({ status }: { status: AttachmentItem["status"] }) {
-  if (status === "ready") {
-    return (
-      <Badge className="border-emerald-300/70 bg-emerald-100 text-emerald-900 dark:border-emerald-400/30 dark:bg-emerald-500/15 dark:text-emerald-200">
-        Ready
-      </Badge>
-    );
-  }
-
+/* Status colour only on exceptions: Failed is red, the rest stay quiet. */
+function StatusLabel({ status }: { status: AttachmentItem["status"] }) {
   if (status === "failed") {
     return (
-      <Badge className="border-destructive/50 bg-destructive/10 text-destructive">
+      <span className="inline-flex items-center gap-1.5 font-medium text-destructive">
+        <span
+          aria-hidden="true"
+          className="size-[9px] shrink-0 rounded-xs bg-current"
+        />
         Failed
-      </Badge>
-    );
-  }
-
-  if (status === "processing") {
-    return (
-      <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">
-        Processing
-      </Badge>
+      </span>
     );
   }
 
-  return (
-    <Badge className="border-slate-300/70 bg-slate-100 text-slate-900 dark:border-slate-400/30 dark:bg-slate-500/15 dark:text-slate-200">
-      Pending
-    </Badge>
-  );
+  const label =
+    status === "ready"
+      ? "Ready"
+      : status === "processing"
+        ? "Processing"
+        : "Pending";
+  return <span className="text-muted-foreground">{label}</span>;
 }
 
 export function AttachmentCard({
@@ -91,54 +81,56 @@ export function AttachmentCard({
 
   return (
     <>
-      <article className="rounded-lg border border-border/60 bg-background p-3">
-        <div className="flex gap-3">
-          <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-md border border-border/60 bg-muted/20">
-            {canPreviewImage ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                src={attachment.url ?? undefined}
-                alt={attachment.fileName}
-                className="h-full w-full object-cover"
-              />
-            ) : (
-              <div className="flex h-full w-full items-center justify-center">
-                <FileKindIcon fileKind={attachment.fileKind} />
-              </div>
-            )}
-          </div>
-
-          <div className="min-w-0 flex-1 space-y-1">
-            <div className="flex flex-wrap items-center gap-2">
-              <p className="truncate text-sm font-medium">
-                {attachment.fileName}
-              </p>
-              <StatusBadge status={attachment.status} />
+      <article className="flex flex-wrap items-center gap-x-3 gap-y-2 py-2.5">
+        <div className="relative size-12 shrink-0 overflow-hidden rounded-xs border border-border bg-secondary">
+          {canPreviewImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={attachment.url ?? undefined}
+              alt={attachment.fileName}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <FileKindIcon fileKind={attachment.fileKind} />
             </div>
-            <p className="text-xs text-muted-foreground">
-              {attachment.fileType} •{" "}
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1 basis-40">
+          <p className="truncate text-sm font-medium text-foreground">
+            {attachment.fileName}
+          </p>
+          <p className="flex flex-wrap items-center gap-x-1.5 text-[13px] text-ink-2">
+            <span>
               {formatSize(
                 attachment.fileSizeOptimized ?? attachment.fileSizeOriginal,
               )}
-            </p>
-            <p className="text-xs text-muted-foreground">
+            </span>
+            <span aria-hidden="true" className="text-muted-foreground">
+              ·
+            </span>
+            <span>
               Uploaded{" "}
               {formatDateFromTimestamp(attachment.uploadedAt, dateFormat)}
+            </span>
+            <span aria-hidden="true" className="text-muted-foreground">
+              ·
+            </span>
+            <StatusLabel status={attachment.status} />
+          </p>
+          {attachment.status === "failed" && attachment.optimizationError ? (
+            <p className="text-[13px] text-destructive">
+              {attachment.optimizationError}
             </p>
-            {attachment.status === "failed" && attachment.optimizationError ? (
-              <p className="text-xs text-destructive">
-                {attachment.optimizationError}
-              </p>
-            ) : null}
-          </div>
+          ) : null}
         </div>
 
-        <div className="mt-3 flex flex-wrap items-center gap-2">
+        <div className="flex shrink-0 items-center gap-1.5 max-sm:w-full max-sm:pl-[60px]">
           <Button
             type="button"
             variant="outline"
             size="xs"
-            className="cursor-pointer"
             asChild
             disabled={!attachment.url}
           >
@@ -147,7 +139,7 @@ export function AttachmentCard({
               target="_blank"
               rel="noreferrer"
             >
-              <Download className="size-3.5" />
+              <Download />
               Download
             </a>
           </Button>
@@ -157,35 +149,34 @@ export function AttachmentCard({
               type="button"
               variant="outline"
               size="xs"
-              className="cursor-pointer"
               disabled={retrying}
               onClick={() => {
                 void onRetry(attachment.id);
               }}
             >
-              <RefreshCcw className="size-3.5" />
+              <RefreshCcw />
               Retry
             </Button>
           ) : null}
 
           <Button
             type="button"
-            variant="destructive"
-            size="xs"
-            className="cursor-pointer"
+            variant="ghost"
+            size="icon-xs"
             disabled={deleting}
             onClick={() => setConfirmOpen(true)}
+            aria-label={`Delete ${attachment.fileName}…`}
+            title="Delete…"
           >
-            <Trash2 className="size-3.5" />
-            Delete
+            <Trash2 />
           </Button>
         </div>
       </article>
 
       <ConfirmDialog
         open={confirmOpen}
-        title="Delete attachment"
-        description={`Delete ${attachment.fileName}?`}
+        title="Delete attachment?"
+        description={`${attachment.fileName} is deleted from this asset.`}
         confirmLabel="Delete attachment"
         busy={deleting}
         onConfirm={() => {
diff --git a/src/components/attachments/attachment-list.tsx b/src/components/attachments/attachment-list.tsx
index 3205f3e..f349159 100644
--- a/src/components/attachments/attachment-list.tsx
+++ b/src/components/attachments/attachment-list.tsx
@@ -40,71 +40,68 @@ export function AttachmentList({ assetId }: { assetId: string }) {
 
   if (attachmentsQuery.isPending) {
     return (
-      <div className="rounded-lg border border-border/60 bg-background p-4 text-sm text-muted-foreground">
+      <p className="py-3 text-sm text-muted-foreground">
         Loading attachments...
-      </div>
+      </p>
     );
   }
 
   if (rows.length === 0) {
-    return (
-      <div className="rounded-lg border border-dashed border-border/70 bg-muted/10 p-5 text-sm text-muted-foreground">
-        No attachments yet.
-      </div>
-    );
+    return <p className="py-3 text-sm text-ink-2">No attachments yet.</p>;
   }
 
   return (
-    <div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
+    <ul className="border-t border-border">
       {rows.map((attachment) => (
-        <AttachmentCard
-          key={attachment.id}
-          attachment={attachment}
-          deleting={deletingAttachmentId === attachment.id}
-          retrying={retryingAttachmentId === attachment.id}
-          onDelete={async (attachmentId) => {
-            setDeletingAttachmentId(attachmentId);
-            try {
-              await deleteMutation.mutateAsync(attachmentId);
-              void queryClient.invalidateQueries({
-                queryKey: ["attachments", assetId],
-              });
-              void queryClient.invalidateQueries({
-                queryKey: ["storage-usage"],
-              });
-              toast.success("Attachment deleted");
-            } catch (error) {
-              toast.error(
-                getAttachmentUiErrorMessage(
-                  error,
-                  "Unable to delete attachment",
-                ),
-              );
-            } finally {
-              setDeletingAttachmentId(null);
-            }
-          }}
-          onRetry={async (attachmentId) => {
-            setRetryingAttachmentId(attachmentId);
-            try {
-              await retryMutation.mutateAsync(attachmentId);
-              void queryClient.invalidateQueries({
-                queryKey: ["attachments", assetId],
-              });
-              toast.success("Attachment retry queued");
-            } catch (error) {
-              toast.error(
-                getAttachmentUiErrorMessage(
-                  error,
-                  "Unable to retry attachment",
-                ),
-              );
-            } finally {
-              setRetryingAttachmentId(null);
-            }
-          }}
-        />
+        <li key={attachment.id} className="border-b border-border">
+          <AttachmentCard
+            attachment={attachment}
+            deleting={deletingAttachmentId === attachment.id}
+            retrying={retryingAttachmentId === attachment.id}
+            onDelete={async (attachmentId) => {
+              setDeletingAttachmentId(attachmentId);
+              try {
+                await deleteMutation.mutateAsync(attachmentId);
+                void queryClient.invalidateQueries({
+                  queryKey: ["attachments", assetId],
+                });
+                void queryClient.invalidateQueries({
+                  queryKey: ["storage-usage"],
+                });
+                toast.success("Attachment deleted");
+              } catch (error) {
+                toast.error(
+                  getAttachmentUiErrorMessage(
+                    error,
+                    "Unable to delete attachment",
+                  ),
+                );
+              } finally {
+                setDeletingAttachmentId(null);
+              }
+            }}
+            onRetry={async (attachmentId) => {
+              setRetryingAttachmentId(attachmentId);
+              try {
+                await retryMutation.mutateAsync(attachmentId);
+                void queryClient.invalidateQueries({
+                  queryKey: ["attachments", assetId],
+                });
+                toast.success("Attachment retry queued");
+              } catch (error) {
+                toast.error(
+                  getAttachmentUiErrorMessage(
+                    error,
+                    "Unable to retry attachment",
+                  ),
+                );
+              } finally {
+                setRetryingAttachmentId(null);
+              }
+            }}
+          />
+        </li>
       ))}
-    </div>
+    </ul>
   );
 }
diff --git a/src/components/attachments/file-upload-zone.tsx b/src/components/attachments/file-upload-zone.tsx
index 4edae61..49d93d1 100644
--- a/src/components/attachments/file-upload-zone.tsx
+++ b/src/components/attachments/file-upload-zone.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { FileUp, Loader2, XCircle } from "lucide-react";
+import { Loader2, Paperclip, XCircle } from "lucide-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { getAttachmentUiErrorMessage } from "@/components/attachments/error-messages";
@@ -404,11 +404,11 @@ export function FileUploadZone({ assetId }: { assetId: string }) {
   return (
     <div className="space-y-3">
       <div
+        data-testid="file-upload-drop"
         className={cn(
-          "rounded-xl border-2 border-dashed p-4 transition-colors",
-          dragActive
-            ? "border-primary/70 bg-primary/5"
-            : "border-border/60 bg-muted/10 hover:bg-muted/15",
+          "dash-slot rounded-md transition-colors",
+          dragActive &&
+            "bg-secondary outline-[1.5px] outline-foreground outline-solid",
         )}
         onDragOver={(event) => {
           event.preventDefault();
@@ -443,33 +443,44 @@ export function FileUploadZone({ assetId }: { assetId: string }) {
 
         <button
           type="button"
-          className="flex w-full cursor-pointer flex-col items-center gap-2 rounded-lg px-3 py-4 text-center"
+          className="flex w-full cursor-pointer items-center gap-3 rounded-md px-3.5 py-3 text-left hover:bg-secondary/60"
           onClick={() => inputRef.current?.click()}
         >
-          <FileUp className="size-5 text-muted-foreground" />
-          <p className="text-sm font-medium">
-            Drag and drop files here, or click to browse
-          </p>
-          <p className="text-xs text-muted-foreground">
-            Images, PDFs, and Office files. Max 25 MB per file.
-          </p>
+          <Paperclip
+            className="size-4 shrink-0 text-ink-2"
+            aria-hidden="true"
+          />
+          <span className="min-w-0">
+            <span className="block text-sm font-medium text-foreground">
+              Add files or photos…
+            </span>
+            <span className="block text-[13px] text-muted-foreground">
+              <span className="max-sm:hidden">Or drop them here. </span>
+              Images, PDFs, and Office files. Max 25 MB per file.
+            </span>
+          </span>
         </button>
       </div>
 
       {storageUsage?.limitBytes != null ? (
         <div className="space-y-1">
-          <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <div className="flex items-center justify-between text-[13px] text-ink-2">
             <span>Storage</span>
-            <span>
+            <span
+              className={cn(
+                "font-mono font-medium",
+                quotaExceeded && "text-destructive",
+              )}
+            >
               {formatStorageSize(storageUsage.usedBytes)} /{" "}
               {formatStorageSize(storageUsage.limitBytes)}
             </span>
           </div>
-          <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+          <div className="h-1.5 overflow-hidden bg-border">
             <div
               className={cn(
                 "h-full transition-[width] duration-200",
-                quotaExceeded ? "bg-destructive" : "bg-primary",
+                quotaExceeded ? "bg-destructive" : "bg-foreground",
               )}
               style={{
                 width: `${Math.min(100, (storageUsage.usedBytes / storageUsage.limitBytes) * 100)}%`,
@@ -480,12 +491,23 @@ export function FileUploadZone({ assetId }: { assetId: string }) {
       ) : null}
 
       {queueJobs.length > 0 ? (
-        <div className="space-y-2 rounded-lg border border-border/60 bg-background p-3">
+        <ul className="border-t border-border">
           {queueJobs.map((job) => (
-            <div key={job.id} className="space-y-1">
+            <li
+              key={job.id}
+              className="space-y-1.5 border-b border-border py-2"
+            >
               <div className="flex items-center justify-between gap-2">
-                <p className="truncate text-xs font-medium">{job.fileName}</p>
-                <span className="text-[11px] text-muted-foreground">
+                <p className="truncate text-[13px] font-medium text-foreground">
+                  {job.fileName}
+                </p>
+                <span
+                  className={cn(
+                    "shrink-0 text-[13px] text-muted-foreground",
+                    job.status === "uploading" && "font-mono",
+                    job.status === "error" && "font-medium text-destructive",
+                  )}
+                >
                   {job.status === "uploading" && `${job.progress}%`}
                   {job.status === "registering" && "Registering"}
                   {job.status === "queued" && "Queued for optimization"}
@@ -494,9 +516,9 @@ export function FileUploadZone({ assetId }: { assetId: string }) {
                 </span>
               </div>
               {job.status === "uploading" || job.status === "registering" ? (
-                <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                <div className="h-1 overflow-hidden bg-border">
                   <div
-                    className="h-full bg-primary transition-[width] duration-200"
+                    className="h-full bg-foreground transition-[width] duration-200"
                     style={{
                       width: `${Math.min(100, Math.max(0, job.progress))}%`,
                     }}
@@ -504,18 +526,18 @@ export function FileUploadZone({ assetId }: { assetId: string }) {
                 </div>
               ) : null}
               {job.status === "error" && job.error ? (
-                <p className="inline-flex items-center gap-1 text-[11px] text-destructive">
+                <p className="inline-flex items-center gap-1 text-[13px] text-destructive">
                   <XCircle className="size-3.5" />
                   {job.error}
                 </p>
               ) : null}
-            </div>
+            </li>
           ))}
-        </div>
+        </ul>
       ) : null}
 
       {activeJobs.length > 0 ? (
-        <p className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+        <p className="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground">
           <Loader2 className="size-3.5 animate-spin" />
           Uploading {activeJobs.length} file{activeJobs.length === 1 ? "" : "s"}
           ...
diff --git a/src/components/auth/auth-panel.tsx b/src/components/auth/auth-panel.tsx
index 97135d5..cd480f8 100644
--- a/src/components/auth/auth-panel.tsx
+++ b/src/components/auth/auth-panel.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 type AuthPanelProps = {
   title: string;
   description: string;
+  eyebrow?: string;
   children: ReactNode;
   footer?: {
     prompt: string;
@@ -12,29 +13,32 @@ type AuthPanelProps = {
   };
 };
 
+/* The form block of the auth split screen: no card, it sits on the concrete. */
 export function AuthPanel({
   title,
   description,
+  eyebrow,
   children,
   footer,
 }: AuthPanelProps) {
   return (
-    <div className="w-full max-w-md rounded-xl border border-border/70 bg-background/95 p-6 shadow-sm backdrop-blur">
-      <div className="mb-5 space-y-1">
-        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+    <div className="w-full">
+      <div className="mb-6">
+        {eyebrow ? <div className="eyebrow mb-1.5">{eyebrow}</div> : null}
+        <h1 className="wide text-[32px] leading-[1.05] font-bold text-foreground">
           {title}
         </h1>
-        <p className="text-sm leading-6 text-muted-foreground">{description}</p>
+        <p className="mt-2 text-sm text-ink-2">{description}</p>
       </div>
 
       {children}
 
       {footer ? (
-        <p className="mt-5 text-sm text-muted-foreground">
+        <p className="mt-5 text-sm text-ink-2">
           {footer.prompt}{" "}
           <Link
             href={footer.href}
-            className="font-medium text-foreground underline underline-offset-4"
+            className="font-semibold text-foreground underline underline-offset-[3px]"
           >
             {footer.linkLabel}
           </Link>
diff --git a/src/components/auth/auth-shell.tsx b/src/components/auth/auth-shell.tsx
new file mode 100644
index 0000000..9be5c49
--- /dev/null
+++ b/src/components/auth/auth-shell.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { StowageWordmark } from "@/components/brand/stowage-mark";
+import { PrintedLabel } from "@/components/labels/printed-label";
+
+const DOCS_URL = "https://github.com/kroqdotdev/stowage#readme";
+const LICENCE_URL = "https://github.com/kroqdotdev/stowage/blob/main/LICENSE";
+
+function subscribe() {
+  return () => {};
+}
+
+function useHost() {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.location.host,
+    () => "",
+  );
+}
+
+/*
+  The auth split screen. A charcoal plate on the left holds one group: the
+  wordmark, a real printed label rendered by the label engine, and the
+  tagline. The form column on the right ends in a footer pinned to its foot:
+  host · version, then Docs and the licence.
+*/
+export function AuthShell({ children }: { children: React.ReactNode }) {
+  const host = useHost();
+  const version = process.env.NEXT_PUBLIC_APP_VERSION ?? "";
+  const origin = host ? `https://${host}` : "https://stowage.local";
+
+  return (
+    <div className="grid min-h-dvh grid-cols-1 bg-background md:grid-cols-[58fr_42fr]">
+      <section className="on-charcoal relative flex flex-col items-center justify-center overflow-hidden bg-sidebar px-5 pt-6 pb-7 text-white md:min-h-dvh md:px-12 md:py-11">
+        <div className="w-full max-w-[600px] md:-mt-36">
+          <StowageWordmark size={28} className="mb-8 text-xl md:mb-10" />
+          <PrintedLabel
+            tag="ST-0001"
+            name="Cordless drill, 18 V"
+            topLeft="Stowage"
+            topRight="Shelf A"
+            url={`${origin}/assets/ST-0001`}
+            className="mb-8 mr-[5px] w-[calc(100%-5px)] md:mr-0 md:mb-[34px] md:w-full"
+          />
+          <h2 className="wide text-2xl leading-[1.02] font-bold tracking-[-0.02em] text-balance md:text-[44px]">
+            Every part accounted for.
+          </h2>
+          <p className="mt-2 max-w-[46ch] text-sm leading-normal text-[#c9ccc5] md:mt-4 md:text-base">
+            <span className="hidden md:inline">
+              Asset tracking for small teams.{" "}
+            </span>
+            Tag it, shelve it, service it on time. Runs on your own server.
+          </p>
+        </div>
+        <div className="absolute bottom-6 left-[max(48px,calc(50%-300px))] hidden font-mono text-[13px] font-medium tracking-[0.04em] text-sidebar-muted md:block">
+          Code 128 · Data Matrix
+        </div>
+      </section>
+
+      <section className="flex flex-col items-center px-5 py-7 md:px-12 md:py-9">
+        <div className="my-auto w-full max-w-[440px] md:mt-[18vh] md:mb-12">
+          {children}
+        </div>
+        <footer className="mt-8 flex w-full max-w-[440px] flex-wrap gap-x-4 gap-y-2 border-t border-line-2 pt-3.5 text-[13px] text-muted-foreground md:mt-auto">
+          <span className="mr-auto font-mono font-medium tracking-[0.04em] max-md:basis-full">
+            {host}
+            {host && version ? " · " : ""}
+            {version ? `v${version}` : ""}
+          </span>
+          <a
+            href={DOCS_URL}
+            className="underline underline-offset-[3px] hover:text-foreground"
+          >
+            Docs
+          </a>
+          <span aria-hidden="true" className="md:hidden">
+            ·
+          </span>
+          <a
+            href={LICENCE_URL}
+            className="underline underline-offset-[3px] hover:text-foreground"
+          >
+            MIT licence
+          </a>
+        </footer>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index a9ced26..e1f8b41 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useQueryClient } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
-import Link from "next/link";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
@@ -15,7 +14,6 @@ import {
   useCurrentUser,
 } from "@/hooks/use-current-user";
 import { checkFirstRun, login } from "@/lib/api/auth";
-import { useQuery } from "@tanstack/react-query";
 
 export function LoginForm() {
   const router = useRouter();
@@ -31,6 +29,7 @@ export function LoginForm() {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -59,7 +58,7 @@ export function LoginForm() {
   return (
     <AuthPanel
       title="Sign in"
-      description="Use your email and password to access Stowage."
+      description="Use the account your admin set up for you."
       footer={
         firstRun
           ? {
@@ -70,9 +69,12 @@ export function LoginForm() {
           : undefined
       }
     >
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={onSubmit} className="space-y-4" noValidate={false}>
         <div className="space-y-1.5">
-          <label htmlFor="login-email" className="text-sm font-medium">
+          <label
+            htmlFor="login-email"
+            className="block text-[13px] font-semibold text-foreground"
+          >
             Email
           </label>
           <Input
@@ -82,67 +84,82 @@ export function LoginForm() {
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="you@example.com"
+            className="h-11"
             required
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="login-password" className="text-sm font-medium">
+          <label
+            htmlFor="login-password"
+            className="block text-[13px] font-semibold text-foreground"
+          >
             Password
           </label>
-          <Input
-            id="login-password"
-            type="password"
-            autoComplete="current-password"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            placeholder="Enter your password"
-            required
-          />
+          <div className="relative">
+            <Input
+              id="login-password"
+              type={showPassword ? "text" : "password"}
+              autoComplete="current-password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder="Enter your password"
+              className="h-11 pr-16"
+              aria-invalid={error ? true : undefined}
+              aria-describedby={error ? "login-error" : undefined}
+              required
+            />
+            <button
+              type="button"
+              aria-pressed={showPassword}
+              aria-label={showPassword ? "Hide password" : "Show password"}
+              onClick={() => setShowPassword((value) => !value)}
+              className="absolute top-1/2 right-1.5 h-8 -translate-y-1/2 cursor-pointer rounded-md px-2 font-mono text-[13px] font-medium tracking-[0.02em] text-ink-2 hover:text-foreground"
+            >
+              {showPassword ? "Hide" : "Show"}
+            </button>
+          </div>
+          {error ? (
+            <p
+              id="login-error"
+              role="alert"
+              className="flex items-start gap-1.5 pt-1 text-sm font-medium text-destructive"
+            >
+              <AlertTriangle className="mt-0.5 size-4 shrink-0" />
+              <span>{error}</span>
+            </p>
+          ) : null}
         </div>
 
-        {error ? (
-          <p
-            role="alert"
-            className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
-          >
-            {error}
-          </p>
-        ) : null}
-
         {!adminConfigReady ? (
           <p
             role="alert"
-            className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+            className="flex items-start gap-1.5 text-sm font-medium text-destructive"
           >
-            Server setup is incomplete. Set{" "}
-            <code>POCKETBASE_SUPERUSER_EMAIL</code> and{" "}
-            <code>POCKETBASE_SUPERUSER_PASSWORD</code> in your environment, then
-            restart the app.
+            <AlertTriangle className="mt-0.5 size-4 shrink-0" />
+            <span>
+              Server setup is incomplete. Set{" "}
+              <code className="font-mono text-[13px]">
+                POCKETBASE_SUPERUSER_EMAIL
+              </code>{" "}
+              and{" "}
+              <code className="font-mono text-[13px]">
+                POCKETBASE_SUPERUSER_PASSWORD
+              </code>{" "}
+              in your environment, then restart the app.
+            </span>
           </p>
         ) : null}
 
         <Button
           type="submit"
-          className="w-full cursor-pointer"
+          size="lg"
+          className="mt-2 w-full"
           disabled={submitting || isLoading || !adminConfigReady}
         >
           {submitting ? <Loader2 className="animate-spin" /> : null}
-          {submitting ? "Signing in..." : "Sign in"}
+          {submitting ? "Signing in…" : "Sign in"}
         </Button>
-
-        {firstRun ? (
-          <p className="text-center text-xs text-muted-foreground">
-            Setup is not complete yet. Go to{" "}
-            <Link
-              href="/setup"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              /setup
-            </Link>
-            .
-          </p>
-        ) : null}
       </form>
     </AuthPanel>
   );
diff --git a/src/components/auth/setup-form.tsx b/src/components/auth/setup-form.tsx
index 929ad38..06264ae 100644
--- a/src/components/auth/setup-form.tsx
+++ b/src/components/auth/setup-form.tsx
@@ -69,11 +69,11 @@ export function SetupForm() {
         description="Create the first administrator account to start using the app."
       >
         <div className="space-y-3">
-          <div className="h-9 animate-pulse rounded-md bg-muted" />
-          <div className="h-9 animate-pulse rounded-md bg-muted" />
-          <div className="h-9 animate-pulse rounded-md bg-muted" />
-          <div className="h-9 animate-pulse rounded-md bg-muted" />
-          <div className="h-9 animate-pulse rounded-md bg-muted" />
+          <div className="h-11 animate-pulse rounded-md bg-border" />
+          <div className="h-11 animate-pulse rounded-md bg-border" />
+          <div className="h-11 animate-pulse rounded-md bg-border" />
+          <div className="h-11 animate-pulse rounded-md bg-border" />
+          <div className="h-11 animate-pulse rounded-md bg-border" />
         </div>
       </AuthPanel>
     );
@@ -82,6 +82,7 @@ export function SetupForm() {
   return (
     <AuthPanel
       title="Set up Stowage"
+      eyebrow="First run"
       description="Create the first administrator account. You can add more users later in Settings."
       footer={{
         prompt: "Setup already complete?",
@@ -93,7 +94,7 @@ export function SetupForm() {
         {!adminConfigReady ? (
           <p
             role="alert"
-            className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+            className="text-sm font-medium text-destructive"
           >
             Server setup is incomplete. Set{" "}
             <code>POCKETBASE_SUPERUSER_EMAIL</code> and{" "}
@@ -103,7 +104,7 @@ export function SetupForm() {
         ) : null}
 
         <div className="space-y-1.5">
-          <label htmlFor="setup-name" className="text-sm font-medium">
+          <label htmlFor="setup-name" className="block text-[13px] font-semibold text-foreground">
             Full name
           </label>
           <Input
@@ -112,12 +113,13 @@ export function SetupForm() {
             value={name}
             onChange={(event) => setName(event.target.value)}
             placeholder="Alex Morgan"
+            className="h-11"
             required
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="setup-email" className="text-sm font-medium">
+          <label htmlFor="setup-email" className="block text-[13px] font-semibold text-foreground">
             Email
           </label>
           <Input
@@ -127,12 +129,13 @@ export function SetupForm() {
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             placeholder="admin@example.com"
+            className="h-11"
             required
           />
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="setup-password" className="text-sm font-medium">
+          <label htmlFor="setup-password" className="block text-[13px] font-semibold text-foreground">
             Password
           </label>
           <Input
@@ -142,6 +145,7 @@ export function SetupForm() {
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             placeholder="At least 8 characters"
+            className="h-11"
             required
           />
         </div>
@@ -149,7 +153,7 @@ export function SetupForm() {
         <div className="space-y-1.5">
           <label
             htmlFor="setup-password-confirm"
-            className="text-sm font-medium"
+            className="block text-[13px] font-semibold text-foreground"
           >
             Confirm password
           </label>
@@ -160,6 +164,7 @@ export function SetupForm() {
             value={confirmPassword}
             onChange={(event) => setConfirmPassword(event.target.value)}
             placeholder="Re-enter your password"
+            className="h-11"
             required
           />
         </div>
@@ -167,7 +172,7 @@ export function SetupForm() {
         {error ? (
           <p
             role="alert"
-            className="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+            className="text-sm font-medium text-destructive"
           >
             {error}
           </p>
@@ -175,11 +180,12 @@ export function SetupForm() {
 
         <Button
           type="submit"
-          className="w-full cursor-pointer"
+          size="lg"
+          className="mt-2 w-full"
           disabled={submitting || firstRun === false || !adminConfigReady}
         >
           {submitting ? <Loader2 className="animate-spin" /> : null}
-          {submitting ? "Creating account..." : "Create admin account"}
+          {submitting ? "Creating account…" : "Create admin account"}
         </Button>
       </form>
     </AuthPanel>
diff --git a/src/components/brand/stowage-mark.tsx b/src/components/brand/stowage-mark.tsx
new file mode 100644
index 0000000..8e462e2
--- /dev/null
+++ b/src/components/brand/stowage-mark.tsx
@@ -0,0 +1,61 @@
+/*
+  The Stowage mark: a crate with a label stuck on its corner. Simple geometry
+  that reads at 16px. `label` is the colour of the label (amber by default).
+*/
+export function StowageMark({
+  size = 24,
+  color = "currentColor",
+  label = "var(--color-amber)",
+  className,
+}: {
+  size?: number;
+  color?: string;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <rect
+        x="5.25"
+        y="7.25"
+        width="15.5"
+        height="14.5"
+        rx="2"
+        stroke={color}
+        strokeWidth="2.5"
+      />
+      <rect x="2" y="2.5" width="12" height="8" rx="1.2" fill={label} />
+      <path
+        d="M5 6.5h6"
+        stroke="#1F2220"
+        strokeOpacity=".35"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function StowageWordmark({
+  size = 24,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <span
+      className={`wide inline-flex items-center gap-2.5 font-bold text-white ${className ?? ""}`}
+    >
+      <StowageMark size={size} color="#fff" />
+      Stowage
+    </span>
+  );
+}
diff --git a/src/components/catalog/taxonomy-manager.tsx b/src/components/catalog/taxonomy-manager.tsx
index 719f6da..f3bef94 100644
--- a/src/components/catalog/taxonomy-manager.tsx
+++ b/src/components/catalog/taxonomy-manager.tsx
@@ -2,9 +2,16 @@
 
 import Link from "next/link";
 import React, { useMemo, useState } from "react";
-import { Loader2, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import {
+  Hash,
+  Layers,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trash2,
+} from "lucide-react";
 import { toast } from "sonner";
-import { ColorField } from "@/components/crud/color-field";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
 import { CrudModal } from "@/components/crud/modal";
@@ -13,10 +20,17 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Input } from "@/components/ui/input";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
+import { KeywordChip } from "@/components/ui/tag-chip";
 import { Textarea } from "@/components/ui/textarea";
+import { ApiRequestError } from "@/lib/api-client";
+import { cn } from "@/lib/utils";
 
 export type TaxonomyFormValues = {
   name: string;
@@ -52,13 +66,18 @@ function normalizeForm(
   };
 }
 
+// The server still requires a hex colour on every category and keyword, but
+// the Workshop design shows neither, so there is no picker: new rows get this
+// neutral grey and edits keep whatever colour is already stored.
+export const DEFAULT_TAXONOMY_COLOR = "#6B6F68";
+
 function createInitialForm(
   variant: "categories" | "tags",
   values?: Partial<TaxonomyFormValues>,
 ): TaxonomyFormValues {
   return {
     name: values?.name ?? "",
-    color: values?.color ?? "#EA580C",
+    color: values?.color ?? DEFAULT_TAXONOMY_COLOR,
     prefix: variant === "categories" ? (values?.prefix ?? "") : "",
     description: variant === "categories" ? (values?.description ?? "") : "",
   };
@@ -81,10 +100,12 @@ export function TaxonomyManager({
   onUpdate: (id: string, values: TaxonomyFormValues) => Promise<void>;
   onDelete: (id: string) => Promise<void>;
 }) {
-  const singular = variant === "categories" ? "category" : "tag";
-  const singularTitle = variant === "categories" ? "Category" : "Tag";
-  const pluralTitle = variant === "categories" ? "Categories" : "Tags";
-  const pluralLower = variant;
+  // User-facing copy calls free-form tags "keywords"; the printed asset ID
+  // is the tag.
+  const singular = variant === "categories" ? "category" : "keyword";
+  const singularTitle = variant === "categories" ? "Category" : "Keyword";
+  const pluralTitle = variant === "categories" ? "Categories" : "Keywords";
+  const pluralLower = variant === "categories" ? "categories" : "keywords";
   const [editorOpen, setEditorOpen] = useState(false);
   const [editorMode, setEditorMode] = useState<"create" | "edit">("create");
   const [activeId, setActiveId] = useState<string | null>(null);
@@ -166,155 +187,172 @@ export function TaxonomyManager({
       toast.success(`${singularTitle} deleted`);
       setDeleteId(null);
     } catch (error) {
-      toast.error(getApiErrorMessage(error, `Unable to delete ${singular}`));
+      toast.error(
+        error instanceof ApiRequestError && error.status === 409
+          ? variant === "categories"
+            ? "This category is still assigned to assets. Move them to another category first."
+            : "This keyword is still on some assets. Remove it from them first."
+          : getApiErrorMessage(error, `Unable to delete ${singular}`),
+      );
     } finally {
       setDeleting(false);
     }
   }
 
-  return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <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">
-            {pluralTitle}
-          </h2>
-          <p className="text-sm text-muted-foreground">
-            {variant === "categories"
-              ? "Group assets with category names, prefixes, and colors."
-              : "Create reusable tags with clear colors for quick filtering."}
-          </p>
-          {!canManage ? (
-            <p className="text-xs text-muted-foreground">
-              Only admins can add, edit, or delete {pluralLower}.
-            </p>
-          ) : null}
-        </div>
-        {canManage ? (
+  function rowMenu(row: TaxonomyRowBase) {
+    if (!canManage) return null;
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
-            variant="outline"
-            className="cursor-pointer"
-            onClick={openCreate}
+            variant="ghost"
+            size="icon-sm"
+            aria-label={`Actions for ${row.name}`}
           >
-            <Plus className="h-4 w-4" />
-            Add {singularTitle}
+            <MoreHorizontal />
           </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem onSelect={() => openEdit(row.id)}>
+            <Pencil />
+            Edit…
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            variant="destructive"
+            onSelect={() => setDeleteId(row.id)}
+          >
+            <Trash2 />
+            Delete…
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  const th =
+    "h-10 border-b border-border px-3 text-left text-[13px] font-semibold whitespace-nowrap text-foreground";
+
+  return (
+    <section aria-labelledby={`taxonomy-${variant}-title`}>
+      <SheetHeading
+        title={<span id={`taxonomy-${variant}-title`}>{pluralTitle}</span>}
+        count={loading ? undefined : rows.length}
+        aside={
+          canManage && (loading || rows.length > 0) ? (
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={openCreate}
+            >
+              <Plus />
+              New {singular}…
+            </Button>
+          ) : null
+        }
+      />
+      <p className="px-0.5 pt-1.5 text-[13px] text-muted-foreground">
+        {variant === "categories"
+          ? "Each asset has one category. The prefix starts its printed tag."
+          : "Free-form labels for finding assets. An asset can have several."}
+        {!canManage ? (
+          <span className="block">
+            Only admins can add, edit, or delete {pluralLower}.
+          </span>
         ) : null}
-      </div>
+      </p>
 
-      <div className="mt-4">
+      <div className="mt-2">
         {loading ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            Loading...
-          </p>
+          <div className="space-y-4 py-4" aria-hidden="true">
+            {[55, 40, 48].map((width) => (
+              <Skeleton
+                key={width}
+                className="h-2.5"
+                style={{ width: `${width}%` }}
+              />
+            ))}
+            <span className="sr-only">Loading...</span>
+          </div>
         ) : rows.length === 0 ? (
-          <p className="py-6 text-center text-sm text-muted-foreground">
-            No {pluralLower} yet.
-          </p>
+          <EmptyState
+            icon={variant === "categories" ? Layers : Hash}
+            title={`No ${pluralLower} yet.`}
+            description={
+              variant === "categories"
+                ? "Categories group assets, such as Power tools or Ladders."
+                : "Keywords are labels such as fragile or loan, for finding assets."
+            }
+            action={
+              canManage ? (
+                <Button type="button" onClick={openCreate}>
+                  <Plus />
+                  New {singular}…
+                </Button>
+              ) : null
+            }
+          />
         ) : variant === "categories" ? (
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            {rows.map((row) => {
-              const catRow = row as CategoryRow;
-              return (
-                <div
-                  key={row.id}
-                  className="rounded-lg border border-border/60 bg-card p-4 shadow-sm transition hover:border-primary/30"
-                >
-                  <div className="flex items-start justify-between gap-2">
+          <table className="w-full border-collapse text-sm">
+            <thead>
+              <tr>
+                <th className={cn(th, "pl-0.5")}>Name</th>
+                <th className={cn(th, "w-[1%]")}>Prefix</th>
+                <th className={cn(th, "w-10 p-0")}>
+                  <span className="sr-only">Actions</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {(rows as CategoryRow[]).map((row) => (
+                <tr key={row.id} className="border-b border-border">
+                  <td className="py-2.5 pr-3 pl-0.5">
                     <Link
                       href={`/assets?category=${row.id}`}
-                      className="flex items-center gap-2 hover:text-primary"
+                      className="font-semibold text-foreground hover:underline hover:underline-offset-[3px]"
                     >
-                      <span
-                        className="inline-block h-4 w-4 shrink-0 rounded-full border border-black/10"
-                        style={{ backgroundColor: row.color }}
-                      />
-                      <span className="font-semibold">{row.name}</span>
+                      {row.name}
                     </Link>
-                    {canManage ? (
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            size="icon-sm"
-                            className="cursor-pointer"
-                            aria-label={`Actions for ${row.name}`}
-                          >
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => openEdit(row.id)}>
-                            <Pencil className="h-4 w-4" />
-                            Edit
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            variant="destructive"
-                            onClick={() => setDeleteId(row.id)}
-                          >
-                            <Trash2 className="h-4 w-4" />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
+                    {row.description ? (
+                      <span className="mt-0.5 block max-w-[70ch] text-[13px] text-ink-2">
+                        {row.description}
+                      </span>
                     ) : null}
-                  </div>
-                  {catRow.prefix ? (
-                    <p className="mt-1 font-mono text-xs text-muted-foreground">
-                      Prefix: {catRow.prefix}
-                    </p>
-                  ) : null}
-                  {catRow.description ? (
-                    <p className="mt-1 truncate text-xs text-muted-foreground">
-                      {catRow.description}
-                    </p>
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
+                  </td>
+                  <td className="px-3 py-2.5 font-mono text-[13px] font-medium whitespace-nowrap text-ink-2">
+                    {row.prefix ?? (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                  <td className="w-10 py-1.5 pr-0.5 text-right">
+                    {rowMenu(row)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         ) : (
-          <div className="flex flex-wrap gap-2">
+          <ul className="grid gap-x-8 sm:grid-cols-2 lg:grid-cols-3">
             {rows.map((row) => (
-              <div
+              <li
                 key={row.id}
-                className="group inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-3 py-1.5 text-sm shadow-sm transition hover:border-primary/30"
+                className="flex min-h-12 items-center gap-2 border-b border-border px-0.5"
               >
                 <Link
                   href={`/assets?tag=${row.id}`}
-                  className="inline-flex items-center gap-1.5 hover:text-primary"
+                  className="min-w-0 flex-1 rounded-md"
+                  aria-label={`Assets with keyword ${row.name}`}
                 >
-                  <span
-                    className="inline-block h-2.5 w-2.5 rounded-full border border-black/10"
-                    style={{ backgroundColor: row.color }}
-                  />
-                  <span className="font-medium">{row.name}</span>
+                  <KeywordChip className="max-w-full truncate hover:bg-line-2">
+                    {row.name}
+                  </KeywordChip>
                 </Link>
-                {canManage ? (
-                  <div className="flex items-center gap-0.5 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
-                    <button
-                      type="button"
-                      className="cursor-pointer rounded p-0.5 hover:bg-muted"
-                      onClick={() => openEdit(row.id)}
-                      aria-label={`Edit ${row.name}`}
-                    >
-                      <Pencil className="h-3 w-3 text-muted-foreground" />
-                    </button>
-                    <button
-                      type="button"
-                      className="cursor-pointer rounded p-0.5 hover:bg-destructive/10"
-                      onClick={() => setDeleteId(row.id)}
-                      aria-label={`Delete ${row.name}`}
-                    >
-                      <Trash2 className="h-3 w-3 text-destructive" />
-                    </button>
-                  </div>
-                ) : null}
-              </div>
+                {rowMenu(row)}
+              </li>
             ))}
-          </div>
+          </ul>
         )}
       </div>
 
@@ -325,22 +363,12 @@ export function TaxonomyManager({
             setEditorOpen(false);
           }
         }}
-        title={
-          editorMode === "create"
-            ? `Add ${singularTitle}`
-            : `Edit ${singularTitle}`
-        }
-        description={
-          variant === "categories"
-            ? "Use short, clear names. Prefix and description are optional."
-            : "Use short names and distinct colors for readability."
-        }
+        title={editorMode === "create" ? `New ${singular}` : `Edit ${singular}`}
         footer={
           <>
             <Button
               type="button"
               variant="outline"
-              className="cursor-pointer"
               onClick={() => setEditorOpen(false)}
               disabled={submitting}
             >
@@ -349,17 +377,16 @@ export function TaxonomyManager({
             <Button
               form="taxonomy-editor-form"
               type="submit"
-              className="cursor-pointer"
               disabled={submitting}
             >
-              {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+              {submitting ? <Loader2 className="animate-spin" /> : null}
               {submitting
                 ? editorMode === "create"
                   ? "Creating..."
                   : "Saving..."
                 : editorMode === "create"
-                  ? `Create ${singularTitle}`
-                  : "Save changes"}
+                  ? `Create ${singular}`
+                  : `Save ${singular}`}
             </Button>
           </>
         }
@@ -370,7 +397,7 @@ export function TaxonomyManager({
           className="space-y-4"
         >
           <div className="space-y-1.5">
-            <label htmlFor="taxonomy-name" className="text-sm font-medium">
+            <label htmlFor="taxonomy-name" className="text-sm font-semibold">
               Name
             </label>
             <Input
@@ -379,19 +406,22 @@ export function TaxonomyManager({
               onChange={(event) =>
                 setForm((prev) => ({ ...prev, name: event.target.value }))
               }
-              placeholder={variant === "categories" ? "Laptops" : "Fragile"}
+              placeholder={variant === "categories" ? "Power tools" : "fragile"}
               required
             />
           </div>
 
           {variant === "categories" ? (
-            <div className="grid gap-4 sm:grid-cols-2">
+            <>
               <div className="space-y-1.5">
                 <label
                   htmlFor="taxonomy-prefix"
-                  className="text-sm font-medium"
+                  className="text-sm font-semibold"
                 >
-                  Prefix
+                  Prefix{" "}
+                  <span className="font-normal text-muted-foreground">
+                    optional
+                  </span>
                 </label>
                 <Input
                   id="taxonomy-prefix"
@@ -399,55 +429,59 @@ export function TaxonomyManager({
                   onChange={(event) =>
                     setForm((prev) => ({ ...prev, prefix: event.target.value }))
                   }
-                  placeholder="LAP"
+                  placeholder="PT"
+                  className="w-32 font-mono uppercase"
+                  aria-describedby="taxonomy-prefix-hint"
                 />
+                <p
+                  id="taxonomy-prefix-hint"
+                  className="text-[13px] text-muted-foreground"
+                >
+                  New assets in this category get tags like{" "}
+                  <span className="font-mono whitespace-nowrap">
+                    {(form.prefix.trim() || "AST").toUpperCase()}-0001
+                  </span>
+                  {form.prefix.trim() ? "." : ", the default prefix."}
+                </p>
               </div>
-              <ColorField
-                id="taxonomy-color"
-                value={form.color}
-                onChange={(color) => setForm((prev) => ({ ...prev, color }))}
-              />
-            </div>
-          ) : (
-            <ColorField
-              id="taxonomy-color"
-              value={form.color}
-              onChange={(color) => setForm((prev) => ({ ...prev, color }))}
-            />
-          )}
-
-          {variant === "categories" ? (
-            <div className="space-y-1.5">
-              <label
-                htmlFor="taxonomy-description"
-                className="text-sm font-medium"
-              >
-                Description
-              </label>
-              <Textarea
-                id="taxonomy-description"
-                value={form.description}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    description: event.target.value,
-                  }))
-                }
-                placeholder="Optional note about when to use this category"
-              />
-            </div>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="taxonomy-description"
+                  className="text-sm font-semibold"
+                >
+                  Description{" "}
+                  <span className="font-normal text-muted-foreground">
+                    optional
+                  </span>
+                </label>
+                <Textarea
+                  id="taxonomy-description"
+                  value={form.description}
+                  onChange={(event) =>
+                    setForm((prev) => ({
+                      ...prev,
+                      description: event.target.value,
+                    }))
+                  }
+                  placeholder="When to use this category"
+                />
+              </div>
+            </>
           ) : null}
         </form>
       </CrudModal>
 
       <ConfirmDialog
         open={Boolean(deleteId)}
-        title={`Delete ${singularTitle}`}
+        title={`Delete ${singular}?`}
         description={
           activeDeleteRow
-            ? `Delete ${activeDeleteRow.name}?`
-            : `Delete this ${singular}?`
+            ? variant === "categories"
+              ? `${activeDeleteRow.name} is deleted. A category that is still assigned to assets cannot be deleted, so move those assets to another category first.`
+              : `${activeDeleteRow.name} is deleted. A keyword that is still on any asset cannot be deleted, so remove it from those assets first.`
+            : `This ${singular} is deleted.`
         }
+        confirmLabel={`Delete ${singular}`}
         busy={deleting}
         onClose={() => {
           if (!deleting) {
diff --git a/src/components/crud/color-field.tsx b/src/components/crud/color-field.tsx
deleted file mode 100644
index fe08ced..0000000
--- a/src/components/crud/color-field.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-"use client";
-
-import { Check } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-
-export const PRESET_COLORS = [
-  "#EA580C",
-  "#CA8A04",
-  "#DC2626",
-  "#E11D48",
-  "#059669",
-  "#65A30D",
-  "#0891B2",
-  "#0EA5E9",
-  "#2563EB",
-  "#4F46E5",
-  "#9333EA",
-  "#78716C",
-] as const;
-
-function normalizeClientHex(value: string) {
-  const trimmed = value.trim();
-  const prefixed = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
-  if (/^#([0-9a-fA-F]{3})$/.test(prefixed)) {
-    const [, short] = /^#([0-9a-fA-F]{3})$/.exec(prefixed) ?? [];
-    if (short) {
-      return `#${short[0]}${short[0]}${short[1]}${short[1]}${short[2]}${short[2]}`.toUpperCase();
-    }
-  }
-  if (/^#([0-9a-fA-F]{6})$/.test(prefixed)) {
-    return prefixed.toUpperCase();
-  }
-  return prefixed.toUpperCase();
-}
-
-export function ColorField({
-  value,
-  onChange,
-  label = "Color",
-  id,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  label?: string;
-  id: string;
-}) {
-  const normalized = normalizeClientHex(value);
-
-  return (
-    <div className="space-y-2">
-      <label htmlFor={id} className="text-sm font-medium">
-        {label}
-      </label>
-
-      <div className="flex items-center gap-3">
-        <div
-          className="h-9 w-9 rounded-md border border-border shadow-xs"
-          style={{
-            backgroundColor: /^#[0-9A-F]{6}$/.test(normalized)
-              ? normalized
-              : undefined,
-          }}
-          aria-hidden="true"
-        />
-        <Input
-          id={id}
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          placeholder="#EA580C"
-          autoCapitalize="characters"
-          spellCheck={false}
-        />
-      </div>
-
-      <div
-        className="flex flex-wrap gap-2"
-        role="list"
-        aria-label="Preset colors"
-      >
-        {PRESET_COLORS.map((swatch) => {
-          const selected = normalized === swatch;
-          return (
-            <button
-              key={swatch}
-              type="button"
-              role="listitem"
-              className={cn(
-                "relative h-8 w-8 rounded-md border border-border shadow-xs transition hover:scale-[1.03] focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:outline-none",
-                selected && "ring-2 ring-ring/70",
-              )}
-              style={{ backgroundColor: swatch }}
-              onClick={() => onChange(swatch)}
-              aria-label={`Select ${swatch}`}
-              title={swatch}
-            >
-              {selected ? (
-                <Check className="mx-auto h-4 w-4 text-white drop-shadow" />
-              ) : null}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/crud/confirm-dialog.tsx b/src/components/crud/confirm-dialog.tsx
index e92bbc4..31e7fd3 100644
--- a/src/components/crud/confirm-dialog.tsx
+++ b/src/components/crud/confirm-dialog.tsx
@@ -1,8 +1,13 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { CrudModal } from "@/components/crud/modal";
 
+/*
+  A destructive dialog opens with focus on the safe action, so Enter is never
+  destructive. Actions are verb + object.
+*/
 export function ConfirmDialog({
   open,
   title,
@@ -24,6 +29,14 @@ export function ConfirmDialog({
   onConfirm: () => void;
   onClose: () => void;
 }) {
+  const safeRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const id = window.setTimeout(() => safeRef.current?.focus(), 0);
+    return () => window.clearTimeout(id);
+  }, [open]);
+
   return (
     <CrudModal
       open={open}
@@ -37,9 +50,9 @@ export function ConfirmDialog({
       footer={
         <>
           <Button
+            ref={safeRef}
             type="button"
             variant="outline"
-            className="cursor-pointer"
             onClick={onClose}
             disabled={busy}
           >
@@ -48,18 +61,15 @@ export function ConfirmDialog({
           <Button
             type="button"
             variant={destructive ? "destructive" : "default"}
-            className="cursor-pointer"
             onClick={onConfirm}
             disabled={busy}
           >
-            {busy ? "Working..." : confirmLabel}
+            {busy ? "Working…" : confirmLabel}
           </Button>
         </>
       }
     >
-      <p className="text-sm text-muted-foreground">
-        This action cannot be undone.
-      </p>
+      <p className="text-sm text-ink-2">This action cannot be undone.</p>
     </CrudModal>
   );
 }
diff --git a/src/components/crud/modal.tsx b/src/components/crud/modal.tsx
index 4d10323..ec8531d 100644
--- a/src/components/crud/modal.tsx
+++ b/src/components/crud/modal.tsx
@@ -2,9 +2,12 @@
 
 import { useEffect, useRef } from "react";
 import { X } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
+/*
+  A dialog on the charcoal scrim. The title carries the 2px ink rule; the
+  footer is a band under a 1px line with verb + object actions.
+*/
 export function CrudModal({
   open,
   title,
@@ -79,9 +82,9 @@ export function CrudModal({
   return (
     <div
       className={cn(
-        "fixed inset-0 z-50 flex bg-black/50",
+        "fixed inset-0 z-50 flex bg-[#1f2220]/80",
         // Mobile: bottom-sheet alignment
-        "items-end justify-center px-0 pb-0 pt-10",
+        "items-end justify-center px-0 pt-10 pb-0",
         // Desktop: centered modal
         "md:items-center md:justify-center md:px-4 md:py-6",
       )}
@@ -99,42 +102,38 @@ export function CrudModal({
         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",
+          "flex w-full flex-col border border-border bg-card shadow-[0_24px_48px_rgba(0,0,0,.18)] outline-hidden",
+          "max-h-[90svh] rounded-t-md 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",
+          "md:max-h-[calc(100dvh-3rem)] md:max-w-lg md:rounded-md 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">
+        <div className="flex shrink-0 items-start justify-between gap-3 px-5 pt-4">
+          <div className="min-w-0 flex-1 rule-ink pb-2.5">
             <h2
               id="crud-modal-title"
-              className="text-lg font-semibold tracking-tight"
+              className="wide text-lg leading-tight font-bold text-foreground"
             >
               {title}
             </h2>
             {description ? (
-              <p className="text-sm text-muted-foreground">{description}</p>
+              <p className="mt-1 text-sm text-ink-2">{description}</p>
             ) : null}
           </div>
-          <Button
+          <button
             type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="cursor-pointer"
+            className="-mr-2 grid size-9 shrink-0 cursor-pointer place-items-center rounded-md text-ink-2 hover:bg-secondary hover:text-foreground"
             onClick={onClose}
             aria-label="Close dialog"
           >
-            <X className="h-4 w-4" />
-          </Button>
+            <X className="size-4" />
+          </button>
         </div>
 
         <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
 
         {footer ? (
-          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border/60 px-5 py-4">
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border px-5 py-3.5">
             {footer}
           </div>
         ) : null}
diff --git a/src/components/dashboard/category-breakdown.tsx b/src/components/dashboard/category-breakdown.tsx
index 99b1bb2..3b2ab99 100644
--- a/src/components/dashboard/category-breakdown.tsx
+++ b/src/components/dashboard/category-breakdown.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 
 type CategoryItem = {
   id: string;
@@ -9,52 +10,44 @@ type CategoryItem = {
   count: number;
 };
 
+/*
+  Assets by category: one ink bar on a faint track (capped at 320px, kept
+  short of full so every row shows its track) with the count right after it.
+  Categories carry no colour; length does the work.
+*/
 export function CategoryBreakdown({ items }: { items: CategoryItem[] }) {
   const maxCount = Math.max(...items.map((i) => i.count), 1);
 
   return (
-    <section className="flex min-h-0 flex-col rounded-xl border border-border/70 bg-card p-5 shadow-sm">
-      <h2 className="shrink-0 text-base font-semibold tracking-tight">
-        By Category
-      </h2>
+    <section aria-labelledby="category-heading">
+      <SheetHeading
+        title={<span id="category-heading">Assets by category</span>}
+        aside={<Link href="/taxonomy">Open Taxonomy</Link>}
+      />
       {items.length === 0 ? (
-        <p className="mt-3 text-sm text-muted-foreground">
-          No categories with assets yet.
-        </p>
+        <p className="py-6 text-sm text-ink-2">No categories with assets yet.</p>
       ) : (
-        <div className="mt-3 min-h-0 flex-1 space-y-2.5 overflow-y-auto">
+        <ul>
           {items.map((item) => (
-            <Link
-              key={item.id}
-              href={`/assets?category=${item.id}`}
-              className="group block"
-            >
-              <div className="flex items-center justify-between gap-2">
-                <div className="flex items-center gap-2 text-sm">
-                  <span
-                    className="inline-block h-3 w-3 shrink-0 rounded-full"
-                    style={{ backgroundColor: item.color }}
+            <li key={item.id} className="border-b border-border">
+              <Link
+                href={`/assets?category=${item.id}`}
+                className="grid grid-cols-[minmax(0,1fr)_minmax(64px,200px)_32px] lg:grid-cols-[minmax(0,1fr)_minmax(64px,180px)_32px] items-center gap-3 px-0.5 py-[9px] text-sm hover:bg-card/60"
+              >
+                <span className="truncate text-foreground">{item.name}</span>
+                <span className="relative block h-1.5 bg-border" aria-hidden="true">
+                  <i
+                    className="absolute inset-y-0 left-0 bg-foreground"
+                    style={{ width: `${(item.count / maxCount) * 96}%` }}
                   />
-                  <span className="font-medium group-hover:text-primary transition-colors">
-                    {item.name}
-                  </span>
-                </div>
-                <span className="text-sm tabular-nums text-muted-foreground">
-                  {item.count}
                 </span>
-              </div>
-              <div className="mt-1 h-1.5 rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full transition-all"
-                  style={{
-                    width: `${(item.count / maxCount) * 100}%`,
-                    backgroundColor: item.color,
-                  }}
-                />
-              </div>
-            </Link>
+                <b className="text-right font-mono font-medium tabular-nums">
+                  {item.count}
+                </b>
+              </Link>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
     </section>
   );
diff --git a/src/components/dashboard/dashboard-stats-bar.tsx b/src/components/dashboard/dashboard-stats-bar.tsx
index 204bc1e..02ac1ba 100644
--- a/src/components/dashboard/dashboard-stats-bar.tsx
+++ b/src/components/dashboard/dashboard-stats-bar.tsx
@@ -1,14 +1,6 @@
 "use client";
 
-import {
-  Archive,
-  CheckCircle2,
-  Package,
-  Trash2,
-  Wrench,
-  XCircle,
-} from "lucide-react";
-import { StatCard } from "@/components/dashboard/stat-card";
+import { StatStrip } from "@/components/ui/stat-strip";
 
 type StatusCounts = {
   active: number;
@@ -18,85 +10,61 @@ type StatusCounts = {
   disposed: number;
 };
 
-const statCards = [
-  {
-    key: "total" as const,
-    label: "Total Assets",
-    icon: Package,
-    className: "bg-accent text-accent-foreground",
-  },
-  {
-    key: "active" as const,
-    label: "Active",
-    icon: CheckCircle2,
-    className:
-      "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400",
-  },
-  {
-    key: "in_storage" as const,
-    label: "In Storage",
-    icon: Archive,
-    className:
-      "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400",
-  },
-  {
-    key: "under_repair" as const,
-    label: "Under Repair",
-    icon: Wrench,
-    className:
-      "bg-orange-50 text-orange-700 dark:bg-orange-950/40 dark:text-orange-400",
-  },
-  {
-    key: "retired" as const,
-    label: "Retired",
-    icon: XCircle,
-    className:
-      "bg-stone-100 text-stone-600 dark:bg-stone-800/40 dark:text-stone-400",
-  },
-  {
-    key: "disposed" as const,
-    label: "Disposed",
-    icon: Trash2,
-    className:
-      "bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300",
-  },
-] as const;
-
+/*
+  The dashboard stat strip: assets, overdue services, then the two exception
+  statuses people act on, and retired. Counts carry colour only when non-zero
+  and the status is an exception.
+*/
 export function DashboardStatsBar({
   totalAssets,
   statusCounts,
+  overdueCount,
 }: {
   totalAssets: number;
   statusCounts: StatusCounts;
+  overdueCount: number;
 }) {
-  function getValue(key: "total" | keyof StatusCounts) {
-    if (key === "total") return totalAssets;
-    return statusCounts[key];
-  }
-
   return (
-    <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 (
-          <div
-            key={card.key}
-            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 data-testid="dashboard-stats-bar">
+      <StatStrip
+        items={[
+          {
+            key: "total",
+            label: "Assets",
+            value: totalAssets,
+            href: "/assets",
+          },
+          {
+            key: "overdue",
+            label: "Overdue",
+            value: overdueCount,
+            tone: "danger",
+            href: "/services",
+          },
+          {
+            key: "under_repair",
+            label: "Under repair",
+            shortLabel: "In repair",
+            value: statusCounts.under_repair,
+            tone: "repair",
+            href: "/assets?status=under_repair",
+          },
+          {
+            key: "in_storage",
+            label: "In storage",
+            shortLabel: "Stored",
+            value: statusCounts.in_storage,
+            tone: "slate",
+            href: "/assets?status=in_storage",
+          },
+          {
+            key: "retired",
+            label: "Retired",
+            value: statusCounts.retired,
+            href: "/assets?status=retired",
+          },
+        ]}
+      />
     </div>
   );
 }
diff --git a/src/components/dashboard/location-breakdown.tsx b/src/components/dashboard/location-breakdown.tsx
deleted file mode 100644
index 9f77e40..0000000
--- a/src/components/dashboard/location-breakdown.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { MapPin } from "lucide-react";
-
-type LocationItem = {
-  id: string;
-  name: string;
-  count: number;
-};
-
-export function LocationBreakdown({ items }: { items: LocationItem[] }) {
-  return (
-    <section className="flex min-h-0 flex-col rounded-xl border border-border/70 bg-card p-5 shadow-sm">
-      <h2 className="shrink-0 text-base font-semibold tracking-tight">
-        By Location
-      </h2>
-      {items.length === 0 ? (
-        <p className="mt-3 text-sm text-muted-foreground">
-          No locations with assets yet.
-        </p>
-      ) : (
-        <div className="mt-3 min-h-0 flex-1 space-y-1 overflow-y-auto">
-          {items.map((item) => (
-            <Link
-              key={item.id}
-              href={`/assets?location=${item.id}`}
-              className="flex items-center justify-between gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent"
-            >
-              <div className="flex items-center gap-2 text-sm">
-                <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
-                <span className="font-medium">{item.name}</span>
-              </div>
-              <span className="text-sm tabular-nums text-muted-foreground">
-                {item.count}
-              </span>
-            </Link>
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
diff --git a/src/components/dashboard/quick-actions.tsx b/src/components/dashboard/quick-actions.tsx
deleted file mode 100644
index c2d10f3..0000000
--- a/src/components/dashboard/quick-actions.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Plus, List } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export function QuickActions() {
-  return (
-    <div className="flex flex-wrap gap-3">
-      <Button asChild>
-        <Link href="/assets/new">
-          <Plus className="h-4 w-4" />
-          New Asset
-        </Link>
-      </Button>
-      <Button variant="outline" asChild>
-        <Link href="/assets">
-          <List className="h-4 w-4" />
-          View All Assets
-        </Link>
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/dashboard/recent-assets-card.tsx b/src/components/dashboard/recent-assets-card.tsx
index 1a77d16..b6ca0d3 100644
--- a/src/components/dashboard/recent-assets-card.tsx
+++ b/src/components/dashboard/recent-assets-card.tsx
@@ -2,9 +2,11 @@
 
 import Link from "next/link";
 import type { AppDateFormat } from "@/lib/date-format";
-import { formatDateFromTimestamp } from "@/lib/date-format";
-import { StatusBadge } from "@/components/assets/status-badge";
+import { StatusText } from "@/components/ui/status-text";
+import { SheetFoot, SheetHeading } from "@/components/ui/sheet-heading";
+import { TagChip } from "@/components/ui/tag-chip";
 import type { AssetStatus } from "@/components/assets/types";
+import { formatRelativeTime } from "@/lib/relative-time";
 
 type RecentAssetItem = {
   id: string;
@@ -14,62 +16,67 @@ type RecentAssetItem = {
   updatedAt: number;
 };
 
+/*
+  Recently updated: the shared chip column, the asset name with its status
+  when it is an exception, and the time at the right (long form on desktop,
+  short form below).
+*/
 export function RecentAssetsCard({
   items,
-  dateFormat,
 }: {
   items: RecentAssetItem[];
-  dateFormat: AppDateFormat;
+  dateFormat?: AppDateFormat;
 }) {
-  return (
-    <section className="flex min-h-0 flex-col rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div className="flex shrink-0 items-center justify-between gap-2">
-        <h2 className="text-base font-semibold tracking-tight">
-          Recent assets
-        </h2>
-        <Link
-          href="/assets"
-          className="text-sm text-primary underline-offset-2 hover:underline"
-        >
-          View all
-        </Link>
-      </div>
+  const visible = items.slice(0, 5);
 
-      {items.length === 0 ? (
-        <p className="mt-3 text-sm text-muted-foreground">
-          No assets have been added yet.
-        </p>
+  return (
+    <section aria-labelledby="recent-heading">
+      <SheetHeading title={<span id="recent-heading">Recently updated</span>} />
+      {visible.length === 0 ? (
+        <p className="py-6 text-sm text-ink-2">No assets have been added yet.</p>
       ) : (
-        <div className="mt-3 min-h-0 flex-1 space-y-2 overflow-y-auto">
-          {items.map((asset) => (
-            <article
-              key={asset.id}
-              className="rounded-xl border border-border/70 bg-card/60 px-3 py-3"
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <p className="text-sm font-medium">{asset.name}</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">
-                    {asset.assetTag}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    Updated{" "}
-                    {formatDateFromTimestamp(asset.updatedAt, dateFormat)}
-                  </p>
-                </div>
-                <div className="flex items-center gap-2">
-                  <StatusBadge status={asset.status} />
+        <>
+          <ul>
+            {visible.map((asset) => {
+              const time = formatRelativeTime(asset.updatedAt);
+              return (
+                <li key={asset.id} className="border-b border-border">
                   <Link
                     href={`/assets/${asset.id}`}
-                    className="text-xs text-primary underline-offset-2 hover:underline"
+                    className="grid min-h-12 grid-cols-[84px_minmax(0,1fr)_auto] items-center gap-x-4 px-0.5 py-[9px] text-sm hover:bg-card/60"
                   >
-                    View
+                    <TagChip weight="table" className="justify-self-start">
+                      {asset.assetTag}
+                    </TagChip>
+                    <span className="flex min-w-0 items-center gap-3">
+                      <b className="truncate font-semibold text-foreground">
+                        {asset.name}
+                      </b>
+                      <StatusText
+                        status={asset.status}
+                        hideActive
+                        className="text-[13px]"
+                        data-testid="status-badge"
+                      />
+                    </span>
+                    <span className="text-right text-[13px] whitespace-nowrap text-ink-2">
+                      <span className="hidden lg:inline">{time.long}</span>
+                      <span className="lg:hidden">{time.short}</span>
+                    </span>
                   </Link>
-                </div>
-              </div>
-            </article>
-          ))}
-        </div>
+                </li>
+              );
+            })}
+          </ul>
+          <SheetFoot>
+            {items.length > visible.length ? (
+              <span>
+                {visible.length} of the last {items.length} changes ·{" "}
+              </span>
+            ) : null}
+            <Link href="/assets">Open in Assets</Link>
+          </SheetFoot>
+        </>
       )}
     </section>
   );
diff --git a/src/components/dashboard/stat-card.tsx b/src/components/dashboard/stat-card.tsx
deleted file mode 100644
index f687662..0000000
--- a/src/components/dashboard/stat-card.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import type { LucideIcon } from "lucide-react";
-
-export function StatCard({
-  label,
-  value,
-  icon: Icon,
-  className,
-  statKey,
-}: {
-  label: string;
-  value: number;
-  icon: LucideIcon;
-  className: string;
-  statKey: string;
-}) {
-  return (
-    <section
-      className={`rounded-2xl border border-border/70 p-4 shadow-sm ${className}`}
-      data-dashboard-stat={statKey}
-    >
-      <div className="flex items-center gap-2">
-        <Icon className="h-4 w-4 opacity-70" />
-        <span className="text-[11px] font-medium uppercase tracking-[0.18em] opacity-70">
-          {label}
-        </span>
-      </div>
-      <p
-        className="mt-3 text-3xl font-semibold tracking-tight tabular-nums"
-        data-dashboard-stat-value
-      >
-        {value}
-      </p>
-    </section>
-  );
-}
diff --git a/src/components/dashboard/upcoming-services-widget.tsx b/src/components/dashboard/upcoming-services-widget.tsx
index ecf5f7d..153c1ed 100644
--- a/src/components/dashboard/upcoming-services-widget.tsx
+++ b/src/components/dashboard/upcoming-services-widget.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import Link from "next/link";
-import { AlertTriangle } from "lucide-react";
+import { CheckCircle2 } from "lucide-react";
 import type { AppDateFormat } from "@/lib/date-format";
 import { formatDateFromIsoDateOnly, getDaysUntil } from "@/lib/date-format";
 import { useTodayIsoDate } from "@/lib/use-today-iso-date";
+import { SheetFoot, SheetHeading } from "@/components/ui/sheet-heading";
+import { TagChip } from "@/components/ui/tag-chip";
+import { DueTag } from "@/components/ui/due-tag";
+import { EmptyState } from "@/components/ui/empty-state";
 
 type UpcomingServiceItem = {
   scheduleId: string;
@@ -14,109 +18,75 @@ type UpcomingServiceItem = {
   nextServiceDate: string;
 };
 
-function getQueueAccent(dateStr: string, todayIsoDate: string) {
-  const daysUntil = getDaysUntil(dateStr, todayIsoDate);
-  if (daysUntil < 0) {
-    return "border-l-2 border-l-rose-600 bg-rose-50/50 dark:border-l-rose-500 dark:bg-rose-950/20";
-  }
-
-  if (daysUntil <= 3) {
-    return "border-l-2 border-l-amber-500 bg-amber-50/50 dark:border-l-amber-400 dark:bg-amber-950/20";
-  }
-
-  return "border-l-2 border-l-emerald-500 bg-emerald-50/40 dark:border-l-emerald-400 dark:bg-emerald-950/10";
-}
-
-function getDueLabel(dateStr: string, todayIsoDate: string) {
-  const daysUntil = getDaysUntil(dateStr, todayIsoDate);
-  if (daysUntil < 0) {
-    return `${Math.abs(daysUntil)} day${Math.abs(daysUntil) === 1 ? "" : "s"} overdue`;
-  }
-
-  if (daysUntil === 0) {
-    return "Due today";
-  }
-
-  if (daysUntil === 1) {
-    return "Due tomorrow";
-  }
-
-  return `Due in ${daysUntil} days`;
-}
-
+/*
+  Service due: a sheet on the concrete. Each row is the tag chip and the
+  asset name, the scheduled date under it, and the due marker at the right
+  (red tag when overdue, bold ink within 48 hours, plain text after). The list
+  closes with a quiet line where you land.
+*/
 export function UpcomingServicesWidget({
   items,
   overdueCount,
+  scheduledCount,
   serviceSchedulingEnabled,
   dateFormat,
 }: {
   items: UpcomingServiceItem[];
   overdueCount: number;
+  scheduledCount?: number;
   serviceSchedulingEnabled: boolean;
   dateFormat: AppDateFormat;
 }) {
   const today = useTodayIsoDate();
+  const more = Math.max(0, (scheduledCount ?? items.length) - items.length);
 
   return (
-    <section className="flex min-h-0 flex-col rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
-        <div>
-          <h2 className="text-base font-semibold tracking-tight">
-            Service queue
-          </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Earliest due assets across the schedule.
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          {overdueCount > 0 ? (
-            <span className="inline-flex items-center gap-1 rounded-full border border-rose-300/70 bg-rose-100 px-2.5 py-1 text-xs font-medium text-rose-800 dark:border-rose-400/30 dark:bg-rose-500/15 dark:text-rose-200">
-              <AlertTriangle className="h-3.5 w-3.5" />
-              {overdueCount} overdue
-            </span>
-          ) : null}
-          <Link
-            href="/services"
-            className="text-sm text-primary underline-offset-2 hover:underline"
-          >
-            Open planner
-          </Link>
-        </div>
-      </div>
+    <section aria-labelledby="service-due-heading">
+      <SheetHeading title={<span id="service-due-heading">Service due</span>} />
 
       {!serviceSchedulingEnabled ? (
-        <p className="mt-3 text-sm text-muted-foreground">
-          Service scheduling is disabled.
-        </p>
+        <EmptyState
+          title="Service scheduling is disabled."
+          description="Turn it on in Settings to track service dates."
+        />
       ) : items.length === 0 ? (
-        <p className="mt-3 text-sm text-muted-foreground">
-          No scheduled services yet.
-        </p>
+        <EmptyState
+          icon={CheckCircle2}
+          title="No scheduled services yet."
+          description="Add a service schedule to an asset to see it here."
+        />
       ) : (
-        <div className="mt-3 min-h-0 flex-1 space-y-2 overflow-y-auto">
-          {items.map((item) => (
-            <Link
-              key={item.scheduleId}
-              href={`/assets/${item.assetId}`}
-              className={`block rounded-xl border border-border/70 px-3 py-3 transition-colors hover:border-primary/30 ${getQueueAccent(item.nextServiceDate, today)}`}
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <p className="text-sm font-medium">{item.assetName}</p>
-                  <p className="mt-0.5 font-mono text-xs text-muted-foreground">
-                    {item.assetTag}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    {getDueLabel(item.nextServiceDate, today)}
-                  </p>
-                </div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  {formatDateFromIsoDateOnly(item.nextServiceDate, dateFormat)}
-                </p>
-              </div>
-            </Link>
-          ))}
-        </div>
+        <>
+          <ul>
+            {items.map((item) => {
+              const days = getDaysUntil(item.nextServiceDate, today);
+              return (
+                <li key={item.scheduleId} className="border-b border-border">
+                  <Link
+                    href={`/assets/${item.assetId}`}
+                    className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-0.5 px-0.5 py-[11px] hover:bg-card/60"
+                  >
+                    <TagChip weight="table" className="row-span-2 self-center">
+                      {item.assetTag}
+                    </TagChip>
+                    <b className="truncate text-sm font-semibold text-foreground">
+                      {item.assetName}
+                    </b>
+                    <DueTag days={days} className="row-span-2 self-center max-md:row-span-1" />
+                    <span className="text-sm text-ink-2">
+                      {formatDateFromIsoDateOnly(item.nextServiceDate, dateFormat)}
+                    </span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+          <SheetFoot>
+            {overdueCount > 0 ? <span>{overdueCount} overdue · </span> : null}
+            {more > 0 ? <span>{more} more scheduled · </span> : null}
+            <Link href="/services">See all services</Link>
+          </SheetFoot>
+        </>
       )}
     </section>
   );
diff --git a/src/components/fields/dynamic-field.tsx b/src/components/fields/dynamic-field.tsx
index 28d9a5a..77b8d1a 100644
--- a/src/components/fields/dynamic-field.tsx
+++ b/src/components/fields/dynamic-field.tsx
@@ -23,6 +23,39 @@ function coerceCheckbox(value: FieldValue) {
   return value === true;
 }
 
+/*
+  Workshop form labels: 14px semibold; optional fields say so in muted text.
+  The marker sits outside the <label> so the accessible name stays the
+  field name.
+*/
+function FieldLabel({
+  htmlFor,
+  definition,
+  inline = false,
+}: {
+  htmlFor: string;
+  definition: Pick<FieldDefinition, "name" | "required">;
+  inline?: boolean;
+}) {
+  return (
+    <div className="flex items-baseline gap-1.5">
+      <label
+        htmlFor={htmlFor}
+        className={
+          inline
+            ? "cursor-pointer text-sm font-semibold"
+            : "text-sm font-semibold"
+        }
+      >
+        {definition.name}
+      </label>
+      {!definition.required && !inline ? (
+        <span className="text-sm text-muted-foreground">optional</span>
+      ) : null}
+    </div>
+  );
+}
+
 export function DynamicField({
   definition,
   value,
@@ -49,17 +82,12 @@ export function DynamicField({
           <input
             id={fieldId}
             type="checkbox"
-            className="h-4 w-4 rounded border border-input"
+            className="size-[18px] cursor-pointer accent-[var(--foreground)]"
             checked={checked}
             disabled={disabled}
             onChange={(event) => onChange(event.target.checked)}
           />
-          <label htmlFor={fieldId} className="text-sm font-medium">
-            {definition.name}
-            {definition.required ? (
-              <span className="ml-1 text-destructive">*</span>
-            ) : null}
-          </label>
+          <FieldLabel htmlFor={fieldId} definition={definition} inline />
         </div>
       </div>
     );
@@ -69,15 +97,10 @@ export function DynamicField({
     const currentValue = coerceString(value);
     return (
       <div className="space-y-1.5">
-        <label htmlFor={fieldId} className="text-sm font-medium">
-          {definition.name}
-          {definition.required ? (
-            <span className="ml-1 text-destructive">*</span>
-          ) : null}
-        </label>
+        <FieldLabel htmlFor={fieldId} definition={definition} />
         <select
           id={fieldId}
-          className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+          className="h-9 w-full cursor-pointer rounded-md border-[1.5px] border-input bg-card px-3 text-sm appearance-none bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2714%27%20height=%2714%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%234e524b%27%20stroke-width=%272.5%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27m6%209%206%206%206-6%27/%3E%3C/svg%3E')] bg-[length:14px] bg-[position:right_10px_center] bg-no-repeat pr-8 font-medium text-foreground outline-none focus-visible:border-foreground disabled:cursor-not-allowed disabled:opacity-50"
           value={currentValue}
           onChange={(event) => onChange(event.target.value || null)}
           disabled={disabled}
@@ -98,12 +121,7 @@ export function DynamicField({
     const currentValue = coerceString(value);
     return (
       <div className="space-y-1.5">
-        <label htmlFor={fieldId} className="text-sm font-medium">
-          {definition.name}
-          {definition.required ? (
-            <span className="ml-1 text-destructive">*</span>
-          ) : null}
-        </label>
+        <FieldLabel htmlFor={fieldId} definition={definition} />
         <Input
           id={fieldId}
           type="date"
@@ -119,12 +137,7 @@ export function DynamicField({
   if (definition.fieldType === "number") {
     return (
       <div className="space-y-1.5">
-        <label htmlFor={fieldId} className="text-sm font-medium">
-          {definition.name}
-          {definition.required ? (
-            <span className="ml-1 text-destructive">*</span>
-          ) : null}
-        </label>
+        <FieldLabel htmlFor={fieldId} definition={definition} />
         <Input
           id={fieldId}
           type="number"
@@ -150,12 +163,7 @@ export function DynamicField({
   if (definition.fieldType === "currency") {
     return (
       <div className="space-y-1.5">
-        <label htmlFor={fieldId} className="text-sm font-medium">
-          {definition.name}
-          {definition.required ? (
-            <span className="ml-1 text-destructive">*</span>
-          ) : null}
-        </label>
+        <FieldLabel htmlFor={fieldId} definition={definition} />
         <div className="relative">
           <span className="pointer-events-none absolute inset-y-0 left-3 inline-flex items-center text-sm text-muted-foreground">
             $
@@ -191,12 +199,7 @@ export function DynamicField({
 
     return (
       <div className="space-y-1.5">
-        <label htmlFor={fieldId} className="text-sm font-medium">
-          {definition.name}
-          {definition.required ? (
-            <span className="ml-1 text-destructive">*</span>
-          ) : null}
-        </label>
+        <FieldLabel htmlFor={fieldId} definition={definition} />
         <Input
           id={fieldId}
           type="url"
@@ -223,7 +226,7 @@ export function DynamicField({
           required={definition.required}
         />
         {urlError ? (
-          <p className="text-xs text-destructive">{urlError}</p>
+          <p className="text-sm font-medium text-destructive">{urlError}</p>
         ) : null}
       </div>
     );
@@ -231,12 +234,7 @@ export function DynamicField({
 
   return (
     <div className="space-y-1.5">
-      <label htmlFor={fieldId} className="text-sm font-medium">
-        {definition.name}
-        {definition.required ? (
-          <span className="ml-1 text-destructive">*</span>
-        ) : null}
-      </label>
+      <FieldLabel htmlFor={fieldId} definition={definition} />
       <Input
         id={fieldId}
         type="text"
diff --git a/src/components/fields/field-definition-form.tsx b/src/components/fields/field-definition-form.tsx
index 71564f8..00445f0 100644
--- a/src/components/fields/field-definition-form.tsx
+++ b/src/components/fields/field-definition-form.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { Loader2, Plus, Trash2 } from "lucide-react";
+import { Loader2, Plus, Trash2, TriangleAlert } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { CrudModal } from "@/components/crud/modal";
 import {
@@ -11,6 +12,16 @@ import {
   type FieldType,
 } from "./types";
 
+const TYPE_LABELS: Record<FieldType, string> = {
+  text: "Text",
+  number: "Number",
+  date: "Date",
+  dropdown: "Dropdown",
+  checkbox: "Checkbox",
+  url: "URL",
+  currency: "Currency",
+};
+
 type FieldDefinitionFormValues = {
   name: string;
   fieldType: FieldType;
@@ -86,14 +97,12 @@ export function FieldDefinitionForm({
           onClose();
         }
       }}
-      title={mode === "create" ? "Add field" : "Edit field"}
-      description="Define custom fields used by assets."
+      title={mode === "create" ? "New field" : "Edit field"}
       footer={
         <>
           <Button
             type="button"
             variant="outline"
-            className="cursor-pointer"
             disabled={submitting}
             onClick={onClose}
           >
@@ -102,17 +111,16 @@ export function FieldDefinitionForm({
           <Button
             type="submit"
             form="field-definition-form"
-            className="cursor-pointer"
             disabled={submitting}
           >
-            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
+            {submitting ? <Loader2 className="animate-spin" /> : null}
             {submitting
               ? mode === "create"
                 ? "Creating..."
                 : "Saving..."
               : mode === "create"
                 ? "Create field"
-                : "Save changes"}
+                : "Save field"}
           </Button>
         </>
       }
@@ -123,7 +131,7 @@ export function FieldDefinitionForm({
         onSubmit={handleSubmit}
       >
         <div className="space-y-1.5">
-          <label htmlFor="field-name" className="text-sm font-medium">
+          <label htmlFor="field-name" className="text-sm font-semibold">
             Name
           </label>
           <Input
@@ -136,42 +144,47 @@ export function FieldDefinitionForm({
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="field-type" className="text-sm font-medium">
+          <label htmlFor="field-type" className="text-sm font-semibold">
             Type
           </label>
           <select
             id="field-type"
-            className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
+            className="h-9 w-full cursor-pointer rounded-md border-[1.5px] border-input bg-card px-3 text-sm appearance-none bg-[url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2714%27%20height=%2714%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%234e524b%27%20stroke-width=%272.5%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27m6%209%206%206%206-6%27/%3E%3C/svg%3E')] bg-[length:14px] bg-[position:right_10px_center] bg-no-repeat pr-8 font-medium text-foreground outline-none focus-visible:border-foreground"
             value={fieldType}
             onChange={(event) => setFieldType(event.target.value as FieldType)}
           >
             {FIELD_TYPE_OPTIONS.map((typeOption) => (
               <option key={typeOption} value={typeOption}>
-                {typeOption}
+                {TYPE_LABELS[typeOption]}
               </option>
             ))}
           </select>
         </div>
 
         {showTypeChangeWarning ? (
-          <div className="rounded-md border border-amber-400/50 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
-            This field already has saved values. Some type changes are blocked
-            to prevent data loss.
-          </div>
+          <p className="flex items-start gap-1.5 text-sm font-medium text-repair">
+            <TriangleAlert
+              className="mt-0.5 size-4 shrink-0"
+              aria-hidden="true"
+            />
+            <span>
+              This field already has saved values. Some type changes are blocked
+              to prevent data loss.
+            </span>
+          </p>
         ) : null}
 
         {isDropdown ? (
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium">Dropdown options</label>
+              <label className="text-sm font-semibold">Dropdown options</label>
               <Button
                 type="button"
                 variant="outline"
                 size="sm"
-                className="cursor-pointer"
                 onClick={() => setOptions((prev) => [...prev, ""])}
               >
-                <Plus className="h-4 w-4" />
+                <Plus />
                 Add option
               </Button>
             </div>
@@ -195,7 +208,6 @@ export function FieldDefinitionForm({
                     type="button"
                     variant="ghost"
                     size="icon-sm"
-                    className="cursor-pointer"
                     aria-label={`Remove option ${index + 1}`}
                     onClick={() =>
                       setOptions((prev) => {
@@ -208,7 +220,7 @@ export function FieldDefinitionForm({
                       })
                     }
                   >
-                    <Trash2 className="h-4 w-4" />
+                    <Trash2 />
                   </Button>
                 </div>
               ))}
@@ -216,15 +228,16 @@ export function FieldDefinitionForm({
           </div>
         ) : null}
 
-        <div className="flex items-center gap-2">
-          <input
+        <div className="flex items-center gap-2.5">
+          <Checkbox
             id="field-required"
-            type="checkbox"
-            className="h-4 w-4 rounded border border-input"
             checked={required}
-            onChange={(event) => setRequired(event.target.checked)}
+            onCheckedChange={(checked) => setRequired(checked === true)}
           />
-          <label htmlFor="field-required" className="text-sm font-medium">
+          <label
+            htmlFor="field-required"
+            className="cursor-pointer text-sm font-semibold"
+          >
             Required field
           </label>
         </div>
diff --git a/src/components/fields/fields-page-client.tsx b/src/components/fields/fields-page-client.tsx
index f4f62fa..a5cee67 100644
--- a/src/components/fields/fields-page-client.tsx
+++ b/src/components/fields/fields-page-client.tsx
@@ -19,7 +19,6 @@ import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
 import { FieldDefinitionForm } from "@/components/fields/field-definition-form";
 import type { FieldDefinition } from "@/components/fields/types";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   ContextMenu,
@@ -32,14 +31,12 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { EmptyState } from "@/components/ui/empty-state";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import {
   createCustomField,
@@ -48,6 +45,17 @@ import {
   reorderCustomFields,
   updateCustomField,
 } from "@/lib/api/custom-fields";
+import { cn } from "@/lib/utils";
+
+const FIELD_TYPE_LABELS: Record<FieldDefinition["fieldType"], string> = {
+  text: "Text",
+  number: "Number",
+  date: "Date",
+  dropdown: "Dropdown",
+  checkbox: "Checkbox",
+  url: "URL",
+  currency: "Currency",
+};
 
 const FIELDS_QUERY_KEY = ["custom-fields"] as const;
 
@@ -205,99 +213,103 @@ export function FieldsPageClient() {
     }
   }
 
+  const th =
+    "h-10 border-b border-border px-3 text-left text-[13px] font-semibold whitespace-nowrap text-foreground";
+  const newFieldButton = (size: "sm" | "default") =>
+    canManage ? (
+      <Button
+        type="button"
+        variant={size === "sm" ? "secondary" : "default"}
+        size={size}
+        onClick={openCreate}
+      >
+        <Plus />
+        New field…
+      </Button>
+    ) : undefined;
+
+  function fieldMenuItems(definition: FieldDefinition) {
+    return (
+      <>
+        <DropdownMenuItem onSelect={() => openEdit(definition.id)}>
+          <Pencil />
+          Edit…
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          variant="destructive"
+          onSelect={() => setDeleteId(definition.id)}
+        >
+          <Trash2 />
+          Delete…
+        </DropdownMenuItem>
+      </>
+    );
+  }
+
   return (
     <>
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <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">
-              Field definitions
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              Define reusable custom fields for assets.
-            </p>
-            {!canManage ? (
-              <p className="text-xs text-muted-foreground">
-                Only admins can manage fields.
-              </p>
-            ) : null}
-          </div>
+      <section aria-labelledby="taxonomy-fields-title">
+        <SheetHeading
+          title={<span id="taxonomy-fields-title">Custom fields</span>}
+          count={loading ? undefined : rows.length}
+          aside={loading || rows.length > 0 ? newFieldButton("sm") : undefined}
+        />
+        <p className="px-0.5 pt-1.5 text-[13px] text-muted-foreground">
+          Extra details every asset form asks for, in this order.
           {canManage ? (
-            <Button
-              type="button"
-              variant="outline"
-              className="cursor-pointer"
-              onClick={openCreate}
-            >
-              <Plus className="h-4 w-4" />
-              Add field
-            </Button>
-          ) : null}
-        </div>
+            <span className="max-md:hidden"> Drag a row to reorder.</span>
+          ) : (
+            <span className="block">Only admins can manage fields.</span>
+          )}
+        </p>
 
         {loading ? (
-          <p className="mt-4 text-sm text-muted-foreground md:hidden">
-            Loading...
-          </p>
+          <div className="space-y-4 py-5" aria-hidden="true">
+            {[50, 38, 44].map((width) => (
+              <Skeleton
+                key={width}
+                className="h-2.5"
+                style={{ width: `${width}%` }}
+              />
+            ))}
+          </div>
         ) : null}
+        {loading ? <span className="sr-only">Loading...</span> : 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>
+          <EmptyState
+            className="mt-2"
+            icon={SlidersHorizontal}
+            title="No custom fields yet."
+            description="Add fields such as serial number or purchase date to capture extra asset details."
+            action={newFieldButton("default")}
+          />
         ) : null}
 
         {rows.length > 0 ? (
-          <ul
-            className="mt-4 flex flex-col gap-2 md:hidden"
-            data-testid="field-card-list"
-          >
+          <ul className="mt-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"
+                className="flex items-center justify-between gap-3 border-b border-border px-0.5 py-2.5"
               >
-                <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 className="w-5 shrink-0 font-mono text-[13px] font-medium text-muted-foreground">
+                  {definition.sortOrder + 1}
+                </span>
+                <div className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-semibold text-foreground">
+                    {definition.name}
+                  </span>
+                  <span className="block text-[13px] text-ink-2">
+                    {FIELD_TYPE_LABELS[definition.fieldType]}
+                    {definition.required ? " · Required" : null}
+                    <span className="text-muted-foreground">
+                      {" "}
+                      · Used by {definition.usageCount}
                     </span>
-                  </div>
+                  </span>
                 </div>
                 {canManage ? (
                   <DropdownMenu>
@@ -305,17 +317,16 @@ export function FieldsPageClient() {
                       <Button
                         type="button"
                         variant="ghost"
-                        size="icon-sm"
-                        className="cursor-pointer"
+                        size="icon"
                         aria-label={`Actions for ${definition.name}`}
                       >
-                        <MoreHorizontal className="h-4 w-4" />
+                        <MoreHorizontal />
                       </Button>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
+                    <DropdownMenuContent align="end" className="w-44">
                       <DropdownMenuItem
                         disabled={reordering || index === 0}
-                        onClick={() => {
+                        onSelect={() => {
                           const next = rows.map((row) => row.id);
                           [next[index - 1], next[index]] = [
                             next[index],
@@ -324,12 +335,12 @@ export function FieldsPageClient() {
                           void saveOrder(next);
                         }}
                       >
-                        <ArrowUp className="h-4 w-4" />
+                        <ArrowUp />
                         Move up
                       </DropdownMenuItem>
                       <DropdownMenuItem
                         disabled={reordering || index === rows.length - 1}
-                        onClick={() => {
+                        onSelect={() => {
                           const next = rows.map((row) => row.id);
                           [next[index], next[index + 1]] = [
                             next[index + 1],
@@ -338,84 +349,43 @@ export function FieldsPageClient() {
                           void saveOrder(next);
                         }}
                       >
-                        <ArrowDown className="h-4 w-4" />
+                        <ArrowDown />
                         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>
+                      <DropdownMenuSeparator />
+                      {fieldMenuItems(definition)}
                     </DropdownMenuContent>
                   </DropdownMenu>
-                ) : (
-                  <span className="text-xs text-muted-foreground">
-                    Read only
-                  </span>
-                )}
+                ) : null}
               </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>
-                <th className="w-10 px-3 py-2 font-medium">Order</th>
-                <th className="px-3 py-2 font-medium">Name</th>
-                <th className="px-3 py-2 font-medium">Type</th>
-                <th className="px-3 py-2 font-medium">Required</th>
-                <th className="px-3 py-2 font-medium">In use</th>
-                <th className="px-3 py-2 font-medium text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {loading ? (
+        {!loading && rows.length > 0 ? (
+          <div className="mt-2 hidden md:block">
+            <table className="w-full border-collapse text-sm">
+              <thead>
                 <tr>
-                  <td
-                    colSpan={6}
-                    className="px-3 py-8 text-center text-muted-foreground"
-                  >
-                    Loading...
-                  </td>
+                  <th className={cn(th, "w-14 pl-0.5")}>Order</th>
+                  <th className={th}>Name</th>
+                  <th className={th}>Type</th>
+                  <th className={th}>Required</th>
+                  <th className={cn(th, "text-right")}>In use</th>
+                  <th className={cn(th, "w-10 p-0")}>
+                    <span className="sr-only">Actions</span>
+                  </th>
                 </tr>
-              ) : rows.length === 0 ? (
-                <tr>
-                  <td colSpan={6} className="p-0">
-                    <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
-                      }
-                      className="rounded-none border-0"
-                    />
-                  </td>
-                </tr>
-              ) : (
-                rows.map((definition) => {
+              </thead>
+              <tbody>
+                {rows.map((definition) => {
                   const rowContent = (
                     <tr
-                      className="border-t border-border/50"
+                      className={cn(
+                        "border-b border-border",
+                        canManage && "cursor-grab active:cursor-grabbing",
+                        draggingId === definition.id && "bg-secondary",
+                      )}
                       draggable={canManage && !reordering}
                       onDragStart={(event) => {
                         setDraggingId(definition.id);
@@ -435,74 +405,55 @@ export function FieldsPageClient() {
                         void saveOrder(orderedIds);
                       }}
                     >
-                      <td className="px-3 py-2">
-                        <div className="inline-flex items-center gap-1 rounded-md border border-border/70 bg-muted/20 px-1.5 py-1 text-xs text-muted-foreground">
-                          <GripVertical className="h-3.5 w-3.5" />
-                          <span className="font-mono">
-                            {definition.sortOrder + 1}
-                          </span>
-                        </div>
+                      <td className="py-2.5 pr-3 pl-0.5">
+                        <span className="inline-flex items-center gap-1 font-mono text-[13px] font-medium text-muted-foreground">
+                          {canManage ? (
+                            <GripVertical
+                              className="size-3.5"
+                              aria-hidden="true"
+                            />
+                          ) : null}
+                          {definition.sortOrder + 1}
+                        </span>
                       </td>
-                      <td className="px-3 py-2 font-medium">
+                      <td className="px-3 py-2.5 font-semibold text-foreground">
                         {definition.name}
                       </td>
-                      <td className="px-3 py-2">
-                        <Badge className="bg-muted/20 capitalize">
-                          {definition.fieldType}
-                        </Badge>
+                      <td className="px-3 py-2.5 text-ink-2">
+                        {FIELD_TYPE_LABELS[definition.fieldType]}
                       </td>
-                      <td className="px-3 py-2">
+                      <td className="px-3 py-2.5">
                         {definition.required ? (
-                          <Badge className="bg-muted/20">Required</Badge>
+                          <span className="font-medium text-foreground">
+                            Required
+                          </span>
                         ) : (
                           <span className="text-muted-foreground">
                             Optional
                           </span>
                         )}
                       </td>
-                      <td className="px-3 py-2 text-muted-foreground">
+                      <td className="px-3 py-2.5 text-right font-mono text-[13px] font-medium text-ink-2">
                         {definition.usageCount}
                       </td>
-                      <td className="px-3 py-2 text-right">
+                      <td className="w-10 py-1.5 pr-0.5 text-right">
                         {canManage ? (
                           <DropdownMenu>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <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>
-                              </TooltipTrigger>
-                              <TooltipContent>Actions</TooltipContent>
-                            </Tooltip>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() => openEdit(definition.id)}
-                              >
-                                <Pencil className="h-4 w-4" />
-                                Edit
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                variant="destructive"
-                                onClick={() => setDeleteId(definition.id)}
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon-sm"
+                                aria-label={`Actions for ${definition.name}`}
                               >
-                                <Trash2 className="h-4 w-4" />
-                                Delete
-                              </DropdownMenuItem>
+                                <MoreHorizontal />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end" className="w-40">
+                              {fieldMenuItems(definition)}
                             </DropdownMenuContent>
                           </DropdownMenu>
-                        ) : (
-                          <span className="text-xs text-muted-foreground">
-                            Read only
-                          </span>
-                        )}
+                        ) : null}
                       </td>
                     </tr>
                   );
@@ -516,16 +467,16 @@ export function FieldsPageClient() {
                         <ContextMenuItem
                           onClick={() => openEdit(definition.id)}
                         >
-                          <Pencil className="h-4 w-4" />
-                          Edit
+                          <Pencil />
+                          Edit…
                         </ContextMenuItem>
                         <ContextMenuSeparator />
                         <ContextMenuItem
                           variant="destructive"
                           onClick={() => setDeleteId(definition.id)}
                         >
-                          <Trash2 className="h-4 w-4" />
-                          Delete
+                          <Trash2 />
+                          Delete…
                         </ContextMenuItem>
                       </ContextMenuContent>
                     </ContextMenu>
@@ -534,14 +485,14 @@ export function FieldsPageClient() {
                       {rowContent}
                     </React.Fragment>
                   );
-                })
-              )}
-            </tbody>
-          </table>
-        </div>
+                })}
+              </tbody>
+            </table>
+          </div>
+        ) : null}
         {reordering ? (
-          <p className="mt-3 inline-flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          <p className="mt-3 inline-flex items-center gap-2 text-[13px] text-muted-foreground">
+            <Loader2 className="size-3.5 animate-spin" />
             Saving order...
           </p>
         ) : null}
@@ -564,11 +515,11 @@ export function FieldsPageClient() {
 
       <ConfirmDialog
         open={deleteId !== null}
-        title="Delete field"
+        title="Delete field?"
         description={
           activeDeleteDefinition
-            ? `Delete "${activeDeleteDefinition.name}"?`
-            : "Delete this field?"
+            ? `${activeDeleteDefinition.name} is removed from the asset form.`
+            : "This field is removed from the asset form."
         }
         confirmLabel="Delete field"
         busy={deleting}
diff --git a/src/components/labels/asset-label-panel.tsx b/src/components/labels/asset-label-panel.tsx
new file mode 100644
index 0000000..cd7d1d9
--- /dev/null
+++ b/src/components/labels/asset-label-panel.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Printer } from "lucide-react";
+import type { FieldDefinition } from "@/components/fields/types";
+import { MM_TO_PX } from "@/components/labels/helpers";
+import { LabelPreview } from "@/components/labels/label-preview";
+import type {
+  LabelPreviewAsset,
+  LabelTemplate,
+} from "@/components/labels/types";
+import { Button } from "@/components/ui/button";
+import { Panel, PanelFooter } from "@/components/ui/panel";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  getDefaultLabelTemplate,
+  getLabelUrlBase,
+} from "@/lib/api/label-templates";
+import { cn } from "@/lib/utils";
+
+function useElementWidth<T extends HTMLElement>() {
+  const ref = useRef<T | null>(null);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width] as const;
+}
+
+/*
+  The label card: the default template drawn with this asset's data on a
+  quiet well, scaled to fit (never up), then Print label in the footer.
+*/
+export function AssetLabelPanel({
+  asset,
+  fieldDefinitions,
+  className,
+}: {
+  asset: LabelPreviewAsset;
+  fieldDefinitions: FieldDefinition[];
+  className?: string;
+}) {
+  const [wellRef, wellWidth] = useElementWidth<HTMLDivElement>();
+  const templateQuery = useQuery({
+    queryKey: ["label-templates", "default"],
+    queryFn: getDefaultLabelTemplate,
+  });
+  const urlBaseQuery = useQuery({
+    queryKey: ["label-templates", "url-base"],
+    queryFn: getLabelUrlBase,
+  });
+
+  const template = (templateQuery.data ?? null) as LabelTemplate | null;
+
+  // No seeding here: a template the admin deleted must stay deleted. The
+  // Labels page sets up the built-in templates on a fresh install.
+  const labelPx = template ? template.widthMm * MM_TO_PX : 0;
+  const scale =
+    template && wellWidth > 0 ? Math.min(1, wellWidth / labelPx) : 0;
+
+  return (
+    <Panel className={className} data-testid="asset-label-panel">
+      <div className="flex items-center justify-between gap-3 px-[18px] pt-4 pb-3">
+        <span className="eyebrow whitespace-nowrap">
+          Label
+          {template ? (
+            <>
+              {" · "}
+              {template.widthMm} × {template.heightMm}{" "}
+              <span className="normal-case">mm</span>
+            </>
+          ) : null}
+        </span>
+        <Link
+          href="/labels"
+          className="text-sm font-medium whitespace-nowrap text-ink-2 underline underline-offset-[3px] hover:text-foreground"
+        >
+          Change template…
+        </Link>
+      </div>
+
+      <div className="mx-[18px] rounded-xs bg-secondary p-4">
+        <div ref={wellRef} className="flex min-h-16 justify-center">
+          {templateQuery.isPending ? (
+            <Skeleton className="h-16 w-full rounded-xs" />
+          ) : !template ? (
+            <p className="self-center text-sm text-ink-2">
+              No label template yet.{" "}
+              <Link
+                href="/labels"
+                className="font-medium text-foreground underline underline-offset-[3px]"
+              >
+                Set one up…
+              </Link>
+            </p>
+          ) : scale > 0 ? (
+            <div
+              role="img"
+              aria-label={`Label preview, ${asset.assetTag}, ${template.widthMm} by ${template.heightMm} mm`}
+            >
+              <LabelPreview
+                template={template}
+                asset={asset}
+                fieldDefinitions={fieldDefinitions}
+                origin={urlBaseQuery.data ?? undefined}
+                scale={scale}
+                surfaceClassName="rounded-[1mm] border-line-2 shadow-[2px_2px_0_rgba(27,29,26,.12)]"
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {template && scale > 0 && scale < 1 ? (
+        <p className="px-[18px] pt-2 text-[13px] text-muted-foreground">
+          Scaled to fit
+        </p>
+      ) : null}
+
+      <PanelFooter className={cn("mt-3.5 justify-end py-3.5")}>
+        <Button asChild variant="outline" className="max-md:w-full">
+          <Link href={`/labels/print?assetId=${asset.id}`}>
+            <Printer />
+            Print label
+          </Link>
+        </Button>
+      </PanelFooter>
+    </Panel>
+  );
+}
diff --git a/src/components/labels/element-properties.tsx b/src/components/labels/element-properties.tsx
index c2f704a..f5471be 100644
--- a/src/components/labels/element-properties.tsx
+++ b/src/components/labels/element-properties.tsx
@@ -12,8 +12,11 @@ import type {
   EditableLabelTemplate,
   LabelTemplateElement,
 } from "@/components/labels/types";
+import { Trash2, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
+import { Panel, PanelBody, PanelFooter } from "@/components/ui/panel";
 import {
   Select,
   SelectContent,
@@ -21,8 +24,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 
 export function ElementProperties({
   template,
@@ -36,7 +39,6 @@ export function ElementProperties({
   onSelectPreset,
   onChangeElement,
   onDeleteElement,
-  onCreateTemplate,
   onDeleteTemplate,
   onSave,
 }: {
@@ -56,148 +58,164 @@ export function ElementProperties({
     updater: (element: LabelTemplateElement) => LabelTemplateElement,
   ) => void;
   onDeleteElement: (elementId: string) => void;
-  onCreateTemplate: () => void;
+  /* New template lives in the template strip; kept for API compatibility. */
+  onCreateTemplate?: () => void;
   onDeleteTemplate: () => void;
   onSave: () => void;
 }) {
   return (
-    <aside className="space-y-4">
-      <section className="space-y-4 rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <h3 className="text-sm font-semibold tracking-tight">Template</h3>
-            <p className="text-xs text-muted-foreground">
-              Saved as{" "}
-              {template.id ? "an existing template" : "a new template draft"}.
-            </p>
-          </div>
-          <span className="rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs text-muted-foreground">
-            {formatLabelDimensions(template.widthMm, template.heightMm)}
-          </span>
-        </div>
-
-        <div className="space-y-1.5">
-          <label htmlFor="label-template-name" className="text-sm font-medium">
-            Name
-          </label>
-          <Input
-            id="label-template-name"
-            value={template.name}
-            disabled={!canEdit}
-            onChange={(event) =>
-              onTemplateChange((current) => ({
-                ...current,
-                name: event.target.value,
-              }))
-            }
-            placeholder="Thermal asset label"
-          />
-        </div>
-
-        <div className="space-y-1.5">
-          <span className="text-sm font-medium">Size presets</span>
-          <div className="grid gap-2 sm:grid-cols-2">
-            {LABEL_DIMENSION_PRESETS.map((preset) => {
-              const active =
-                template.widthMm === preset.widthMm &&
-                template.heightMm === preset.heightMm;
-              return (
-                <Button
-                  key={preset.label}
-                  type="button"
-                  variant={active ? "default" : "outline"}
-                  className="cursor-pointer justify-start"
-                  disabled={!canEdit}
-                  onClick={() =>
-                    onSelectPreset(preset.widthMm, preset.heightMm)
-                  }
-                >
-                  {preset.label}
-                </Button>
-              );
-            })}
+    <aside className="space-y-6">
+      <Panel>
+        <PanelBody className="space-y-4 pt-4">
+          <div className="flex items-baseline justify-between gap-3">
+            <h3 className="eyebrow">Template</h3>
+            <span className="font-mono text-[13px] font-medium text-ink-2">
+              {formatLabelDimensions(template.widthMm, template.heightMm)}
+            </span>
           </div>
-        </div>
 
-        <div className="grid gap-3 sm:grid-cols-2">
           <div className="space-y-1.5">
             <label
-              htmlFor="label-template-width"
-              className="text-sm font-medium"
+              htmlFor="label-template-name"
+              className="text-sm font-semibold"
             >
-              Width (mm)
+              Name
             </label>
             <Input
-              id="label-template-width"
-              type="number"
-              min={1}
-              step={0.5}
-              value={template.widthMm}
+              id="label-template-name"
+              value={template.name}
               disabled={!canEdit}
-              onChange={(event) => {
-                const value = Number(event.target.value);
-                if (!Number.isFinite(value)) {
-                  return;
-                }
+              onChange={(event) =>
                 onTemplateChange((current) => ({
                   ...current,
-                  widthMm: roundMm(value),
-                }));
-              }}
+                  name: event.target.value,
+                }))
+              }
+              placeholder="Thermal asset label"
             />
           </div>
+
           <div className="space-y-1.5">
-            <label
-              htmlFor="label-template-height"
-              className="text-sm font-medium"
+            <span
+              id="label-size-presets"
+              className="block text-sm font-semibold"
             >
-              Height (mm)
-            </label>
-            <Input
-              id="label-template-height"
-              type="number"
-              min={1}
-              step={0.5}
-              value={template.heightMm}
+              Size
+            </span>
+            <div
+              className="grid grid-cols-2 overflow-hidden rounded-md border-[1.5px] border-input"
+              role="group"
+              aria-labelledby="label-size-presets"
+            >
+              {LABEL_DIMENSION_PRESETS.map((preset) => {
+                const active =
+                  template.widthMm === preset.widthMm &&
+                  template.heightMm === preset.heightMm;
+                return (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    aria-pressed={active}
+                    className={cn(
+                      "h-[33px] cursor-pointer font-mono text-[13px] font-medium transition-colors not-first:border-l-[1.5px] not-first:border-input disabled:cursor-not-allowed disabled:opacity-50",
+                      active
+                        ? "bg-foreground text-background"
+                        : "bg-card text-ink-2 hover:bg-secondary hover:text-foreground",
+                    )}
+                    disabled={!canEdit}
+                    onClick={() =>
+                      onSelectPreset(preset.widthMm, preset.heightMm)
+                    }
+                  >
+                    {preset.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <label
+                htmlFor="label-template-width"
+                className="text-sm font-semibold"
+              >
+                Width (mm)
+              </label>
+              <Input
+                id="label-template-width"
+                type="number"
+                min={1}
+                step={0.5}
+                value={template.widthMm}
+                disabled={!canEdit}
+                onChange={(event) => {
+                  const value = Number(event.target.value);
+                  if (!Number.isFinite(value)) {
+                    return;
+                  }
+                  onTemplateChange((current) => ({
+                    ...current,
+                    widthMm: roundMm(value),
+                  }));
+                }}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label
+                htmlFor="label-template-height"
+                className="text-sm font-semibold"
+              >
+                Height (mm)
+              </label>
+              <Input
+                id="label-template-height"
+                type="number"
+                min={1}
+                step={0.5}
+                value={template.heightMm}
+                disabled={!canEdit}
+                onChange={(event) => {
+                  const value = Number(event.target.value);
+                  if (!Number.isFinite(value)) {
+                    return;
+                  }
+                  onTemplateChange((current) => ({
+                    ...current,
+                    heightMm: roundMm(value),
+                  }));
+                }}
+              />
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2.5">
+            <Checkbox
+              id="label-template-default"
+              className="mt-px"
+              checked={template.isDefault}
               disabled={!canEdit}
-              onChange={(event) => {
-                const value = Number(event.target.value);
-                if (!Number.isFinite(value)) {
-                  return;
-                }
+              onCheckedChange={(checked) =>
                 onTemplateChange((current) => ({
                   ...current,
-                  heightMm: roundMm(value),
-                }));
-              }}
+                  isDefault: checked === true,
+                }))
+              }
             />
+            <label htmlFor="label-template-default" className="cursor-pointer">
+              <span className="block text-sm font-semibold">
+                Default template
+              </span>
+              <span className="block text-[13px] text-ink-2">
+                New print previews use this template.
+              </span>
+            </label>
           </div>
-        </div>
-
-        <div className="flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-background/80 px-3 py-2.5">
-          <div>
-            <p className="text-sm font-medium">Default template</p>
-            <p className="text-xs text-muted-foreground">
-              New print previews will use this template automatically.
-            </p>
-          </div>
-          <Switch
-            checked={template.isDefault}
-            disabled={!canEdit}
-            onCheckedChange={(checked) =>
-              onTemplateChange((current) => ({
-                ...current,
-                isDefault: checked,
-              }))
-            }
-            aria-label="Toggle default template"
-          />
-        </div>
+        </PanelBody>
 
-        <div className="flex flex-wrap gap-2">
+        <PanelFooter className="flex-wrap">
           <Button
             type="button"
-            className="cursor-pointer"
             disabled={!canEdit || saving || !dirty}
             onClick={onSave}
             data-label-template-save
@@ -208,331 +226,346 @@ export function ElementProperties({
                 ? "Save changes"
                 : "Save template"}
           </Button>
-          <Button
-            type="button"
-            variant="outline"
-            className="cursor-pointer"
-            disabled={!canEdit || saving}
-            onClick={onCreateTemplate}
-          >
-            New template
-          </Button>
-          {template.id ? (
+          <span className="text-[13px] text-muted-foreground">
+            {dirty ? "Unsaved changes" : "All changes saved"}
+          </span>
+          {template.id && template.isDefault ? (
+            // A disabled button can't explain itself (no hover, often skipped
+            // by screen readers), so the default template says it in text.
+            <span className="ml-auto text-[13px] text-muted-foreground">
+              Default template, can&apos;t be deleted
+            </span>
+          ) : template.id ? (
             <Button
               type="button"
-              variant="outline"
-              className="cursor-pointer"
-              disabled={!canEdit || saving || deleting || template.isDefault}
+              variant="ghost"
+              size="icon-sm"
+              className="ml-auto text-destructive hover:text-destructive"
+              disabled={!canEdit || saving || deleting}
               onClick={onDeleteTemplate}
+              aria-label={deleting ? "Deleting..." : "Delete template…"}
+              title="Delete template…"
             >
-              {deleting ? "Deleting..." : "Delete template"}
+              <Trash2 />
             </Button>
           ) : null}
-        </div>
-
-        <p className="text-xs text-muted-foreground">
-          {dirty ? "Unsaved changes" : "All changes saved locally"}
-        </p>
-      </section>
-
-      <section className="space-y-4 rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm">
-        <div>
-          <h3 className="text-sm font-semibold tracking-tight">
-            Selected element
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            Fine tune placement, size, and display settings.
-          </p>
-        </div>
+        </PanelFooter>
+      </Panel>
 
-        {selectedElement ? (
-          <>
-            <div className="rounded-xl border border-border/70 bg-background/80 px-3 py-2 text-sm">
-              {getLabelElementLabel(selectedElement.type)}
-            </div>
+      <Panel>
+        <PanelBody className="space-y-4 pt-4">
+          <div className="flex items-baseline justify-between gap-3">
+            <h3 className="eyebrow">Selected element</h3>
+            {selectedElement ? (
+              <span className="text-sm font-semibold text-foreground">
+                {getLabelElementLabel(selectedElement.type)}
+              </span>
+            ) : null}
+          </div>
 
-            <div className="grid gap-3 sm:grid-cols-2">
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-x"
-                  className="text-sm font-medium"
-                >
-                  X (mm)
-                </label>
-                <Input
-                  id="label-element-x"
-                  type="number"
-                  step={0.5}
-                  value={selectedElement.xMm}
-                  disabled={!canEdit}
-                  onChange={(event) => {
-                    const value = Number(event.target.value);
-                    if (!Number.isFinite(value)) {
-                      return;
-                    }
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      xMm: roundMm(value),
-                    }));
-                  }}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-y"
-                  className="text-sm font-medium"
-                >
-                  Y (mm)
-                </label>
-                <Input
-                  id="label-element-y"
-                  type="number"
-                  step={0.5}
-                  value={selectedElement.yMm}
-                  disabled={!canEdit}
-                  onChange={(event) => {
-                    const value = Number(event.target.value);
-                    if (!Number.isFinite(value)) {
-                      return;
-                    }
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      yMm: roundMm(value),
-                    }));
-                  }}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-width"
-                  className="text-sm font-medium"
-                >
-                  Width (mm)
-                </label>
-                <Input
-                  id="label-element-width"
-                  type="number"
-                  step={0.5}
-                  min={1}
-                  value={selectedElement.widthMm}
-                  disabled={!canEdit}
-                  onChange={(event) => {
-                    const value = Number(event.target.value);
-                    if (!Number.isFinite(value)) {
-                      return;
-                    }
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      widthMm: roundMm(value),
-                    }));
-                  }}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-height"
-                  className="text-sm font-medium"
-                >
-                  Height (mm)
-                </label>
-                <Input
-                  id="label-element-height"
-                  type="number"
-                  step={0.5}
-                  min={1}
-                  value={selectedElement.heightMm}
-                  disabled={!canEdit}
-                  onChange={(event) => {
-                    const value = Number(event.target.value);
-                    if (!Number.isFinite(value)) {
-                      return;
-                    }
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      heightMm: roundMm(value),
-                    }));
-                  }}
-                />
+          {selectedElement ? (
+            <>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-x"
+                    className="text-sm font-semibold"
+                  >
+                    X (mm)
+                  </label>
+                  <Input
+                    id="label-element-x"
+                    type="number"
+                    step={0.5}
+                    value={selectedElement.xMm}
+                    disabled={!canEdit}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      if (!Number.isFinite(value)) {
+                        return;
+                      }
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        xMm: roundMm(value),
+                      }));
+                    }}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-y"
+                    className="text-sm font-semibold"
+                  >
+                    Y (mm)
+                  </label>
+                  <Input
+                    id="label-element-y"
+                    type="number"
+                    step={0.5}
+                    value={selectedElement.yMm}
+                    disabled={!canEdit}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      if (!Number.isFinite(value)) {
+                        return;
+                      }
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        yMm: roundMm(value),
+                      }));
+                    }}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-width"
+                    className="text-sm font-semibold"
+                  >
+                    Width (mm)
+                  </label>
+                  <Input
+                    id="label-element-width"
+                    type="number"
+                    step={0.5}
+                    min={1}
+                    value={selectedElement.widthMm}
+                    disabled={!canEdit}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      if (!Number.isFinite(value)) {
+                        return;
+                      }
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        widthMm: roundMm(value),
+                      }));
+                    }}
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-height"
+                    className="text-sm font-semibold"
+                  >
+                    Height (mm)
+                  </label>
+                  <Input
+                    id="label-element-height"
+                    type="number"
+                    step={0.5}
+                    min={1}
+                    value={selectedElement.heightMm}
+                    disabled={!canEdit}
+                    onChange={(event) => {
+                      const value = Number(event.target.value);
+                      if (!Number.isFinite(value)) {
+                        return;
+                      }
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        heightMm: roundMm(value),
+                      }));
+                    }}
+                  />
+                </div>
               </div>
-            </div>
 
-            {selectedElement.type === "staticText" ? (
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-text"
-                  className="text-sm font-medium"
-                >
-                  Text
-                </label>
-                <Textarea
-                  id="label-element-text"
-                  value={selectedElement.text ?? ""}
-                  disabled={!canEdit}
-                  onChange={(event) =>
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      text: event.target.value,
-                    }))
-                  }
-                  rows={3}
-                />
-              </div>
-            ) : null}
+              {selectedElement.type === "staticText" ? (
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-text"
+                    className="text-sm font-semibold"
+                  >
+                    Text
+                  </label>
+                  <Textarea
+                    id="label-element-text"
+                    value={selectedElement.text ?? ""}
+                    disabled={!canEdit}
+                    onChange={(event) =>
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        text: event.target.value,
+                      }))
+                    }
+                    rows={3}
+                  />
+                </div>
+              ) : null}
 
-            {selectedElement.type === "customField" ? (
-              <div className="space-y-1.5">
-                <label
-                  htmlFor="label-element-field"
-                  className="text-sm font-medium"
-                >
-                  Field
-                </label>
-                <Select
-                  value={String(selectedElement.fieldId ?? "")}
-                  onValueChange={(value) =>
-                    onChangeElement(selectedElement.id, (element) => ({
-                      ...element,
-                      fieldId: value as LabelTemplateElement["fieldId"],
-                    }))
-                  }
-                  disabled={!canEdit || fieldDefinitions.length === 0}
-                >
-                  <SelectTrigger id="label-element-field" className="w-full">
-                    <SelectValue placeholder="Select a custom field" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {fieldDefinitions.map((field) => (
-                      <SelectItem key={field.id} value={field.id}>
-                        {field.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            ) : null}
+              {selectedElement.type === "customField" ? (
+                <div className="space-y-1.5">
+                  <label
+                    htmlFor="label-element-field"
+                    className="text-sm font-semibold"
+                  >
+                    Field
+                  </label>
+                  <Select
+                    value={String(selectedElement.fieldId ?? "")}
+                    onValueChange={(value) =>
+                      onChangeElement(selectedElement.id, (element) => ({
+                        ...element,
+                        fieldId: value as LabelTemplateElement["fieldId"],
+                      }))
+                    }
+                    disabled={!canEdit || fieldDefinitions.length === 0}
+                  >
+                    <SelectTrigger id="label-element-field" className="w-full">
+                      <SelectValue placeholder="Select a custom field" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {fieldDefinitions.map((field) => (
+                        <SelectItem key={field.id} value={field.id}>
+                          {field.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : null}
 
-            {isTextLabelElement(selectedElement.type) ? (
-              <>
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <div className="space-y-1.5">
-                    <label
-                      htmlFor="label-element-font-size"
-                      className="text-sm font-medium"
-                    >
-                      Font size (pt)
-                    </label>
-                    <Input
-                      id="label-element-font-size"
-                      type="number"
-                      step={0.5}
-                      min={1}
-                      value={selectedElement.fontSize ?? 8}
-                      disabled={!canEdit}
-                      onChange={(event) => {
-                        const value = Number(event.target.value);
-                        if (!Number.isFinite(value)) {
-                          return;
+              {isTextLabelElement(selectedElement.type) ? (
+                <>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <label
+                        htmlFor="label-element-font-size"
+                        className="text-sm font-semibold"
+                      >
+                        Font size (pt)
+                      </label>
+                      <Input
+                        id="label-element-font-size"
+                        type="number"
+                        step={0.5}
+                        min={1}
+                        value={selectedElement.fontSize ?? 8}
+                        disabled={!canEdit}
+                        onChange={(event) => {
+                          const value = Number(event.target.value);
+                          if (!Number.isFinite(value)) {
+                            return;
+                          }
+                          onChangeElement(selectedElement.id, (element) => ({
+                            ...element,
+                            fontSize: roundMm(value),
+                          }));
+                        }}
+                      />
+                    </div>
+                    <div className="space-y-1.5">
+                      <label
+                        id="label-element-weight"
+                        className="text-sm font-semibold"
+                      >
+                        Weight
+                      </label>
+                      <Select
+                        value={selectedElement.fontWeight ?? "normal"}
+                        onValueChange={(value) =>
+                          onChangeElement(selectedElement.id, (element) => ({
+                            ...element,
+                            fontWeight:
+                              value as LabelTemplateElement["fontWeight"],
+                          }))
                         }
-                        onChangeElement(selectedElement.id, (element) => ({
-                          ...element,
-                          fontSize: roundMm(value),
-                        }));
-                      }}
-                    />
-                  </div>
-                  <div className="space-y-1.5">
-                    <label className="text-sm font-medium">Weight</label>
-                    <Select
-                      value={selectedElement.fontWeight ?? "normal"}
-                      onValueChange={(value) =>
-                        onChangeElement(selectedElement.id, (element) => ({
-                          ...element,
-                          fontWeight:
-                            value as LabelTemplateElement["fontWeight"],
-                        }))
-                      }
-                      disabled={!canEdit}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="normal">Normal</SelectItem>
-                        <SelectItem value="medium">Medium</SelectItem>
-                        <SelectItem value="semibold">Semibold</SelectItem>
-                        <SelectItem value="bold">Bold</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-1.5">
-                    <label className="text-sm font-medium">Alignment</label>
-                    <Select
-                      value={selectedElement.textAlign ?? "left"}
-                      onValueChange={(value) =>
-                        onChangeElement(selectedElement.id, (element) => ({
-                          ...element,
-                          textAlign: value as LabelTemplateElement["textAlign"],
-                        }))
-                      }
-                      disabled={!canEdit}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="left">Left</SelectItem>
-                        <SelectItem value="center">Center</SelectItem>
-                        <SelectItem value="right">Right</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-1.5">
-                    <span className="text-sm font-medium">Uppercase</span>
-                    <div className="flex h-9 items-center justify-between rounded-md border border-border/70 bg-background px-3">
-                      <span className="text-sm text-muted-foreground">
-                        Transform text
-                      </span>
-                      <Switch
+                        disabled={!canEdit}
+                      >
+                        <SelectTrigger
+                          className="w-full"
+                          aria-labelledby="label-element-weight"
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="normal">Normal</SelectItem>
+                          <SelectItem value="medium">Medium</SelectItem>
+                          <SelectItem value="semibold">Semibold</SelectItem>
+                          <SelectItem value="bold">Bold</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <label
+                        id="label-element-align"
+                        className="text-sm font-semibold"
+                      >
+                        Alignment
+                      </label>
+                      <Select
+                        value={selectedElement.textAlign ?? "left"}
+                        onValueChange={(value) =>
+                          onChangeElement(selectedElement.id, (element) => ({
+                            ...element,
+                            textAlign:
+                              value as LabelTemplateElement["textAlign"],
+                          }))
+                        }
+                        disabled={!canEdit}
+                      >
+                        <SelectTrigger
+                          className="w-full"
+                          aria-labelledby="label-element-align"
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="left">Left</SelectItem>
+                          <SelectItem value="center">Center</SelectItem>
+                          <SelectItem value="right">Right</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="flex items-center gap-2.5 sm:col-span-2">
+                      <Checkbox
+                        id="label-element-uppercase"
                         checked={selectedElement.uppercase === true}
                         disabled={!canEdit}
                         onCheckedChange={(checked) =>
                           onChangeElement(selectedElement.id, (element) => ({
                             ...element,
-                            uppercase: checked ? true : undefined,
+                            uppercase: checked === true ? true : undefined,
                           }))
                         }
-                        aria-label="Toggle uppercase"
                       />
+                      <label
+                        htmlFor="label-element-uppercase"
+                        className="cursor-pointer text-sm font-semibold"
+                      >
+                        Uppercase
+                      </label>
                     </div>
                   </div>
-                </div>
-              </>
-            ) : null}
+                </>
+              ) : null}
 
-            {selectedElement.type === "barcode" ||
-            selectedElement.type === "dataMatrix" ? (
-              <p className="text-xs text-muted-foreground">
-                The asset detail URL is encoded automatically when labels are
-                printed.
-              </p>
-            ) : null}
+              {selectedElement.type === "barcode" ||
+              selectedElement.type === "dataMatrix" ? (
+                <p className="text-[13px] text-muted-foreground">
+                  The asset detail URL is encoded automatically when labels are
+                  printed.
+                </p>
+              ) : null}
 
-            <Button
-              type="button"
-              variant="outline"
-              className="cursor-pointer"
-              disabled={!canEdit}
-              onClick={() => onDeleteElement(selectedElement.id)}
-            >
-              Remove element
-            </Button>
-          </>
-        ) : (
-          <div className="rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6 text-sm text-muted-foreground">
-            Select an element on the canvas to edit its settings.
-          </div>
-        )}
-      </section>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={!canEdit}
+                onClick={() => onDeleteElement(selectedElement.id)}
+              >
+                <X />
+                Remove element
+              </Button>
+            </>
+          ) : (
+            <p className="text-sm text-ink-2">
+              Select an element on the canvas to edit its settings.
+            </p>
+          )}
+        </PanelBody>
+      </Panel>
     </aside>
   );
 }
diff --git a/src/components/labels/element-toolbar.tsx b/src/components/labels/element-toolbar.tsx
index 881f9b8..8c87610 100644
--- a/src/components/labels/element-toolbar.tsx
+++ b/src/components/labels/element-toolbar.tsx
@@ -13,7 +13,6 @@ import {
 import { getLabelElementLabel } from "@/components/labels/helpers";
 import type { LabelElementType } from "@/components/labels/types";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 
 const ELEMENT_OPTIONS: Array<{
   type: LabelElementType;
@@ -52,15 +51,14 @@ export function ElementToolbar({
   onAddElement: (type: LabelElementType) => void;
 }) {
   return (
-    <section className="space-y-3 rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm">
-      <div>
-        <h3 className="text-sm font-semibold tracking-tight">Elements</h3>
-        <p className="text-xs text-muted-foreground">
-          Add fields and codes, then position them on the canvas.
-        </p>
-      </div>
-
-      <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-1">
+    <section
+      aria-labelledby="label-element-toolbar-title"
+      className="border-t border-border px-[18px] py-3.5"
+    >
+      <h3 id="label-element-toolbar-title" className="eyebrow mb-2.5">
+        Add to label
+      </h3>
+      <div className="flex flex-wrap gap-1.5">
         {ELEMENT_OPTIONS.map((option) => {
           const disabled =
             !canEdit || (option.type === "customField" && !canAddCustomField);
@@ -68,30 +66,28 @@ export function ElementToolbar({
             <Button
               key={option.type}
               type="button"
-              variant="outline"
-              className={cn(
-                "h-auto min-h-11 justify-start gap-3 rounded-xl px-3 py-3 text-left",
-                disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
-              )}
+              variant="secondary"
+              size="sm"
               onClick={() => onAddElement(option.type)}
               disabled={disabled}
               data-label-element={option.type}
+              title={
+                option.type === "customField" && !canAddCustomField
+                  ? "Create a custom field first"
+                  : option.description
+              }
             >
-              <option.icon className="mt-0.5 h-4 w-4 shrink-0" />
-              <span className="min-w-0">
-                <span className="block text-sm font-medium">
-                  {getLabelElementLabel(option.type)}
-                </span>
-                <span className="block text-xs text-muted-foreground">
-                  {option.type === "customField" && !canAddCustomField
-                    ? "Create a custom field first"
-                    : option.description}
-                </span>
-              </span>
+              <option.icon className="size-3.5" />
+              {getLabelElementLabel(option.type)}
             </Button>
           );
         })}
       </div>
+      {canEdit && !canAddCustomField ? (
+        <p className="mt-2 text-[13px] text-muted-foreground">
+          Custom field needs a field first. Add one under Taxonomy.
+        </p>
+      ) : null}
     </section>
   );
 }
diff --git a/src/components/labels/label-print-page-client.tsx b/src/components/labels/label-print-page-client.tsx
index 5922130..c0df7a6 100644
--- a/src/components/labels/label-print-page-client.tsx
+++ b/src/components/labels/label-print-page-client.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ArrowLeft, Printer } from "lucide-react";
+import { ArrowLeft, Printer, TriangleAlert } from "lucide-react";
 import { toast } from "sonner";
 import type { FieldDefinition } from "@/components/fields/types";
 import { formatLabelDimensions } from "@/components/labels/helpers";
@@ -13,6 +13,8 @@ import type {
   LabelTemplate,
 } from "@/components/labels/types";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Select,
   SelectContent,
@@ -246,113 +248,88 @@ export function LabelPrintPageClient() {
     (assetIds.length > 0 && assetsQuery.isPending)
   ) {
     return (
-      <div className="rounded-2xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading print preview...
+      <div className="space-y-4">
+        <span className="sr-only">Loading print preview...</span>
+        <Skeleton className="h-9 w-72 rounded-md" aria-hidden="true" />
+        <div
+          className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
+          aria-hidden="true"
+        >
+          {[0, 1, 2].map((index) => (
+            <Skeleton key={index} className="h-40 rounded-md" />
+          ))}
+        </div>
       </div>
     );
   }
 
   if (assetIds.length === 0) {
     return (
-      <div className="rounded-2xl border border-dashed border-border/70 bg-background p-8 text-center shadow-sm">
-        <h2 className="text-lg font-semibold tracking-tight">
-          No assets selected
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Choose one asset from the detail page or select assets from the assets
-          list first.
-        </p>
-        <div className="mt-4 flex justify-center gap-2">
-          <Button asChild variant="outline" className="cursor-pointer">
+      <EmptyState
+        icon={Printer}
+        title="No assets selected."
+        description="Choose one asset from the detail page or select assets from the assets list first."
+        action={
+          <Button asChild variant="outline">
             <Link href="/assets">
-              <ArrowLeft className="h-4 w-4" />
+              <ArrowLeft />
               Back to assets
             </Link>
           </Button>
-        </div>
-      </div>
+        }
+      />
     );
   }
 
   if (!selectedTemplate) {
     return (
-      <div className="rounded-2xl border border-dashed border-border/70 bg-background p-8 text-center shadow-sm">
-        <h2 className="text-lg font-semibold tracking-tight">
-          No label template available
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Create a label template first, then return to print preview.
-        </p>
-        <div className="mt-4 flex justify-center gap-2">
-          <Button asChild className="cursor-pointer">
-            <Link href="/labels">Open labels</Link>
+      <EmptyState
+        icon={Printer}
+        title="No label template available."
+        description="Create a label template first, then return to print preview."
+        action={
+          <Button asChild>
+            <Link href="/labels">Open Labels</Link>
           </Button>
-        </div>
-      </div>
+        }
+      />
     );
   }
 
-  return (
-    <div className="space-y-4" data-print-page>
-      <section
-        className="flex flex-col gap-4 rounded-2xl border border-border/70 bg-card/80 p-4 shadow-sm print:hidden"
-        data-print-controls
-      >
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
-          <div>
-            <h2 className="text-lg font-semibold tracking-tight">
-              Print preview
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              Review the rendered labels, then use your browser print dialog.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button asChild variant="outline" className="cursor-pointer">
-              <Link href="/assets">
-                <ArrowLeft className="h-4 w-4" />
-                Back to assets
-              </Link>
-            </Button>
-            <Button
-              type="button"
-              className="cursor-pointer"
-              disabled={barcodeRenderState !== "ready"}
-              onClick={() => {
-                if (barcodeRenderState === "loading") {
-                  toast.error("Wait for the label codes to finish rendering.");
-                  return;
-                }
-
-                if (barcodeRenderState === "error") {
-                  toast.error(
-                    "Some label codes failed to render. Resolve that before printing.",
-                  );
-                  return;
-                }
-
-                window.print();
-              }}
-            >
-              <Printer className="h-4 w-4" />
-              Print now
-            </Button>
-          </div>
-        </div>
-
-        {barcodeRenderState !== "ready" ? (
-          <p className="text-sm text-muted-foreground">
-            {barcodeRenderState === "loading"
-              ? "Preparing barcode and Data Matrix output before printing."
-              : "Barcode or Data Matrix rendering failed. Printing is blocked until the preview is valid."}
-          </p>
-        ) : null}
+  const printButton = (
+    <Button
+      type="button"
+      className="max-sm:h-11 max-sm:flex-1"
+      disabled={barcodeRenderState !== "ready"}
+      onClick={() => {
+        if (barcodeRenderState === "loading") {
+          toast.error("Wait for the label codes to finish rendering.");
+          return;
+        }
+
+        if (barcodeRenderState === "error") {
+          toast.error(
+            "Some label codes failed to render. Resolve that before printing.",
+          );
+          return;
+        }
+
+        window.print();
+      }}
+    >
+      <Printer />
+      Print now
+    </Button>
+  );
 
-        <div className="grid gap-3 lg:grid-cols-[minmax(0,280px)_1fr_1fr]">
-          <div className="space-y-1.5">
+  return (
+    <div className="space-y-6" data-print-page>
+      <section className="space-y-3 print:hidden" data-print-controls>
+        <div className="flex flex-wrap items-end gap-x-6 gap-y-3">
+          <div className="w-full space-y-1.5 sm:w-72">
             <label
               htmlFor="label-print-template"
-              className="text-sm font-medium"
+              className="text-sm font-semibold"
             >
               Template
             </label>
@@ -373,27 +350,62 @@ export function LabelPrintPageClient() {
             </Select>
           </div>
 
-          <div className="rounded-xl border border-border/70 bg-background/80 px-3 py-2.5">
-            <p className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-              Dimensions
-            </p>
-            <p className="mt-1 text-sm font-medium">
-              {formatLabelDimensions(
-                selectedTemplate.widthMm,
-                selectedTemplate.heightMm,
-              )}
-            </p>
-          </div>
-
-          <div className="rounded-xl border border-border/70 bg-background/80 px-3 py-2.5">
-            <p className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-              Labels
-            </p>
-            <p className="mt-1 text-sm font-medium">
-              {assets.length} {assets.length === 1 ? "asset" : "assets"}
-            </p>
+          <dl className="flex gap-6 pb-1.5 text-sm">
+            <div>
+              <dt className="eyebrow">Size</dt>
+              <dd className="mt-0.5 font-mono font-medium text-foreground">
+                {formatLabelDimensions(
+                  selectedTemplate.widthMm,
+                  selectedTemplate.heightMm,
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt className="eyebrow">Labels</dt>
+              <dd className="mt-0.5 font-medium text-foreground">
+                {assets.length} {assets.length === 1 ? "asset" : "assets"}
+              </dd>
+            </div>
+          </dl>
+
+          <div className="flex w-full gap-2 sm:ml-auto sm:w-auto">
+            <Button
+              asChild
+              variant="secondary"
+              className="max-sm:h-11 max-sm:flex-1"
+            >
+              <Link href="/assets">
+                <ArrowLeft />
+                Back to assets
+              </Link>
+            </Button>
+            {printButton}
           </div>
         </div>
+
+        {barcodeRenderState !== "ready" ? (
+          <p
+            className={
+              barcodeRenderState === "error"
+                ? "flex items-start gap-1.5 text-sm font-medium text-destructive"
+                : "text-sm text-muted-foreground"
+            }
+          >
+            {barcodeRenderState === "error" ? (
+              <TriangleAlert
+                className="mt-0.5 size-4 shrink-0"
+                aria-hidden="true"
+              />
+            ) : null}
+            {barcodeRenderState === "loading"
+              ? "Preparing barcode and Data Matrix output before printing."
+              : "Barcode or Data Matrix rendering failed. Printing is blocked until the preview is valid."}
+          </p>
+        ) : (
+          <p className="text-[13px] text-muted-foreground">
+            Print now opens your browser’s print dialog, one label per page.
+          </p>
+        )}
       </section>
 
       <div ref={previewRef}>
diff --git a/src/components/labels/label-print.tsx b/src/components/labels/label-print.tsx
index df97d48..ab3298b 100644
--- a/src/components/labels/label-print.tsx
+++ b/src/components/labels/label-print.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import type { FieldDefinition } from "@/components/fields/types";
-import { formatLabelDimensions } from "@/components/labels/helpers";
 import { LabelPreview } from "@/components/labels/label-preview";
 import type {
   LabelPreviewAsset,
   LabelTemplate,
 } from "@/components/labels/types";
+import { TagChip } from "@/components/ui/tag-chip";
 
 export function LabelPrint({
   template,
@@ -32,20 +32,20 @@ export function LabelPrint({
             background: white !important;
           }
 
+          /* The Workshop shell: sidebar, rail, phone top and bottom bars. */
+          body aside,
+          body header,
+          body nav,
           [data-slot="sidebar-gap"],
           [data-slot="sidebar-container"],
           [data-slot="sidebar-inset"] > header {
             display: none !important;
           }
 
-          [data-slot="sidebar-inset"] {
-            margin: 0 !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-          }
-
+          body main,
           [data-slot="sidebar-inset"] > main {
             padding: 0 !important;
+            max-width: none !important;
             overflow: visible !important;
           }
 
@@ -78,41 +78,33 @@ export function LabelPrint({
         }
       `}</style>
 
-      <div className="space-y-4" data-print-label-sheet>
+      <ul
+        className="grid gap-x-6 gap-y-7 sm:grid-cols-[repeat(auto-fill,minmax(260px,1fr))] print:block"
+        data-print-label-sheet
+      >
         {assets.map((asset) => (
-          <section
-            key={asset.id}
-            className="rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm print:border-0 print:bg-transparent print:p-0 print:shadow-none"
-            data-print-label
-          >
-            <div className="mb-3 flex items-start justify-between gap-3 print:hidden">
-              <div>
-                <h2 className="text-sm font-semibold tracking-tight">
-                  {asset.name}
-                </h2>
-                <p className="text-xs text-muted-foreground">
-                  {asset.assetTag}
-                </p>
-              </div>
-              <span className="rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs text-muted-foreground">
-                {formatLabelDimensions(template.widthMm, template.heightMm)}
-              </span>
+          <li key={asset.id} className="min-w-0 print:p-0" data-print-label>
+            <div className="mb-2 flex items-center gap-2 print:hidden">
+              <TagChip weight="table">{asset.assetTag}</TagChip>
+              <h2 className="min-w-0 truncate text-sm font-medium text-foreground">
+                {asset.name}
+              </h2>
             </div>
 
-            <div className="flex justify-center print:block">
+            <div className="flex justify-center overflow-x-auto rounded-md bg-secondary p-4 print:block print:overflow-visible print:bg-transparent print:p-0">
               <LabelPreview
                 template={template}
                 asset={asset}
                 fieldDefinitions={fieldDefinitions}
                 origin={origin}
                 scale={1}
-                className="print:!h-auto print:!w-auto"
-                surfaceClassName="print:rounded-none print:border-0 print:shadow-none"
+                className="shrink-0 print:!h-auto print:!w-auto"
+                surfaceClassName="border-line-2 shadow-none print:rounded-none print:border-0"
               />
             </div>
-          </section>
+          </li>
         ))}
-      </div>
+      </ul>
     </>
   );
 }
diff --git a/src/components/labels/labels-page-client.tsx b/src/components/labels/labels-page-client.tsx
index 914b33a..7302afa 100644
--- a/src/components/labels/labels-page-client.tsx
+++ b/src/components/labels/labels-page-client.tsx
@@ -13,6 +13,8 @@ import type {
   LabelTemplate,
 } from "@/components/labels/types";
 import { Button } from "@/components/ui/button";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { getLabelPreviewAsset } from "@/lib/api/assets";
@@ -89,8 +91,10 @@ export function LabelsPageClient() {
     fieldDefinitionsQuery.isPending
   ) {
     return (
-      <div className="rounded-2xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading label designer...
+      <div className="space-y-6">
+        <span className="sr-only">Loading label designer...</span>
+        <Skeleton className="h-10 w-80 rounded-md" aria-hidden="true" />
+        <Skeleton className="h-72 rounded-md" aria-hidden="true" />
       </div>
     );
   }
@@ -139,19 +143,22 @@ function MobileLabelList({
   labelUrlBase: string | null;
 }) {
   return (
-    <div className="flex flex-col gap-4" data-testid="labels-mobile-view">
+    <div className="space-y-6" 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"
+        className="flex items-start gap-3 text-sm"
         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">
+        <Monitor
+          className="mt-0.5 size-5 shrink-0 text-ink-2"
+          aria-hidden="true"
+        />
+        <div>
+          <p className="font-semibold text-foreground">
             {currentUserRole === "admin"
               ? "Open Stowage on desktop to edit"
               : "Label previews are read-only"}
           </p>
-          <p>
+          <p className="mt-0.5 text-ink-2">
             {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."}
@@ -159,51 +166,56 @@ function MobileLabelList({
         </div>
       </div>
 
-      <Button asChild className="w-full cursor-pointer">
+      <Button asChild className="h-11 w-full md:hidden">
         <Link href="/labels/print">
-          <Printer className="h-4 w-4" />
-          Print labels
+          <Printer />
+          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">
+      <section aria-labelledby="labels-mobile-templates">
+        <SheetHeading
+          title={<span id="labels-mobile-templates">Templates</span>}
+          count={templates.length}
+        />
+        {templates.length === 0 ? (
+          <p className="py-4 text-sm text-ink-2">No templates yet.</p>
+        ) : (
+          <ul data-testid="labels-mobile-template-list">
+            {templates.map((template) => (
+              <li
+                key={template.id}
+                className="border-b border-border py-4"
+                data-testid={`labels-mobile-template-${template.id}`}
+              >
+                <div className="flex items-baseline justify-between gap-3">
+                  <p className="min-w-0 truncate text-sm font-semibold text-foreground">
                     {template.name}
+                    {template.isDefault ? (
+                      <span className="ml-2 font-normal text-muted-foreground">
+                        Default
+                      </span>
+                    ) : null}
                   </p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="shrink-0 font-mono text-[13px] font-medium text-ink-2">
                     {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 className="mt-3 flex items-center justify-center overflow-hidden rounded-md bg-secondary p-4">
+                  <LabelPreview
+                    template={template}
+                    asset={sampleAsset}
+                    fieldDefinitions={fieldDefinitions}
+                    origin={labelUrlBase ?? undefined}
+                    scale={0.7}
+                    surfaceClassName="border-line-2 shadow-none"
+                  />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
     </div>
   );
 }
diff --git a/src/components/labels/printed-label.tsx b/src/components/labels/printed-label.tsx
new file mode 100644
index 0000000..2dd3ee8
--- /dev/null
+++ b/src/components/labels/printed-label.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useBarcodeSvg } from "@/components/labels/use-barcode-svg";
+import { cn } from "@/lib/utils";
+
+/*
+  A real printed label: Code 128 across the top, the tag and name under it,
+  and a Data Matrix at the right, rendered by the app's own label engine.
+  Used as the brand object on the login plate.
+*/
+export function PrintedLabel({
+  tag,
+  name,
+  topLeft,
+  topRight,
+  url,
+  className,
+}: {
+  tag: string;
+  name: string;
+  topLeft: string;
+  topRight: string;
+  url: string;
+  className?: string;
+}) {
+  const barcode = useBarcodeSvg("code128", tag);
+  const matrix = useBarcodeSvg("datamatrix", url);
+
+  return (
+    <figure
+      data-slot="printed-label"
+      aria-label={`Printed label for ${tag}, ${name}`}
+      className={cn(
+        "w-full rounded-xs bg-white px-[26px] pt-[22px] pb-5 text-[#1b1d1a] shadow-[10px_10px_0_var(--color-amber)] max-md:px-3.5 max-md:pt-3 max-md:pb-3 max-md:shadow-[5px_5px_0_var(--color-amber)]",
+        className,
+      )}
+    >
+      <div className="mb-2.5 flex justify-between gap-4 font-mono text-[13px] font-semibold tracking-[0.06em] uppercase max-md:mb-2 max-md:text-[11px]">
+        <span>{topLeft}</span>
+        <span>{topRight}</span>
+      </div>
+      <div
+        aria-hidden="true"
+        className="h-24 w-full max-md:h-11 [&_svg]:h-full [&_svg]:w-full"
+        // The engine's SVG is stretched to the label width like a printed bar.
+        dangerouslySetInnerHTML={
+          barcode
+            ? {
+                __html: barcode.replace(
+                  "<svg ",
+                  '<svg preserveAspectRatio="none" ',
+                ),
+              }
+            : undefined
+        }
+      />
+      <div className="mt-3 flex items-end justify-between gap-4">
+        <figcaption className="min-w-0">
+          <div className="font-mono text-[34px] leading-none font-semibold tracking-[0.04em] max-md:text-xl">
+            {tag}
+          </div>
+          <div className="mt-2 truncate text-[15px] font-semibold max-md:mt-1 max-md:text-[13px]">
+            {name}
+          </div>
+        </figcaption>
+        <div
+          aria-hidden="true"
+          className="size-[76px] shrink-0 max-md:size-[46px] [&_svg]:h-full [&_svg]:w-full"
+          dangerouslySetInnerHTML={matrix ? { __html: matrix } : undefined}
+        />
+      </div>
+    </figure>
+  );
+}
diff --git a/src/components/labels/template-canvas.tsx b/src/components/labels/template-canvas.tsx
index de9b62f..d370bda 100644
--- a/src/components/labels/template-canvas.tsx
+++ b/src/components/labels/template-canvas.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { FieldDefinition } from "@/components/fields/types";
 import { BarcodeRenderer } from "@/components/labels/barcode-renderer";
 import {
@@ -110,16 +110,32 @@ export function TemplateCanvas({
   onDeleteElement,
 }: TemplateCanvasProps) {
   const surfaceRef = useRef<HTMLDivElement | null>(null);
+  const frameRef = useRef<HTMLDivElement | null>(null);
   const interactionRef = useRef<ActiveInteraction | null>(null);
+  // The canvas scales to the width it has, up to 560px, so it fits the
+  // designer column instead of scrolling sideways.
+  const [frameWidth, setFrameWidth] = useState<number | null>(null);
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setFrameWidth(Math.floor(entry.contentRect.width));
+    });
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, []);
   const scale = useMemo(() => {
-    const maxWidthPx = 560;
+    const maxWidthPx = frameWidth ? Math.min(560, frameWidth) : 560;
     const maxHeightPx = 360;
     const widthScale = maxWidthPx / (template.widthMm * MM_TO_PX);
     const heightScale = maxHeightPx / (template.heightMm * MM_TO_PX);
     return Number(
-      Math.max(1.65, Math.min(widthScale, heightScale, 4.5)).toFixed(2),
+      Math.max(
+        frameWidth ? 1 : 1.65,
+        Math.min(widthScale, heightScale, 4.5),
+      ).toFixed(2),
     );
-  }, [template.heightMm, template.widthMm]);
+  }, [frameWidth, template.heightMm, template.widthMm]);
   const wrapperWidth = template.widthMm * MM_TO_PX * scale;
   const wrapperHeight = template.heightMm * MM_TO_PX * scale;
   const resolvedOrigin = useLabelOrigin(origin);
@@ -200,21 +216,23 @@ export function TemplateCanvas({
   );
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-3">
-        <div>
-          <h3 className="text-sm font-semibold tracking-tight">Canvas</h3>
-          <p className="text-xs text-muted-foreground">
-            Drag elements to move them. Use the handle to resize in{" "}
-            {LABEL_GRID_STEP_MM} mm steps.
+    <div>
+      <div className="flex items-baseline justify-between gap-3 border-b border-border px-[18px] py-3">
+        <div className="min-w-0">
+          <h3 className="eyebrow">Canvas</h3>
+          <p className="mt-0.5 text-[13px] text-ink-2">
+            {readOnly
+              ? "Only admins can change label templates."
+              : `Drag to move, use the corner handle to resize in ${LABEL_GRID_STEP_MM} mm steps. Arrow keys nudge.`}
           </p>
         </div>
-        <div className="rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs text-muted-foreground">
+        <span className="shrink-0 font-mono text-[13px] font-medium text-ink-2">
           {template.widthMm} x {template.heightMm} mm
-        </div>
+        </span>
       </div>
 
-      <div className="overflow-x-auto rounded-2xl border border-border/70 bg-gradient-to-br from-slate-100/80 via-white to-slate-50 p-4 shadow-sm dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+      <div className="overflow-x-auto bg-secondary px-4 py-6 md:px-6 md:py-8">
+        <div ref={frameRef} className="w-full" aria-hidden="true" />
         <div
           className="relative mx-auto"
           style={{ width: `${wrapperWidth}px`, height: `${wrapperHeight}px` }}
@@ -229,12 +247,12 @@ export function TemplateCanvas({
             }}
           >
             <div
-              className="relative overflow-hidden rounded-[2.4mm] border border-slate-300 bg-white shadow-lg"
+              className="relative overflow-hidden rounded-[2.4mm] border border-[#bdbfb7] bg-white"
               style={{
                 width: `${template.widthMm}mm`,
                 height: `${template.heightMm}mm`,
                 backgroundImage:
-                  "linear-gradient(to right, rgba(148,163,184,0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,0.12) 1px, transparent 1px)",
+                  "linear-gradient(to right, rgba(27,29,26,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(27,29,26,0.07) 1px, transparent 1px)",
                 backgroundSize: "2mm 2mm",
               }}
               onPointerDown={() => onSelectElement(null)}
@@ -257,8 +275,8 @@ export function TemplateCanvas({
                         ? "rounded-none"
                         : "rounded-[1.6mm]",
                       isSelected
-                        ? "border-slate-600 shadow-[0_0_0_0.8mm_rgba(100,116,139,0.18)]"
-                        : "border-slate-300 shadow-[0_0_0_0.2mm_rgba(148,163,184,0.2)] hover:border-slate-400 hover:shadow-[0_0_0_0.6mm_rgba(148,163,184,0.18)]",
+                        ? "border-[#1b1d1a] shadow-[0_0_0_0.6mm_rgba(27,29,26,0.14)]"
+                        : "border-dashed border-[#bdbfb7] hover:border-solid hover:border-[#7a7e76]",
                       readOnly ? "cursor-default" : "cursor-move",
                     )}
                     style={{
@@ -363,7 +381,7 @@ export function TemplateCanvas({
                     {!readOnly ? (
                       <span
                         className={cn(
-                          "absolute right-[0.45mm] bottom-[0.45mm] block h-[1.2mm] w-[1.2mm] rounded-full border border-white bg-slate-600 shadow-sm",
+                          "absolute right-[0.45mm] bottom-[0.45mm] block h-[1.2mm] w-[1.2mm] cursor-nwse-resize rounded-[0.3mm] border border-white bg-[#1b1d1a]",
                           isSelected ? "opacity-100" : "opacity-0",
                         )}
                         onPointerDown={(event) => {
diff --git a/src/components/labels/template-designer.tsx b/src/components/labels/template-designer.tsx
index 827d8cd..9f8a36c 100644
--- a/src/components/labels/template-designer.tsx
+++ b/src/components/labels/template-designer.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Plus, Sparkles } from "lucide-react";
+import { Plus } from "lucide-react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
@@ -28,6 +28,8 @@ import type {
   LabelTemplateElement,
 } from "@/components/labels/types";
 import { Button } from "@/components/ui/button";
+import { Panel } from "@/components/ui/panel";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 import {
   createLabelTemplate,
   deleteLabelTemplate,
@@ -362,123 +364,146 @@ export function TemplateDesigner({
 
   return (
     <>
-      <div className="grid gap-4 xl:grid-cols-[280px_minmax(0,1fr)_340px]">
-        <div className="space-y-4">
-          <section className="space-y-3 rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <h2 className="text-sm font-semibold tracking-tight">
-                  Templates
-                </h2>
-                <p className="text-xs text-muted-foreground">
-                  Pick a saved layout or create a new one.
-                </p>
-              </div>
-              {canManage ? (
-                <Button
-                  type="button"
-                  size="sm"
-                  className="cursor-pointer"
-                  onClick={handleCreateTemplate}
-                >
-                  <Plus className="h-4 w-4" />
-                  New
-                </Button>
-              ) : null}
-            </div>
-
+      <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_300px] xl:grid-cols-[minmax(0,1fr)_320px] xl:gap-7">
+        <div className="min-w-0 space-y-6">
+          <section aria-labelledby="label-templates-title">
+            <h2 id="label-templates-title" className="sr-only">
+              Templates
+            </h2>
             {templates.length === 0 ? (
-              <div className="rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6 text-sm text-muted-foreground">
-                No label templates yet.
+              <div className="flex items-center justify-between gap-3 border-b border-border pb-2.5">
+                <p className="text-sm text-ink-2">No label templates yet.</p>
+                {canManage ? (
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="sm"
+                    onClick={handleCreateTemplate}
+                  >
+                    <Plus />
+                    New template
+                  </Button>
+                ) : null}
               </div>
             ) : (
-              <div className="space-y-2">
-                {templates.map((template) => {
-                  const active = activeTemplate.id === template.id;
-                  return (
-                    <button
-                      key={template.id}
-                      type="button"
-                      className={cn(
-                        "flex w-full cursor-pointer items-start justify-between gap-3 rounded-xl border px-3 py-3 text-left transition-colors",
-                        active
-                          ? "border-slate-600 bg-slate-100 shadow-sm dark:bg-slate-900"
-                          : "border-border/70 bg-background/80 hover:border-slate-400 hover:bg-accent/50",
-                      )}
-                      onClick={() => handleSelectTemplate(template)}
-                    >
-                      <span className="min-w-0">
-                        <span className="block truncate text-sm font-medium">
-                          {template.name}
-                        </span>
-                        <span className="block text-xs text-muted-foreground">
-                          {formatLabelDimensions(
-                            template.widthMm,
-                            template.heightMm,
+              <div className="flex items-stretch gap-3 border-b border-border">
+                <ul
+                  className="-mb-px flex min-w-0 flex-1 items-stretch gap-0.5 overflow-x-auto"
+                  aria-label="Label templates"
+                >
+                  {templates.map((template) => {
+                    const active = activeTemplate.id === template.id;
+                    return (
+                      <li
+                        key={template.id}
+                        className="flex shrink-0 first:[&>button]:pl-0.5"
+                      >
+                        <button
+                          type="button"
+                          aria-current={active ? "true" : undefined}
+                          className={cn(
+                            "flex shrink-0 cursor-pointer flex-col items-start border-b-[3px] px-3 pt-1 pb-2 text-left transition-colors",
+                            active
+                              ? "border-amber-ink text-foreground"
+                              : "border-transparent text-ink-2 hover:text-foreground",
                           )}
-                        </span>
+                          onClick={() => handleSelectTemplate(template)}
+                        >
+                          <span
+                            className={cn(
+                              "text-sm whitespace-nowrap",
+                              active ? "font-semibold" : "font-medium",
+                            )}
+                          >
+                            {template.name}
+                          </span>
+                          <span className="text-[13px] whitespace-nowrap text-muted-foreground">
+                            <span className="font-mono font-medium">
+                              {formatLabelDimensions(
+                                template.widthMm,
+                                template.heightMm,
+                              )}
+                            </span>
+                            {template.isDefault ? (
+                              <span> · Default</span>
+                            ) : null}
+                          </span>
+                        </button>
+                      </li>
+                    );
+                  })}
+                  {selectedTemplateId === "new" ? (
+                    <li
+                      aria-current="true"
+                      className="flex shrink-0 flex-col items-start border-b-[3px] border-amber-ink px-3 pt-1 pb-2"
+                    >
+                      <span className="text-sm font-semibold whitespace-nowrap text-foreground">
+                        {activeTemplate.name.trim() || "New template"}
+                      </span>
+                      <span className="text-[13px] whitespace-nowrap text-muted-foreground">
+                        Not saved yet
                       </span>
-                      {template.isDefault ? (
-                        <span className="rounded-full border border-emerald-300/70 bg-emerald-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-700 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-300">
-                          Default
-                        </span>
-                      ) : null}
-                    </button>
-                  );
-                })}
+                    </li>
+                  ) : null}
+                </ul>
+                {canManage ? (
+                  <div className="flex shrink-0 items-center pb-2">
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      onClick={handleCreateTemplate}
+                    >
+                      <Plus />
+                      New template
+                    </Button>
+                  </div>
+                ) : null}
               </div>
             )}
           </section>
 
-          <ElementToolbar
-            canEdit={canManage}
-            canAddCustomField={fieldDefinitions.length > 0}
-            onAddElement={handleAddElement}
-          />
-        </div>
-
-        <div className="space-y-4">
-          <TemplateCanvas
-            template={activeTemplate}
-            sampleAsset={sampleAsset}
-            fieldDefinitions={fieldDefinitions}
-            origin={labelUrlBase ?? undefined}
-            selectedElementId={selectedElementId}
-            readOnly={!canManage}
-            onSelectElement={setSelectedElementId}
-            onDeleteElement={handleDeleteElement}
-            onChangeElement={handleChangeElement}
-          />
-
-          <section className="space-y-3 rounded-2xl border border-border/70 bg-card/70 p-4 shadow-sm">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <h3 className="text-sm font-semibold tracking-tight">
-                  Live preview
-                </h3>
-                <p className="text-xs text-muted-foreground">
-                  Real asset data rendered with the current template.
-                </p>
-              </div>
-              <Sparkles className="h-4 w-4 text-muted-foreground" />
-            </div>
-
-            <div className="overflow-x-auto rounded-2xl border border-border/70 bg-muted/20 p-4">
+          <Panel className="overflow-hidden">
+            <TemplateCanvas
+              template={activeTemplate}
+              sampleAsset={sampleAsset}
+              fieldDefinitions={fieldDefinitions}
+              origin={labelUrlBase ?? undefined}
+              selectedElementId={selectedElementId}
+              readOnly={!canManage}
+              onSelectElement={setSelectedElementId}
+              onDeleteElement={handleDeleteElement}
+              onChangeElement={handleChangeElement}
+            />
+            <ElementToolbar
+              canEdit={canManage}
+              canAddCustomField={fieldDefinitions.length > 0}
+              onAddElement={handleAddElement}
+            />
+          </Panel>
+
+          <section aria-labelledby="label-preview-title">
+            <SheetHeading
+              title={<span id="label-preview-title">Preview</span>}
+              as="h3"
+            />
+            <p className="px-0.5 pt-1.5 text-[13px] text-muted-foreground">
+              {sampleAsset
+                ? `Close to printed size, with ${sampleAsset.name}. Print preview uses the same renderer.`
+                : "No assets yet. Placeholder values are shown until an asset exists."}
+            </p>
+            <div className="mt-3 overflow-x-auto rounded-md bg-secondary p-5">
               <div className="mx-auto w-max">
                 <LabelPreview
                   template={activeTemplate}
                   asset={sampleAsset}
                   fieldDefinitions={fieldDefinitions}
                   origin={labelUrlBase ?? undefined}
-                  scale={2.35}
+                  scale={1}
+                  surfaceClassName="border-line-2 shadow-none"
                 />
               </div>
             </div>
-            <p className="text-xs text-muted-foreground">
-              {sampleAsset
-                ? `Previewing with ${sampleAsset.name}. Print preview uses the same renderer.`
-                : "No assets yet. Placeholder values are shown until an asset exists."}
-            </p>
           </section>
         </div>
 
@@ -508,8 +533,8 @@ export function TemplateDesigner({
 
       <ConfirmDialog
         open={deleteOpen}
-        title="Delete label template"
-        description={`Delete ${activeTemplate.name || "this template"}?`}
+        title="Delete label template?"
+        description={`${activeTemplate.name || "This template"} is deleted. Printed labels are not affected.`}
         confirmLabel="Delete template"
         busy={deleting}
         onConfirm={() => {
diff --git a/src/components/labels/use-barcode-svg.ts b/src/components/labels/use-barcode-svg.ts
new file mode 100644
index 0000000..4c283d2
--- /dev/null
+++ b/src/components/labels/use-barcode-svg.ts
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { generateBarcodeSvg } from "@/components/labels/barcode-renderer";
+
+/*
+  Renders a Code 128 or Data Matrix symbol with the app's own label engine
+  (bwip-js) and returns the SVG markup. Returns null until it is ready.
+*/
+export function useBarcodeSvg(
+  type: "code128" | "datamatrix",
+  data: string | null | undefined,
+) {
+  const value = data?.trim() ?? "";
+  const [state, setState] = useState<{ key: string; svg: string | null }>({
+    key: "",
+    svg: null,
+  });
+  const key = `${type}:${value}`;
+
+  useEffect(() => {
+    if (!value) return;
+    let cancelled = false;
+    void generateBarcodeSvg({ type, data: value })
+      .then((svg) => {
+        if (!cancelled) setState({ key, svg });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ key, svg: null });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, type, value]);
+
+  return state.key === key ? state.svg : null;
+}
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 856fab9..1658bf0 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -1,21 +1,25 @@
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { AppRail, AppSidebar } from "@/components/layout/app-sidebar";
 import { BottomNav } from "@/components/layout/bottom-nav";
-import { Topbar } from "@/components/layout/topbar";
+import { MobileTopBar } from "@/components/layout/mobile-top-bar";
+import { GlobalSearchDialog } from "@/components/search/global-search";
 
+/*
+  The Workshop shell: a charcoal sidebar on desktop, an 88px labelled rail on
+  tablet, and charcoal top and bottom bars on phones, around the concrete.
+*/
 export function AppShell({ children }: { children: React.ReactNode }) {
   return (
-    <SidebarProvider className="max-lg:h-auto max-lg:overflow-visible">
-      <div className="hidden lg:contents">
-        <AppSidebar />
-      </div>
-      <SidebarInset>
-        <Topbar />
-        <main className="flex-1 p-4 pb-24 lg:overflow-auto lg:p-6 lg:pb-6">
+    <div className="flex min-h-dvh bg-background">
+      <AppSidebar />
+      <AppRail />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <MobileTopBar />
+        <main className="w-full max-w-[1380px] flex-1 px-4 pt-4 pb-24 md:px-6 md:pt-6 md:pb-14 lg:px-9 lg:pt-8 lg:pb-10">
           {children}
         </main>
         <BottomNav />
-      </SidebarInset>
-    </SidebarProvider>
+      </div>
+      <GlobalSearchDialog />
+    </div>
   );
 }
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
index 80f8aa9..6ee7fdc 100644
--- a/src/components/layout/app-sidebar.tsx
+++ b/src/components/layout/app-sidebar.tsx
@@ -1,151 +1,226 @@
 "use client";
 
-import { usePathname } from "next/navigation";
 import Link from "next/link";
-import Image from "next/image";
-import {
-  LayoutDashboard,
-  Package,
-  MapPin,
-  Layers,
-  Wrench,
-  Printer,
-  Settings,
-} from "lucide-react";
+import { usePathname } from "next/navigation";
+import { ScanLine } from "lucide-react";
+import { StowageMark } from "@/components/brand/stowage-mark";
+import { GlobalSearch } from "@/components/search/global-search";
+import { UserMenu } from "@/components/layout/user-menu";
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarSeparator,
-} from "@/components/ui/sidebar";
-
-type NavItem = {
-  title: string;
-  href: string;
-  icon: React.ComponentType<{ className?: string }>;
-};
+  NAV_GROUPS,
+  SETTINGS_ITEM,
+  isNavItemActive,
+  type NavItem,
+} from "@/components/layout/nav-config";
+import { useOverdueCount } from "@/hooks/use-overdue-count";
+import { cn } from "@/lib/utils";
 
-const inventoryItems: NavItem[] = [
-  { title: "Assets", href: "/assets", icon: Package },
-  { title: "Locations", href: "/locations", icon: MapPin },
-];
-
-const organizeItems: NavItem[] = [
-  { title: "Taxonomy", href: "/taxonomy", icon: Layers },
-];
+function OverdueBadge({ count, className }: { count: number; className?: string }) {
+  if (count <= 0) return null;
+  return (
+    <span
+      aria-label={`${count} overdue`}
+      className={cn(
+        "grid h-5 min-w-5 place-items-center rounded-md bg-destructive px-1.5 font-mono text-[13px] font-semibold text-white",
+        className,
+      )}
+    >
+      {count}
+    </span>
+  );
+}
 
-const maintainItems: NavItem[] = [
-  { title: "Services", href: "/services", icon: Wrench },
-  { title: "Labels", href: "/labels", icon: Printer },
-];
+function SidebarItem({
+  item,
+  active,
+  overdue,
+}: {
+  item: NavItem;
+  active: boolean;
+  overdue: number;
+}) {
+  const Icon = item.icon;
+  return (
+    <Link
+      href={item.href}
+      aria-current={active ? "page" : undefined}
+      className={cn(
+        "relative flex h-[38px] items-center gap-[11px] rounded-md px-3 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-white",
+        active &&
+          "bg-sidebar-accent text-white before:absolute before:top-2 before:bottom-2 before:left-0 before:w-[3px] before:rounded-xs before:bg-sidebar-primary",
+      )}
+    >
+      <Icon
+        className={cn(
+          "size-[17px]",
+          active ? "text-sidebar-primary" : "text-sidebar-muted",
+        )}
+        aria-hidden="true"
+      />
+      {item.title}
+      {item.badge === "overdue" ? (
+        <OverdueBadge count={overdue} className="ml-auto" />
+      ) : null}
+    </Link>
+  );
+}
 
-const dashboardItems: NavItem[] = [
-  { title: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
-];
+/*
+  Desktop (1024px and up): a 252px charcoal sidebar. Search and "Scan a label"
+  sit at the top; the current item carries the amber mark.
+*/
+export function AppSidebar() {
+  const pathname = usePathname();
+  const overdue = useOverdueCount();
 
-function isItemActive(pathname: string, href: string) {
-  if (href === "/dashboard") return pathname === "/dashboard";
-  if (href === "/taxonomy") {
-    return (
-      pathname.startsWith("/taxonomy") ||
-      pathname.startsWith("/categories") ||
-      pathname.startsWith("/tags") ||
-      pathname.startsWith("/fields")
-    );
-  }
-  return pathname.startsWith(href);
+  return (
+    <aside
+      aria-label="Main"
+      className="on-charcoal sticky top-0 hidden h-dvh w-[252px] shrink-0 flex-col bg-sidebar text-sidebar-foreground lg:flex"
+    >
+      <Link
+        href="/dashboard"
+        className="wide flex items-center gap-2.5 px-[18px] pt-[18px] pb-3.5 text-base font-bold text-white"
+      >
+        <StowageMark size={24} color="#fff" />
+        Stowage
+      </Link>
+      <div className="space-y-1.5 px-3 pb-2">
+        <GlobalSearch variant="sidebar" />
+        <Link
+          href="/scan"
+          className="flex h-9 items-center justify-center gap-2 rounded-md border-[1.5px] border-sidebar-muted text-sm font-semibold text-white hover:bg-sidebar-accent"
+        >
+          <ScanLine className="size-4" aria-hidden="true" />
+          Scan a label
+        </Link>
+      </div>
+      <nav className="flex-1 overflow-y-auto">
+        {NAV_GROUPS.map((group, index) => (
+          <div key={index} className="px-3 pt-2">
+            {group.label ? (
+              <h4 className="eyebrow mt-2.5 mb-1 ml-3 text-sidebar-muted">
+                {group.label}
+              </h4>
+            ) : null}
+            <div className="space-y-0.5">
+              {group.items.map((item) => (
+                <SidebarItem
+                  key={item.key}
+                  item={item}
+                  active={isNavItemActive(pathname, item.href)}
+                  overdue={overdue}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+      <div className="mt-auto space-y-1 border-t border-sidebar-border p-3">
+        <SidebarItem
+          item={SETTINGS_ITEM}
+          active={isNavItemActive(pathname, SETTINGS_ITEM.href)}
+          overdue={0}
+        />
+        <UserMenu />
+      </div>
+    </aside>
+  );
 }
 
-function NavGroup({
-  label,
-  items,
-  pathname,
+function RailItem({
+  item,
+  active,
+  overdue,
 }: {
-  label?: string;
-  items: NavItem[];
-  pathname: string;
+  item: NavItem;
+  active: boolean;
+  overdue: number;
 }) {
+  const Icon = item.icon;
   return (
-    <SidebarGroup>
-      {label ? <SidebarGroupLabel>{label}</SidebarGroupLabel> : null}
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.href}>
-              <SidebarMenuButton
-                asChild
-                isActive={isItemActive(pathname, item.href)}
-                tooltip={item.title}
-              >
-                <Link href={item.href}>
-                  <item.icon className="h-4 w-4" />
-                  <span>{item.title}</span>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
+    <Link
+      href={item.href}
+      aria-current={active ? "page" : undefined}
+      aria-label={
+        item.badge === "overdue" && overdue > 0
+          ? `${item.title}, ${overdue} overdue`
+          : item.title
+      }
+      className={cn(
+        "relative flex h-14 flex-col items-center justify-center gap-1 rounded-md text-[13px] text-sidebar-foreground hover:bg-sidebar-accent hover:text-white",
+        active &&
+          "bg-sidebar-accent text-white before:absolute before:top-2 before:bottom-2 before:left-0 before:w-[3px] before:rounded-xs before:bg-sidebar-primary",
+      )}
+    >
+      <Icon
+        className={cn(
+          "size-5",
+          active ? "text-sidebar-primary" : "text-sidebar-muted",
+        )}
+        aria-hidden="true"
+      />
+      {item.short ?? item.title}
+      {item.badge === "overdue" ? (
+        <OverdueBadge
+          count={overdue}
+          className="absolute top-0 right-[calc(50%-30px)] h-[18px] min-w-[18px] text-xs"
+        />
+      ) : null}
+    </Link>
   );
 }
 
-export function AppSidebar() {
+/*
+  Tablet (768 to 1023px): an 88px labelled icon rail. Search and Scan share
+  one treatment above a 2px rule, so the current item's fill stays unique.
+*/
+export function AppRail() {
   const pathname = usePathname();
+  const overdue = useOverdueCount();
 
   return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader className="border-b border-sidebar-border px-4 py-3">
+    <aside
+      aria-label="Main"
+      className="on-charcoal sticky top-0 hidden h-dvh w-[88px] shrink-0 flex-col bg-sidebar text-sidebar-foreground md:flex lg:hidden"
+    >
+      <Link
+        href="/dashboard"
+        aria-label="Stowage home"
+        className="flex justify-center pt-[18px] pb-2.5"
+      >
+        <StowageMark size={24} color="#fff" />
+      </Link>
+      <div className="space-y-3 px-2.5 pb-4">
+        <GlobalSearch variant="rail" />
         <Link
-          href="/dashboard"
-          className="flex items-center gap-2 font-semibold text-foreground"
+          href="/scan"
+          className="flex h-12 flex-col items-center justify-center gap-1 rounded-md border border-sidebar-muted text-[13px] font-medium text-sidebar-foreground hover:bg-sidebar-accent"
         >
-          <Image
-            src="/images/web/icon-512.png"
-            alt="Stowage"
-            width={20}
-            height={20}
-            className="h-5 w-5 min-h-5 min-w-5 shrink-0 rounded-sm"
-          />
-          <span className="truncate group-data-[collapsible=icon]:hidden">
-            Stowage
-          </span>
+          <ScanLine className="size-[18px] text-white" aria-hidden="true" />
+          Scan
         </Link>
-      </SidebarHeader>
-      <SidebarContent>
-        <NavGroup items={dashboardItems} pathname={pathname} />
-        <NavGroup
-          label="Inventory"
-          items={inventoryItems}
-          pathname={pathname}
+      </div>
+      <nav className="mx-2.5 flex-1 space-y-1.5 overflow-y-auto border-t-2 border-sidebar-muted pt-4">
+        {NAV_GROUPS.flatMap((group) => group.items).map((item) => (
+          <RailItem
+            key={item.key}
+            item={item}
+            active={isNavItemActive(pathname, item.href)}
+            overdue={overdue}
+          />
+        ))}
+      </nav>
+      <div className="flex flex-col gap-1 p-2.5">
+        <RailItem
+          item={SETTINGS_ITEM}
+          active={isNavItemActive(pathname, SETTINGS_ITEM.href)}
+          overdue={0}
         />
-        <NavGroup label="Organize" items={organizeItems} pathname={pathname} />
-        <NavGroup label="Maintain" items={maintainItems} pathname={pathname} />
-      </SidebarContent>
-      <SidebarFooter>
-        <SidebarSeparator />
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              isActive={isItemActive(pathname, "/settings")}
-              tooltip="Settings"
-            >
-              <Link href="/settings">
-                <Settings className="h-4 w-4" />
-                <span>Settings</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-    </Sidebar>
+        <div className="flex justify-center">
+          <UserMenu compact side="right" />
+        </div>
+      </div>
+    </aside>
   );
 }
diff --git a/src/components/layout/bottom-nav.tsx b/src/components/layout/bottom-nav.tsx
index 8c192a9..d228a4b 100644
--- a/src/components/layout/bottom-nav.tsx
+++ b/src/components/layout/bottom-nav.tsx
@@ -2,26 +2,27 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { useRouter, usePathname } from "next/navigation";
-import { useQueryClient } from "@tanstack/react-query";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
 import {
-  Home,
   Layers,
   LayoutGrid,
   LogOut,
   MapPin,
-  MoreHorizontal,
+  Menu,
+  Monitor,
+  Moon,
   Package,
   Printer,
   ScanLine,
   Settings,
+  Sun,
   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";
+import { useLogout } from "@/components/layout/user-menu";
+import { useOverdueCount } from "@/hooks/use-overdue-count";
 
 type Slot = {
   key: "home" | "assets" | "services" | "more";
@@ -31,10 +32,10 @@ type Slot = {
 };
 
 const SLOTS: Slot[] = [
-  { key: "home", label: "Home", href: "/dashboard", icon: Home },
+  { key: "home", label: "Home", href: "/dashboard", icon: LayoutGrid },
   { key: "assets", label: "Assets", href: "/assets", icon: Package },
   { key: "services", label: "Services", href: "/services", icon: Wrench },
-  { key: "more", label: "More", icon: MoreHorizontal },
+  { key: "more", label: "More", icon: Menu },
 ];
 
 const MORE_PATH_PREFIXES = ["/locations", "/taxonomy", "/labels", "/settings"];
@@ -49,20 +50,26 @@ function isSlotActive(pathname: string, slot: Slot, moreOpen: boolean) {
   return pathname.startsWith(slot.href);
 }
 
+/*
+  Phone bottom bar: Home, Assets, Scan, Services (with the overdue badge),
+  More. The raised Scan slab is the only amber on the phone; the current tab is
+  white.
+*/
 export function BottomNav() {
   const pathname = usePathname();
   const [moreOpen, setMoreOpen] = useState(false);
   const scanActive = pathname.startsWith("/scan");
+  const overdue = useOverdueCount();
 
   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"
+        className="on-charcoal fixed inset-x-0 bottom-0 z-40 border-t border-sidebar-border bg-sidebar md:hidden"
         style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
       >
-        <div className="relative mx-auto grid max-w-xl grid-cols-5 items-end">
+        <div className="relative mx-auto grid h-16 max-w-xl grid-cols-5">
           {SLOTS.slice(0, 2).map((slot) => (
             <NavItem
               key={slot.key}
@@ -78,6 +85,7 @@ export function BottomNav() {
               slot={slot}
               active={isSlotActive(pathname, slot, moreOpen)}
               onMoreClick={() => setMoreOpen(true)}
+              badge={slot.key === "services" ? overdue : 0}
             />
           ))}
         </div>
@@ -91,17 +99,28 @@ function NavItem({
   slot,
   active,
   onMoreClick,
+  badge = 0,
 }: {
   slot: Slot;
   active: boolean;
   onMoreClick: () => void;
+  badge?: number;
 }) {
   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 content = (
+    <>
+      <Icon className="size-[22px]" aria-hidden="true" />
+      <span className="text-[13px] font-semibold">{slot.label}</span>
+      {badge > 0 ? (
+        <span className="absolute top-1 right-[calc(50%-24px)] grid h-[18px] min-w-[18px] place-items-center rounded-md bg-destructive px-[5px] font-mono text-xs font-semibold text-white">
+          {badge}
+        </span>
+      ) : null}
+    </>
+  );
   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",
+    "relative flex flex-col items-center justify-center gap-1 text-sidebar-muted transition-colors hover:text-white",
+    active && "text-white",
   );
 
   if (slot.key === "more") {
@@ -114,8 +133,7 @@ function NavItem({
         className={cn(className, "cursor-pointer")}
         onClick={onMoreClick}
       >
-        {iconEl}
-        {labelEl}
+        {content}
       </button>
     );
   }
@@ -127,37 +145,38 @@ function NavItem({
       href={slot.href}
       data-testid={`bottom-nav-${slot.key}`}
       aria-current={active ? "page" : undefined}
-      aria-label={slot.label}
+      aria-label={badge > 0 ? `${slot.label}, ${badge} overdue` : slot.label}
       className={className}
     >
-      {iconEl}
-      {labelEl}
+      {content}
     </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);
-          }
-        }}
+    <Link
+      href="/scan"
+      data-testid="bottom-nav-scan"
+      aria-label="Scan a label"
+      aria-current={active ? "page" : undefined}
+      onClick={() => {
+        if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+          navigator.vibrate?.(10);
+        }
+      }}
+      className="flex flex-col items-center justify-center gap-1 text-[13px] font-semibold text-sidebar-foreground"
+    >
+      <span
         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",
+          "-mt-[30px] grid h-12 w-[60px] place-items-center rounded-md border-4 border-sidebar bg-[var(--scan)] text-[var(--scan-foreground)] shadow-[3px_3px_0_var(--color-sidebar-accent)] transition-transform active:scale-95",
+          active && "outline-2 outline-offset-2 outline-white",
         )}
       >
-        <ScanLine className="h-7 w-7" aria-hidden="true" />
-      </Link>
-    </div>
+        <ScanLine className="size-[26px]" aria-hidden="true" />
+      </span>
+      Scan
+    </Link>
   );
 }
 
@@ -168,26 +187,8 @@ function MoreSheet({
   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 { setTheme, theme } = useTheme();
+  const { loggingOut, handleLogout } = useLogout();
 
   const items: { label: string; href: string; icon: typeof MapPin }[] = [
     { label: "Locations", href: "/locations", icon: MapPin },
@@ -196,6 +197,12 @@ function MoreSheet({
     { label: "Settings", href: "/settings", icon: Settings },
   ];
 
+  const themes = [
+    { value: "light", label: "Light", icon: Sun },
+    { value: "dark", label: "Dark", icon: Moon },
+    { value: "system", label: "System", icon: Monitor },
+  ];
+
   return (
     <MobileActionSheet
       open={open}
@@ -212,23 +219,33 @@ function MoreSheet({
               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"
+              className="flex h-[72px] flex-col items-center justify-center gap-1.5 rounded-md border border-border bg-card text-sm font-semibold text-foreground hover:bg-secondary"
             >
-              <item.icon className="h-5 w-5" aria-hidden="true" />
+              <item.icon className="size-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 className="mt-2">
+        <div className="eyebrow mb-1.5">Appearance</div>
+        <div className="grid grid-cols-3 gap-2">
+          {themes.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              aria-pressed={theme === option.value}
+              onClick={() => setTheme(option.value)}
+              className={cn(
+                "flex h-11 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-border bg-card text-sm font-medium",
+                theme === option.value && "border-foreground font-semibold",
+              )}
+            >
+              <option.icon className="size-4" aria-hidden="true" />
+              {option.label}
+            </button>
+          ))}
         </div>
-        <ThemeToggle />
       </div>
       <button
         type="button"
@@ -238,9 +255,9 @@ function MoreSheet({
           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"
+        className="mt-2 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-md border-[1.5px] border-foreground bg-card text-sm font-semibold text-foreground hover:bg-secondary disabled:opacity-50"
       >
-        <LogOut className="h-4 w-4" aria-hidden="true" />
+        <LogOut className="size-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
index 37d9713..70b10fc 100644
--- a/src/components/layout/mobile-action-sheet.tsx
+++ b/src/components/layout/mobile-action-sheet.tsx
@@ -37,16 +37,31 @@ export function MobileActionSheet({
         side="bottom"
         data-testid="mobile-action-sheet"
         aria-label={ariaLabel}
+        {...(description ? {} : { "aria-describedby": undefined })}
         className={cn(
-          "gap-0 rounded-t-2xl border-t pb-[max(1rem,env(safe-area-inset-bottom))]",
+          "gap-0 rounded-t-md border-t pb-[max(1rem,env(safe-area-inset-bottom))] outline-hidden",
           contentClassName,
         )}
         showCloseButton={false}
+        // Keep the phone keyboard down on open: focus the sheet, not its
+        // first field. A field that asks for focus (React's autoFocus, which
+        // focuses on mount, or data-autofocus) keeps it.
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          const content = event.currentTarget as HTMLElement | null;
+          if (!content) return;
+          const active = document.activeElement;
+          if (active && active !== content && content.contains(active)) return;
+          const wanted = content.querySelector<HTMLElement>(
+            "[data-autofocus], [autofocus]",
+          );
+          (wanted ?? content).focus();
+        }}
       >
         <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"
+            className="h-1 w-10 rounded-full bg-line-2"
             data-testid="mobile-action-sheet-handle"
           />
         </div>
@@ -58,8 +73,8 @@ export function MobileActionSheet({
             ) : null}
           </div>
         ) : (
-          <SheetHeader className="pt-2 pb-3">
-            <SheetTitle>{title}</SheetTitle>
+          <SheetHeader className="rule-ink mx-4 mb-3.5 gap-1 px-0 pt-2 pb-2.5">
+            <SheetTitle className="wide text-lg font-bold">{title}</SheetTitle>
             {description ? (
               <SheetDescription>{description}</SheetDescription>
             ) : null}
diff --git a/src/components/layout/mobile-top-bar.tsx b/src/components/layout/mobile-top-bar.tsx
new file mode 100644
index 0000000..a6d3dc4
--- /dev/null
+++ b/src/components/layout/mobile-top-bar.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ArrowLeft, Plus } from "lucide-react";
+import { StowageMark } from "@/components/brand/stowage-mark";
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { GlobalSearch } from "@/components/search/global-search";
+import { UserMenu } from "@/components/layout/user-menu";
+import { NAV_GROUPS, SETTINGS_ITEM, isNavItemActive } from "@/components/layout/nav-config";
+
+const SLOT_ID = "mobile-top-bar-slot";
+
+/*
+  How many <MobileBar>s are mounted. While one covers the top bar, the bar's
+  own controls underneath are made inert so keyboard and screen-reader users
+  do not land on buttons they cannot see.
+*/
+let coveringBars = 0;
+const coverListeners = new Set<() => void>();
+
+function setCoveringBars(next: number) {
+  coveringBars = next;
+  for (const listener of coverListeners) listener();
+}
+
+function subscribeCover(listener: () => void) {
+  coverListeners.add(listener);
+  return () => {
+    coverListeners.delete(listener);
+  };
+}
+
+function useTopBarCovered() {
+  return useSyncExternalStore(
+    subscribeCover,
+    () => coveringBars > 0,
+    () => false,
+  );
+}
+
+function pageTitle(pathname: string) {
+  if (pathname === "/dashboard") return null;
+  const items = [...NAV_GROUPS.flatMap((group) => group.items), SETTINGS_ITEM];
+  return items.find((item) => isNavItemActive(pathname, item.href))?.title ?? null;
+}
+
+/*
+  Phone (below 768px): a 56px charcoal top bar. Home shows the wordmark; other
+  pages show their name. The + is New asset, or New location on Locations.
+  A page can replace the whole bar (the asset back bar) with <MobileBar>.
+*/
+export function MobileTopBar() {
+  const pathname = usePathname();
+  const title = pageTitle(pathname);
+  const { data: currentUser } = useCurrentUser();
+  // Only admins can add locations; everyone else gets New asset here too.
+  const onLocations =
+    pathname.startsWith("/locations") && currentUser?.role === "admin";
+  const covered = useTopBarCovered();
+
+  return (
+    <header className="on-charcoal sticky top-0 z-30 h-14 bg-sidebar text-white md:hidden">
+      <div
+        className="flex h-full items-center gap-2 pr-2 pl-4"
+        inert={covered}
+        data-testid="mobile-top-bar-controls"
+      >
+        <Link
+          href="/dashboard"
+          className="wide mr-auto flex min-w-0 items-center gap-[9px] text-base font-bold"
+        >
+          <StowageMark size={24} color="#fff" />
+          <span className="truncate">{title ?? "Stowage"}</span>
+          <span id="mobile-top-bar-count" className="font-mono text-sm font-medium tracking-normal text-sidebar-muted" />
+        </Link>
+        <Link
+          href={onLocations ? "/locations?new=1" : "/assets/new"}
+          aria-label={onLocations ? "New location" : "New asset"}
+          title={onLocations ? "New location" : "New asset"}
+          className="grid size-11 place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent"
+        >
+          <Plus className="size-5" />
+        </Link>
+        <GlobalSearch variant="icon" />
+        <UserMenu compact align="end" side="bottom" />
+      </div>
+      <div id={SLOT_ID} className="pointer-events-none absolute inset-0 empty:hidden" />
+    </header>
+  );
+}
+
+function useSlot(id: string) {
+  const [el, setEl] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setEl(document.getElementById(id));
+  }, [id]);
+  return el;
+}
+
+/*
+  Replaces the phone top bar for the current page, for example the asset back
+  bar: back, the tag, then the page's actions.
+*/
+export function MobileBar({
+  backHref,
+  backLabel = "Back",
+  center,
+  actions,
+}: {
+  backHref?: string;
+  backLabel?: string;
+  center?: React.ReactNode;
+  actions?: React.ReactNode;
+}) {
+  const slot = useSlot(SLOT_ID);
+  useEffect(() => {
+    if (!slot) return;
+    setCoveringBars(coveringBars + 1);
+    return () => setCoveringBars(coveringBars - 1);
+  }, [slot]);
+  if (!slot) return null;
+  return createPortal(
+    <div className="pointer-events-auto flex h-full items-center gap-1 bg-sidebar px-2">
+      {backHref ? (
+        <Link
+          href={backHref}
+          aria-label={backLabel}
+          className="grid size-11 place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent"
+        >
+          <ArrowLeft className="size-5" />
+        </Link>
+      ) : null}
+      <div className="flex min-w-0 flex-1 justify-center">{center}</div>
+      <div className="flex items-center">{actions}</div>
+    </div>,
+    slot,
+  );
+}
+
+/* Shows a page's count in mono next to its name in the phone top bar. */
+export function MobileTitleCount({ count }: { count: number | string }) {
+  const slot = useSlot("mobile-top-bar-count");
+  if (!slot) return null;
+  return createPortal(<>{count}</>, slot);
+}
diff --git a/src/components/layout/nav-config.ts b/src/components/layout/nav-config.ts
new file mode 100644
index 0000000..b8d381d
--- /dev/null
+++ b/src/components/layout/nav-config.ts
@@ -0,0 +1,79 @@
+import {
+  Layers,
+  LayoutGrid,
+  MapPin,
+  Package,
+  Printer,
+  Settings,
+  Wrench,
+  type LucideIcon,
+} from "lucide-react";
+
+export type NavItem = {
+  key: string;
+  title: string;
+  /** Short label for the 88px tablet rail. */
+  short?: string;
+  href: string;
+  icon: LucideIcon;
+  badge?: "overdue";
+};
+
+export type NavGroup = { label?: string; items: NavItem[] };
+
+/*
+  Nav: Home, Services; Inventory (Assets, Locations, Taxonomy, Labels).
+  Named identically on desktop, tablet and phone.
+*/
+export const NAV_GROUPS: NavGroup[] = [
+  {
+    items: [
+      { key: "home", title: "Home", href: "/dashboard", icon: LayoutGrid },
+      {
+        key: "services",
+        title: "Services",
+        href: "/services",
+        icon: Wrench,
+        badge: "overdue",
+      },
+    ],
+  },
+  {
+    label: "Inventory",
+    items: [
+      { key: "assets", title: "Assets", href: "/assets", icon: Package },
+      { key: "locations", title: "Locations", href: "/locations", icon: MapPin },
+      { key: "taxonomy", title: "Taxonomy", href: "/taxonomy", icon: Layers },
+      { key: "labels", title: "Labels", href: "/labels", icon: Printer },
+    ],
+  },
+];
+
+export const SETTINGS_ITEM: NavItem = {
+  key: "settings",
+  title: "Settings",
+  href: "/settings",
+  icon: Settings,
+};
+
+export function isNavItemActive(pathname: string, href: string) {
+  if (href === "/dashboard") return pathname === "/dashboard";
+  if (href === "/taxonomy") {
+    return (
+      pathname.startsWith("/taxonomy") ||
+      pathname.startsWith("/categories") ||
+      pathname.startsWith("/tags") ||
+      pathname.startsWith("/fields")
+    );
+  }
+  if (href === "/labels") {
+    return pathname === "/labels" || pathname.startsWith("/labels/");
+  }
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+export function getInitials(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+  if (parts.length === 0) return "?";
+  return parts.map((part) => part[0]?.toUpperCase() ?? "").join("");
+}
diff --git a/src/components/layout/page-header.tsx b/src/components/layout/page-header.tsx
index dd2b6c2..a815fbf 100644
--- a/src/components/layout/page-header.tsx
+++ b/src/components/layout/page-header.tsx
@@ -1,60 +1,75 @@
-import { Fragment } from "react";
 import Link from "next/link";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+import { ArrowLeft } from "lucide-react";
+
+import { cn } from "@/lib/utils";
 
 export type PageHeaderBreadcrumb = {
   label: string;
   href?: string;
 };
 
+/*
+  Page headers: the title with its count in mono, a subline, then the 2px ink
+  rule, so every page's rule lands on the same line. A parent breadcrumb with
+  an href becomes the 13px "← Parent" back link above the title.
+*/
 export function PageHeader({
   title,
+  count,
   description,
   breadcrumbs,
+  actions,
+  className,
 }: {
   title: string;
-  description?: string;
+  count?: number | string;
+  description?: React.ReactNode;
   breadcrumbs?: PageHeaderBreadcrumb[];
+  actions?: React.ReactNode;
+  className?: string;
 }) {
-  const resolvedBreadcrumbs =
-    breadcrumbs && breadcrumbs.length > 0
-      ? breadcrumbs
-      : [{ label: "Stowage", href: "/dashboard" }, { label: title }];
+  const parent = breadcrumbs
+    ? [...breadcrumbs]
+        .reverse()
+        .find((crumb) => crumb.href && crumb.href !== "/dashboard")
+    : undefined;
 
   return (
-    <div>
-      <Breadcrumb>
-        <BreadcrumbList>
-          {resolvedBreadcrumbs.map((breadcrumb, index) => {
-            const isLast = index === resolvedBreadcrumbs.length - 1;
-
-            return (
-              <Fragment key={`${breadcrumb.label}:${index}`}>
-                <BreadcrumbItem>
-                  {isLast || !breadcrumb.href ? (
-                    <BreadcrumbPage>{breadcrumb.label}</BreadcrumbPage>
-                  ) : (
-                    <BreadcrumbLink asChild>
-                      <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
-                    </BreadcrumbLink>
-                  )}
-                </BreadcrumbItem>
-                {!isLast ? <BreadcrumbSeparator /> : null}
-              </Fragment>
-            );
-          })}
-        </BreadcrumbList>
-      </Breadcrumb>
-      <h1 className="mt-1.5 text-2xl font-semibold tracking-tight">{title}</h1>
-      {description != null ? (
-        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    <div
+      data-slot="page-header"
+      className={cn(
+        "mb-[22px] flex items-start gap-4 rule-ink pb-4 max-md:items-center",
+        className,
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        {parent ? (
+          <Link
+            href={parent.href as string}
+            className="mb-2.5 inline-flex items-center gap-1.5 text-[13px] text-muted-foreground hover:text-foreground hover:underline hover:underline-offset-[3px]"
+          >
+            <ArrowLeft className="size-3" aria-hidden="true" />
+            {parent.label}
+          </Link>
+        ) : null}
+        <h1 className="wide text-[28px] leading-[1.1] font-bold text-foreground max-md:text-2xl">
+          {title}
+          {count !== undefined ? (
+            <span className="ml-3 align-[2px] font-mono text-[22px] font-medium tracking-normal text-muted-foreground">
+              {count}
+            </span>
+          ) : null}
+        </h1>
+        {description != null ? (
+          <p className="mt-1.5 text-sm text-ink-2 [&_a]:font-semibold [&_a]:whitespace-nowrap [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-[3px]">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="ml-auto flex shrink-0 items-center gap-2 pt-px max-md:hidden">
+          {actions}
+        </div>
       ) : null}
     </div>
   );
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
deleted file mode 100644
index 38d717d..0000000
--- a/src/components/layout/topbar.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useQueryClient } from "@tanstack/react-query";
-import { ChevronDown, Loader2, LogOut, User } from "lucide-react";
-import { toast } from "sonner";
-import { SidebarTrigger } from "@/components/ui/sidebar";
-import { Separator } from "@/components/ui/separator";
-import { Button } from "@/components/ui/button";
-import { ThemeToggle } from "@/components/layout/theme-toggle";
-import { GlobalSearch } from "@/components/search/global-search";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { useCurrentUser } from "@/hooks/use-current-user";
-import { logout } from "@/lib/api/auth";
-
-function getInitials(name: string) {
-  const parts = name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
-
-  if (parts.length === 0) {
-    return "?";
-  }
-
-  return parts.map((part) => part[0]?.toUpperCase() ?? "").join("");
-}
-
-export function Topbar() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { data: currentUser, isPending } = useCurrentUser();
-  const [loggingOut, setLoggingOut] = useState(false);
-
-  const userLabel = currentUser?.name ?? "User";
-  const userSecondary = currentUser?.email ?? "Signed in";
-
-  async function handleLogout() {
-    setLoggingOut(true);
-    try {
-      await logout();
-      queryClient.clear();
-      router.replace("/login");
-    } catch {
-      toast.error("Signed out locally. Refresh if needed.");
-      router.replace("/login");
-    } finally {
-      setLoggingOut(false);
-    }
-  }
-
-  return (
-    <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 />
-      </div>
-
-      <div className="flex items-center gap-1">
-        <ThemeToggle />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              className="h-9 cursor-pointer gap-2 px-2"
-              disabled={isPending || loggingOut}
-              aria-label="Open user menu"
-            >
-              <Avatar size="sm">
-                <AvatarFallback>{getInitials(userLabel)}</AvatarFallback>
-              </Avatar>
-              <span className="hidden max-w-32 truncate text-sm sm:inline">
-                {userLabel}
-              </span>
-              {loggingOut ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <ChevronDown className="h-4 w-4 text-muted-foreground" />
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuLabel className="space-y-0.5">
-              <div className="truncate font-medium">{userLabel}</div>
-              <div className="truncate text-xs font-normal text-muted-foreground">
-                {userSecondary}
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem disabled>
-              <User className="h-4 w-4" />
-              Profile
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                void handleLogout();
-              }}
-              className="cursor-pointer"
-              disabled={loggingOut}
-            >
-              <LogOut className="h-4 w-4" />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </header>
-  );
-}
diff --git a/src/components/layout/user-menu.tsx b/src/components/layout/user-menu.tsx
new file mode 100644
index 0000000..af0e898
--- /dev/null
+++ b/src/components/layout/user-menu.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTheme } from "next-themes";
+import { ChevronsUpDown, Loader2, LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { toast } from "sonner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { getInitials } from "@/components/layout/nav-config";
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { logout } from "@/lib/api/auth";
+import { cn } from "@/lib/utils";
+
+export function useLogout() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  async function handleLogout() {
+    setLoggingOut(true);
+    try {
+      await logout();
+    } catch {
+      // The session is still valid on the server: stay signed in and say so.
+      toast.error("Could not sign out. Please try again.");
+      setLoggingOut(false);
+      return;
+    }
+    // No setLoggingOut(false) here: the redirect unmounts the menu.
+    queryClient.clear();
+    router.replace("/login");
+  }
+
+  return { loggingOut, handleLogout };
+}
+
+export function Avatar({
+  name,
+  className,
+}: {
+  name: string;
+  className?: string;
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "grid size-8 shrink-0 place-items-center rounded-md bg-sidebar-accent font-mono text-[13px] font-bold text-white",
+        className,
+      )}
+    >
+      {getInitials(name)}
+    </span>
+  );
+}
+
+/*
+  The signed-in user at the foot of the sidebar (and the avatar in the rail
+  and phone top bar). The menu holds appearance and sign out.
+*/
+export function UserMenu({
+  compact = false,
+  align = "start",
+  side = "top",
+}: {
+  compact?: boolean;
+  align?: "start" | "end";
+  side?: "top" | "bottom" | "right";
+}) {
+  const { data: currentUser, isPending } = useCurrentUser();
+  const { setTheme } = useTheme();
+  const { loggingOut, handleLogout } = useLogout();
+
+  const name = currentUser?.name ?? "User";
+  const role = currentUser?.role === "admin" ? "Admin" : "Member";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label="Open user menu"
+          disabled={isPending || loggingOut}
+          className={cn(
+            "flex cursor-pointer items-center gap-2.5 rounded-md text-left text-sidebar-foreground hover:bg-sidebar-accent disabled:opacity-60",
+            compact ? "size-11 justify-center p-0" : "w-full px-2.5 py-2",
+          )}
+        >
+          <Avatar name={name} />
+          {compact ? null : (
+            <>
+              <span className="min-w-0 flex-1">
+                <b className="block truncate text-[13px] leading-tight font-semibold text-white">
+                  {name}
+                </b>
+                <small className="block text-[13px] text-sidebar-muted">
+                  {role}
+                </small>
+              </span>
+              {loggingOut ? (
+                <Loader2 className="size-4 animate-spin text-sidebar-muted" />
+              ) : (
+                <ChevronsUpDown className="size-4 text-sidebar-muted" />
+              )}
+            </>
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} side={side} className="w-60">
+        <DropdownMenuLabel className="space-y-0.5">
+          <div className="truncate font-semibold">{name}</div>
+          <div className="truncate text-[13px] font-normal text-muted-foreground">
+            {currentUser?.email ?? "Signed in"}
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="eyebrow py-1">Appearance</DropdownMenuLabel>
+        <DropdownMenuItem onClick={() => setTheme("light")} className="cursor-pointer">
+          <Sun className="size-4" />
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")} className="cursor-pointer">
+          <Moon className="size-4" />
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")} className="cursor-pointer">
+          <Monitor className="size-4" />
+          System
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onSelect={(event) => {
+            event.preventDefault();
+            void handleLogout();
+          }}
+          className="cursor-pointer"
+          disabled={loggingOut}
+        >
+          <LogOut className="size-4" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/locations/location-form-dialog.tsx b/src/components/locations/location-form-dialog.tsx
index eaa2a29..302bf18 100644
--- a/src/components/locations/location-form-dialog.tsx
+++ b/src/components/locations/location-form-dialog.tsx
@@ -13,7 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import type { LocationTreeItem } from "@/components/locations/location-tree";
+import type { LocationTreeItem } from "@/components/locations/location-utils";
 
 type FormState = {
   name: string;
@@ -23,22 +23,23 @@ type FormState = {
 
 function buildPathPreview(locations: LocationTreeItem[], form: FormState) {
   const name = form.name.trim();
-  if (!name) {
-    return "";
-  }
-
+  if (!name) return "";
   const parentPath =
     form.parentId == null
       ? null
-      : (locations.find((location) => location.id === form.parentId)?.path ??
-        null);
-
+      : (locations.find((location) => location.id === form.parentId)?.path ?? null);
   return parentPath ? `${parentPath} / ${name}` : name;
 }
 
+/*
+  One dialog for creating and editing a location: name, where it sits, an
+  optional description, and the resulting path.
+*/
 export function LocationFormDialog({
   open,
+  mode = "create",
   locations,
+  excludeParentIds,
   values,
   submitting,
   onClose,
@@ -46,7 +47,10 @@ export function LocationFormDialog({
   onSubmit,
 }: {
   open: boolean;
+  mode?: "create" | "edit";
   locations: LocationTreeItem[];
+  /* A location can't sit inside itself or its own descendants. */
+  excludeParentIds?: Set<string>;
   values: FormState;
   submitting: boolean;
   onClose: () => void;
@@ -57,52 +61,45 @@ export function LocationFormDialog({
     description: string | null;
   }) => Promise<void>;
 }) {
-  const sortedLocations = useMemo(
+  const parentOptions = useMemo(
     () =>
       locations
-        .slice()
+        .filter((location) => !excludeParentIds?.has(location.id))
         .sort((a, b) =>
           a.path.localeCompare(b.path, undefined, { sensitivity: "base" }),
         ),
-    [locations],
+    [locations, excludeParentIds],
   );
   const pathPreview = buildPathPreview(locations, values);
+  const editing = mode === "edit";
 
   return (
     <CrudModal
       open={open}
       onClose={() => {
-        if (!submitting) {
-          onClose();
-        }
+        if (!submitting) onClose();
       }}
-      title="Add location"
-      description="Create a root or nested location. You can change the parent later in the details panel."
+      title={editing ? "Edit location" : "New location"}
       footer={
         <>
-          <Button
-            type="button"
-            variant="outline"
-            className="cursor-pointer"
-            onClick={onClose}
-            disabled={submitting}
-          >
+          <Button type="button" variant="outline" onClick={onClose} disabled={submitting}>
             Cancel
           </Button>
-          <Button
-            type="submit"
-            form="create-location-form"
-            className="cursor-pointer"
-            disabled={submitting}
-          >
-            {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-            {submitting ? "Creating..." : "Create location"}
+          <Button type="submit" form="location-form" disabled={submitting}>
+            {submitting ? <Loader2 className="animate-spin" /> : null}
+            {editing
+              ? submitting
+                ? "Saving..."
+                : "Save location"
+              : submitting
+                ? "Creating..."
+                : "Create location"}
           </Button>
         </>
       }
     >
       <form
-        id="create-location-form"
+        id="location-form"
         className="space-y-4"
         onSubmit={(event) => {
           event.preventDefault();
@@ -114,37 +111,34 @@ export function LocationFormDialog({
         }}
       >
         <div className="space-y-1.5">
-          <label htmlFor="create-location-name" className="text-sm font-medium">
+          <label htmlFor="location-form-name" className="text-sm font-semibold">
             Name
           </label>
           <Input
-            id="create-location-name"
+            id="location-form-name"
             value={values.name}
-            onChange={(event) =>
-              onChange({ ...values, name: event.target.value })
-            }
+            onChange={(event) => onChange({ ...values, name: event.target.value })}
             placeholder="Shelf 3"
             required
           />
         </div>
 
         <div className="space-y-1.5">
-          <label className="text-sm font-medium">Parent location</label>
+          <label id="location-form-parent-label" className="text-sm font-semibold">
+            Inside
+          </label>
           <Select
             value={values.parentId ?? "__none__"}
             onValueChange={(value) =>
-              onChange({
-                ...values,
-                parentId: value === "__none__" ? null : value,
-              })
+              onChange({ ...values, parentId: value === "__none__" ? null : value })
             }
           >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="No parent (root)" />
+            <SelectTrigger className="w-full" aria-labelledby="location-form-parent-label">
+              <SelectValue placeholder="Nothing, it is a site" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="__none__">No parent (root)</SelectItem>
-              {sortedLocations.map((location) => (
+              <SelectItem value="__none__">Nothing, it is a site</SelectItem>
+              {parentOptions.map((location) => (
                 <SelectItem key={location.id} value={location.id}>
                   {location.path}
                 </SelectItem>
@@ -154,30 +148,23 @@ export function LocationFormDialog({
         </div>
 
         <div className="space-y-1.5">
-          <label
-            htmlFor="create-location-description"
-            className="text-sm font-medium"
-          >
-            Description
+          <label htmlFor="location-form-description" className="text-sm font-semibold">
+            Description <span className="font-normal text-muted-foreground">optional</span>
           </label>
           <Textarea
-            id="create-location-description"
+            id="location-form-description"
             value={values.description}
-            onChange={(event) =>
-              onChange({ ...values, description: event.target.value })
-            }
-            placeholder="Optional note about this location"
+            onChange={(event) => onChange({ ...values, description: event.target.value })}
+            placeholder="Long bench by the window"
           />
         </div>
 
-        <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2">
-          <div className="text-xs font-medium text-muted-foreground">
-            Path preview
-          </div>
-          <div className="mt-1 text-sm">
-            {pathPreview || "Enter a name to preview the path"}
-          </div>
-        </div>
+        <p className="text-sm text-ink-2">
+          Path:{" "}
+          <span className="font-medium text-foreground">
+            {pathPreview || "Enter a name to see the path"}
+          </span>
+        </p>
       </form>
     </CrudModal>
   );
diff --git a/src/components/locations/location-path.tsx b/src/components/locations/location-path.tsx
new file mode 100644
index 0000000..2492df8
--- /dev/null
+++ b/src/components/locations/location-path.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+
+const SEP = " / ";
+
+/*
+  A location path: ancestors in ink-2, the leaf in ink. The leaf is never cut.
+  In compact mode (phone cards) the path elides the middle when it is long
+  ("Workshop / … / Shelf A"), then falls back to the leaf alone.
+*/
+export function LocationPath({
+  path,
+  compact = false,
+  leafWeight = "medium",
+  className,
+}: {
+  path: string | null | undefined;
+  compact?: boolean;
+  leafWeight?: "regular" | "medium";
+  className?: string;
+}) {
+  if (!path) {
+    return <span className={cn("text-muted-foreground", className)}>No location</span>;
+  }
+  const parts = path.split(SEP);
+  const leaf = parts.pop() ?? path;
+  let ancestors = parts.join(SEP);
+
+  if (compact) {
+    if (parts.length > 1 && path.length > 28) ancestors = `${parts[0]}${SEP}…`;
+    if (ancestors && ancestors.length + leaf.length > 22) ancestors = "";
+  }
+
+  return (
+    <span className={cn("inline-flex min-w-0 text-ink-2", className)}>
+      {ancestors ? (
+        <span className="min-w-0 truncate whitespace-pre">
+          {ancestors}
+          {SEP}
+        </span>
+      ) : null}
+      <b
+        className={cn(
+          "shrink-0 text-foreground",
+          leafWeight === "medium" ? "font-medium" : "font-normal",
+        )}
+      >
+        {leaf}
+      </b>
+    </span>
+  );
+}
diff --git a/src/components/locations/location-picker.tsx b/src/components/locations/location-picker.tsx
index 27bce36..72d5172 100644
--- a/src/components/locations/location-picker.tsx
+++ b/src/components/locations/location-picker.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, type ReactElement } from "react";
 import { Check, ChevronDown } from "lucide-react";
 import {
   DropdownMenu,
@@ -104,7 +104,12 @@ export function LocationPicker({
   id,
   labelledBy,
   nullLabel = "No location",
+  compact = false,
+  trigger,
 }: {
+  compact?: boolean;
+  /* A custom trigger button, for example the asset hero's picker run. */
+  trigger?: ReactElement;
   value: string | null;
   options: LocationPickerOption[];
   disabled?: boolean;
@@ -118,9 +123,11 @@ export function LocationPicker({
     [options],
   );
 
-  if (options.length === 0) {
+  // With a custom trigger (the asset hero) keep showing the current value
+  // while the list loads; the menu just has fewer entries until then.
+  if (options.length === 0 && !trigger) {
     return (
-      <div className="rounded-md border border-dashed border-border/70 bg-muted/15 px-3 py-2 text-sm text-muted-foreground">
+      <div className="flex h-9 items-center rounded-md border-[1.5px] border-dashed border-input px-3 text-sm text-muted-foreground">
         No locations available.
       </div>
     );
@@ -164,30 +171,35 @@ export function LocationPicker({
   }
 
   return (
-    <div className="space-y-2">
+    <div className={cn(compact ? "" : "space-y-2")}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button
+          {trigger ?? <button
             type="button"
             id={id}
             aria-labelledby={labelledBy}
             disabled={disabled}
-            className="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-sm outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-ring data-[state=open]:ring-[3px] data-[state=open]:ring-ring/40"
+            className="flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border-[1.5px] border-input bg-card px-3 text-sm font-medium outline-none transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-foreground"
           >
             <span
               className={cn(
                 "truncate",
-                selectedPath ? "text-foreground" : "text-muted-foreground",
+                selectedPath || compact ? "text-foreground" : "text-muted-foreground",
               )}
             >
-              {selectedPath ?? nullLabel}
+              {compact
+                ? (value ? (optionsById.get(value)?.name ?? nullLabel) : nullLabel)
+                : (selectedPath ?? nullLabel)}
             </span>
-            <ChevronDown className="size-4 text-muted-foreground" />
-          </button>
+            <ChevronDown className="size-3.5 text-ink-2" />
+          </button>}
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="start"
-          className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-56"
+          className={cn(
+            "min-w-56",
+            !trigger && "w-[var(--radix-dropdown-menu-trigger-width)]",
+          )}
         >
           <DropdownMenuItem onSelect={() => onChange(null)}>
             <span>{nullLabel}</span>
@@ -199,8 +211,8 @@ export function LocationPicker({
           {roots.map((node) => renderNode(node))}
         </DropdownMenuContent>
       </DropdownMenu>
-      {selectedPath ? (
-        <p className="text-xs text-muted-foreground">
+      {selectedPath && !compact ? (
+        <p className="text-[13px] text-ink-2">
           Selected: {selectedPath}
         </p>
       ) : null}
diff --git a/src/components/locations/location-tree.module.css b/src/components/locations/location-tree.module.css
deleted file mode 100644
index e0c4d0a..0000000
--- a/src/components/locations/location-tree.module.css
+++ /dev/null
@@ -1,87 +0,0 @@
-.tree {
-  --tree-spacing: 1.25rem;
-  --tree-node-gap: 0.25rem;
-  --connector-left: 0.3rem;
-  --connector-arm: 0.95rem;
-  --connector-top: 1.375rem;
-  --connector-radius: 0.25rem;
-  --connector-color: color-mix(
-    in oklch,
-    var(--color-muted-foreground) 40%,
-    transparent
-  );
-
-  max-width: 100%;
-  overflow-x: hidden;
-}
-
-.tree,
-.tree ul {
-  margin: 0;
-  padding-left: 0;
-  list-style: none;
-}
-
-.node {
-  display: block;
-  position: relative;
-  padding-bottom: var(--tree-node-gap);
-}
-
-.tree > .node {
-  padding-left: 0.625rem;
-}
-
-.tree ul {
-  margin-left: calc(var(--tree-spacing) * 0.35);
-}
-
-.tree ul > .node {
-  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,
-.tree ul > .node:last-child {
-  padding-bottom: 0;
-}
-
-.children {
-  margin-top: 0.125rem;
-  padding-left: 0;
-}
-
-/* ├─ or └─ connector: vertical segment + horizontal arm */
-.children > .node::before {
-  content: "";
-  position: absolute;
-  left: var(--connector-left);
-  top: 0;
-  width: var(--connector-arm);
-  height: var(--connector-top);
-  border-left: 1.5px solid var(--connector-color);
-  border-bottom: 1.5px solid var(--connector-color);
-  border-bottom-left-radius: var(--connector-radius);
-  pointer-events: none;
-}
-
-/* Vertical line continuing past the arm to the next sibling */
-.children > .node::after {
-  content: "";
-  position: absolute;
-  left: var(--connector-left);
-  top: var(--connector-top);
-  bottom: 0;
-  border-left: 1.5px solid var(--connector-color);
-  pointer-events: none;
-}
-
-/* Last child: └─ shape, no continuing vertical line */
-.children > .node:last-child::after {
-  display: none;
-}
diff --git a/src/components/locations/location-tree.tsx b/src/components/locations/location-tree.tsx
deleted file mode 100644
index 2fadf50..0000000
--- a/src/components/locations/location-tree.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import Link from "next/link";
-import {
-  ChevronDown,
-  ChevronRight,
-  Eye,
-  FolderTree,
-  MoreHorizontal,
-  Pencil,
-  Plus,
-  Trash2,
-} from "lucide-react";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
-import { EmptyState } from "@/components/ui/empty-state";
-import { cn } from "@/lib/utils";
-import styles from "./location-tree.module.css";
-
-export type LocationTreeItem = {
-  id: string;
-  name: string;
-  parentId: string | null;
-  description: string | null;
-  path: string;
-  createdAt: number;
-  updatedAt: number;
-};
-
-export function buildLocationChildrenMap(locations: LocationTreeItem[]) {
-  const map = new Map<string | null, LocationTreeItem[]>();
-  for (const location of locations) {
-    const key = location.parentId ?? null;
-    const existing = map.get(key);
-    if (existing) {
-      existing.push(location);
-    } else {
-      map.set(key, [location]);
-    }
-  }
-
-  for (const list of map.values()) {
-    list.sort((a, b) =>
-      a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
-    );
-  }
-
-  return map;
-}
-
-export function collectDescendantIds(
-  locationId: string,
-  childrenByParent: Map<string | null, LocationTreeItem[]>,
-) {
-  const descendants = new Set<string>();
-  const stack = [locationId];
-
-  while (stack.length > 0) {
-    const current = stack.pop();
-    if (!current) {
-      continue;
-    }
-
-    const children = childrenByParent.get(current) ?? [];
-    for (const child of children) {
-      if (!descendants.has(child.id)) {
-        descendants.add(child.id);
-        stack.push(child.id);
-      }
-    }
-  }
-
-  return descendants;
-}
-
-export function LocationTree({
-  locations,
-  selectedId,
-  expandedIds,
-  canManage,
-  onToggleExpand,
-  onSelect,
-  onAddChild,
-  onDelete,
-}: {
-  locations: LocationTreeItem[];
-  selectedId: string | null;
-  expandedIds: Set<string>;
-  canManage: boolean;
-  onToggleExpand: (id: string) => void;
-  onSelect: (id: string) => void;
-  onAddChild: (parentId: string) => void;
-  onDelete: (id: string) => void;
-}) {
-  const childrenByParent = useMemo(
-    () => buildLocationChildrenMap(locations),
-    [locations],
-  );
-  const roots = childrenByParent.get(null) ?? [];
-
-  if (locations.length === 0) {
-    return (
-      <EmptyState
-        icon={FolderTree}
-        title="No locations yet"
-        description="Add a root location to begin your hierarchy."
-      />
-    );
-  }
-
-  function renderNode(node: LocationTreeItem): React.ReactNode {
-    const children = childrenByParent.get(node.id) ?? [];
-    const hasChildren = children.length > 0;
-    const isExpanded = expandedIds.has(node.id);
-    const isSelected = selectedId === node.id;
-
-    const nodeContent = (
-      <div className="relative z-10">
-        <div
-          className={cn(
-            "group rounded-lg px-2 py-2 transition",
-            isSelected ? "bg-muted/50 dark:bg-muted/55" : "hover:bg-muted/35",
-          )}
-        >
-          <div className="flex items-start gap-2">
-            {hasChildren ? (
-              <button
-                type="button"
-                className="mt-0.5 inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground hover:border-border/60 hover:bg-background/80"
-                onClick={() => onToggleExpand(node.id)}
-                aria-label={isExpanded ? "Collapse" : "Expand"}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="h-4 w-4" />
-                ) : (
-                  <ChevronRight className="h-4 w-4" />
-                )}
-              </button>
-            ) : (
-              <span
-                aria-hidden="true"
-                className="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/35"
-              >
-                <span className="h-4 w-4" />
-              </span>
-            )}
-
-            <button
-              type="button"
-              className="min-w-0 flex-1 cursor-pointer text-left"
-              onClick={() => onSelect(node.id)}
-            >
-              <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="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 min-w-0 truncate text-xs text-muted-foreground">
-                {node.path}
-              </div>
-            </button>
-
-            {canManage ? (
-              <DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon-sm"
-                        className="cursor-pointer opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
-                        aria-label={`Actions for ${node.name}`}
-                      >
-                        <MoreHorizontal className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent>Actions</TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem asChild>
-                    <Link href={`/assets?location=${node.id}`}>
-                      <Eye className="h-4 w-4" />
-                      View assets here
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onSelect(node.id)}>
-                    <Pencil className="h-4 w-4" />
-                    Edit details
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onAddChild(node.id)}>
-                    <Plus className="h-4 w-4" />
-                    Add child
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    variant="destructive"
-                    onClick={() => onDelete(node.id)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                    Delete
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-
-    return (
-      <li key={node.id} className={styles.node}>
-        {canManage ? (
-          <ContextMenu>
-            <ContextMenuTrigger asChild>{nodeContent}</ContextMenuTrigger>
-            <ContextMenuContent>
-              <ContextMenuItem asChild>
-                <Link href={`/assets?location=${node.id}`}>
-                  <Eye className="h-4 w-4" />
-                  View assets here
-                </Link>
-              </ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem onClick={() => onSelect(node.id)}>
-                <Pencil className="h-4 w-4" />
-                Edit details
-              </ContextMenuItem>
-              <ContextMenuItem onClick={() => onAddChild(node.id)}>
-                <Plus className="h-4 w-4" />
-                Add child
-              </ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem
-                variant="destructive"
-                onClick={() => onDelete(node.id)}
-              >
-                <Trash2 className="h-4 w-4" />
-                Delete
-              </ContextMenuItem>
-            </ContextMenuContent>
-          </ContextMenu>
-        ) : (
-          nodeContent
-        )}
-
-        {hasChildren && isExpanded ? (
-          <ul className={styles.children}>
-            {children.map((child) => renderNode(child))}
-          </ul>
-        ) : null}
-      </li>
-    );
-  }
-
-  return (
-    <ul className={styles.tree}>{roots.map((root) => renderNode(root))}</ul>
-  );
-}
diff --git a/src/components/locations/location-utils.ts b/src/components/locations/location-utils.ts
new file mode 100644
index 0000000..aa3fbf8
--- /dev/null
+++ b/src/components/locations/location-utils.ts
@@ -0,0 +1,47 @@
+export type LocationTreeItem = {
+  id: string;
+  name: string;
+  parentId: string | null;
+  description: string | null;
+  path: string;
+  createdAt: number;
+  updatedAt: number;
+};
+
+export function buildLocationChildrenMap(locations: LocationTreeItem[]) {
+  const map = new Map<string | null, LocationTreeItem[]>();
+  const ids = new Set(locations.map((location) => location.id));
+  for (const location of locations) {
+    // An orphan (parent deleted or unreadable) shows as a root.
+    const key =
+      location.parentId && ids.has(location.parentId) ? location.parentId : null;
+    const existing = map.get(key);
+    if (existing) existing.push(location);
+    else map.set(key, [location]);
+  }
+  for (const list of map.values()) {
+    list.sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+    );
+  }
+  return map;
+}
+
+export function collectDescendantIds(
+  locationId: string,
+  childrenByParent: Map<string | null, LocationTreeItem[]>,
+) {
+  const descendants = new Set<string>();
+  const stack = [locationId];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (!current) continue;
+    for (const child of childrenByParent.get(current) ?? []) {
+      if (!descendants.has(child.id)) {
+        descendants.add(child.id);
+        stack.push(child.id);
+      }
+    }
+  }
+  return descendants;
+}
diff --git a/src/components/locations/locations-page-client.tsx b/src/components/locations/locations-page-client.tsx
index fc01e28..34357d3 100644
--- a/src/components/locations/locations-page-client.tsx
+++ b/src/components/locations/locations-page-client.tsx
@@ -1,250 +1,378 @@
 "use client";
 
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
-  Loader2,
-  MapPinned,
+  ChevronDown,
+  ChevronRight,
+  MapPin,
+  MoreHorizontal,
+  Pencil,
   Plus,
-  RefreshCw,
-  Save,
+  Printer,
+  Search,
   Trash2,
 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
+import type { AssetListItem } from "@/components/assets/types";
+import { AssetCardList } from "@/components/assets/asset-card-list";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
+import { ApiRequestError } from "@/lib/api-client";
+import { PageHeader } from "@/components/layout/page-header";
+import { MobileTitleCount } from "@/components/layout/mobile-top-bar";
 import { LocationFormDialog } from "@/components/locations/location-form-dialog";
+import { LocationPicker } from "@/components/locations/location-picker";
 import {
-  LocationTree,
   buildLocationChildrenMap,
   collectDescendantIds,
   type LocationTreeItem,
-} from "@/components/locations/location-tree";
+} from "@/components/locations/location-utils";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { EmptyState } from "@/components/ui/empty-state";
+import { Input } from "@/components/ui/input";
+import { Panel } from "@/components/ui/panel";
+import { SheetFoot, SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
+import { StatStrip } from "@/components/ui/stat-strip";
+import { StatusText } from "@/components/ui/status-text";
+import { TagChip } from "@/components/ui/tag-chip";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { useHydrated } from "@/hooks/use-hydrated";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { getAppSettings } from "@/lib/api/app-settings";
+import { listAssets } from "@/lib/api/assets";
 import {
   createLocation,
   deleteLocation,
   listLocations,
   updateLocation,
 } from "@/lib/api/locations";
-import { formatDateFromTimestamp } from "@/lib/date-format";
-import { useAppDateFormat } from "@/lib/use-app-date-format";
+import { listScheduledAssets } from "@/lib/api/service-schedules";
+import { getDaysUntil } from "@/lib/date-format";
+import { formatRelativeTime } from "@/lib/relative-time";
+import { useTodayIsoDate } from "@/lib/use-today-iso-date";
+import { cn } from "@/lib/utils";
 
 const LOCATIONS_QUERY_KEY = ["locations"] as const;
-
-function toDraft(location: LocationTreeItem) {
-  return {
-    name: location.name,
-    parentId: location.parentId,
-    description: location.description ?? "",
-  };
-}
-
-function getAncestorIds(
-  locationId: string,
-  byId: Map<string, LocationTreeItem>,
-): string[] {
-  const ancestors: string[] = [];
-  let cursor = byId.get(locationId)?.parentId ?? null;
-
-  while (cursor) {
-    ancestors.push(cursor);
-    cursor = byId.get(cursor)?.parentId ?? null;
-  }
-
-  return ancestors;
-}
-
-function buildLocationPathPreview(
-  locationsById: Map<string, LocationTreeItem>,
-  draft: { name: string; parentId: string | null },
-) {
-  const name = draft.name.trim();
-  if (!name) return "";
-
-  const parentPath = draft.parentId
-    ? (locationsById.get(draft.parentId)?.path ?? null)
-    : null;
-  return parentPath ? `${parentPath} / ${name}` : name;
+const SHEET_LIMIT = 50;
+const INDENT = 24;
+
+type FormState = { name: string; parentId: string | null; description: string };
+const EMPTY_FORM: FormState = { name: "", parentId: null, description: "" };
+
+type FlatRow = {
+  location: LocationTreeItem;
+  depth: number;
+  hasChildren: boolean;
+  expanded: boolean;
+};
+
+function splitPath(path: string) {
+  const parts = path.split(" / ");
+  const leaf = parts.pop() ?? path;
+  return { ancestors: parts.join(" / "), leaf };
 }
 
+/*
+  Locations: the tree on a card (counts roll up; the current row carries the
+  amber-ink mark), the empty locations under it, then the selected location as
+  a card with its stat strip and its assets as a sheet. On a phone the tree
+  becomes one location picker at the top.
+*/
 export function LocationsPageClient() {
   const qc = useQueryClient();
-  const dateFormat = useAppDateFormat();
-  const { data: currentUser, isLoading: loadingUser } = useCurrentUser();
-  const { data: locations, isLoading: loadingLocations } = useQuery({
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const hydrated = useHydrated();
+  const isPhone = useMediaQuery("(max-width: 767px)");
+  const today = useTodayIsoDate();
+  const { data: currentUser } = useCurrentUser();
+  const canManage = currentUser?.role === "admin";
+
+  const locationsQuery = useQuery({
     queryKey: LOCATIONS_QUERY_KEY,
     queryFn: listLocations,
   });
-
-  const createM = useMutation({
-    mutationFn: (input: Parameters<typeof createLocation>[0]) =>
-      createLocation(input),
-    onSuccess: () => qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY }),
+  const assetsQuery = useQuery({
+    queryKey: [
+      "assets",
+      "list",
+      { sortBy: "updatedAt", sortDirection: "desc" },
+    ],
+    queryFn: () => listAssets({ sortBy: "updatedAt", sortDirection: "desc" }),
   });
-  const updateM = useMutation({
-    mutationFn: (vars: {
-      id: string;
-      input: Parameters<typeof updateLocation>[1];
-    }) => updateLocation(vars.id, vars.input),
-    onSuccess: () => qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY }),
+  const settingsQuery = useQuery({
+    queryKey: ["app-settings"],
+    queryFn: getAppSettings,
+    staleTime: 5 * 60_000,
   });
-  const deleteM = useMutation({
-    mutationFn: deleteLocation,
-    onSuccess: () => qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY }),
+  const schedulingEnabled =
+    settingsQuery.data?.serviceSchedulingEnabled ?? false;
+  const scheduledQuery = useQuery({
+    queryKey: ["service-schedules", "scheduled"],
+    queryFn: listScheduledAssets,
+    enabled: schedulingEnabled,
   });
 
   const rows = useMemo(
-    () => (locations ?? []) as unknown as LocationTreeItem[],
-    [locations],
+    () =>
+      ((hydrated ? locationsQuery.data : undefined) ??
+        []) as LocationTreeItem[],
+    [hydrated, locationsQuery.data],
   );
-  const loading = loadingUser || loadingLocations;
-  const canManage = currentUser?.role === "admin";
+  const assets = useMemo(
+    () => ((hydrated ? assetsQuery.data : undefined) ?? []) as AssetListItem[],
+    [hydrated, assetsQuery.data],
+  );
+  const loading =
+    !hydrated || locationsQuery.isPending || assetsQuery.isPending;
 
   const rowsById = useMemo(
-    () => new Map(rows.map((location) => [location.id, location])),
+    () => new Map(rows.map((row) => [row.id, row])),
     [rows],
   );
   const childrenByParent = useMemo(
     () => buildLocationChildrenMap(rows),
     [rows],
   );
+  const roots = useMemo(
+    () => childrenByParent.get(null) ?? [],
+    [childrenByParent],
+  );
 
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [panelDraft, setPanelDraft] = useState<{
-    name: string;
-    parentId: string | null;
-    description: string;
-  } | null>(null);
-
-  const [createDialogOpen, setCreateDialogOpen] = useState(false);
-  const [createForm, setCreateForm] = useState<{
-    name: string;
-    parentId: string | null;
-    description: string;
-  }>({ name: "", parentId: null, description: "" });
-  const [creating, setCreating] = useState(false);
-
-  const [saving, setSaving] = useState(false);
-  const [deleteId, setDeleteId] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState(false);
-
-  const selectedLocation = selectedId
-    ? (rowsById.get(selectedId) ?? null)
-    : null;
-
-  useEffect(() => {
-    if (rows.length === 0) return;
-    setExpandedIds((prev) => {
-      if (prev.size > 0) return prev;
-      const roots = childrenByParent.get(null) ?? [];
-      return new Set(roots.map((root) => root.id));
-    });
-  }, [rows.length, childrenByParent]);
-
-  useEffect(() => {
-    if (!selectedId || loadingLocations) return;
-    if (!selectedLocation) {
-      toast.error("The selected location is no longer available");
-      setSelectedId(null);
-      setPanelDraft(null);
+  const assetsByLocation = useMemo(() => {
+    const map = new Map<string, AssetListItem[]>();
+    for (const asset of assets) {
+      if (!asset.locationId) continue;
+      const list = map.get(asset.locationId);
+      if (list) list.push(asset);
+      else map.set(asset.locationId, [asset]);
     }
-  }, [selectedId, selectedLocation, loadingLocations]);
+    return map;
+  }, [assets]);
+
+  // Rolled-up asset counts: a location counts everything inside it.
+  const totals = useMemo(() => {
+    const result = new Map<string, number>();
+    function visit(location: LocationTreeItem, seen: Set<string>): number {
+      if (seen.has(location.id)) return 0;
+      seen.add(location.id);
+      let sum = assetsByLocation.get(location.id)?.length ?? 0;
+      for (const child of childrenByParent.get(location.id) ?? []) {
+        sum += visit(child, seen);
+      }
+      result.set(location.id, sum);
+      return sum;
+    }
+    for (const root of roots) visit(root, new Set());
+    return result;
+  }, [assetsByLocation, childrenByParent, roots]);
+
+  const emptyLocations = useMemo(
+    () =>
+      rows
+        .filter(
+          (row) =>
+            (totals.get(row.id) ?? 0) === 0 &&
+            (childrenByParent.get(row.id) ?? []).length === 0,
+        )
+        .sort((a, b) =>
+          a.path.localeCompare(b.path, undefined, { sensitivity: "base" }),
+        ),
+    [rows, totals, childrenByParent],
+  );
 
-  useEffect(() => {
-    if (!selectedLocation) {
-      setPanelDraft(null);
-      return;
+  // Selection follows ?location=, defaulting to the first site.
+  const paramId = searchParams.get("location");
+  const selectedId =
+    paramId && rowsById.has(paramId) ? paramId : (roots[0]?.id ?? null);
+  const selected = selectedId ? (rowsById.get(selectedId) ?? null) : null;
+
+  // expandedIds is null until the user first opens or closes a row.
+  // revealedFor is the selection those choices were made under: when the
+  // selection moves on (a tree click, the empty list, a new location, a
+  // link), its ancestors open again so the current row is always visible.
+  const [expansion, setExpansion] = useState<{
+    ids: Set<string> | null;
+    revealedFor: string | null;
+  }>({ ids: null, revealedFor: null });
+  const [query, setQuery] = useState("");
+
+  const effectiveExpanded = useMemo(() => {
+    const path = new Set<string>();
+    let cursor = selected?.parentId ?? null;
+    while (cursor && !path.has(cursor)) {
+      path.add(cursor);
+      cursor = rowsById.get(cursor)?.parentId ?? null;
     }
-    setPanelDraft(toDraft(selectedLocation));
-  }, [selectedLocation]);
-
-  function selectLocation(id: string) {
-    setSelectedId(id);
-    const ancestors = getAncestorIds(id, rowsById);
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      next.add(id);
-      for (const ancestor of ancestors) next.add(ancestor);
-      return next;
-    });
-  }
+    if (!expansion.ids) {
+      if (selected && (childrenByParent.get(selected.id) ?? []).length > 0) {
+        path.add(selected.id);
+      }
+      return path;
+    }
+    if (expansion.revealedFor === selectedId) return expansion.ids;
+    return new Set([...expansion.ids, ...path]);
+  }, [expansion, selected, selectedId, rowsById, childrenByParent]);
 
-  function toggleExpand(id: string) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
+  function setExpandedIds(ids: Set<string>) {
+    setExpansion({ ids, revealedFor: selectedId });
   }
 
-  function openCreateRoot() {
-    setCreateForm({ name: "", parentId: null, description: "" });
-    setCreateDialogOpen(true);
+  function select(id: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("location", id);
+    params.delete("new");
+    router.replace(`/locations?${params.toString()}`, { scroll: false });
   }
 
-  function openCreateChild(parentId: string) {
-    selectLocation(parentId);
-    setCreateForm({ name: "", parentId, description: "" });
-    setCreateDialogOpen(true);
+  function toggle(id: string) {
+    const next = new Set(effectiveExpanded);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setExpandedIds(next);
   }
 
-  const parentOptions = useMemo(() => {
-    if (!selectedLocation) {
-      return rows
-        .slice()
-        .sort((a, b) =>
-          a.path.localeCompare(b.path, undefined, { sensitivity: "base" }),
-        );
+  const flatRows = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const matches = new Set<string>();
+    if (needle) {
+      for (const row of rows) {
+        if (row.name.toLowerCase().includes(needle)) {
+          let cursor: string | null = row.id;
+          while (cursor && !matches.has(cursor)) {
+            matches.add(cursor);
+            cursor = rowsById.get(cursor)?.parentId ?? null;
+          }
+        }
+      }
     }
-
-    const descendants = collectDescendantIds(
-      selectedLocation.id,
-      childrenByParent,
-    );
-    descendants.add(selectedLocation.id);
-
-    return rows
-      .filter((location) => !descendants.has(location.id))
-      .slice()
-      .sort((a, b) =>
-        a.path.localeCompare(b.path, undefined, { sensitivity: "base" }),
+    const out: FlatRow[] = [];
+    function walk(nodes: LocationTreeItem[], depth: number, seen: Set<string>) {
+      for (const node of nodes) {
+        if (seen.has(node.id)) continue;
+        if (needle && !matches.has(node.id)) continue;
+        const children = childrenByParent.get(node.id) ?? [];
+        const expanded = needle ? true : effectiveExpanded.has(node.id);
+        out.push({
+          location: node,
+          depth,
+          hasChildren: children.length > 0,
+          expanded,
+        });
+        if (expanded) walk(children, depth + 1, new Set([...seen, node.id]));
+      }
+    }
+    walk(roots, 0, new Set());
+    return out;
+  }, [query, rows, rowsById, childrenByParent, roots, effectiveExpanded]);
+
+  // The selected location's assets, its sub-locations included.
+  const subtreeIds = useMemo(() => {
+    if (!selected) return new Set<string>();
+    const ids = collectDescendantIds(selected.id, childrenByParent);
+    ids.add(selected.id);
+    return ids;
+  }, [selected, childrenByParent]);
+  const subtreeAssets = useMemo(
+    () =>
+      assets.filter(
+        (asset) => asset.locationId && subtreeIds.has(asset.locationId),
+      ),
+    [assets, subtreeIds],
+  );
+  const overdueCount = useMemo(() => {
+    if (!schedulingEnabled) return 0;
+    const ids = new Set(subtreeAssets.map((asset) => asset.id));
+    return (scheduledQuery.data ?? []).filter(
+      (item) =>
+        ids.has(item.assetId) && getDaysUntil(item.nextServiceDate, today) < 0,
+    ).length;
+  }, [schedulingEnabled, subtreeAssets, scheduledQuery.data, today]);
+
+  // ---- mutations -------------------------------------------------------
+  const [formOpen, setFormOpen] = useState<"create" | "edit" | null>(null);
+  const [form, setForm] = useState<FormState>(EMPTY_FORM);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [showAllFor, setShowAllFor] = useState<string | null>(null);
+
+  // The phone top bar's + opens "New location…" with ?new=1.
+  const wantsNew = searchParams.get("new") === "1" && canManage;
+  const dialogMode = formOpen ?? (wantsNew ? "create" : null);
+
+  // Only admins add locations; anyone else who lands on ?new=1 is told so
+  // and the param is dropped instead of silently doing nothing.
+  const deniedNew =
+    searchParams.get("new") === "1" && Boolean(currentUser) && !canManage;
+  useEffect(() => {
+    if (!deniedNew) return;
+    toast.info("Only admins can add locations.");
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete("new");
+    router.replace(`/locations${params.size ? `?${params.toString()}` : ""}`, {
+      scroll: false,
+    });
+  }, [deniedNew, searchParams, router]);
+
+  function closeForm() {
+    setFormOpen(null);
+    setForm(EMPTY_FORM);
+    if (searchParams.get("new")) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("new");
+      router.replace(
+        `/locations${params.size ? `?${params.toString()}` : ""}`,
+        { scroll: false },
       );
-  }, [rows, selectedLocation, childrenByParent]);
+    }
+  }
 
-  const pathPreview = panelDraft
-    ? buildLocationPathPreview(rowsById, panelDraft)
-    : "";
+  const createM = useMutation({
+    mutationFn: createLocation,
+    onSuccess: () => qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY }),
+  });
+  const updateM = useMutation({
+    mutationFn: (vars: {
+      id: string;
+      input: Parameters<typeof updateLocation>[1];
+    }) => updateLocation(vars.id, vars.input),
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY });
+      void qc.invalidateQueries({ queryKey: ["assets"] });
+    },
+  });
+  const deleteM = useMutation({
+    mutationFn: deleteLocation,
+    onSuccess: () => qc.invalidateQueries({ queryKey: LOCATIONS_QUERY_KEY }),
+  });
 
-  const hasPanelChanges = (() => {
-    if (!selectedLocation || !panelDraft) return false;
-    const selectedDescription = selectedLocation.description ?? "";
-    return (
-      panelDraft.name.trim() !== selectedLocation.name ||
-      (panelDraft.parentId ?? null) !== (selectedLocation.parentId ?? null) ||
-      panelDraft.description.trim() !== selectedDescription
-    );
-  })();
+  function openCreate(parentId: string | null) {
+    setForm({ ...EMPTY_FORM, parentId });
+    setFormOpen("create");
+  }
 
-  async function handleCreate(values: {
+  function openEdit() {
+    if (!selected) return;
+    setForm({
+      name: selected.name,
+      parentId: selected.parentId,
+      description: selected.description ?? "",
+    });
+    setFormOpen("edit");
+  }
+
+  async function handleSubmit(values: {
     name: string;
     parentId: string | null;
     description: string | null;
@@ -253,354 +381,602 @@ export function LocationsPageClient() {
       toast.error("Enter a location name");
       return;
     }
-
-    setCreating(true);
     try {
-      const result = await createM.mutateAsync({
-        name: values.name,
-        parentId: values.parentId,
-        description: values.description,
-      });
-      toast.success("Location created");
-      setCreateDialogOpen(false);
-      setCreateForm({ name: "", parentId: null, description: "" });
-      selectLocation(result.id);
-    } catch (error) {
-      toast.error(getApiErrorMessage(error, "Unable to create location"));
-    } finally {
-      setCreating(false);
-    }
-  }
-
-  async function handleSavePanel() {
-    if (!selectedLocation || !panelDraft) return;
-    if (!panelDraft.name.trim()) {
-      toast.error("Enter a location name");
-      return;
-    }
-
-    setSaving(true);
-    try {
-      await updateM.mutateAsync({
-        id: selectedLocation.id,
-        input: {
-          name: panelDraft.name,
-          parentId: panelDraft.parentId,
-          description: panelDraft.description.trim()
-            ? panelDraft.description
-            : null,
-        },
-      });
-      toast.success("Location updated");
+      if (dialogMode === "edit" && selected) {
+        await updateM.mutateAsync({ id: selected.id, input: values });
+        toast.success("Location saved");
+      } else {
+        const created = await createM.mutateAsync(values);
+        toast.success("Location created");
+        select(created.id);
+      }
+      setFormOpen(null);
+      setForm(EMPTY_FORM);
     } catch (error) {
-      toast.error(getApiErrorMessage(error, "Unable to update location"));
-    } finally {
-      setSaving(false);
+      toast.error(
+        getApiErrorMessage(
+          error,
+          dialogMode === "edit"
+            ? "Unable to save location"
+            : "Unable to create location",
+        ),
+      );
     }
   }
 
   async function handleDelete() {
-    if (!deleteId) return;
-
-    setDeleting(true);
+    if (!selected) return;
     try {
-      await deleteM.mutateAsync(deleteId);
+      await deleteM.mutateAsync(selected.id);
       toast.success("Location deleted");
-      if (selectedId === deleteId) {
-        setSelectedId(null);
-        setPanelDraft(null);
-      }
-      setDeleteId(null);
+      setDeleteOpen(false);
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("location");
+      router.replace(
+        `/locations${params.size ? `?${params.toString()}` : ""}`,
+        { scroll: false },
+      );
     } catch (error) {
-      toast.error(getApiErrorMessage(error, "Unable to delete location"));
-    } finally {
-      setDeleting(false);
+      toast.error(
+        error instanceof ApiRequestError && error.status === 409
+          ? "This location still holds assets or sub-locations. Move them out first."
+          : getApiErrorMessage(error, "Unable to delete location"),
+      );
     }
   }
 
-  const activeDeleteLocation = deleteId
-    ? (rowsById.get(deleteId) ?? null)
-    : null;
+  const editExclusions = useMemo(() => {
+    if (dialogMode !== "edit" || !selected) return undefined;
+    const ids = collectDescendantIds(selected.id, childrenByParent);
+    ids.add(selected.id);
+    return ids;
+  }, [dialogMode, selected, childrenByParent]);
+
+  // ---- render ----------------------------------------------------------
+  const newLocationButton = canManage ? (
+    <Button type="button" onClick={() => openCreate(null)}>
+      <Plus />
+      New location…
+    </Button>
+  ) : null;
+
+  const placedCount = assets.filter(
+    (asset) => asset.locationId && rowsById.has(asset.locationId),
+  ).length;
+  const subline = loading
+    ? " "
+    : `${placedCount} ${placedCount === 1 ? "asset" : "assets"} across ${roots.length} ${roots.length === 1 ? "site" : "sites"}`;
+
+  const dialogs = (
+    <>
+      <LocationFormDialog
+        open={dialogMode !== null}
+        mode={dialogMode ?? "create"}
+        locations={rows}
+        excludeParentIds={editExclusions}
+        values={form}
+        submitting={createM.isPending || updateM.isPending}
+        onClose={closeForm}
+        onChange={setForm}
+        onSubmit={handleSubmit}
+      />
+      <ConfirmDialog
+        open={deleteOpen}
+        title="Delete location?"
+        description={
+          selected
+            ? `${selected.path} is deleted. It holds no assets or sub-locations, so nothing else changes.`
+            : "This location is deleted."
+        }
+        confirmLabel="Delete location"
+        busy={deleteM.isPending}
+        onClose={() => {
+          if (!deleteM.isPending) setDeleteOpen(false);
+        }}
+        onConfirm={() => void handleDelete()}
+      />
+    </>
+  );
 
-  return (
-    <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">
-              Location tree
-            </h2>
-            <p className="text-sm text-muted-foreground">
-              Build your storage hierarchy with parent-child locations.
-            </p>
-            {!canManage ? (
-              <p className="text-xs text-muted-foreground">
-                Only admins can change the location tree.
-              </p>
+  if (!loading && rows.length === 0) {
+    return (
+      <div data-testid="locations-page">
+        <PageHeader
+          title="Locations"
+          className="max-md:hidden"
+          actions={newLocationButton}
+        />
+        <EmptyState
+          icon={MapPin}
+          title="No locations yet."
+          description="Add your sites first, then the rooms, benches and shelves inside them."
+          action={newLocationButton}
+        />
+        {dialogs}
+      </div>
+    );
+  }
+
+  const selectedChildren = selected
+    ? (childrenByParent.get(selected.id) ?? [])
+    : [];
+  const parent = selected?.parentId ? rowsById.get(selected.parentId) : null;
+  const directAssetCount = selected
+    ? (assetsByLocation.get(selected.id)?.length ?? 0)
+    : 0;
+  const deleteBlockedReason =
+    selectedChildren.length > 0 || directAssetCount > 0
+      ? `Move out its ${[
+          directAssetCount > 0
+            ? `${directAssetCount} ${directAssetCount === 1 ? "asset" : "assets"}`
+            : null,
+          selectedChildren.length > 0
+            ? `${selectedChildren.length} ${selectedChildren.length === 1 ? "sub-location" : "sub-locations"}`
+            : null,
+        ]
+          .filter(Boolean)
+          .join(" and ")} first`
+      : null;
+  const showAll = showAllFor !== null && showAllFor === selectedId;
+  const shownAssets = showAll
+    ? subtreeAssets
+    : subtreeAssets.slice(0, SHEET_LIMIT);
+
+  const detailCard = selected ? (
+    <Panel className="overflow-hidden" data-testid="location-detail">
+      <div className="flex flex-wrap items-start gap-x-4 gap-y-3 px-4 pt-4 pb-4 md:px-5">
+        <div className="min-w-0 flex-1 basis-60">
+          <h2 className="wide text-2xl leading-tight font-bold text-foreground">
+            {selected.name}
+            {parent ? " " : null}
+            {parent ? (
+              <span className="ml-1 text-lg font-normal tracking-normal text-ink-2 [font-stretch:100%]">
+                in {parent.name}
+              </span>
             ) : null}
-          </div>
-          {canManage ? (
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full cursor-pointer sm:w-auto"
-              onClick={openCreateRoot}
-            >
-              <Plus className="h-4 w-4" />
-              Add root location
-            </Button>
+          </h2>
+          {selected.description ? (
+            <p className="mt-1 max-w-[60ch] text-sm text-ink-2">
+              {selected.description}
+            </p>
           ) : null}
         </div>
-
-        <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...
-            </div>
-          ) : (
-            <LocationTree
-              locations={rows}
-              selectedId={selectedId}
-              expandedIds={expandedIds}
-              canManage={canManage}
-              onToggleExpand={toggleExpand}
-              onSelect={selectLocation}
-              onAddChild={openCreateChild}
-              onDelete={(id) => {
-                selectLocation(id);
-                setDeleteId(id);
-              }}
-            />
-          )}
-        </div>
-      </section>
-
-      <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">
-              <MapPinned className="h-3.5 w-3.5" />
-              Details panel
-            </div>
-            <div>
-              <h3 className="text-base font-semibold tracking-tight">
-                Select a location
-              </h3>
-              <p className="mt-1 text-sm text-muted-foreground">
-                Choose a node in the tree to edit its name, parent, and
-                description.
-              </p>
-            </div>
-            {canManage ? (
+        <div className="flex items-center gap-2">
+          <Button asChild variant="outline">
+            <Link href={`/assets/new?location=${selected.id}`}>
+              <Plus />
+              Add asset here…
+            </Link>
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
               <Button
                 type="button"
-                className="cursor-pointer"
-                onClick={openCreateRoot}
+                variant="outline"
+                size="icon"
+                aria-label="Location actions"
               >
-                <Plus className="h-4 w-4" />
-                Add root location
+                <MoreHorizontal />
               </Button>
-            ) : null}
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="space-y-1">
-              <h2 className="text-lg font-semibold tracking-tight">
-                Location details
-              </h2>
-              <p className="text-sm text-muted-foreground">
-                Update the selected location or move it to a different parent.
-              </p>
-            </div>
-
-            <div className="space-y-1.5">
-              <label htmlFor="location-name" className="text-sm font-medium">
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              {subtreeAssets.length > 0 ? (
+                <DropdownMenuItem asChild>
+                  <Link
+                    href={`/labels/print?assetIds=${subtreeAssets.map((asset) => asset.id).join(",")}`}
+                  >
+                    <Printer />
+                    Print labels…
+                  </Link>
+                </DropdownMenuItem>
+              ) : null}
+              {canManage ? (
+                <>
+                  <DropdownMenuItem onSelect={() => openCreate(selected.id)}>
+                    <Plus />
+                    New location inside…
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={openEdit}>
+                    <Pencil />
+                    Edit…
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  {deleteBlockedReason ? (
+                    <DropdownMenuItem disabled className="items-start">
+                      <Trash2 className="mt-0.5" />
+                      <span>
+                        Delete…
+                        <span className="block text-[13px] text-muted-foreground">
+                          {deleteBlockedReason}
+                        </span>
+                      </span>
+                    </DropdownMenuItem>
+                  ) : (
+                    <DropdownMenuItem
+                      variant="destructive"
+                      onSelect={() => setDeleteOpen(true)}
+                    >
+                      <Trash2 />
+                      Delete…
+                    </DropdownMenuItem>
+                  )}
+                </>
+              ) : null}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <StatStrip
+        className="rounded-none border-0 border-t border-border"
+        items={[
+          { key: "assets", label: "Assets", value: subtreeAssets.length },
+          {
+            key: "overdue",
+            label: "Overdue",
+            value: overdueCount,
+            tone: "danger",
+            href: overdueCount > 0 ? "/services" : undefined,
+          },
+          {
+            key: "under_repair",
+            label: "Under repair",
+            shortLabel: "In repair",
+            value: subtreeAssets.filter(
+              (asset) => asset.status === "under_repair",
+            ).length,
+            tone: "repair",
+          },
+          {
+            key: "in_storage",
+            label: "In storage",
+            shortLabel: "Stored",
+            value: subtreeAssets.filter(
+              (asset) => asset.status === "in_storage",
+            ).length,
+            tone: "slate",
+          },
+          {
+            key: "inside",
+            label: "Sub-locations",
+            value: selectedChildren.length,
+          },
+        ]}
+      />
+    </Panel>
+  ) : null;
+
+  const assetsSheet = selected ? (
+    <section>
+      <SheetHeading
+        title={`Assets at ${selected.name}`}
+        count={subtreeAssets.length}
+        aside={
+          selectedChildren.length === 0 && subtreeAssets.length > 0 ? (
+            <Link href={`/assets?location=${selected.id}`}>Open in Assets</Link>
+          ) : null
+        }
+      />
+      {subtreeAssets.length === 0 ? (
+        <p className="px-0.5 py-4 text-sm text-ink-2">
+          Nothing here yet.{" "}
+          <Link
+            href={`/assets/new?location=${selected.id}`}
+            className="font-medium text-foreground underline underline-offset-[3px]"
+          >
+            Add an asset here…
+          </Link>
+        </p>
+      ) : isPhone ? (
+        <AssetCardList
+          rows={shownAssets}
+          loading={false}
+          secondary="category"
+        />
+      ) : (
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr>
+              <th className="h-10 border-b border-border px-0.5 text-left text-[13px] font-semibold">
+                Tag
+              </th>
+              <th className="h-10 border-b border-border px-3 text-left text-[13px] font-semibold">
                 Name
-              </label>
-              <Input
-                id="location-name"
-                value={panelDraft.name}
-                onChange={(event) =>
-                  setPanelDraft((prev) =>
-                    prev ? { ...prev, name: event.target.value } : prev,
-                  )
-                }
-                disabled={!canManage || saving}
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <label className="text-sm font-medium">Parent location</label>
-              <Select
-                value={panelDraft.parentId ?? "__none__"}
-                onValueChange={(value) =>
-                  setPanelDraft((prev) =>
-                    prev
-                      ? {
-                          ...prev,
-                          parentId: value === "__none__" ? null : value,
-                        }
-                      : prev,
-                  )
-                }
-                disabled={!canManage || saving}
+              </th>
+              <th className="hidden h-10 border-b border-border px-3 text-left text-[13px] font-semibold lg:table-cell">
+                Category
+              </th>
+              <th className="h-10 border-b border-border pl-[30px] text-left text-[13px] font-semibold">
+                Status
+              </th>
+              <th className="h-10 border-b border-border pr-0.5 text-right text-[13px] font-semibold">
+                Updated
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {shownAssets.map((asset) => {
+              const time = formatRelativeTime(asset.updatedAt);
+              const nested =
+                asset.locationId !== selected.id && asset.locationPath
+                  ? asset.locationPath.slice(selected.path.length + 3)
+                  : null;
+              return (
+                <tr
+                  key={asset.id}
+                  className="cursor-pointer border-b border-border hover:bg-card/60"
+                  onClick={() => router.push(`/assets/${asset.id}`)}
+                >
+                  <td className="w-[1%] py-2.5 pr-3 pl-0.5">
+                    <TagChip weight="table">{asset.assetTag}</TagChip>
+                  </td>
+                  <td className="px-3 py-2.5">
+                    <Link
+                      href={`/assets/${asset.id}`}
+                      onClick={(event) => event.stopPropagation()}
+                      className="font-medium text-foreground hover:underline hover:underline-offset-[3px]"
+                    >
+                      {asset.name}
+                    </Link>
+                    {nested ? (
+                      <span className="block text-[13px] text-ink-2">
+                        in {nested}
+                      </span>
+                    ) : null}
+                  </td>
+                  <td className="hidden px-3 whitespace-nowrap text-foreground lg:table-cell">
+                    {asset.categoryName ?? (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                  <td className="px-3 whitespace-nowrap">
+                    <StatusText
+                      status={asset.status}
+                      inTable
+                      className="max-lg:text-[13px]"
+                    />
+                  </td>
+                  <td className="pr-0.5 pl-3 text-right whitespace-nowrap text-ink-2">
+                    <span className="hidden lg:inline">{time.long}</span>
+                    <span className="lg:hidden">{time.short}</span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+      {subtreeAssets.length > SHEET_LIMIT ? (
+        <SheetFoot>
+          {showAll ? (
+            <>All {subtreeAssets.length}, most recently updated first.</>
+          ) : (
+            <>
+              Showing the {SHEET_LIMIT} most recently updated of{" "}
+              {subtreeAssets.length}.{" "}
+              <button
+                type="button"
+                onClick={() => setShowAllFor(selectedId)}
+                className="cursor-pointer font-medium text-foreground underline underline-offset-[3px]"
               >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="No parent (root)" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none__">No parent (root)</SelectItem>
-                  {parentOptions.map((location) => (
-                    <SelectItem key={location.id} value={location.id}>
-                      {location.path}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+                Show all {subtreeAssets.length}
+              </button>
+            </>
+          )}
+        </SheetFoot>
+      ) : null}
+    </section>
+  ) : null;
 
-            <div className="space-y-1.5">
-              <label
-                htmlFor="location-description"
-                className="text-sm font-medium"
+  return (
+    <div data-testid="locations-page">
+      <PageHeader
+        title="Locations"
+        count={loading ? undefined : rows.length}
+        description={subline}
+        className="max-md:hidden"
+        actions={newLocationButton}
+      />
+      {loading ? null : <MobileTitleCount count={rows.length} />}
+
+      {isPhone ? (
+        <div className="space-y-6">
+          <LocationPicker
+            value={selectedId}
+            options={rows}
+            onChange={(id) => (id ? select(id) : null)}
+            nullLabel="Choose a location"
+            compact
+            trigger={
+              <button
+                type="button"
+                aria-label={`Location: ${selected?.path ?? "none"}. Change location`}
+                className="flex h-12 w-full cursor-pointer items-center gap-3 rounded-md border-[1.5px] border-input bg-card px-3.5 text-left"
               >
-                Description
-              </label>
-              <Textarea
-                id="location-description"
-                value={panelDraft.description}
-                onChange={(event) =>
-                  setPanelDraft((prev) =>
-                    prev ? { ...prev, description: event.target.value } : prev,
-                  )
-                }
-                placeholder="Optional note about this location"
-                disabled={!canManage || saving}
-              />
-            </div>
-
-            <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2">
-              <div className="text-xs font-medium text-muted-foreground">
-                Path preview
-              </div>
-              <div className="mt-1 text-sm">
-                {pathPreview || selectedLocation.path}
-              </div>
-            </div>
-
-            <div className="grid gap-2 rounded-md border border-border/60 bg-muted/15 px-3 py-2 text-xs text-muted-foreground">
-              <div>
-                Created:{" "}
-                <span className="text-foreground">
-                  {formatDateFromTimestamp(
-                    selectedLocation.createdAt,
-                    dateFormat,
-                  )}
-                </span>
-              </div>
-              <div>
-                Updated:{" "}
-                <span className="text-foreground">
-                  {formatDateFromTimestamp(
-                    selectedLocation.updatedAt,
-                    dateFormat,
+                <span className="eyebrow">Location</span>
+                <span className="min-w-0 flex-1 truncate text-sm text-ink-2">
+                  {selected ? (
+                    <>
+                      {splitPath(selected.path).ancestors
+                        ? `${splitPath(selected.path).ancestors} / `
+                        : null}
+                      <b className="font-semibold text-foreground">
+                        {selected.name}
+                      </b>
+                    </>
+                  ) : (
+                    "Choose a location"
                   )}
                 </span>
+                <ChevronDown className="size-4 shrink-0 text-ink-2" />
+              </button>
+            }
+          />
+          {loading ? <Skeleton className="h-40 rounded-md" /> : detailCard}
+          {loading ? null : assetsSheet}
+        </div>
+      ) : (
+        <div className="grid items-start gap-6 md:grid-cols-[260px_minmax(0,1fr)] lg:grid-cols-[340px_minmax(0,1fr)] lg:gap-7">
+          <Panel className="overflow-hidden" data-testid="location-tree">
+            <div className="flex items-center gap-3 border-b border-border p-3">
+              <div className="relative min-w-0 flex-1">
+                <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Find a location"
+                  aria-label="Find a location"
+                  className="pl-9"
+                />
               </div>
+              <button
+                type="button"
+                onClick={() =>
+                  setExpandedIds(
+                    effectiveExpanded.size > 0
+                      ? new Set()
+                      : new Set(rows.map((row) => row.id)),
+                  )
+                }
+                className="shrink-0 cursor-pointer text-sm font-medium text-ink-2 underline underline-offset-[3px] hover:text-foreground max-lg:hidden"
+              >
+                {effectiveExpanded.size > 0 ? "Collapse all" : "Expand all"}
+              </button>
             </div>
 
-            {canManage ? (
-              <div className="flex flex-wrap items-center justify-between gap-2 pt-1">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="destructive"
-                      className="cursor-pointer"
-                      onClick={() => setDeleteId(selectedLocation.id)}
-                      disabled={saving || deleting}
+            {loading ? (
+              <div className="space-y-4 p-4">
+                {[70, 50, 60, 45].map((width) => (
+                  <Skeleton
+                    key={width}
+                    className="h-2.5"
+                    style={{ width: `${width}%` }}
+                  />
+                ))}
+              </div>
+            ) : flatRows.length === 0 ? (
+              <p className="px-4 py-6 text-sm text-ink-2">
+                No location matches “{query.trim()}”.
+              </p>
+            ) : (
+              <ul className="py-1.5" aria-label="Location tree">
+                {flatRows.map(({ location, depth, hasChildren, expanded }) => {
+                  const current = location.id === selectedId;
+                  return (
+                    <li
+                      key={location.id}
+                      className={cn(
+                        "relative flex h-[38px] items-center pr-3",
+                        current
+                          ? "bg-secondary shadow-[inset_3px_0_0_var(--amber-ink)]"
+                          : "hover:bg-secondary/60",
+                      )}
+                      style={{ paddingLeft: 10 + depth * INDENT }}
                     >
-                      <Trash2 className="h-4 w-4" />
-                      Delete
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>Delete this location</TooltipContent>
-                </Tooltip>
-
-                <div className="flex flex-wrap items-center gap-2">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
+                      {Array.from({ length: depth }).map((_, level) => (
+                        <span
+                          key={level}
+                          aria-hidden="true"
+                          className="absolute inset-y-0 w-px bg-line-2"
+                          style={{ left: 10 + level * INDENT + 11 }}
+                        />
+                      ))}
+                      {hasChildren ? (
+                        <button
+                          type="button"
+                          aria-label={`${expanded ? "Collapse" : "Expand"} ${location.name}`}
+                          aria-expanded={expanded}
+                          onClick={() => toggle(location.id)}
+                          disabled={Boolean(query.trim())}
+                          className="relative z-10 grid size-[22px] shrink-0 cursor-pointer place-items-center rounded-xs text-ink-2 hover:text-foreground disabled:cursor-default"
+                        >
+                          {expanded ? (
+                            <ChevronDown className="size-3.5" />
+                          ) : (
+                            <ChevronRight className="size-3.5" />
+                          )}
+                        </button>
+                      ) : (
+                        <span className="size-[22px] shrink-0" />
+                      )}
+                      <button
                         type="button"
-                        variant="outline"
-                        className="cursor-pointer"
-                        onClick={() => setPanelDraft(toDraft(selectedLocation))}
-                        disabled={saving || deleting || !hasPanelChanges}
+                        onClick={() => select(location.id)}
+                        aria-current={current ? "true" : undefined}
+                        className={cn(
+                          "flex h-full min-w-0 flex-1 cursor-pointer items-center gap-2 pl-1.5 text-left text-sm",
+                          depth === 0 ? "font-semibold" : "font-medium",
+                          current
+                            ? "text-foreground"
+                            : "text-ink-2 hover:text-foreground",
+                          depth === 0 && !current && "text-foreground",
+                        )}
                       >
-                        <RefreshCw className="h-4 w-4" />
-                        Reset
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>Discard unsaved changes</TooltipContent>
-                  </Tooltip>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        type="button"
-                        className="cursor-pointer"
-                        onClick={() => void handleSavePanel()}
-                        disabled={saving || deleting || !hasPanelChanges}
+                        <span className="truncate">{location.name}</span>
+                        <span className="ml-auto font-mono text-[13px] font-medium text-muted-foreground">
+                          {totals.get(location.id) ?? 0}
+                        </span>
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+
+            {!loading && emptyLocations.length > 0 && !query.trim() ? (
+              <div className="border-t-2 border-foreground px-3.5 pt-3.5 pb-2">
+                <h3 className="eyebrow mb-1.5">Empty locations</h3>
+                <ul>
+                  {emptyLocations.map((location) => {
+                    const { ancestors, leaf } = splitPath(location.path);
+                    return (
+                      <li
+                        key={location.id}
+                        className="flex min-h-[34px] items-center gap-2"
                       >
-                        {saving ? (
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        ) : (
-                          <Save className="h-4 w-4" />
-                        )}
-                        {saving ? "Saving..." : "Save changes"}
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent>Save location changes</TooltipContent>
-                  </Tooltip>
-                </div>
+                        <MapPin
+                          className="size-3.5 shrink-0 text-muted-foreground"
+                          aria-hidden="true"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => select(location.id)}
+                          className="min-w-0 flex-1 cursor-pointer truncate text-left text-sm text-ink-2 hover:underline hover:underline-offset-[3px]"
+                        >
+                          {ancestors ? `${ancestors} / ` : null}
+                          <b className="font-medium text-foreground">{leaf}</b>
+                        </button>
+                        <Link
+                          href={`/assets/new?location=${location.id}`}
+                          aria-label={`Add asset to ${location.path}`}
+                          className="grid size-7 shrink-0 place-items-center rounded-xs border-[1.5px] border-input bg-card text-foreground hover:border-foreground"
+                        >
+                          <Plus className="size-3.5" />
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ) : null}
+
+            {loading ? null : (
+              <div className="border-t border-border px-3.5 py-3 text-[13px] text-muted-foreground">
+                {rows.length} {rows.length === 1 ? "location" : "locations"}
+                {emptyLocations.length > 0
+                  ? ` · ${emptyLocations.length} empty`
+                  : null}
               </div>
-            ) : (
-              <p className="text-xs text-muted-foreground">
-                Read-only view. Ask an admin to update locations.
-              </p>
             )}
-          </div>
-        )}
-      </section>
+          </Panel>
 
-      <LocationFormDialog
-        open={createDialogOpen}
-        locations={rows}
-        values={createForm}
-        submitting={creating}
-        onClose={() => {
-          if (!creating) setCreateDialogOpen(false);
-        }}
-        onChange={setCreateForm}
-        onSubmit={handleCreate}
-      />
+          <div className="min-w-0 space-y-7">
+            {loading ? <Skeleton className="h-44 rounded-md" /> : detailCard}
+            {loading ? null : assetsSheet}
+          </div>
+        </div>
+      )}
 
-      <ConfirmDialog
-        open={Boolean(deleteId)}
-        title="Delete location"
-        description={
-          activeDeleteLocation
-            ? `Delete ${activeDeleteLocation.path}?`
-            : "Delete this location?"
-        }
-        busy={deleting}
-        onClose={() => {
-          if (!deleting) setDeleteId(null);
-        }}
-        onConfirm={() => void handleDelete()}
-      />
+      {dialogs}
     </div>
   );
 }
diff --git a/src/components/scan/scan-page-client.tsx b/src/components/scan/scan-page-client.tsx
index aad905c..ad75704 100644
--- a/src/components/scan/scan-page-client.tsx
+++ b/src/components/scan/scan-page-client.tsx
@@ -163,26 +163,27 @@ export function ScanPageClient() {
 
   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)]"
+      className="on-charcoal relative -mx-4 -mt-4 -mb-24 flex min-h-[calc(100svh-56px)] flex-col items-center gap-5 bg-sidebar px-4 pt-3 pb-28 text-white md:-mx-6 md:-mt-6 md:-mb-14 md:min-h-svh md:border-l md:border-sidebar-border md:pb-12 lg:-mx-9 lg:-mt-8 lg:-mb-10"
       data-testid="scan-page"
     >
-      <div className="flex w-full items-center justify-between">
-        <Button
+      <div className="grid w-full max-w-md grid-cols-[1fr_auto_1fr] items-center">
+        <button
           type="button"
-          variant="ghost"
-          size="sm"
-          className="cursor-pointer"
+          className="inline-flex h-10 w-fit cursor-pointer items-center gap-1.5 rounded-md px-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-white"
           data-testid="scan-back"
           onClick={() => router.back()}
         >
-          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          <ArrowLeft className="size-4" aria-hidden="true" />
           Back
-        </Button>
+        </button>
+        <h1 className="wide text-base font-bold text-white">Scan a label</h1>
+        <div className="flex justify-end">
         <TorchButton
           supported={scanner.torch.supported}
           on={scanner.torch.on}
           onToggle={scanner.torch.toggle}
         />
+        </div>
       </div>
 
       <ScannerBody scanner={scanner} videoRef={videoRef} detected={detected} />
@@ -190,11 +191,13 @@ export function ScanPageClient() {
       <Button
         type="button"
         variant="outline"
+        size="lg"
+        className="border-white bg-transparent text-white hover:bg-sidebar-accent hover:text-white"
         data-testid="scan-manual-entry"
         onClick={() => setManualOpen(true)}
       >
-        <Keyboard className="h-4 w-4" aria-hidden="true" />
-        Enter asset tag
+        <Keyboard aria-hidden="true" />
+        Type the tag…
       </Button>
 
       <ManualEntrySheet
@@ -273,12 +276,12 @@ function ScannerBody({
         active={scanner.state === "scanning"}
         detected={detected}
       />
-      <p className="text-sm text-muted-foreground">
+      <p className="text-sm text-sidebar-foreground" aria-live="polite">
         {detected?.phase === "confirmed"
-          ? "Got it — opening…"
+          ? "Got it. Opening…"
           : detected?.phase === "detecting"
-            ? "Barcode detected — reading…"
-            : "Point at a Stowage label"}
+            ? "Found a code. Reading…"
+            : "Point the camera at a Stowage label."}
       </p>
     </>
   );
@@ -297,14 +300,12 @@ function ScannerState({
 }) {
   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"
+      className="flex aspect-square w-full max-w-md flex-col items-center justify-center gap-2.5 rounded-md border border-dashed border-sidebar-muted px-8 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>
+      <Icon className="mb-1 size-8 text-sidebar-foreground" />
+      <p className="wide text-lg font-bold text-white">{title}</p>
+      <p className="max-w-[36ch] text-sm text-sidebar-foreground">{description}</p>
     </div>
   );
 }
@@ -321,18 +322,19 @@ function TorchButton({
   if (!supported) return null;
   const Icon = on ? Flashlight : FlashlightOff;
   return (
-    <Button
+    <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)]")}
+      className={cn(
+        "grid size-10 cursor-pointer place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent hover:text-white",
+        on && "text-[var(--scan)] hover:text-[var(--scan)]",
+      )}
       data-testid="scan-torch"
       onClick={onToggle}
     >
-      <Icon className="h-4 w-4" aria-hidden="true" />
-    </Button>
+      <Icon className="size-5" aria-hidden="true" />
+    </button>
   );
 }
 
@@ -355,8 +357,8 @@ function ManualEntrySheet({
     <MobileActionSheet
       open={open}
       onOpenChange={onOpenChange}
-      title="Enter asset tag"
-      description="Type the tag printed on the label (or paste a Stowage asset URL)."
+      title="Type the tag"
+      description="The tag printed on the label, or a Stowage asset link."
     >
       <form
         onSubmit={onSubmit}
@@ -365,7 +367,8 @@ function ManualEntrySheet({
       >
         <Input
           autoFocus
-          placeholder="AST-0047"
+          placeholder="PT-0042"
+          className="h-11 font-mono"
           value={value}
           onChange={(event) => onChange(event.target.value)}
           data-testid="scan-manual-input"
@@ -386,7 +389,7 @@ function ManualEntrySheet({
             disabled={busy || !value.trim()}
             data-testid="scan-manual-submit"
           >
-            {busy ? "Looking up…" : "Go"}
+            {busy ? "Looking up…" : "Open asset"}
           </Button>
         </div>
       </form>
diff --git a/src/components/scan/scan-viewport.tsx b/src/components/scan/scan-viewport.tsx
index e7f36f1..6ef4446 100644
--- a/src/components/scan/scan-viewport.tsx
+++ b/src/components/scan/scan-viewport.tsx
@@ -44,7 +44,7 @@ export function ScanViewport({
     <div
       ref={containerRef}
       className={cn(
-        "relative aspect-square w-full max-w-md overflow-hidden rounded-2xl bg-black",
+        "relative aspect-square w-full max-w-md overflow-hidden rounded-md bg-black",
         className,
       )}
       data-testid="scan-viewport"
diff --git a/src/components/search/global-search.tsx b/src/components/search/global-search.tsx
index 5286198..df9eda3 100644
--- a/src/components/search/global-search.tsx
+++ b/src/components/search/global-search.tsx
@@ -6,11 +6,13 @@ import {
   useEffectEvent,
   useMemo,
   useState,
+  useSyncExternalStore,
 } from "react";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { CornerDownLeft, Loader2, Search } from "lucide-react";
 import { StatusBadge } from "@/components/assets/status-badge";
+import { TagChip } from "@/components/ui/tag-chip";
 import type { AssetStatus } from "@/components/assets/types";
 import {
   CommandDialog,
@@ -21,6 +23,7 @@ import {
   CommandShortcut,
 } from "@/components/ui/command";
 import { searchAssets } from "@/lib/api/search";
+import { cn } from "@/lib/utils";
 
 type SearchResult = {
   id: string;
@@ -39,9 +42,122 @@ function getSecondaryMeta(result: SearchResult) {
   return parts.length > 0 ? parts.join(" / ") : "No category or location";
 }
 
-export function GlobalSearch() {
+export type GlobalSearchVariant = "sidebar" | "rail" | "icon";
+
+const noopSubscribe = () => () => {};
+
+function useIsMacPlatform() {
+  return useSyncExternalStore(
+    noopSubscribe,
+    () => /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent),
+    () => false,
+  );
+}
+
+/*
+  One search dialog for the whole shell. The sidebar, the tablet rail and the
+  phone top bar each render a trigger, but only GlobalSearchDialog (mounted
+  once in the shell) owns the dialog and the Ctrl/Cmd+K listener. The open
+  flag lives in a tiny module store so every trigger reaches the same dialog.
+*/
+let searchOpen = false;
+const searchListeners = new Set<() => void>();
+
+function subscribeSearchOpen(listener: () => void) {
+  searchListeners.add(listener);
+  return () => {
+    searchListeners.delete(listener);
+  };
+}
+
+function setSearchOpen(next: boolean) {
+  if (searchOpen === next) return;
+  searchOpen = next;
+  for (const listener of searchListeners) listener();
+}
+
+export function openGlobalSearch() {
+  setSearchOpen(true);
+}
+
+function useSearchOpen() {
+  return useSyncExternalStore(
+    subscribeSearchOpen,
+    () => searchOpen,
+    () => false,
+  );
+}
+
+export function GlobalSearch({
+  variant = "sidebar",
+  className,
+}: {
+  variant?: GlobalSearchVariant;
+  className?: string;
+}) {
+  const isMac = useIsMacPlatform();
+
+  if (variant === "icon") {
+    return (
+      <button
+        type="button"
+        onClick={openGlobalSearch}
+        aria-label="Open global search"
+        aria-keyshortcuts="Control+K Meta+K"
+        className={cn(
+          "grid size-11 cursor-pointer place-items-center rounded-md text-sidebar-foreground hover:bg-sidebar-accent",
+          className,
+        )}
+        data-global-search-trigger
+      >
+        <Search className="size-5" />
+      </button>
+    );
+  }
+
+  if (variant === "rail") {
+    return (
+      <button
+        type="button"
+        onClick={openGlobalSearch}
+        aria-label="Open global search"
+        aria-keyshortcuts="Control+K Meta+K"
+        className={cn(
+          "flex h-12 w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-sidebar-muted text-[13px] text-sidebar-foreground hover:bg-sidebar-accent",
+          className,
+        )}
+        data-global-search-trigger
+      >
+        <Search className="size-[18px] text-white" />
+        Search
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={openGlobalSearch}
+      aria-label="Open global search"
+      aria-keyshortcuts="Control+K Meta+K"
+      className={cn(
+        "flex h-9 w-full cursor-pointer items-center gap-2 rounded-md bg-sidebar-accent px-2.5 text-left text-sm text-sidebar-muted hover:text-sidebar-foreground",
+        className,
+      )}
+      data-global-search-trigger
+    >
+      <Search className="size-4 shrink-0" />
+      <span className="min-w-0 truncate">Search assets, locations</span>
+      <kbd className="ml-auto shrink-0 font-mono text-[13px] font-medium">
+        {isMac ? "⌘K" : "Ctrl K"}
+      </kbd>
+    </button>
+  );
+}
+
+export function GlobalSearchDialog() {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
+  const open = useSearchOpen();
   const [searchValue, setSearchValue] = useState("");
   const deferredSearchValue = useDeferredValue(searchValue.trim());
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
@@ -76,7 +192,7 @@ export function GlobalSearch() {
     }
 
     event.preventDefault();
-    setOpen(true);
+    setSearchOpen(true);
   });
 
   useEffect(() => {
@@ -87,13 +203,14 @@ export function GlobalSearch() {
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
+      setSearchOpen(false);
     };
   }, []);
 
   const isLoading = hasSearchTerm && resultsQuery.isPending;
 
   function handleOpenChange(nextOpen: boolean) {
-    setOpen(nextOpen);
+    setSearchOpen(nextOpen);
     if (!nextOpen) {
       setSearchValue("");
       setDebouncedSearchTerm("");
@@ -107,31 +224,12 @@ export function GlobalSearch() {
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        aria-label="Open global search"
-        aria-keyshortcuts="Control+K Meta+K"
-        className="flex h-9 w-full max-w-xl cursor-pointer items-center justify-between gap-3 rounded-xl border border-border/70 bg-card/70 px-3 text-left shadow-sm transition-colors hover:border-primary/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        data-global-search-trigger
-      >
-        <span className="flex min-w-0 items-center gap-2">
-          <Search className="h-4 w-4 text-muted-foreground" />
-          <span className="truncate text-sm text-muted-foreground">
-            Search assets...
-          </span>
-        </span>
-        <span className="hidden shrink-0 items-center gap-1 rounded-md border border-border/70 bg-background/80 px-2 py-1 text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground md:inline-flex">
-          Ctrl/Cmd K
-        </span>
-      </button>
-
       <CommandDialog
         open={open}
         onOpenChange={handleOpenChange}
         title="Search assets"
         description="Search assets by name, asset tag, or notes."
-        className="w-[calc(100vw-1.5rem)] max-w-2xl p-0"
+        className="w-[calc(100vw-1.5rem)] max-w-2xl gap-0 p-0"
       >
         <CommandInput
           value={searchValue}
@@ -170,11 +268,11 @@ export function GlobalSearch() {
                       </span>
                       <StatusBadge
                         status={result.status}
-                        className="shrink-0"
+                        className="shrink-0 text-[13px]"
                       />
                     </div>
                     <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                      <span className="font-mono">{result.assetTag}</span>
+                      <TagChip weight="table">{result.assetTag}</TagChip>
                       <span className="text-border">/</span>
                       <span className="truncate">
                         {getSecondaryMeta(result)}
diff --git a/src/components/services/next-service-panel.tsx b/src/components/services/next-service-panel.tsx
new file mode 100644
index 0000000..a1dc871
--- /dev/null
+++ b/src/components/services/next-service-panel.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Check } from "lucide-react";
+import { CrudModal } from "@/components/crud/modal";
+import { ServiceRecordForm } from "@/components/services/service-record-form";
+import { Button } from "@/components/ui/button";
+import { describeDue } from "@/components/ui/due-tag";
+import { Panel, PanelFooter } from "@/components/ui/panel";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getAppSettings } from "@/lib/api/app-settings";
+import {
+  getScheduleByAssetId,
+  type ServiceIntervalUnit,
+} from "@/lib/api/service-schedules";
+import { formatDateFromIsoDateOnly, getDaysUntil } from "@/lib/date-format";
+import { useAppDateFormat } from "@/lib/use-app-date-format";
+import { useTodayIsoDate } from "@/lib/use-today-iso-date";
+import { cn } from "@/lib/utils";
+
+function unitLabel(value: number, unit: ServiceIntervalUnit) {
+  const singular = unit.slice(0, -1);
+  return value === 1 ? singular : unit;
+}
+
+export function formatInterval(value: number, unit: ServiceIntervalUnit) {
+  return value === 1 ? `Every ${unitLabel(1, unit)}` : `Every ${value} ${unit}`;
+}
+
+export function formatReminder(value: number, unit: ServiceIntervalUnit) {
+  if (value <= 0) return "On the day";
+  return `${value} ${unitLabel(value, unit)} before`;
+}
+
+/*
+  Next service: the one card on the asset page with a primary action. The
+  big line is the due distance (red once overdue), then the service plan and
+  date, then interval and reminder as label/value rows.
+*/
+export function NextServicePanel({
+  assetId,
+  assetName,
+  serviceGroupName,
+  className,
+}: {
+  assetId: string;
+  assetName: string;
+  serviceGroupName: string | null;
+  className?: string;
+}) {
+  const dateFormat = useAppDateFormat();
+  const today = useTodayIsoDate();
+  const [logOpen, setLogOpen] = useState(false);
+
+  const settingsQuery = useQuery({
+    queryKey: ["app-settings"],
+    queryFn: getAppSettings,
+    staleTime: 5 * 60_000,
+  });
+  const scheduleQuery = useQuery({
+    queryKey: ["service-schedules", "by-asset", assetId],
+    queryFn: () => getScheduleByAssetId(assetId),
+  });
+
+  const schedulingEnabled =
+    settingsQuery.data?.serviceSchedulingEnabled ?? true;
+  // Whether logging completes the schedule or adds a plain record depends on
+  // both queries, so wait for them; otherwise the form would remount and
+  // switch modes mid-entry.
+  const settled = !settingsQuery.isPending && !scheduleQuery.isPending;
+  const schedule = schedulingEnabled ? (scheduleQuery.data ?? null) : null;
+  const due = schedule
+    ? describeDue(getDaysUntil(schedule.nextServiceDate, today))
+    : null;
+
+  return (
+    <Panel className={className} data-testid="next-service-panel">
+      <div className="px-[18px] pt-4 pb-3.5">
+        <div className="eyebrow mb-1.5">Next service</div>
+        {!settled ? (
+          <div className="space-y-2.5 py-1">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-2.5 w-44" />
+          </div>
+        ) : schedule && due ? (
+          <>
+            <div
+              className={cn(
+                "wide text-[22px] leading-tight font-bold",
+                due.tone === "overdue" ? "text-destructive" : "text-foreground",
+              )}
+            >
+              {due.long}
+            </div>
+            <div className="mt-1 text-sm text-ink-2">
+              {serviceGroupName ? `${serviceGroupName} · ` : null}
+              {formatDateFromIsoDateOnly(schedule.nextServiceDate, dateFormat)}
+            </div>
+            <dl className="mt-3.5 text-sm">
+              <div className="flex justify-between gap-4 border-t border-border py-2">
+                <dt className="text-ink-2">Interval</dt>
+                <dd className="font-semibold text-foreground">
+                  {formatInterval(
+                    schedule.intervalValue,
+                    schedule.intervalUnit,
+                  )}
+                </dd>
+              </div>
+              <div className="flex justify-between gap-4 border-t border-border pt-2">
+                <dt className="text-ink-2">Reminder</dt>
+                <dd className="font-semibold text-foreground">
+                  {formatReminder(
+                    schedule.reminderLeadValue,
+                    schedule.reminderLeadUnit,
+                  )}
+                </dd>
+              </div>
+            </dl>
+          </>
+        ) : (
+          <>
+            <div className="wide text-lg leading-tight font-bold text-foreground">
+              Not scheduled
+            </div>
+            <p className="mt-1 text-sm text-ink-2">
+              {schedulingEnabled
+                ? "Set an interval to get reminders before it is due."
+                : "Service scheduling is turned off in Settings."}
+            </p>
+          </>
+        )}
+      </div>
+      <PanelFooter className="grid grid-cols-2 gap-2.5 py-3.5">
+        <Button
+          type="button"
+          onClick={() => setLogOpen(true)}
+          disabled={!settled}
+        >
+          <Check />
+          Log service…
+        </Button>
+        {schedulingEnabled ? (
+          <Button asChild variant="outline">
+            <Link href={`/assets/${assetId}/edit#service`}>
+              {schedule ? "Reschedule…" : "Schedule…"}
+            </Link>
+          </Button>
+        ) : null}
+      </PanelFooter>
+
+      <CrudModal
+        open={logOpen}
+        onClose={() => setLogOpen(false)}
+        title={`Log service: ${assetName}`}
+        description={
+          schedule
+            ? "Completing it moves the next service on by one interval."
+            : "Adds an entry to this asset's service history."
+        }
+      >
+        {logOpen ? (
+          <ServiceRecordForm
+            key={schedule ? `complete-${schedule.id}` : `create-${assetId}`}
+            assetId={assetId}
+            mode={schedule ? "complete" : "create"}
+            scheduleId={schedule?.id ?? null}
+          />
+        ) : null}
+      </CrudModal>
+    </Panel>
+  );
+}
diff --git a/src/components/services/schedule-buckets.ts b/src/components/services/schedule-buckets.ts
new file mode 100644
index 0000000..57bee5e
--- /dev/null
+++ b/src/components/services/schedule-buckets.ts
@@ -0,0 +1,48 @@
+import type { ScheduledServiceItem } from "@/components/services/types";
+import { getDaysUntil } from "@/lib/date-format";
+
+export type BucketKey = "overdue" | "thisWeek" | "thisMonth" | "upcoming";
+
+export const BUCKET_ORDER: BucketKey[] = [
+  "overdue",
+  "thisWeek",
+  "thisMonth",
+  "upcoming",
+];
+
+export const BUCKET_LABELS: Record<BucketKey, string> = {
+  overdue: "Overdue",
+  thisWeek: "Due this week",
+  thisMonth: "Due this month",
+  upcoming: "Later",
+};
+
+type BucketRow = Pick<ScheduledServiceItem, "nextServiceDate" | "reminderStartDate">;
+
+/*
+  Where a scheduled service sits on the Schedule tab. A row whose reminder
+  window has not started yet stays in "Later" even if its date is close, so
+  the Services header counts must use this same rule.
+*/
+export function bucketForRow(row: BucketRow, today: string): BucketKey {
+  const diff = getDaysUntil(row.nextServiceDate, today);
+  if (diff < 0) return "overdue";
+  if (row.reminderStartDate > today) return "upcoming";
+  if (diff <= 7) return "thisWeek";
+  if (diff <= 30) return "thisMonth";
+  return "upcoming";
+}
+
+export function groupByBucket<T extends BucketRow>(rows: T[], today: string) {
+  const groups: Record<BucketKey, T[]> = {
+    overdue: [],
+    thisWeek: [],
+    thisMonth: [],
+    upcoming: [],
+  };
+  for (const row of rows) groups[bucketForRow(row, today)].push(row);
+  for (const list of Object.values(groups)) {
+    list.sort((a, b) => a.nextServiceDate.localeCompare(b.nextServiceDate));
+  }
+  return groups;
+}
diff --git a/src/components/services/scheduling-disabled.tsx b/src/components/services/scheduling-disabled.tsx
new file mode 100644
index 0000000..dfa441f
--- /dev/null
+++ b/src/components/services/scheduling-disabled.tsx
@@ -0,0 +1,20 @@
+import Link from "next/link";
+import { CalendarOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+
+/* Shown on the planner views when an admin has turned scheduling off. */
+export function SchedulingDisabled() {
+  return (
+    <EmptyState
+      icon={CalendarOff}
+      title="Service scheduling is turned off."
+      description="An admin can turn it on in Settings. Service history on each asset still works."
+      action={
+        <Button asChild variant="outline">
+          <Link href="/settings">Open Settings</Link>
+        </Button>
+      }
+    />
+  );
+}
diff --git a/src/components/services/service-group-assets-panel.tsx b/src/components/services/service-group-assets-panel.tsx
index 9ce6d09..912cd6e 100644
--- a/src/components/services/service-group-assets-panel.tsx
+++ b/src/components/services/service-group-assets-panel.tsx
@@ -4,9 +4,13 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { ServiceGroupAsset } from "@/components/services/types";
-import { StatusBadge } from "@/components/assets/status-badge";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
+import { StatusText } from "@/components/ui/status-text";
+import { TagChip } from "@/components/ui/tag-chip";
 import { listServiceGroupAssets } from "@/lib/api/service-groups";
 
+/* The plan's assets as a sheet: tag, name, status (exceptions only). */
 export function ServiceGroupAssetsPanel({ groupId }: { groupId: string }) {
   const rowsQuery = useQuery({
     queryKey: ["service-groups", groupId, "assets"],
@@ -18,111 +22,40 @@ export function ServiceGroupAssetsPanel({ groupId }: { groupId: string }) {
   );
 
   return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div>
-        <h3 className="text-sm font-semibold tracking-tight">
-          Assigned assets
-        </h3>
-        <p className="text-xs text-muted-foreground">
-          Assets assigned to this service group are maintained from asset
-          create/edit.
-        </p>
-      </div>
-
+    <section>
+      <SheetHeading
+        title="Assets on this plan"
+        count={rowsQuery.isPending ? undefined : assets.length}
+      />
       {rowsQuery.isPending ? (
-        <p className="mt-4 text-sm text-muted-foreground md:hidden">
-          Loading assets...
-        </p>
+        <div className="space-y-3 py-4" aria-busy="true">
+          <span className="sr-only">Loading assets...</span>
+          <Skeleton className="h-2.5 w-1/2" />
+          <Skeleton className="h-2.5 w-1/3" />
+        </div>
       ) : assets.length === 0 ? (
-        <p className="mt-4 text-sm text-muted-foreground md:hidden">
-          No assets are currently assigned to this group.
+        <p className="px-0.5 py-4 text-sm text-ink-2">
+          No assets are on this plan yet. Choose the plan when you edit an
+          asset.
         </p>
       ) : (
-        <ul
-          className="mt-4 flex flex-col gap-2 md:hidden"
-          data-testid="service-group-assets-card-list"
-        >
+        <ul 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"
-            >
+            <li key={asset.id} data-testid={`service-group-asset-card-${asset.id}`}>
               <Link
                 href={`/assets/${asset.id}`}
-                className="flex items-start justify-between gap-3 p-3"
+                className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border px-0.5 py-3 hover:bg-card/60"
               >
-                <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} />
+                <TagChip weight="table">{asset.assetTag}</TagChip>
+                <span className="truncate text-sm font-semibold text-foreground">
+                  {asset.name}
+                </span>
+                <StatusText status={asset.status} hideActive className="text-[13px]" />
               </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>
-              <th className="px-3 py-2 font-medium">Tag</th>
-              <th className="px-3 py-2 font-medium">Status</th>
-              <th className="px-3 py-2 font-medium text-right">Open</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rowsQuery.isPending ? (
-              <tr>
-                <td
-                  colSpan={4}
-                  className="px-3 py-8 text-center text-muted-foreground"
-                >
-                  Loading assets...
-                </td>
-              </tr>
-            ) : assets.length === 0 ? (
-              <tr>
-                <td
-                  colSpan={4}
-                  className="px-3 py-8 text-center text-muted-foreground"
-                >
-                  No assets are currently assigned to this group.
-                </td>
-              </tr>
-            ) : (
-              assets.map((asset) => (
-                <tr key={asset.id} className="border-t border-border/50">
-                  <td className="px-3 py-2 font-medium">{asset.name}</td>
-                  <td className="px-3 py-2 font-mono text-xs">
-                    {asset.assetTag}
-                  </td>
-                  <td className="px-3 py-2">
-                    <StatusBadge status={asset.status} />
-                  </td>
-                  <td className="px-3 py-2 text-right">
-                    <Link
-                      href={`/assets/${asset.id}`}
-                      className="text-primary underline-offset-2 hover:underline"
-                    >
-                      Open asset
-                    </Link>
-                  </td>
-                </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
     </section>
   );
 }
diff --git a/src/components/services/service-group-detail-page-client.tsx b/src/components/services/service-group-detail-page-client.tsx
index d394325..589a298 100644
--- a/src/components/services/service-group-detail-page-client.tsx
+++ b/src/components/services/service-group-detail-page-client.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import Link from "next/link";
+import { ArrowLeft, Pencil } from "lucide-react";
 import { useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { ServiceGroupAssetsPanel } from "@/components/services/service-group-assets-panel";
 import { ServiceGroupEditor } from "@/components/services/service-group-editor";
 import { ServiceGroupFieldsPanel } from "@/components/services/service-group-fields-panel";
-import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
@@ -17,7 +18,7 @@ import { getServiceGroup, updateServiceGroup } from "@/lib/api/service-groups";
 function mapGroupError(error: unknown, fallback: string) {
   if (error instanceof ApiRequestError) {
     if (error.status === 403) {
-      return "Only admins can manage service groups.";
+      return "Only admins can manage service plans.";
     }
     return error.message || fallback;
   }
@@ -42,8 +43,10 @@ export function ServiceGroupDetailPageClient({ groupId }: { groupId: string }) {
 
   if (groupQuery.isPending || currentUserPending) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading group...
+      <div className="space-y-4 py-2" aria-busy="true">
+        <span className="sr-only">Loading group...</span>
+        <Skeleton className="h-4 w-56" />
+        <Skeleton className="h-2.5 w-80 max-w-full" />
       </div>
     );
   }
@@ -52,19 +55,14 @@ export function ServiceGroupDetailPageClient({ groupId }: { groupId: string }) {
 
   if (!group) {
     return (
-      <div className="space-y-4">
-        <ServicesNavTabs />
-        <div className="rounded-xl border border-border/70 bg-background p-6 shadow-sm">
-          <h2 className="text-base font-semibold tracking-tight">
-            Group not found
-          </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            The selected service group no longer exists.
-          </p>
-          <Button asChild variant="outline" className="mt-4 cursor-pointer">
-            <Link href="/services/groups">Back to groups</Link>
-          </Button>
-        </div>
+      <div className="max-w-xl py-4">
+        <h2 className="wide text-2xl font-bold text-foreground">Plan not found</h2>
+        <p className="mt-1.5 text-[15px] text-ink-2">
+          The service plan was deleted, or the link is wrong.
+        </p>
+        <Button asChild variant="outline" className="mt-5">
+          <Link href="/services/groups">Back to service plans</Link>
+        </Button>
       </div>
     );
   }
@@ -75,43 +73,44 @@ export function ServiceGroupDetailPageClient({ groupId }: { groupId: string }) {
         name: values.name,
         description: values.description.trim() ? values.description : null,
       });
-      toast.success("Service group updated");
+      toast.success("Service plan updated");
       setEditorOpen(false);
       void queryClient.invalidateQueries({
         queryKey: ["service-groups", groupId],
       });
       void queryClient.invalidateQueries({ queryKey: ["service-groups"] });
     } catch (error) {
-      toast.error(mapGroupError(error, "Unable to update service group"));
+      toast.error(mapGroupError(error, "Unable to update service plan"));
     }
   }
 
   return (
-    <div className="space-y-4">
-      <ServicesNavTabs />
-
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <div className="flex items-center justify-between gap-2">
-          <div>
-            <h2 className="text-base font-semibold tracking-tight">
+    <div className="space-y-8">
+      <div>
+        <Link
+          href="/services/groups"
+          className="mb-2 inline-flex items-center gap-1 text-[13px] font-medium text-ink-2 hover:text-foreground"
+        >
+          <ArrowLeft className="size-3.5" aria-hidden="true" />
+          Service plans
+        </Link>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 className="wide text-2xl leading-tight font-bold text-foreground">
               {group.name}
             </h2>
-            <p className="text-sm text-muted-foreground">
-              {group.description ?? "No description provided."}
+            <p className="mt-1 max-w-[70ch] text-sm text-ink-2">
+              {group.description ?? "No description."}
             </p>
           </div>
           {canManage ? (
-            <Button
-              type="button"
-              variant="outline"
-              className="cursor-pointer"
-              onClick={() => setEditorOpen(true)}
-            >
-              Edit group
+            <Button type="button" variant="outline" onClick={() => setEditorOpen(true)}>
+              <Pencil />
+              Edit…
             </Button>
           ) : null}
         </div>
-      </section>
+      </div>
 
       <ServiceGroupFieldsPanel groupId={groupId} canManage={canManage} />
       <ServiceGroupAssetsPanel groupId={groupId} />
diff --git a/src/components/services/service-group-editor.tsx b/src/components/services/service-group-editor.tsx
index 86f035b..880ab35 100644
--- a/src/components/services/service-group-editor.tsx
+++ b/src/components/services/service-group-editor.tsx
@@ -46,8 +46,7 @@ export function ServiceGroupEditor({
           onClose();
         }
       }}
-      title={mode === "create" ? "Create service group" : "Edit service group"}
-      description="Define reusable service requirements for assets."
+      title={mode === "create" ? "New service plan" : "Edit service plan"}
       footer={
         <>
           <Button
@@ -66,7 +65,7 @@ export function ServiceGroupEditor({
             disabled={submitting}
           >
             {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-            {mode === "create" ? "Create group" : "Save changes"}
+            {mode === "create" ? "Create plan" : "Save plan"}
           </Button>
         </>
       }
@@ -77,7 +76,7 @@ export function ServiceGroupEditor({
         onSubmit={handleSubmit}
       >
         <div className="space-y-1.5">
-          <label htmlFor="service-group-name" className="text-sm font-medium">
+          <label htmlFor="service-group-name" className="text-sm font-semibold">
             Name
           </label>
           <Input
@@ -91,15 +90,15 @@ export function ServiceGroupEditor({
         <div className="space-y-1.5">
           <label
             htmlFor="service-group-description"
-            className="text-sm font-medium"
+            className="text-sm font-semibold"
           >
-            Description
+            Description <span className="font-normal text-muted-foreground">optional</span>
           </label>
           <Textarea
             id="service-group-description"
             value={description}
             onChange={(event) => setDescription(event.target.value)}
-            placeholder="Optional notes for the service group."
+            placeholder="What gets checked, and by whom"
             className="min-h-24"
           />
         </div>
diff --git a/src/components/services/service-group-fields-panel.tsx b/src/components/services/service-group-fields-panel.tsx
index c710ab7..def89e2 100644
--- a/src/components/services/service-group-fields-panel.tsx
+++ b/src/components/services/service-group-fields-panel.tsx
@@ -21,6 +21,7 @@ import type {
 } from "@/components/services/types";
 import { SERVICE_GROUP_FIELD_TYPE_OPTIONS } from "@/components/services/types";
 import { Badge } from "@/components/ui/badge";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ApiRequestError } from "@/lib/api-client";
@@ -49,7 +50,7 @@ function moveId(ids: string[], fromId: string, toId: string) {
 function mapFieldError(error: unknown, fallback: string) {
   if (error instanceof ApiRequestError) {
     if (error.status === 403) {
-      return "Only admins can manage service group fields.";
+      return "Only admins can manage service plan fields.";
     }
     return error.message || fallback;
   }
@@ -398,13 +399,31 @@ export function ServiceGroupFieldsPanel({
 
   return (
     <>
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <div className="flex items-center justify-between gap-2">
+      <section>
+        <SheetHeading
+          title="Fields to fill in"
+          count={rowsQuery.isPending ? undefined : fields.length}
+          aside={
+            canManage ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setEditorMode("create");
+                  setActiveFieldId(null);
+                  setEditorOpen(true);
+                }}
+              >
+                <Plus />
+                Add field…
+              </Button>
+            ) : null
+          }
+        />
+        <div className="mt-2 mb-1">
           <div>
-            <h3 className="text-sm font-semibold tracking-tight">
-              Required record fields
-            </h3>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-sm text-ink-2">
               <span className="hidden md:inline">
                 Drag to reorder the fields shown when a service record is
                 logged.
@@ -415,21 +434,6 @@ export function ServiceGroupFieldsPanel({
               </span>
             </p>
           </div>
-          {canManage ? (
-            <Button
-              type="button"
-              size="sm"
-              className="cursor-pointer"
-              onClick={() => {
-                setEditorMode("create");
-                setActiveFieldId(null);
-                setEditorOpen(true);
-              }}
-            >
-              <Plus className="h-4 w-4" />
-              Add field
-            </Button>
-          ) : null}
         </div>
 
         {rowsQuery.isPending ? (
@@ -438,7 +442,7 @@ export function ServiceGroupFieldsPanel({
           </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.
+            No fields yet. A logged service then only asks for the date and a note.
           </p>
         ) : (
           <ul
@@ -449,11 +453,11 @@ export function ServiceGroupFieldsPanel({
               <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"
+                className="flex items-start justify-between gap-3 border-b border-border py-3"
               >
                 <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">
+                    <span className="inline-flex shrink-0 items-center rounded-xs border border-line-2 px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
                       {field.sortOrder + 1}
                     </span>
                     <p className="truncate text-sm font-semibold">
@@ -461,7 +465,7 @@ export function ServiceGroupFieldsPanel({
                     </p>
                   </div>
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <Badge className="bg-muted/20 capitalize">
+                    <Badge className="capitalize">
                       {field.fieldType}
                     </Badge>
                     {field.required ? (
@@ -530,18 +534,18 @@ export function ServiceGroupFieldsPanel({
           </ul>
         )}
 
-        <div className="mt-4 hidden overflow-x-auto rounded-lg border border-border/60 md:block">
+        <div className="mt-2 hidden overflow-x-auto md:block">
           <table
             className="min-w-full text-sm"
             data-testid="service-group-fields-table"
           >
-            <thead className="bg-muted/40 text-left">
+            <thead className="text-left text-[13px]">
               <tr>
-                <th className="w-10 px-3 py-2 font-medium">Order</th>
-                <th className="px-3 py-2 font-medium">Label</th>
-                <th className="px-3 py-2 font-medium">Type</th>
-                <th className="px-3 py-2 font-medium">Required</th>
-                <th className="px-3 py-2 font-medium text-right">Actions</th>
+                <th className="w-10 h-10 rule-ink px-3 font-semibold">Order</th>
+                <th className="h-10 rule-ink px-3 font-semibold">Label</th>
+                <th className="h-10 rule-ink px-3 font-semibold">Type</th>
+                <th className="h-10 rule-ink px-3 font-semibold">Required</th>
+                <th className="h-10 rule-ink px-3 font-semibold text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -560,14 +564,14 @@ export function ServiceGroupFieldsPanel({
                     colSpan={5}
                     className="px-3 py-8 text-center text-muted-foreground"
                   >
-                    No fields yet. Add required service fields for this group.
+                    No fields yet. A logged service then only asks for the date and a note.
                   </td>
                 </tr>
               ) : (
                 fields.map((field) => (
                   <tr
                     key={field.id}
-                    className="border-t border-border/50"
+                    className="border-b border-border"
                     draggable={canManage && !reordering}
                     onDragStart={(event) => {
                       setDraggingId(field.id);
@@ -593,20 +597,20 @@ export function ServiceGroupFieldsPanel({
                     }}
                   >
                     <td className="px-3 py-2">
-                      <div className="inline-flex items-center gap-1 rounded-md border border-border/70 bg-muted/20 px-1.5 py-1 text-xs text-muted-foreground">
+                      <div className="inline-flex items-center gap-1 rounded-xs border border-line-2 px-1.5 py-1 text-xs text-muted-foreground">
                         <GripVertical className="h-3.5 w-3.5" />
                         <span className="font-mono">{field.sortOrder + 1}</span>
                       </div>
                     </td>
                     <td className="px-3 py-2 font-medium">{field.label}</td>
                     <td className="px-3 py-2">
-                      <Badge className="bg-muted/20 capitalize">
+                      <Badge className="capitalize">
                         {field.fieldType}
                       </Badge>
                     </td>
                     <td className="px-3 py-2">
                       {field.required ? (
-                        <Badge className="bg-muted/20">Required</Badge>
+                        <Badge>Required</Badge>
                       ) : (
                         <span className="text-muted-foreground">Optional</span>
                       )}
diff --git a/src/components/services/service-groups-list.tsx b/src/components/services/service-groups-list.tsx
index 5cacea8..488e59f 100644
--- a/src/components/services/service-groups-list.tsx
+++ b/src/components/services/service-groups-list.tsx
@@ -2,15 +2,23 @@
 
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { ClipboardList, MoreHorizontal, 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";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
 import { ServiceGroupEditor } from "@/components/services/service-group-editor";
 import type { ServiceGroupSummary } from "@/components/services/types";
-import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { EmptyState } from "@/components/ui/empty-state";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { ApiRequestError } from "@/lib/api-client";
 import {
@@ -23,10 +31,10 @@ import {
 function mapGroupError(error: unknown, fallback: string) {
   if (error instanceof ApiRequestError) {
     if (error.status === 403) {
-      return "Only admins can manage service groups.";
+      return "Only admins can manage service plans.";
     }
     if (error.status === 409) {
-      return "This service group is in use and cannot be deleted.";
+      return "This service plan is in use and cannot be deleted.";
     }
     return error.message || fallback;
   }
@@ -84,7 +92,7 @@ export function ServiceGroupsList() {
           name: values.name,
           description: values.description.trim() ? values.description : null,
         });
-        toast.success("Service group created");
+        toast.success("Service plan created");
       } else if (activeGroup) {
         await updateMutation.mutateAsync({
           groupId: activeGroup.id,
@@ -93,7 +101,7 @@ export function ServiceGroupsList() {
             description: values.description.trim() ? values.description : null,
           },
         });
-        toast.success("Service group updated");
+        toast.success("Service plan updated");
       }
       setEditorOpen(false);
       setActiveGroup(null);
@@ -103,8 +111,8 @@ export function ServiceGroupsList() {
         mapGroupError(
           error,
           editorMode === "create"
-            ? "Unable to create service group"
-            : "Unable to update service group",
+            ? "Unable to create service plan"
+            : "Unable to update service plan",
         ),
       );
     }
@@ -117,225 +125,145 @@ export function ServiceGroupsList() {
 
     try {
       await deleteMutation.mutateAsync(deleteGroupId);
-      toast.success("Service group deleted");
+      toast.success("Service plan deleted");
       setDeleteGroupId(null);
       void queryClient.invalidateQueries({ queryKey: ["service-groups"] });
     } catch (error) {
-      toast.error(mapGroupError(error, "Unable to delete service group"));
+      toast.error(mapGroupError(error, "Unable to delete service plan"));
     }
   }
 
   const submitting = createMutation.isPending || updateMutation.isPending;
 
-  return (
-    <div className="space-y-4">
-      <ServicesNavTabs />
+  const openCreate = () => {
+    setEditorMode("create");
+    setActiveGroup(null);
+    setEditorOpen(true);
+  };
+  const openEdit = (group: (typeof rows)[number]) => {
+    setEditorMode("edit");
+    setActiveGroup(group);
+    setEditorOpen(true);
+  };
 
-      <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <div className="flex items-center justify-between gap-2">
-          <div>
-            <h2 className="text-sm font-semibold tracking-tight">
-              Service groups
-            </h2>
-            <p className="text-xs text-muted-foreground">
-              Configure reusable service requirements and assign one group per
-              asset.
-            </p>
-          </div>
-          {canManage ? (
-            <Button
-              type="button"
-              className="cursor-pointer"
-              onClick={() => {
-                setEditorMode("create");
-                setActiveGroup(null);
-                setEditorOpen(true);
-              }}
-            >
-              <Plus className="h-4 w-4" />
-              Create group
-            </Button>
-          ) : null}
-        </div>
+  return (
+    <div>
+      <section>
+        <SheetHeading
+          title="Service plans"
+          count={groupsQuery.isPending ? undefined : rows.length}
+          aside={
+            canManage ? (
+              <Button type="button" size="sm" onClick={openCreate}>
+                <Plus />
+                New service plan…
+              </Button>
+            ) : null
+          }
+        />
+        <p className="mt-2 mb-3 max-w-[70ch] text-sm text-ink-2">
+          A plan names a kind of service and the fields to fill in when it is
+          logged. Each asset follows at most one plan.
+        </p>
 
         {groupsQuery.isPending ? (
-          <p className="mt-4 text-sm text-muted-foreground md:hidden">
-            Loading service groups...
-          </p>
+          <div className="space-y-3 py-3" aria-busy="true">
+            <span className="sr-only">Loading service plans...</span>
+            <Skeleton className="h-2.5 w-1/2" />
+            <Skeleton className="h-2.5 w-1/3" />
+          </div>
         ) : rows.length === 0 ? (
-          <p className="mt-4 text-sm text-muted-foreground md:hidden">
-            No service groups yet.
-          </p>
+          <EmptyState
+            icon={ClipboardList}
+            title="No service plans yet."
+            description="Create one, for example “Quarterly inspection”, then assign assets to it."
+            action={
+              canManage ? (
+                <Button type="button" onClick={openCreate}>
+                  <Plus />
+                  New service plan…
+                </Button>
+              ) : null
+            }
+          />
         ) : (
-          <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">
+          <>
+            <ul className="md:hidden" data-testid="service-groups-card-list">
+              {rows.map((group) => (
+                <li
+                  key={group.id}
+                  data-testid={`service-group-card-${group.id}`}
+                  className="flex items-start gap-3 border-b border-border py-3"
+                >
+                  <div className="min-w-0 flex-1">
                     <Link
                       href={`/services/groups/${group.id}`}
-                      className="block truncate text-sm font-semibold hover:text-primary"
+                      className="block truncate text-[15px] font-semibold text-foreground"
                     >
                       {group.name}
                     </Link>
                     {group.description ? (
-                      <p className="line-clamp-2 text-xs text-muted-foreground">
-                        {group.description}
-                      </p>
+                      <p className="line-clamp-2 text-sm text-ink-2">{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 className="mt-0.5 text-[13px] 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>
-        )}
+                  {canManage ? (
+                    <GroupActions
+                      name={group.name}
+                      onEdit={() => openEdit(group)}
+                      onDelete={() => setDeleteGroupId(group.id)}
+                    />
+                  ) : null}
+                </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>
-                <th className="px-3 py-2 font-medium">Description</th>
-                <th className="px-3 py-2 font-medium">Fields</th>
-                <th className="px-3 py-2 font-medium">Assets</th>
-                <th className="px-3 py-2 font-medium text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {groupsQuery.isPending ? (
-                <tr>
-                  <td
-                    colSpan={5}
-                    className="px-3 py-8 text-center text-muted-foreground"
-                  >
-                    Loading service groups...
-                  </td>
+            <table className="w-full border-collapse text-sm max-md:hidden" data-testid="service-groups-table">
+              <thead>
+                <tr className="text-left text-[13px]">
+                  <th className="h-10 border-b border-border px-0.5 font-semibold">Name</th>
+                  <th className="h-10 border-b border-border px-3 font-semibold">Description</th>
+                  <th className="h-10 border-b border-border px-3 text-right font-semibold">Fields</th>
+                  <th className="h-10 border-b border-border px-3 text-right font-semibold">Assets</th>
+                  <th className="h-10 w-11 border-b border-border">
+                    <span className="sr-only">Actions</span>
+                  </th>
                 </tr>
-              ) : rows.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={5}
-                    className="px-3 py-8 text-center text-muted-foreground"
-                  >
-                    No service groups yet.
-                  </td>
-                </tr>
-              ) : (
-                rows.map((group) => (
-                  <tr key={group.id} className="border-t border-border/50">
-                    <td className="px-3 py-2 font-medium">
+              </thead>
+              <tbody>
+                {rows.map((group) => (
+                  <tr key={group.id} className="border-b border-border">
+                    <td className="px-0.5 py-3 font-semibold">
                       <Link
                         href={`/services/groups/${group.id}`}
-                        className="underline-offset-2 hover:underline"
+                        className="text-foreground hover:underline hover:underline-offset-[3px]"
                       >
                         {group.name}
                       </Link>
                     </td>
-                    <td className="px-3 py-2 text-muted-foreground">
-                      {group.description ?? "—"}
+                    <td className="px-3 py-3 text-ink-2">
+                      {group.description ?? <span className="text-muted-foreground">—</span>}
                     </td>
-                    <td className="px-3 py-2">{group.fieldCount}</td>
-                    <td className="px-3 py-2">{group.assetCount}</td>
-                    <td className="px-3 py-2 text-right">
-                      <div className="inline-flex items-center gap-1">
-                        <Button
-                          asChild
-                          variant="ghost"
-                          size="sm"
-                          className="cursor-pointer"
-                        >
-                          <Link href={`/services/groups/${group.id}`}>
-                            Open
-                          </Link>
-                        </Button>
-                        {canManage ? (
-                          <>
-                            <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>
-                          </>
-                        ) : null}
-                      </div>
+                    <td className="px-3 py-3 text-right font-mono text-[13px] text-ink-2">{group.fieldCount}</td>
+                    <td className="px-3 py-3 text-right font-mono text-[13px] text-ink-2">{group.assetCount}</td>
+                    <td className="py-2 pr-0.5 text-right">
+                      {canManage ? (
+                        <GroupActions
+                          name={group.name}
+                          onEdit={() => openEdit(group)}
+                          onDelete={() => setDeleteGroupId(group.id)}
+                        />
+                      ) : null}
                     </td>
                   </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+                ))}
+              </tbody>
+            </table>
+          </>
+        )}
       </section>
 
       <ServiceGroupEditor
@@ -353,9 +281,9 @@ export function ServiceGroupsList() {
 
       <ConfirmDialog
         open={deleteGroupId !== null}
-        title="Delete service group"
-        description={`Delete ${activeDeleteGroup?.name ?? "this group"}?`}
-        confirmLabel="Delete group"
+        title="Delete service plan?"
+        description={`${activeDeleteGroup?.name ?? "This plan"} is deleted.`}
+        confirmLabel="Delete plan"
         busy={deleteMutation.isPending}
         onConfirm={() => {
           void handleDelete();
@@ -369,3 +297,33 @@ export function ServiceGroupsList() {
     </div>
   );
 }
+
+function GroupActions({
+  name,
+  onEdit,
+  onDelete,
+}: {
+  name: string;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" variant="ghost" size="icon-sm" aria-label={`Actions for ${name}`}>
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={onEdit}>
+          <Pencil />
+          Edit…
+        </DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" onSelect={onDelete}>
+          <Trash2 />
+          Delete…
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/services/service-history.tsx b/src/components/services/service-history.tsx
index b342564..e855637 100644
--- a/src/components/services/service-history.tsx
+++ b/src/components/services/service-history.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CalendarClock, Pencil, Trash2, Wrench } from "lucide-react";
+import { Pencil, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { CrudModal } from "@/components/crud/modal";
@@ -10,18 +10,15 @@ import { getApiErrorMessage } from "@/components/crud/error-messages";
 import { ServiceRecordAttachments } from "@/components/services/service-record-attachments";
 import { ServiceRecordForm } from "@/components/services/service-record-form";
 import type { ServiceRecord } from "@/components/services/types";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import {
   deleteServiceRecord,
   listAssetServiceRecords,
 } from "@/lib/api/service-records";
-import { getScheduleByAssetId } from "@/lib/api/service-schedules";
-import {
-  formatDateFromIsoDateOnly,
-  formatDateFromTimestamp,
-} from "@/lib/date-format";
+import { formatDateFromIsoDateOnly } from "@/lib/date-format";
 import { useAppDateFormat } from "@/lib/use-app-date-format";
 
 function formatCost(value: number | null) {
@@ -35,15 +32,23 @@ function formatCost(value: number | null) {
   }).format(value);
 }
 
-export function ServiceHistory({ assetId }: { assetId: string }) {
+/*
+  Service history: a sheet on the concrete under the 2px rule, drawn as a
+  timeline. Date, ink marker, then what was done and by whom. Fields, files
+  and record actions open per entry.
+*/
+export function ServiceHistory({
+  assetId,
+  showLogAction = true,
+}: {
+  assetId: string;
+  /* The Next service card owns "Log service…"; this is the off-plan entry. */
+  showLogAction?: boolean;
+}) {
   const dateFormat = useAppDateFormat();
   const queryClient = useQueryClient();
   const { data: currentUser } = useCurrentUser();
 
-  const scheduleQuery = useQuery({
-    queryKey: ["service-schedules", "by-asset", assetId],
-    queryFn: () => getScheduleByAssetId(assetId),
-  });
   const recordsQuery = useQuery({
     queryKey: ["service-records", "by-asset", assetId],
     queryFn: () => listAssetServiceRecords(assetId),
@@ -74,211 +79,149 @@ export function ServiceHistory({ assetId }: { assetId: string }) {
       void queryClient.invalidateQueries({
         queryKey: ["service-records", "by-asset", assetId],
       });
+      void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
     } catch (error) {
       toast.error(getApiErrorMessage(error, "Unable to delete service record"));
     }
   }
 
-  const schedule = scheduleQuery.data ?? null;
-
   return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h3 className="text-base font-semibold tracking-tight">
-            Service history
-          </h3>
-          <p className="text-sm text-muted-foreground">
-            Manual and scheduled service records for this asset.
-          </p>
-        </div>
-
-        <Button
-          type="button"
-          className="cursor-pointer"
-          onClick={() => setCreateOpen(true)}
-        >
-          <Wrench className="h-4 w-4" />
-          Log manual service
-        </Button>
-      </div>
+    <section data-testid="service-history">
+      <SheetHeading
+        title="Service history"
+        count={records.length > 0 ? records.length : undefined}
+        aside={
+          showLogAction ? (
+            <button
+              type="button"
+              className="cursor-pointer underline underline-offset-[3px] hover:text-foreground"
+              onClick={() => setCreateOpen(true)}
+            >
+              Log other service…
+            </button>
+          ) : null
+        }
+      />
 
-      {schedule ? (
-        <div className="mt-4 rounded-lg border border-border/60 bg-muted/10 p-4">
-          <div className="flex items-start gap-3">
-            <CalendarClock className="mt-0.5 h-4 w-4 text-muted-foreground" />
-            <div className="space-y-1">
-              <p className="text-sm font-medium">
-                Next due{" "}
-                {formatDateFromIsoDateOnly(
-                  schedule.nextServiceDate,
-                  dateFormat,
-                )}
-              </p>
-              <p className="text-xs text-muted-foreground">
-                Every {schedule.intervalValue} {schedule.intervalUnit}.
-                Reminders start{" "}
-                {formatDateFromIsoDateOnly(
-                  schedule.reminderStartDate,
-                  dateFormat,
-                )}
-                .
-              </p>
-            </div>
-          </div>
+      {recordsQuery.isPending ? (
+        <div className="space-y-3 py-4">
+          <Skeleton className="h-2.5 w-2/3" />
+          <Skeleton className="h-2.5 w-1/2" />
         </div>
-      ) : null}
-
-      <div className="mt-4 space-y-3">
-        {recordsQuery.isPending ? (
-          <div className="rounded-lg border border-border/60 bg-background p-4 text-sm text-muted-foreground">
-            Loading service history...
-          </div>
-        ) : records.length === 0 ? (
-          <div className="rounded-lg border border-dashed border-border/70 bg-muted/10 p-4 text-sm text-muted-foreground">
-            No service records yet.
-          </div>
-        ) : (
-          records.map((record) => {
+      ) : records.length === 0 ? (
+        <p className="px-0.5 py-4 text-sm text-ink-2">No service records yet.</p>
+      ) : (
+        <ol className="relative pt-3">
+          {records.map((record, index) => {
             const canMutate =
               currentUser?.role === "admin" ||
               currentUser?.id === record.completedBy;
+            const last = index === records.length - 1;
+            const meta = [
+              record.providerName,
+              record.cost !== null ? `Cost ${formatCost(record.cost)}` : null,
+              record.scheduledForDate
+                ? `Due ${formatDateFromIsoDateOnly(record.scheduledForDate, dateFormat)}`
+                : null,
+            ].filter(Boolean);
 
             return (
-              <details
+              <li
                 key={record.id}
-                className="rounded-lg border border-border/60 bg-background p-4"
+                className="relative grid grid-cols-[18px_minmax(0,1fr)] gap-x-3 pb-6 md:grid-cols-[96px_18px_minmax(0,1fr)]"
               >
-                <summary className="cursor-pointer list-none">
-                  <div className="flex flex-wrap items-start justify-between gap-3">
-                    <div className="space-y-1">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <p className="text-sm font-semibold">
-                          {formatDateFromIsoDateOnly(
-                            record.serviceDate,
-                            dateFormat,
-                          )}
-                        </p>
-                        {record.serviceGroupName ? (
-                          <Badge className="bg-muted/20">
-                            {record.serviceGroupName}
-                          </Badge>
-                        ) : null}
-                        {record.scheduledForDate ? (
-                          <Badge className="bg-muted/20">
-                            Scheduled for{" "}
-                            {formatDateFromIsoDateOnly(
-                              record.scheduledForDate,
-                              dateFormat,
-                            )}
-                          </Badge>
-                        ) : null}
-                      </div>
-                      <p className="text-sm text-foreground">
-                        {record.description}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        Logged by {record.completedByName} on{" "}
-                        {formatDateFromTimestamp(
-                          record.completedAt,
-                          dateFormat,
-                        )}
-                      </p>
-                    </div>
+                <span className="pt-px text-right text-sm whitespace-nowrap text-ink-2 max-md:hidden">
+                  {formatDateFromIsoDateOnly(record.serviceDate, dateFormat)}
+                </span>
+                <span aria-hidden="true" className="relative flex justify-center">
+                  <span className="relative z-10 mt-[5px] size-2.5 rounded-[1px] bg-foreground" />
+                  {last ? null : (
+                    <span className="absolute top-[15px] -bottom-[5px] w-px bg-line-2" />
+                  )}
+                </span>
+                <div className="min-w-0">
+                  <span className="mb-0.5 block text-sm text-ink-2 md:hidden">
+                    {formatDateFromIsoDateOnly(record.serviceDate, dateFormat)}
+                  </span>
+                  <p className="text-sm">
+                    <b className="font-semibold text-foreground">
+                      {record.serviceGroupName ?? "Service"}
+                    </b>{" "}
+                    <span className="text-muted-foreground">by {record.completedByName}</span>
+                  </p>
+                  {record.description ? (
+                    <p className="mt-0.5 text-sm whitespace-pre-wrap text-ink-2">
+                      {record.description}
+                    </p>
+                  ) : null}
+                  {meta.length > 0 ? (
+                    <p className="mt-0.5 text-[13px] text-muted-foreground">
+                      {meta.join(" · ")}
+                    </p>
+                  ) : null}
 
-                    <div className="flex items-center gap-2">
-                      {record.providerName ? (
-                        <Badge className="bg-muted/20">
-                          {record.providerName}
-                        </Badge>
-                      ) : null}
-                      {record.cost !== null ? (
-                        <Badge className="bg-muted/20">
-                          Cost {formatCost(record.cost)}
-                        </Badge>
+                  <details className="group mt-1.5">
+                    <summary className="inline-flex cursor-pointer list-none items-center gap-1 text-[13px] font-medium text-ink-2 underline underline-offset-[3px] hover:text-foreground [&::-webkit-details-marker]:hidden">
+                      <span className="group-open:hidden">Fields and files</span>
+                      <span className="hidden group-open:inline">Hide fields and files</span>
+                    </summary>
+                    <div className="mt-3 space-y-3 rounded-md border border-border bg-card p-3.5">
+                      {record.valueEntries.length > 0 ? (
+                        <dl className="grid gap-x-6 gap-y-2.5 sm:grid-cols-2">
+                          {record.valueEntries.map((entry) => (
+                            <div key={`${record.id}-${entry.fieldId}`}>
+                              <dt className="text-[13px] text-ink-2">{entry.label}</dt>
+                              <dd className="text-sm font-medium text-foreground">
+                                {entry.value === null
+                                  ? "—"
+                                  : typeof entry.value === "boolean"
+                                    ? entry.value
+                                      ? "Yes"
+                                      : "No"
+                                    : String(entry.value)}
+                              </dd>
+                            </div>
+                          ))}
+                        </dl>
                       ) : null}
+                      <ServiceRecordAttachments serviceRecordId={record.id} />
                       {canMutate ? (
-                        <>
+                        <div className="flex gap-2 border-t border-border pt-3">
                           <Button
                             type="button"
-                            variant="outline"
+                            variant="secondary"
                             size="sm"
-                            className="cursor-pointer"
-                            onClick={(event) => {
-                              event.preventDefault();
-                              setEditRecord(record);
-                            }}
+                            onClick={() => setEditRecord(record)}
                           >
-                            <Pencil className="h-4 w-4" />
-                            Edit
+                            <Pencil />
+                            Edit…
                           </Button>
                           <Button
                             type="button"
-                            variant="outline"
+                            variant="ghost"
                             size="sm"
-                            className="cursor-pointer"
-                            onClick={(event) => {
-                              event.preventDefault();
-                              setDeleteRecordId(record.id);
-                            }}
+                            className="text-destructive hover:text-destructive"
+                            onClick={() => setDeleteRecordId(record.id)}
                           >
-                            <Trash2 className="h-4 w-4" />
-                            Delete
+                            <Trash2 />
+                            Delete…
                           </Button>
-                        </>
-                      ) : null}
-                    </div>
-                  </div>
-                </summary>
-
-                <div className="mt-4 space-y-4">
-                  {record.valueEntries.length > 0 ? (
-                    <div className="grid gap-2 sm:grid-cols-2">
-                      {record.valueEntries.map((entry) => (
-                        <div
-                          key={`${record.id}-${entry.fieldId}`}
-                          className="rounded-md border border-border/60 bg-muted/10 px-3 py-2"
-                        >
-                          <p className="text-[11px] uppercase tracking-wide text-muted-foreground">
-                            {entry.label}
-                          </p>
-                          <p className="text-sm">
-                            {entry.value === null
-                              ? "—"
-                              : typeof entry.value === "boolean"
-                                ? entry.value
-                                  ? "Yes"
-                                  : "No"
-                                : String(entry.value)}
-                          </p>
                         </div>
-                      ))}
-                    </div>
-                  ) : null}
-
-                  <div>
-                    <h4 className="text-xs font-semibold tracking-tight">
-                      Attachments
-                    </h4>
-                    <p className="text-xs text-muted-foreground">
-                      Service reports and proof of work for this record.
-                    </p>
-                    <div className="mt-2">
-                      <ServiceRecordAttachments serviceRecordId={record.id} />
+                      ) : null}
                     </div>
-                  </div>
+                  </details>
                 </div>
-              </details>
+              </li>
             );
-          })
-        )}
-      </div>
+          })}
+        </ol>
+      )}
 
       <CrudModal
         open={createOpen}
         onClose={() => setCreateOpen(false)}
-        title="Log manual service"
-        description="Create a service history entry for this asset."
+        title="Log other service"
+        description="Adds an entry to this asset's service history. If the asset is on a schedule, the next service moves to one interval after this service date."
       >
         {createOpen ? (
           <ServiceRecordForm
@@ -292,7 +235,7 @@ export function ServiceHistory({ assetId }: { assetId: string }) {
       <CrudModal
         open={editRecord !== null}
         onClose={() => setEditRecord(null)}
-        title={editRecord ? `Edit service record` : "Edit service record"}
+        title="Edit service record"
         description="Update lifecycle details and any required service fields."
       >
         {editRecord ? (
@@ -309,8 +252,8 @@ export function ServiceHistory({ assetId }: { assetId: string }) {
 
       <ConfirmDialog
         open={deleteRecordId !== null}
-        title="Delete service record"
-        description="Delete this service record and all of its attachments?"
+        title="Delete service record?"
+        description="The record and all of its files are deleted."
         confirmLabel="Delete record"
         busy={deleteMutation.isPending}
         onConfirm={handleDeleteRecord}
diff --git a/src/components/services/service-providers-page-client.tsx b/src/components/services/service-providers-page-client.tsx
index 6188b6e..3a1263a 100644
--- a/src/components/services/service-providers-page-client.tsx
+++ b/src/components/services/service-providers-page-client.tsx
@@ -2,14 +2,16 @@
 
 import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { Pencil, Plus, Trash2, Truck } from "lucide-react";
 import { toast } from "sonner";
 import { ConfirmDialog } from "@/components/crud/confirm-dialog";
 import { getApiErrorMessage } from "@/components/crud/error-messages";
 import { CrudModal } from "@/components/crud/modal";
-import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
 import type { ServiceProvider } from "@/components/services/types";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useCurrentUser } from "@/hooks/use-current-user";
@@ -123,104 +125,113 @@ export function ServiceProvidersPageClient() {
 
   const submitting = createMutation.isPending || updateMutation.isPending;
 
-  if (currentUserPending || providersQuery.isPending) {
-    return (
-      <div className="space-y-4">
-        <ServicesNavTabs />
-        <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-          Loading service providers...
-        </div>
-      </div>
-    );
-  }
+  const loading = currentUserPending || providersQuery.isPending;
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between gap-3">
-        <ServicesNavTabs />
-        {canManage ? (
-          <Button type="button" className="cursor-pointer" onClick={openCreate}>
-            <Plus className="h-4 w-4" />
-            Add provider
-          </Button>
-        ) : null}
-      </div>
+    <div>
+      <SheetHeading
+        title="Providers"
+        count={loading ? undefined : providers.length}
+        aside={
+          canManage ? (
+            <Button type="button" size="sm" onClick={openCreate}>
+              <Plus />
+              New provider…
+            </Button>
+          ) : null
+        }
+      />
 
-      {providers.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-border/70 bg-muted/10 p-5 text-sm text-muted-foreground">
-          No service providers yet.
+      {loading ? (
+        <div className="space-y-3 py-4" aria-busy="true">
+          <span className="sr-only">Loading service providers...</span>
+          <Skeleton className="h-2.5 w-1/2" />
+          <Skeleton className="h-2.5 w-1/3" />
         </div>
+      ) : providers.length === 0 ? (
+        <EmptyState
+          icon={Truck}
+          title="No service providers yet."
+          description="Add the firms and people who service your assets, then pick them when you log a service."
+          action={
+            canManage ? (
+              <Button type="button" onClick={openCreate}>
+                <Plus />
+                New provider…
+              </Button>
+            ) : null
+          }
+        />
       ) : (
-        <div className="grid gap-3 lg:grid-cols-2">
+        <ul>
           {providers.map((provider) => (
-            <article
+            <li
               key={provider.id}
-              className="rounded-xl border border-border/70 bg-background p-4 shadow-sm"
+              className="flex items-start gap-3 border-b border-border px-0.5 py-3.5"
             >
-              <div className="flex items-start justify-between gap-3">
-                <div className="space-y-1">
-                  <h3 className="text-sm font-semibold tracking-tight">
-                    {provider.name}
-                  </h3>
-                  {provider.contactEmail ? (
-                    <p className="text-sm text-muted-foreground">
-                      {provider.contactEmail}
-                    </p>
-                  ) : null}
-                  {provider.contactPhone ? (
-                    <p className="text-sm text-muted-foreground">
-                      {provider.contactPhone}
-                    </p>
-                  ) : null}
-                </div>
-
-                {canManage ? (
-                  <div className="flex items-center gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="cursor-pointer"
-                      onClick={() => openEdit(provider)}
-                    >
-                      <Pencil className="h-4 w-4" />
-                      Edit
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      className="cursor-pointer"
-                      onClick={() => setDeleteProviderId(provider.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                      Delete
-                    </Button>
-                  </div>
+              <div className="min-w-0 flex-1">
+                <h3 className="text-[15px] font-semibold text-foreground">{provider.name}</h3>
+                {provider.contactEmail || provider.contactPhone ? (
+                  <p className="mt-0.5 text-sm text-ink-2">
+                    {provider.contactEmail ? (
+                      <a
+                        href={`mailto:${provider.contactEmail}`}
+                        className="underline underline-offset-[3px] hover:text-foreground"
+                      >
+                        {provider.contactEmail}
+                      </a>
+                    ) : null}
+                    {provider.contactEmail && provider.contactPhone ? " · " : null}
+                    {provider.contactPhone ? (
+                      <a href={`tel:${provider.contactPhone}`} className="whitespace-nowrap hover:text-foreground">
+                        {provider.contactPhone}
+                      </a>
+                    ) : null}
+                  </p>
+                ) : null}
+                {provider.notes ? (
+                  <p className="mt-1 max-w-[70ch] text-sm text-muted-foreground">{provider.notes}</p>
                 ) : null}
               </div>
 
-              {provider.notes ? (
-                <p className="mt-3 text-sm text-muted-foreground">
-                  {provider.notes}
-                </p>
+              {canManage ? (
+                <div className="flex shrink-0 items-center gap-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => openEdit(provider)}
+                  >
+                    <Pencil />
+                    Edit…
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={`Delete ${provider.name}`}
+                    className="text-destructive hover:text-destructive"
+                    onClick={() => setDeleteProviderId(provider.id)}
+                  >
+                    <Trash2 />
+                  </Button>
+                </div>
               ) : null}
-            </article>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
 
       <CrudModal
         open={modalOpen}
         onClose={() => setModalOpen(false)}
-        title={editingProvider ? "Edit provider" : "Add provider"}
-        description="Manage service providers used in lifecycle records."
+        title={editingProvider ? "Edit provider" : "New provider"}
       >
-        <form className="space-y-3" onSubmit={handleSubmit}>
+        <form className="space-y-4" onSubmit={handleSubmit}>
           <div className="space-y-1.5">
             <label
               htmlFor="service-provider-name"
-              className="text-sm font-medium"
+              className="text-sm font-semibold"
             >
               Name
             </label>
@@ -237,7 +248,7 @@ export function ServiceProvidersPageClient() {
           <div className="space-y-1.5">
             <label
               htmlFor="service-provider-email"
-              className="text-sm font-medium"
+              className="text-sm font-semibold"
             >
               Contact email
             </label>
@@ -257,7 +268,7 @@ export function ServiceProvidersPageClient() {
           <div className="space-y-1.5">
             <label
               htmlFor="service-provider-phone"
-              className="text-sm font-medium"
+              className="text-sm font-semibold"
             >
               Contact phone
             </label>
@@ -276,7 +287,7 @@ export function ServiceProvidersPageClient() {
           <div className="space-y-1.5">
             <label
               htmlFor="service-provider-notes"
-              className="text-sm font-medium"
+              className="text-sm font-semibold"
             >
               Notes
             </label>
@@ -290,12 +301,11 @@ export function ServiceProvidersPageClient() {
               className="min-h-24"
             />
           </div>
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              className="cursor-pointer"
-              disabled={submitting}
-            >
+          <div className="flex justify-end gap-2 pt-1">
+            <Button type="button" variant="outline" onClick={() => setModalOpen(false)} disabled={submitting}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={submitting}>
               {editingProvider ? "Save provider" : "Create provider"}
             </Button>
           </div>
@@ -304,8 +314,8 @@ export function ServiceProvidersPageClient() {
 
       <ConfirmDialog
         open={deleteProviderId !== null}
-        title="Delete provider"
-        description="Delete this service provider?"
+        title="Delete provider?"
+        description="The provider is deleted. A provider named on a service record cannot be deleted."
         confirmLabel="Delete provider"
         busy={deleteMutation.isPending}
         onConfirm={handleDelete}
diff --git a/src/components/services/service-record-attachments.tsx b/src/components/services/service-record-attachments.tsx
index 83c5103..a3da16f 100644
--- a/src/components/services/service-record-attachments.tsx
+++ b/src/components/services/service-record-attachments.tsx
@@ -149,11 +149,11 @@ export function ServiceRecordAttachments({
       </Button>
 
       {attachmentsQuery.isPending ? (
-        <div className="rounded-lg border border-border/60 bg-background p-4 text-sm text-muted-foreground">
+        <div className="py-3 text-sm text-muted-foreground">
           Loading attachments...
         </div>
       ) : attachments.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-border/70 bg-muted/10 p-4 text-sm text-muted-foreground">
+        <div className="rounded-md border border-dashed border-line-2 bg-secondary p-4 text-sm text-muted-foreground">
           No record attachments yet.
         </div>
       ) : (
@@ -161,7 +161,7 @@ export function ServiceRecordAttachments({
           {attachments.map((attachment) => (
             <div
               key={attachment.id}
-              className="flex items-center justify-between gap-2 rounded-lg border border-border/70 bg-background px-3 py-2"
+              className="flex items-center justify-between gap-2 rounded-md border border-border bg-background px-3 py-2"
             >
               <div className="min-w-0">
                 <p className="truncate text-sm font-medium">
diff --git a/src/components/services/service-record-form.tsx b/src/components/services/service-record-form.tsx
index 5b598cd..9837044 100644
--- a/src/components/services/service-record-form.tsx
+++ b/src/components/services/service-record-form.tsx
@@ -11,7 +11,7 @@ import type {
   ServiceRecord,
   ServiceRecordFormDefinition,
 } from "@/components/services/types";
-import { Badge } from "@/components/ui/badge";
+import { TagChip } from "@/components/ui/tag-chip";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -221,6 +221,7 @@ export function ServiceRecordForm({
         void queryClient.invalidateQueries({
           queryKey: ["service-records", "by-asset", assetId],
         });
+        void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
         return;
       }
 
@@ -242,6 +243,7 @@ export function ServiceRecordForm({
         void queryClient.invalidateQueries({
           queryKey: ["service-schedules"],
         });
+        void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
         return;
       }
 
@@ -262,6 +264,7 @@ export function ServiceRecordForm({
       void queryClient.invalidateQueries({
         queryKey: ["service-schedules"],
       });
+      void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
     } catch (error) {
       toast.error(getApiErrorMessage(error, "Unable to save service record"));
     }
@@ -269,7 +272,7 @@ export function ServiceRecordForm({
 
   if (formDefinitionQuery.isPending || providerOptionsQuery.isPending) {
     return (
-      <div className="rounded-lg border border-border/60 bg-background p-4 text-sm text-muted-foreground">
+      <div className="py-3 text-sm text-muted-foreground">
         Loading service record form...
       </div>
     );
@@ -277,7 +280,7 @@ export function ServiceRecordForm({
 
   if (!formDefinition) {
     return (
-      <div className="rounded-lg border border-border/60 bg-background p-4 text-sm text-muted-foreground">
+      <div className="py-3 text-sm text-muted-foreground">
         Unable to load service record form for this asset.
       </div>
     );
@@ -285,15 +288,13 @@ export function ServiceRecordForm({
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-border/60 bg-muted/10 px-3 py-2 text-xs text-muted-foreground">
+      <div className="text-sm text-ink-2">
         <div className="flex flex-wrap items-center gap-2">
-          <Badge className="border border-border/70 bg-background text-xs">
-            {formDefinition.assetTag}
-          </Badge>
-          <span>{formDefinition.assetName}</span>
+          <TagChip weight="table">{formDefinition.assetTag}</TagChip>
+          <span className="font-semibold text-foreground">{formDefinition.assetName}</span>
           {formDefinition.serviceGroupName ? (
             <>
-              <span>•</span>
+              <span aria-hidden="true">·</span>
               <span>{formDefinition.serviceGroupName}</span>
             </>
           ) : null}
@@ -393,7 +394,7 @@ export function ServiceRecordForm({
         </div>
 
         {formDefinition.fields.length > 0 ? (
-          <div className="space-y-3 rounded-lg border border-border/60 bg-muted/10 p-4">
+          <div className="space-y-3 rounded-md border border-border bg-secondary p-4">
             <div className="flex items-center gap-2 text-sm font-medium">
               <Wrench className="h-4 w-4" />
               Configurable service fields
@@ -576,7 +577,7 @@ export function ServiceRecordForm({
             })}
           </div>
         ) : (
-          <div className="rounded-lg border border-dashed border-border/70 bg-muted/10 p-4 text-sm text-muted-foreground">
+          <div className="rounded-md border border-dashed border-line-2 bg-secondary p-4 text-sm text-muted-foreground">
             No configurable service fields are required for this asset.
           </div>
         )}
@@ -599,7 +600,7 @@ export function ServiceRecordForm({
       </form>
 
       {currentRecordId ? (
-        <section className="space-y-2 rounded-lg border border-border/60 bg-muted/10 p-4">
+        <section className="space-y-2 rounded-md border border-border bg-secondary p-4">
           <div className="flex items-center gap-2 text-sm font-medium">
             <Paperclip className="h-4 w-4" />
             Service record attachments
diff --git a/src/components/services/services-calendar-month.tsx b/src/components/services/services-calendar-month.tsx
index 264a0e4..9054988 100644
--- a/src/components/services/services-calendar-month.tsx
+++ b/src/components/services/services-calendar-month.tsx
@@ -2,7 +2,10 @@
 
 import { useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 import { LogServiceDialog } from "@/components/services/log-service-dialog";
 import type { ScheduledServiceItem } from "@/components/services/types";
 import { listCalendarMonth } from "@/lib/api/service-schedules";
@@ -46,7 +49,8 @@ function buildCalendarDays({ year, month }: MonthState) {
     (_, index) => index + 1,
   );
 
-  return [...leadingSlots, ...monthDays];
+  const trailing = (7 - ((leadingSlots.length + monthDays.length) % 7)) % 7;
+  return [...leadingSlots, ...monthDays, ...Array.from({ length: trailing }, () => null)];
 }
 
 function toIsoDate({
@@ -62,7 +66,7 @@ function toIsoDate({
 }
 
 function monthLabel({ year, month }: MonthState) {
-  return new Intl.DateTimeFormat("en-US", {
+  return new Intl.DateTimeFormat("en-GB", {
     month: "long",
     year: "numeric",
     timeZone: "UTC",
@@ -95,116 +99,127 @@ export function ServicesCalendarMonth() {
   const today = useTodayIsoDate();
 
   return (
-    <section className="space-y-4">
-      <div className="flex items-center justify-between gap-2">
+    <section>
+      <div className="mb-3 flex items-center justify-between gap-2">
         <h2
           data-testid="calendar-month-heading"
-          className="text-base font-semibold tracking-tight"
+          className="wide text-xl font-bold text-foreground"
         >
           {monthLabel(state)}
         </h2>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <Button
             type="button"
             variant="outline"
-            className="cursor-pointer"
+            size="icon"
+            aria-label="Previous month"
             onClick={() => setState((previous) => shiftMonth(previous, -1))}
           >
-            Previous
+            <ChevronLeft />
           </Button>
           <Button
             type="button"
             variant="outline"
-            className="cursor-pointer"
+            size="icon"
+            aria-label="Next month"
             onClick={() => setState((previous) => shiftMonth(previous, 1))}
           >
-            Next
+            <ChevronRight />
           </Button>
         </div>
       </div>
 
-      <div className="grid grid-cols-7 gap-2 text-xs font-medium text-muted-foreground">
-        {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((dayName) => (
-          <div key={dayName} className="px-1 py-1">
-            {dayName}
+      <div className="overflow-hidden rounded-md border border-border bg-card">
+        <div className="grid grid-cols-7 rule-ink text-[13px] font-semibold text-foreground">
+          {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((dayName) => (
+            <div key={dayName} className="px-2 py-2 md:px-2.5">
+              <span className="md:hidden">{dayName.slice(0, 1)}</span>
+              <span className="max-md:hidden">{dayName}</span>
+            </div>
+          ))}
+        </div>
+
+        {rowsQuery.isPending ? (
+          <div className="space-y-3 p-5" aria-busy="true">
+            <span className="sr-only">Loading calendar...</span>
+            <Skeleton className="h-2.5 w-1/2" />
+            <Skeleton className="h-2.5 w-1/3" />
           </div>
-        ))}
-      </div>
+        ) : (
+          <div className="grid grid-cols-7">
+            {days.map((day, index) => {
+              const edge = cn(
+                "border-b border-border",
+                index % 7 !== 6 && "border-r",
+              );
+              if (!day) {
+                return <div key={`empty-${index}`} className={cn(edge, "min-h-16 bg-secondary/50 md:min-h-28")} />;
+              }
+
+              const dateKey = toIsoDate({
+                year: state.year,
+                month: state.month,
+                day,
+              });
+              const dayRows = rowsByDate.get(dateKey) ?? [];
+              const isToday = dateKey === today;
+              const overdue = dateKey < today;
 
-      {rowsQuery.isPending ? (
-        <div className="rounded-xl border border-border/70 bg-background p-5 text-sm text-muted-foreground">
-          Loading calendar...
-        </div>
-      ) : (
-        <div className="grid grid-cols-7 gap-2">
-          {days.map((day, index) => {
-            if (!day) {
               return (
                 <div
-                  key={`empty-${index}`}
-                  className="min-h-24 rounded-lg border border-transparent"
-                />
-              );
-            }
-
-            const dateKey = toIsoDate({
-              year: state.year,
-              month: state.month,
-              day,
-            });
-            const dayRows = rowsByDate.get(dateKey) ?? [];
-            const isToday = dateKey === today;
-
-            return (
-              <div
-                key={dateKey}
-                data-testid="calendar-day-cell"
-                className={`min-h-28 rounded-lg border p-2 ${
-                  isToday
-                    ? "border-primary/50 bg-orange-50/50 dark:bg-stone-800/50"
-                    : "border-border/70 bg-background"
-                }`}
-              >
-                <p
-                  className={`text-xs font-medium ${
-                    isToday ? "text-primary" : "text-muted-foreground"
-                  }`}
+                  key={dateKey}
+                  data-testid="calendar-day-cell"
+                  aria-current={isToday ? "date" : undefined}
+                  className={cn(
+                    edge,
+                    "min-h-16 min-w-0 p-1 md:min-h-28 md:p-2",
+                    isToday && "shadow-[inset_0_3px_0_var(--amber-ink)]",
+                  )}
                 >
-                  {day}
-                </p>
-                <div className="mt-2 space-y-1.5">
-                  {dayRows.slice(0, 3).map((row) => (
-                    <button
-                      key={row.scheduleId}
-                      type="button"
-                      className="block w-full rounded bg-primary/10 px-1.5 py-1 text-left text-xs text-foreground transition hover:bg-primary/20"
-                      onClick={() =>
-                        setActiveTarget({
-                          scheduleId: row.scheduleId,
-                          assetId: row.assetId,
-                          assetName: row.assetName,
-                        })
-                      }
-                    >
-                      <span className="font-medium">{row.assetTag}</span>
-                      {row.lastServiceDate ? (
-                        <span className="mt-0.5 block text-[10px] text-muted-foreground">
-                          Last {row.lastServiceDate}
-                        </span>
-                      ) : null}
-                    </button>
-                  ))}
-                  {dayRows.length > 3 ? (
-                    <p className="text-[11px] text-muted-foreground">
-                      +{dayRows.length - 3} more
-                    </p>
-                  ) : null}
+                  <p
+                    className={cn(
+                      "font-mono text-[13px] font-medium",
+                      isToday ? "font-bold text-foreground" : "text-muted-foreground",
+                    )}
+                  >
+                    {day}
+                  </p>
+                  <div className="mt-1.5 space-y-1">
+                    {dayRows.slice(0, 3).map((row) => (
+                      <button
+                        key={row.scheduleId}
+                        type="button"
+                        aria-label={`Log service for ${row.assetTag}, ${row.assetName}`}
+                        title={row.assetName}
+                        className={cn(
+                          "block w-full cursor-pointer truncate rounded-xs border px-1 py-0.5 text-left font-mono text-[11px] font-semibold tracking-[0.02em] md:px-1.5 md:text-xs",
+                          overdue
+                            ? "border-destructive bg-destructive text-white"
+                            : "border-foreground bg-card text-foreground hover:bg-secondary",
+                        )}
+                        onClick={() =>
+                          setActiveTarget({
+                            scheduleId: row.scheduleId,
+                            assetId: row.assetId,
+                            assetName: row.assetName,
+                          })
+                        }
+                      >
+                        {row.assetTag}
+                      </button>
+                    ))}
+                    {dayRows.length > 3 ? (
+                      <p className="text-[11px] text-muted-foreground">
+                        +{dayRows.length - 3} more
+                      </p>
+                    ) : null}
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+              );
+            })}
+          </div>
+        )}
+      </div>
 
       <LogServiceDialog
         open={activeTarget !== null}
diff --git a/src/components/services/services-calendar-page-client.tsx b/src/components/services/services-calendar-page-client.tsx
index d6fc4fc..da34bc4 100644
--- a/src/components/services/services-calendar-page-client.tsx
+++ b/src/components/services/services-calendar-page-client.tsx
@@ -2,7 +2,8 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { ServicesCalendarMonth } from "@/components/services/services-calendar-month";
-import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
+import { SchedulingDisabled } from "@/components/services/scheduling-disabled";
+import { Skeleton } from "@/components/ui/skeleton";
 import { getAppSettings } from "@/lib/api/app-settings";
 
 export function ServicesCalendarPageClient() {
@@ -13,20 +14,18 @@ export function ServicesCalendarPageClient() {
 
   if (appSettingsQuery.isPending) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading service calendar...
+      <div className="space-y-4 py-2" aria-busy="true">
+        <span className="sr-only">Loading service calendar...</span>
+        <Skeleton className="h-2.5 w-40" />
+        <Skeleton className="h-2.5 w-2/3" />
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <ServicesNavTabs />
+    <div>
       {!appSettingsQuery.data?.serviceSchedulingEnabled ? (
-        <div className="rounded-xl border border-dashed border-border/70 bg-muted/10 p-5 text-sm text-muted-foreground">
-          Service scheduling is disabled by an admin. Enable it in Settings to
-          use calendar planning.
-        </div>
+        <SchedulingDisabled />
       ) : (
         <ServicesCalendarMonth />
       )}
diff --git a/src/components/services/services-header.tsx b/src/components/services/services-header.tsx
new file mode 100644
index 0000000..cd4079c
--- /dev/null
+++ b/src/components/services/services-header.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useMemo } from "react";
+import { usePathname } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { PageHeader } from "@/components/layout/page-header";
+import { MobileTitleCount } from "@/components/layout/mobile-top-bar";
+import { bucketForRow } from "@/components/services/schedule-buckets";
+import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
+import { useHydrated } from "@/hooks/use-hydrated";
+import { getAppSettings } from "@/lib/api/app-settings";
+import { listScheduledAssets } from "@/lib/api/service-schedules";
+import { useTodayIsoDate } from "@/lib/use-today-iso-date";
+
+/*
+  Schedule views: the count next to the title is the number of scheduled
+  services, so it only shows where that list is on screen.
+*/
+const SCHEDULE_PATHS = new Set(["/services", "/services/calendar"]);
+
+/*
+  One header for every Services section: counts from the schedule, then tabs.
+  "Due this week" uses the same buckets as the Schedule list.
+*/
+export function ServicesHeader() {
+  const hydrated = useHydrated();
+  const pathname = usePathname();
+  const showCount = SCHEDULE_PATHS.has(pathname);
+  const today = useTodayIsoDate();
+  const settingsQuery = useQuery({
+    queryKey: ["app-settings"],
+    queryFn: getAppSettings,
+    staleTime: 5 * 60_000,
+  });
+  const enabled = settingsQuery.data?.serviceSchedulingEnabled ?? false;
+  const scheduledQuery = useQuery({
+    queryKey: ["service-schedules", "scheduled"],
+    queryFn: listScheduledAssets,
+    enabled,
+  });
+
+  const items = hydrated && enabled ? scheduledQuery.data : undefined;
+  const summary = useMemo(() => {
+    if (!items) return null;
+    let overdue = 0;
+    let week = 0;
+    for (const item of items) {
+      const bucket = bucketForRow(item, today);
+      if (bucket === "overdue") overdue += 1;
+      else if (bucket === "thisWeek") week += 1;
+    }
+    return { total: items.length, overdue, week };
+  }, [items, today]);
+
+  return (
+    <>
+      <PageHeader
+        title="Services"
+        count={showCount ? summary?.total : undefined}
+        className="max-md:hidden"
+        description={
+          summary
+            ? [
+                summary.overdue > 0 ? `${summary.overdue} overdue` : null,
+                `${summary.week} due this week`,
+                `${summary.total} scheduled`,
+              ]
+                .filter(Boolean)
+                .join(" · ")
+            : " "
+        }
+      />
+      {summary && showCount ? (
+        <MobileTitleCount count={summary.total} />
+      ) : null}
+      <ServicesNavTabs />
+    </>
+  );
+}
diff --git a/src/components/services/services-list-page-client.tsx b/src/components/services/services-list-page-client.tsx
index e17cc09..b904877 100644
--- a/src/components/services/services-list-page-client.tsx
+++ b/src/components/services/services-list-page-client.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { ServicesNavTabs } from "@/components/services/services-nav-tabs";
+import { SchedulingDisabled } from "@/components/services/scheduling-disabled";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ServicesScheduledList } from "@/components/services/services-scheduled-list";
 import { getAppSettings } from "@/lib/api/app-settings";
 
@@ -13,20 +14,18 @@ export function ServicesListPageClient() {
 
   if (appSettingsQuery.isPending) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-6 text-sm text-muted-foreground shadow-sm">
-        Loading services planner...
+      <div className="space-y-4 py-2" aria-busy="true">
+        <span className="sr-only">Loading services planner...</span>
+        <Skeleton className="h-2.5 w-40" />
+        <Skeleton className="h-2.5 w-2/3" />
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <ServicesNavTabs />
+    <div>
       {!appSettingsQuery.data?.serviceSchedulingEnabled ? (
-        <div className="rounded-xl border border-dashed border-border/70 bg-muted/10 p-5 text-sm text-muted-foreground">
-          Service scheduling is disabled by an admin. Enable it in Settings to
-          use the planner views.
-        </div>
+        <SchedulingDisabled />
       ) : (
         <ServicesScheduledList />
       )}
diff --git a/src/components/services/services-nav-tabs.tsx b/src/components/services/services-nav-tabs.tsx
index 1fc997e..402ce48 100644
--- a/src/components/services/services-nav-tabs.tsx
+++ b/src/components/services/services-nav-tabs.tsx
@@ -5,17 +5,18 @@ import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 
 const tabs = [
-  { href: "/services", label: "List" },
+  { href: "/services", label: "Schedule" },
   { href: "/services/calendar", label: "Calendar" },
-  { href: "/services/groups", label: "Groups" },
+  { href: "/services/groups", label: "Service plans" },
   { href: "/services/providers", label: "Providers" },
 ];
 
+/* The Services sections as text tabs; the current one carries the mark. */
 export function ServicesNavTabs() {
   const pathname = usePathname() ?? "";
 
   return (
-    <div className="inline-flex rounded-lg border border-border/70 bg-muted/20 p-1">
+    <nav aria-label="Services sections" className="mb-6 flex gap-0.5 overflow-x-auto border-b border-border">
       {tabs.map((tab) => {
         const active =
           tab.href === "/services"
@@ -25,17 +26,16 @@ export function ServicesNavTabs() {
           <Link
             key={tab.href}
             href={tab.href}
+            aria-current={active ? "page" : undefined}
             className={cn(
-              "rounded-md px-3 py-1.5 text-sm transition-colors",
-              active
-                ? "bg-background text-foreground shadow-sm"
-                : "text-muted-foreground hover:text-foreground",
+              "-mb-px border-b-[3px] border-transparent px-3 pt-2 pb-2.5 text-sm font-medium whitespace-nowrap text-ink-2 hover:text-foreground",
+              active && "border-amber-ink font-semibold text-foreground",
             )}
           >
             {tab.label}
           </Link>
         );
       })}
-    </div>
+    </nav>
   );
 }
diff --git a/src/components/services/services-scheduled-list.tsx b/src/components/services/services-scheduled-list.tsx
index 0290142..ab94e43 100644
--- a/src/components/services/services-scheduled-list.tsx
+++ b/src/components/services/services-scheduled-list.tsx
@@ -2,20 +2,26 @@
 
 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 { CalendarClock } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
+import { DueTag } from "@/components/ui/due-tag";
+import { EmptyState } from "@/components/ui/empty-state";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
+import { StatusText } from "@/components/ui/status-text";
+import { TagChip } from "@/components/ui/tag-chip";
 import { LogServiceDialog } from "@/components/services/log-service-dialog";
+import {
+  BUCKET_LABELS,
+  BUCKET_ORDER,
+  groupByBucket,
+} from "@/components/services/schedule-buckets";
 import type { ScheduledServiceItem } from "@/components/services/types";
 import { listScheduledAssets } from "@/lib/api/service-schedules";
 import {
   formatDateFromIsoDateOnly,
+  getDaysUntil,
   type AppDateFormat,
 } from "@/lib/date-format";
 import { useAppDateFormat } from "@/lib/use-app-date-format";
@@ -27,117 +33,20 @@ 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,
-  today,
-}: {
-  nextServiceDate: string;
-  reminderStartDate: string;
-  today: string;
-}) {
-  if (nextServiceDate < today) {
-    return "overdue" as const;
-  }
-
-  if (reminderStartDate <= today) {
-    return "due_soon" as const;
-  }
-
-  return "scheduled" as const;
-}
-
-const STATUS_LABELS: Record<ReturnType<typeof getScheduleStatus>, string> = {
-  overdue: "Overdue",
-  due_soon: "Due soon",
-  scheduled: "Scheduled",
-};
-
-const STATUS_CLASSNAMES: Record<
-  ReturnType<typeof getScheduleStatus>,
-  string
-> = {
-  overdue:
-    "border-rose-300/80 bg-rose-500/10 text-rose-800 dark:border-rose-700/60 dark:text-rose-300",
-  due_soon:
-    "border-amber-300/80 bg-amber-500/10 text-amber-800 dark:border-amber-700/60 dark:text-amber-300",
-  scheduled:
-    "border-emerald-300/80 bg-emerald-500/10 text-emerald-800 dark:border-emerald-700/60 dark:text-emerald-300",
-};
-
-const URGENCY_STRIPE: Record<ReturnType<typeof getScheduleStatus>, string> = {
-  overdue: "border-l-4 border-l-rose-600 dark:border-l-rose-500",
-  due_soon: "border-l-4 border-l-amber-500 dark:border-l-amber-400",
-  scheduled: "border-l-4 border-l-emerald-500 dark:border-l-emerald-400",
-};
-
+/*
+  The service schedule as sheets on the concrete, one per due bucket, most
+  urgent first. A row is the tag, the asset, its last service, the date and
+  the due tag (red filled when overdue), then "Log service…".
+*/
 export function ServicesScheduledList() {
   const dateFormat = useAppDateFormat();
+  const today = useTodayIsoDate();
   const rowsQuery = useQuery({
     queryKey: ["service-schedules", "scheduled"],
     queryFn: listScheduledAssets,
   });
   const [activeTarget, setActiveTarget] = useState<ActiveTarget | null>(null);
 
-  const today = useTodayIsoDate();
   const items = useMemo(
     () => (rowsQuery.data ?? []) as ScheduledServiceItem[],
     [rowsQuery.data],
@@ -146,35 +55,57 @@ export function ServicesScheduledList() {
 
   if (rowsQuery.isPending) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-5 text-sm text-muted-foreground">
-        Loading schedules...
+      <div className="space-y-4 py-2" aria-busy="true">
+        <span className="sr-only">Loading schedules...</span>
+        <Skeleton className="h-2.5 w-40" />
+        <Skeleton className="h-2.5 w-2/3" />
+        <Skeleton className="h-2.5 w-1/2" />
       </div>
     );
   }
 
   if (items.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-border/70 bg-muted/10 p-5 text-sm text-muted-foreground">
-        No scheduled assets yet.
-      </div>
+      <EmptyState
+        icon={CalendarClock}
+        title="No scheduled assets yet."
+        description="Give an asset a service interval and it shows up here before it is due."
+        action={
+          <Button asChild variant="outline">
+            <Link href="/assets">Open Assets</Link>
+          </Button>
+        }
+      />
     );
   }
 
   return (
     <>
-      <div className="space-y-3" data-testid="services-scheduled-list">
+      <div className="space-y-8" data-testid="services-scheduled-list">
         {BUCKET_ORDER.map((bucket) => {
           const rows = grouped[bucket];
           if (rows.length === 0) return null;
           return (
-            <ServicesGroupSection
-              key={bucket}
-              bucket={bucket}
-              rows={rows}
-              today={today}
-              dateFormat={dateFormat}
-              onLog={setActiveTarget}
-            />
+            <section key={bucket} data-testid={`services-group-${bucket}`}>
+              <SheetHeading title={BUCKET_LABELS[bucket]} count={rows.length} />
+              <ul>
+                {rows.map((row) => (
+                  <ScheduledServiceRow
+                    key={row.scheduleId}
+                    row={row}
+                    today={today}
+                    dateFormat={dateFormat}
+                    onLog={() =>
+                      setActiveTarget({
+                        scheduleId: row.scheduleId,
+                        assetId: row.assetId,
+                        assetName: row.assetName,
+                      })
+                    }
+                  />
+                ))}
+              </ul>
+            </section>
           );
         })}
       </div>
@@ -190,80 +121,7 @@ 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({
+function ScheduledServiceRow({
   row,
   today,
   dateFormat,
@@ -274,62 +132,59 @@ function ScheduledServiceCard({
   dateFormat: AppDateFormat;
   onLog: () => void;
 }) {
-  const status = getScheduleStatus({
-    nextServiceDate: row.nextServiceDate,
-    reminderStartDate: row.reminderStartDate,
-    today,
-  });
-  const relative = relativeDueDescription(row.nextServiceDate, today);
+  const days = getDaysUntil(row.nextServiceDate, today);
+  const last = row.lastServiceDate
+    ? `Last ${formatDateFromIsoDateOnly(row.lastServiceDate, dateFormat)}${
+        row.lastServiceProviderName ? ` by ${row.lastServiceProviderName}` : ""
+      }`
+    : "Never serviced";
 
   return (
-    <article
-      className={`rounded-lg border border-border/70 bg-card shadow-sm transition hover:border-primary/30 ${URGENCY_STRIPE[status]}`}
+    <li
+      className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 border-b border-border px-0.5 py-3 md:grid-cols-[auto_minmax(0,1fr)_110px_150px_auto]"
       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>
+      <TagChip weight="table" className="max-md:self-start">
+        {row.assetTag}
+      </TagChip>
+      <div className="min-w-0">
+        <Link
+          href={`/assets/${row.assetId}`}
+          className="block truncate text-sm font-semibold text-foreground hover:underline hover:underline-offset-[3px]"
+        >
+          {row.assetName}
+        </Link>
+        <span className="mt-0.5 flex items-center gap-2 md:hidden">
+          <DueTag days={days} />
+          <span className="text-[13px] text-ink-2">
             {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>
+          </span>
+        </span>
+        <span className="block truncate text-[13px] text-muted-foreground">
+          {last}
+          {row.assetStatus !== "active" ? (
+            <>
+              {" · "}
+              <StatusText status={row.assetStatus} className="text-[13px]" />
+            </>
           ) : 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>
+        </span>
       </div>
-    </article>
+      <span className="text-sm whitespace-nowrap text-ink-2 max-md:hidden">
+        {formatDateFromIsoDateOnly(row.nextServiceDate, dateFormat)}
+      </span>
+      <DueTag days={days} className="justify-self-start max-md:hidden" />
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={onLog}
+        data-testid={`log-service-${row.scheduleId}`}
+        aria-label={`Log service for ${row.assetName}`}
+      >
+        <span className="md:hidden">Log…</span>
+        <span className="max-md:hidden">Log service…</span>
+      </Button>
+    </li>
   );
 }
diff --git a/src/components/settings/features-section.tsx b/src/components/settings/features-section.tsx
index 06b8ee6..0400e87 100644
--- a/src/components/settings/features-section.tsx
+++ b/src/components/settings/features-section.tsx
@@ -2,6 +2,7 @@
 
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 import { Switch } from "@/components/ui/switch";
 import { ApiRequestError } from "@/lib/api-client";
 import {
@@ -33,6 +34,9 @@ export function FeaturesSection() {
         enabled ? "Service scheduling enabled" : "Service scheduling disabled",
       );
       void queryClient.invalidateQueries({ queryKey: ["app-settings"] });
+      // The nav overdue badge reads the dashboard overview.
+      void queryClient.invalidateQueries({ queryKey: ["dashboard"] });
+      void queryClient.invalidateQueries({ queryKey: ["service-schedules"] });
     },
     onError: (error) => {
       toast.error(mapError(error, "Unable to update feature setting"));
@@ -42,28 +46,31 @@ export function FeaturesSection() {
   const enabled = settingsQuery.data?.serviceSchedulingEnabled ?? true;
 
   return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div className="space-y-1">
-        <h2 className="text-lg font-semibold tracking-tight">Features</h2>
-        <p className="text-sm text-muted-foreground">
-          Enable or disable optional features.
-        </p>
-      </div>
+    <section aria-labelledby="settings-features-title">
+      <SheetHeading
+        title={<span id="settings-features-title">Features</span>}
+      />
 
       {settingsQuery.isPending ? (
-        <div className="mt-4 text-sm text-muted-foreground">Loading...</div>
+        <p className="py-4 text-sm text-muted-foreground">Loading...</p>
       ) : (
-        <div className="mt-4">
-          <div className="flex items-start justify-between gap-4 rounded-lg border border-border/60 px-4 py-3">
-            <div className="space-y-0.5">
-              <p className="text-sm font-medium">
-                Preventive service scheduling
-              </p>
-              <p className="text-xs text-muted-foreground">
-                When disabled, schedule inputs and services planner views are
-                hidden, but existing schedules are preserved.
-              </p>
-            </div>
+        <div className="flex items-start justify-between gap-6 border-b border-border px-0.5 py-4">
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-foreground">
+              Preventive service scheduling
+            </p>
+            <p className="mt-0.5 max-w-[60ch] text-sm text-ink-2">
+              When disabled, schedule inputs and services planner views are
+              hidden, but existing schedules are preserved.
+            </p>
+          </div>
+          <div className="flex shrink-0 items-center gap-2.5 pt-0.5">
+            <span
+              className="text-[13px] font-medium text-ink-2"
+              aria-hidden="true"
+            >
+              {enabled ? "On" : "Off"}
+            </span>
             <Switch
               checked={enabled}
               onCheckedChange={(checked) => mutation.mutate(checked)}
diff --git a/src/components/settings/password-change-section.tsx b/src/components/settings/password-change-section.tsx
index 026b91b..33965a3 100644
--- a/src/components/settings/password-change-section.tsx
+++ b/src/components/settings/password-change-section.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Check, Loader2, TriangleAlert } from "lucide-react";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 import { ApiRequestError } from "@/lib/api-client";
 import { changePassword } from "@/lib/api/users";
 
@@ -60,25 +61,17 @@ export function PasswordChangeSection() {
   }
 
   return (
-    <section
-      aria-labelledby="settings-password-title"
-      className="rounded-xl border border-border/70 bg-background p-5 shadow-sm"
-    >
-      <div className="space-y-1">
-        <h2
-          id="settings-password-title"
-          className="text-lg font-semibold tracking-tight"
-        >
-          Change password
-        </h2>
-        <p className="text-sm text-muted-foreground">
-          Update your password and keep this account secure.
-        </p>
-      </div>
-
-      <form onSubmit={onSubmit} className="mt-4 grid gap-4 sm:grid-cols-2">
+    <section aria-labelledby="settings-password-title">
+      <SheetHeading
+        title={<span id="settings-password-title">Change password</span>}
+      />
+
+      <form
+        onSubmit={onSubmit}
+        className="grid max-w-[560px] gap-4 px-0.5 pt-4 sm:grid-cols-2"
+      >
         <div className="space-y-1.5 sm:col-span-2">
-          <label htmlFor="current-password" className="text-sm font-medium">
+          <label htmlFor="current-password" className="text-sm font-semibold">
             Current password
           </label>
           <Input
@@ -92,7 +85,7 @@ export function PasswordChangeSection() {
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="new-password" className="text-sm font-medium">
+          <label htmlFor="new-password" className="text-sm font-semibold">
             New password
           </label>
           <Input
@@ -107,7 +100,10 @@ export function PasswordChangeSection() {
         </div>
 
         <div className="space-y-1.5">
-          <label htmlFor="confirm-new-password" className="text-sm font-medium">
+          <label
+            htmlFor="confirm-new-password"
+            className="text-sm font-semibold"
+          >
             Confirm new password
           </label>
           <Input
@@ -123,27 +119,29 @@ export function PasswordChangeSection() {
         {error ? (
           <p
             role="alert"
-            className="sm:col-span-2 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+            className="flex items-start gap-1.5 text-sm font-medium text-destructive sm:col-span-2"
           >
-            {error}
+            <TriangleAlert
+              className="mt-0.5 size-4 shrink-0"
+              aria-hidden="true"
+            />
+            <span>{error}</span>
           </p>
         ) : null}
 
         {success ? (
-          <p className="sm:col-span-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
+          <p
+            role="status"
+            className="flex items-center gap-1.5 text-sm font-medium text-foreground sm:col-span-2"
+          >
+            <Check className="size-4 shrink-0" aria-hidden="true" />
             {success}
           </p>
         ) : null}
 
-        <div className="sm:col-span-2 flex justify-end">
-          <Button
-            type="submit"
-            className="cursor-pointer"
-            disabled={mutation.isPending}
-          >
-            {mutation.isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : null}
+        <div className="sm:col-span-2">
+          <Button type="submit" variant="outline" disabled={mutation.isPending}>
+            {mutation.isPending ? <Loader2 className="animate-spin" /> : null}
             {mutation.isPending ? "Updating..." : "Update password"}
           </Button>
         </div>
diff --git a/src/components/settings/regional-settings-section.tsx b/src/components/settings/regional-settings-section.tsx
index 3323387..4ba74c8 100644
--- a/src/components/settings/regional-settings-section.tsx
+++ b/src/components/settings/regional-settings-section.tsx
@@ -5,6 +5,7 @@ import { Loader2 } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { SheetHeading } from "@/components/ui/sheet-heading";
 import {
   Select,
   SelectContent,
@@ -62,22 +63,24 @@ export function RegionalSettingsSection() {
     !settingsQuery.isPending && effectiveFormat !== persistedFormat;
 
   return (
-    <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-      <div className="space-y-1">
-        <h2 className="text-lg font-semibold tracking-tight">Date format</h2>
-        <p className="text-sm text-muted-foreground">
-          Choose how dates are displayed across the app.
-        </p>
-      </div>
+    <section aria-labelledby="settings-date-format-title">
+      <SheetHeading
+        title={<span id="settings-date-format-title">Date format</span>}
+      />
 
       {settingsQuery.isPending ? (
-        <div className="mt-4 text-sm text-muted-foreground">
+        <p className="py-4 text-sm text-muted-foreground">
           Loading preferences...
-        </div>
+        </p>
       ) : (
-        <div className="mt-4 space-y-4">
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium">Format</label>
+        <div className="flex flex-wrap items-end gap-x-6 gap-y-4 px-0.5 pt-4">
+          <div className="w-full space-y-1.5 sm:w-64">
+            <label
+              id="settings-date-format-label"
+              className="text-sm font-semibold"
+            >
+              Format
+            </label>
             <Select
               value={effectiveFormat}
               onValueChange={(value) =>
@@ -85,7 +88,10 @@ export function RegionalSettingsSection() {
               }
               disabled={mutation.isPending}
             >
-              <SelectTrigger className="w-full sm:max-w-xs">
+              <SelectTrigger
+                className="w-full"
+                aria-labelledby="settings-date-format-label"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -98,10 +104,10 @@ export function RegionalSettingsSection() {
             </Select>
           </div>
 
-          <div className="rounded-md border border-border/70 bg-muted/20 px-3 py-2 text-sm text-muted-foreground">
+          <div className="min-w-0 flex-1 pb-0.5 text-sm text-ink-2">
             <div>
               Preview:{" "}
-              <span className="font-medium text-foreground">
+              <span className="font-mono font-medium text-foreground">
                 {formatDateFromTimestamp(
                   Date.UTC(2026, 1, 27),
                   effectiveFormat,
@@ -109,7 +115,7 @@ export function RegionalSettingsSection() {
               </span>
             </div>
             {settingsQuery.data?.updatedAt ? (
-              <div className="mt-1 text-xs">
+              <div className="mt-0.5 text-[13px] text-muted-foreground">
                 Last updated:{" "}
                 {formatDateFromTimestamp(
                   settingsQuery.data.updatedAt,
@@ -117,19 +123,19 @@ export function RegionalSettingsSection() {
                 )}
               </div>
             ) : (
-              <div className="mt-1 text-xs">Using default format.</div>
+              <div className="mt-0.5 text-[13px] text-muted-foreground">
+                Using default format.
+              </div>
             )}
           </div>
 
           <Button
             type="button"
-            className="cursor-pointer"
+            variant="outline"
             onClick={() => mutation.mutate(effectiveFormat)}
             disabled={mutation.isPending || !hasChanges}
           >
-            {mutation.isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : null}
+            {mutation.isPending ? <Loader2 className="animate-spin" /> : null}
             Save format
           </Button>
         </div>
diff --git a/src/components/settings/settings-page-client.tsx b/src/components/settings/settings-page-client.tsx
index a84b367..def6ed4 100644
--- a/src/components/settings/settings-page-client.tsx
+++ b/src/components/settings/settings-page-client.tsx
@@ -4,33 +4,44 @@ import { FeaturesSection } from "@/components/settings/features-section";
 import { PasswordChangeSection } from "@/components/settings/password-change-section";
 import { RegionalSettingsSection } from "@/components/settings/regional-settings-section";
 import { UserManagementSection } from "@/components/settings/user-management-section";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useCurrentUser } from "@/hooks/use-current-user";
 
+/*
+  Settings: each section is a sheet on the concrete (heading + 2px rule), not
+  a card. Admin sections first, then your own password.
+*/
 export function SettingsPageClient() {
   const { data: currentUser, isPending } = useCurrentUser();
 
   if (isPending) {
     return (
-      <div className="space-y-6">
-        <div className="h-36 animate-pulse rounded-xl border border-border/70 bg-muted/40" />
-        <div className="h-48 animate-pulse rounded-xl border border-border/70 bg-muted/40" />
+      <div className="max-w-[880px] space-y-10">
+        {[0, 1].map((index) => (
+          <div key={index}>
+            <Skeleton className="mb-4 h-4 w-32 rounded-md" />
+            <Skeleton className="h-2.5 w-2/3" />
+            <Skeleton className="mt-3 h-2.5 w-1/2" />
+          </div>
+        ))}
       </div>
     );
   }
 
   if (!currentUser) {
     return (
-      <div className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-        <h2 className="text-lg font-semibold tracking-tight">Access denied</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
+      <section className="max-w-[880px]">
+        <SheetHeading title="Access denied" />
+        <p className="py-4 text-sm text-ink-2">
           Sign in to manage account settings.
         </p>
-      </div>
+      </section>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="max-w-[880px] space-y-10">
       {currentUser.role === "admin" ? (
         <>
           <RegionalSettingsSection />
@@ -38,11 +49,9 @@ export function SettingsPageClient() {
           <UserManagementSection currentUserId={currentUser.id} />
         </>
       ) : (
-        <section className="rounded-xl border border-border/70 bg-background p-5 shadow-sm">
-          <h2 className="text-lg font-semibold tracking-tight">
-            Administration
-          </h2>
-          <p className="mt-1 text-sm text-muted-foreground">
+        <section>
+          <SheetHeading title="Administration" />
+          <p className="py-4 text-sm text-ink-2">
             Only admins can manage date format, features, and users.
           </p>
         </section>
diff --git a/src/components/settings/user-management-section.tsx b/src/components/settings/user-management-section.tsx
index a46fecb..f94a78f 100644
--- a/src/components/settings/user-management-section.tsx
+++ b/src/components/settings/user-management-section.tsx
@@ -7,6 +7,8 @@ import { toast } from "sonner";
 import { CrudModal } from "@/components/crud/modal";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { SheetHeading } from "@/components/ui/sheet-heading";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Select,
   SelectContent,
@@ -18,6 +20,7 @@ import { ApiRequestError } from "@/lib/api-client";
 import { createUser, listUsers, updateUserRole } from "@/lib/api/users";
 import { formatDateFromTimestamp, type AppDateFormat } from "@/lib/date-format";
 import { useAppDateFormat } from "@/lib/use-app-date-format";
+import { cn } from "@/lib/utils";
 
 type CreateUserFormState = {
   name: string;
@@ -175,54 +178,42 @@ export function UserManagementSection({
     }
   }
 
+  const th =
+    "h-10 border-b border-border px-3 text-left text-[13px] font-semibold whitespace-nowrap text-foreground";
+
   return (
-    <section
-      aria-labelledby="settings-user-management-title"
-      className="rounded-xl border border-border/70 bg-background p-5 shadow-sm"
-    >
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="space-y-1">
-          <h2
-            id="settings-user-management-title"
-            className="text-lg font-semibold tracking-tight"
+    <section aria-labelledby="settings-user-management-title">
+      <SheetHeading
+        title={<span id="settings-user-management-title">Users</span>}
+        count={usersQuery.isSuccess ? rows.length : undefined}
+        aside={
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={openDialog}
           >
-            User management
-          </h2>
-          <p className="text-sm text-muted-foreground">
-            Add team members and manage access roles.
-          </p>
-        </div>
-        <Button
-          type="button"
-          variant="outline"
-          onClick={openDialog}
-          className="cursor-pointer"
-        >
-          <Plus className="h-4 w-4" />
-          Add User
-        </Button>
-      </div>
+            <Plus />
+            Add user…
+          </Button>
+        }
+      />
 
       {usersQuery.isPending ? (
-        <p className="mt-4 text-sm text-muted-foreground md:hidden">
+        <p className="py-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"
+          className="py-4 text-sm font-medium 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>
+        <p className="py-4 text-sm text-ink-2 md:hidden">No users found.</p>
       ) : (
-        <ul
-          className="mt-4 flex flex-col gap-2 md:hidden"
-          data-testid="users-card-list"
-        >
+        <ul className="md:hidden" data-testid="users-card-list">
           {rows.map((user) => {
             const pendingRole = roleEdits[user.id] ?? user.role;
             const roleChanged = pendingRole !== user.role;
@@ -231,27 +222,23 @@ export function UserManagementSection({
               <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"
+                className="space-y-2.5 border-b border-border px-0.5 py-3"
               >
-                <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}
+                <div className="min-w-0">
+                  <div className="flex items-baseline gap-2">
+                    <span className="truncate text-sm font-semibold text-foreground">
+                      {user.name}
+                    </span>
+                    {user.id === currentUserId ? (
+                      <span className="shrink-0 text-[13px] text-muted-foreground">
+                        You
                       </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>
+                    ) : null}
                   </div>
+                  <p className="truncate text-sm text-ink-2">{user.email}</p>
+                  <p className="text-[13px] text-muted-foreground">
+                    Created {formatCreatedDate(user.createdAt, dateFormat)}
+                  </p>
                 </div>
                 <div className="flex items-center gap-2">
                   <Select
@@ -265,7 +252,7 @@ export function UserManagementSection({
                     disabled={isSaving}
                   >
                     <SelectTrigger
-                      className="h-9 flex-1"
+                      className="h-10 flex-1"
                       aria-label={`Role for ${user.name}`}
                     >
                       <SelectValue />
@@ -278,14 +265,11 @@ export function UserManagementSection({
                   <Button
                     type="button"
                     variant="outline"
-                    size="sm"
-                    className="cursor-pointer"
+                    className="h-10"
                     disabled={!roleChanged || isSaving}
                     onClick={() => void handleSaveRole(user.id, user.role)}
                   >
-                    {isSaving ? (
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : null}
+                    {isSaving ? <Loader2 className="animate-spin" /> : null}
                     Save
                   </Button>
                 </div>
@@ -295,33 +279,52 @@ export function UserManagementSection({
         </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">
+      <div className="hidden md:block">
+        <table
+          className="w-full border-collapse text-sm"
+          data-testid="users-table"
+        >
+          <thead>
             <tr>
-              <th className="px-3 py-2 font-medium">Name</th>
-              <th className="px-3 py-2 font-medium">Email</th>
-              <th className="px-3 py-2 font-medium">Role</th>
-              <th className="px-3 py-2 font-medium">Created</th>
-              <th className="px-3 py-2 font-medium text-right">Actions</th>
+              <th className={cn(th, "pl-0.5")}>Name</th>
+              <th className={th}>Email</th>
+              <th className={th}>Role</th>
+              <th className={cn(th, "hidden lg:table-cell")}>Created</th>
+              <th className={cn(th, "pr-0.5 text-right")}>
+                <span className="sr-only">Actions</span>
+              </th>
             </tr>
           </thead>
           <tbody>
-            {usersQuery.isPending ? null : usersQuery.isError ? (
+            {usersQuery.isPending ? (
+              <>
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <tr
+                    key={`loading-${i}`}
+                    className="border-b border-border"
+                    aria-hidden={i > 0 ? true : undefined}
+                  >
+                    <td colSpan={5} className="py-3.5 pl-0.5">
+                      {i === 0 ? (
+                        <span className="sr-only">Loading users...</span>
+                      ) : null}
+                      <Skeleton className="h-2.5 w-1/2" />
+                    </td>
+                  </tr>
+                ))}
+              </>
+            ) : usersQuery.isError ? (
               <tr>
                 <td
                   colSpan={5}
-                  className="px-3 py-6 text-center text-destructive"
+                  className="px-0.5 py-6 font-medium text-destructive"
                 >
                   Could not load users. Please try again.
                 </td>
               </tr>
             ) : rows.length === 0 ? (
               <tr>
-                <td
-                  colSpan={5}
-                  className="px-3 py-6 text-center text-muted-foreground"
-                >
+                <td colSpan={5} className="px-0.5 py-6 text-ink-2">
                   No users found.
                 </td>
               </tr>
@@ -331,16 +334,18 @@ export function UserManagementSection({
                 const roleChanged = pendingRole !== user.role;
                 const isSaving = savingRoleUserId === user.id;
                 return (
-                  <tr key={user.id} className="border-t border-border/50">
-                    <td className="px-3 py-2">
-                      <div className="font-medium">{user.name}</div>
+                  <tr key={user.id} className="border-b border-border">
+                    <td className="py-2.5 pr-3 pl-0.5">
+                      <span className="font-medium text-foreground">
+                        {user.name}
+                      </span>
                       {user.id === currentUserId ? (
-                        <div className="text-xs text-muted-foreground">You</div>
+                        <span className="ml-2 text-[13px] text-muted-foreground">
+                          You
+                        </span>
                       ) : null}
                     </td>
-                    <td className="px-3 py-2 text-muted-foreground">
-                      {user.email}
-                    </td>
+                    <td className="px-3 py-2.5 text-ink-2">{user.email}</td>
                     <td className="px-3 py-2">
                       <Select
                         value={pendingRole}
@@ -353,7 +358,8 @@ export function UserManagementSection({
                         disabled={isSaving}
                       >
                         <SelectTrigger
-                          className="h-8 w-28"
+                          size="sm"
+                          className="w-28"
                           aria-label={`Role for ${user.name}`}
                         >
                           <SelectValue />
@@ -364,21 +370,18 @@ export function UserManagementSection({
                         </SelectContent>
                       </Select>
                     </td>
-                    <td className="px-3 py-2 text-muted-foreground">
+                    <td className="hidden px-3 py-2.5 whitespace-nowrap text-ink-2 lg:table-cell">
                       {formatCreatedDate(user.createdAt, dateFormat)}
                     </td>
-                    <td className="px-3 py-2 text-right">
+                    <td className="py-2 pr-0.5 pl-3 text-right">
                       <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}
+                        {isSaving ? <Loader2 className="animate-spin" /> : null}
                         Save
                       </Button>
                     </td>
@@ -400,7 +403,6 @@ export function UserManagementSection({
             <Button
               type="button"
               variant="outline"
-              className="cursor-pointer"
               onClick={closeDialog}
               disabled={createMutation.isPending}
             >
@@ -409,11 +411,10 @@ export function UserManagementSection({
             <Button
               form="create-user-form"
               type="submit"
-              className="cursor-pointer"
               disabled={createMutation.isPending}
             >
               {createMutation.isPending ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Loader2 className="animate-spin" />
               ) : null}
               {createMutation.isPending ? "Creating..." : "Create user"}
             </Button>
@@ -426,7 +427,7 @@ export function UserManagementSection({
           className="space-y-4"
         >
           <div className="space-y-1.5">
-            <label htmlFor="new-user-name" className="text-sm font-medium">
+            <label htmlFor="new-user-name" className="text-sm font-semibold">
               Full name
             </label>
             <Input
@@ -444,7 +445,7 @@ export function UserManagementSection({
           </div>
 
           <div className="space-y-1.5">
-            <label htmlFor="new-user-email" className="text-sm font-medium">
+            <label htmlFor="new-user-email" className="text-sm font-semibold">
               Email
             </label>
             <Input
@@ -463,7 +464,10 @@ export function UserManagementSection({
           </div>
 
           <div className="space-y-1.5">
-            <label htmlFor="new-user-password" className="text-sm font-medium">
+            <label
+              htmlFor="new-user-password"
+              className="text-sm font-semibold"
+            >
               Temporary password
             </label>
             <Input
@@ -482,7 +486,9 @@ export function UserManagementSection({
           </div>
 
           <div className="space-y-1.5">
-            <label className="text-sm font-medium">Role</label>
+            <label id="new-user-role-label" className="text-sm font-semibold">
+              Role
+            </label>
             <Select
               value={createForm.role}
               onValueChange={(value) =>
@@ -492,7 +498,10 @@ export function UserManagementSection({
                 }))
               }
             >
-              <SelectTrigger className="w-full">
+              <SelectTrigger
+                className="w-full"
+                aria-labelledby="new-user-role-label"
+              >
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
diff --git a/src/components/tags/tag-picker.tsx b/src/components/tags/tag-picker.tsx
index 7a12f91..47c10fe 100644
--- a/src/components/tags/tag-picker.tsx
+++ b/src/components/tags/tag-picker.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export type TagPickerOption = {
   id: string;
@@ -21,67 +21,70 @@ function removeTagId(tagIds: string[], tagId: string) {
   return tagIds.filter((candidate) => candidate !== tagId);
 }
 
+/*
+  Keywords (stored as tags) as toggle chips: the tinted keyword chip when
+  off, ink with a tick when on. Ink = what you have ticked.
+*/
 export function TagPicker({
   value,
   options,
   disabled = false,
+  labelledBy,
   onChange,
 }: {
   value: string[];
   options: TagPickerOption[];
   disabled?: boolean;
+  labelledBy?: string;
   onChange: (tagIds: string[]) => void;
 }) {
   const selectedById = new Set(value);
 
-  return (
-    <div className="space-y-2">
-      <div className="max-h-36 space-y-1 overflow-auto rounded-md border border-border/60 bg-background p-2">
-        {options.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No tags defined.</p>
-        ) : (
-          options.map((tag) => {
-            const checked = selectedById.has(tag.id);
-
-            return (
-              <label key={tag.id} className="flex items-center gap-2 text-sm">
-                <Checkbox
-                  checked={checked}
-                  disabled={disabled}
-                  onCheckedChange={(nextChecked) =>
-                    onChange(
-                      nextChecked === true
-                        ? addTagId(value, tag.id)
-                        : removeTagId(value, tag.id),
-                    )
-                  }
-                />
-                <span>{tag.name}</span>
-              </label>
-            );
-          })
-        )}
-      </div>
+  if (options.length === 0) {
+    return (
+      <p className="py-1.5 text-sm text-ink-2">
+        No keywords yet. Add them under Taxonomy.
+      </p>
+    );
+  }
 
-      {value.length > 0 ? (
-        <div className="flex flex-wrap gap-1">
-          {value.map((tagId) => {
-            const tag = options.find((option) => option.id === tagId);
-            if (!tag) {
-              return null;
+  return (
+    <div
+      role="group"
+      aria-labelledby={labelledBy}
+      className="flex flex-wrap gap-1.5"
+    >
+      {options.map((tag) => {
+        const checked = selectedById.has(tag.id);
+        return (
+          <button
+            key={tag.id}
+            type="button"
+            aria-pressed={checked}
+            disabled={disabled}
+            onClick={() =>
+              onChange(
+                checked ? removeTagId(value, tag.id) : addTagId(value, tag.id),
+              )
             }
-
-            return (
-              <Badge
-                key={tag.id}
-                className="border border-border/60 bg-muted/20 text-xs"
-              >
-                {tag.name}
-              </Badge>
-            );
-          })}
-        </div>
-      ) : null}
+            className={cn(
+              "inline-flex h-8 cursor-pointer items-center gap-1 rounded-md px-2.5 text-[13px] font-medium whitespace-nowrap transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+              checked
+                ? "bg-foreground text-background"
+                : "bg-chip text-foreground hover:bg-line-2",
+            )}
+          >
+            {checked ? (
+              <Check className="size-3.5" strokeWidth={3} aria-hidden="true" />
+            ) : (
+              <span className="text-muted-foreground" aria-hidden="true">
+                #
+              </span>
+            )}
+            {tag.name}
+          </button>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 37fead1..79f1830 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -2,12 +2,13 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/* A quiet tinted chip, the keyword family: for counts and short facts. */
 function Badge({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="badge"
       className={cn(
-        "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium",
+        "inline-flex h-6 items-center gap-1 rounded-md bg-chip px-2 text-[13px] font-medium whitespace-nowrap text-foreground",
         className,
       )}
       {...props}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index d2176b4..74d37f9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,33 +4,43 @@ import { Slot } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/*
+  One primary per screen (amber). Secondaries come in two weights:
+  - `outline`: a 1.5px ink border, for actions that sit next to the thing
+    they act on (inside cards and dialogs).
+  - `secondary`: a quiet control border at 500 weight, for page-header and
+    hero actions so they recede.
+*/
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-[7px] whitespace-nowrap rounded-md border-[1.5px] text-[13px] font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 active:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[15px] aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "border-primary bg-primary text-primary-foreground hover:border-primary-hover hover:bg-primary-hover",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border-destructive bg-destructive text-white hover:opacity-90",
+        outline: "border-foreground bg-card text-foreground hover:bg-secondary",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-input bg-card font-medium text-foreground hover:bg-secondary",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          "border-transparent bg-transparent text-foreground hover:bg-secondary",
+        link: "border-0 bg-transparent font-medium text-ink-2 underline underline-offset-[3px] hover:text-foreground",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        default: "h-9 px-3.5",
+        xs: "h-7 gap-1 px-2 text-[13px] [&_svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 px-2.5",
+        lg: "h-11 px-4 text-sm",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3.5",
         "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "icon-lg": "size-11",
       },
     },
+    // A link is bare text whatever the size: compound classes come after the
+    // size classes, so these win over h-9/px-3.5.
+    compoundVariants: [{ variant: "link", class: "h-auto px-0" }],
     defaultVariants: {
       variant: "default",
       size: "default",
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 15ee77d..fc2e98d 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -6,6 +6,7 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/* Ink = what you have ticked. */
 function Checkbox({
   className,
   ...props
@@ -14,7 +15,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
+        "peer size-[18px] shrink-0 cursor-pointer rounded-xs border-[1.5px] border-input bg-card transition-colors disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-foreground data-[state=checked]:bg-foreground data-[state=checked]:text-background",
         className,
       )}
       {...props}
@@ -23,7 +24,7 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none"
       >
-        <CheckIcon className="size-3.5" />
+        <CheckIcon className="size-3.5" strokeWidth={3} />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b43a3dc..13d749f 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -31,6 +31,7 @@ function DialogClose({
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
+/* Every modal sits on the same charcoal scrim. */
 function DialogOverlay({
   className,
   ...props
@@ -39,7 +40,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-[#1f2220]/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className,
       )}
       {...props}
@@ -61,7 +62,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-md border border-border bg-card p-5 shadow-[0_24px_48px_rgba(0,0,0,.18)] duration-200 outline-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className,
         )}
         {...props}
@@ -70,7 +71,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-3 right-3 grid size-9 cursor-pointer place-items-center rounded-md text-ink-2 hover:bg-secondary hover:text-foreground disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -85,7 +86,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn("flex flex-col gap-1.5 text-left", className)}
       {...props}
     />
   );
@@ -102,10 +103,7 @@ function DialogFooter({
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
+      className={cn("flex flex-row justify-end gap-2", className)}
       {...props}
     >
       {children}
@@ -118,6 +116,7 @@ function DialogFooter({
   );
 }
 
+/* Dialog titles carry the 2px ink rule, like page titles. */
 function DialogTitle({
   className,
   ...props
@@ -125,7 +124,10 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn(
+        "wide rule-ink pr-9 pb-2.5 text-lg leading-tight font-bold text-foreground",
+        className,
+      )}
       {...props}
     />
   );
@@ -138,7 +140,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-sm text-ink-2", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/due-tag.tsx b/src/components/ui/due-tag.tsx
new file mode 100644
index 0000000..438ebf6
--- /dev/null
+++ b/src/components/ui/due-tag.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+  Due: a filled red tag in the chip language = overdue; bold ink text = due
+  within 48 hours; later dates are plain text. Nothing in a list shares a
+  button's silhouette.
+*/
+export function describeDue(days: number): {
+  tone: "overdue" | "soon" | "later";
+  long: string;
+  short: string;
+} {
+  if (days < 0) {
+    const n = Math.abs(days);
+    return {
+      tone: "overdue",
+      long: `Overdue ${n} ${n === 1 ? "day" : "days"}`,
+      short: `Overdue ${n}d`,
+    };
+  }
+  if (days === 0) return { tone: "soon", long: "Today", short: "Today" };
+  if (days === 1) return { tone: "soon", long: "Tomorrow", short: "Tomorrow" };
+  return {
+    tone: "later",
+    long: `In ${days} days`,
+    short: `In ${days}d`,
+  };
+}
+
+export function DueTag({
+  days,
+  className,
+  ...props
+}: React.ComponentProps<"span"> & { days: number }) {
+  const due = describeDue(days);
+  return (
+    <span
+      data-slot="due-tag"
+      data-tone={due.tone}
+      className={cn(
+        "inline-flex h-[23px] shrink-0 items-center text-sm whitespace-nowrap",
+        due.tone === "overdue" &&
+          "rounded-xs bg-destructive px-2 text-[13px] font-semibold text-white",
+        due.tone === "soon" && "font-bold text-foreground",
+        due.tone === "later" && "font-medium text-ink-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="md:hidden">{due.short}</span>
+      <span className="hidden md:inline">{due.long}</span>
+    </span>
+  );
+}
diff --git a/src/components/ui/empty-state.tsx b/src/components/ui/empty-state.tsx
index 8c18f6d..505f8bf 100644
--- a/src/components/ui/empty-state.tsx
+++ b/src/components/ui/empty-state.tsx
@@ -1,5 +1,10 @@
 import { cn } from "@/lib/utils";
 
+/*
+  Empty states sit on the concrete: a glyph aligned to the first line, a bold
+  sentence that says what is true, a support line, and the next step under
+  the copy.
+*/
 export function EmptyState({
   icon: Icon,
   title,
@@ -15,23 +20,24 @@ export function EmptyState({
 }) {
   return (
     <div
+      data-slot="empty-state"
       className={cn(
-        "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border/70 bg-muted/10 px-6 py-10 text-center",
+        "flex min-h-28 items-start gap-4 px-0.5 py-6 text-left",
         className,
       )}
     >
       {Icon ? (
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted/40">
-          <Icon className="h-5 w-5 text-muted-foreground" />
+        <div className="grid w-8 shrink-0 place-items-center pt-0.5 text-muted-foreground">
+          <Icon className="size-6" />
         </div>
       ) : null}
-      <div className="space-y-1">
-        <p className="text-sm font-medium">{title}</p>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-semibold text-foreground">{title}</p>
         {description ? (
-          <p className="text-sm text-muted-foreground">{description}</p>
+          <p className="mt-0.5 text-sm text-ink-2">{description}</p>
         ) : null}
+        {action ? <div className="mt-3">{action}</div> : null}
       </div>
-      {action ?? null}
     </div>
   );
 }
diff --git a/src/components/ui/eyebrow.tsx b/src/components/ui/eyebrow.tsx
new file mode 100644
index 0000000..c4af19f
--- /dev/null
+++ b/src/components/ui/eyebrow.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/* 13px tracked-caps mono label: NEXT SERVICE, LABEL, EMPTY LOCATIONS. */
+export function Eyebrow({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div data-slot="eyebrow" className={cn("eyebrow", className)} {...props} />;
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index f16c2c0..3348e65 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "h-9 w-full min-w-0 rounded-md border-[1.5px] border-input bg-card px-3 py-1 text-sm text-foreground transition-colors file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-foreground",
+        "aria-invalid:border-2 aria-invalid:border-destructive",
         className,
       )}
       {...props}
diff --git a/src/components/ui/panel.tsx b/src/components/ui/panel.tsx
new file mode 100644
index 0000000..06cca4f
--- /dev/null
+++ b/src/components/ui/panel.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+  Cards are reserved for objects: the stat strip, Next service, the label
+  preview, the tabbed details, the location tree, the location detail card and
+  the Assets table. 1px lines inside cards; the 2px rule belongs to sheets.
+*/
+export function Panel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel"
+      className={cn(
+        "rounded-md border border-border bg-card text-card-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function PanelBody({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-body"
+      className={cn("px-[18px] py-3.5", className)}
+      {...props}
+    />
+  );
+}
+
+/* A footer band: a 1px line, then the card's actions or caption. */
+export function PanelFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="panel-footer"
+      className={cn(
+        "flex items-center gap-2 border-t border-border px-[18px] py-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index b4c7cc1..7df1b06 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -37,14 +37,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border-[1.5px] border-input bg-card px-3 py-2 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-ink-2",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDownIcon className="size-3.5" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );
@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-[0_12px_32px_rgba(0,0,0,.14)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
@@ -109,7 +109,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-secondary focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
diff --git a/src/components/ui/sheet-heading.tsx b/src/components/ui/sheet-heading.tsx
new file mode 100644
index 0000000..226ee2f
--- /dev/null
+++ b/src/components/ui/sheet-heading.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+  A sheet: a list that sits on the concrete under a heading with the 2px ink
+  rule. "See all" never sits in a heading; truncated lists close with a quiet
+  line where you land. Complete lists may carry a plain navigation name
+  ("Open Categories") in the `aside` slot.
+*/
+export function SheetHeading({
+  title,
+  count,
+  aside,
+  as: Tag = "h2",
+  className,
+}: {
+  title: React.ReactNode;
+  count?: number | string;
+  aside?: React.ReactNode;
+  as?: "h2" | "h3";
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="sheet-heading"
+      className={cn(
+        "mb-1 flex items-end justify-between gap-4 rule-ink pb-2.5",
+        className,
+      )}
+    >
+      <Tag className="wide text-lg leading-none font-bold text-foreground">
+        {title}
+        {count !== undefined ? (
+          <span className="ml-2 align-[1px] font-mono text-[13px] font-medium tracking-normal text-muted-foreground">
+            {count}
+          </span>
+        ) : null}
+      </Tag>
+      {aside ? (
+        <div className="shrink-0 text-sm font-medium text-ink-2 [&_a]:underline [&_a]:underline-offset-[3px] [&_a:hover]:text-foreground">
+          {aside}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/* The quiet closing line under a truncated list. */
+export function SheetFoot({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-foot"
+      className={cn(
+        "px-0.5 pt-3 text-[13px] text-muted-foreground [&_a]:font-medium [&_a]:text-ink-2 [&_a]:underline [&_a]:underline-offset-[3px] [&_a:hover]:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index d6a4c23..43e483b 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[#1f2220]/80",
         className,
       )}
       {...props}
@@ -60,7 +60,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-card data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 0168998..13d1656 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-full bg-border", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 1e56906..486d0d7 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,22 +1,44 @@
 "use client";
 
-import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
+/*
+  Toasts are charcoal at one fixed width so a stack aligns. The success toast
+  carries a 3px side-text edge; the error toast one coral for its edge and
+  icon. Actions are white-bordered 28px buttons pinned right.
+*/
 export function Toaster(props: ToasterProps) {
-  const { theme = "system" } = useTheme();
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme="dark"
       className="toaster group"
+      style={
+        {
+          "--width": "440px",
+          "--border-radius": "3px",
+          "--normal-bg": "#1f2220",
+          "--normal-border": "#1f2220",
+          "--normal-text": "#ffffff",
+          "--success-bg": "#1f2220",
+          "--success-border": "#1f2220",
+          "--success-text": "#ffffff",
+          "--error-bg": "#1f2220",
+          "--error-border": "#1f2220",
+          "--error-text": "#ffffff",
+        } as React.CSSProperties
+      }
       toastOptions={{
         classNames: {
           toast:
-            "group toast border-border/70 bg-background text-foreground shadow-lg",
-          description: "text-muted-foreground",
-          actionButton: "bg-primary text-primary-foreground",
-          cancelButton: "bg-muted text-muted-foreground",
+            "group toast !rounded-md !font-sans !text-sm !font-medium shadow-[inset_3px_0_0_#d9dbd5,0_12px_32px_rgba(0,0,0,.28)]",
+          error:
+            "shadow-[inset_3px_0_0_#f08a7e,0_12px_32px_rgba(0,0,0,.28)] [&_[data-icon]]:text-[#f08a7e]",
+          description: "!text-[#d9dbd5]",
+          actionButton:
+            "!ml-auto !h-7 !rounded-md !border-[1.5px] !border-white !bg-transparent !px-2.5 !font-semibold !text-white",
+          cancelButton: "!bg-transparent !text-[#d9dbd5]",
+          closeButton:
+            "!border-[#33372f] !bg-[#1f2220] !text-[#d9dbd5] hover:!bg-[#2a2d2a]",
         },
       }}
       {...props}
diff --git a/src/components/ui/stat-strip.tsx b/src/components/ui/stat-strip.tsx
new file mode 100644
index 0000000..9c86b89
--- /dev/null
+++ b/src/components/ui/stat-strip.tsx
@@ -0,0 +1,108 @@
+import * as React from "react";
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export type StatTone = "danger" | "repair" | "slate";
+
+export type StatItem = {
+  key: string;
+  label: string;
+  shortLabel?: string;
+  value: number | string;
+  /** Rendered small before a money value. */
+  unit?: string;
+  /** Colour applies only when the value is non-zero. */
+  tone?: StatTone;
+  href?: string;
+};
+
+const TONE_CLASS: Record<StatTone, string> = {
+  danger: "text-destructive",
+  repair: "text-repair",
+  slate: "text-slate",
+};
+
+/*
+  One component: five equal cells on desktop (28px numerals, 14px labels, the
+  money value a step smaller on a shared 31px numeral box); a four-up with the
+  fifth cell as a footer line below 1024px. A zero is set lighter in ink-3.
+*/
+export function StatStrip({
+  items,
+  className,
+}: {
+  items: StatItem[];
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="stat-strip"
+      className={cn(
+        "grid grid-cols-4 overflow-hidden rounded-md border border-border bg-card lg:grid-cols-5",
+        className,
+      )}
+    >
+      {items.map((item, index) => {
+        const isZero = item.value === 0;
+        const isFooter = index === 4;
+        const numeralClass = cn(
+          "block h-[31px] text-[28px] leading-[31px] font-bold tabular-nums whitespace-nowrap wide",
+          isFooter && "text-2xl",
+          item.tone && !isZero ? TONE_CLASS[item.tone] : "text-foreground",
+          isZero && "font-medium text-muted-foreground",
+        );
+        const content = (
+          <>
+            {item.href ? (
+              <ArrowUpRight
+                aria-hidden="true"
+                className="absolute top-2.5 right-3 hidden size-[13px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 lg:block"
+              />
+            ) : null}
+            <b className={numeralClass}>
+              {item.unit ? (
+                <span className="mr-1 text-[13px] font-semibold text-muted-foreground">
+                  {item.unit}
+                </span>
+              ) : null}
+              {item.value}
+            </b>
+            <span className="block text-sm text-ink-2 group-hover:underline group-hover:underline-offset-[3px]">
+              {item.shortLabel ? (
+                <>
+                  <span className="lg:hidden">{item.shortLabel}</span>
+                  <span className="hidden lg:inline">{item.label}</span>
+                </>
+              ) : (
+                item.label
+              )}
+            </span>
+          </>
+        );
+        const cellClass = cn(
+          "group relative block px-3.5 py-3.5 lg:px-[18px] lg:pr-[34px]",
+          index > 0 && "border-l border-border",
+          isFooter &&
+            "col-span-full flex items-baseline gap-2 border-t border-border border-l-0 px-3.5 py-2.5 text-left lg:col-span-1 lg:block lg:border-t-0 lg:border-l lg:py-3.5",
+          item.href && "hover:bg-secondary",
+        );
+        return item.href ? (
+          <Link
+            key={item.key}
+            href={item.href}
+            className={cellClass}
+            data-stat={item.key}
+          >
+            {content}
+          </Link>
+        ) : (
+          <div key={item.key} className={cellClass} data-stat={item.key}>
+            {content}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ui/status-text.tsx b/src/components/ui/status-text.tsx
new file mode 100644
index 0000000..26d2662
--- /dev/null
+++ b/src/components/ui/status-text.tsx
@@ -0,0 +1,59 @@
+import * as React from "react";
+
+import {
+  ASSET_STATUS_LABELS,
+  type AssetStatus,
+} from "@/components/assets/types";
+import { cn } from "@/lib/utils";
+
+/*
+  Status colour only on exceptions. Active is plain ink-2 text with no
+  marker; the exceptions carry a 9px square marker in their colour. In
+  tables the marker keeps a fixed gutter so every label shares one left
+  edge, and Active recedes to ink-3 so the exceptions carry the column.
+*/
+export const STATUS_COLOR: Record<AssetStatus, string> = {
+  active: "text-ink-2",
+  in_storage: "text-slate",
+  under_repair: "text-repair",
+  retired: "text-retired",
+  disposed: "text-disposed",
+};
+
+export function StatusText({
+  status,
+  className,
+  inTable = false,
+  hideActive = false,
+  ...props
+}: React.ComponentProps<"span"> & {
+  status: AssetStatus;
+  inTable?: boolean;
+  hideActive?: boolean;
+}) {
+  const isActive = status === "active";
+  if (isActive && hideActive) return null;
+
+  return (
+    <span
+      data-slot="status-text"
+      data-status={status}
+      className={cn(
+        "inline-flex items-center gap-[7px] text-sm font-medium whitespace-nowrap",
+        STATUS_COLOR[status],
+        isActive && inTable && "text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "size-[9px] shrink-0 rounded-xs bg-current",
+          isActive && (inTable ? "invisible" : "hidden"),
+        )}
+      />
+      {ASSET_STATUS_LABELS[status]}
+    </span>
+  );
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index bab05ee..e064537 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -5,6 +5,7 @@ import { Switch as SwitchPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/* Ink when on, like a ticked checkbox; amber stays reserved for the primary. */
 function Switch({
   className,
   size = "default",
@@ -17,7 +18,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 cursor-pointer items-center rounded-full border-[1.5px] p-px transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 data-[state=checked]:border-foreground data-[state=checked]:bg-foreground data-[state=unchecked]:border-input data-[state=unchecked]:bg-card",
         className,
       )}
       {...props}
@@ -25,7 +26,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+          "pointer-events-none block rounded-full transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 data-[state=checked]:translate-x-4 data-[state=checked]:bg-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-ink-2 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3",
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index bdb18d9..21d8ed3 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -6,6 +6,11 @@ import { Tabs as TabsPrimitive } from "radix-ui";
 
 import { cn } from "@/lib/utils";
 
+/*
+  Workshop tabs: text tabs; the current one carries the 3px darker-amber
+  "where you are" mark on its edge. `line` adds a 1px rule under the list for
+  tabs that live inside a card.
+*/
 function Tabs({
   className,
   orientation = "horizontal",
@@ -26,12 +31,12 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-stretch gap-0.5 text-ink-2 group-data-[orientation=vertical]/tabs:flex-col",
   {
     variants: {
       variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
+        default: "",
+        line: "w-full border-b border-border px-2.5",
       },
     },
     defaultVariants: {
@@ -64,10 +69,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "relative -mb-px inline-flex cursor-pointer items-center gap-[7px] border-b-[3px] border-transparent px-3 pt-2.5 pb-2.5 text-sm font-medium whitespace-nowrap text-ink-2 transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-amber-ink data-[state=active]:font-semibold data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -82,7 +84,7 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1", className)}
       {...props}
     />
   );
diff --git a/src/components/ui/tag-chip.tsx b/src/components/ui/tag-chip.tsx
new file mode 100644
index 0000000..a6f0736
--- /dev/null
+++ b/src/components/ui/tag-chip.tsx
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { MapPin } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/*
+  The label chip: a printed asset tag drawn as the physical thing it is.
+  1px border in dense tables, 1.5px standalone, 2px on the asset hero.
+*/
+const WEIGHT_CLASS = {
+  table: "h-[23px] border",
+  standalone: "h-6 border-[1.5px]",
+  hero: "h-[34px] border-2 px-3 text-base",
+} as const;
+
+export type TagChipWeight = keyof typeof WEIGHT_CLASS;
+
+export function TagChip({
+  children,
+  weight = "standalone",
+  className,
+  ...props
+}: React.ComponentProps<"span"> & { weight?: TagChipWeight }) {
+  return (
+    <span
+      data-slot="tag-chip"
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-xs border-foreground bg-card px-[7px] font-mono text-[13px] leading-none font-semibold tracking-[0.04em] whitespace-nowrap text-foreground",
+        WEIGHT_CLASS[weight],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+/*
+  A location chip shares the label shape: a pin glyph and the leaf name in
+  the sans face, sentence case, never a path.
+*/
+export function LocationChip({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="location-chip"
+      className={cn(
+        "inline-flex h-[23px] shrink-0 items-center gap-1 rounded-xs border border-foreground bg-card px-[7px] text-[13px] leading-none font-semibold whitespace-nowrap text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <MapPin className="size-3" aria-hidden="true" />
+      {children}
+    </span>
+  );
+}
+
+/* Free-form keywords: borderless tinted chips. */
+export function KeywordChip({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="keyword-chip"
+      className={cn(
+        "inline-flex h-6 items-center rounded-md bg-chip px-[9px] text-[13px] font-medium whitespace-nowrap text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span className="text-muted-foreground">#</span>
+      {children}
+    </span>
+  );
+}
+
+/* Category prefixes (PT, HT) on the dashboard only: the same tint, mono. */
+export function PrefixChip({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="prefix-chip"
+      className={cn(
+        "inline-flex h-6 min-w-11 items-center justify-center rounded-md bg-chip px-2 font-mono text-[13px] font-medium whitespace-nowrap text-ink-2",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 4fbb79a..237659c 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,8 +7,8 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground dark:bg-input/30 flex min-h-24 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "border-input placeholder:text-muted-foreground dark:bg-input/30 flex min-h-24 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-foreground",
         className,
       )}
       {...props}
diff --git a/src/hooks/use-barcode-scanner.ts b/src/hooks/use-barcode-scanner.ts
index 9ce0234..51282ef 100644
--- a/src/hooks/use-barcode-scanner.ts
+++ b/src/hooks/use-barcode-scanner.ts
@@ -309,6 +309,15 @@ function mapGetUserMediaError(err: unknown): {
     if (err.name === "NotAllowedError" || err.name === "SecurityError") {
       return { state: "denied", message: err.message };
     }
+    if (err.name === "NotFoundError" || err.name === "OverconstrainedError") {
+      return { state: "error", message: "No camera found on this device. Type the tag instead." };
+    }
+    if (err.name === "NotReadableError") {
+      return {
+        state: "error",
+        message: "Another app is using the camera. Close it and try again, or type the tag.",
+      };
+    }
     return { state: "error", message: err.message };
   }
   return { state: "error", message: "Unknown scanner error." };
diff --git a/src/hooks/use-hydrated.ts b/src/hooks/use-hydrated.ts
new file mode 100644
index 0000000..1050885
--- /dev/null
+++ b/src/hooks/use-hydrated.ts
@@ -0,0 +1,18 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const subscribe = () => () => {};
+
+/*
+  False during server render and hydration, true afterwards. Use it to keep
+  client-only data (query cache filled by the shell before a suspended page
+  hydrates, localStorage) out of the first client render.
+*/
+export function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  );
+}
diff --git a/src/hooks/use-long-press.ts b/src/hooks/use-long-press.ts
new file mode 100644
index 0000000..9cd2610
--- /dev/null
+++ b/src/hooks/use-long-press.ts
@@ -0,0 +1,64 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+
+/*
+  Press and hold (or right-click) to run an action. Returns handlers to spread
+  on the element and `consumeClick`, which reports (once) whether the click
+  that ends a long press should be swallowed.
+*/
+export function useLongPress(onLongPress: () => void, delay = 450) {
+  const timer = useRef<number | null>(null);
+  const fired = useRef(false);
+  const origin = useRef<{ x: number; y: number } | null>(null);
+
+  const clear = useCallback(() => {
+    if (timer.current !== null) {
+      window.clearTimeout(timer.current);
+      timer.current = null;
+    }
+  }, []);
+
+  const handlers = {
+    onPointerDown: (event: React.PointerEvent) => {
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      fired.current = false;
+      origin.current = { x: event.clientX, y: event.clientY };
+      clear();
+      timer.current = window.setTimeout(() => {
+        fired.current = true;
+        if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+          navigator.vibrate?.(10);
+        }
+        onLongPress();
+      }, delay);
+    },
+    onPointerMove: (event: React.PointerEvent) => {
+      if (!origin.current) return;
+      const dx = Math.abs(event.clientX - origin.current.x);
+      const dy = Math.abs(event.clientY - origin.current.y);
+      if (dx > 8 || dy > 8) clear();
+    },
+    onPointerUp: clear,
+    onPointerLeave: clear,
+    onPointerCancel: clear,
+    onContextMenu: (event: React.MouseEvent) => {
+      event.preventDefault();
+      clear();
+      if (!fired.current) {
+        fired.current = true;
+        onLongPress();
+      }
+    },
+  };
+
+  const consumeClick = useCallback(() => {
+    if (fired.current) {
+      fired.current = false;
+      return true;
+    }
+    return false;
+  }, []);
+
+  return { handlers, consumeClick };
+}
diff --git a/src/hooks/use-overdue-count.ts b/src/hooks/use-overdue-count.ts
new file mode 100644
index 0000000..27ce4ea
--- /dev/null
+++ b/src/hooks/use-overdue-count.ts
@@ -0,0 +1,19 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { getDashboardOverview } from "@/lib/api/dashboard";
+
+/*
+  The overdue-services count shown as a badge on Services in every nav. It
+  shares the dashboard overview query so the dashboard and the shell make one
+  request between them.
+*/
+export function useOverdueCount() {
+  const { data } = useQuery({
+    queryKey: ["dashboard", "overview"],
+    queryFn: getDashboardOverview,
+    staleTime: 60_000,
+  });
+  if (!data?.serviceSchedulingEnabled) return 0;
+  return data.overdueServiceCount;
+}
diff --git a/src/lib/api/assets.ts b/src/lib/api/assets.ts
index 05ff776..e795f1f 100644
--- a/src/lib/api/assets.ts
+++ b/src/lib/api/assets.ts
@@ -71,7 +71,7 @@ export type ListAssetsParams = {
   status?: AssetStatus;
   tagIds?: string[];
   search?: string;
-  sortBy?: "createdAt" | "name" | "assetTag" | "status";
+  sortBy?: "createdAt" | "updatedAt" | "name" | "assetTag" | "status";
   sortDirection?: "asc" | "desc";
 };
 
diff --git a/src/lib/api/dashboard.ts b/src/lib/api/dashboard.ts
index 7831f47..d8e39b8 100644
--- a/src/lib/api/dashboard.ts
+++ b/src/lib/api/dashboard.ts
@@ -40,10 +40,13 @@ export type DashboardOverview = {
   totalAssets: number;
   statusCounts: StatusCounts;
   recentAssets: RecentAsset[];
+  /** Assets updated in the 24 hours before the overview was built. */
+  changedLastDayCount: number;
   categoryBreakdown: CategoryBreakdownItem[];
   locationBreakdown: LocationBreakdownItem[];
   serviceSchedulingEnabled: boolean;
   overdueServiceCount: number;
+  scheduledServiceCount: number;
   upcomingServices: UpcomingServiceItem[];
 };
 
diff --git a/src/lib/relative-time.ts b/src/lib/relative-time.ts
new file mode 100644
index 0000000..024dbb5
--- /dev/null
+++ b/src/lib/relative-time.ts
@@ -0,0 +1,49 @@
+/*
+  Time forms. Long form in desktop tables and feeds ("Today 09:14",
+  "Yesterday", "2 days ago", "3 weeks ago"); one short form everywhere else
+  (09:14, 1d, 2d, 1w, 3w, 1mo). "Today" is written without a comma.
+*/
+function pad(value: number) {
+  return String(value).padStart(2, "0");
+}
+
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function formatRelativeTime(
+  timestamp: number,
+  now: Date = new Date(),
+): { long: string; short: string } {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return { long: "—", short: "—" };
+
+  const clock = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  const dayMs = 24 * 60 * 60 * 1000;
+  const days = Math.round(
+    (startOfDay(now).getTime() - startOfDay(date).getTime()) / dayMs,
+  );
+
+  if (days <= 0) return { long: `Today ${clock}`, short: clock };
+  if (days === 1) return { long: "Yesterday", short: "1d" };
+  if (days < 7) return { long: `${days} days ago`, short: `${days}d` };
+  if (days < 30) {
+    const weeks = Math.floor(days / 7);
+    return {
+      long: `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`,
+      short: `${weeks}w`,
+    };
+  }
+  if (days < 365) {
+    const months = Math.floor(days / 30);
+    return {
+      long: `${months} ${months === 1 ? "month" : "months"} ago`,
+      short: `${months}mo`,
+    };
+  }
+  const years = Math.floor(days / 365);
+  return {
+    long: `${years} ${years === 1 ? "year" : "years"} ago`,
+    short: `${years}y`,
+  };
+}
diff --git a/src/server/domain/__tests__/dashboard.test.ts b/src/server/domain/__tests__/dashboard.test.ts
index 5222706..0933da4 100644
--- a/src/server/domain/__tests__/dashboard.test.ts
+++ b/src/server/domain/__tests__/dashboard.test.ts
@@ -80,6 +80,17 @@ describe("dashboard domain", () => {
     expect(recents.length).toBeLessThanOrEqual(10);
   });
 
+  it("counts every asset changed in the last day, not just the recent list", async () => {
+    const pb = getHarness().admin;
+    const admin = await seedAdmin(pb);
+    for (let i = 0; i < 12; i++) {
+      await createAsset(ctx(), { name: `Asset ${i}`, actorId: admin.id });
+    }
+    const overview = await getOverview(ctx());
+    expect(overview.recentAssets).toHaveLength(10);
+    expect(overview.changedLastDayCount).toBe(12);
+  });
+
   it("returns an overview with date format, breakdowns, and upcoming", async () => {
     const pb = getHarness().admin;
     const admin = await seedAdmin(pb);
@@ -108,6 +119,7 @@ describe("dashboard domain", () => {
     const overview = await getOverview(ctx());
     expect(overview.dateFormat).toBe("YYYY-MM-DD");
     expect(overview.totalAssets).toBe(2);
+    expect(overview.changedLastDayCount).toBe(2);
     expect(
       overview.categoryBreakdown.find((entry) => entry.name === "IT")?.count,
     ).toBe(2);
diff --git a/src/server/domain/assets.ts b/src/server/domain/assets.ts
index 95a1238..f02c06b 100644
--- a/src/server/domain/assets.ts
+++ b/src/server/domain/assets.ts
@@ -73,7 +73,9 @@ export const ListAssetsInput = z.object({
   status: assetStatusSchema.optional(),
   tagIds: z.array(z.string()).optional(),
   search: z.string().optional(),
-  sortBy: z.enum(["createdAt", "name", "assetTag", "status"]).optional(),
+  sortBy: z
+    .enum(["createdAt", "updatedAt", "name", "assetTag", "status"])
+    .optional(),
   sortDirection: z.enum(["asc", "desc"]).optional(),
 });
 
@@ -431,6 +433,7 @@ function pickSort(
   const multiplier = direction === "asc" ? 1 : -1;
   return (a: AssetListView, b: AssetListView) => {
     if (by === "createdAt") return (a.createdAt - b.createdAt) * multiplier;
+    if (by === "updatedAt") return (a.updatedAt - b.updatedAt) * multiplier;
     if (by === "name") {
       return (
         a.name.localeCompare(b.name, undefined, { sensitivity: "base" }) *
diff --git a/src/server/domain/dashboard.ts b/src/server/domain/dashboard.ts
index fe290ca..6644e7a 100644
--- a/src/server/domain/dashboard.ts
+++ b/src/server/domain/dashboard.ts
@@ -43,6 +43,7 @@ export type UpcomingServiceItem = {
 export type UpcomingServicesPreview = {
   serviceSchedulingEnabled: boolean;
   overdueCount: number;
+  scheduledCount: number;
   items: UpcomingServiceItem[];
 };
 
@@ -51,10 +52,13 @@ export type DashboardOverview = {
   totalAssets: number;
   statusCounts: StatusCounts;
   recentAssets: RecentAsset[];
+  /** Assets updated in the 24 hours before the overview was built. */
+  changedLastDayCount: number;
   categoryBreakdown: CategoryBreakdownItem[];
   locationBreakdown: LocationBreakdownItem[];
   serviceSchedulingEnabled: boolean;
   overdueServiceCount: number;
+  scheduledServiceCount: number;
   upcomingServices: UpcomingServiceItem[];
 };
 
@@ -140,6 +144,14 @@ function buildRecentAssets(assets: AssetRow[]): RecentAsset[] {
     }));
 }
 
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+function countChangedSince(assets: AssetRow[], since: number) {
+  let count = 0;
+  for (const asset of assets) if (asset.updatedAt >= since) count += 1;
+  return count;
+}
+
 function compareBreakdown<T extends { count: number; name: string }>(
   a: T,
   b: T,
@@ -217,6 +229,7 @@ async function buildUpcomingServicesPreview(
     return {
       serviceSchedulingEnabled: false,
       overdueCount: 0,
+      scheduledCount: 0,
       items: [],
     };
   }
@@ -232,11 +245,12 @@ async function buildUpcomingServicesPreview(
     return {
       serviceSchedulingEnabled: true,
       overdueCount: 0,
+      scheduledCount: 0,
       items: [],
     };
   }
 
-  const previewSchedules = schedules.slice(0, 5);
+  const previewSchedules = schedules.slice(0, 7);
   const assets = await Promise.all(
     previewSchedules.map((schedule) =>
       ctx.pb
@@ -263,6 +277,7 @@ async function buildUpcomingServicesPreview(
   return {
     serviceSchedulingEnabled: true,
     overdueCount: schedules.filter((s) => s.nextServiceDate < todayIso).length,
+    scheduledCount: schedules.length,
     items,
   };
 }
@@ -319,10 +334,12 @@ export async function getOverview(ctx: Ctx): Promise<DashboardOverview> {
     totalAssets: assets.length,
     statusCounts: buildStatusCounts(assets),
     recentAssets: buildRecentAssets(assets),
+    changedLastDayCount: countChangedSince(assets, Date.now() - DAY_MS),
     categoryBreakdown,
     locationBreakdown,
     serviceSchedulingEnabled: upcomingPreview.serviceSchedulingEnabled,
     overdueServiceCount: upcomingPreview.overdueCount,
+    scheduledServiceCount: upcomingPreview.scheduledCount,
     upcomingServices: upcomingPreview.items,
   };
 }