diff --git a/apps/web/DESIGN.md b/apps/web/DESIGN.md
index c755b00f6..64bb19dd3 100644
--- a/apps/web/DESIGN.md
+++ b/apps/web/DESIGN.md
@@ -1,19 +1,19 @@
 ---
 name: OpenAgentCore Console
-description: The management console for one self-hosted OpenAgentCore deployment; projects, their assets and keys, health and capacity, on hairline cards in a white page panel over a quiet canvas.
+description: The management console for one self-hosted OpenAgentCore deployment; projects, their assets and keys, health and capacity, with flat page surfaces, clear navigation and compact resource tables.
 colors:
   ink: "oklch(0.247 0.006 258.361)"
   ink-muted: "oklch(0.506 0.01 264.477)"
-  ink-subtle: "oklch(0.695 0.009 264.505)"
+  ink-subtle: "oklch(0.55 0.009 264.505)"
   sidebar-ink: "oklch(0.506 0.01 264.477)"
   surface: "oklch(1 0 0)"
   surface-subtle: "oklch(0.979 0.002 247.839)"
   surface-muted: "oklch(0.961 0.001 286.375)"
   canvas: "oklch(0.961 0.002 247.84)"
   frame-line: "color-mix(in oklch, oklch(0.247 0.006 258.361) 11%, transparent)"
-  line: "oklch(0.946 0.003 264.542)"
+  line: "oklch(0.90 0.003 264.542)"
   line-muted: "oklch(0.966 0.002 264.542)"
-  line-strong: "oklch(0.912 0.005 258.326)"
+  line-strong: "oklch(0.85 0.005 258.326)"
   hover: "oklch(0.97 0.002 247.839)"
   pressed: "oklch(0.933 0.003 247.86)"
   tile: "oklch(0.933 0.003 247.86)"
@@ -24,7 +24,7 @@ colors:
   success: "oklch(0.6 0.12 158)"
   warning: "oklch(0.68 0.135 62)"
   danger: "oklch(0.585 0.17 25)"
-  status-queued: "oklch(0.695 0.009 264.505)"
+  status-queued: "oklch(0.55 0.009 264.505)"
   series-1: "oklch(0.56 0.14 277)"
   series-2: "oklch(0.7 0.09 195)"
   series-3: "oklch(0.78 0.11 80)"
@@ -35,38 +35,38 @@ colors:
   meter-fill: "color-mix(in srgb, oklch(0.247 0.006 258.361) 62%, transparent)"
 typography:
   metric:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
-    fontSize: "20px"
-    fontWeight: 500
-    lineHeight: "28px"
-    letterSpacing: "-0.015em"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontSize: "28px"
+    fontWeight: 600
+    lineHeight: "36px"
+    letterSpacing: "-0.025em"
     fontFeature: "\"tnum\""
   display:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
     fontSize: "20px"
     fontWeight: 500
     lineHeight: "26px"
     letterSpacing: "-0.015em"
     fontFeature: "\"tnum\""
   headline:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
-    fontSize: "17px"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontSize: "20px"
     fontWeight: 600
-    lineHeight: "24px"
+    lineHeight: "28px"
     letterSpacing: "-0.015em"
   title:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
     fontSize: "14px"
     fontWeight: 600
     lineHeight: "20px"
     letterSpacing: "-0.01em"
   body:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
     fontSize: "13px"
     fontWeight: 400
     lineHeight: "18px"
   label:
-    fontFamily: "\"Inter Variable\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+    fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Segoe UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
     fontSize: "12.5px"
     fontWeight: 500
     lineHeight: "18px"
@@ -76,21 +76,21 @@ typography:
     fontWeight: 400
 rounded:
   hairline: "4px"
-  control: "8px"
-  control-inner: "6px"
+  control: "4px"
+  control-inner: "3px"
   segment: "8px"
   tooltip: "8px"
   popover: "14px"
-  frame: "12px"
-  window: "14px"
+  frame: "6px"
+  window: "8px"
   pill: "999px"
 spacing:
   xs: "4px"
   sm: "8px"
   md: "12px"
   lg: "16px"
-  gutter: "28px"
-  section: "28px"
+  gutter: "24px"
+  section: "24px"
 components:
   card:
     backgroundColor: "{colors.surface}"
@@ -100,13 +100,13 @@ components:
     textColor: "{colors.canvas}"
     rounded: "{rounded.control}"
     padding: "0 13px"
-    height: "30px"
+    height: "32px"
   button-outline:
     backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     rounded: "{rounded.control}"
     padding: "0 13px"
-    height: "30px"
+    height: "32px"
   button-outline-hover:
     backgroundColor: "{colors.surface-subtle}"
   button-danger:
@@ -114,20 +114,20 @@ components:
     textColor: "#ffffff"
     rounded: "{rounded.control}"
     padding: "0 13px"
-    height: "30px"
+    height: "32px"
   button-ghost:
     textColor: "{colors.ink-muted}"
     rounded: "{rounded.control}"
     padding: "0 13px"
-    height: "30px"
+    height: "32px"
   refresh-button:
     textColor: "{colors.ink-muted}"
     rounded: "{rounded.control}"
-    size: "30px"
+    size: "32px"
   back-button:
     textColor: "{colors.ink-muted}"
     rounded: "{rounded.control}"
-    size: "30px"
+    size: "32px"
   text-action:
     textColor: "{colors.ink-muted}"
     typography: "{typography.label}"
@@ -138,18 +138,18 @@ components:
     textColor: "{colors.ink}"
     rounded: "{rounded.control}"
     padding: "0 10px"
-    height: "30px"
+    height: "32px"
   search-field:
     backgroundColor: "{colors.surface}"
     textColor: "{colors.ink}"
     rounded: "{rounded.control}"
-    height: "30px"
+    height: "32px"
   select:
     backgroundColor: "{colors.surface-muted}"
     textColor: "{colors.ink}"
     rounded: "{rounded.control}"
     padding: "0 30px 0 10px"
-    height: "30px"
+    height: "32px"
   segmented-track:
     backgroundColor: "{colors.pressed}"
     rounded: "{rounded.segment}"
@@ -166,22 +166,21 @@ components:
     textColor: "{colors.sidebar-ink}"
     rounded: "{rounded.control}"
     padding: "0 8px"
-    height: "32px"
+    height: "36px"
   nav-item-active:
-    backgroundColor: "{colors.surface}"
+    backgroundColor: "var(--hover-2)"
     textColor: "{colors.ink}"
   metric-tile:
-    backgroundColor: "{colors.surface}"
+    backgroundColor: "transparent"
     textColor: "{colors.ink}"
     typography: "{typography.metric}"
-    rounded: "{rounded.frame}"
-    padding: "16px"
+    padding: "0 20px"
   kpi-cell:
     textColor: "{colors.ink}"
     typography: "{typography.display}"
     padding: "14px 16px 16px"
   table-header:
-    backgroundColor: "{colors.surface}"
+    backgroundColor: "var(--inset)"
     textColor: "{colors.ink-muted}"
     padding: "0 12px"
     height: "36px"
@@ -215,21 +214,21 @@ components:
 
 **Creative North Star: "The Operator's Ledger"**
 
-The console is a management tool, not a developer showroom. Every screen reads like a ledger page laid on a desk: a quiet canvas, one white page panel, one header, then white cards holding the evidence (figures, charts, tables). Structure comes from the card edge, 1px internal rules and whitespace; there are no cards inside cards. Colour is spent on problems and on the data itself, almost never on decoration. The indigo accent means "you selected this" or "this is a link"; its data shade (`--data`) means "this is the single measured quantity". Primary actions are filled with ink.
+The console is a compact developer and operator workspace. Flat page surfaces, a separated navigation rail and clear typography provide the structure. Resource tables use horizontal rules; independent charts and summaries use small-radius frames. Avoid nested cards. Colour is spent on problems and on the data itself, almost never on decoration. The indigo accent means "you selected this" or "this is a link"; its data shade (`--data`) means "this is the single measured quantity". Primary actions are filled with ink.
 
-Density is deliberately high and calm: 13px body, 44px table rows, 30px controls, tabular figures in every column. The system is bilingual (zh-CN and English) and ships light and dark themes on the same token names; dark swaps values, never structure. It honours reduced motion and treats keyboard focus as a first-class state (2px indigo outline).
+Density is deliberately high and calm: 13px body, 44px table rows, 32px controls, tabular figures in every column. The system is bilingual (zh-CN and English) and ships light and dark themes on the same token names; dark swaps values, never structure. It honours reduced motion and treats keyboard focus as a first-class state (2px indigo outline).
 
 The data contract is part of the look. Core reports only what it observes, so the interface shows absence honestly: an em dash, a gap in a line, the word "Unavailable" or "Unknown". Explanations stay one click away behind a circled question mark, so the page stays a ledger rather than a leaflet.
 
 **Key Characteristics:**
-- Each page sits in one white panel with 14px corners on a cool gray canvas, which also holds the sidebar. Inside the panel, cards are drawn by a hairline ring, and the page header is white with a hairline rule under it.
+- Each page fills the content column without an outer radius or shadow. The sidebar uses a subtle surface and a dividing rule. Page headers and table headers have clear bottom rules.
 - One indigo voice for selection, focus, links and single-series data (`--data`); the primary button is ink.
 - Meters are neutral ink; green, amber and red appear only when something is wrong or a state needs reporting.
 - A six-slot categorical palette for multi-series data, bound to the entity, not its rank.
 - One list grammar on every resource page: project filter, search, count, name with compact ID, creator, row actions.
 - Tabular numerals everywhere a number can line up.
 - Status is always a dot plus a plain-language label.
-- Explanations live behind "?" help tips; errors, warnings and safety notices stay visible. No small print: an empty state's explanation is a help tip beside its title, a field's rules a help tip beside its label, and filler lines are cut.
+- Task instructions and empty-state next steps stay visible. Supplementary definitions belong in help tips. Errors, warnings and safety notices stay visible.
 
 ## Colors
 
@@ -272,16 +271,16 @@ A restrained neutral ledger with one indigo voice, three signal colours and a se
 
 ## Typography
 
-- **Display Font:** Inter Variable (with the system UI sans as fallback: -apple-system, Segoe UI, and PingFang SC / Microsoft YaHei / Noto Sans SC for Chinese)
-- **Body Font:** Inter Variable, the same stack, with Inter's `cv11` and `ss01` alternates
+- **Display Font:** IBM Plex Sans (with the system UI sans as fallback: -apple-system, Segoe UI, and PingFang SC / Microsoft YaHei / Noto Sans SC for Chinese)
+- **Body Font:** IBM Plex Sans, the same stack; locally bundled in weights 400, 500, 600 and 700
 - **Label/Mono Font:** Geist Mono Variable (with ui-monospace / SF Mono / Menlo) for identifiers and code
 
 **Character:** One quiet sans in several weights, sized for dense reading; hierarchy comes from weight and a tight scale, not from a second typeface. Mono appears only for machine identifiers, key prefixes, models and commands.
 
 ### Hierarchy
-- **Metric** (500, 20px, 28px, -0.015em, tabular): the four Overview tiles.
+- **Metric** (600, 24px, 32px, -0.015em, tabular): the four Overview tiles.
 - **Display** (500, 20px, 26px, -0.015em, tabular): KPI strip figures. Figures stand out by weight and position, one step above body text.
-- **Headline** (600, 17px, 24px, -0.015em): the page title in the page header; one per page. Detail pages put the back button before it.
+- **Headline** (600, 20px, 28px, -0.015em): the page title in the page header; one per page. Detail pages put the back button before it.
 - **Title** (600, 14px, 20px, -0.01em): section and card headings. Dialog titles are 600 at 15px; empty-state titles 500 at 13.5px.
 - **Body** (400, 13px, 18px): table cells, controls, form fields, dialog text. The document base is 14px/20px; help tips run 12px/18px.
 - **Label** (500, 12.5px, 18px): KPI labels, column headers, text actions, segmented options and the list count; fact labels 12px/500 Pencil; axis ticks 11px. Status labels are 13px.
@@ -296,38 +295,38 @@ A restrained neutral ledger with one indigo voice, three signal colours and a se
 
 ## Layout
 
-A fixed 232px sidebar on the canvas beside the main column, where each page sits in one white panel with 14px corners; below 640px the sidebar collapses to a 52px icon rail. The desktop minimum is 960px. Every page uses the same frame: a header at least 56px tall (title, optional help tip, actions on the right) on white with a Hairline rule under it, then a scrolling body padded `20px 28px 48px` with sections stacked 28px apart. Inside a section the heading row sits 10px above its content.
+A fixed 224px sidebar sits beside the flat main column, separated by a 1px rule. Below 640px it becomes a 56px icon rail with accessible names and no clipped labels. The header is at least 56px tall, with a 20px/600 title and actions on the right; actions wrap onto a new line when the available width cannot contain them. The scrolling body uses `24px 24px 40px` padding and a 24px section gap; horizontal padding becomes 16px below 640px. Wide tables scroll within their own frame.
 
-The recurring shapes in the body are the KPI strip (auto-fit columns, min 158px; three per row below 1180px), chart grids (two equal columns, single below 1180px), full-width table cards, and a fact row on detail pages. Overview has its own arrangement: Getting started while a step is to do, four metric tiles, Session activity beside the fleet topology (Core in the middle, nodes left and right, solid lines online and dashed offline; Core and each node open an anchored popover with a two-column glance and links to their pages), then the attention table and usage by project, each on its own card with a 16px gap. Popovers are the overlay card (14px radius, overlay shadow, 16px padding): a 14px title, 12px labels over 13px values, links at a ruled foot. Nodes itself is a plain list with a detail page.
+The recurring shapes in the body are the KPI strip (auto-fit columns, min 158px; three per row below 1180px), chart grids (two equal columns, single below 1180px), full-width resource tables, and a fact row on detail pages. Overview has its own arrangement: Getting started while a step is to do, a four-column metric strip separated by vertical rules, Session activity beside a compact fleet inventory, then flat attention and project usage tables. The activity and fleet grid has a 24px gap and stacks below 680px of content width; the metric strip uses two columns below 560px. Core and up to four nodes open anchored popovers with facts and links to their pages. When more nodes exist, offline and degraded nodes take priority and a link leads to the full list. Popovers are the overlay card (8px radius, overlay shadow, 16px padding): a 14px title, 12px labels over 13px values, links at a ruled foot. Nodes itself is a plain list with a detail page.
 
-Spacing follows a 4px base: 4, 8, 12, 16, 28 (page gutter and section gap). Controls are 30px tall, segmented options 26px, table rows 44px (32px compact), table headers 36px.
+Spacing follows a 4px base: 4, 8, 12, 16, 24 (page gutter and section gap). Controls are 32px tall, segmented options 26px, table rows 44px (32px compact), table headers 36px.
 
-**The Liveness Only Rule.** The moving dash on a topology link shows that a connection is live, never traffic or work. An offline link is dashed and still, a stale topology shows no movement, and reduced motion stops the animation.
+Fleet availability uses labeled status dots. Retained observations keep their stale disclosure and never imply live traffic.
 
 **The One Page Grammar Rule.** Every page uses PageHeader, PageBody and Section from `components/console-ui.tsx`, and every resource list uses the list grammar from `components/list-ui.tsx`. No page invents its own header height, gutter, section rhythm or toolbar.
 
 ## Elevation & Depth
 
-Depth comes from the canvas-to-panel step, not from stacked shadows.
+Page structure comes from typography, spacing and dividers. Reserve elevation for overlays.
 
 ### Shadow Vocabulary
-- **Page panel** (a Hairline ring with a soft shadow, `0 1px 2px` at 3% and `0 8px 24px -12px` at 8% black): the white panel that holds each page.
-- **Card** (no shadow; a 1px `frame-line` ring at 11% ink): KPI strips, table frames, chart grids, Overview cards, the Session transcript and the deployment panel. Cards are flat; no page surface is translucent or blurred.
+- **Page surface**: flat and full-height, with no outer radius or shadow.
+- **Card** (no shadow; a 1px `frame-line` ring at 11% ink): KPI strips, chart grids, Overview cards, the Session transcript and the deployment panel. Cards are flat; no page surface is translucent or blurred.
 - **Control ring** (a 1px Firm Rule ring with an extra-small shadow): outline buttons, the active segment, and search fields and selects in toolbars. Inputs inside cards and dialogs carry only a Hairline ring.
 - **Overlay** (a 1px Hairline ring with a large soft shadow): anchored popovers, menus, dialogs, help tips and chart tooltips.
 
 ### Named Rules
-**The One Card Rule.** Figures, charts and tables sit in one card divided by 1px internal rules. A card never contains another bordered, shadowed container; an empty list is itself one card.
+**The One Card Rule.** Figures, charts and tables sit in one card divided by 1px internal rules. A card never contains another bordered, shadowed container; empty states remain unframed, including inside a card.
 
 ## Shapes
 
-14px corners on the page panel, dialogs and anchored popovers; 12px on cards, tables, KPI strips, chart grids and empty states; 8px on buttons, icon buttons, inputs, selects, the search field, the segmented track, coverage notes, help tips and chart tooltips; 6px on segment options and text actions; 4px on small inline marks and segment counts; full pills for meters, count badges and value pills; circles for status dots (6px), KPI tone dots (8px) and tile dots (10px). Legend keys are 9px squares with 2px corners, or 12×2px strokes for line series. Borders are always 1px.
+Use 4px corners on controls, 3px on inner options, 6px on cards and 8px on dialogs. Resource tables and page surfaces have square edges. Keep pills for compact badges and circles for status dots. Borders are 1px.
 
 ## Components
 
 ### Buttons
 Compact and quiet; the primary button is the only filled button in a header.
-- **Shape:** 8px corners, 30px tall, 0 13px padding, 13px/500 label, optional 14px Lucide icon. No button is a pill.
+- **Shape:** 4px corners, 32px tall, 0 13px padding, 13px/500 label, optional 14px Lucide icon. No button is a pill.
 - **Primary:** Ledger Ink fill with Canvas text and a faint inner highlight; hover lowers it to 88% opacity. Used for the one affirmative header action (Create project) and for the submit button of non-destructive dialogs (create, rename, issue, continue).
 - **Outline:** Paper face with the control ring; hover takes Margin Gray. Used for every action in a card or section header (Issue key, Manage nodes, Session log, Projects and keys), Download on the Skill page, Cancel in dialogs and empty-state actions.
 - **Danger:** Fault Red fill, white text: the confirm button of every destructive dialog. On a page, a destructive button such as Delete on a detail page is red text on an outline button that takes a red tint on hover.
@@ -336,13 +335,13 @@ Compact and quiet; the primary button is the only filled button in a header.
 - **Text action:** borderless Graphite 12.5px/500, 24px tall with 6px corners, that turns Ink on the Hover wash; used only for per-row actions in tables (Rename, Archive, Delete) and links in a popover's foot, never in a header. A destructive text action turns red on hover.
 
 ### Refresh button
-A 30px ghost icon button with the refresh glyph. Controls that scope the whole page (project filter, time range) come before it; on detail pages it leads, followed by any outline actions and Delete. It spins while reading; its tooltip carries the last update time instead of a visible timestamp.
+A 32px ghost icon button with the refresh glyph. Controls that scope the whole page (project filter, time range) come before it; on detail pages it leads, followed by any outline actions and Delete. It spins while reading; its tooltip carries the last update time instead of a visible timestamp.
 
 ### Segmented control
 The single style for ranges, order and status filters. A Pressed-gray track (2px padding, 8px corners) holds 26px options in Graphite; the chosen option sits on a Paper thumb with the control ring and Ledger Ink text, and the thumb glides to a new choice (Motion shared layout). Options may carry a tabular count. It is a radiogroup with arrow-key movement.
 
 ### Selects and the project filter
-Selects and inputs are 30px fields filled Well Gray with a Hairline ring inside cards and dialogs, and Paper with the control ring in toolbars and headers. Focus turns them Paper with a 1px indigo ring and a 4px indigo tint around it. Selects draw their own chevron. The project filter is a select whose first option is **All projects**; archived projects are listed with "· archived".
+Selects and inputs are 32px fields filled Well Gray with a Hairline ring inside cards and dialogs, and Paper with the control ring in toolbars and headers. Focus turns them Paper with a 1px indigo ring and a 4px indigo tint around it. Selects draw their own chevron. The project filter is a select whose first option is **All projects**; archived projects are listed with "· archived".
 
 ### List grammar
 Every resource list, the Session log and the project list share one grammar:
@@ -352,11 +351,11 @@ Every resource list, the Session log and the project list share one grammar:
 - **Creator column**: the last column before the actions, headed "Creator" with a help tip. It shows the creating key's name (its prefix when unnamed) with a small "Revoked" flag for revoked keys, "Admin copy" in Graphite for an asset Core records as an administrator copy, "Unknown" in Graphite when Core has no record, and "—" while loading or when the lookup failed.
 - **RowActions**: text actions right-aligned at the end of the row, 16px apart, ending with Delete (red on hover). A row click opens the detail page; action clicks do not.
 - **Partial failure**: when some projects fail to load, one red line names them above the table; the other projects still show.
-- **Empty state**: a solid card (Paper, card ring, 12px, 36px 24px padding) with an optional outline icon in a 32px Margin Gray tile, a 13.5px/500 title, an optional one-line description and an optional action. "No matches" offers Clear search.
+- **Empty state**: an unframed, centered block with an optional 24px outline icon, a clear title, a visible short explanation and a relevant action. First-use states explain how data arrives; filtered states offer Clear search; failed reads retain their error and retry. Empty Overview activity links to Projects and keys for API onboarding.
 - **Load more**: an outline button centred under its table when more rows exist.
 
 ### Detail pages
-- The page header starts with a **back button** (30px ghost icon button, arrow-left, Graphite) before the title; the actions on the right start with Refresh, continue with outline actions such as Download, and end with Delete (red text on an outline button).
+- The page header starts with a **back button** (32px ghost icon button, arrow-left, Graphite) before the title; the actions on the right start with Refresh, continue with outline actions such as Download, and end with Delete (red text on an outline button).
 - Under the header, **resource-facts** lays out the facts in one card as an auto-fill grid of label/value pairs, each column at least 176px wide (a 12px/500 Pencil label over a 13px value, 14px by 24px gaps). It starts with the ID (with its copy button) and the Project and includes the Creator.
 - Sections follow: usage figures in a KPI strip, then tables in cards.
 - A Session's **History** header holds an outline "Jump to the failed Turn" (with the count when several failed) before the view switch while any Turn failed; it shows the conversation (the Turn table when there are no Items), scrolls the page body to the next failed Turn and focuses it.
@@ -364,7 +363,7 @@ Every resource list, the Session log and the project list share one grammar:
 - A self-hosted Session's **Executor credentials** section ends with **Connect a host**: a Linux/macOS or PowerShell selector, the one copyable command Core generated for that platform, and a link to the native installation guide. The console shows Core's command as it is and never builds one. The command installs the daemon and its Harnesses, starts it and checks its connection; its authorization expires after 30 minutes. Requirements and reconnection details belong in the title help. Reconnection after credential rotation requires `stop`, replacement of the configured credential file, then `start`; disconnection does not imply process exit. Connection status comes only from Core. When Core has no command, a note replaces it; an archived project shows a note instead.
 
 ### Dialogs
-Dialogs are 448px Paper cards (960px when wide) with 14px corners, a 52px header and a 56px Margin Gray footer separated by Hairlines, and the overlay shadow. They cannot be closed while a request runs.
+Dialogs are 448px Paper cards (960px when wide) with 8px corners, a 52px header and a 56px Margin Gray footer separated by Hairlines, and the overlay shadow. They cannot be closed while a request runs.
 - **ConfirmDialog**: the one grammar for destructive actions. The body states what will be deleted and its consequences; the footer holds Cancel (outline) and the confirm button (danger), whose label changes while busy. Core's reason for a rejection, or an uncertain-outcome warning, appears in red inside the dialog. The Skill page's delete dialogs follow the same grammar; deleting a whole Skill also requires typing its name. Archiving a project says in bold that it can't be undone, then how many active keys it revokes (the project read's count, or more when its loaded key list shows more) and that assets and accepted work stay; with active keys it too requires typing the project's name, shown in mono with its inner spaces kept (surrounding spaces are forgiven, Unicode compared in NFC). While the project list is read again Archive waits; if that read failed, a red line says the count may be out of date and Archive stays disabled.
 - **Key dialogs**: name fields carry their rules in a help tip and their problem in red underneath. The issued key appears in a read-only field with a copy button, under a notice that it is shown once; only "I've saved this key" dismisses it. Closing the dialog moves the key into a pending notice card on the page.
 - **Executor credential dialog** (640px): the shown-once notice, then a prompt to save the JSON privately before Done. Download credential file is primary; Copy credential is secondary. Installation commands are not repeated here. Done forgets the credential; closing preserves it in the pending card. The native installer reads the unchanged JSON file: its absolute path is entered during interactive installation or passed with `--credential-file`; tokens never enter command arguments.
@@ -375,7 +374,7 @@ Dialogs are 448px Paper cards (960px when wide) with 14px corners, a 52px header
 - **How to call**: wherever a new key is shown, a card under it gives three copyable samples, each a Margin Gray block with a Hairline and its label and copy button in a header row: a Shell block exporting `OPENAI_BASE_URL` (the installation's API base URL) and `OPENAI_API_KEY` (the new key) together, then curl and Python (with the pinned SDK), each listing the project's Agents and creating a Session with a first message (`environment`, an inline `agent` with `model: "<model>"`, and `input`). A copy the clipboard refuses selects the sample and says so in red underneath. One Graphite line says to put a model the model provider serves in place of `<model>`, and that running an Agent needs a model provider: in each request, saved on the Agent, or the deployment default. An active project's page shows the same samples as a section without any key: the Shell block exports a quoted placeholder, and a Graphite line above the samples says to use a key issued for this project, shown only once at issuance. When the public address is loopback, a note above the samples says the API is reachable only on the Core machine; without a public address only a note to set one shows. Before the installation is read, a skeleton holds the first sample's place.
 
 ### Navigation
-Sidebar groups Monitor, Resources and Platform with 12px Pencil group labels; items are 32px rows with a 15px outline icon and Sidebar Ink text. Hover takes the Pressed gray; the active item sits on a white chip (the page panel's surface, ringed) with Ledger Ink at 500, and the chip glides to the next item on navigation. The Platform group sits below a hairline. A secondary page (one Session) highlights its parent. The footer holds Show Getting started, then sign-out and the language/theme menu. A detail page's back arrow returns to the page it was opened from (a Skill opened from a template goes back to the template); opened directly, it goes to its list. The arrow is labelled plainly "Back".
+Sidebar groups Monitor, Resources and Platform with 12px Pencil group labels; items are 36px rows with an 18px outline icon and primary text. Hover takes the Pressed gray; the active item has a neutral background and an indigo edge. Compact icon-rail rows are 40px tall. The Platform group sits below a hairline. A secondary page (one Session) highlights its parent. The footer holds Show Getting started, then sign-out and the language/theme menu. A detail page's back arrow returns to the page it was opened from (a Skill opened from a template goes back to the template); opened directly, it goes to its list. The arrow is labelled plainly "Back".
 
 ### KPI strip and metric tiles
 A KPI strip is one card of equal cells separated by inset rules. Each cell: a 12.5px Graphite label with an optional help tip, then the figure at 20px/500 with any unit or limit small beside it, optionally led by an 8px tone dot. Overview uses four separate metric tiles instead: a 13px label with a help tip, the same 20px figure (the service status as a dot and a word), and one 12.5px line of context. Figures ellipsize rather than wrap. Live figures on monitor pages roll their digits to a new value on refresh (NumberFlow) instead of swapping.
@@ -442,7 +441,7 @@ Motion reports state and never makes anyone wait: the navigation chip and segmen
 ## Do's and Don'ts
 
 ### Do:
-- **Do** put every explanation of a figure, column, section or page behind a circled "?" help tip; report errors in a dialog or a toast; keep warnings and safety notices (deletion consequences, a key shown once) visible.
+- **Do** keep next steps visible and put supplementary definitions behind a circled "?" help tip; report errors in a dialog or a toast; keep warnings and safety notices (deletion consequences, a key shown once) visible.
 - **Do** start every project-scoped toolbar with the project filter, then search, with the count on the right.
 - **Do** end every resource table with the Creator column and then the row actions.
 - **Do** confirm every deletion in ConfirmDialog.
@@ -455,7 +454,7 @@ Motion reports state and never makes anyone wait: the navigation chip and segmen
 - **Do** build every page from PageHeader, PageBody and Section.
 
 ### Don't:
-- **Don't** add lines of small explanatory print under headings, KPIs, fields or charts.
+- **Don't** hide instructions needed to complete a task in a help tip.
 - **Don't** colour healthy meters, bars or states; colour is for problems and data.
 - **Don't** colour multi-series data with the indigo accent.
 - **Don't** nest cards inside cards or draw a dashed empty state.
@@ -465,3 +464,9 @@ Motion reports state and never makes anyone wait: the navigation chip and segmen
 - **Don't** show full IDs in list columns; show the compact ID with its copy button.
 - **Don't** add uppercase letter-spaced micro-labels or eyebrow lines above headings; a section is named by its title alone.
 - **Don't** mix synonyms in zh-CN copy (for example alternating 沙盒 with 沙箱, or API 密钥 with API key).
+
+## Navigation icons and first use
+
+Use Lucide throughout. Navigation icons are 18px with a 1.75px stroke; shared tool icons use the same stroke at their existing compact sizes. Default navigation icons use secondary ink, selected icons use primary ink. The selected row has a neutral background and a narrow indigo marker.
+
+Getting started emphasizes the first confirmed incomplete step with the primary button while leaving every step independently available. Only authoritative, successful zero-Session reads replace the activity chart with first-use guidance. Missing and failed reads retain their existing uncertainty and recovery controls.
diff --git a/apps/web/PRODUCT.md b/apps/web/PRODUCT.md
index c9de6dcd6..2aa72c28c 100644
--- a/apps/web/PRODUCT.md
+++ b/apps/web/PRODUCT.md
@@ -29,7 +29,7 @@ The console runs beside the administrator's own Core, with execution, files and
 
 ## Information Architecture
 
-- **Monitor**: Overview (service status, running Sessions, sandbox slots, Sessions needing attention, 24-hour Session activity, the topology of Core and its nodes with a popover glance at each, the attention table, usage by project), Core metrics (the Core process's CPU and memory, execution slots and the Turn queue, connected daemons, the database and background jobs), Agent metrics (requests, errors, duration, tokens, models, tools, Agents and API keys for 1 h / 6 h / 24 h / 7 d), Sandbox metrics (node capacity and hosted Runtimes across projects; a node or a sandbox opens in a dialog with its figures and CPU and memory charts), Session log (every Session, read-only, with a failed Session's reason under its status, opening one Session's history, which jumps to its failed Turns; a self-hosted Session's page also has its environment's executor credentials). Agent metrics' By Agent table opens an Agent's page and, from its failed Turns, its Sessions in the Session log.
+- **Monitor**: Overview (service status, running Sessions, sandbox slots, Sessions needing attention, 24-hour Session activity, a compact inventory of Core and up to four nodes, prioritizing offline and degraded nodes when the list is full, with a popover glance at each, the attention table, usage by project), Core metrics (the Core process's CPU and memory, execution slots and the Turn queue, connected daemons, the database and background jobs), Agent metrics (requests, errors, duration, tokens, models, tools, Agents and API keys for 1 h / 6 h / 24 h / 7 d), Sandbox metrics (node capacity and hosted Runtimes across projects; a node or a sandbox opens in a dialog with its figures and CPU and memory charts), Session log (every Session, read-only, with a failed Session's reason under its status, opening one Session's history, which jumps to its failed Turns; a self-hosted Session's page also has its environment's executor credentials). Agent metrics' By Agent table opens an Agent's page and, from its failed Turns, its Sessions in the Session log.
 - **Resources**: Agents, Environment templates, Skills, Files, Vaults. Each list shows one project or all projects, with a Project column when all are shown and a Creator column naming the creating key. Detail pages show the resource's facts and offer Delete.
 - **Platform**: Projects and keys (projects, their assets and usage, named keys, write history), Nodes (the node list, capacity, host figures, allocations and individual node operations). Add node asks for limits before issuing its one-time command; installers use Core's public URL and require supported node artifacts. Removal offers the host's uninstall command. System owns installation facts, the Domain and HTTPS secondary page, each harness's default model configuration, startup settings, and a link to the Sandbox configuration secondary page. That page owns setup, resource edits, rollout details and reset. Setup selects a backend, size and Runtime, then asks for a deliberate save; own-machine setup continues to Add node.
 - A node whose provider is not ready names the reason (Docker unreachable, no Docker limits, missing Runtime image, no KVM, missing microsandbox components, a host too small) and its fix in the help tip beside its status, wherever that status shows.
@@ -67,7 +67,7 @@ The console runs beside the administrator's own Core, with execution, files and
 ## Brand Commitments
 
 - Product name: OpenAgentCore. OpenAgentCore mark assets in `apps/web/public/`.
-- Use the OpenAgentCore visual identity: neutral grays and a quiet indigo accent. The console uses Inter and Geist Mono on Beautiful UI's foundation tokens and structure; `DESIGN.md` records the system.
+- Use the OpenAgentCore visual identity: neutral grays and a quiet indigo accent. The console uses IBM Plex Sans and Geist Mono, Lucide icons, flat page surfaces and compact resource tables on shared foundation tokens; `DESIGN.md` records the system.
 
 ## Evidence on Hand
 
diff --git a/apps/web/e2e/overview-readiness.spec.ts b/apps/web/e2e/overview-readiness.spec.ts
index 93d304576..6e66bf91a 100644
--- a/apps/web/e2e/overview-readiness.spec.ts
+++ b/apps/web/e2e/overview-readiness.spec.ts
@@ -67,7 +67,9 @@ test("partial and failed refreshes retain rows with a durable caveat and recover
 
 test("successful empty reads preserve true zero counts and empty states", async ({ page, request }) => {
   await openConsole(page, request, "overview", { fresh: true });
-  await expect(page.locator(".overview-activity .ts-chart-plot").first()).toBeVisible();
+  await expect(page.locator(".overview-activity")).toContainText("Your first Session starts here");
+  await expect(page.locator(".overview-activity .ts-chart-plot")).toHaveCount(0);
+  await expect(page.locator(".getting-started .button.primary")).toHaveCount(1);
   await expect(page.getByRole("article").filter({ hasText: "Running Sessions" }).locator(".metric-tile-sub")).toHaveText("0 total, 0 idle");
   await expect(failed(page)).toHaveCount(0);
   await page.locator(".app-sidebar").getByRole("button", { name: "Session log", exact: true }).click();
diff --git a/apps/web/package.json b/apps/web/package.json
index 87c8dd23b..10e47110a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,11 +11,11 @@
     "test:acceptance": "playwright test"
   },
   "dependencies": {
-    "@oac/agents-client": "workspace:*",
     "@base-ui/react": "^1.8.0",
     "@fontsource-variable/geist-mono": "^5.3.0",
-    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
     "@number-flow/react": "^0.6.2",
+    "@oac/agents-client": "workspace:*",
     "@tanstack/react-query": "^5.103.2",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
@@ -31,7 +31,9 @@
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.63.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^6.0.4",
@@ -39,8 +41,6 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^5.8.3",
     "vite": "^8.1.4",
-    "vitest": "^4.1.9",
-    "@types/node": "^26.1.0",
-    "@playwright/test": "^1.63.0"
+    "vitest": "^4.1.9"
   }
 }
diff --git a/apps/web/pnpm-lock.yaml b/apps/web/pnpm-lock.yaml
index 9ad1c8fd2..934f1cf02 100644
--- a/apps/web/pnpm-lock.yaml
+++ b/apps/web/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
       '@fontsource-variable/geist-mono':
         specifier: ^5.3.0
         version: 5.3.0
-      '@fontsource-variable/inter':
+      '@fontsource/ibm-plex-sans':
         specifier: ^5.3.0
         version: 5.3.0
       '@number-flow/react':
@@ -304,8 +304,8 @@ packages:
   '@fontsource-variable/geist-mono@5.3.0':
     resolution: {integrity: sha512-vBbuwDEo9AkrqADMXOrlAR3DFcJi4/JxeuU43FoiQERnNwsfXNnvxvReZG02cQKmyk4DZkZdBZX3oTDvy2zBAw==}
 
-  '@fontsource-variable/inter@5.3.0':
-    resolution: {integrity: sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==}
+  '@fontsource/ibm-plex-sans@5.3.0':
+    resolution: {integrity: sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -1536,7 +1536,7 @@ snapshots:
 
   '@fontsource-variable/geist-mono@5.3.0': {}
 
-  '@fontsource-variable/inter@5.3.0': {}
+  '@fontsource/ibm-plex-sans@5.3.0': {}
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
@@ -1872,6 +1872,7 @@ snapshots:
       '@esbuild/win32-arm64': 0.28.2
       '@esbuild/win32-ia32': 0.28.2
       '@esbuild/win32-x64': 0.28.2
+    optional: true
 
   escape-string-regexp@5.0.0: {}
 
diff --git a/apps/web/src/app/beautifui/foundation.css b/apps/web/src/app/beautifui/foundation.css
index 07f81f53c..eb9a3b892 100644
--- a/apps/web/src/app/beautifui/foundation.css
+++ b/apps/web/src/app/beautifui/foundation.css
@@ -25,21 +25,21 @@
 
 :root {
   /* surfaces — cool, blue-tinted neutrals */
-  --page: oklch(0.985 0.001 286.376);
+  --page: #ffffff;
   --canvas: oklch(0.961 0.002 247.84);
   --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
+  --inset: #fafafa;
   --hover: oklch(0.97 0.002 247.839);
   --hover-2: oklch(0.933 0.003 247.86);
 
   /* ink ramp */
   --ink: oklch(0.247 0.006 258.361);
   --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
+  --ink-3: oklch(0.55 0.009 264.505);
 
   /* borders — solid and crisp, not alpha */
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
+  --line: oklch(0.90 0.003 264.542);
+  --line-strong: oklch(0.85 0.005 258.326);
   --line-soft: oklch(0.966 0.002 264.542);
   --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
   --field: oklch(0.961 0.001 286.375);
@@ -77,20 +77,20 @@
 }
 
 .dark {
-  --page: oklch(0.209 0.004 264.477);
+  --page: #101215;
   --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
+  --surface: #17191e;
+  --inset: #14161a;
   --hover: oklch(0.289 0.006 271.22);
   --hover-2: oklch(0.318 0.007 274.747);
 
   --ink: oklch(0.964 0.002 247.839);
   --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
+  --ink-3: oklch(0.69 0.01 264.484);
 
-  --line: oklch(0.308 0.006 258.354);
+  --line: #2a2d33;
   --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
+  --line-soft: #22262c;
   --field: oklch(0.293 0.006 271.223);
   --stripe: oklch(1 0 0 / 0.055);
   --stripe-bg: oklch(0.226 0.004 264.485);
@@ -109,7 +109,7 @@
   --tooltip-bg: oklch(0.182 0.004 264.459);
   --tooltip-fg: oklch(0.964 0.002 247.839);
   --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
+  --tooltip-border: #2a2d33;
 
   --shadow-hairline: 0 0 0 1px var(--line);
   /* Elevation rings go to a subtle *light* hairline in dark mode: the ring
@@ -160,14 +160,10 @@
   --shadow-overlay: var(--shadow-overlay);
 
   /* type */
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-console);
   --font-mono: var(--font-mono-face), ui-monospace, "SF Mono", monospace;
 
-  /* radii — chips 6, controls 8, cards 10, windows 14, pills 999 */
-  --radius-chip: 6px;
-  --radius-control: 8px;
-  --radius-card: 10px;
-  --radius-window: 14px;
+  /* Radii are supplied by the console component tokens in system.css. */
 
   /* easing — strong curves; built-ins are too weak */
   --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
@@ -185,7 +181,6 @@ html {
 
 body {
   color: var(--ink);
-  font-feature-settings: "cv11", "ss01";
   font-size: 14px;
   letter-spacing: -0.01em;
   line-height: 1.5;
diff --git a/apps/web/src/components/ConsoleSidebar.tsx b/apps/web/src/components/ConsoleSidebar.tsx
index 35f5614ce..8141f8063 100644
--- a/apps/web/src/components/ConsoleSidebar.tsx
+++ b/apps/web/src/components/ConsoleSidebar.tsx
@@ -60,7 +60,6 @@ export function ConsoleSidebar({
           <img className="brand-mark" src="/oac-mark.svg" width="18" height="18" alt="" aria-hidden="true" />
         </span>
         <span className="brand-name">OpenAgentCore</span>
-        <span className="brand-product">{t("console")}</span>
       </div>
 
       <nav className="main-nav console-nav" aria-label={t("mainNavigation")}>
@@ -85,7 +84,7 @@ export function ConsoleSidebar({
                   onFocus={() => onIntent?.(view)}
                 >
                   {active === view ? <m.span className="nav-active-chip" layoutId="console-nav-active" aria-hidden="true" /> : null}
-                  <Icon size={15} strokeWidth={1.5} aria-hidden="true" />
+                  <Icon size={18} strokeWidth={1.75} aria-hidden="true" />
                   <span>{label}</span>
                 </button>
               );
@@ -97,7 +96,7 @@ export function ConsoleSidebar({
       <div className="sidebar-footer">
         <div className="main-nav sidebar-help">
           <button type="button" aria-label={t("showGettingStarted")} title={t("showGettingStarted")} onClick={onGettingStarted}>
-            <ListChecks size={15} strokeWidth={1.5} aria-hidden="true" />
+            <ListChecks size={18} strokeWidth={1.75} aria-hidden="true" />
             <span>{t("showGettingStarted")}</span>
           </button>
         </div>
diff --git a/apps/web/src/components/console-ui.tsx b/apps/web/src/components/console-ui.tsx
index 53c530ac6..f821148f1 100644
--- a/apps/web/src/components/console-ui.tsx
+++ b/apps/web/src/components/console-ui.tsx
@@ -65,7 +65,7 @@ export function HelpTip({ children, label, id: fixedId }: { children: ReactNode;
         onClick={() => { if (position && pinned) hide(); else { show(); setPinned(true); } }}
         onKeyDown={(event) => { if (event.key === "Escape") hide(); }}
       >
-        <CircleHelp size={13} strokeWidth={1.7} aria-hidden="true" />
+        <CircleHelp size={13} strokeWidth={1.75} aria-hidden="true" />
       </button>
       {/* The explanation stays in the document for assistive technology; the popover is its visual copy. */}
       <span id={id} className="visually-hidden">{children}</span>
@@ -87,19 +87,24 @@ export function HelpTip({ children, label, id: fixedId }: { children: ReactNode;
 export function PageHeader({
   title,
   help,
+  description,
   actions,
   headingId,
 }: {
   title: ReactNode;
   help?: ReactNode;
+  description?: ReactNode;
   actions?: ReactNode;
   headingId?: string;
 }) {
   return (
     <header className="page-header console-page-header">
-      <div className="console-page-heading">
-        <h1 id={headingId}>{title}</h1>
-        {help ? <HelpTip>{help}</HelpTip> : null}
+      <div className="console-page-intro">
+        <div className="console-page-heading">
+          <h1 id={headingId}>{title}</h1>
+          {help ? <HelpTip>{help}</HelpTip> : null}
+        </div>
+        {description ? <p className="console-page-description">{description}</p> : null}
       </div>
       {actions ? <div className="page-actions">{actions}</div> : null}
     </header>
@@ -132,7 +137,7 @@ export function RefreshButton({
       aria-label={name}
       title={!refreshing && updatedAt ? `${name}\n${t("actions.updatedAt", { time: updatedAt })}` : name}
     >
-      <RefreshCw className={refreshing ? "refresh-spinning" : undefined} size={16} strokeWidth={1.6} aria-hidden="true" />
+      <RefreshCw className={refreshing ? "refresh-spinning" : undefined} size={16} strokeWidth={1.75} aria-hidden="true" />
     </button>
   );
 }
@@ -279,7 +284,7 @@ export function EmptyState({
 }) {
   return (
     <div className="console-empty">
-      {Icon ? <Icon size={20} strokeWidth={1.5} aria-hidden="true" /> : null}
+      {Icon ? <Icon size={24} strokeWidth={1.75} aria-hidden="true" /> : null}
       <p className="console-empty-title">{title}{hint ? <HelpTip>{hint}</HelpTip> : null}</p>
       {description ? <p className="console-empty-description">{description}</p> : null}
       {action ? <div className="console-empty-action">{action}</div> : null}
diff --git a/apps/web/src/components/list-ui.tsx b/apps/web/src/components/list-ui.tsx
index 684c79c46..2a3d0a4a6 100644
--- a/apps/web/src/components/list-ui.tsx
+++ b/apps/web/src/components/list-ui.tsx
@@ -34,7 +34,7 @@ export function SearchField({
   const { t } = useTranslation();
   return (
     <label className="search-control list-search">
-      <Search size={14} strokeWidth={1.7} aria-hidden="true" />
+      <Search size={14} strokeWidth={1.75} aria-hidden="true" />
       <input type="search" value={value} placeholder={placeholder} aria-label={label ?? t("list.search")} onChange={(event) => onChange(event.target.value)} />
     </label>
   );
@@ -72,7 +72,7 @@ export function CopyIdButton({ id, label }: { id: string; label?: string }) {
   const name = copied ? t("actions.copied") : label ?? t("actions.copyId");
   return (
     <button type="button" className="icon-button ghost copyable-id-button" aria-label={name} title={name} onClick={copy}>
-      {copied ? <Check size={13} strokeWidth={1.7} aria-hidden="true" /> : <Copy size={13} strokeWidth={1.7} aria-hidden="true" />}
+      {copied ? <Check size={13} strokeWidth={1.75} aria-hidden="true" /> : <Copy size={13} strokeWidth={1.75} aria-hidden="true" />}
     </button>
   );
 }
diff --git a/apps/web/src/features/first-run/ConsoleAccess.tsx b/apps/web/src/features/first-run/ConsoleAccess.tsx
index b2a4a75bd..c8432e57c 100644
--- a/apps/web/src/features/first-run/ConsoleAccess.tsx
+++ b/apps/web/src/features/first-run/ConsoleAccess.tsx
@@ -38,7 +38,7 @@ export function ConsoleAccountMenu() {
   const toast = useToast();
   if (!account) return null;
   return <div className="console-account-menu">
-    <button type="button" disabled={busy} onClick={async () => {
+    <button type="button" aria-label={t(busy ? "Signing out…" : "Sign out")} title={t("Sign out")} disabled={busy} onClick={async () => {
       setBusy(true);
       try { await account.logout(); } catch { setBusy(false); toast.show(t("Could not sign out. Try again."), { tone: "error" }); }
     }}><LogOut size={14} aria-hidden="true" /><span>{t(busy ? "Signing out…" : "Sign out")}</span></button>
diff --git a/apps/web/src/features/overview/FleetTopology.render.test.tsx b/apps/web/src/features/overview/FleetOverview.render.test.tsx
similarity index 89%
rename from apps/web/src/features/overview/FleetTopology.render.test.tsx
rename to apps/web/src/features/overview/FleetOverview.render.test.tsx
index fc6c786cf..2b363ee88 100644
--- a/apps/web/src/features/overview/FleetTopology.render.test.tsx
+++ b/apps/web/src/features/overview/FleetOverview.render.test.tsx
@@ -1,14 +1,14 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
-import { FleetTopology } from "./FleetTopology";
+import { FleetOverview } from "./FleetOverview";
 import { node } from "./test-fixtures";
 
-describe("fleet topology popovers", () => {
+describe("fleet overview popovers", () => {
   it("opens Core and each node in a popover rather than navigating", () => {
     const noop = () => undefined;
     const html = renderToStaticMarkup(
-      <FleetTopology
+      <FleetOverview
         nodes={[node("a", { name: "worker-a" }), node("b", { online: false })]}
         coreLabel="Running"
         coreTone="ok"
diff --git a/apps/web/src/features/overview/FleetOverview.test.ts b/apps/web/src/features/overview/FleetOverview.test.ts
new file mode 100644
index 000000000..cbbdf177e
--- /dev/null
+++ b/apps/web/src/features/overview/FleetOverview.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+
+import { FLEET_LIMIT, overviewNodes } from "./FleetOverview";
+import { node } from "./test-fixtures";
+
+describe("fleet overview", () => {
+  it("shows every node in order when they fit", () => {
+    const nodes = [node("a"), node("b", { online: false }), node("c")];
+    expect(overviewNodes(nodes).map((entry) => entry.id)).toEqual(["a", "b", "c"]);
+  });
+
+  it("keeps offline and degraded nodes when not every node fits", () => {
+    const nodes = Array.from({ length: FLEET_LIMIT + 2 }, (_, index) => node(`n${index}`));
+    nodes.push(node("down", { online: false }), node("provider", { provider_ready: false }));
+    const shown = overviewNodes(nodes).map((entry) => entry.id);
+    expect(shown).toHaveLength(FLEET_LIMIT);
+    expect(shown.slice(0, 2)).toEqual(["down", "provider"]);
+    expect(shown.slice(2)).toEqual(["n0", "n1"]);
+  });
+});
diff --git a/apps/web/src/features/overview/FleetTopology.tsx b/apps/web/src/features/overview/FleetOverview.tsx
similarity index 70%
rename from apps/web/src/features/overview/FleetTopology.tsx
rename to apps/web/src/features/overview/FleetOverview.tsx
index 2fa3789a7..c4d0d47cf 100644
--- a/apps/web/src/features/overview/FleetTopology.tsx
+++ b/apps/web/src/features/overview/FleetOverview.tsx
@@ -1,6 +1,6 @@
 import type { SandboxNode } from "@oac/agents-client";
 import { useQuery } from "@tanstack/react-query";
-import { Cloud, Network } from "lucide-react";
+import { ChevronRight, Cloud, Network, Server } from "lucide-react";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -14,21 +14,19 @@ import { coreMetricsQuery } from "../metrics/metrics-queries";
 import { NodeRolloutStatus } from "../sandbox/NodeRolloutStatus";
 import { seconds } from "../sandbox/NodeList";
 
-/** Row pitch of the node columns, in pixels. */
-const ROW = 72;
-/** Nodes drawn around Core; the rest are counted and listed on the Nodes page. */
-export const TOPOLOGY_LIMIT = 8;
+/** Nodes shown in the overview; the rest are counted and listed on the Nodes page. */
+export const FLEET_LIMIT = 4;
 
 const healthTone: Record<NodeHealth, Tone> = { available: "ok", degraded: "warning", offline: "danger" };
 const healthRank: Record<NodeHealth, number> = { offline: 0, degraded: 1, available: 2 };
 
-/** The nodes to draw: all of them, or the unhealthy ones first when they do not fit. */
-export function topologyNodes(nodes: readonly SandboxNode[]): SandboxNode[] {
-  if (nodes.length <= TOPOLOGY_LIMIT) return [...nodes];
+/** The nodes to show: all of them, or the unhealthy ones first when they do not fit. */
+export function overviewNodes(nodes: readonly SandboxNode[]): SandboxNode[] {
+  if (nodes.length <= FLEET_LIMIT) return [...nodes];
   return nodes
     .map((node, index) => ({ node, index }))
     .sort((a, b) => healthRank[nodeHealth(a.node)] - healthRank[nodeHealth(b.node)] || a.index - b.index)
-    .slice(0, TOPOLOGY_LIMIT)
+    .slice(0, FLEET_LIMIT)
     .map(({ node }) => node);
 }
 
@@ -39,12 +37,8 @@ export interface CloudHost {
   template: string | null;
 }
 
-/**
- * Core in the middle, sandbox nodes left and right of it. Lines are solid and
- * animated for connected nodes and dashed for offline ones. Core and each node
- * open a popover with a glance at their state and the pages that go deeper.
- */
-export function FleetTopology({ nodes, cloud, coreLabel, coreTone, stale, onOpenNode, onOpenBackend, onOpenSandboxMetrics, onOpenCoreMetrics }: {
+/** A compact fleet inventory with on-demand operational details. */
+export function FleetOverview({ nodes, cloud, coreLabel, coreTone, stale, onOpenNode, onOpenBackend, onOpenSandboxMetrics, onOpenCoreMetrics }: {
   nodes: readonly SandboxNode[];
   /** An E2B deployment: Core links to E2B's cloud instead of to machines. */
   cloud?: CloudHost | null;
@@ -59,44 +53,15 @@ export function FleetTopology({ nodes, cloud, coreLabel, coreTone, stale, onOpen
 }) {
   const { t, i18n } = useTranslation("overview");
   const locale = i18n.resolvedLanguage;
-  const shown = cloud ? [] : topologyNodes(nodes);
-  const leftCount = Math.ceil(shown.length / 2);
-  const rightCount = shown.length - leftCount;
-  const height = Math.max(216, leftCount * ROW + 24);
-  const middle = height / 2;
-  const placed = shown.map((node, index) => {
-    const left = index % 2 === 0;
-    const count = left ? leftCount : rightCount;
-    const y = middle + (Math.floor(index / 2) - (count - 1) / 2) * ROW;
-    return { node, left, y, health: nodeHealth(node) };
-  });
+  const shown = cloud ? [] : overviewNodes(nodes);
   return (
-    <div className={stale ? "fleet-topology fleet-topology-stale" : "fleet-topology"} style={{ height }}>
-      <svg className="fleet-topology-lines" viewBox={`0 0 1000 ${height}`} preserveAspectRatio="none" aria-hidden="true">
-        {cloud ? (
-          <g className="fleet-link fleet-link-available">
-            <path d={`M 500 ${middle} L 700 ${middle}`} className="fleet-link-edge" />
-            <path d={`M 500 ${middle} L 700 ${middle}`} className="fleet-link-flow" />
-          </g>
-        ) : null}
-        {placed.map(({ node, left, y, health }) => {
-          const end = left ? 300 : 700;
-          const bend = left ? 380 : 620;
-          const path = `M 500 ${middle} C ${bend} ${middle}, ${bend} ${y}, ${end} ${y}`;
-          return (
-            <g key={node.id} className={`fleet-link fleet-link-${health}`}>
-              <path d={path} className="fleet-link-edge" />
-              {health !== "offline" ? <path d={path} className="fleet-link-flow" /> : null}
-            </g>
-          );
-        })}
-      </svg>
+    <div className="fleet-inventory">
       <ConsolePopover
         trigger={(
-          <button type="button" className="fleet-core" aria-label={`${t("fleet.core")}, ${coreLabel}`}>
-            <Network size={20} strokeWidth={1.4} aria-hidden="true" />
-            <strong>{t("fleet.core")}</strong>
-            <StatusDot tone={coreTone} label={coreLabel} />
+          <button type="button" className="fleet-row fleet-core-row" aria-label={`${t("fleet.core")}, ${coreLabel}`}>
+            <Network size={18} strokeWidth={1.75} aria-hidden="true" />
+            <span className="fleet-row-info"><strong>{t("fleet.core")}</strong><StatusDot tone={coreTone} label={coreLabel} /></span>
+            <ChevronRight size={14} aria-hidden="true" />
           </button>
         )}
         title={t("fleet.core")}
@@ -110,14 +75,12 @@ export function FleetTopology({ nodes, cloud, coreLabel, coreTone, stale, onOpen
           trigger={(
             <button
               type="button"
-              className="fleet-node fleet-node-right"
-              style={{ top: middle }}
+              className="fleet-row"
               aria-label={t("fleet.cloud.open", { running: formatInteger(cloud.running, locale) })}
             >
-              <strong className="fleet-node-name"><Cloud size={14} strokeWidth={1.5} aria-hidden="true" />{t("fleet.cloud.name")}</strong>
-              <span className="fleet-node-foot">
-                <StatusDot tone="ok" label={t("fleet.cloud.running", { count: cloud.running })} />
-              </span>
+              <Cloud size={18} strokeWidth={1.75} aria-hidden="true" />
+              <span className="fleet-row-info"><strong>{t("fleet.cloud.name")}</strong><StatusDot tone="ok" label={t("fleet.cloud.running", { count: cloud.running })} /></span>
+              <ChevronRight size={14} aria-hidden="true" />
             </button>
           )}
           title={t("fleet.cloud.name")}
@@ -133,26 +96,25 @@ export function FleetTopology({ nodes, cloud, coreLabel, coreTone, stale, onOpen
           </Facts>
         </ConsolePopover>
       ) : null}
-      {placed.map(({ node, left, y, health }) => {
+      {shown.map((node) => {
+        const health = nodeHealth(node);
         const name = node.name || node.id;
         const state = t(`nodeHealth.${health}`);
         const slots = `${formatInteger(node.active, locale)} / ${formatInteger(node.max_active, locale)}`;
         return (
           <ConsolePopover
             key={node.id}
-            side={left ? "right" : "left"}
+            side="left"
             trigger={(
               <button
                 type="button"
-                className={left ? "fleet-node fleet-node-left" : "fleet-node fleet-node-right"}
-                style={{ top: y }}
+                className="fleet-row fleet-node-row"
                 aria-label={t("fleet.open", { name, state, slots })}
               >
-                <strong className="fleet-node-name">{name}</strong>
-                <span className="fleet-node-foot">
-                  <StatusDot tone={healthTone[health]} label={state} />
-                  <span className="fleet-node-slots">{slots}</span>
-                </span>
+                <Server size={18} strokeWidth={1.75} aria-hidden="true" />
+                <span className="fleet-row-info"><strong>{name}</strong><StatusDot tone={healthTone[health]} label={state} /></span>
+                <span className="fleet-node-slots">{slots}</span>
+                <ChevronRight size={14} aria-hidden="true" />
               </button>
             )}
             title={name}
diff --git a/apps/web/src/features/overview/FleetTopology.test.ts b/apps/web/src/features/overview/FleetTopology.test.ts
deleted file mode 100644
index 1782980b4..000000000
--- a/apps/web/src/features/overview/FleetTopology.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { TOPOLOGY_LIMIT, topologyNodes } from "./FleetTopology";
-import { node } from "./test-fixtures";
-
-describe("fleet topology", () => {
-  it("draws every node in order when they fit", () => {
-    const nodes = [node("a"), node("b", { online: false }), node("c")];
-    expect(topologyNodes(nodes).map((entry) => entry.id)).toEqual(["a", "b", "c"]);
-  });
-
-  it("keeps offline and degraded nodes when not every node fits", () => {
-    const nodes = Array.from({ length: TOPOLOGY_LIMIT + 2 }, (_, index) => node(`n${index}`));
-    nodes.push(node("down", { online: false }), node("provider", { provider_ready: false }));
-    const shown = topologyNodes(nodes).map((entry) => entry.id);
-    expect(shown).toHaveLength(TOPOLOGY_LIMIT);
-    expect(shown.slice(0, 2)).toEqual(["down", "provider"]);
-    expect(shown.slice(2)).toEqual(["n0", "n1", "n2", "n3", "n4", "n5"]);
-  });
-});
diff --git a/apps/web/src/features/overview/GettingStarted.tsx b/apps/web/src/features/overview/GettingStarted.tsx
index ee01eaa85..0b8b9a53d 100644
--- a/apps/web/src/features/overview/GettingStarted.tsx
+++ b/apps/web/src/features/overview/GettingStarted.tsx
@@ -112,6 +112,7 @@ export function GettingStarted({ fleet, sessions, localOnly, sandboxReset, onRet
   if (view === "hidden") return null;
 
   const done = states.filter((state) => state === "done").length;
+  const nextStep = states.findIndex((state) => state === "todo") + 1;
   const sandbox = steps.sandboxes;
   const sandboxAction = sandboxReset === true
     ? { label: t("reset.view"), run: () => navigate("system", { id: "sandbox" }) }
@@ -149,16 +150,17 @@ export function GettingStarted({ fleet, sessions, localOnly, sandboxReset, onRet
         </div>
       </header>
       <ol className="getting-started-steps">
-        <Step index={1} state={sandbox.state} title={t("gettingStarted.sandboxes.title")} body={sandboxReset === true ? t("reset.body") : localOnly === "failed" ? t("gettingStarted.sandboxes.addressFailed") : localOnly ? t("gettingStarted.sandboxes.localOnly") : t(sandbox.cloud ? "gettingStarted.sandboxes.bodyCloud" : "gettingStarted.sandboxes.body")} action={sandboxAction} />
-        <Step index={2} state={steps.model} title={t("gettingStarted.model.title")} body={t("gettingStarted.model.body")} action={{ label: t("gettingStarted.model.open"), run: () => navigate("system", {}, "default-model") }} />
-        <Step index={3} state={steps.key.state} title={t("gettingStarted.key.title")} body={t("gettingStarted.key.body")} action={keyAction} />
-        <Step index={4} state={steps.session.state} title={t("gettingStarted.session.title")} body={t("gettingStarted.session.body")} action={sessionAction} />
+        <Step primary={nextStep === 1} index={1} state={sandbox.state} title={t("gettingStarted.sandboxes.title")} body={sandboxReset === true ? t("reset.body") : localOnly === "failed" ? t("gettingStarted.sandboxes.addressFailed") : localOnly ? t("gettingStarted.sandboxes.localOnly") : t(sandbox.cloud ? "gettingStarted.sandboxes.bodyCloud" : "gettingStarted.sandboxes.body")} action={sandboxAction} />
+        <Step primary={nextStep === 2} index={2} state={steps.model} title={t("gettingStarted.model.title")} body={t("gettingStarted.model.body")} action={{ label: t("gettingStarted.model.open"), run: () => navigate("system", {}, "default-model") }} />
+        <Step primary={nextStep === 3} index={3} state={steps.key.state} title={t("gettingStarted.key.title")} body={t("gettingStarted.key.body")} action={keyAction} />
+        <Step primary={nextStep === 4} index={4} state={steps.session.state} title={t("gettingStarted.session.title")} body={t("gettingStarted.session.body")} action={sessionAction} />
       </ol>
     </section>
   );
 }
 
-function Step({ index, state, title, body, action }: {
+function Step({ primary, index, state, title, body, action }: {
+  primary: boolean;
   index: number;
   state: StepState;
   title: string;
@@ -178,7 +180,7 @@ function Step({ index, state, title, body, action }: {
       </div>
       <StatusDot tone={done ? "ok" : state === null ? "pending" : "neutral"} label={t(`gettingStarted.state.${state ?? "checking"}`)} />
       <div className="getting-started-action">
-        {done ? null : <button className="button outline" type="button" onClick={action.run}>{action.label}</button>}
+        {done ? null : <button className={primary ? "button primary" : "button outline"} type="button" onClick={action.run}>{action.label}</button>}
       </div>
     </li>
   );
diff --git a/apps/web/src/features/overview/OverviewPage.tsx b/apps/web/src/features/overview/OverviewPage.tsx
index 746a014bc..4b459679c 100644
--- a/apps/web/src/features/overview/OverviewPage.tsx
+++ b/apps/web/src/features/overview/OverviewPage.tsx
@@ -1,6 +1,6 @@
 import type { AgentSession } from "@oac/agents-client";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useMemo, type CSSProperties, type ReactNode } from "react";
+import { useCallback, useMemo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 
@@ -30,7 +30,7 @@ import { FleetReadNotice, fleetObservationStale } from "../fleet/FleetReadNotice
 import { SandboxResetNotice } from "../fleet/SandboxResetNotice";
 import { fleetSnapshot, useSandboxFleet, type FleetSnapshot, type FleetState } from "../fleet/use-sandbox-fleet";
 import { type InProject } from "../metrics/project-sessions";
-import { FleetTopology, TOPOLOGY_LIMIT, type CloudHost } from "./FleetTopology";
+import { FleetOverview, FLEET_LIMIT, type CloudHost } from "./FleetOverview";
 import { SessionFailure } from "../sessions/session-diagnostics";
 import { useWaitingFor } from "../sessions/SessionStatus";
 import { GettingStarted } from "./GettingStarted";
@@ -170,7 +170,7 @@ export function OverviewPage() {
       <PageHeader
         headingId="overview-heading"
         title={t("title")}
-        help={t("description")}
+        description={t("description")}
         actions={<RefreshButton refreshing={loading} updatedAt={updatedAt ? formatClock(updatedAt, locale) : null} onClick={refreshAll} />}
       />
       <PageBody>
@@ -182,14 +182,12 @@ export function OverviewPage() {
         {(readFailed || summaryError !== null) && data !== null ? <ReadFailure onRetry={refreshAll} partial /> : null}
         <div className="overview-tiles" aria-label={t("kpi.label")}>
           <MetricTile
-            index={0}
             label={t("kpi.service")}
             help={t("kpi.serviceHelp")}
             value={<><span className={`metric-tile-dot metric-tile-dot-${serviceTone[health]}`} aria-hidden="true" />{t(`health.${health}`)}</>}
             sub={serviceReason}
           />
           <MetricTile
-            index={1}
             label={t("kpi.running")}
             help={t("kpi.runningHelp")}
             value={totals ? <LiveNumber value={totals.sessions.in_progress} /> : MISSING}
@@ -197,7 +195,6 @@ export function OverviewPage() {
           />
           {cloud ? (
             <MetricTile
-              index={2}
               label={t("kpi.cloudRunning")}
               help={t("kpi.cloudRunningHelp")}
               value={<LiveNumber value={cloud.running} />}
@@ -205,7 +202,6 @@ export function OverviewPage() {
             />
           ) : (
             <MetricTile
-              index={2}
               label={t("kpi.slots")}
               help={t("kpi.slotsHelp")}
               value={capacity ? <><LiveNumber value={capacity.active} /><span className="kpi-unit">/ {formatInteger(capacity.maxActive, locale)}</span></> : MISSING}
@@ -217,7 +213,6 @@ export function OverviewPage() {
             />
           )}
           <MetricTile
-            index={3}
             label={t("kpi.attention")}
             help={t("attention.subtitle")}
             value={<LiveNumber value={attentionTotal} />}
@@ -245,18 +240,20 @@ export function OverviewPage() {
               ) : null}
             </header>
             {sessionReadsFailed ? <ReadFailure onRetry={refreshAll} partial={activity !== null} /> : null}
-            {activity ? (
+            {activity && sessionCount === 0 && !sessionReadsFailed && summaryError === null ? (
+              <EmptyState title={t("activity.emptyTitle")} description={t("activity.emptyDescription")} action={<button className="button outline" type="button" onClick={() => navigate("projects")}>{t("gettingStarted.session.open")}</button>} />
+            ) : activity ? (
               <div className="overview-card-body">
                 <TimeSeriesChart
                   label={t("activity.title")}
                   kind="columns"
                   buckets={activity.buckets}
                   bucketSeconds={activity.bucketSeconds}
-                  series={[{ id: "created", label: t("activity.created"), color: "color-mix(in srgb, var(--data) 62%, var(--surface))", values: activity.created, total: formatInteger(activity.created.reduce((sum, value) => sum + value, 0), locale) }]}
+                  series={[{ id: "created", label: t("activity.created"), color: "var(--data)", values: activity.created, total: formatInteger(activity.created.reduce((sum, value) => sum + value, 0), locale) }]}
                   tooltipOnly={[{ id: "failed", label: t("activity.failed"), color: "var(--danger)", values: activity.failed }]}
                   formatValue={(value) => formatInteger(value, locale)}
                   counts
-                  height={196}
+                  height={204}
                 />
               </div>
             ) : sessionReadsFailed ? null : <p className="detail-note overview-card-note" role="status">{t("activity.loading")}</p>}
@@ -300,9 +297,9 @@ export function OverviewPage() {
   );
 }
 
-function MetricTile({ index, label, help, value, sub }: { index: number; label: string; help?: ReactNode; value: ReactNode; sub?: ReactNode }) {
+function MetricTile({ label, help, value, sub }: { label: string; help?: ReactNode; value: ReactNode; sub?: ReactNode }) {
   return (
-    <article className="overview-card metric-tile" style={{ "--i": index } as CSSProperties}>
+    <article className="metric-tile">
       <header className="console-section-title"><span className="metric-tile-label">{label}</span>{help ? <HelpTip label={label}>{help}</HelpTip> : null}</header>
       <div className="metric-tile-value kpi-value">{value}</div>
       {sub ? <p className="metric-tile-sub">{sub}</p> : null}
@@ -321,14 +318,14 @@ function cloudHost(fleet: FleetSnapshot | null): CloudHost | null {
   return { running: fleet.deployment.resources.allocations, pending: fleet.deployment.resources.pending, template: fleet.deployment.configuration?.template || null };
 }
 
-/** Core and its sandbox nodes (or E2B's cloud) as a topology; each opens a popover with the way onward. */
+/** Core and its sandbox nodes (or E2B's cloud) as an inventory; each opens a popover with the way onward. */
 function FleetCard({ fleetState, core, localOnly }: { fleetState: FleetState; core: CoreStatus; localOnly: boolean }) {
   const { t } = useTranslation("overview");
   const { navigate } = useConsoleNavigation();
   const fleet = fleetSnapshot(fleetState);
   const cloud = cloudHost(fleet);
   const hosts = cloud ? [] : fleet?.nodes ?? [];
-  const hidden = Math.max(0, hosts.length - TOPOLOGY_LIMIT);
+  const hidden = Math.max(0, hosts.length - FLEET_LIMIT);
   useFailureToast(fleetState.status === "ready" && Boolean(fleetState.error), t("fleet.stale"), "overview-fleet-refresh");
   return (
     <section className="overview-card overview-fleet" aria-labelledby="fleet-heading">
@@ -346,7 +343,7 @@ function FleetCard({ fleetState, core, localOnly }: { fleetState: FleetState; co
         ) : null}
       </header>
       <div className="overview-card-body fleet-body">
-        <FleetTopology
+        <FleetOverview
           nodes={hosts}
           cloud={cloud}
           onOpenBackend={() => navigate("system", { id: "sandbox" })}
@@ -357,7 +354,7 @@ function FleetCard({ fleetState, core, localOnly }: { fleetState: FleetState; co
           onOpenSandboxMetrics={() => navigate("sandbox-metrics")}
           onOpenCoreMetrics={() => navigate("core-metrics")}
         />
-        {hidden ? <button className="text-action fleet-more" type="button" onClick={() => navigate("nodes")}>{t("fleet.more", { n: hidden })}</button> : null}
+        {hidden ? <button className="text-action fleet-more" type="button" onClick={() => navigate("nodes")}>{t("fleet.more", { count: hidden })}</button> : null}
         <FleetFooter state={fleetState} empty={fleet && !cloud ? hosts.length === 0 : false} unset={fleet ? !fleet.deployment.provider : false} />
       </div>
     </section>
@@ -486,7 +483,6 @@ function AttentionTable({ sessions, expected, unread, truncated, now, onOpen }:
             <th scope="col">{t("attention.session")}</th>
             <th scope="col">{tCommon("project.column")}</th>
             <th scope="col">{t("attention.status")}</th>
-            <th scope="col">{t("attention.reason")}</th>
             <th scope="col" className="numeric">{t("attention.lastActive")}</th>
           </tr>
         </thead>
@@ -500,8 +496,10 @@ function AttentionTable({ sessions, expected, unread, truncated, now, onOpen }:
                   <NameCell name={sessionTitle(session)} id={session.id} fallback={t("attention.untitled")} onOpen={() => onOpen(entry)} />
                 </th>
                 <td><ProjectName project={entry.project} /></td>
-                <td><StatusDot tone={failed ? "danger" : "neutral"} label={t(`sessions.${failed ? "failed" : "requires_action"}`)} /></td>
-                <td className="table-truncate" onClick={(event) => event.stopPropagation()}>{failed ? <SessionFailure projectId={entry.project.id} session={session} truncate /> : waitingFor(session).join(" · ")}</td>
+                <td onClick={(event) => event.stopPropagation()}>
+                  <StatusDot tone={failed ? "danger" : "neutral"} label={t(`sessions.${failed ? "failed" : "requires_action"}`)} />
+                  <div className="overview-attention-reason">{failed ? <SessionFailure projectId={entry.project.id} session={session} truncate={false} /> : waitingFor(session).join(" · ")}</div>
+                </td>
                 <td className="numeric">{formatRelative(session.last_active_at, now, locale)}</td>
               </tr>
             );
diff --git a/apps/web/src/features/overview/overview.css b/apps/web/src/features/overview/overview.css
index c8e0f3929..e3be7a63d 100644
--- a/apps/web/src/features/overview/overview.css
+++ b/apps/web/src/features/overview/overview.css
@@ -1,12 +1,10 @@
-/* Overview: four figures, then Session activity beside the fleet (Core and
-   its sandbox hosts), then usage by project and the Sessions that need
-   attention. Every card sits on the page canvas; colour only marks data
-   (indigo) or a problem. */
+/* Overview: a summary strip, activity and fleet inventory, then operational tables. */
 
 .overview-tiles {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 16px;
+  padding: 4px 0 24px;
+  border-bottom: 1px solid var(--line);
 }
 
 .metric-tile {
@@ -14,11 +12,13 @@
   min-width: 0;
   min-height: 0;
   flex-direction: column;
-  padding: 16px;
-  animation: overview-rise 520ms var(--ease-settle) both;
-  animation-delay: calc(var(--i, 0) * 70ms);
+  padding: 0 20px;
+  border-left: 1px solid var(--line);
 }
 
+.metric-tile:first-child { padding-left: 0; border-left: 0; }
+.metric-tile:last-child { padding-right: 0; }
+
 .metric-tile-label {
   color: var(--fg-muted);
   font-size: 13px;
@@ -27,11 +27,11 @@
 
 .metric-tile-value {
   display: flex;
-  height: 36px;
+  min-height: 36px;
   align-items: center;
-  margin-top: 10px;
+  margin-top: 8px;
   color: var(--fg);
-  font-size: 20px;
+  font-size: 28px;
   font-weight: 600;
   line-height: 36px;
   letter-spacing: -0.025em;
@@ -95,7 +95,7 @@
   align-items: center;
   gap: 12px;
   min-height: 60px;
-  padding: 10px 0;
+  padding: 6px 0;
   border-top: 1px solid var(--line-muted);
 }
 
@@ -182,8 +182,8 @@
 
 .overview-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
+  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr);
+  gap: 24px;
   align-items: stretch;
 }
 
@@ -206,7 +206,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 14px 16px 6px;
+  padding: 12px 20px;
 }
 
 .overview-card-header h2 {
@@ -231,7 +231,7 @@
   min-width: 0;
   flex: 1;
   flex-direction: column;
-  padding: 4px 16px 16px;
+  padding: 4px 20px 20px;
 }
 
 .overview-card-note {
@@ -242,191 +242,31 @@
   flex: 1;
 }
 
-/* Fleet: Core in the middle, sandbox nodes left and right of it. Lines use a
-   0-1000 viewBox stretched to the card, so node columns are in percent. */
-
-.fleet-body {
-  justify-content: center;
-}
-
-.fleet-topology {
-  position: relative;
-  min-width: 0;
-  isolation: isolate;
-}
-
-.fleet-topology-lines {
-  position: absolute;
-  inset: 0;
+/* Inventory rows share one frame and open details only when requested. */
+.fleet-inventory { display: flex; flex-direction: column; }
+.fleet-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.fleet-link {
-  color: var(--line-strong);
-}
-
-.fleet-link-available {
-  color: color-mix(in srgb, var(--fg) 45%, transparent);
-}
-
-.fleet-link-degraded {
-  color: var(--warning);
-}
-
-.fleet-link path {
-  fill: none;
-  vector-effect: non-scaling-stroke;
-}
-
-.fleet-link-edge {
-  stroke: currentColor;
-  stroke-width: 1.25px;
-  opacity: 0.6;
-}
-
-.fleet-link-offline .fleet-link-edge {
-  stroke-dasharray: 4 6;
-  opacity: 0.9;
-}
-
-.fleet-link-flow {
-  stroke: currentColor;
-  stroke-width: 2px;
-  stroke-linecap: round;
-  stroke-dasharray: 3 27;
-  opacity: 0.7;
-  animation: fleet-link-flow 4s linear infinite;
-}
-
-.fleet-topology-stale .fleet-link-flow {
-  display: none;
-}
-
-.fleet-core {
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  display: grid;
-  width: 104px;
-  justify-items: center;
-  gap: 6px;
-  padding: 14px 8px 12px;
-  color: var(--fg-muted);
-  background: var(--surface);
-  border: 1px solid var(--line-strong);
-  border-radius: 14px;
-  transform: translate(-50%, -50%);
-}
-
-button.fleet-core {
-  font: inherit;
-  cursor: pointer;
-  transition: border-color 160ms ease;
-}
-
-button.fleet-core:hover:not(:disabled),
-button.fleet-core[data-popup-open] {
-  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
-}
-
-button.fleet-core:disabled {
-  cursor: default;
-}
-
-.fleet-core strong {
-  color: var(--fg);
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.fleet-core .status-dot,
-.fleet-node .status-dot {
-  color: var(--fg-muted);
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.fleet-node {
-  position: absolute;
-  z-index: 1;
-  display: grid;
-  width: 30%;
-  gap: 4px;
-  padding: 9px 12px;
-  color: var(--fg);
+  min-width: 0;
+  min-height: 48px;
+  padding: 6px 0;
+  color: var(--ink-2);
   font: inherit;
   text-align: left;
-  background: var(--surface);
+  background: transparent;
   border: 0;
-  border-radius: 10px;
-  box-shadow: var(--card-shadow);
+  border-top: 1px solid var(--line-soft);
   cursor: pointer;
-  transform: translateY(-50%);
-  transition: box-shadow 160ms ease;
-}
-
-.fleet-node:hover,
-.fleet-node[data-popup-open] {
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line)), var(--card-shadow);
-}
-
-.fleet-node:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.fleet-node-left {
-  left: 0;
-}
-
-.fleet-node-right {
-  right: 0;
-}
-
-.fleet-node-name {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* E2B's cloud stands where the machines would: its name carries the cloud icon. */
-.fleet-node-name svg {
-  margin-right: 6px;
-  vertical-align: -2px;
-  color: var(--ink-2);
-}
-
-.fleet-node-foot {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.fleet-node-slots {
-  color: var(--fg-muted);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.fleet-more {
-  align-self: center;
-  margin-top: 8px;
-}
-
-@keyframes fleet-link-flow {
-  to { stroke-dashoffset: -60; }
 }
+.fleet-row:hover, .fleet-row[data-popup-open] { background: var(--hover); }
+.fleet-row > svg { flex-shrink: 0; }
+.fleet-row-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
+.fleet-row-info strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.fleet-row .status-dot { color: var(--ink-2); font-size: 12px; line-height: 16px; }
+.fleet-node-slots { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fleet-more { align-self: flex-start; margin-top: 12px; }
 
 .fleet-list-footer {
   display: flex;
@@ -446,11 +286,13 @@ button.fleet-core:disabled {
   color: var(--danger);
 }
 
+.overview-attention-reason { max-width: 32ch; margin-top: 4px; color: var(--ink-2); font-size: 12px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; }
+
 /* Tables inside cards ----------------------------------------------------- */
 
 .overview-table-scroll {
   min-width: 0;
-  margin: 0 16px 16px;
+  margin: 0;
   overflow-x: auto;
 }
 
@@ -458,19 +300,8 @@ button.fleet-core:disabled {
   background: transparent;
 }
 
-/* Inside a card, table text starts where the card title starts. */
-.overview-table-card .data-table thead tr:first-child > :first-child,
-.overview-table-card .data-table tbody tr > :first-child {
-  padding-left: 0;
-}
-
-.overview-table-card .data-table thead tr:first-child > :last-child,
-.overview-table-card .data-table tbody tr > :last-child {
-  padding-right: 0;
-}
-
 .overview-table-card .console-empty {
-  padding: 22px 16px;
+  padding: 16px 0;
 }
 
 /* Grouped headers: "Assets" and "Sessions" span their columns. */
@@ -510,32 +341,21 @@ button.fleet-core:disabled {
   to { opacity: 1; transform: translateY(0); }
 }
 
-@media (max-width: 1180px) {
-  .overview-tiles {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .overview-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
+/* Respond to the content column, including when the console is in a side panel. */
+.overview-page .console-page-body { container-type: inline-size; }
+.overview-page .overview-table-card { background: transparent; box-shadow: none; border-radius: 0; }
+.overview-table-card .overview-card-header { padding: 0 0 12px; }
+.overview-table-card .overview-table-scroll { border-top: 1px solid var(--line); }
+@container (max-width: 680px) {
+  .overview-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@container (max-width: 560px) {
+  .overview-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
+  .metric-tile:nth-child(3) { padding-left: 0; border-left: 0; }
+  .metric-tile { padding-right: 12px; }
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .getting-started,
-  .metric-tile,
-  .overview-activity,
-  .overview-fleet,
-  .overview-table-card {
-    animation: none;
-  }
-
-  .fleet-link-flow {
-    animation: none;
-  }
-
-  .fleet-node {
-    transition: none;
-  }
+  .getting-started, .overview-activity, .overview-fleet, .overview-table-card { animation: none; }
 }
 
 .detail-note {
diff --git a/apps/web/src/i18n/i18n.test.tsx b/apps/web/src/i18n/i18n.test.tsx
index 5f00be01a..f49befe07 100644
--- a/apps/web/src/i18n/i18n.test.tsx
+++ b/apps/web/src/i18n/i18n.test.tsx
@@ -23,6 +23,18 @@ describe("Web internationalization", () => {
     }
   });
 
+  it.each([
+    ["en", 0, "0 more nodes on the Nodes page"],
+    ["en", 1, "1 more node on the Nodes page"],
+    ["en", 3, "3 more nodes on the Nodes page"],
+    ["zh-CN", 0, "另有 0 个节点，在节点页查看"],
+    ["zh-CN", 1, "另有 1 个节点，在节点页查看"],
+    ["zh-CN", 3, "另有 3 个节点，在节点页查看"],
+  ] as const)("renders remaining fleet nodes in %s for count %s", async (language, count, expected) => {
+    await i18n.changeLanguage(language);
+    expect(i18n.t("fleet.more", { ns: "overview", count })).toBe(expected);
+  });
+
   it("renders the language control in the active language", async () => {
     await i18n.changeLanguage("zh-CN");
     const html = renderToStaticMarkup(<ThemeContext.Provider value={{ preference: "light", resolvedTheme: "light", setPreference: () => undefined }}><AppearanceMenu /></ThemeContext.Provider>);
diff --git a/apps/web/src/i18n/locales/en/overview.ts b/apps/web/src/i18n/locales/en/overview.ts
index fa4c52c3f..0ddad3cc7 100644
--- a/apps/web/src/i18n/locales/en/overview.ts
+++ b/apps/web/src/i18n/locales/en/overview.ts
@@ -86,6 +86,8 @@ export const overview = {
     projects: "Projects could not be loaded: {{reason}}",
   },
   activity: {
+    emptyTitle: "Your first Session starts here",
+    emptyDescription: "Use a project API key to call the Agents API. Activity will appear here when your application creates a Session.",
     unreadHelp: "Sessions of {{names}} could not be refreshed. Any retained values may be out of date; other values are missing.",
     title: "Session activity",
     range: "Last 24 hours",
@@ -119,7 +121,7 @@ export const overview = {
     targetPreparation: "Target configuration",
     title: "Fleet",
     cloudHelp: "Core and the sandboxes it holds in E2B’s cloud. Select Core or E2B for a summary.",
-    help: "Core and its connection to each sandbox node: solid lines are online, dashed lines offline. The figure on a node is active sandboxes / limit. Select Core or a node for a summary.",
+    help: "Core and sandbox nodes, with availability and active sandboxes / limit. Select a row for details. When the list is full, offline and degraded nodes appear first.",
     core: "Core",
     open: "{{name}}, {{state}}, sandboxes {{slots}}",
     openNode: "Node details",
@@ -141,7 +143,9 @@ export const overview = {
       daemons: "Connected daemons",
       database: "Database latency p95",
     },
-    more: "{{n}} more nodes on the Nodes page",
+    more: "{{count}} more nodes on the Nodes page",
+    more_one: "{{count}} more node on the Nodes page",
+    more_other: "{{count}} more nodes on the Nodes page",
     unconfigured: "This console has no sandbox administration.",
     loading: "Loading nodes…",
     failed: "Nodes could not be loaded.",
diff --git a/apps/web/src/i18n/locales/zh-CN/overview.ts b/apps/web/src/i18n/locales/zh-CN/overview.ts
index 4e2c03df8..069367165 100644
--- a/apps/web/src/i18n/locales/zh-CN/overview.ts
+++ b/apps/web/src/i18n/locales/zh-CN/overview.ts
@@ -86,6 +86,8 @@ export const overview = {
     projects: "无法加载项目：{{reason}}",
   },
   activity: {
+    emptyTitle: "从第一个 Session 开始",
+    emptyDescription: "使用项目 API Key 调用 Agents API。应用创建 Session 后，这里将显示运行活动。",
     unreadHelp: "无法刷新 {{names}} 的 Session；保留的数据可能已过期，其余数据缺失。",
     title: "Session 活动",
     range: "最近 24 小时",
@@ -119,7 +121,7 @@ export const overview = {
     targetPreparation: "目标配置",
     title: "机群",
     cloudHelp: "Core 与它在 E2B 云端持有的沙箱。选择 Core 或 E2B 可查看摘要。",
-    help: "Core 与各沙箱节点的连接：实线为在线，虚线为离线。节点上的数字是活跃沙箱 / 上限。点击 Core 或节点查看概况。",
+    help: "Core 与沙箱节点的可用状态及活跃沙箱 / 上限。点击一行查看详情。列表显示不下时，优先显示离线和异常节点。",
     core: "Core",
     open: "{{name}}，{{state}}，沙箱 {{slots}}",
     openNode: "节点详情",
@@ -141,7 +143,9 @@ export const overview = {
       daemons: "已连接 daemon",
       database: "数据库延迟 p95",
     },
-    more: "另有 {{n}} 个节点，在节点页查看",
+    more: "另有 {{count}} 个节点，在节点页查看",
+    more_one: "另有 {{count}} 个节点，在节点页查看",
+    more_other: "另有 {{count}} 个节点，在节点页查看",
     unconfigured: "此控制台未配置沙箱管理。",
     loading: "正在加载节点…",
     failed: "无法加载节点。",
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 4d9a1e3c2..e74f8903b 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -9,9 +9,8 @@
      (src/app/beautifui/foundation.css), which owns the light and dark values of
      --canvas, --surface, --ink*, --line*, --hover*, --accent* and the semantic
      colours. Only what the foundation does not define is set here. */
-  --font-inter: "Inter Variable";
   --font-console:
-    "Inter Variable", -apple-system, BlinkMacSystemFont, "PingFang SC",
+    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
     "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans SC",
     "Helvetica Neue", Helvetica, Arial, sans-serif;
   --fg: var(--ink);
@@ -146,28 +145,21 @@ a {
   height: 100vh;
   overflow: hidden;
   color: var(--fg);
-  background: var(--surface);
 }
 
 .app-sidebar {
   display: flex;
-  flex: 0 0 232px;
+  flex: 0 0 224px;
   flex-direction: column;
-  width: 232px;
+  width: 224px;
   min-width: 200px;
   height: 100vh;
-  padding: 10px;
   overflow-y: auto;
-  color: var(--sidebar-fg);
-  background: var(--surface-subtle);
-  border-right: 1px solid var(--line);
 }
 
 .brand-lockup {
   display: flex;
   align-items: center;
-  min-height: 32px;
-  padding: 0 8px;
   gap: 7px;
   color: var(--fg);
   white-space: nowrap;
@@ -203,10 +195,6 @@ html[data-theme="dark"] .brand-mark {
   text-overflow: ellipsis;
 }
 
-.brand-name {
-  font-weight: 500;
-}
-
 .brand-product {
   color: var(--fg-muted);
 }
@@ -227,18 +215,9 @@ html[data-theme="dark"] .brand-mark {
   display: flex;
   align-items: center;
   width: 100%;
-  height: 30px;
-  margin: 1px 0;
-  padding: 0 8px;
-  gap: 8px;
-  color: inherit;
   text-align: left;
   background: transparent;
   border: 0;
-  border-radius: 6px;
-  transition:
-    color 150ms var(--ease-settle),
-    background-color 150ms var(--ease-settle);
 }
 
 .main-nav button:hover {
@@ -246,16 +225,9 @@ html[data-theme="dark"] .brand-mark {
   background: var(--hover);
 }
 
-.main-nav button.active {
-  color: var(--fg);
-  font-weight: 500;
-  background: var(--pressed);
-}
-
 .main-nav button span {
   min-width: 0;
   overflow: hidden;
-  font-size: 14px;
   line-height: 20px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -420,7 +392,6 @@ html[data-theme="dark"] .brand-mark {
   flex: 1;
   flex-direction: column;
   overflow: hidden;
-  background: var(--surface);
 }
 
 .page-section {
@@ -444,13 +415,8 @@ html[data-theme="dark"] .brand-mark {
   top: 0;
   z-index: 5;
   display: flex;
-  min-height: 64px;
   flex: 0 0 64px;
   align-items: center;
-  padding: 12px 24px;
-  gap: 12px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--line);
 }
 
 .page-header h1 {
@@ -459,11 +425,6 @@ html[data-theme="dark"] .brand-mark {
   align-items: baseline;
   margin: 0;
   gap: 7px;
-  color: var(--fg);
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: -0.02em;
 }
 
 .page-header h1 span {
@@ -476,7 +437,9 @@ html[data-theme="dark"] .brand-mark {
 
 .page-actions {
   display: flex;
+  flex-wrap: wrap;
   min-width: 0;
+  max-width: 100%;
   align-items: center;
   margin-left: auto;
   gap: 8px;
diff --git a/apps/web/src/styles/app.css b/apps/web/src/styles/app.css
index edfb80f06..4133a5dc3 100644
--- a/apps/web/src/styles/app.css
+++ b/apps/web/src/styles/app.css
@@ -1,13 +1,16 @@
 /*
  * The console's single stylesheet entry, in cascade order:
  * 1. Tailwind's theme variables (no preflight: the console keeps its base rules);
- * 2. Inter and Beautiful UI's foundation — the design tokens every surface uses;
+ * 2. IBM Plex Sans and Beautiful UI's foundation — the design tokens every surface uses;
  * 3. the console's legacy base and grammar, whose variables alias those tokens;
  * 4. system.css, the component system in Beautiful UI's vocabulary;
  * 5. Tailwind utilities last, generated only for the registry components.
  */
 @import "tailwindcss/theme.css" layer(theme);
-@import "@fontsource-variable/inter/opsz.css";
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-sans/700.css";
 @import "@fontsource-variable/geist-mono";
 @import "../app/beautifui/foundation.css";
 @import "./coss-theme.css";
diff --git a/apps/web/src/styles/console.css b/apps/web/src/styles/console.css
index be13032e5..0c7a8663f 100644
--- a/apps/web/src/styles/console.css
+++ b/apps/web/src/styles/console.css
@@ -5,34 +5,17 @@
  */
 
 :root {
-  --series-1: #2a78d6;
-  --series-2: #eb6834;
-  --series-3: #1baf7a;
-  --series-4: #eda100;
-  --series-5: #e87ba4;
-  --series-6: #008300;
-  --series-other: #a3a3a8;
-  --status-running: var(--series-1);
   /* Meters are ink, not a series colour: colour is reserved for problems. */
   --meter-fill: color-mix(in srgb, var(--ink) 62%, transparent);
   --status-idle: #b4b4b9;
   --meter-track: color-mix(in srgb, var(--ink) 8%, transparent);
-  --frame-radius: 10px;
-  --page-gutter: 28px;
+  --page-gutter: 24px;
   /* Cards sit on the canvas with Beautiful UI's hairline ring and smooth shadow. */
   --card-border: var(--line);
   --card-shadow: var(--shadow-card);
-  --data: var(--accent);
 }
 
 html[data-theme="dark"] {
-  --series-1: #3987e5;
-  --series-2: #d95926;
-  --series-3: #199e70;
-  --series-4: #c98500;
-  --series-5: #d55181;
-  --series-6: #008300;
-  --series-other: #6d6d72;
   --status-idle: #5e5e62;
 }
 
@@ -78,9 +61,6 @@ html[data-theme="dark"] {
   display: flex;
   align-items: center;
   gap: 5px;
-  padding: 12px 8px 4px;
-  font-size: 11.5px;
-  font-weight: 500;
 }
 
 .console-nav .nav-group:last-child {
@@ -114,9 +94,7 @@ html[data-theme="dark"] {
 
 /* Every page header shares one height, title scale and description line. */
 .page-header {
-  min-height: 64px;
   flex: 0 0 auto;
-  padding: 10px var(--page-gutter);
 }
 
 .page-header .console-page-heading h1 {
@@ -247,8 +225,6 @@ html[data-theme="dark"] {
   min-height: 0;
   flex: 1;
   flex-direction: column;
-  gap: 28px;
-  padding: 20px var(--page-gutter) 48px;
   overflow: auto;
 }
 
@@ -256,7 +232,6 @@ html[data-theme="dark"] {
   flex-shrink: 0;
 }
 
-
 .page-status {
   margin: 0;
   color: var(--fg-muted);
@@ -707,7 +682,6 @@ html[data-theme="dark"] {
   color: var(--fg-muted);
 }
 
-
 .owner-missing {
   color: var(--fg-muted);
 }
@@ -815,31 +789,19 @@ html[data-theme="dark"] {
 
 .table-frame {
   min-width: 0;
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: var(--frame-radius);
 }
 
 .data-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 13px;
-  line-height: 18px;
 }
 
 .data-table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  height: 34px;
-  padding: 0 12px;
-  color: var(--fg-muted);
-  font-size: 12px;
-  font-weight: 500;
   text-align: left;
   white-space: nowrap;
-  background: var(--surface-subtle);
-  border-bottom: 1px solid var(--line);
 }
 
 .data-table tbody th,
@@ -974,7 +936,7 @@ html[data-theme="dark"] {
   border-color: color-mix(in srgb, var(--danger) 22%, var(--line));
 }
 
-/* Empty lists read as an empty table card: same frame, no dashed outline. */
+/* Empty states explain the next task without another enclosing card. */
 .console-empty {
   display: flex;
   flex-direction: column;
@@ -984,8 +946,7 @@ html[data-theme="dark"] {
   color: var(--fg-muted);
   text-align: center;
   background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--frame-radius);
+  border: 0;
 }
 
 .console-empty p {
@@ -1263,32 +1224,8 @@ html[data-theme="dark"] {
   }
 }
 
-
 /* Surfaces -------------------------------------------------------------
    The page sits on a canvas; every frame is a card drawn by Beautiful UI's
    hairline ring and smooth shadow. No borders-inside-borders, no translucency. */
-.app-main {
-  background: var(--canvas);
-}
-
-.app-sidebar {
-  background: var(--surface);
-}
-
-/* The header is solid canvas: content scrolls under it without a blur. */
-.console-page > .page-header {
-  background: var(--canvas);
-  border-bottom-color: transparent;
-}
-
-.kpi-strip,
-.table-frame,
-.chart-grid,
-.overview-card {
-  background: var(--surface);
-  border: 0;
-  border-radius: var(--frame-radius);
-  box-shadow: var(--card-shadow);
-}
 
 /* Session console: a secondary page of the Session log. */
diff --git a/apps/web/src/styles/system.css b/apps/web/src/styles/system.css
index 59cb44188..0ee84a606 100644
--- a/apps/web/src/styles/system.css
+++ b/apps/web/src/styles/system.css
@@ -35,12 +35,11 @@
   /* Inside the white page panel, frames are hairlines, not raised cards. */
   --frame-line: color-mix(in oklch, var(--ink) 11%, transparent);
   --shadow-card: 0 0 0 1px var(--frame-line);
-  --panel-shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(0 0 0 / 3%), 0 8px 24px -12px oklch(0 0 0 / 8%);
-  --control-height: 30px;
-  --radius-chip: 6px;
-  --radius-control: 8px;
-  --radius-card: 12px;
-  --radius-window: 14px;
+  --control-height: 32px;
+  --radius-chip: 3px;
+  --radius-control: 4px;
+  --radius-card: 6px;
+  --radius-window: 8px;
   --frame-radius: var(--radius-card);
   --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
 }
@@ -65,7 +64,6 @@ html[data-theme="dark"] {
   --series-other: oklch(0.45 0.01 264);
   --frame-line: oklch(1 0 0 / 10%);
   --shadow-card: 0 0 0 1px var(--frame-line);
-  --panel-shadow: 0 0 0 1px oklch(1 0 0 / 8%), 0 8px 28px -12px oklch(0 0 0 / 50%);
 }
 
 /* Browser surfaces ------------------------------------------------------ */
@@ -78,7 +76,6 @@ html {
 body {
   font-size: 14px;
   letter-spacing: -0.01em;
-  font-feature-settings: "cv11", "ss01";
 }
 
 ::selection {
@@ -111,32 +108,31 @@ pre {
 
 /* Shell ----------------------------------------------------------------- */
 
-/* The gray canvas is the app frame; each page lives in one white panel. */
+/* Flat application surfaces; borders separate navigation from content. */
 .app-shell,
 .app-main {
-  background: var(--canvas);
+  background: var(--page);
 }
 
 .app-main {
-  padding: 8px 8px 8px 0;
+  padding: 0;
 }
 
 .app-main > .page-transition {
   overflow: hidden;
-  background: var(--surface);
-  border-radius: var(--radius-window);
-  box-shadow: var(--panel-shadow);
+  background: var(--page);
+  border-radius: 0;
 }
 
 .page-section {
-  background: var(--surface);
+  background: var(--page);
 }
 
 .app-sidebar {
-  padding: 10px 8px;
-  color: var(--ink-2);
-  background: var(--canvas);
-  border-right: 0;
+  padding: 12px 8px;
+  color: var(--ink);
+  background: var(--inset);
+  border-right: 1px solid var(--line);
 }
 
 .brand-lockup {
@@ -167,11 +163,11 @@ pre {
 }
 
 .main-nav button {
-  height: 32px;
-  margin: 0 0 1px;
+  height: 36px;
+  margin: 0 0 2px;
   padding: 0 8px;
   gap: 8px;
-  color: var(--ink-2);
+  color: var(--ink);
   border-radius: var(--radius-control);
   transition:
     color 150ms var(--ease-out-strong),
@@ -185,7 +181,7 @@ pre {
 }
 
 .main-nav button svg {
-  color: var(--ink-3);
+  color: var(--ink-2);
   transition: color 150ms var(--ease-out-strong);
 }
 
@@ -198,8 +194,7 @@ pre {
   transform: scale(0.98);
 }
 
-/* The current page is a white chip, the same surface as the panel it opens.
- * One chip glides between items (a Motion shared layout); labels sit above it. */
+/* Selection has a stable background and a narrow accent marker. */
 .main-nav {
   isolation: isolate;
 }
@@ -224,9 +219,9 @@ pre {
   position: absolute;
   z-index: 0;
   inset: 0;
-  background: var(--surface);
+  background: var(--hover-2);
   border-radius: var(--radius-control);
-  box-shadow: 0 0 0 1px var(--frame-line), 0 1px 2px oklch(0 0 0 / 4%);
+  box-shadow: inset 2px 0 var(--accent);
   pointer-events: none;
 }
 
@@ -250,30 +245,58 @@ pre {
   border-top-color: var(--line);
 }
 
+/* Compact navigation keeps labels accessible without clipping visible text. */
+@media (max-width: 640px) {
+  :root { --page-gutter: 16px; }
+
+  .app-sidebar {
+    width: 56px;
+    min-width: 56px;
+    flex-basis: 56px;
+    padding: 8px 6px;
+    overflow-x: hidden;
+  }
+
+  .console-nav .nav-label,
+  .brand-product,
+  .console-account-menu > button > span {
+    display: none;
+  }
+
+  .main-nav button { height: 40px; }
+  .main-nav button .nav-active-chip { display: block; }
+  .sidebar-account { flex-direction: column; }
+  .console-account-menu > button { justify-content: center; }
+}
+
 /* Page frame ------------------------------------------------------------ */
 
 .console-page > .page-header,
 .page-header {
   min-height: 56px;
   flex-basis: auto;
+  flex-wrap: wrap;
   gap: 12px;
-  padding: 10px var(--page-gutter);
-  background: var(--surface);
+  padding: 18px var(--page-gutter);
+  background: var(--page);
   border-bottom: 1px solid var(--line);
 }
 
 .page-header h1,
 .page-header .console-page-heading h1 {
   color: var(--ink);
-  font-size: 17px;
+  font-size: 20px;
   font-weight: 600;
-  line-height: 24px;
+  line-height: 28px;
   letter-spacing: -0.015em;
 }
 
+.console-page-intro { min-width: 0; max-width: 100%; }
+.console-page-description { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 20px; }
+
 .console-page-body {
-  gap: 28px;
-  padding: 20px var(--page-gutter) 48px;
+  gap: 24px;
+  padding: 24px var(--page-gutter) 40px;
 }
 
 /* A list toolbar belongs to the table under it: 12px apart, not a section gap. */
@@ -684,10 +707,8 @@ pre {
 /* Cards ----------------------------------------------------------------- */
 
 .kpi-strip,
-.table-frame,
 .chart-grid,
-.overview-card,
-.console-empty {
+.overview-card {
   background: var(--surface);
   border: 0;
   border-radius: var(--radius-card);
@@ -721,6 +742,10 @@ pre {
 
 .table-frame {
   overflow: auto;
+  border: 0;
+  border-top: 1px solid var(--line);
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .data-table {
@@ -732,9 +757,9 @@ pre {
   height: 36px;
   padding: 0 12px;
   color: var(--ink-2);
-  font-size: 12.5px;
+  font-size: 12px;
   font-weight: 500;
-  background: var(--surface);
+  background: var(--inset);
   border-bottom: 1px solid var(--line);
 }
 
@@ -1189,24 +1214,6 @@ pre {
   box-shadow: var(--shadow-card);
 }
 
-/* Overview figures: large, light and tabular, set in Inter's display cut. */
-.metric-tile-value {
-  height: auto;
-  margin-top: 6px;
-  color: var(--ink);
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 28px;
-  letter-spacing: -0.015em;
-  font-optical-sizing: auto;
-  font-variant-numeric: tabular-nums;
-}
-
-.metric-tile-label,
-.overview-card-header h2 {
-  color: var(--ink);
-}
-
 /* A pill after a name keeps a small gap from it. */
 :where(span, strong, a, button, code) + .pill {
   margin-left: 6px;
@@ -1240,7 +1247,7 @@ pre {
 
 /* Shape and spacing scale ------------------------------------------------ */
 
-/* Radii: 6 inner option, 8 control, 12 card, 14 panel and dialog; badges are
+/* Radii: 3 inner option, 4 control, 6 card, 8 dialog; badges are
    pills. Every card starts its content 16px in, so text in stacked cards and
    the first table column share one left edge. */
 .data-table thead th:first-child,
@@ -1255,14 +1262,6 @@ pre {
   padding-right: 16px;
 }
 
-.fleet-node {
-  border-radius: 10px;
-}
-
-.fleet-core {
-  border-radius: var(--radius-card);
-}
-
 .coverage-note,
 .help-tip-popover,
 .chart-tooltip {