diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index d85356a..278dcc9 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -93,7 +93,7 @@ jobs:
           security set-key-partition-list -S apple-tool:,apple:,codesign: -s -k "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
           security find-identity -v -p codesigning
 
-      - name: Build and release Tauri app
+      - name: Build, verify, and release Tauri app
         uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -105,6 +105,7 @@ jobs:
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         with:
+          tauriScript: ./scripts/tauri-release-build.sh
           tagName: ${{ github.ref_name }}
           releaseName: "FanGuard ${{ github.ref_name }}"
           releaseBody: "See the assets to download and install this version."
diff --git a/design-qa.md b/design-qa.md
new file mode 100644
index 0000000..50956a9
--- /dev/null
+++ b/design-qa.md
@@ -0,0 +1,25 @@
+# Design QA - FanGuard Liquid Glass Dashboard
+
+final result: passed
+
+## Source
+
+- Reference image: `/var/folders/39/sdym6xy92x90bv9qlv4nxg_r0000gn/T/codex-clipboard-2bf006d9-d2ad-4610-b81e-810e1912c498.png`
+- Prototype screenshot: `/Users/naufaldi.satriya/WebApps/mac-fan-ctrl/test-results/fanguard-liquid-glass-dashboard.png`
+- Viewport: `1536 x 1024`
+
+## Passed Checks
+
+- Single rounded macOS window shell with traffic lights.
+- Toolbar title, preset pop-up, search field, and overflow menu align with the reference rhythm.
+- No sidebar, no back navigation, and no unrelated toolbar icons.
+- Fan Control section uses the reference structure: Mode segmented control, target RPM slider, current average, Apply, Restore Auto, and helper copy.
+- Slider now uses a macOS-style white thumb and blue active track.
+- Grouped table uses native dense rows, category icons, disclosure arrows, column separators, zebra rows, and the same telemetry groups.
+- Table shows all reference rows including both disk drives.
+- Bottom status bar matches the reference content and placement.
+
+## Notes
+
+- The implementation keeps the real computed current average RPM. With visible fan rows `2,532`, `2,200`, and `2,000`, the real average is `2,244 RPM`; the reference image labels `2,532 RPM` as the current average.
+- Figma live inspection was attempted but unavailable in this run: the Figma app connector timed out and `figma_mcp_go` returned `plugin not connected`. The implementation uses the previously captured macOS 27 variables in `docs/design.md` plus the provided image as the visual source.
diff --git a/docs/code-signing.md b/docs/code-signing.md
index 35b3917..20a03b1 100644
--- a/docs/code-signing.md
+++ b/docs/code-signing.md
@@ -52,9 +52,19 @@ export APPLE_PASSWORD="app-specific-password"
 export APPLE_TEAM_ID="YOUR_TEAM_ID"
 ```
 
-### Manual Notarization
+### Local Notarized Build
 
-After building with `pnpm tauri:build:direct`:
+Store the notarization variables in `~/.config/fanguard/notarization.env`, then run:
+
+```bash
+./scripts/build-local-notarized.sh
+```
+
+The wrapper builds the direct-distribution app, submits the final DMG, staples it,
+mounts it, and verifies the app, helper, Gatekeeper assessment, and stapler ticket.
+It rejects ambiguous output directories containing more than one DMG.
+
+For manual troubleshooting after `pnpm tauri:build:direct`:
 
 ```bash
 # Submit for notarization
diff --git a/docs/design.md b/docs/design.md
index bc846bc..ad88ded 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -1,227 +1,459 @@
-# FanGuard — Design System
+# FanGuard Design System - macOS 27 Liquid Glass
 
-> Parchment command terminal meets Apple HIG — warm paper surfaces beneath monochrome native controls, with a single ember signal reserved for heat.
+FanGuard follows a native macOS 27 utility direction based on the community Figma file:
 
-FanGuard adopts the **ElevenLabs** warm-parchment visual language ([refero.design style](https://styles.refero.design/style/031056ff-7af1-46db-8daa-115f731c5d26)) and delivers it through **Apple Human Interface Guidelines** geometry so the app feels native to macOS rather than like a web marketing page dropped into a utility window.
+- File: `macOS 27 (Community)`
+- Link: https://www.figma.com/design/57pdOQpJuHYSqIFLpmL8kO/macOS-27--Community-?node-id=684-19522
+- Verified node: `684:19522`, named `List`, size `1512 x 982`
+- Relevant pages in the file: `Colors`, `Materials`, `Text Styles`, `Windows`, `Buttons`, `Lists and Tables`, `Sidebars`, `Toolbars`, `Segmented Controls`, `Search Fields`, `Sheets`, `Popovers`, `Toggles`
 
-The core idea: an off-white parchment canvas (`#fdfcfc`) layered with warm-sand surfaces (`#f5f3f1`) separated by hairline `#e5e5e5` dividers. All interactive chrome is monochrome ink (`#000000`) on parchment — color is never used as a call to action. The one sanctioned exception is **Ember Orange `#ff4704`**, used exclusively as a restrained safety signal for hot temperatures (≥85°C). Elevation comes from surface contrast and 1px hairlines, never from soft blurs.
+This document is the product-specific translation of that Figma system for FanGuard. Treat it as the design source for future frontend work, not as a generic macOS reference.
 
----
+## Canonical V1 Screen
 
-## Apple HIG Adaptation
+The canonical v1 screen is the generated FanGuard dashboard image selected in the design discussion. The Figma macOS 27 system provides the material language, but the generated image defines the actual FanGuard composition.
 
-The ElevenLabs reference is a web-marketing system (9999px pill buttons, 20–24px rounded cards, Inter/Geist Mono, decorative gradient orbs). FanGuard is a macOS desktop utility, so the parchment *palette* is mapped onto native macOS *geometry*:
+Implementation must match this screen before introducing alternate layouts:
 
-| ElevenLabs (web) | FanGuard (macOS HIG) |
-| --- | --- |
-| 9999px pill buttons | 7px rectangular rounded push buttons (macOS standard) |
-| Pill toggle tabs | HIG segmented control (connected 6px segments) |
-| Text-link preset menu | HIG pop-up button (rectangular rounded + chevron) |
-| 20–24px floating rounded cards | Edge-to-edge panes with 1px hairline dividers |
-| Inter + Geist Mono | SF Pro Text (UI) + SF Mono (data) — Apple system fonts |
-| Decorative violet/orange gradient orbs | Omitted (not appropriate for a utility) |
-| 4px flush editorial inputs | 5px native macOS text fields |
-
-Native window chrome (traffic-light close/minimize/zoom buttons, title bar) stays OS-provided via Tauri `decorations: true`. Motion is calm and restrained — no cinematic physics, consistent with macOS system utilities. `9999px` capsules are reserved only for HIG capsule contexts (e.g. small status badges); they are not the default button shape.
-
----
-
-## Tokens — Colors
-
-| Name | Value | Token | Role |
-| --- | --- | --- | --- |
-| Parchment White | `#fdfcfc` | `--color-parchment-white` | Window canvas — the dominant background |
-| Warm Sand | `#f5f3f1` | `--color-warm-sand` | Secondary surface — table headers, inset panes, hover base |
-| Sand Hover | `#efedea` | `--color-sand-hover` | Row/control hover (one step darker than Warm Sand) |
-| Ash Border | `#e5e5e5` | `--color-ash-border` | All hairline borders and dividers |
-| Ash Strong | `#d4d4d4` | `--color-ash-strong` | Emphasized borders (dialog outlines, pressed states) |
-| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, headline text, filled control background, icon fills |
-| Driftwood | `#777169` | `--color-driftwood` | Secondary text, muted labels, icon strokes |
-| Fog | `#a59f97` | `--color-fog` | Tertiary helper text, placeholder text |
-| Silver Mist | `#b1b0b0` | `--color-silver-mist` | Unknown/null status, disabled chrome |
-| Ember Orange | `#ff4704` | `--color-ember-orange` | **Safety only** — hot temperature (≥85°C) signal |
-| Void Violet | `#0447ff` | `--color-void-violet` | **Decorative only** — unused in utility chrome (reserved) |
-
-### Semantic status mapping
-
-Temperature status is monochrome by default; ember appears only for hot:
-
-| Status | Condition | Token |
-| --- | --- | --- |
-| normal | `< 70°C` | `--color-driftwood` (monochrome dot) |
-| warm | `70–84°C` | `--color-driftwood` (monochrome dot — no yellow) |
-| hot | `≥ 85°C` | `--color-ember-orange` (the single safety signal) |
-| unknown | `null` / N/A | `--color-silver-mist` |
+- floating rounded macOS window over a blurred desktop background,
+- traffic-light controls in the top-left,
+- toolbar with `FanGuard`, centered `Preset: Automatic`, search field, and overflow menu,
+- no sidebar and no back/forward navigation,
+- one framed `FAN CONTROL` section above the table,
+- one global `Auto / Manual` segmented control,
+- `Manual` selected in the preview state,
+- target slider with `1200`, `3200 RPM`, `6550`, and current average under the track,
+- `Apply` primary button before `Restore Auto`,
+- info row reading `Applies to all fans.`,
+- framed dense table with columns `Name`, `Value`, `Range`, `Mode`, `Status`,
+- group rows for `FANS`, `TEMPERATURE SENSORS`, and `DISK DRIVES`,
+- preview data with `System Fan 1`, `System Fan 2`, `System Fan 3`, and `Synced` fan modes,
+- preview disk rows `APPLE SSD AP0512Q` and `SanDisk Extreme Pro`,
+- bottom status bar with `SMC Connected`, model id, `Fan control enabled`, and last update.
+
+If this document and the generated image disagree, the generated image wins and this document should be corrected.
+
+## Design Intent
 
----
+FanGuard should feel like a first-party macOS utility for thermal monitoring and fan control. The interface is quiet, dense, and system-native. It should look closer to Finder, Activity Monitor, Console, or System Settings than to a web dashboard.
 
-## Tokens — Typography
+The Liquid Glass direction comes from layering, translucency, subtle material separation, rounded window geometry, and native control styling. It is not decorative glassmorphism. Blur and transparency should support hierarchy, not become the subject of the UI.
 
-Type is set in Apple's system fonts for UI/data, with DM Sans weight 300 reserved for display-size headings (the ElevenLabs "Waldenburg weight 300" personality, via its documented DM Sans 300 substitute).
+### Principles
 
-### Font families
+- Prefer native macOS structure over custom web layout.
+- Use Liquid Glass materials for window, toolbar, fan control, sheets, and popovers.
+- Keep the main data area dense, scannable, and table-driven.
+- Use system typography: SF Pro Text for UI, SF Mono for metrics.
+- Use accent blue for active selection and primary confirmation only.
+- Use semantic temperature colors only for thermal state.
+- Avoid marketing-page spacing, decorative cards, custom pill controls, and large display typography.
 
-| Role | Family | Token | Weights |
-| --- | --- | --- | --- |
-| UI text | SF Pro Text (system) | `--font-ui` | 400, 500 |
-| Data / metrics | SF Mono (system) | `--font-mono` | 400, tabular-nums |
-| Display headings | DM Sans | `--font-display` | 300 (Waldenburg substitute) |
+## Source Observations
 
-Font stacks:
+The verified Figma `List` frame shows:
+
+- macOS menu bar above the window.
+- rounded app window with large continuous corner radius.
+- traffic-light controls in the top-left.
+- translucent window and toolbar materials.
+- unified toolbar with grouped icon controls and a native search field.
+- main content table with dense rows, column headers, separators, group labels, active blue row selection, and a thin scrollbar.
+- light and dark variants for many window examples.
+
+The selected frame inspector exposed these relevant variables:
+
+| Figma variable | Observed value | FanGuard role |
+| --- | --- | --- |
+| `Window Background` | `#FFF` at `100%` | Main content surface |
+| `Labels/Primary` | `#000` at `85%` | Primary text |
+| `Labels/Secondary` | `#000` at `50%` | Secondary text |
+| `Labels - Vibrant (Use Plus Lighter | Darker)/Primary` | `#1A1A1A` at `100%` | Text on translucent material |
+| `Labels - Vibrant (Use Plus Lighter | Darker)/Secondary` | `#727272` at `100%` | Secondary text on translucent material |
+| `Labels - Vibrant (Use Plus Lighter | Darker)/Quaternary` | `#D9D9D9` at `100%` | Faint dividers and inactive affordances |
+| `Accents - Vibrant/Blue` | `#0078F0` at `100%` | Accent and selected controls |
+| `Miscellaneous/Tables/BG - Selected + Active` | `#0165E2` at `100%` | Active selected table row |
+| `Miscellaneous/Tables/Alternating Row Color` | `#000` at `5%` | Alternating table row |
+| `Miscellaneous/Tables/Column Separator` | `#000` at `10%` | Table column divider |
+| `Miscellaneous/Scrollbar` | `#000` at `50%` | Scrollbar thumb |
+
+## Tokens
+
+### Typography
+
+| Token | Value | Usage |
+| --- | --- | --- |
+| `--font-ui` | `-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif` | Labels, buttons, rows, toolbar, dialogs |
+| `--font-mono` | `"SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace` | Temperatures, RPM, timestamps, numeric columns |
+
+Use `font-variant-numeric: tabular-nums` for all thermal values, RPM values, percentages, dates, and aligned metrics.
+
+| Role | Size | Weight | Line height | Notes |
+| --- | --- | --- | --- | --- |
+| Table row label | `13px` | `400` | `18px` | Primary scanner text |
+| Table value | `12px` | `400` | `18px` | Use mono and tabular nums |
+| Table header | `11px` | `500` | `16px` | Muted, compact |
+| Section label | `11px` | `600` | `16px` | Upper/lowercase follows Figma page conventions |
+| Toolbar title | `13px` | `600` | `18px` | Window or active view title |
+| Dialog title | `13px` | `600` | `18px` | Native sheet/dialog title |
+| Helper text | `11px` | `400` | `16px` | Muted explanatory text |
+
+### Color
+
+Use semantic tokens instead of hard-coded colors in components.
+
+```css
+:root {
+  color-scheme: light dark;
+
+  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
+
+  --color-window-background: rgb(255 255 255);
+  --color-label-primary: rgb(0 0 0 / 85%);
+  --color-label-secondary: rgb(0 0 0 / 50%);
+  --color-label-vibrant-primary: rgb(26 26 26);
+  --color-label-vibrant-secondary: rgb(114 114 114);
+  --color-label-quaternary: rgb(217 217 217);
+
+  --color-accent-blue: rgb(0 120 240);
+  --color-selection-active: rgb(1 101 226);
+  --color-table-row-alternating: rgb(0 0 0 / 5%);
+  --color-table-separator: rgb(0 0 0 / 10%);
+  --color-scrollbar: rgb(0 0 0 / 50%);
+
+  --color-status-normal: rgb(52 199 89);
+  --color-status-warm: rgb(255 204 0);
+  --color-status-hot: rgb(255 69 58);
+  --color-status-unknown: rgb(142 142 147);
+}
 ```
---font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
---font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
---font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+
+Dark mode should mirror the same token names with inverted label colors and darker materials. Do not fork component structure for dark mode; only token values should change.
+
+### Materials
+
+Liquid Glass is represented with layered materials:
+
+| Token | Role | Implementation guidance |
+| --- | --- | --- |
+| `--material-window` | App window body | Mostly opaque surface with subtle translucency and system blur |
+| `--material-toolbar` | Unified top toolbar | Translucent material over the window, with subtle bottom separator |
+| `--material-control` | Buttons, search field, segmented controls | Small translucent surface with hairline border and inner highlight |
+| `--material-sheet` | Dialogs and sheets | Floating material above window, stronger shadow and backdrop separation |
+| `--material-popover` | Menus and compact overlays | Compact floating material with native corner radius and shadow |
+
+For CSS, use `background-color`, `backdrop-filter: blur(...) saturate(...)`, and subtle inset borders. Avoid heavy shadows. The material should read as native glass, not as a blurred card.
+
+### Spacing and Density
+
+Use a 4px base unit. FanGuard is a dense utility, so most layout spacing should stay in the `4px`, `6px`, `8px`, `12px`, and `16px` range.
+
+| Token | Value | Usage |
+| --- | --- | --- |
+| `--space-1` | `4px` | Icon gaps, separator offsets |
+| `--space-1-5` | `6px` | Compact row internals |
+| `--space-2` | `8px` | Toolbar and table cell padding |
+| `--space-3` | `12px` | Toolbar padding, control groups |
+| `--space-4` | `16px` | Window edge and dialog padding |
+| `--space-6` | `24px` | Dialog section separation |
+
+| Element | Target size |
+| --- | --- |
+| Table row height | `22px` to `26px` |
+| Toolbar height | `52px` to `64px` depending on title layout |
+| Compact icon button | `28px` square |
+| Search field height | `30px` to `32px` |
+| Segmented control height | `28px` to `30px` |
+
+### Radius
+
+| Element | Radius |
+| --- | --- |
+| App window | `22px` to `26px` |
+| Sheets/dialogs | `18px` to `22px` |
+| Popovers | `14px` to `18px` |
+| Toolbar controls | `8px` to `12px` |
+| Table selected rows | `6px` |
+| Status dots | `50%` |
+
+## Application Layout
+
+FanGuard uses the generated single-window dashboard layout. It does not use a persistent sidebar because the core workflow is one screen: set global fan behavior, then scan grouped telemetry.
+
+```text
++--------------------------------------------------------------+
+| traffic lights   FanGuard        preset/search/actions       |
++--------------------------------------------------------------+
+| FAN CONTROL: Auto / Manual, target RPM slider                |
++--------------------------------------------------------------+
+| Name                  Value        Range        Mode Status   |
+| Fans                                                        v |
+| System Fan 1          2532 RPM     1200-6550    Synced OK     |
+| System Fan 2          2200 RPM     1200-6550    Synced OK     |
+| System Fan 3          2000 RPM     1200-6550    Synced OK     |
+| Temperature Sensors                                      v   |
+| CPU Core Average      56 C         40-100       -    Normal   |
+| Disk Drives                                               v   |
+| APPLE SSD AP0512Q      38 C        20-70        -    OK       |
+| SanDisk Extreme Pro    36 C        20-70        -    OK       |
++--------------------------------------------------------------+
+| SMC Connected   Mac model   Fan control state   Last update   |
++--------------------------------------------------------------+
 ```
 
-> **Implementation note:** `--font-display` prefers DM Sans 300 (the documented Waldenburg substitute) when bundled, but falls back to the Apple system font at weight 300 with `-0.02em` tracking. On macOS this renders as SF Pro Display Light — which carries the same light, tightly-tracked headline personality natively and keeps the app fully offline. DM Sans is optional to bundle; the fallback is the default rendering.
+### Window
 
-### Type scale (utility-dense)
+- Use a single rounded macOS window container inside the app preview.
+- Traffic-light controls belong in the upper-left of the generated window shell.
+- Content should feel edge-to-edge inside the native window, with only the fan-control and table frames inset.
+- Prefer a unified toolbar over a separate web-style header.
+- Minimum window sizing should preserve the toolbar, global fan control, full table frame, status bar, and several rows.
 
-| Role | Size | Line height | Letter spacing | Weight | Font |
-| --- | --- | --- | --- | --- | --- |
-| caption | 10px | 1.4 | 0.1px | 400 | SF Pro Text |
-| micro | 11px | 1.45 | 0.11px | 400/500 | SF Pro Text |
-| label | 12px | 1.45 | 0.12px | 400/500 | SF Pro Text |
-| body | 13px | 1.5 | 0.13px | 400 | SF Pro Text |
-| data | 13px | 1.4 | 0 | 400 | SF Mono (tabular-nums) |
-| subheading | 15px | 1.45 | 0.15px | 500 | SF Pro Text |
-| heading-sm | 20px | 1.3 | -0.2px | 300 | DM Sans |
-| heading | 28px | 1.2 | -0.56px | 300 | DM Sans |
-| display | 36px | 1.13 | -0.72px | 300 | DM Sans |
+### Navigation Model
 
-All numeric metrics (RPM, °C, percentages) use `font-variant-numeric: tabular-nums` via SF Mono so columns align and values don't jitter.
+FanGuard does not need a sidebar for the main dashboard. Fans, temperature sensors, and disk drives are visible as disclosure groups inside the main table because they are data categories, not separate screens.
 
----
+Use a sidebar only if the product later gains real multi-screen navigation such as logs, alerts, history, or advanced rules. Do not add navigation solely to mirror the Figma reference.
 
-## Tokens — Spacing, Radii, Shadows
+### Toolbar
 
-### Spacing
+The toolbar is unified with the window title area and must follow the generated image:
 
-Base unit `4px`. Common steps: `4, 8, 12, 16, 20, 24, 32`. Pane padding `12–16px`; dialog padding `20–24px`; element gap `8px`.
+- traffic lights at far left,
+- `FanGuard` title next to them,
+- centered preset pop-up labeled `Preset: Automatic`,
+- search field near the right edge,
+- one compact overflow menu at far right.
 
-### Border radius (HIG)
+Do not include fake back/forward navigation or toolbar icons without real behavior. Text labels are acceptable where macOS would normally show them, such as primary confirmation in a sheet.
 
-| Element | Value | Token |
-| --- | --- | --- |
-| push button | 7px | `--radius-button` |
-| segmented control | 6px | `--radius-segmented` |
-| input / text field | 5px | `--radius-input` |
-| dialog / panel | 10px | `--radius-dialog` |
-| list card | 12px | `--radius-card` |
-| capsule badge | 9999px | `--radius-capsule` (reserved) |
+### Main Content
+
+The main content area is table-first:
+
+- fan rows,
+- temperature sensor rows,
+- disk rows,
+- derived or unavailable rows when useful.
+
+Use native list/table styling:
 
-### Shadows (hairline only)
+- compact row heights,
+- optional alternating row fill,
+- muted column headers,
+- subtle column separators,
+- active row selection in macOS blue,
+- right-aligned numeric values,
+- sticky header when the table scrolls,
+- thin scrollbar.
+
+Do not use repeated floating cards for sensors. FanGuard is a monitoring tool; the user should scan rows quickly.
+
+## Components
 
-| Name | Value | Token |
+### Tables and Lists
+
+Use this table model for all telemetry lists:
+
+| Column | Width | Notes |
 | --- | --- | --- |
-| hairline ring | `rgba(0,0,0,0.06) 0 0 0 1px, rgba(0,0,0,0.04) 0 1px 2px 0` | `--shadow-hairline` |
-| elevated panel | `rgba(0,0,0,0.4) 0 0 1px 0, rgba(0,0,0,0.04) 0 1px 1px 0, rgba(0,0,0,0.04) 0 2px 4px 0` | `--shadow-elevated` |
-| inset | `rgba(0,0,0,0.075) 0 0 0 0.5px inset` | `--shadow-inset` |
+| Icon | `24px` | SF Symbol-style, muted unless status needs emphasis |
+| Name | flexible | Primary sensor/fan label |
+| Value | `88px` to `120px` | Right-aligned mono text |
+| Detail | `120px` to `180px` | RPM range, source, mode, or last update |
+| Status | `72px` to `96px` | Text or compact dot plus label |
 
-Blur never exceeds 4px and opacity never exceeds 0.04. Elevation is primarily signaled by surface contrast (`#fdfcfc` → `#f5f3f1` → `#ffffff`) and 1px `#e5e5e5` dividers.
+Rules:
 
----
+- values use `--font-mono` and tabular numbers,
+- unavailable values render as muted `N/A`,
+- selected row uses `--color-selection-active` with white text,
+- group headers use muted 11px text and should not look like cards,
+- column separators use `--color-table-separator`.
 
-## Surfaces
+### Fan Controls
 
-| Level | Name | Value | Purpose |
-| --- | --- | --- | --- |
-| 1 | Canvas | `#fdfcfc` | Window background, pane/row base |
-| 2 | Warm Sand | `#f5f3f1` | Table headers, inset panes, secondary tiles |
-| 3 | Border | `#e5e5e5` | Hairline borders and dividers |
-| 4 | Elevated | `#ffffff` | Dialog panels and floating menus (with `--shadow-elevated`) |
+Fan control is global in FanGuard v1. One control applies to every detected fan together. The fan-control section must visually match the generated image: uppercase label, framed glass panel, mode row, target slider row, action buttons to the right, and info copy at the bottom.
 
----
+Fan control mode must use a native segmented control:
 
-## Components
+- `Auto`
+- `Manual`
+
+The selected segment uses accent blue or native selected material depending on context. Manual mode exposes one inline target RPM slider because the dashboard's primary job is fan control.
+
+Global manual control rules:
+
+- individual fan rows are telemetry only,
+- no per-fan sliders or custom modal,
+- the preview state is `Manual` with synced fan rows,
+- the shared safe range is `max(fan.min)` to `min(fan.max)`,
+- if the detected fans have no shared safe range, disable manual writes and explain why,
+- applying manual mode writes the same target RPM to every detected fan,
+- restoring auto restores every detected fan to automatic mode.
+
+RPM controls:
+
+- validate min and max boundaries before writes,
+- show minimum, maximum, requested target, and current average,
+- place the requested target above or visually tied to the slider thumb,
+- always show numeric RPM beside visual controls.
+
+### Preset Control
+
+The active preset belongs in the toolbar. Use a native pop-up or pull-down button style. Preset choices should feel like system menu items, not large tiles.
+
+Expected options:
+
+- Automatic
+- Quiet
+- Balanced
+- Performance
+- Custom presets when implemented
+
+### Search Field
+
+Use a native rounded search field with search icon, compact height, and placeholder text. Search filters visible rows only; it should not change polling or backend state.
+
+### Buttons
 
-### HIG Push Button
-**Role:** Window chrome (Pin on Top, Hide, Preferences, About), dialog actions.
+Buttons should match macOS controls:
 
-Parchment `#fdfcfc` background, `#000000` text, 7px radius, `12px 16px` padding, 1px `#e5e5e5` border, `--shadow-hairline`. SF Pro Text 12px weight 400. Hover → `#f5f3f1`. Active/pressed → `--shadow-inset`. Focus → 2px `#000000` ring offset by 2px parchment.
+- push buttons for dialog actions,
+- toolbar icon buttons for compact commands,
+- bordered or material-backed controls for secondary actions,
+- destructive actions use system red only in confirmation contexts.
 
-### Filled Ink Primary Button
-**Role:** Primary dialog action (OK, Save), affirmative single action.
+Avoid custom pill styling. Radius should come from the control size and native material, not from a brand rule.
+
+### Sheets and Dialogs
+
+Use sheets for workflows attached to the current window:
+
+- preferences,
+- update confirmation,
+- helper access explanation.
+
+Use dialogs for app-level information:
+
+- About FanGuard,
+- critical safety warnings.
+
+Sheets should use `--material-sheet`, centered or attached to the parent window depending on implementation constraints in Tauri. Keep text short and controls native.
+
+### Popovers and Menus
+
+Use popovers for compact contextual controls:
+
+- preset menu,
+- sensor source details,
+- menu bar display mode,
+- row actions.
+
+Popover content should be narrow, dense, and keyboard reachable.
+
+### Temperature Status
+
+Temperature status is the main allowed semantic color usage:
+
+| Status | Meaning | Color |
+| --- | --- | --- |
+| Normal | below warning threshold | `--color-status-normal` |
+| Warm | approaching warning threshold | `--color-status-warm` |
+| Hot | above safe threshold | `--color-status-hot` |
+| Unknown | unavailable or unsupported | `--color-status-unknown` |
 
-`#000000` background, `#ffffff` text, 7px radius, 1px `#000000` border. SF Pro Text 12px weight 500. Hover → `#1a1a1a`. Disabled → Silver Mist bg + `#a59f97` text. Used sparingly — one primary per dialog.
+Use a small dot plus optional label. Do not flood table rows with colored backgrounds.
 
-### HIG Segmented Control
-**Role:** Fan Auto/Custom mode toggle, preferences tray-mode toggle.
+### Menu Bar
 
-Container: `#f5f3f1` background, 6px radius, 1px `#e5e5e5` border, connected segments divided by 1px `#e5e5e5`. Inactive segment: transparent bg, `#000000` text. Active segment: `#000000` bg, `#ffffff` text, SF Pro Text 11–12px weight 500. The Auto/Custom fan toggle is a 2-segment control; the active mode is filled ink, the other is outlined.
+The menu bar icon remains a macOS template asset:
 
-### HIG Pop-up Button
-**Role:** Active preset selector.
+- black source with alpha,
+- automatically adapts to light and dark menu bars,
+- supports compact telemetry text when enabled.
 
-Parchment `#fdfcfc` background, `#000000` text, 7px radius, 1px `#e5e5e5` border, `--shadow-hairline`, SF Pro Text 12px weight 400, with a chevron glyph on the right. Opens a floating menu (see List Menu).
+Menu bar display modes:
 
-### List Menu (dropdown)
-**Role:** Preset list, pop-up menus.
+- fan RPM,
+- primary temperature,
+- icon only.
 
-`#ffffff` elevated panel, 10px radius, `--shadow-elevated`, min-width matches trigger. Menu items: `8px 12px` padding, SF Pro Text 12px, hairline `#e5e5e5` dividers between groups. Hover/focus → `#f5f3f1` (no blue). Selected item → ink `Check` icon (lucide), label weight 500. Destructive (delete) → `X` icon in Driftwood, hover to Ember only if confirming a hot/unsafe preset. Never `bg-blue-500`.
+Menu bar popover should reuse the same Liquid Glass material language as app popovers.
 
-### Edge-to-Edge List Pane
-**Role:** Fan table (left) and sensor list (right).
+## Implementation Notes
 
-Parchment `#fdfcfc` canvas. Column header row: `#f5f3f1` Warm Sand, SF Pro Text 11px weight 500 Driftwood, 1px `#e5e5e5` bottom border. Data rows separated by 1px `#e5e5e5` hairline `divide-y` (no zebra fill). Hover → `#efedea`. Values in SF Mono 12px tabular-nums. Panes divided by a 1px `#e5e5e5` vertical hairline. No outer rounded card — panes run edge-to-edge like Activity Monitor.
+### Svelte and Tailwind
 
-### Status Dot
-**Role:** Sensor temperature state.
+- Keep styling in Tailwind v4 utilities backed by CSS custom properties.
+- Use the shared `cn()` helper for dynamic classes.
+- Use Svelte 5 runes for state.
+- Prefer native-looking controls over hand-built decorative widgets.
+- Keep component boundaries aligned with product surfaces: `Window`, `Toolbar`, `FanControl`, `DataTable`, `Sheet`, `Popover`.
 
-6px circle. `< 85°C` → Driftwood `#777169` (monochrome). `≥ 85°C` → Ember `#ff4704` (the single safety signal). `null` → Silver Mist `#b1b0b0`. No green/yellow.
+### Tauri Window
 
-### HIG Dialog Panel
-**Role:** FanControlModal, Preferences, About, Update.
+The Tauri window should support the native design direction:
 
-`#ffffff` Elevated surface, 10px radius, `--shadow-elevated`, `20px` padding, 1px `#e5e5e5` border. Title in SF Pro Text 13px weight 600 ink (or DM Sans 300 for large About headings). Body SF Pro Text 12–13px. Buttons right-aligned: Cancel = HIG Push Button, OK = Filled Ink Primary. Backdrop `rgba(0,0,0,0.18)`. No `shadow-2xl`.
+- transparent or translucent window where supported,
+- rounded corners,
+- hidden or integrated titlebar if the implementation can preserve drag regions and accessibility,
+- stable minimum dimensions for dense table scanning.
 
-### Text Field
-**Role:** RPM input, preset name, temperature thresholds.
+Do not sacrifice accessibility or window behavior just to simulate glass. Native window semantics win when there is a tradeoff.
 
-Parchment `#fdfcfc` (or `#ffffff` inside elevated dialogs) background, 5px radius, 1px `#e5e5e5` border, `4px 8px` padding, SF Pro Text 12px. Numeric inputs use SF Mono tabular-nums, right-aligned. Focus → 2px ink ring. Error → 1px Ember border + Ember helper text below.
+### Accessibility
 
-### Temperature Range Bar
-**Role:** FanControlModal sensor-based config visualization.
+- All controls need keyboard focus states.
+- Table rows need readable selected, hover, and inactive states.
+- Color cannot be the only indicator for temperature state.
+- Search and filter controls need accessible names.
+- Dialogs and sheets need focus trapping and escape/close behavior.
 
-Track: `#f5f3f1` Warm Sand, full width, 8px height, 4px radius. Range fill: `#000000` ink (monochrome — no green→yellow→red gradient). Live-current-temp marker: 12px ink circle with 2px parchment border, positioned along the track; turns **Ember `#ff4704`** only when the live reading is `≥ 85°C`. Labels in SF Mono 10px Driftwood.
+### Performance
 
-### Safety / Warning Callout
-**Role:** Extreme fan-setting warning, privilege/safety errors.
+Liquid Glass effects can be expensive in a webview. Apply blur to major surfaces only:
 
-Warm Sand `#f5f3f1` background, 8px radius, 1px **Ember** border (the sanctioned safety use), SF Pro Text 11px ink text with a lucide `AlertTriangle` icon in Ember. No amber fill. This is the only place Ember is used as a border/fill accent.
+- window,
+- toolbar,
+- sheets,
+- popovers.
 
----
+Do not apply backdrop blur to every row or cell. Data tables should stay visually crisp and cheap to render.
 
-## FanGuard Deviations from ElevenLabs Dogma
+## Do and Do Not
 
-These deviations are intentional and documented, in service of matching the Apple ecosystem and the safety needs of a fan-control utility:
+### Do
 
-1. **Ember `#ff4704` as a safety signal** — ElevenLabs reserves color for decorative orbs only. FanGuard reuses Ember exclusively for hot-temperature (≥85°C) indication (status dots, range-bar marker, warning callout border). It is never used for buttons, links, or hover states.
-2. **Decorative gradient orbs omitted** — The violet/orange ambient orbs are a voice-category marketing device; they have no place in a utility. Void Violet is retained as a token but unused in chrome.
-3. **HIG rectangular-rounded geometry instead of 9999px pills** — Buttons, pop-ups, and dialogs use macOS-native radii (5–10px). Capsules (9999px) appear only for small HIG badge contexts.
-4. **SF Pro Text + SF Mono instead of Inter + Geist Mono** — Apple's system fonts keep the app native to macOS. DM Sans weight 300 is retained for display headings to preserve the ElevenLabs "Waldenburg 300" headline personality.
-5. **Edge-to-edge hairline panes instead of floating rounded cards** — Matches Activity Monitor / System Settings information density.
-6. **Light-only** — The parchment system is a warm-light theme; dark mode is dropped for design coherence.
+- Use SF Pro Text and SF Mono.
+- Use Liquid Glass materials for app-level surfaces.
+- Keep telemetry rows compact and table-based.
+- Use macOS blue for active selection.
+- Keep temperature colors small and semantic.
+- Preserve native controls, keyboard behavior, and system expectations.
 
----
+### Do Not
 
-## Do
+- Build a marketing dashboard.
+- Use large hero typography.
+- Put every sensor in a separate decorative card.
+- Invent brand-specific button shapes.
+- Use decorative gradients as app surfaces.
+- Hide important fan or temperature data behind oversized controls.
+- Use blur effects inside dense tables.
 
-- Use HIG push-button geometry (7px) for window chrome and dialog actions; reserve Filled Ink for one primary action per dialog.
-- Use SF Mono with `tabular-nums` for every numeric metric (RPM, °C) so columns align.
-- Separate rows and panes with 1px `#e5e5e5` hairlines; let surface contrast (`#fdfcfc` / `#f5f3f1` / `#ffffff`) carry elevation.
-- Use the HIG segmented control for the Auto/Custom fan-mode toggle — active segment filled ink, inactive outlined.
-- Reserve Ember `#ff4704` strictly for hot (≥85°C) status dots, the range-bar live marker, and warning-callout borders.
-- Use lucide outlined icons at consistent stroke width, monochrome (Driftwood or Ink) — never multicolor.
-- Apply DM Sans 300 only to display-size headings (About title, large empty states); everything else is SF Pro Text / SF Mono.
+## Verification Checklist
 
-## Don't
+Use this checklist when implementing UI from this design document:
 
-- Never use Ember `#ff4704` or Void Violet `#0447ff` for button backgrounds, link colors, hover states, or any interactive affordance.
-- Never use green/yellow/red semantic status colors — temperature state is monochrome except the Ember hot signal.
-- Never apply soft-blur shadows (blur > 4px or opacity > 0.04) — elevation is hairlines and surface contrast.
-- Never use 9999px pill buttons as the default chrome — HIG rectangular-rounded geometry is the standard.
-- Never use DM Sans for body text, labels, buttons, or data — SF Pro Text / SF Mono handle all functional text.
-- Never add `dark:` variants or hardcoded dark hex values — the system is light-only.
-- Never use emojis in chrome — replace `⚠` / `✓` / `✕` with lucide `AlertTriangle` / `Check` / `X`.
+- The app reads as a macOS utility at first glance.
+- The rendered dashboard visually matches the canonical generated image before alternate layout changes.
+- The toolbar, fan control, sheets, and popovers use Liquid Glass materials.
+- Main telemetry uses dense list/table structure.
+- Numeric columns align with SF Mono tabular numbers.
+- Active selection uses macOS blue.
+- Temperature status uses small semantic indicators.
+- All controls remain keyboard accessible.
+- Dark mode changes tokens, not component structure.
+- Performance remains smooth during sensor polling.
diff --git a/docs/learning/dev-setup.md b/docs/learning/dev-setup.md
index 2dd035c..0aab85f 100644
--- a/docs/learning/dev-setup.md
+++ b/docs/learning/dev-setup.md
@@ -415,3 +415,17 @@ cargo build --profile=release-with-debug
 - [Rust Basics](./rust-basics.md) - Learn Rust fundamentals
 - [Tauri Architecture](./tauri-architecture.md) - Understand the stack
 - [Testing Strategy](./testing.md) - Deep dive into testing
+# Troubleshooting the Tauri development port
+
+FanGuard reserves `http://localhost:5173` for both Vite and Tauri. Vite uses
+`strictPort`, so development startup stops instead of silently moving to a port
+that Tauri is not configured to load.
+
+If startup reports that port 5173 is already in use, identify the owning process:
+
+```bash
+lsof -nP -iTCP:5173 -sTCP:LISTEN
+```
+
+Stop that development server, then run `pnpm run tauri dev` again. Do not change
+only the Vite port because `src-tauri/tauri.conf.json` must use the same URL.
diff --git a/docs/release-guide.md b/docs/release-guide.md
index cc4bbf1..16d35b2 100644
--- a/docs/release-guide.md
+++ b/docs/release-guide.md
@@ -66,7 +66,7 @@ git push origin v0.1.0-beta.1
 The `release.yml` workflow triggers on any `v*` tag push. It:
 - Builds a universal macOS binary (Intel + Apple Silicon)
 - Imports the Developer ID certificate into a temporary CI keychain
-- Signs, notarizes, and staples the macOS app bundle
+- Signs, notarizes, staples, mounts, and verifies the final DMG through `scripts/tauri-release-build.sh`
 - Creates a draft GitHub Release with the `.dmg` attached
 - Generates `latest.json` for the auto-updater
 - Marks it as a prerelease (for beta tags)
@@ -74,7 +74,7 @@ The `release.yml` workflow triggers on any `v*` tag push. It:
 Local direct-distribution builds that need the helper should use:
 
 ```bash
-pnpm tauri:build:direct
+./scripts/build-local-notarized.sh
 ```
 
 ### 4. Publish the draft release
diff --git a/docs/screenshots/fanguard-native-960-fixed.png b/docs/screenshots/fanguard-native-960-fixed.png
new file mode 100644
index 0000000..dc7b7ec
Binary files /dev/null and b/docs/screenshots/fanguard-native-960-fixed.png differ
diff --git a/e2e/dashboard-layout.spec.ts b/e2e/dashboard-layout.spec.ts
new file mode 100644
index 0000000..7ea9094
--- /dev/null
+++ b/e2e/dashboard-layout.spec.ts
@@ -0,0 +1,85 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("FanGuard dashboard Liquid Glass layout", () => {
+	test("fits the configured 960 by 540 Tauri viewport without clipping controls", async ({
+		page,
+	}) => {
+		// Tauri's configured 960x540 window leaves roughly 486 CSS pixels for
+		// the webview after the native macOS title bar.
+		await page.setViewportSize({ width: 960, height: 486 });
+		await page.goto("/");
+
+		const restoreButton = page.getByRole("button", { name: "Restore Auto" });
+		const applyButton = page.getByRole("button", { name: "Apply" });
+		const targetSlider = page.getByRole("slider", { name: "Target RPM" });
+		const telemetryHeader = page.getByText("Name", { exact: true });
+		const restoreBounds = await restoreButton.boundingBox();
+		const applyBounds = await applyButton.boundingBox();
+		const sliderBounds = await targetSlider.boundingBox();
+
+		expect(restoreBounds).not.toBeNull();
+		expect((restoreBounds?.x ?? 960) + (restoreBounds?.width ?? 1)).toBeLessThanOrEqual(960);
+		await expect(restoreButton).toBeInViewport();
+		await expect(telemetryHeader).toBeInViewport();
+		await expect(page.getByText("System Fan 1", { exact: true })).toBeInViewport();
+		expect((sliderBounds?.x ?? 0) + (sliderBounds?.width ?? 960)).toBeLessThanOrEqual(
+			applyBounds?.x ?? 0,
+		);
+		expect(
+			await page.evaluate(() => document.documentElement.scrollWidth),
+		).toBeLessThanOrEqual(960);
+	});
+
+	test("renders a single-window dashboard without sidebar or fake navigation", async ({
+		page,
+	}) => {
+		await page.goto("/");
+
+		await expect(page.getByRole("heading", { name: "FanGuard" })).toBeVisible();
+		await expect(page.getByText("Fan Control", { exact: true })).toBeVisible();
+		await expect(page.getByRole("button", { name: "More actions" })).toBeVisible();
+		await expect(page.getByRole("searchbox", { name: "Search sensors" })).toBeVisible();
+
+		await expect(page.getByRole("button", { name: /^Fans\b/ })).toBeVisible();
+		await expect(
+			page.getByRole("button", { name: /^Temperature Sensors/ }),
+		).toBeVisible();
+		await expect(page.getByRole("button", { name: /^Disk Drives/ })).toBeVisible();
+
+		await expect(page.getByRole("button", { name: /Back/i })).toHaveCount(0);
+		await expect(page.getByRole("button", { name: /Forward/i })).toHaveCount(0);
+		await expect(page.getByRole("button", { name: /to custom mode$/i })).toHaveCount(0);
+		await expect(page.getByRole("dialog")).toHaveCount(0);
+
+		await expect(page.getByText("SMC Connected")).toBeVisible();
+		await expect(page.getByText("MacBookPro18,3")).toBeVisible();
+	});
+
+	test("collapses and expands a disclosure group", async ({ page }) => {
+		await page.goto("/");
+
+		const temperatureGroup = page.getByRole("button", {
+			name: /^Temperature Sensors/,
+		});
+		await expect(temperatureGroup).toHaveAttribute("aria-expanded", "true");
+		await expect(page.getByText("Battery", { exact: true })).toBeVisible();
+
+		await temperatureGroup.click();
+		await expect(temperatureGroup).toHaveAttribute("aria-expanded", "false");
+		await expect(
+			page.getByText("Battery", { exact: true }),
+		).not.toBeVisible();
+	});
+
+	test("filters visible telemetry rows without changing global control", async ({
+		page,
+	}) => {
+		await page.goto("/");
+
+		await page.getByRole("searchbox", { name: "Search sensors" }).fill("gpu");
+
+		await expect(page.getByText("Fan Control", { exact: true })).toBeVisible();
+		await expect(page.getByText("GPU Cluster (AGX)")).toBeVisible();
+		await expect(page.getByText("Battery", { exact: true })).not.toBeVisible();
+	});
+});
diff --git a/e2e/fan-control.spec.ts b/e2e/fan-control.spec.ts
index 4c40cc9..2b9f95e 100644
--- a/e2e/fan-control.spec.ts
+++ b/e2e/fan-control.spec.ts
@@ -1,42 +1,42 @@
 import { expect, test } from "@playwright/test";
 
-test("fan control auto to custom rpm to auto flow", async ({ page }) => {
-	await page.goto("/");
-
-	await expect(page.getByRole("button", { name: "Set Fan 0 to auto mode" })).toBeVisible({
-		timeout: 15_000,
+test.describe("FanGuard global fan control", () => {
+	test("applies one manual RPM target to all detected fans", async ({ page }) => {
+		await page.goto("/");
+
+		await expect(page.getByText("1200", { exact: true })).toBeVisible();
+		await expect(page.getByText("6550", { exact: true })).toBeVisible();
+		await expect(page.getByText(/Current average: [\d,]+ RPM/)).toBeVisible();
+		await page.getByRole("button", { name: "Manual" }).click();
+		await page.getByLabel("Target RPM").fill("5000");
+		await expect(page.getByText("5000 RPM", { exact: true })).toBeVisible();
+		await page.getByRole("button", { name: "Apply" }).click();
+
+		await expect(page.getByRole("alert")).toHaveCount(0);
+		await expect(page.getByText("Applied 5000 RPM to 3 fans.")).toBeVisible();
+		await expect(page.getByText("System Fan 1")).toBeVisible();
+		await expect(page.getByText("System Fan 2")).toBeVisible();
+		await expect(page.getByText("System Fan 3")).toBeVisible();
+		await expect(page.getByText("Synced")).toHaveCount(3);
 	});
 
-	const autoButton = page.getByRole("button", { name: "Set Fan 0 to auto mode" });
-	const customButton = page.getByRole("button", { name: "Set Fan 0 to custom mode" });
-
-	await expect(autoButton).toHaveClass(/control-active-text/);
-	await expect(customButton).not.toHaveClass(/control-active-text/);
-
-	await customButton.click();
-	await expect(page.getByRole("dialog")).toBeVisible();
-
-	const rpmInput = page.getByRole("spinbutton", {
-		name: /Target RPM for Fan 0/i,
+	test("restores automatic control for all detected fans", async ({ page }) => {
+		await page.goto("/");
+
+		await page.getByRole("button", { name: "Manual" }).click();
+		await page.getByLabel("Target RPM").fill("5000");
+		await page.getByRole("button", { name: "Apply" }).click();
+		await page.getByRole("button", { name: "Restore Auto" }).click();
+
+		await expect(page.getByText("Restored automatic control for 3 fans.")).toBeVisible();
+		await expect(
+			page.locator('[role="row"]').filter({ hasText: "System Fan 1" }).getByText("Auto", { exact: true }),
+		).toBeVisible();
+		await expect(
+			page.locator('[role="row"]').filter({ hasText: "System Fan 2" }).getByText("Auto", { exact: true }),
+		).toBeVisible();
+		await expect(
+			page.locator('[role="row"]').filter({ hasText: "System Fan 3" }).getByText("Auto", { exact: true }),
+		).toBeVisible();
 	});
-	await rpmInput.fill("5000");
-	await page.getByRole("button", { name: "OK" }).click();
-
-	await expect(page.getByRole("button", { name: "Set Fan 0 to custom mode" })).toHaveClass(/control-active-text/, {
-		timeout: 10_000,
-	});
-	await expect(page.getByRole("button", { name: "Set Fan 0 to custom mode" })).toContainText(
-		"Constant value of 5000",
-	);
-	await expect(page.getByRole("button", { name: "Set Fan 0 to auto mode" })).not.toHaveClass(/control-active-text/);
-
-	await page.getByRole("button", { name: "Set Fan 0 to auto mode" }).click();
-	await expect(page.getByRole("button", { name: "Set Fan 0 to custom mode" })).toHaveText(
-		"Custom...",
-		{ timeout: 10_000 },
-	);
-	await expect(page.getByRole("button", { name: "Set Fan 0 to auto mode" })).toHaveClass(/control-active-text/);
-	await expect(page.getByRole("button", { name: "Set Fan 0 to custom mode" })).not.toHaveClass(
-		/control-active-text/,
-	);
 });
diff --git a/package.json b/package.json
index 373d97f..9a9f4e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "fanguard",
-	"version": "0.1.0-beta.4",
+	"version": "0.1.0-beta.5",
 	"private": true,
 	"description": "FanGuard — macOS fan control application built with Tauri v2 and Svelte 5",
 	"author": "naufaldi",
diff --git a/playwright.config.ts b/playwright.config.ts
index e3643e3..f07c9b5 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
 		trace: "off",
 	},
 	webServer: {
-		command: "VITE_E2E_MOCK=true pnpm dev",
+		command: "VITE_E2E_MOCK=true ./node_modules/.bin/vite --port 1420 --strictPort",
 		url: "http://localhost:1420",
 		timeout: 120_000,
 		reuseExistingServer: !process.env.CI,
diff --git a/scripts/build-local-notarized.sh b/scripts/build-local-notarized.sh
index 7f4a26a..3d04d39 100755
--- a/scripts/build-local-notarized.sh
+++ b/scripts/build-local-notarized.sh
@@ -1,6 +1,23 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
-source "$HOME/.config/fanguard/notarization.env"
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+CREDENTIALS_FILE="${FANGUARD_NOTARIZATION_ENV:-$HOME/.config/fanguard/notarization.env}"
+DMG_DIR="${FANGUARD_DMG_DIR:-$PROJECT_ROOT/src-tauri/target/release/bundle/dmg}"
 
-pnpm tauri build
+if [[ ! -f "$CREDENTIALS_FILE" ]]; then
+	printf 'Missing notarization credentials: %s\n' "$CREDENTIALS_FILE" >&2
+	exit 1
+fi
+
+# shellcheck source=/dev/null
+set -a
+source "$CREDENTIALS_FILE"
+set +a
+
+if [[ "${FANGUARD_SKIP_BUILD:-0}" != "1" ]]; then
+	cd "$PROJECT_ROOT"
+	pnpm tauri build
+fi
+
+FANGUARD_DMG_DIR="$DMG_DIR" "$PROJECT_ROOT/scripts/notarize-dmg.sh"
diff --git a/scripts/notarize-dmg.sh b/scripts/notarize-dmg.sh
new file mode 100755
index 0000000..c0a88d9
--- /dev/null
+++ b/scripts/notarize-dmg.sh
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+DMG_DIR="${FANGUARD_DMG_DIR:-$PROJECT_ROOT/src-tauri/target/release/bundle/dmg}"
+MOUNT_DIR=""
+
+require_env() {
+	local name="$1"
+	[[ -n "${!name:-}" ]] || { printf 'Missing required environment variable: %s\n' "$name" >&2; exit 1; }
+}
+
+find_only() {
+	local label="$1"
+	local directory="$2"
+	local paths=()
+	shopt -s nullglob
+	case "$label" in
+		DMG) paths=("$directory"/*.dmg) ;;
+		app) paths=("$directory"/*.app) ;;
+		*) printf 'Unsupported artifact label: %s\n' "$label" >&2; exit 1 ;;
+	esac
+	shopt -u nullglob
+	[[ "${#paths[@]}" -eq 1 ]] || { printf 'Expected exactly one %s in %s, found %s\n' "$label" "$directory" "${#paths[@]}" >&2; exit 1; }
+	printf '%s\n' "${paths[0]}"
+}
+
+cleanup() {
+	[[ -z "$MOUNT_DIR" ]] || hdiutil detach "$MOUNT_DIR" >/dev/null 2>&1 || true
+	[[ -z "$MOUNT_DIR" ]] || rmdir "$MOUNT_DIR" 2>/dev/null || true
+}
+
+verify_app() {
+	local app_path="$1"
+	local helper_path="$app_path/Contents/MacOS/fanguard-helper"
+	[[ -f "$helper_path" ]] || { printf 'Missing bundled helper: %s\n' "$helper_path" >&2; return 1; }
+	codesign --verify --deep --strict --verbose=4 "$app_path"
+	codesign --verify --strict --verbose=4 "$helper_path"
+	spctl --assess --type execute --verbose=4 "$app_path"
+	xcrun stapler validate -v "$app_path"
+}
+
+verify_dmg() {
+	local dmg_path="$1"
+	codesign --verify --strict --verbose=4 "$dmg_path"
+	spctl --assess --type open --context context:primary-signature --verbose=4 "$dmg_path"
+	xcrun stapler validate -v "$dmg_path"
+}
+
+require_env APPLE_ID
+require_env APPLE_PASSWORD
+require_env APPLE_TEAM_ID
+security find-identity -v -p codesigning | grep -F "Developer ID Application" >/dev/null || {
+	printf 'No valid Developer ID Application identity found in the current keychain search list\n' >&2
+	exit 1
+}
+
+DMG_PATH="$(find_only DMG "$DMG_DIR")"
+printf 'Submitting final DMG for notarization: %s\n' "$DMG_PATH"
+xcrun notarytool submit "$DMG_PATH" \
+	--apple-id "$APPLE_ID" \
+	--password "$APPLE_PASSWORD" \
+	--team-id "$APPLE_TEAM_ID" \
+	--wait
+xcrun stapler staple -v "$DMG_PATH"
+verify_dmg "$DMG_PATH"
+
+MOUNT_DIR="$(mktemp -d "${TMPDIR:-/tmp}/fanguard-dmg.XXXXXX")"
+trap cleanup EXIT
+hdiutil attach "$DMG_PATH" -nobrowse -readonly -mountpoint "$MOUNT_DIR" >/dev/null
+APP_PATH="$(find_only app "$MOUNT_DIR")"
+verify_app "$APP_PATH"
+printf 'Verified notarized FanGuard distribution: %s\n' "$DMG_PATH"
diff --git a/scripts/tauri-release-build.sh b/scripts/tauri-release-build.sh
new file mode 100755
index 0000000..8122dc7
--- /dev/null
+++ b/scripts/tauri-release-build.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+cd "$PROJECT_ROOT"
+pnpm tauri "$@"
+
+find_target() {
+	[[ "$#" -gt 0 ]] || return 0
+	[[ "$1" != "--target" ]] || { printf '%s\n' "${2:-}"; return 0; }
+	shift
+	find_target "$@"
+}
+
+TARGET="$(find_target "$@")"
+
+if [[ -n "$TARGET" ]]; then
+	FANGUARD_DMG_DIR="$PROJECT_ROOT/src-tauri/target/$TARGET/release/bundle/dmg" \
+		"$PROJECT_ROOT/scripts/notarize-dmg.sh"
+else
+	"$PROJECT_ROOT/scripts/notarize-dmg.sh"
+fi
diff --git a/scripts/tests/build-local-notarized.test.sh b/scripts/tests/build-local-notarized.test.sh
new file mode 100755
index 0000000..315a280
--- /dev/null
+++ b/scripts/tests/build-local-notarized.test.sh
@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+SCRIPT_PATH="$PROJECT_ROOT/scripts/build-local-notarized.sh"
+
+fail() {
+	printf 'FAIL: %s\n' "$1" >&2
+	exit 1
+}
+
+assert_contains() {
+	local output="$1"
+	local expected="$2"
+
+	[[ "$output" == *"$expected"* ]] || fail "expected output to contain: $expected"
+}
+
+test_rejects_multiple_dmg_candidates() {
+	local temp_dir
+	temp_dir="$(mktemp -d)"
+	trap 'rm -rf "$temp_dir"' RETURN
+	mkdir -p "$temp_dir/home/.config/fanguard" "$temp_dir/bundle" "$temp_dir/bin"
+	printf '%s\n' \
+		'APPLE_ID=test@example.com' \
+		'APPLE_PASSWORD=test-password' \
+		'APPLE_TEAM_ID=TESTTEAM' \
+		>"$temp_dir/home/.config/fanguard/notarization.env"
+	touch "$temp_dir/bundle/first.dmg" "$temp_dir/bundle/second.dmg"
+	printf '%s\n' '#!/usr/bin/env bash' 'printf "%s\n" "1) test Developer ID Application"' >"$temp_dir/bin/security"
+	chmod +x "$temp_dir/bin/security"
+
+	local output
+	local status
+	set +e
+	output="$(
+		HOME="$temp_dir/home" \
+		PATH="$temp_dir/bin:$PATH" \
+		FANGUARD_SKIP_BUILD=1 \
+		FANGUARD_DMG_DIR="$temp_dir/bundle" \
+		bash "$SCRIPT_PATH" 2>&1
+	)"
+	status=$?
+	set -e
+
+	[[ "$status" -ne 0 ]] || fail "multiple DMGs must return a non-zero exit code"
+	assert_contains "$output" "Expected exactly one DMG"
+}
+
+test_detaches_verified_dmg() {
+	local temp_dir
+	temp_dir="$(mktemp -d)"
+	trap 'rm -rf "$temp_dir"' RETURN
+	mkdir -p "$temp_dir/bin" "$temp_dir/bundle"
+	touch "$temp_dir/bundle/FanGuard.dmg"
+
+	printf '%s\n' '#!/usr/bin/env bash' 'printf "%s\n" "1) test Developer ID Application"' >"$temp_dir/bin/security"
+	printf '%s\n' '#!/usr/bin/env bash' 'exit 0' >"$temp_dir/bin/xcrun"
+	printf '%s\n' '#!/usr/bin/env bash' 'exit 0' >"$temp_dir/bin/codesign"
+	printf '%s\n' '#!/usr/bin/env bash' 'exit 0' >"$temp_dir/bin/spctl"
+	printf '%s\n' \
+		'#!/usr/bin/env bash' \
+		'if [[ "$1" == "attach" ]]; then' \
+		'  mount_dir="${@: -1}"' \
+		'  mkdir -p "$mount_dir/FanGuard.app/Contents/MacOS"' \
+		'  touch "$mount_dir/FanGuard.app/Contents/MacOS/fanguard-helper"' \
+		'fi' \
+		'[[ "$1" != "detach" ]] || printf "detached\n" >>"$FANGUARD_TEST_LOG"' \
+		>"$temp_dir/bin/hdiutil"
+	chmod +x "$temp_dir/bin/"*
+
+	APPLE_ID=test@example.com \
+	APPLE_PASSWORD=test-password \
+	APPLE_TEAM_ID=TESTTEAM \
+	FANGUARD_DMG_DIR="$temp_dir/bundle" \
+	FANGUARD_TEST_LOG="$temp_dir/hdiutil.log" \
+	PATH="$temp_dir/bin:$PATH" \
+		bash "$PROJECT_ROOT/scripts/notarize-dmg.sh" >/dev/null
+
+	[[ "$(<"$temp_dir/hdiutil.log")" == "detached" ]] || fail "verified DMG must be detached during cleanup"
+}
+
+test_rejects_multiple_dmg_candidates
+test_detaches_verified_dmg
+printf 'PASS: build-local-notarized tests\n'
diff --git a/scripts/tests/release-workflow.test.sh b/scripts/tests/release-workflow.test.sh
new file mode 100755
index 0000000..fed2b2b
--- /dev/null
+++ b/scripts/tests/release-workflow.test.sh
@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+WORKFLOW="$PROJECT_ROOT/.github/workflows/release.yml"
+
+grep -Fq 'tauriScript: ./scripts/tauri-release-build.sh' "$WORKFLOW" || {
+	printf 'FAIL: release workflow must build through the DMG verification wrapper\n' >&2
+	exit 1
+}
+
+printf 'PASS: release workflow uses the verified build wrapper\n'
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 6f98175..d6b7214 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -934,7 +934,7 @@ dependencies = [
 
 [[package]]
 name = "fanguard"
-version = "0.1.0-beta.4"
+version = "0.1.0-beta.5"
 dependencies = [
  "core-foundation",
  "ctrlc",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 1293b1d..393c2a2 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "fanguard"
-version = "0.1.0-beta.4"
+version = "0.1.0-beta.5"
 description = "FanGuard — macOS fan control utility: monitor temperatures and manage fan speeds via SMC"
 authors = ["naufaldi"]
 license = "MIT"
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index 6cb0e72..cbbdb9c 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -292,6 +292,43 @@ pub fn set_fan_auto(app_handle: AppHandle, fan_index: u8) -> Result<(), String>
     apply_set_fan_auto(&app_handle, fan_index)
 }
 
+#[tauri::command]
+pub fn set_all_fans_constant_rpm(
+    state: State<'_, AppState>,
+    rpm: f32,
+) -> Result<(), String> {
+    let writer_guard = state.smc_writer.lock().map_err(|error| error.to_string())?;
+    let writer = writer_guard.as_deref().ok_or_else(|| {
+        "Fan control unavailable — install or reconnect the privileged helper".to_string()
+    })?;
+    let mut service = SensorService::new();
+    let sensor_data = service.read_all_sensors().map_err(|error| error.to_string())?;
+
+    state
+        .fan_control
+        .lock()
+        .map_err(|error| error.to_string())?
+        .set_all_constant_rpm(rpm, &sensor_data.fans, writer)
+        .map_err(|error| error.to_string())
+}
+
+#[tauri::command]
+pub fn restore_all_fans_auto(state: State<'_, AppState>) -> Result<(), String> {
+    let writer_guard = state.smc_writer.lock().map_err(|error| error.to_string())?;
+    let writer = writer_guard.as_deref().ok_or_else(|| {
+        "Fan control unavailable — install or reconnect the privileged helper".to_string()
+    })?;
+    let mut service = SensorService::new();
+    let sensor_data = service.read_all_sensors().map_err(|error| error.to_string())?;
+
+    state
+        .fan_control
+        .lock()
+        .map_err(|error| error.to_string())?
+        .restore_detected_fans_auto(&sensor_data.fans, writer)
+        .map_err(|error| error.to_string())
+}
+
 #[tauri::command]
 pub fn get_fan_control_configs(
     state: State<'_, AppState>,
diff --git a/src-tauri/src/fan_control.rs b/src-tauri/src/fan_control.rs
index cf5b053..c0aed4b 100644
--- a/src-tauri/src/fan_control.rs
+++ b/src-tauri/src/fan_control.rs
@@ -6,6 +6,7 @@
 use std::collections::HashMap;
 
 use serde::{Deserialize, Serialize};
+use thiserror::Error;
 
 use crate::log::warn_log;
 use crate::smc::{FanData, FanMode, Sensor};
@@ -20,6 +21,29 @@ const EMERGENCY_CLEAR_THRESHOLD: f64 = 90.0;
 /// the linked fan is forced to max RPM for thermal safety.
 const SENSOR_MISS_LIMIT: u32 = 3;
 
+#[derive(Debug, Error)]
+pub enum GlobalFanControlError {
+    #[error("No fans were detected")]
+    NoFans,
+    #[error("Detected fans do not share a safe RPM range")]
+    NoSharedRange,
+    #[error("Target RPM {requested:.0} is outside the shared safe range {min_rpm:.0}-{max_rpm:.0}")]
+    TargetOutOfRange {
+        requested: f32,
+        min_rpm: f32,
+        max_rpm: f32,
+    },
+    #[error("Failed to apply {requested:.0} RPM to fan {fan_index}: {source}. Recovery: {recovery}")]
+    ApplyFailed {
+        requested: f32,
+        fan_index: u8,
+        source: SmcWriteError,
+        recovery: String,
+    },
+    #[error("Failed to restore automatic fan control: {0}")]
+    RestoreFailed(String),
+}
+
 // ── Fan control configuration ────────────────────────────────────────────────
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
@@ -77,6 +101,102 @@ impl FanControlState {
         Ok(())
     }
 
+    pub fn set_all_constant_rpm(
+        &mut self,
+        target_rpm: f32,
+        fans: &[FanData],
+        writer: &dyn SmcWriteApi,
+    ) -> Result<(), GlobalFanControlError> {
+        if fans
+            .iter()
+            .any(|fan| !fan.min.is_finite() || !fan.max.is_finite() || fan.min > fan.max)
+        {
+            return Err(GlobalFanControlError::NoSharedRange);
+        }
+        let (min_rpm, max_rpm) = fans
+            .iter()
+            .map(|fan| (fan.min, fan.max))
+            .reduce(|left, right| (left.0.max(right.0), left.1.min(right.1)))
+            .ok_or(GlobalFanControlError::NoFans)?;
+
+        if min_rpm > max_rpm {
+            return Err(GlobalFanControlError::NoSharedRange);
+        }
+        if !target_rpm.is_finite() || target_rpm < min_rpm || target_rpm > max_rpm {
+            return Err(GlobalFanControlError::TargetOutOfRange {
+                requested: target_rpm,
+                min_rpm,
+                max_rpm,
+            });
+        }
+
+        let apply_result = fans.iter().try_fold(Vec::<u8>::new(), |touched, fan| {
+            let next_touched = touched
+                .iter()
+                .copied()
+                .chain(std::iter::once(fan.index))
+                .collect::<Vec<_>>();
+            writer
+                .set_fan_target_rpm(fan.index, target_rpm, fan.min, fan.max)
+                .map(|()| next_touched.clone())
+                .map_err(|source| (fan.index, source, next_touched))
+        });
+
+        match apply_result {
+            Ok(touched) => {
+                self.configs = touched
+                    .into_iter()
+                    .map(|fan_index| {
+                        (fan_index, FanControlConfig::ConstantRpm { target_rpm })
+                    })
+                    .collect();
+                Ok(())
+            }
+            Err((fan_index, source, touched)) => {
+                let recovery = restore_fan_indices(&touched, writer);
+                self.configs = recovery
+                    .retry_indices
+                    .iter()
+                    .copied()
+                    .map(|index| (index, FanControlConfig::ConstantRpm { target_rpm }))
+                    .collect();
+                Err(GlobalFanControlError::ApplyFailed {
+                    requested: target_rpm,
+                    fan_index,
+                    source,
+                    recovery: recovery.message,
+                })
+            }
+        }
+    }
+
+    pub fn restore_detected_fans_auto(
+        &mut self,
+        fans: &[FanData],
+        writer: &dyn SmcWriteApi,
+    ) -> Result<(), GlobalFanControlError> {
+        if fans.is_empty() {
+            return Err(GlobalFanControlError::NoFans);
+        }
+        let fan_indices = fans.iter().map(|fan| fan.index).collect::<Vec<_>>();
+        let recovery = restore_fan_indices(&fan_indices, writer);
+        self.configs.retain(|index, _| recovery.retry_indices.contains(index));
+        fans.iter()
+            .filter(|fan| recovery.retry_indices.contains(&fan.index))
+            .for_each(|fan| {
+                self.configs.entry(fan.index).or_insert(
+                    FanControlConfig::ConstantRpm {
+                        target_rpm: fan.target,
+                    },
+                );
+            });
+        if recovery.retry_indices.is_empty() {
+            Ok(())
+        } else {
+            Err(GlobalFanControlError::RestoreFailed(recovery.message))
+        }
+    }
+
     /// Removes a fan's config (returns it to Auto) and applies.
     /// Re-locks thermal control if no fans remain in a forced mode.
     pub fn set_auto(
@@ -243,6 +363,44 @@ impl FanControlState {
     }
 }
 
+struct RecoveryOutcome {
+    retry_indices: Vec<u8>,
+    message: String,
+}
+
+fn restore_fan_indices(fan_indices: &[u8], writer: &dyn SmcWriteApi) -> RecoveryOutcome {
+    let failures = fan_indices
+        .iter()
+        .filter_map(|fan_index| {
+            writer
+                .set_fan_auto(*fan_index)
+                .err()
+                .map(|error| (*fan_index, format!("fan {fan_index}: {error}")))
+        })
+        .collect::<Vec<_>>();
+    let lock_failure = writer.lock_fan_control().err();
+    let all_failures = failures
+		.iter()
+		.map(|(_, message)| message.clone())
+        .chain(lock_failure.map(|error| format!("thermal-control lock: {error}")))
+        .collect::<Vec<_>>();
+	let retry_indices = if all_failures.is_empty() {
+		Vec::new()
+	} else if failures.is_empty() {
+		fan_indices.to_vec()
+    } else {
+		failures.iter().map(|(fan_index, _)| *fan_index).collect()
+	};
+	RecoveryOutcome {
+		retry_indices,
+		message: if all_failures.is_empty() {
+			"all touched fans restored to Auto".to_string()
+		} else {
+			all_failures.join("; ")
+		},
+	}
+}
+
 // ── Pure helper functions ────────────────────────────────────────────────────
 
 /// Linearly interpolates fan RPM between min and max based on temperature.
@@ -311,6 +469,58 @@ mod tests {
     use crate::smc::{NullReason, SensorSource};
     use crate::smc_writer::mock::{MockSmcCall, MockSmcWriter};
 
+	struct FailOnFanWriter {
+		calls: std::cell::RefCell<Vec<MockSmcCall>>,
+		failed_fan: u8,
+		fail_auto_for: Option<u8>,
+	}
+
+	unsafe impl Send for FailOnFanWriter {}
+	unsafe impl Sync for FailOnFanWriter {}
+
+	impl SmcWriteApi for FailOnFanWriter {
+		fn set_fan_target_rpm(
+			&self,
+			fan_index: u8,
+			rpm: f32,
+			_min_rpm: f32,
+			_max_rpm: f32,
+		) -> Result<(), SmcWriteError> {
+			self.calls.borrow_mut().push(MockSmcCall::SetFanTargetRpm { fan_index, rpm });
+			if fan_index == self.failed_fan {
+				Err(SmcWriteError::TargetVerificationFailed {
+					fan_index,
+					requested: rpm,
+					readback: 0.0,
+				})
+			} else {
+				Ok(())
+			}
+		}
+
+		fn set_fan_auto(&self, fan_index: u8) -> Result<(), SmcWriteError> {
+			self.calls.borrow_mut().push(MockSmcCall::SetFanAuto { fan_index });
+			if self.fail_auto_for == Some(fan_index) {
+				Err(SmcWriteError::InsufficientPrivileges)
+			} else {
+				Ok(())
+			}
+		}
+
+		fn lock_fan_control(&self) -> Result<(), SmcWriteError> {
+			self.calls.borrow_mut().push(MockSmcCall::LockFanControl);
+			Ok(())
+		}
+
+		fn unlock_fan_control(&self) -> Result<(), SmcWriteError> {
+			Ok(())
+		}
+
+		fn diagnose_fan_control(&self) -> Vec<String> {
+			Vec::new()
+		}
+	}
+
     fn make_fan(index: u8, min: f32, max: f32) -> FanData {
         FanData {
             index,
@@ -666,4 +876,72 @@ mod tests {
         assert_eq!(fans[0].mode, FanMode::Forced);
         assert_eq!(fans[0].target, 5000.0);
     }
+
+	#[test]
+	fn set_all_constant_rpm_uses_shared_range_and_updates_every_fan() {
+		let writer = MockSmcWriter::new();
+		let mut state = FanControlState::new();
+		let fans = vec![make_fan(0, 1200.0, 5800.0), make_fan(1, 1600.0, 6200.0)];
+
+		state.set_all_constant_rpm(3200.0, &fans, &writer).unwrap();
+
+		assert_eq!(state.configs().len(), 2);
+		let calls = writer.calls.borrow();
+		assert_eq!(
+			calls.iter().filter(|call| matches!(call, MockSmcCall::SetFanTargetRpm { rpm, .. } if (*rpm - 3200.0).abs() < 1.0)).count(),
+			2,
+		);
+	}
+
+	#[test]
+	fn set_all_constant_rpm_rejects_target_outside_shared_range() {
+		let writer = MockSmcWriter::new();
+		let mut state = FanControlState::new();
+		let fans = vec![make_fan(0, 1200.0, 5800.0), make_fan(1, 1600.0, 6200.0)];
+
+		let result = state.set_all_constant_rpm(1400.0, &fans, &writer);
+
+		assert!(matches!(result, Err(GlobalFanControlError::TargetOutOfRange { min_rpm: 1600.0, max_rpm: 5800.0, .. })));
+		assert!(writer.calls.borrow().is_empty());
+	}
+
+	#[test]
+	fn set_all_constant_rpm_restores_touched_fans_when_a_later_write_fails() {
+		let writer = FailOnFanWriter {
+			calls: std::cell::RefCell::new(Vec::new()),
+			failed_fan: 1,
+			fail_auto_for: None,
+		};
+		let mut state = FanControlState::new();
+		let fans = vec![make_fan(0, 1200.0, 5800.0), make_fan(1, 1200.0, 5800.0)];
+
+		let result = state.set_all_constant_rpm(3200.0, &fans, &writer);
+
+		assert!(matches!(result, Err(GlobalFanControlError::ApplyFailed { fan_index: 1, .. })));
+		assert!(state.configs().is_empty());
+		let calls = writer.calls.borrow();
+		assert!(calls.iter().any(|call| matches!(call, MockSmcCall::SetFanAuto { fan_index: 0 })));
+		assert!(calls.iter().any(|call| matches!(call, MockSmcCall::SetFanAuto { fan_index: 1 })));
+		assert!(calls.iter().any(|call| matches!(call, MockSmcCall::LockFanControl)));
+	}
+
+	#[test]
+	fn set_all_constant_rpm_keeps_failed_recovery_tracked_for_shutdown_retry() {
+		let writer = FailOnFanWriter {
+			calls: std::cell::RefCell::new(Vec::new()),
+			failed_fan: 1,
+			fail_auto_for: Some(0),
+		};
+		let mut state = FanControlState::new();
+		let fans = vec![make_fan(0, 1200.0, 5800.0), make_fan(1, 1200.0, 5800.0)];
+
+		let result = state.set_all_constant_rpm(3200.0, &fans, &writer);
+
+		assert!(matches!(result, Err(GlobalFanControlError::ApplyFailed { .. })));
+		assert!(matches!(
+			state.configs().get(&0),
+			Some(FanControlConfig::ConstantRpm { target_rpm: 3200.0 })
+		));
+		assert!(!state.configs().contains_key(&1));
+	}
 }
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 4274016..0903d26 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -545,6 +545,7 @@ fn main() {
             ctrlc::set_handler(move || {
                 warn_log!("[fanguard] Signal received — restoring fans to Auto");
                 restore_fans(&signal_handle);
+				std::process::exit(0);
             })
             .unwrap_or_else(|e| {
                 warn_log!("[fanguard] Signal handler registration failed: {e}");
@@ -560,6 +561,8 @@ fn main() {
             commands::set_fan_constant_rpm,
             commands::set_fan_sensor_control,
             commands::set_fan_auto,
+			commands::set_all_fans_constant_rpm,
+			commands::restore_all_fans_auto,
             commands::get_fan_control_configs,
             commands::get_presets,
             commands::get_active_preset,
diff --git a/src-tauri/src/smc_writer.rs b/src-tauri/src/smc_writer.rs
index e5d2c22..ab12353 100644
--- a/src-tauri/src/smc_writer.rs
+++ b/src-tauri/src/smc_writer.rs
@@ -41,13 +41,13 @@ pub enum SmcWriteError {
     ModeTransitionTimedOut,
     #[error("Fan mode verification failed: mode {actual} still blocks target writes")]
     ModeVerificationFailed { actual: u8 },
-    #[error(
-        "Fan {fan_index} target RPM verification failed: requested {requested}, actual {actual:?}"
-    )]
+    #[error("Fan control not available on this Mac: fan {fan_index} has no SMC mode key for safe manual control/restoration")]
+    UnsupportedFanControl { fan_index: u8 },
+    #[error("Fan target verification failed for fan {fan_index}: requested {requested:.0} RPM, read back {readback:.0} RPM")]
     TargetVerificationFailed {
         fan_index: u8,
         requested: f32,
-        actual: Option<f32>,
+        readback: f32,
     },
     #[error("Privileged helper is not running")]
     HelperNotRunning,
@@ -285,7 +285,7 @@ impl SmcWriter {
                         .to_string(),
                 );
                 lines.push(
-                    "  -> Direct F*Md writes may work (pre-14.4 firmware) or may be blocked"
+                    "  -> Safe manual fan control requires F*Md mode keys; absent mode keys are rejected"
                         .to_string(),
                 );
             }
@@ -509,9 +509,7 @@ impl SmcWriter {
             self.set_fan_mode(fan_index, true)?;
             self.verify_mode_allows_target_write(fan_index)?;
         } else {
-            debug_log!(
-                "[smc_writer] F{fan_index}Md key absent — skipping mode transition and writing F{fan_index}Tg directly"
-            );
+            return require_restorable_fan_mode(mode_capability, fan_index);
         }
 
         // Step 3: Write target RPM
@@ -530,21 +528,21 @@ impl SmcWriter {
         const MAX_VERIFY_ATTEMPTS: u8 = 3;
         const VERIFY_TOLERANCE: f64 = 50.0;
 
-        let mut verified = false;
+        let mut last_readback: Option<f32> = None;
         let mut attempt = 0u8;
-        let mut last_readback_rpm: Option<f32> = None;
 
-        while attempt < MAX_VERIFY_ATTEMPTS && !verified {
+        while attempt < MAX_VERIFY_ATTEMPTS {
             std::thread::sleep(Duration::from_millis(100));
             match self.read_key_bytes(key, key_info.data_size) {
                 Ok(readback) => {
                     let readback_rpm = decode_rpm(&readback, &type_bytes);
-                    last_readback_rpm = Some(readback_rpm);
-                    let diff = (readback_rpm - rpm).abs();
-                    if diff > VERIFY_TOLERANCE as f32 {
+                    last_readback = Some(readback_rpm);
+                    if let Err(error) =
+                        validate_target_readback(fan_index, rpm, readback_rpm, VERIFY_TOLERANCE)
+                    {
                         debug_log!(
-                            "[smc_writer] F{fan_index}Tg verify attempt {}/{MAX_VERIFY_ATTEMPTS}: wrote={rpm:.0} readback={readback_rpm:.0} (diff={diff:.0})"
-                            , attempt + 1
+                            "[smc_writer] F{fan_index}Tg verify attempt {}/{MAX_VERIFY_ATTEMPTS}: {error}",
+                            attempt + 1
                         );
                         // Retry the write
                         if attempt + 1 < MAX_VERIFY_ATTEMPTS {
@@ -552,7 +550,10 @@ impl SmcWriter {
                         }
                     } else {
                         debug_log!("[smc_writer] F{fan_index}Tg verified: {readback_rpm:.0} RPM");
-                        verified = true;
+                        debug_log!(
+                            "[smc_writer] set_fan_target_rpm: done fan={fan_index} rpm={rpm}"
+                        );
+                        return Ok(());
                     }
                 }
                 Err(e) => debug_log!(
@@ -563,10 +564,15 @@ impl SmcWriter {
             attempt += 1;
         }
 
-        validate_target_readback(fan_index, rpm, verified, last_readback_rpm)?;
-
-        debug_log!("[smc_writer] set_fan_target_rpm: done fan={fan_index} rpm={rpm}");
-        Ok(())
+        let readback = last_readback.unwrap_or(f32::NAN);
+        warn_log!(
+            "[smc_writer] F{fan_index}Tg write verification failed after {MAX_VERIFY_ATTEMPTS} attempts — RPM was not applied"
+        );
+        Err(SmcWriteError::TargetVerificationFailed {
+            fan_index,
+            requested: rpm,
+            readback,
+        })
     }
 
     /// Returns fan to automatic (system-controlled) mode.
@@ -580,8 +586,7 @@ impl SmcWriter {
         if mode_capability == FanModeCapability::Managed {
             self.set_fan_mode(fan_index, false)
         } else {
-            debug_log!("[smc_writer] F{fan_index}Md key absent — no auto mode to restore");
-            Ok(())
+            require_restorable_fan_mode(mode_capability, fan_index)
         }
     }
 
@@ -881,33 +886,44 @@ fn validate_mode_allows_target_write(actual_mode: u8) -> Result<(), SmcWriteErro
     }
 }
 
+fn detect_fan_mode_capability(
+    mode_key_info: Result<SmcKeyDataKeyInfo, SmcWriteError>,
+) -> Result<FanModeCapability, SmcWriteError> {
+    match mode_key_info {
+        Ok(_) => Ok(FanModeCapability::Managed),
+        Err(SmcWriteError::UnknownKey(_)) => Ok(FanModeCapability::Absent),
+        Err(error) => Err(error),
+    }
+}
+
+fn require_restorable_fan_mode(
+    mode_capability: FanModeCapability,
+    fan_index: u8,
+) -> Result<(), SmcWriteError> {
+    match mode_capability {
+        FanModeCapability::Managed => Ok(()),
+        FanModeCapability::Absent => Err(SmcWriteError::UnsupportedFanControl { fan_index }),
+    }
+}
+
 fn validate_target_readback(
     fan_index: u8,
     requested: f32,
-    verified: bool,
-    actual: Option<f32>,
+    readback: f32,
+    tolerance: f64,
 ) -> Result<(), SmcWriteError> {
-    if verified {
+    let diff = (readback - requested).abs();
+    if diff <= tolerance as f32 {
         return Ok(());
     }
 
     Err(SmcWriteError::TargetVerificationFailed {
         fan_index,
         requested,
-        actual,
+        readback,
     })
 }
 
-fn detect_fan_mode_capability(
-    mode_key_info: Result<SmcKeyDataKeyInfo, SmcWriteError>,
-) -> Result<FanModeCapability, SmcWriteError> {
-    match mode_key_info {
-        Ok(_) => Ok(FanModeCapability::Managed),
-        Err(SmcWriteError::UnknownKey(_)) => Ok(FanModeCapability::Absent),
-        Err(error) => Err(error),
-    }
-}
-
 // ── Tests ────────────────────────────────────────────────────────────────────
 
 // ── Test mock ────────────────────────────────────────────────────────────────
@@ -942,14 +958,6 @@ pub mod mock {
                 should_fail: false,
             }
         }
-
-        #[allow(dead_code)]
-        pub fn failing() -> Self {
-            Self {
-                calls: RefCell::new(Vec::new()),
-                should_fail: true,
-            }
-        }
     }
 
     impl SmcWriteApi for MockSmcWriter {
@@ -1127,16 +1135,26 @@ mod tests {
     }
 
     #[test]
-    fn target_verification_failure_returns_error() {
-        let result = validate_target_readback(0, 5000.0, false, Some(2400.0));
+    fn require_restorable_fan_mode_rejects_absent_mode_key() {
+        let result = require_restorable_fan_mode(FanModeCapability::Absent, 0);
+
+        assert!(matches!(
+            result,
+            Err(SmcWriteError::UnsupportedFanControl { fan_index: 0 })
+        ));
+    }
+
+    #[test]
+    fn validate_target_readback_rejects_mismatch() {
+        let result = validate_target_readback(0, 5000.0, 4049.0, 50.0);
 
         assert!(matches!(
             result,
             Err(SmcWriteError::TargetVerificationFailed {
                 fan_index: 0,
-                requested,
-                actual: Some(actual),
-            }) if requested == 5000.0 && actual == 2400.0
+                requested: 5000.0,
+                readback: 4049.0
+            })
         ));
     }
 
@@ -1180,22 +1198,11 @@ mod tests {
         let max_rpm = decode_rpm(&max_bytes, &max_type);
         let safe_target = current_target.clamp(min_rpm, max_rpm);
 
-        writer
-            .set_fan_target_rpm_impl(fan_index, safe_target, min_rpm, max_rpm)
-            .expect("target write should succeed without F*Md");
-
-        let readback = writer
-            .read_key_bytes(fan_key(fan_index, b"Tg"), target_info.data_size)
-            .expect("target readback should succeed");
-        let readback_rpm = decode_rpm(&readback, &target_type);
-
-        assert!(
-            (readback_rpm - safe_target).abs() <= 50.0,
-            "expected target readback near {safe_target}, got {readback_rpm}"
-        );
+        let result = writer.set_fan_target_rpm_impl(fan_index, safe_target, min_rpm, max_rpm);
 
-        writer
-            .set_fan_auto_impl(fan_index)
-            .expect("auto should be a no-op when F*Md is absent");
+        assert!(matches!(
+            result,
+            Err(SmcWriteError::UnsupportedFanControl { fan_index: 0 })
+        ));
     }
 }
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 969e182..3722acb 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
 	"$schema": "../node_modules/@tauri-apps/cli/schema.json",
 	"productName": "FanGuard",
-	"version": "0.1.0-beta.4",
+	"version": "0.1.0-beta.5",
 	"identifier": "io.github.naufaldi.fanguard",
 	"build": {
 		"beforeDevCommand": "pnpm run dev:prepare-helper && pnpm run dev",
diff --git a/src/App.svelte b/src/App.svelte
index 130b742..ca21429 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-import { onMount } from "svelte";
+import type { Component } from "svelte";
 import { cn } from "$lib/cn";
 import type { SensorData as DesignTokenSensor } from "$lib/designTokens";
 import { getSensors, listenToSensorUpdates } from "$lib/tauriCommands";
 import type { FanData, SensorData } from "$lib/types";
-import DesktopDashboard from "./components/DesktopDashboard.svelte";
+
+const dashboardPromise: Promise<
+	Component<{ fans: DesignTokenSensor[]; sensorData: SensorData | null }>
+> = import("./components/DesktopDashboard.svelte").then((m) => m.default);
 
 type AppStatus =
 	| { readonly kind: "loading" }
@@ -16,7 +19,6 @@ let sensorData: SensorData | null = $state(null);
 let fans: DesignTokenSensor[] = $state([]);
 let unlisten: (() => void) | null = null;
 
-// Historical data buffer for sparklines (last 60 readings per fan)
 const SPARKLINE_BUFFER_SIZE = 60;
 const fanHistory: Map<number, number[]> = new Map();
 
@@ -52,10 +54,10 @@ function applyUpdate(data: SensorData): void {
 	appStatus = { kind: "ready" };
 }
 
-onMount(() => {
+$effect(() => {
 	let cancelled = false;
 
-	const init = async (): Promise<void> => {
+	const init = async () => {
 		try {
 			const initial = await getSensors();
 			if (!cancelled) applyUpdate(initial);
@@ -67,7 +69,7 @@ onMount(() => {
 
 		try {
 			unlisten = await listenToSensorUpdates((data) => {
-				applyUpdate(data);
+				if (!cancelled) applyUpdate(data);
 			});
 			if (cancelled && unlisten) {
 				unlisten();
@@ -87,91 +89,76 @@ onMount(() => {
 	};
 });
 
-const skeletonBarClass = "rounded bg-(--surface-2) animate-pulse";
-const skeletonRowClass = "flex gap-3 px-3";
+const barClass = "rounded-[8px] bg-(--surface-2) animate-pulse";
+const rowClass = "flex items-center gap-3 px-4";
 </script>
 
 {#if appStatus.kind === 'loading'}
-  <!-- Loading skeleton matching two-pane layout -->
-  <main class={cn("flex h-full w-full flex-col bg-(--surface-0)")}>
-    <!-- Header bar skeleton -->
-    <div class={cn("flex items-center justify-between border-b border-(--border-subtle) px-3 py-2")}>
-      <div class={cn(skeletonBarClass, "h-4 w-24")}></div>
-      <div class={cn("flex gap-2")}>
-        <div class={cn(skeletonBarClass, "h-5 w-20")}></div>
-        <div class={cn(skeletonBarClass, "h-5 w-20")}></div>
-      </div>
+  <main class={cn("flex h-full w-full flex-col bg-(--window-background)")}>
+    <div class={cn("flex min-h-14 items-center gap-3 border-b border-(--border-subtle) bg-(--material-toolbar) px-4")}>
+      <div class={cn(barClass, "h-3.5 w-20")}></div>
+      <div class={cn(barClass, "h-7 w-32")}></div>
+      <div class={cn("grow")}></div>
+      <div class={cn(barClass, "h-8 w-52")}></div>
+      <div class={cn(barClass, "h-8 w-8")}></div>
     </div>
 
-    <!-- Two-pane content skeleton -->
-    <div class={cn("flex flex-1 min-h-0")}>
-      <!-- Left pane (Fans) -->
-      <div class={cn("flex w-1/2 flex-col border-r border-(--border-subtle) bg-(--surface-1)")}>
-        <div class={cn("border-b border-(--border-subtle) px-3 py-1.5")}>
-          <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-        </div>
-        <div class={cn("flex flex-col gap-3 p-3")}>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-32")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-16")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-28")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-16")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-36")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-16")}></div>
-          </div>
-        </div>
+    <div class={cn("border-b border-(--border-subtle) px-4 py-3")}>
+      <div class={cn("mb-2 flex items-center justify-between")}>
+        <div class={cn(barClass, "h-4 w-24")}></div>
+        <div class={cn(barClass, "h-7 w-36")}></div>
       </div>
+      <div class={cn(barClass, "h-2 w-full")}></div>
+    </div>
 
-      <!-- Right pane (Sensors) -->
-      <div class={cn("flex w-1/2 flex-col bg-(--surface-1)")}>
-        <div class={cn("border-b border-(--border-subtle) px-3 py-1.5")}>
-          <div class={cn(skeletonBarClass, "h-3 w-16")}></div>
-        </div>
-        <div class={cn("flex flex-col gap-3 p-3")}>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-40")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-36")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-44")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-32")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-          </div>
-          <div class={cn(skeletonRowClass)}>
-            <div class={cn(skeletonBarClass, "h-3 w-38")}></div>
-            <div class={cn(skeletonBarClass, "h-3 w-12")}></div>
-          </div>
+    <div class={cn("flex min-h-0 grow flex-col bg-(--surface-1)")}>
+      <div class={cn("flex items-center justify-between border-b border-(--border-subtle) px-4 py-2.5")}>
+        <div class={cn(barClass, "h-3.5 w-24")}></div>
+        <div class={cn(barClass, "h-3 w-4")}></div>
+      </div>
+      {#each [0, 1] as r}
+        <div class={cn(rowClass, "py-2.5", r === 1 && "border-b border-(--border-subtle)")}>
+          <div class={cn(barClass, "h-3.5 w-32")}></div>
+          <div class={cn(barClass, "ml-auto h-3.5 w-28")}></div>
+          <div class={cn(barClass, "h-5 w-20 rounded-full")}></div>
         </div>
+      {/each}
+      <div class={cn("flex items-center justify-between border-b border-(--border-subtle) px-4 py-2.5")}>
+        <div class={cn(barClass, "h-3.5 w-32")}></div>
+        <div class={cn(barClass, "h-3 w-4")}></div>
       </div>
+      {#each [0, 1, 2] as r}
+        <div class={cn(rowClass, "py-1.5", r !== 2 && "border-b border-(--border-subtle)")}>
+          <div class={cn(barClass, "h-3 w-40")}></div>
+          <div class={cn(barClass, "ml-auto h-3 w-8")}></div>
+        </div>
+      {/each}
     </div>
 
-    <!-- Footer skeleton -->
-    <div class={cn("flex items-center justify-between border-t border-(--border-subtle) px-3 py-1.5")}>
-      <div class={cn(skeletonBarClass, "h-3 w-32")}></div>
-      <div class={cn(skeletonBarClass, "h-3 w-20")}></div>
+    <div class={cn("mt-auto flex min-h-9 items-center gap-4 border-t border-(--border-subtle) bg-(--material-toolbar) px-4")}>
+      <div class={cn(barClass, "h-3 w-24")}></div>
+      <div class={cn("grow")}></div>
+      <div class={cn(barClass, "h-3 w-28")}></div>
     </div>
   </main>
 {:else if appStatus.kind === 'error'}
-  <!-- Error state -->
-  <main class={cn("flex h-full w-full items-center justify-center bg-(--surface-0)")}>
+  <main class={cn("flex h-full w-full items-center justify-center bg-(--window-background)")}>
     <div class={cn("flex flex-col items-center gap-1")}>
       <p class={cn("text-[12px] font-medium text-(--text-primary)")}>Failed to connect to sensor backend</p>
       <p class={cn("text-[11px] text-(--text-muted)")}>{appStatus.message}</p>
     </div>
   </main>
 {:else}
-  <main class={cn("flex h-full w-full")}>
-    <DesktopDashboard {fans} {sensorData} />
-  </main>
+  {#await dashboardPromise then DashboardComponent}
+    <main class={cn("flex h-full w-full bg-(--window-background)")}>
+      <DashboardComponent {fans} {sensorData} />
+    </main>
+  {:catch error}
+    <main class={cn("flex h-full w-full items-center justify-center bg-(--window-background)")}>
+      <div class={cn("flex flex-col items-center gap-1")}>
+        <p class={cn("text-[12px] font-medium text-(--text-primary)")}>Failed to load dashboard</p>
+        <p class={cn("text-[11px] text-(--text-muted)")}>{error instanceof Error ? error.message : String(error)}</p>
+      </div>
+    </main>
+  {/await}
 {/if}
diff --git a/src/app.css b/src/app.css
index bdab880..0f459e3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,80 +7,99 @@ select {
 }
 
 @theme {
-  /* Fonts — Apple system fonts for UI/data, DM Sans (Waldenburg substitute) for display */
-  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
-  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
-  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
-
-  /* Parchment palette (see docs/design.md) */
-  --color-parchment-white: #fdfcfc;
-  --color-warm-sand: #f5f3f1;
-  --color-sand-hover: #efedea;
-  --color-ash-border: #e5e5e5;
-  --color-ash-strong: #d4d4d4;
-  --color-midnight-ink: #000000;
-  --color-driftwood: #777169;
-  --color-fog: #a59f97;
-  --color-silver-mist: #b1b0b0;
-  --color-ember-orange: #ff4704;
-  --color-void-violet: #0447ff;
+  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
 }
 
 :root {
-  color-scheme: light;
-
-  /* Surfaces — parchment canvas + warm sand + elevated */
-  --surface-0: var(--color-parchment-white);
-  --surface-1: var(--color-parchment-white);
-  --surface-2: var(--color-warm-sand);
-  --surface-muted: var(--color-warm-sand);
-  --surface-hover: var(--color-sand-hover);
-  --surface-elevated: #ffffff;
-
-  /* Borders — hairline ash */
-  --border-subtle: var(--color-ash-border);
-  --border-strong: var(--color-ash-strong);
-
-  /* Text — ink / driftwood / fog */
-  --text-primary: var(--color-midnight-ink);
-  --text-secondary: var(--color-driftwood);
-  --text-muted: var(--color-fog);
-  --text-value: var(--color-midnight-ink);
-
-  /* Focus — ink ring, no blue */
-  --focus-ring: var(--color-midnight-ink);
-  --focus-ring-offset: var(--color-parchment-white);
-
-  /* Active control — filled ink (HIG segmented/primary) */
-  --control-active-bg: var(--color-midnight-ink);
-  --control-active-border: var(--color-midnight-ink);
-  --control-active-text: #ffffff;
-
-  /* Status — monochrome, ember reserved for hot (>=85C) */
-  --status-normal: var(--color-driftwood);
-  --status-warm: var(--color-driftwood);
-  --status-hot: var(--color-ember-orange);
-  --status-unknown: var(--color-silver-mist);
+  color-scheme: light dark;
+
+  --window-background: rgb(255 255 255 / 76%);
+  --desktop-background:
+    radial-gradient(circle at 16% 18%, rgb(248 243 238 / 86%), transparent 28%),
+    radial-gradient(circle at 84% 10%, rgb(181 203 222 / 76%), transparent 34%),
+    radial-gradient(circle at 70% 92%, rgb(136 151 165 / 62%), transparent 36%),
+    linear-gradient(135deg, rgb(232 228 223), rgb(191 205 216) 46%, rgb(230 231 230));
+  --surface-0: rgb(242 244 247);
+  --surface-1: rgb(255 255 255 / 58%);
+  --surface-2: rgb(248 249 251 / 62%);
+  --surface-muted: rgb(240 242 245 / 78%);
+  --surface-hover: rgb(0 0 0 / 5%);
+  --surface-elevated: rgb(255 255 255 / 92%);
+
+  --material-window: rgb(255 255 255 / 50%);
+  --material-toolbar: rgb(246 248 251 / 58%);
+  --material-control: rgb(255 255 255 / 62%);
+  --material-sheet: rgb(255 255 255 / 86%);
+  --material-popover: rgb(255 255 255 / 82%);
+
+  --border-subtle: rgb(0 0 0 / 12%);
+  --border-strong: rgb(0 0 0 / 22%);
+  --table-column-separator: rgb(0 0 0 / 10%);
+  --table-row-alternating: rgb(0 0 0 / 4%);
+  --table-section-background: rgb(246 247 249 / 56%);
+
+  --text-primary: rgb(0 0 0 / 88%);
+  --text-secondary: rgb(0 0 0 / 58%);
+  --text-muted: rgb(0 0 0 / 36%);
+  --text-value: rgb(0 0 0 / 78%);
+
+  --accent-blue: rgb(0 120 240);
+  --accent-blue-pressed: rgb(1 101 226);
+  --selection-active: rgb(1 101 226);
+  --focus-ring: rgb(0 120 240 / 55%);
+  --focus-ring-offset: rgb(255 255 255 / 90%);
+
+  --status-normal: rgb(52 199 89);
+  --status-warm: rgb(255 204 0);
+  --status-hot: rgb(255 69 58);
+  --status-unknown: rgb(142 142 147);
+
   --color-status-normal: var(--status-normal);
   --color-status-warm: var(--status-warm);
   --color-status-hot: var(--status-hot);
   --color-status-unknown: var(--status-unknown);
-  --color-surface-card: var(--surface-2);
+  --color-surface-card: var(--surface-1);
   --color-surface-hover: var(--surface-hover);
 
-  /* Radii — Apple HIG geometry */
-  --radius-card: 12px;
-  --radius-button: 7px;
-  --radius-segmented: 6px;
-  --radius-input: 5px;
-  --radius-dialog: 10px;
-  --radius-capsule: 9999px;
-  --radius-dot: 9999px;
-
-  /* Shadows — hairline only */
-  --shadow-hairline: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
-  --shadow-elevated: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
-  --shadow-inset: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
+  --radius-card: 18px;
+  --radius-dot: 50%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --window-background: rgb(30 31 34 / 76%);
+    --desktop-background:
+      radial-gradient(circle at 16% 18%, rgb(75 70 66 / 86%), transparent 28%),
+      radial-gradient(circle at 84% 10%, rgb(54 68 82 / 76%), transparent 34%),
+      radial-gradient(circle at 70% 92%, rgb(33 39 46 / 62%), transparent 36%),
+      linear-gradient(135deg, rgb(42 42 44), rgb(34 42 50) 46%, rgb(30 31 34));
+    --surface-0: rgb(24 25 28);
+    --surface-1: rgb(36 37 41 / 84%);
+    --surface-2: rgb(43 44 48 / 76%);
+    --surface-muted: rgb(50 51 56 / 72%);
+    --surface-hover: rgb(255 255 255 / 7%);
+    --surface-elevated: rgb(46 47 52 / 88%);
+
+    --material-window: rgb(34 35 39 / 74%);
+    --material-toolbar: rgb(42 43 48 / 70%);
+    --material-control: rgb(255 255 255 / 9%);
+    --material-sheet: rgb(44 45 50 / 88%);
+    --material-popover: rgb(50 51 56 / 88%);
+
+    --border-subtle: rgb(255 255 255 / 12%);
+    --border-strong: rgb(255 255 255 / 24%);
+    --table-column-separator: rgb(255 255 255 / 11%);
+    --table-row-alternating: rgb(255 255 255 / 5%);
+    --table-section-background: rgb(255 255 255 / 6%);
+
+    --text-primary: rgb(255 255 255 / 88%);
+    --text-secondary: rgb(255 255 255 / 62%);
+    --text-muted: rgb(255 255 255 / 38%);
+    --text-value: rgb(255 255 255 / 84%);
+
+    --focus-ring-offset: rgb(31 32 36 / 92%);
+  }
 }
 
 html,
@@ -95,10 +114,64 @@ body,
 
 body {
   font-family: var(--font-ui);
-  font-size: 13px;
-  letter-spacing: 0.01em;
-  background-color: var(--surface-0);
+  font-size: 12px;
+  background:
+    radial-gradient(circle at 20% 0%, rgb(255 255 255 / 60%), transparent 32%),
+    var(--surface-0);
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
+  .bg-\(\--material-window\),
+  .bg-\(\--material-toolbar\),
+  .bg-\(\--material-control\),
+  .bg-\(\--material-sheet\),
+  .bg-\(\--material-popover\) {
+    -webkit-backdrop-filter: blur(22px) saturate(1.35);
+    backdrop-filter: blur(22px) saturate(1.35);
+  }
+}
+
+.liquid-range {
+  --range-progress: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--accent-blue) 0%,
+    var(--accent-blue) var(--range-progress),
+    rgb(0 0 0 / 24%) var(--range-progress),
+    rgb(0 0 0 / 24%) 100%
+  );
+  outline: none;
+}
+
+.liquid-range::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid rgb(0 0 0 / 12%);
+  background: rgb(255 255 255);
+  box-shadow:
+    0 3px 8px rgb(0 0 0 / 20%),
+    inset 0 0 0 0.5px rgb(255 255 255 / 90%);
+}
+
+.liquid-range::-moz-range-thumb {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid rgb(0 0 0 / 12%);
+  background: rgb(255 255 255);
+  box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
+}
+
+.liquid-range:disabled {
+  opacity: 0.45;
 }
diff --git a/src/components/AboutDialog.svelte b/src/components/AboutDialog.svelte
index de0fa6c..78db4f1 100644
--- a/src/components/AboutDialog.svelte
+++ b/src/components/AboutDialog.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+import { Fan } from "lucide-svelte";
 import { fade, scale } from "svelte/transition";
 import { cn } from "$lib/cn";
 import { type AppInfo, getAppInfo, openUrl } from "$lib/tauriCommands";
+import { backdropSurface, buttonSecondary, sheetSurface } from "$lib/ui";
 
 interface Props {
 	onclose: () => void;
@@ -60,20 +62,17 @@ function handleKeydown(event: KeyboardEvent): void {
 		}
 	}
 }
-
-const buttonBase =
-	"cursor-pointer rounded-(--radius-button) border px-4 py-1.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div
-  class={cn('fixed inset-0 z-50 flex items-center justify-center')}
+  class={cn("fixed inset-0 z-50 flex items-center justify-center")}
   transition:fade={{ duration: 150 }}
 >
   <button
     type="button"
-    class={cn('absolute inset-0 bg-black/20 backdrop-blur-[1px] cursor-default')}
+    class={cn(backdropSurface)}
     onclick={onclose}
     aria-label="Close dialog"
     tabindex="-1"
@@ -81,57 +80,42 @@ const buttonBase =
 
   <div
     bind:this={dialogEl}
-    class={cn(
-      'relative w-[320px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated)'
-    )}
+    class={cn(sheetSurface, "relative w-[320px]")}
     role="dialog"
     aria-modal="true"
     aria-label="About FanGuard"
-    transition:scale={{ duration: 150, start: 0.95, opacity: 0 }}
+    transition:scale={{ duration: 150, start: 0.96, opacity: 0 }}
   >
-    <div class={cn('flex flex-col items-center px-6 pt-6 pb-2')}>
-      <div class={cn('mb-3 flex h-16 w-16 items-center justify-center rounded-(--radius-card) border border-(--border-subtle) bg-(--surface-2)')}>
-        <svg class="h-8 w-8 text-(--text-primary)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-          <path d="M12 2v4" />
-          <path d="M12 18v4" />
-          <path d="M4.93 4.93l2.83 2.83" />
-          <path d="M16.24 16.24l2.83 2.83" />
-          <path d="M2 12h4" />
-          <path d="M18 12h4" />
-          <path d="M4.93 19.07l2.83-2.83" />
-          <path d="M16.24 7.76l2.83-2.83" />
-        </svg>
+    <div class={cn("flex flex-col items-center px-6 pt-6 pb-2")}>
+      <div class={cn("mb-3 flex h-14 w-14 items-center justify-center rounded-[16px] bg-(--surface-0)")}>
+        <Fan size={26} class={cn("text-(--text-primary)")} strokeWidth={1.5} />
       </div>
 
-      <h2 class={cn('font-[family-name:var(--font-display)] text-[20px] font-light tracking-tight text-(--text-primary)')}>
+      <h2 class={cn("text-[15px] font-semibold text-(--text-primary)")}>
         {appInfo?.name ?? "FanGuard"}
       </h2>
 
-      <p class={cn('mt-1 text-[12px] font-mono text-(--text-secondary) [font-variant-numeric:tabular-nums]')}>
+      <p class={cn("mt-1 font-mono text-[12px] tabular-nums text-(--text-secondary)")}>
         Version {appInfo?.version ?? "..."}
       </p>
     </div>
 
-    <div class={cn('flex flex-col items-center gap-1.5 px-6 py-3')}>
-      <p class={cn('text-[11px] text-(--text-muted)')}>MIT License</p>
+    <div class={cn("flex flex-col items-center gap-1.5 px-6 py-3")}>
+      <p class={cn("text-[11px] text-(--text-muted)")}>MIT License</p>
       <button
         type="button"
-        class={cn('text-[11px] text-(--text-secondary) hover:text-(--text-primary) hover:underline cursor-pointer')}
+        class={cn("text-[11px] text-(--text-secondary) underline-offset-2 hover:text-(--text-primary) hover:underline cursor-pointer")}
         onclick={handleGitHub}
       >
         View on GitHub
       </button>
     </div>
 
-    <div class={cn('flex justify-center px-6 pb-5 pt-2')}>
+    <div class={cn("flex justify-center px-6 pb-5 pt-2")}>
       <button
         type="button"
         bind:this={closeButtonEl}
-        class={cn(
-          buttonBase,
-          'border-(--border-subtle) bg-(--surface-elevated) text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2)'
-        )}
+        class={cn(buttonSecondary)}
         onclick={onclose}
       >
         OK
diff --git a/src/components/DesktopDashboard.svelte b/src/components/DesktopDashboard.svelte
index fc679b1..be4b561 100644
--- a/src/components/DesktopDashboard.svelte
+++ b/src/components/DesktopDashboard.svelte
@@ -1,19 +1,30 @@
 <script lang="ts">
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { CheckCircle2, MoreHorizontal, Search } from "lucide-svelte";
 import { cn } from "$lib/cn";
 import type { SensorData as DesignTokenSensor } from "$lib/designTokens";
 import { isAppStoreDistribution } from "$lib/distribution";
+import {
+	getAllSensorsForDisplay,
+	isPerCoreTemperatureUnavailable,
+	partitionDisplaySensors,
+} from "$lib/sensorListPaneState";
 import {
 	getPrivilegeStatus,
+	getTrayDisplayMode,
 	hideToMenuBar,
 	installHelper,
 	listenCheckForUpdates,
 	listenShowAbout,
 	reconnectWriter,
+	setTrayDisplayMode,
 } from "$lib/tauriCommands";
-import type { SensorData } from "$lib/types";
+import type { Sensor, SensorData } from "$lib/types";
+import { buttonGhost, buttonSecondary, popoverSurface, telemetryGrid } from "$lib/ui";
 import AboutDialog from "./AboutDialog.svelte";
+import DisclosureGroup from "./DisclosureGroup.svelte";
 import FanControlPane from "./FanControlPane.svelte";
+import FanTelemetryRows from "./FanTelemetryRows.svelte";
 import PreferencesDialog from "./PreferencesDialog.svelte";
 import PresetDropdown from "./PresetDropdown.svelte";
 import SensorListPane from "./SensorListPane.svelte";
@@ -26,30 +37,54 @@ interface Props {
 
 const { fans, sensorData }: Props = $props();
 
-const rawFans = $derived(sensorData?.fans ?? []);
-const sensors = $derived(sensorData?.details ?? []);
-const fanControlRevision = $derived(
-	sensorData?.fans
-		.map((fan) => `${fan.index}:${fan.mode}:${Math.round(fan.target)}`)
-		.join("|") ?? "",
-);
-
 let hasWriteAccess: boolean = $state(false);
-let fanControlAvailable: boolean = $state(!isAppStoreDistribution());
+let fanControlAvailable: boolean = $state(true);
 let bannerMessage: string = $state("Fan control requires elevated privileges.");
+let searchTerm: string = $state("");
+let showMenu: boolean = $state(false);
+let showPreferences: boolean = $state(false);
+let showAbout: boolean = $state(false);
+let showUpdate: boolean = $state(false);
+let alwaysOnTop: boolean = $state(false);
+let trayDisplayMode: number = $state(0);
+
+const rawFans = $derived(sensorData?.fans ?? []);
+const allDisplaySensors = $derived(
+	sensorData ? getAllSensorsForDisplay(sensorData) : [],
+);
+const partitions = $derived(partitionDisplaySensors(allDisplaySensors));
+const temperatureSensors = $derived(partitions.temperature);
+const diskSensors = $derived(partitions.disk);
+const perCoreUnavailable = $derived(isPerCoreTemperatureUnavailable(sensorData));
+const modelLabel = $derived(sensorData?.diagnostics?.model_id ?? "Unknown Mac");
+const fanAccessLabel = $derived(
+	!fanControlAvailable
+		? "Monitoring only"
+		: hasWriteAccess
+			? "Fan control enabled"
+			: "Fan control needs access",
+);
+const searchQuery = $derived(searchTerm.trim().toLowerCase());
+const filteredFans = $derived(
+	searchQuery === ""
+		? fans
+		: fans.filter((fan) => fan.label.toLowerCase().includes(searchQuery)),
+);
+const filteredTemperatureSensors = $derived(
+	filterSensors(temperatureSensors, searchQuery),
+);
+const filteredDiskSensors = $derived(filterSensors(diskSensors, searchQuery));
 
 $effect(() => {
 	getPrivilegeStatus()
 		.then((status) => {
 			hasWriteAccess = status.has_write_access;
 			fanControlAvailable = status.fan_control_available;
-			if (status.reason) {
-				bannerMessage = status.reason;
-			}
+			bannerMessage = status.reason ?? "Fan control requires elevated privileges.";
 		})
 		.catch(() => {
 			hasWriteAccess = false;
-			fanControlAvailable = !isAppStoreDistribution();
+			fanControlAvailable = false;
 		});
 });
 
@@ -58,32 +93,40 @@ const isDevMode = $derived(
 		bannerMessage.includes("sudo pnpm"),
 );
 
+function filterSensors(sensors: Sensor[], query: string): Sensor[] {
+	if (query === "") {
+		return sensors;
+	}
+
+	return sensors.filter((sensor) =>
+		[sensor.name, sensor.key, sensor.sensor_type].some((value) =>
+			value.toLowerCase().includes(query),
+		),
+	);
+}
+
 async function handleGrantAccess(): Promise<void> {
 	try {
 		await installHelper();
 		await reconnectWriter();
 		hasWriteAccess = true;
 	} catch (error) {
-		const msg = error instanceof Error ? error.message : String(error);
-		if (!msg.includes("cancelled") && !msg.includes("canceled")) {
-			bannerMessage = msg;
+		const message = error instanceof Error ? error.message : String(error);
+		if (!message.includes("cancelled") && !message.includes("canceled")) {
+			bannerMessage = message;
 		}
 	}
 }
 
-let showPreferences: boolean = $state(false);
-let showAbout: boolean = $state(false);
-let showUpdate: boolean = $state(false);
-let alwaysOnTop: boolean = $state(false);
-
 async function handleAlwaysOnTop(): Promise<void> {
 	try {
 		const next = !alwaysOnTop;
 		await getCurrentWindow().setAlwaysOnTop(next);
 		alwaysOnTop = next;
+		showMenu = false;
 	} catch (error) {
-		const msg = error instanceof Error ? error.message : String(error);
-		console.error("[DesktopDashboard] Failed to set always-on-top:", msg);
+		const message = error instanceof Error ? error.message : String(error);
+		console.error("[DesktopDashboard] Failed to set always-on-top:", message);
 	}
 }
 
@@ -108,102 +151,179 @@ $effect(() => {
 async function handleHideToMenuBar(): Promise<void> {
 	try {
 		await hideToMenuBar();
+		showMenu = false;
 	} catch (error) {
-		const msg = error instanceof Error ? error.message : String(error);
-		console.error("[DesktopDashboard] Failed to hide window:", msg);
+		const message = error instanceof Error ? error.message : String(error);
+		console.error("[DesktopDashboard] Failed to hide window:", message);
 	}
 }
 
-function handlePreferences(): void {
+async function handlePreferences(): Promise<void> {
+	try {
+		trayDisplayMode = await getTrayDisplayMode();
+	} catch {
+		trayDisplayMode = 0;
+	}
+	showMenu = false;
 	showPreferences = true;
 }
 
-const chromeButtonClass =
-	"rounded-(--radius-button) border border-(--border-subtle) bg-(--surface-elevated) px-3 py-1 text-[12px] text-(--text-primary) shadow-(--shadow-hairline) transition-colors hover:bg-(--surface-2) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-const chromeButtonActiveClass =
-	"border-(--control-active-border) bg-(--control-active-bg) text-(--control-active-text) font-medium shadow-none";
+async function handleTrayModeChange(mode: number): Promise<void> {
+	trayDisplayMode = mode;
+	try {
+		await setTrayDisplayMode(mode);
+	} catch (error) {
+		console.error("[DesktopDashboard] Failed to set tray display mode:", error);
+	}
+}
+
+function openUpdateDialog(): void {
+	showMenu = false;
+	showUpdate = true;
+}
+
+function openAboutDialog(): void {
+	showMenu = false;
+	showAbout = true;
+}
 </script>
 
 <section
-  class={cn("flex h-full w-full flex-col overflow-hidden bg-(--surface-0) text-(--text-primary)")}
+  class={cn("h-full w-full overflow-hidden bg-(--window-background) text-(--text-primary)")}
 >
-  {#if !hasWriteAccess && fanControlAvailable}
-    <div
-      class={cn(
-        "flex shrink-0 items-center justify-center gap-2 border-b border-ember-orange/40 bg-(--surface-2) px-4 py-1.5 text-[11px] text-(--text-primary)"
-      )}
+  <div
+    class={cn("flex h-full w-full min-w-0 flex-col overflow-hidden bg-(--window-background)")}
+  >
+    {#if !hasWriteAccess}
+      <div
+        class={cn(
+          "flex shrink-0 items-center justify-between gap-2 border-b border-(--border-subtle) bg-(--material-toolbar) px-5 py-1.5 text-[11px] text-(--text-secondary)"
+        )}
+      >
+        <span>{bannerMessage}</span>
+        {#if fanControlAvailable && !isDevMode}
+          <button
+            type="button"
+            class={cn(buttonSecondary, "shrink-0 px-2.5 py-0.5 text-[11px]")}
+            onclick={handleGrantAccess}
+          >
+            Grant Access
+          </button>
+        {/if}
+      </div>
+    {/if}
+
+    <header
+      class={cn("grid min-h-[58px] shrink-0 grid-cols-[minmax(120px,1fr)_auto_minmax(180px,274px)_40px] items-center gap-3 border-b border-(--border-subtle) bg-(--material-toolbar) px-4")}
     >
-      <span>{bannerMessage}</span>
-      {#if !isDevMode}
+      <h1 class={cn("text-[16px] font-semibold text-(--text-primary)")}>
+        FanGuard
+      </h1>
+      <PresetDropdown />
+      <label
+        class={cn("flex h-8 min-w-0 items-center gap-2 rounded-[7px] border border-(--border-subtle) bg-(--material-control) px-2.5 text-(--text-secondary)")}
+      >
+        <Search size={17} strokeWidth={1.8} />
+        <span class={cn("sr-only")}>Search sensors</span>
+        <input
+          type="search"
+          bind:value={searchTerm}
+          placeholder="Search"
+          class={cn("min-w-0 grow bg-transparent text-[13px] text-(--text-primary) outline-none placeholder:text-(--text-muted)")}
+        />
+      </label>
+      <div class={cn("relative")}>
         <button
           type="button"
-          class={cn(
-            "rounded-(--radius-button) border border-(--border-subtle) bg-(--surface-elevated) px-2 py-0.5 text-[11px] font-medium text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2) transition-colors"
-          )}
-          onclick={handleGrantAccess}
+          class={cn(buttonGhost, "h-8 w-8 px-0 rounded-[7px]")}
+          aria-label="More actions"
+          aria-expanded={showMenu}
+          onclick={() => { showMenu = !showMenu; }}
         >
-          Grant Access
+          <MoreHorizontal size={19} strokeWidth={1.8} />
         </button>
-      {/if}
-    </div>
-  {/if}
+        {#if showMenu}
+          <div
+            class={cn(popoverSurface, "absolute right-0 top-10 z-20 w-48 p-1")}
+            role="menu"
+          >
+            <button type="button" class={cn("w-full rounded-[8px] px-2.5 py-1.5 text-left text-[12px] text-(--text-primary) hover:bg-(--surface-hover)")} role="menuitem" onclick={handleAlwaysOnTop}>
+              {alwaysOnTop ? "Unpin Window" : "Pin Window on Top"}
+            </button>
+            <button type="button" class={cn("w-full rounded-[8px] px-2.5 py-1.5 text-left text-[12px] text-(--text-primary) hover:bg-(--surface-hover)")} role="menuitem" onclick={handleHideToMenuBar}>
+              Hide to Menu Bar
+            </button>
+            <button type="button" class={cn("w-full rounded-[8px] px-2.5 py-1.5 text-left text-[12px] text-(--text-primary) hover:bg-(--surface-hover)")} role="menuitem" onclick={handlePreferences}>
+              Preferences...
+            </button>
+            {#if !isAppStoreDistribution()}
+              <button type="button" class={cn("w-full rounded-[8px] px-2.5 py-1.5 text-left text-[12px] text-(--text-primary) hover:bg-(--surface-hover)")} role="menuitem" onclick={openUpdateDialog}>
+                Check for Updates
+              </button>
+            {/if}
+            <button type="button" class={cn("w-full rounded-[8px] px-2.5 py-1.5 text-left text-[12px] text-(--text-primary) hover:bg-(--surface-hover)")} role="menuitem" onclick={openAboutDialog}>
+              About FanGuard
+            </button>
+          </div>
+        {/if}
+      </div>
+    </header>
 
-  <header
-    class={cn(
-      "flex shrink-0 items-center justify-center gap-2 border-b border-(--border-subtle) bg-(--surface-0) px-4 py-2"
-    )}
-  >
-    {#if fanControlAvailable}
-      <span class={cn("text-[12px] text-(--text-secondary)")}>Active preset:</span>
-      <PresetDropdown />
-    {:else}
-      <span class={cn("text-[12px] text-(--text-secondary)")}>Monitoring only</span>
-    {/if}
-  </header>
+    <main class={cn("flex min-h-0 grow flex-col overflow-hidden bg-(--material-window)")}>
+      <FanControlPane {rawFans} hasWriteAccess={hasWriteAccess} />
 
-  <div class={cn("grid min-h-0 grow grid-cols-[1fr_300px] overflow-hidden bg-(--surface-1)")}>
-    {#key fanControlRevision}
-      <FanControlPane {fans} {rawFans} {sensors} {hasWriteAccess} {fanControlAvailable} />
-    {/key}
-    <SensorListPane {sensorData} />
-  </div>
+      <div class={cn("mx-4 mb-3 flex min-h-0 grow flex-col overflow-hidden rounded-[7px] border border-(--border-subtle) bg-(--surface-1)")}>
+        <div class={cn("grid min-h-8 shrink-0 items-center border-b border-(--border-subtle) bg-(--surface-1) px-3 text-[12px] font-medium text-(--text-primary)", telemetryGrid)}>
+          <div class={cn("pl-7 pr-3")}>Name</div>
+          <div class={cn("border-l border-(--table-column-separator) px-3")}>Value</div>
+          <div class={cn("border-l border-(--table-column-separator) px-3")}>Range</div>
+          <div class={cn("border-l border-(--table-column-separator) px-3")}>Mode</div>
+          <div class={cn("border-l border-(--table-column-separator) px-3")}>Status</div>
+        </div>
 
-  <footer
-    class={cn(
-      "flex shrink-0 items-center gap-2 border-t border-(--border-subtle) bg-(--surface-0) px-4 py-2"
-    )}
-  >
-    <button
-      class={cn(
-        chromeButtonClass,
-        alwaysOnTop && chromeButtonActiveClass
-      )}
-      type="button"
-      aria-label={alwaysOnTop ? "Unpin window" : "Pin window on top"}
-      aria-pressed={alwaysOnTop}
-      onclick={handleAlwaysOnTop}
+        <div class={cn("min-h-0 grow overflow-y-auto bg-(--surface-1)")}>
+          <DisclosureGroup title="Fans">
+            <FanTelemetryRows fans={filteredFans} />
+          </DisclosureGroup>
+
+          <DisclosureGroup title="Temperature Sensors">
+            {#if perCoreUnavailable}
+              <p class={cn("border-b border-(--border-subtle) px-4 py-1.5 text-[11px] text-(--text-muted)")}>
+                Per-core temperature not exposed on this Mac
+              </p>
+            {/if}
+            <SensorListPane sensors={filteredTemperatureSensors} emptyLabel="No temperature sensors match this search." />
+          </DisclosureGroup>
+
+          <DisclosureGroup title="Disk Drives">
+            <SensorListPane sensors={filteredDiskSensors} emptyLabel="No disk drives match this search." />
+          </DisclosureGroup>
+        </div>
+      </div>
+    </main>
+
+    <footer
+      class={cn("flex min-h-9 shrink-0 items-center gap-8 border-t border-(--border-subtle) bg-(--material-toolbar) px-4 text-[12px] text-(--text-secondary)")}
     >
-      {alwaysOnTop ? "Pinned" : "Pin on Top"}
-    </button>
-    <div class="grow"></div>
-    <button class={cn(chromeButtonClass)} type="button" onclick={handleHideToMenuBar}>
-      Hide to menu bar
-    </button>
-    <button class={cn(chromeButtonClass)} type="button" onclick={handlePreferences}>
-      Preferences...
-    </button>
-    {#if !isAppStoreDistribution()}
-      <button class={cn(chromeButtonClass)} type="button" onclick={() => { showUpdate = true; }}>
-        Check for Updates
-      </button>
-    {/if}
-    <button class={cn(chromeButtonClass)} type="button" aria-label="About" onclick={() => { showAbout = true; }}>
-      About
-    </button>
-  </footer>
+      <span class={cn("flex items-center gap-2")}>
+        <span class={cn("inline-block size-2.5 rounded-full bg-(--status-normal)")}></span>
+        SMC Connected
+      </span>
+      <span>{modelLabel}</span>
+      <span class={cn("flex items-center gap-2")}>
+        <CheckCircle2 size={14} class={cn(hasWriteAccess ? "text-(--status-normal)" : "text-(--status-warm)")} strokeWidth={1.8} />
+        {fanAccessLabel}
+      </span>
+      <span class={cn("ml-auto")}>Last updated just now</span>
+    </footer>
 
   {#if showPreferences}
-    <PreferencesDialog {fanControlAvailable} onclose={() => { showPreferences = false; }} />
+    <PreferencesDialog
+      trayDisplayMode={trayDisplayMode}
+      {fanControlAvailable}
+      onTrayModeChange={handleTrayModeChange}
+      onclose={() => { showPreferences = false; }}
+    />
   {/if}
 
   {#if showAbout}
@@ -213,4 +333,5 @@ const chromeButtonActiveClass =
   {#if showUpdate}
     <UpdateDialog onclose={() => { showUpdate = false; }} />
   {/if}
+  </div>
 </section>
diff --git a/src/components/DisclosureGroup.svelte b/src/components/DisclosureGroup.svelte
new file mode 100644
index 0000000..d760e3e
--- /dev/null
+++ b/src/components/DisclosureGroup.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+import { ChevronDown, Fan, HardDrive, Thermometer } from "lucide-svelte";
+import type { Snippet } from "svelte";
+import { cn } from "$lib/cn";
+
+interface Props {
+	title: string;
+	count?: number;
+	children: Snippet;
+}
+
+const { title, count, children }: Props = $props();
+
+let open: boolean = $state(true);
+const GroupIcon = $derived(getGroupIcon(title));
+
+function getGroupIcon(title: string) {
+	if (title.toLowerCase().includes("fan")) return Fan;
+	if (title.toLowerCase().includes("disk")) return HardDrive;
+	return Thermometer;
+}
+</script>
+
+<section class={cn("border-b border-(--border-subtle) last:border-b-0")}>
+  <button
+    type="button"
+    class={cn(
+      "flex min-h-9 w-full items-center justify-between bg-(--table-section-background) px-3 text-left transition-colors hover:bg-(--surface-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-inset cursor-pointer"
+    )}
+    aria-expanded={open}
+    onclick={() => { open = !open; }}
+  >
+    <span class={cn("flex items-center gap-3")}>
+      <ChevronDown
+        size={16}
+        class={cn("text-(--text-secondary) transition-transform duration-150", open ? "rotate-0" : "-rotate-90")}
+        strokeWidth={1.75}
+      />
+      <GroupIcon size={18} class={cn("text-(--text-secondary)")} strokeWidth={1.75} />
+      <span class={cn("text-[14px] font-medium uppercase text-(--text-secondary)")}>
+        {title}
+      </span>
+    </span>
+    {#if count !== undefined}
+      <span class={cn("font-mono text-[11px] tabular-nums text-(--text-muted)")}>
+        {count}
+      </span>
+    {/if}
+  </button>
+
+  {#if open}
+    <div class={cn("flex flex-col")}>
+      {@render children()}
+    </div>
+  {/if}
+</section>
diff --git a/src/components/FanControlModal.svelte b/src/components/FanControlModal.svelte
index ecbb63b..462f706 100644
--- a/src/components/FanControlModal.svelte
+++ b/src/components/FanControlModal.svelte
@@ -11,6 +11,13 @@ import {
 	setFanSensorControl,
 } from "$lib/tauriCommands";
 import type { FanControlConfig, FanData, Sensor } from "$lib/types";
+import {
+	backdropSurface,
+	buttonPrimary,
+	buttonSecondary,
+	inputClass,
+	sheetSurface,
+} from "$lib/ui";
 
 interface Props {
 	fan: FanData;
@@ -21,11 +28,8 @@ interface Props {
 
 const { fan, sensors, currentConfig, onclose }: Props = $props();
 
-// Filter to sensors relevant for fan control decisions
 const tempSensors = $derived(getFanControlSensors(sensors));
 
-// ── Modal state ──────────────────────────────────────────────────────────
-
 type ControlMode = "constant_rpm" | "sensor_based";
 
 let selectedMode: ControlMode = $state(
@@ -61,23 +65,17 @@ let isSubmitting: boolean = $state(false);
 let errorMessage: string = $state("");
 let extremeWarningAcknowledged: boolean = $state(false);
 
-// ── Element refs ─────────────────────────────────────────────────────────
-
 let dialogEl: HTMLDivElement | undefined = $state(undefined);
 let okButtonEl: HTMLButtonElement | undefined = $state(undefined);
 
-// Auto-focus OK button on mount
 $effect(() => {
 	okButtonEl?.focus();
 });
 
-// Clamp RPM to valid range
 const clampedRpm = $derived(
 	Math.max(fan.min, Math.min(fan.max, Math.round(constantRpm))),
 );
 
-// ── Temperature range bar state ──────────────────────────────────────────
-
 const selectedSensorValue = $derived(
 	tempSensors.find((s) => s.key === selectedSensorKey)?.value ?? null,
 );
@@ -94,12 +92,6 @@ const rangeBarAriaLabel = $derived(
 		: `Fan speed range: minimum at ${tempLow}°C, maximum at ${tempHigh}°C.`,
 );
 
-const isMarkerHot = $derived(
-	selectedSensorValue !== null && selectedSensorValue >= 85,
-);
-
-// ── Handlers ─────────────────────────────────────────────────────────────
-
 async function handleSubmit(): Promise<void> {
 	isSubmitting = true;
 	errorMessage = "";
@@ -172,24 +164,6 @@ function handleKeydown(event: KeyboardEvent): void {
 	}
 }
 
-// ── Shared styles ────────────────────────────────────────────────────────
-
-const buttonBase =
-	"cursor-pointer rounded-(--radius-button) border px-4 py-1.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-const cancelButton = cn(
-	buttonBase,
-	"border-(--border-subtle) bg-(--surface-elevated) text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2)",
-);
-const okButton = cn(
-	buttonBase,
-	"border-(--control-active-border) bg-(--control-active-bg) text-(--control-active-text) disabled:opacity-50 disabled:cursor-not-allowed",
-);
-
-const inputBase =
-	"rounded-(--radius-input) border border-(--border-subtle) bg-(--surface-elevated) px-2 py-1 text-[12px] text-(--text-primary) font-mono [font-variant-numeric:tabular-nums] focus:outline-none focus:ring-2 focus:ring-(--focus-ring)";
-
-// ── Extreme settings detection ──────────────────────────────────────────
-
 const rpmRange = $derived(fan.max - fan.min);
 const isExtremeRpm = $derived(
 	selectedMode === "constant_rpm" &&
@@ -217,49 +191,41 @@ const extremeWarningMessage = $derived(
 
 <svelte:window onkeydown={handleKeydown} />
 
-<!-- Overlay wrapper -->
 <div
   class={cn('fixed inset-0 z-50 flex items-center justify-center')}
   transition:fade={{ duration: 150 }}
 >
-  <!-- Backdrop (accessible button, not in tab order) -->
   <button
     type="button"
-    class={cn('absolute inset-0 bg-black/20 backdrop-blur-[1px] cursor-default')}
+    class={cn(backdropSurface)}
     onclick={handleCancel}
     aria-label="Close dialog"
     tabindex="-1"
   ></button>
 
-  <!-- Modal -->
   <div
     bind:this={dialogEl}
-    class={cn(
-      'relative w-[420px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated)'
-    )}
+    class={cn(sheetSurface, 'relative w-[420px]')}
     role="dialog"
     aria-modal="true"
     aria-label={`Change fan control for ${fan.label}`}
     aria-describedby="fan-modal-body"
-    transition:scale={{ duration: 150, start: 0.95, opacity: 0 }}
+    transition:scale={{ duration: 150, start: 0.96, opacity: 0 }}
   >
-    <!-- Title -->
     <div class={cn('px-6 pt-5 pb-4 text-center')}>
-      <h2 class={cn('text-[13px] font-semibold text-(--text-primary)')}>
+      <h2 class={cn('text-[15px] font-semibold text-(--text-primary)')}>
         Change fan control for '{fan.label}'
       </h2>
     </div>
 
-    <!-- Body -->
     <div id="fan-modal-body" class={cn('px-6 pb-4 space-y-4')}>
-      <!-- Constant RPM option -->
       <label class={cn('flex items-center gap-3 cursor-pointer')}>
         <input
           type="radio"
           name="control-mode"
           value="constant_rpm"
           bind:group={selectedMode}
-          class="accent-(--color-midnight-ink)"
+          class="accent-(--text-primary)"
         />
         <span class={cn('text-[13px] text-(--text-primary)')}>Constant RPM value</span>
       </label>
@@ -273,7 +239,7 @@ const extremeWarningMessage = $derived(
             max={fan.max}
             step={100}
             aria-label={`Target RPM for ${fan.label}, range ${Math.round(fan.min)} to ${Math.round(fan.max)}`}
-            class={cn(inputBase, 'w-24 text-right')}
+            class={cn(inputClass, 'w-24 text-right')}
           />
           <span class={cn('text-[11px] text-(--text-muted)')}>
             RPM ({Math.round(fan.min)} – {Math.round(fan.max)})
@@ -281,17 +247,15 @@ const extremeWarningMessage = $derived(
         </div>
       {/if}
 
-      <!-- Separator -->
       <div class={cn('border-t border-(--border-subtle)')}></div>
 
-      <!-- Sensor-based option -->
       <label class={cn('flex items-center gap-3 cursor-pointer')}>
         <input
           type="radio"
           name="control-mode"
           value="sensor_based"
           bind:group={selectedMode}
-          class="accent-(--color-midnight-ink)"
+          class="accent-(--text-primary)"
         />
         <span class={cn('text-[13px] text-(--text-primary)')}>Sensor-based value</span>
 
@@ -299,7 +263,7 @@ const extremeWarningMessage = $derived(
           <select
             bind:value={selectedSensorKey}
             aria-label={`Temperature sensor for ${fan.label}`}
-            class={cn(inputBase, 'ml-auto min-w-[180px]')}
+            class={cn(inputClass, 'ml-auto min-w-[180px]')}
           >
             {#each tempSensors as sensor (sensor.key)}
               <option value={sensor.key}>{sensor.name}</option>
@@ -322,7 +286,7 @@ const extremeWarningMessage = $derived(
                 max={120}
                 step={1}
                 aria-label="Temperature to start increasing fan speed, degrees Celsius"
-                class={cn(inputBase, 'w-16 text-right')}
+                class={cn(inputClass, 'w-16 text-right')}
               />
               <span class={cn('text-[11px] text-(--text-muted)')}>°C</span>
             </div>
@@ -338,34 +302,31 @@ const extremeWarningMessage = $derived(
                 max={120}
                 step={1}
                 aria-label="Maximum temperature threshold, degrees Celsius"
-                class={cn(inputBase, 'w-16 text-right')}
+                class={cn(inputClass, 'w-16 text-right')}
               />
               <span class={cn('text-[11px] text-(--text-muted)')}>°C</span>
             </div>
           </div>
 
-          <!-- Temperature range bar -->
           <div class={cn('mt-1 space-y-1')} role="img" aria-label={rangeBarAriaLabel}>
-            <div class={cn('relative flex justify-between text-[10px] font-mono [font-variant-numeric:tabular-nums] text-(--text-muted)')}>
+            <div class={cn('relative flex justify-between font-mono text-[10px] tabular-nums text-(--text-muted)')}>
               <span>{tempLow}°C</span>
               {#if tempPosition !== null && selectedSensorValue !== null}
                 <span
-                  class={cn('absolute text-(--text-secondary) font-medium')}
+                  class={cn('absolute font-medium text-(--text-secondary)')}
                   style="left: {tempPosition * 100}%; transform: translateX(-50%)"
                 >{Math.round(selectedSensorValue)}°C</span>
               {/if}
               <span>{tempHigh}°C</span>
             </div>
-            <div class={cn('relative h-2 rounded-full overflow-hidden bg-(--surface-2)')}>
+            <div class={cn('relative h-2 rounded-full overflow-hidden bg-(--surface-0)')}>
               <div
-                class={cn('absolute inset-0 rounded-full bg-(--color-midnight-ink) opacity-20')}
+                class={cn('absolute inset-0 rounded-full')}
+                style="background: linear-gradient(to right, var(--status-normal), var(--status-warm), var(--status-hot))"
               ></div>
               {#if tempPosition !== null}
                 <div
-                  class={cn(
-                    'absolute top-1/2 w-3 h-3 rounded-full border-2 border-(--surface-elevated) shadow-sm',
-                    isMarkerHot ? 'bg-(--color-ember-orange)' : 'bg-(--text-primary)'
-                  )}
+                  class={cn('absolute top-1/2 size-3 rounded-full border-2 border-(--surface-2) bg-(--text-primary) shadow-sm')}
                   style="left: {tempPosition * 100}%; transform: translate(-50%, -50%)"
                 ></div>
               {/if}
@@ -378,34 +339,34 @@ const extremeWarningMessage = $derived(
         </div>
       {/if}
 
-      <!-- Extreme settings warning -->
       {#if hasExtremeSettings}
-        <div class={cn('rounded-(--radius-input) border border-(--color-ember-orange) bg-(--surface-2) p-3 space-y-2')} role="alert">
-          <p class={cn('flex items-start gap-2 text-[11px] text-(--text-primary) font-medium')}>
-            <AlertTriangle size={14} class="shrink-0 text-(--color-ember-orange) mt-0.5" aria-hidden="true" />
-            <span>{extremeWarningMessage}</span>
-          </p>
-          {#if !extremeWarningAcknowledged}
-            <label class={cn('flex items-center gap-2 cursor-pointer ml-5')}>
-              <input
-                type="checkbox"
-                bind:checked={extremeWarningAcknowledged}
-                class="accent-(--color-midnight-ink)"
-              />
-              <span class={cn('text-[11px] text-(--text-secondary)')}>I understand the risks</span>
-            </label>
-          {/if}
+        <div class={cn('flex items-start gap-2 rounded-[10px] border border-(--border-subtle) bg-(--surface-0) p-3 space-y-2')} role="alert">
+          <AlertTriangle size={14} class={cn('mt-0.5 shrink-0 text-(--text-primary)')} strokeWidth={1.75} />
+          <div class={cn('space-y-2')}>
+            <p class={cn('text-[11px] font-medium text-(--text-primary)')}>
+              {extremeWarningMessage}
+            </p>
+            {#if !extremeWarningAcknowledged}
+              <label class={cn('flex items-center gap-2 cursor-pointer')}>
+                <input
+                  type="checkbox"
+                  bind:checked={extremeWarningAcknowledged}
+                  class="accent-(--text-primary)"
+                />
+                <span class={cn('text-[11px] text-(--text-secondary)')}>I understand the risks</span>
+              </label>
+            {/if}
+          </div>
         </div>
       {/if}
 
-      <!-- Error message -->
       {#if errorMessage}
         <div
           class={cn('text-[11px] text-center space-y-2')}
           role="alert"
           aria-live="assertive"
         >
-          <p class={isPrivilegeError ? "text-(--color-ember-orange)" : "text-(--text-secondary)"}>
+          <p class={cn('text-(--text-primary)')}>
             {isPrivilegeError
               ? "Fan control needs a one-time setup after install. Grant access to install the privileged helper."
               : errorMessage}
@@ -413,7 +374,7 @@ const extremeWarningMessage = $derived(
           {#if isPrivilegeError}
             <button
               type="button"
-              class={okButton}
+              class={cn(buttonPrimary)}
               onclick={handleGrantAccess}
             >
               Grant Access
@@ -423,15 +384,14 @@ const extremeWarningMessage = $derived(
       {/if}
     </div>
 
-    <!-- Footer buttons -->
     <div class={cn('flex justify-end gap-2 px-6 pb-5')}>
-      <button type="button" class={cancelButton} onclick={handleCancel}>
+      <button type="button" class={cn(buttonSecondary)} onclick={handleCancel}>
         Cancel
       </button>
       <button
         type="button"
         bind:this={okButtonEl}
-        class={okButton}
+        class={cn(buttonPrimary)}
         disabled={isSubmitting || needsConfirmation}
         onclick={handleSubmit}
       >
diff --git a/src/components/FanControlPane.svelte b/src/components/FanControlPane.svelte
index b7389f5..546ecd5 100644
--- a/src/components/FanControlPane.svelte
+++ b/src/components/FanControlPane.svelte
@@ -1,213 +1,299 @@
 <script lang="ts">
-import { Fan as FanIcon } from "lucide-svelte";
+import { AlertCircle, CheckCircle2, Info } from "lucide-svelte";
 import { cn } from "$lib/cn";
-import { toFanRows } from "$lib/dashboardLayout";
-import type { SensorData } from "$lib/designTokens";
 import {
-	getFanControlConfigs,
+	clampRpmTarget,
+	type GlobalFanControlMode,
+	toGlobalFanControlState,
+} from "$lib/globalFanControl";
+import {
 	requestPrivilegeRestart,
-	setFanAuto,
+	restoreAllFansAuto,
+	setAllFansConstantRpm,
 } from "$lib/tauriCommands";
-import type { FanControlConfig, FanData, Sensor } from "$lib/types";
-import FanControlModal from "./FanControlModal.svelte";
+import type { FanData } from "$lib/types";
+import { buttonPrimary, buttonSecondary, segmentedActive, segmentedInactive } from "$lib/ui";
 
 interface Props {
-	fans: SensorData[];
 	rawFans: FanData[];
-	sensors: Sensor[];
 	hasWriteAccess: boolean;
-	fanControlAvailable: boolean;
 }
 
-const { fans, rawFans, sensors, hasWriteAccess, fanControlAvailable }: Props = $props();
-
-const fanRows = $derived(
-	toFanRows(fans).map((row) => {
-		const raw = rawFans.find((fan) => fan.index === row.fanIndex);
-		if (!raw) {
-			return row;
-		}
-		return {
-			...row,
-			controlMode: raw.mode === "forced" ? ("constant" as const) : ("auto" as const),
-			targetRpm: Math.round(raw.target),
-		};
-	}),
-);
-const controlBaseClass =
-	"rounded-[5px] text-[11px] px-3 py-0.5 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) cursor-pointer";
-const controlInactiveClass =
-	"text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--surface-2)";
-const controlActiveClass =
-	"bg-(--control-active-bg) text-(--control-active-text) font-medium";
+const { rawFans, hasWriteAccess }: Props = $props();
 
-// ── Modal state ──────────────────────────────────────────────────────────
+const initialControlMode = (): GlobalFanControlMode => "auto";
+let selectedMode: GlobalFanControlMode = $state(initialControlMode());
+let targetRpm: number = $state(0);
+let lastStateSignature: string = $state("");
+let isApplying: boolean = $state(false);
+let statusMessage: string | null = $state(null);
+let statusKind: "info" | "error" | "success" = $state("info");
 
-let modalFan: FanData | null = $state(null);
-let modalConfig: FanControlConfig | undefined = $state(undefined);
-let modalTriggerEl: HTMLButtonElement | null = $state(null);
-let privilegeError: string | null = $state(null);
-
-let fanConfigs: Record<string, FanControlConfig> = $state({});
+const globalState = $derived(toGlobalFanControlState(rawFans));
+const minRpm = $derived(
+	globalState.range.kind === "ready" ? globalState.range.minRpm : 0,
+);
+const maxRpm = $derived(
+	globalState.range.kind === "ready" ? globalState.range.maxRpm : 0,
+);
+const formatRpm = (value: number): string =>
+	new Intl.NumberFormat("en-US").format(Math.round(value));
+const currentRpmLabel = $derived(
+	globalState.currentRpm === null ? "N/A" : `${formatRpm(globalState.currentRpm)} RPM`,
+);
+const targetValue = $derived(
+	clampRpmTarget(targetRpm, globalState.range),
+);
+const targetPercent = $derived(
+	globalState.range.kind === "ready"
+		? ((targetValue - globalState.range.minRpm) /
+				(globalState.range.maxRpm - globalState.range.minRpm)) *
+			100
+		: 0,
+);
+const targetLabelPercent = $derived(Math.max(7, Math.min(93, targetPercent)));
+const canWriteManual = $derived(
+	hasWriteAccess &&
+		selectedMode === "manual" &&
+		globalState.canControl &&
+		!isApplying,
+);
+const canRestoreAuto = $derived(
+	hasWriteAccess && globalState.fanCount > 0 && !isApplying,
+);
 
 $effect(() => {
-	getFanControlConfigs()
-		.then((configs) => {
-			fanConfigs = configs;
-		})
-		.catch((err) =>
-			console.error("[fanguard] Failed to fetch fan configs:", err),
-		);
-});
+	const signature = [
+		globalState.mode,
+		globalState.targetRpm,
+		globalState.fanCount,
+		globalState.range.kind,
+		globalState.range.kind === "ready" ? globalState.range.minRpm : "none",
+		globalState.range.kind === "ready" ? globalState.range.maxRpm : "none",
+	].join(":");
 
-function openCustomModal(fanIndex: number, triggerEl: HTMLButtonElement): void {
-	const fan = rawFans.find((f) => f.index === fanIndex);
-	if (fan) {
-		modalFan = fan;
-		modalConfig = fanConfigs[String(fan.index)];
-		modalTriggerEl = triggerEl;
+	if (signature !== lastStateSignature) {
+		selectedMode = globalState.mode;
+		targetRpm = globalState.targetRpm;
+		lastStateSignature = signature;
 	}
-}
+});
 
-function closeModal(): void {
-	const trigger = modalTriggerEl;
-	modalFan = null;
-	modalTriggerEl = null;
-	queueMicrotask(() => trigger?.focus());
+function isDevModeError(message: string): boolean {
+	return message.includes("development mode") || message.includes("sudo pnpm");
 }
 
 function isPrivilegeError(error: unknown): boolean {
-	const msg = error instanceof Error ? error.message : String(error);
+	const message = error instanceof Error ? error.message : String(error);
 	return (
-		msg.includes("root") ||
-		msg.includes("privileges") ||
-		msg.includes("not available") ||
-		msg.includes("Unknown key") ||
-		msg.includes("privileged helper")
+		message.includes("root") ||
+		message.includes("privileges") ||
+		message.includes("not available") ||
+		message.includes("Unknown key") ||
+		message.includes("privileged helper")
 	);
 }
 
-async function handleAutoClick(fanIndex: number): Promise<void> {
-	privilegeError = null;
+async function handleManualApply(): Promise<void> {
+	if (!canWriteManual) {
+		return;
+	}
+
+	isApplying = true;
+	statusMessage = null;
+	const rpm = targetValue;
 	try {
-		await setFanAuto(fanIndex);
+		await setAllFansConstantRpm(rpm);
+		statusKind = "success";
+		statusMessage = `Applied ${rpm} RPM to ${globalState.fanCount} fan${globalState.fanCount === 1 ? "" : "s"}.`;
 	} catch (error) {
-		if (isPrivilegeError(error)) {
-			privilegeError = "Fan control requires elevated privileges.";
-		} else {
-			console.error("[fanguard] Failed to set fan to auto:", error);
-		}
+		statusKind = "error";
+		statusMessage = isPrivilegeError(error)
+			? "Fan control requires elevated privileges."
+			: error instanceof Error
+				? error.message
+				: String(error);
+	} finally {
+		isApplying = false;
 	}
 }
 
-function isDevModeError(msg: string): boolean {
-	return msg.includes("development mode") || msg.includes("sudo pnpm");
+async function handleRestoreAuto(): Promise<void> {
+	if (!canRestoreAuto) {
+		return;
+	}
+
+	isApplying = true;
+	statusMessage = null;
+	try {
+		await restoreAllFansAuto();
+		selectedMode = "auto";
+		statusKind = "success";
+		statusMessage = `Restored automatic control for ${globalState.fanCount} fan${globalState.fanCount === 1 ? "" : "s"}.`;
+	} catch (error) {
+		statusKind = "error";
+		statusMessage = error instanceof Error ? error.message : String(error);
+	} finally {
+		isApplying = false;
+	}
 }
 
 async function handleRestartWithPrivileges(): Promise<void> {
 	try {
 		await requestPrivilegeRestart();
 	} catch (error) {
-		const msg = error instanceof Error ? error.message : String(error);
-		if (msg.includes("cancelled") || msg.includes("canceled")) {
-			privilegeError = null;
-		} else if (isDevModeError(msg)) {
-			privilegeError = msg;
+		const message = error instanceof Error ? error.message : String(error);
+		if (message.includes("cancelled") || message.includes("canceled")) {
+			statusMessage = null;
+		} else if (isDevModeError(message)) {
+			statusKind = "error";
+			statusMessage = message;
 		} else {
 			console.error("[fanguard] Privilege restart failed:", error);
 		}
 	}
 }
+
+function handleTargetInput(event: Event): void {
+	const input = event.currentTarget as HTMLInputElement;
+	targetRpm = clampRpmTarget(Number(input.value), globalState.range);
+}
 </script>
 
-<section class={cn("min-h-0 overflow-y-auto border-r border-(--border-subtle) bg-(--surface-1)")}>
-  <!-- Header -->
-  <div
-    class={cn("sticky top-0 grid grid-cols-[100px_1fr_280px] items-center border-b border-(--border-subtle) bg-(--surface-2) text-[11px] font-medium text-(--text-secondary)")}
-    role="row"
-  >
-    <div class="px-2 py-1 flex items-center border-r border-(--border-subtle)">Fan</div>
-    <div class="px-2 py-1 flex items-center border-r border-(--border-subtle)">Min/Current/Max RPM</div>
-    <div class="px-2 py-1 flex items-center">Control</div>
-  </div>
+<section
+  class={cn(
+    "bg-(--material-window) px-4 py-3"
+  )}
+  aria-labelledby="fan-control-heading"
+>
+  <h2 id="fan-control-heading" class={cn("mb-1.5 text-[12px] font-medium uppercase text-(--text-secondary)")}>
+    Fan Control
+  </h2>
 
-  {#if privilegeError}
-    <div class={cn("flex items-center justify-between gap-2 border-b border-ember-orange/40 bg-(--surface-2) px-3 py-1.5 text-[11px] text-(--text-primary)")}>
-      <span>{privilegeError}</span>
-      {#if !isDevModeError(privilegeError)}
+  <div class={cn("rounded-[7px] border border-(--border-subtle) bg-(--surface-1) px-4 py-3")}>
+    <div class={cn("mb-1 grid grid-cols-[110px_minmax(180px,1fr)_auto] items-center gap-4")}>
+      <span class={cn("text-[13px] text-(--text-primary)")}>Mode</span>
+      <div class={cn("grid h-8 w-[200px] grid-cols-2 rounded-[7px] border border-(--border-subtle) bg-(--material-control) p-0.5")}>
         <button
           type="button"
-          class={cn("shrink-0 rounded-(--radius-button) border border-(--border-subtle) bg-(--surface-elevated) px-2 py-0.5 text-[11px] font-medium text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2) transition-colors")}
-          onclick={handleRestartWithPrivileges}
+          class={cn(selectedMode === "auto" ? segmentedActive : segmentedInactive, "min-h-7 text-[13px]")}
+          aria-pressed={selectedMode === "auto"}
+          onclick={() => { selectedMode = "auto"; }}
         >
-          Restart with Admin Privileges
+          Auto
         </button>
-      {/if}
+        <button
+          type="button"
+          class={cn(selectedMode === "manual" ? segmentedActive : segmentedInactive, "min-h-7 text-[13px]")}
+          aria-pressed={selectedMode === "manual"}
+          onclick={() => { selectedMode = "manual"; }}
+        >
+          Manual
+        </button>
+      </div>
+      <div></div>
     </div>
-  {/if}
 
-  <div class={cn("flex flex-col")}>
-    {#if fanRows.length === 0}
-      <div class={cn("px-2 py-2 text-(--text-muted)")}>
-        <span>No fan telemetry available.</span>
+    <div class={cn("grid grid-cols-[110px_minmax(260px,1fr)_auto] items-center gap-4")}>
+      <span class={cn("text-[13px] text-(--text-primary)")}>Target RPM</span>
+      <div class={cn("grid min-w-0 grid-rows-[auto_auto] gap-2")}>
+        <div class={cn("flex min-w-0 items-center gap-4")}>
+        <span class={cn("w-10 text-right text-[12px] tabular-nums text-(--text-primary)")}>
+          {globalState.range.kind === "ready" ? minRpm : "--"}
+        </span>
+        <div class={cn("relative min-w-0 grow pt-5")}>
+          <span
+            class={cn("absolute top-0 -translate-x-1/2 text-[13px] font-medium tabular-nums text-(--accent-blue)")}
+			style={`left: ${targetLabelPercent}%`}
+          >
+            {globalState.canControl ? `${targetValue} RPM` : "--"}
+          </span>
+          <input
+            type="range"
+            min={minRpm}
+            max={maxRpm}
+            step="50"
+            value={targetValue}
+            aria-label="Target RPM"
+            disabled={!globalState.canControl || selectedMode === "auto" || !hasWriteAccess || isApplying}
+            class={cn("liquid-range w-full")}
+            style={`--range-progress: ${targetPercent}%`}
+            oninput={handleTargetInput}
+          />
+        </div>
+        <span class={cn("w-10 text-[12px] tabular-nums text-(--text-primary)")}>
+          {globalState.range.kind === "ready" ? maxRpm : "--"}
+        </span>
+        </div>
+        <div class={cn("text-center text-[12px] tabular-nums text-(--text-secondary)")}>
+          Current average: {currentRpmLabel}
+        </div>
       </div>
-    {:else}
-      {#each fanRows as fan (fan.id)}
-        <div
-          class={cn(
-            "grid grid-cols-[100px_1fr_280px] items-center border-b border-(--border-subtle) hover:bg-(--surface-hover) last:border-b-0"
-          )}
-          role="row"
+      <div class={cn("flex items-center justify-end gap-2")}>
+        <button
+          type="button"
+          class={cn(buttonPrimary, "min-h-8 min-w-[96px] rounded-[7px] text-[13px]")}
+          disabled={!canWriteManual}
+          onclick={handleManualApply}
         >
-          <div class={cn("flex min-w-0 items-center gap-2 px-2 py-1 text-[12px] text-(--text-primary)")}>
-            <FanIcon size={14} class="text-(--text-secondary) shrink-0" />
-            <span class="truncate">{fan.label}</span>
-          </div>
-          <div
-            class={cn("flex items-baseline gap-1 px-2 py-1 text-[12px] font-mono [font-variant-numeric:tabular-nums]")}
+          {isApplying ? "Applying..." : "Apply"}
+        </button>
+        <button
+          type="button"
+          class={cn(buttonSecondary, "min-h-8 min-w-[112px] rounded-[7px] text-[13px]")}
+          disabled={!canRestoreAuto}
+          onclick={handleRestoreAuto}
+        >
+          Restore Auto
+        </button>
+      </div>
+    </div>
+
+    <p class={cn("mt-2 flex items-center gap-2 text-[12px] text-(--text-secondary)")}>
+      <Info size={16} class={cn("shrink-0")} strokeWidth={1.8} />
+      Applies to all fans.
+    </p>
+
+    {#if globalState.disabledReason}
+      <p class={cn("mt-2 text-[11px] text-(--text-secondary)")} role="status">
+        {globalState.disabledReason}
+      </p>
+    {/if}
+
+    {#if !hasWriteAccess}
+      <p class={cn("mt-2 text-[11px] text-(--text-secondary)")} role="status">
+        Fan writes need administrator access.
+      </p>
+    {/if}
+
+    {#if statusMessage}
+      <div
+        class={cn(
+          "mt-2 flex items-center justify-between gap-2 rounded-[8px] border px-2.5 py-1.5 text-[11px]",
+          statusKind === "error"
+            ? "border-(--status-hot) bg-(--surface-1) text-(--text-primary)"
+            : "border-(--border-subtle) bg-(--material-control) text-(--text-secondary)"
+        )}
+        role={statusKind === "error" ? "alert" : "status"}
+      >
+        <span class={cn("flex items-center gap-1.5")}>
+          {#if statusKind === "error"}
+            <AlertCircle size={13} class={cn("text-(--status-hot)")} strokeWidth={1.8} />
+          {:else}
+            <CheckCircle2 size={13} class={cn("text-(--status-normal)")} strokeWidth={1.8} />
+          {/if}
+          {statusMessage}
+        </span>
+        {#if statusKind === "error" && statusMessage === "Fan control requires elevated privileges." && !isDevModeError(statusMessage)}
+          <button
+            type="button"
+            class={cn(buttonSecondary, "shrink-0 px-2 py-0.5 text-[11px]")}
+            onclick={handleRestartWithPrivileges}
           >
-            <span class={cn("text-(--text-muted)")}>{fan.minRpm}</span>
-            <span class="text-(--text-muted)">-</span>
-            <span class={cn("font-bold text-(--text-value)")}>{fan.currentRpm ?? 'N/A'}</span>
-            <span class="text-(--text-muted)">-</span>
-            <span class={cn("text-(--text-muted)")}>{fan.maxRpm}</span>
-          </div>
-          <div class={cn("px-2 py-1 flex items-center justify-center")}>
-            {#if fanControlAvailable}
-              <div class={cn("flex items-center rounded-(--radius-segmented) border border-(--border-subtle) bg-(--surface-2) p-0.5 gap-0")}>
-                <button
-                  type="button"
-                  class={cn(
-                    controlBaseClass,
-                    fan.controlMode === 'auto' ? controlActiveClass : controlInactiveClass
-                  )}
-                  aria-label={`Set ${fan.label} to auto mode`}
-                  onclick={() => handleAutoClick(fan.fanIndex)}
-                >
-                  Auto
-                </button>
-                <button
-                  type="button"
-                  class={cn(
-                    controlBaseClass,
-                    fan.controlMode === 'constant' ? controlActiveClass : controlInactiveClass
-                  )}
-                  aria-label={`Set ${fan.label} to custom mode`}
-                  onclick={(e: MouseEvent) => openCustomModal(fan.fanIndex, e.currentTarget as HTMLButtonElement)}
-                >
-                  {fan.controlMode === 'constant' ? `Constant value of ${fan.targetRpm}` : 'Custom...'}
-                </button>
-              </div>
-            {:else}
-              <span class={cn("text-[11px] text-(--text-muted)")}>Monitoring only</span>
-            {/if}
-          </div>
-        </div>
-      {/each}
+            Restart with Admin Privileges
+          </button>
+        {/if}
+      </div>
     {/if}
   </div>
 </section>
-
-{#if modalFan}
-  <FanControlModal fan={modalFan} {sensors} currentConfig={modalConfig} onclose={closeModal} />
-{/if}
diff --git a/src/components/FanControlPane.test.ts b/src/components/FanControlPane.test.ts
index e5f88eb..11077e7 100644
--- a/src/components/FanControlPane.test.ts
+++ b/src/components/FanControlPane.test.ts
@@ -1,14 +1,18 @@
 import { render, screen } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
-import type { FanData, Sensor, SensorData } from "$lib/types";
+import type { FanData } from "$lib/types";
 import FanControlPane from "./FanControlPane.svelte";
 
+const { setAllFansConstantRpm, restoreAllFansAuto } = vi.hoisted(() => ({
+	setAllFansConstantRpm: vi.fn().mockResolvedValue(undefined),
+	restoreAllFansAuto: vi.fn().mockResolvedValue(undefined),
+}));
+
 vi.mock("$lib/tauriCommands", () => ({
-	getFanControlConfigs: vi.fn().mockResolvedValue({}),
-	setFanAuto: vi.fn().mockResolvedValue(undefined),
-	setFanConstantRpm: vi.fn().mockResolvedValue(undefined),
 	requestPrivilegeRestart: vi.fn(),
+	restoreAllFansAuto,
+	setAllFansConstantRpm,
 }));
 
 const autoFan: FanData = {
@@ -17,109 +21,52 @@ const autoFan: FanData = {
 	actual: 2000,
 	min: 1200,
 	max: 6550,
-	target: 1200,
+	target: 2000,
 	mode: "auto",
 };
 
-const forcedFan: FanData = {
-	...autoFan,
-	mode: "forced",
-	target: 4000,
-};
-
-const sensors: Sensor[] = [
-	{
-		key: "TC0D",
-		name: "CPU Die",
-		value: 55,
-		unit: "C",
-		sensor_type: "Cpu",
-	},
-];
-
-const toDesignToken = (fan: FanData) => ({
-	id: `fan-${fan.index}`,
-	fanIndex: fan.index,
-	label: fan.label,
-	value: Math.round(fan.actual),
-	unit: "rpm" as const,
-	status: "normal" as const,
-	minRpm: Math.round(fan.min),
-	maxRpm: Math.round(fan.max),
-	targetRpm: Math.round(fan.target),
-	controlMode: fan.mode === "forced" ? ("constant" as const) : ("auto" as const),
-});
+const renderPane = (hasWriteAccess = true) =>
+	render(FanControlPane, {
+		props: { rawFans: [autoFan], hasWriteAccess },
+	});
 
 describe("FanControlPane", () => {
-	it("shows Auto active when fan mode is auto", () => {
-		render(FanControlPane, {
-			props: {
-				fans: [toDesignToken(autoFan)],
-				rawFans: [autoFan],
-				sensors,
-				hasWriteAccess: true,
-				fanControlAvailable: true,
-			},
-		});
+	it("shows the shared numeric RPM range and disables Apply in Auto mode", () => {
+		renderPane();
 
-		expect(screen.getByRole("button", { name: "Set Fan 0 to auto mode" })).toHaveClass(
-			"text-(--control-active-text)",
-		);
-		expect(screen.getByRole("button", { name: "Set Fan 0 to custom mode" })).not.toHaveClass(
-			"text-(--control-active-text)",
-		);
+		expect(screen.getByText("1200")).toBeVisible();
+		expect(screen.getByText("6550")).toBeVisible();
+		expect(screen.getByText("2000 RPM")).toBeVisible();
+		expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
 	});
 
-	it("shows Custom active when fan mode is forced", () => {
-		render(FanControlPane, {
-			props: {
-				fans: [toDesignToken(forcedFan)],
-				rawFans: [forcedFan],
-				sensors,
-				hasWriteAccess: true,
-				fanControlAvailable: true,
-			},
-		});
+	it("applies one manual target through the global backend command", async () => {
+		const user = userEvent.setup();
+		renderPane();
+
+		await user.click(screen.getByRole("button", { name: "Manual" }));
+		await user.click(screen.getByRole("button", { name: "Apply" }));
 
-		const customButton = screen.getByRole("button", { name: "Set Fan 0 to custom mode" });
-		expect(customButton).toHaveClass("text-(--control-active-text)");
-		expect(customButton).toHaveTextContent("Constant value of 4000");
-		expect(screen.getByRole("button", { name: "Set Fan 0 to auto mode" })).not.toHaveClass(
-			"text-(--control-active-text)",
-		);
+		expect(setAllFansConstantRpm).toHaveBeenCalledWith(2000);
+		expect(screen.getByText("Applied 2000 RPM to 1 fan.")).toBeVisible();
 	});
 
-	it("calls setFanAuto when Auto is clicked", async () => {
+	it("restores all fans to automatic control", async () => {
 		const user = userEvent.setup();
-		const { setFanAuto } = await import("$lib/tauriCommands");
+		renderPane();
 
-		render(FanControlPane, {
-			props: {
-				fans: [toDesignToken(forcedFan)],
-				rawFans: [forcedFan],
-				sensors,
-				hasWriteAccess: true,
-				fanControlAvailable: true,
-			},
-		});
+		await user.click(screen.getByRole("button", { name: "Restore Auto" }));
 
-		await user.click(screen.getByRole("button", { name: "Set Fan 0 to auto mode" }));
-		expect(setFanAuto).toHaveBeenCalledWith(0);
+		expect(restoreAllFansAuto).toHaveBeenCalledTimes(1);
+		expect(screen.getByText("Restored automatic control for 1 fan.")).toBeVisible();
 	});
 
-	it("hides write controls when fan control is unavailable", () => {
-		render(FanControlPane, {
-			props: {
-				fans: [toDesignToken(autoFan)],
-				rawFans: [autoFan],
-				sensors,
-				hasWriteAccess: false,
-				fanControlAvailable: false,
-			},
-		});
+	it("disables fan writes without administrator access", () => {
+		renderPane(false);
 
-		expect(screen.queryByRole("button", { name: "Set Fan 0 to auto mode" })).not.toBeInTheDocument();
-		expect(screen.queryByRole("button", { name: "Set Fan 0 to custom mode" })).not.toBeInTheDocument();
-		expect(screen.getByText("Monitoring only")).toBeVisible();
+		expect(screen.getByRole("slider", { name: "Target RPM" })).toBeDisabled();
+		expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
+		expect(screen.getByRole("button", { name: "Restore Auto" })).toBeDisabled();
+		expect(screen.getByText("Fan writes need administrator access.")).toBeVisible();
 	});
 });
diff --git a/src/components/FanTelemetryRows.svelte b/src/components/FanTelemetryRows.svelte
new file mode 100644
index 0000000..e3b2555
--- /dev/null
+++ b/src/components/FanTelemetryRows.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+import { Fan as FanIcon } from "lucide-svelte";
+import { cn } from "$lib/cn";
+import { toFanRows } from "$lib/dashboardLayout";
+import type { SensorData } from "$lib/designTokens";
+import { telemetryGrid } from "$lib/ui";
+
+interface Props {
+	fans: SensorData[];
+	emptyLabel?: string;
+}
+
+const { fans, emptyLabel = "No fan telemetry available." }: Props = $props();
+
+const fanRows = $derived(toFanRows(fans));
+
+const formatRpm = (value: number | null): string =>
+	value === null
+		? "N/A"
+		: `${new Intl.NumberFormat("en-US").format(Math.round(value))} RPM`;
+
+const modeLabel = (mode: string): string =>
+	mode === "constant" ? "Synced" : "Auto";
+</script>
+
+{#if fanRows.length === 0}
+  <div class={cn("px-4 py-3 text-[12px] text-(--text-muted)")}>
+    <span>{emptyLabel}</span>
+  </div>
+{:else}
+  {#each fanRows as fan, i (fan.id)}
+    <div
+      class={cn(
+        "grid min-h-[30px] items-center border-b border-(--border-subtle) px-3 text-[12px] last:border-b-0",
+        telemetryGrid,
+        i % 2 === 1 && "bg-(--table-row-alternating)"
+      )}
+      role="row"
+    >
+      <div class={cn("flex min-w-0 items-center gap-3 pl-7 pr-3")}>
+        <FanIcon size={18} class={cn("shrink-0 text-(--text-secondary)")} strokeWidth={1.75} />
+        <span class={cn("truncate text-(--text-primary)")}>{fan.label}</span>
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 tabular-nums text-(--text-value)")}>
+        {formatRpm(fan.currentRpm)}
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 tabular-nums text-(--text-secondary)")}>
+        {fan.minRpm} - {fan.maxRpm}
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 text-(--text-secondary)")}>
+        {modeLabel(fan.controlMode)}
+      </div>
+      <div class={cn("flex items-center gap-1.5 border-l border-(--table-column-separator) px-3 text-(--text-secondary)")}>
+        <span class={cn("inline-block size-1.5 shrink-0 rounded-full bg-(--status-normal)")}></span>
+        OK
+      </div>
+    </div>
+  {/each}
+{/if}
diff --git a/src/components/PowerPresetSettings.svelte b/src/components/PowerPresetSettings.svelte
index a396dd9..04c6271 100644
--- a/src/components/PowerPresetSettings.svelte
+++ b/src/components/PowerPresetSettings.svelte
@@ -8,6 +8,7 @@ import {
 	setPowerPresetConfig,
 } from "$lib/tauriCommands";
 import type { PowerPresetConfig, PowerSource, Preset } from "$lib/types";
+import { inputClass } from "$lib/ui";
 
 let config: PowerPresetConfig = $state({
 	enabled: false,
@@ -72,16 +73,18 @@ async function handleBatteryPreset(event: Event): Promise<void> {
 	}
 }
 
-const powerSourceLabel = $derived(
-	powerSource === "ac"
-		? "AC Power"
-		: powerSource === "battery"
-			? "Battery"
-			: "Unknown",
-);
+function formatPowerSource(source: PowerSource): string {
+	switch (source) {
+		case "ac":
+			return "AC Power";
+		case "battery":
+			return "Battery";
+		case "unknown":
+			return "Unknown";
+	}
+}
 
-const selectClass =
-	"w-full rounded-(--radius-input) border border-(--border-subtle) bg-(--surface-elevated) px-2 py-1 text-[12px] text-(--text-primary) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)";
+const powerSourceLabel = $derived(formatPowerSource(powerSource));
 </script>
 
 <div class={cn("flex flex-col gap-3")}>
@@ -92,12 +95,12 @@ const selectClass =
     <button
       type="button"
       class={cn(
-        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
-        config.enabled ? "bg-(--control-active-bg)" : "bg-(--color-silver-mist)"
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)",
+        config.enabled ? "bg-(--text-primary)" : "bg-(--border-strong)"
       )}
       role="switch"
       aria-checked={config.enabled}
-      aria-label="Toggle auto-switch presets by power source"
+      aria-label="Auto-switch presets by power source"
       onclick={handleToggle}
     >
       <span
@@ -111,7 +114,7 @@ const selectClass =
 
   <div class={cn("flex items-center gap-2 text-[11px] text-(--text-secondary)")}>
     <span class={cn(
-      "inline-flex items-center gap-1 rounded-(--radius-capsule) border border-(--border-subtle) bg-(--surface-2) px-2 py-0.5 text-[10px] font-medium text-(--text-secondary)"
+      "inline-flex items-center gap-1 rounded-full border border-(--border-subtle) bg-(--surface-0) px-2 py-0.5 text-[10px] font-medium"
     )}>
       {powerSourceLabel}
     </span>
@@ -121,7 +124,7 @@ const selectClass =
     <div class={cn("flex flex-col gap-2")}>
       <label class={cn("flex flex-col gap-1")}>
         <span class={cn("text-[11px] text-(--text-secondary)")}>When on AC Power:</span>
-        <select class={cn(selectClass)} onchange={handleAcPreset} value={config.ac_preset ?? ""}>
+        <select class={cn(inputClass, "w-full")} onchange={handleAcPreset} value={config.ac_preset ?? ""}>
           <option value="">No change</option>
           {#each presets as preset}
             <option value={preset.name}>{preset.name}</option>
@@ -131,7 +134,7 @@ const selectClass =
 
       <label class={cn("flex flex-col gap-1")}>
         <span class={cn("text-[11px] text-(--text-secondary)")}>When on Battery:</span>
-        <select class={cn(selectClass)} onchange={handleBatteryPreset} value={config.battery_preset ?? ""}>
+        <select class={cn(inputClass, "w-full")} onchange={handleBatteryPreset} value={config.battery_preset ?? ""}>
           <option value="">No change</option>
           {#each presets as preset}
             <option value={preset.name}>{preset.name}</option>
diff --git a/src/components/PreferencesDialog.svelte b/src/components/PreferencesDialog.svelte
index 67157db..fac97d1 100644
--- a/src/components/PreferencesDialog.svelte
+++ b/src/components/PreferencesDialog.svelte
@@ -1,43 +1,31 @@
 <script lang="ts">
 import { fade, scale } from "svelte/transition";
 import { cn } from "$lib/cn";
-import { getTrayDisplayMode, setTrayDisplayMode } from "$lib/tauriCommands";
+import {
+	backdropSurface,
+	buttonSecondary,
+	segmentedActive,
+	segmentedInactive,
+	sheetSurface,
+} from "$lib/ui";
 import PowerPresetSettings from "./PowerPresetSettings.svelte";
 
 interface Props {
-	onclose: () => void;
+	trayDisplayMode: number;
 	fanControlAvailable: boolean;
+	onTrayModeChange: (mode: number) => void;
+	onclose: () => void;
 }
 
-const { onclose, fanControlAvailable }: Props = $props();
+const { trayDisplayMode, fanControlAvailable, onTrayModeChange, onclose }: Props = $props();
 
 let dialogEl: HTMLDivElement | undefined = $state(undefined);
 let closeButtonEl: HTMLButtonElement | undefined = $state(undefined);
-let trayDisplayMode: number = $state(0);
 
 $effect(() => {
 	closeButtonEl?.focus();
 });
 
-$effect(() => {
-	getTrayDisplayMode()
-		.then((mode) => {
-			trayDisplayMode = mode;
-		})
-		.catch(() => {
-			trayDisplayMode = 0;
-		});
-});
-
-async function handleTrayModeChange(mode: number): Promise<void> {
-	trayDisplayMode = mode;
-	try {
-		await setTrayDisplayMode(mode);
-	} catch (error) {
-		console.error("[PreferencesDialog] Failed to set tray display mode:", error);
-	}
-}
-
 function handleKeydown(event: KeyboardEvent): void {
 	if (event.key === "Escape") {
 		onclose();
@@ -60,24 +48,17 @@ function handleKeydown(event: KeyboardEvent): void {
 		}
 	}
 }
-
-const buttonBase =
-	"cursor-pointer rounded-(--radius-button) border px-4 py-1.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-const doneButton = cn(
-	buttonBase,
-	"border-(--border-subtle) bg-(--surface-elevated) text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2)",
-);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div
-  class={cn('fixed inset-0 z-50 flex items-center justify-center')}
+  class={cn("fixed inset-0 z-50 flex items-center justify-center")}
   transition:fade={{ duration: 150 }}
 >
   <button
     type="button"
-    class={cn('absolute inset-0 bg-black/20 backdrop-blur-[1px] cursor-default')}
+    class={cn(backdropSurface)}
     onclick={onclose}
     aria-label="Close dialog"
     tabindex="-1"
@@ -85,73 +66,55 @@ const doneButton = cn(
 
   <div
     bind:this={dialogEl}
-    class={cn(
-      'relative w-[380px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated)'
-    )}
+    class={cn(sheetSurface, "relative w-[380px]")}
     role="dialog"
     aria-modal="true"
     aria-label="Preferences"
-    transition:scale={{ duration: 150, start: 0.95, opacity: 0 }}
+    transition:scale={{ duration: 150, start: 0.96, opacity: 0 }}
   >
-    <div class={cn('px-6 pt-5 pb-2')}>
-      <h2 class={cn('text-[14px] font-semibold text-(--text-primary)')}>
+    <div class={cn("px-6 pt-5 pb-2")}>
+      <h2 class={cn("text-[15px] font-semibold text-(--text-primary)")}>
         Preferences
       </h2>
     </div>
 
-    <div class={cn('flex flex-col gap-5 px-6 py-3')}>
-      <div class={cn('flex flex-col gap-2')}>
-        <p class={cn('text-[12px] font-medium text-(--text-primary)')}>Menu bar display</p>
-        <div class={cn('flex gap-0 rounded-(--radius-segmented) border border-(--border-subtle) bg-(--surface-2) p-0.5')} role="radiogroup" aria-label="Menu bar display">
+    <div class={cn("space-y-4 px-6 py-3")}>
+      <div class={cn("flex flex-col gap-2")}>
+        <p class={cn("text-[12px] font-medium text-(--text-primary)")}>Menu bar display</p>
+        <div class={cn("flex gap-1.5")}>
           <button
             type="button"
-            role="radio"
-            aria-checked={trayDisplayMode === 0}
-            class={cn(
-              'flex-1 rounded-[5px] px-3 py-1 text-[12px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)',
-              trayDisplayMode === 0
-                ? 'bg-(--control-active-bg) text-(--control-active-text) font-medium'
-                : 'text-(--text-secondary) hover:text-(--text-primary)'
-            )}
-            onclick={() => handleTrayModeChange(0)}
+            class={cn(trayDisplayMode === 0 ? segmentedActive : segmentedInactive, "px-3 py-1 text-[12px]")}
+            aria-pressed={trayDisplayMode === 0}
+            onclick={() => onTrayModeChange(0)}
           >
             CPU Temperature
           </button>
           <button
             type="button"
-            role="radio"
-            aria-checked={trayDisplayMode === 1}
-            class={cn(
-              'flex-1 rounded-[5px] px-3 py-1 text-[12px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring)',
-              trayDisplayMode === 1
-                ? 'bg-(--control-active-bg) text-(--control-active-text) font-medium'
-                : 'text-(--text-secondary) hover:text-(--text-primary)'
-            )}
-            onclick={() => handleTrayModeChange(1)}
+            class={cn(trayDisplayMode === 1 ? segmentedActive : segmentedInactive, "px-3 py-1 text-[12px]")}
+            aria-pressed={trayDisplayMode === 1}
+            onclick={() => onTrayModeChange(1)}
           >
             Fan RPM
           </button>
         </div>
       </div>
 
-      <div class={cn('border-t border-(--border-subtle)')}></div>
+      <div class={cn("border-t border-(--border-subtle)")}></div>
 
-      <div>
-        {#if fanControlAvailable}
-          <PowerPresetSettings />
-        {:else}
-          <p class={cn('text-[12px] text-(--text-secondary)')}>
-            Fan preset automation is unavailable in TestFlight builds.
-          </p>
-        {/if}
-      </div>
+      {#if fanControlAvailable}
+        <PowerPresetSettings />
+      {:else}
+        <p class={cn("text-[12px] text-(--text-secondary)")}>Fan preset automation is unavailable in TestFlight builds.</p>
+      {/if}
     </div>
 
-    <div class={cn('flex justify-end px-6 pb-5 pt-2')}>
+    <div class={cn("flex justify-end px-6 pb-5 pt-2")}>
       <button
         type="button"
         bind:this={closeButtonEl}
-        class={doneButton}
+        class={cn(buttonSecondary)}
         onclick={onclose}
       >
         Done
diff --git a/src/components/PresetDropdown.svelte b/src/components/PresetDropdown.svelte
index 4b892ae..d5391fd 100644
--- a/src/components/PresetDropdown.svelte
+++ b/src/components/PresetDropdown.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Check, X } from "lucide-svelte";
+import { ChevronDown } from "lucide-svelte";
 import { cn } from "$lib/cn";
 import {
 	applyPreset,
@@ -9,6 +9,7 @@ import {
 	savePreset,
 } from "$lib/tauriCommands";
 import type { Preset } from "$lib/types";
+import { buttonPrimary, buttonSecondary, inputClass, sheetSurface } from "$lib/ui";
 
 let presets: Preset[] = $state([]);
 let activePresetName: string = $state("Automatic");
@@ -97,7 +98,7 @@ async function handleSavePreset(): Promise<void> {
 
 async function handleDeletePreset(
 	name: string,
-	event: MouseEvent,
+	event: Event,
 ): Promise<void> {
 	event.stopPropagation();
 	applyError = "";
@@ -149,38 +150,23 @@ function handleKeydown(event: KeyboardEvent): void {
 	}
 }
 
-const popupButtonClass =
-	"rounded-(--radius-button) border border-(--border-subtle) bg-(--surface-elevated) px-3 py-1 text-[12px] text-(--text-primary) shadow-(--shadow-hairline) transition-colors hover:bg-(--surface-2) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-
-const dropdownItemClass =
-	"w-full text-left px-3 py-1.5 text-[12px] text-(--text-primary) hover:bg-(--surface-2) transition-colors flex items-center justify-between";
-
-const buttonBase =
-	"cursor-pointer rounded-(--radius-button) border px-4 py-1.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-
-const cancelButton = cn(
-	buttonBase,
-	"border-(--border-subtle) bg-(--surface-elevated) text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2)",
-);
-
-const primaryButton = cn(
-	buttonBase,
-	"border-(--control-active-border) bg-(--control-active-bg) text-(--control-active-text) disabled:opacity-50",
-);
+const itemClass =
+	"w-full text-left px-3 py-1.5 text-[12px] text-(--text-primary) hover:bg-(--surface-hover) transition-colors flex items-center justify-between cursor-pointer";
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="relative">
   <button
-    class={cn(popupButtonClass)}
+    class={cn(buttonSecondary, "h-10 gap-2 rounded-[10px] px-3.5 text-[16px]")}
     type="button"
     onclick={toggleDropdown}
     aria-haspopup="menu"
     aria-expanded={isOpen}
     aria-label="Select fan preset"
   >
-    {activePresetName} ▾
+    Preset: {activePresetName}
+    <ChevronDown size={13} class={cn("text-(--text-secondary)")} strokeWidth={1.75} />
   </button>
 
   {#if isOpen}
@@ -192,7 +178,8 @@ const primaryButton = cn(
       role="menu"
       aria-label="Fan presets"
       class={cn(
-        'absolute top-full left-0 mt-1 z-50 min-w-[200px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated) overflow-hidden'
+        sheetSurface,
+        "absolute top-full left-0 mt-1 z-50 min-w-[220px] overflow-hidden py-1"
       )}
     >
       {#each builtinPresets as preset, i (preset.name)}
@@ -200,46 +187,46 @@ const primaryButton = cn(
           type="button"
           role="menuitem"
           class={cn(
-            dropdownItemClass,
-            preset.name === activePresetName ? 'font-medium' : '',
-            focusedIndex === i ? 'bg-(--surface-2)' : ''
+            itemClass,
+            preset.name === activePresetName && "font-medium",
+            focusedIndex === i && "bg-(--surface-hover)"
           )}
           onclick={() => handleApplyPreset(preset.name)}
         >
           <span>{preset.name}</span>
           {#if preset.name === activePresetName}
-            <Check size={12} class="text-(--text-primary)" aria-hidden="true" />
+            <span class={cn("text-[10px] text-(--text-secondary)")}>✓</span>
           {/if}
         </button>
       {/each}
 
       {#if customPresets.length > 0}
-        <div class="border-t border-(--border-subtle)"></div>
+        <div class={cn("my-1 border-t border-(--border-subtle)")}></div>
         {#each customPresets as preset, i (preset.name)}
           <button
             type="button"
             role="menuitem"
             class={cn(
-              dropdownItemClass,
-              preset.name === activePresetName ? 'font-medium' : '',
-              focusedIndex === builtinPresets.length + i ? 'bg-(--surface-2)' : ''
+              itemClass,
+              preset.name === activePresetName && "font-medium",
+              focusedIndex === builtinPresets.length + i && "bg-(--surface-hover)"
             )}
             onclick={() => handleApplyPreset(preset.name)}
           >
             <span>{preset.name}</span>
-            <span class="flex items-center gap-1">
+            <span class={cn("flex items-center gap-1")}>
               {#if preset.name === activePresetName}
-                <Check size={12} class="text-(--text-primary)" aria-hidden="true" />
+                <span class={cn("text-[10px] text-(--text-secondary)")}>✓</span>
               {/if}
               <span
                 role="button"
                 tabindex="0"
-                class="text-(--text-muted) hover:text-(--text-primary) px-1 cursor-pointer"
+                class={cn("text-[10px] text-(--text-muted) px-1 hover:text-(--text-primary) cursor-pointer")}
                 onclick={(e) => handleDeletePreset(preset.name, e)}
                 onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleDeletePreset(preset.name, e); }}
                 aria-label={`Delete preset ${preset.name}`}
               >
-                <X size={12} aria-hidden="true" />
+                ✕
               </span>
             </span>
           </button>
@@ -247,28 +234,28 @@ const primaryButton = cn(
       {/if}
 
       {#if applyError}
-        <div class={cn("px-3 py-1.5 border-t border-(--border-subtle)")}>
-          <p class={cn("text-[11px] text-(--text-secondary)")}>{applyError}</p>
+        <div class={cn("px-3 py-1.5")}>
+          <p class={cn("text-[11px] text-(--status-hot)")}>{applyError}</p>
         </div>
       {/if}
       {#if deleteError}
-        <div class={cn("px-3 py-1.5 border-t border-(--border-subtle)")}>
-          <p class={cn("text-[11px] text-(--text-secondary)")}>{deleteError}</p>
+        <div class={cn("px-3 py-1.5")}>
+          <p class={cn("text-[11px] text-(--status-hot)")}>{deleteError}</p>
         </div>
       {/if}
 
-      <div class="border-t border-(--border-subtle)"></div>
+      <div class={cn("my-1 border-t border-(--border-subtle)")}></div>
       <button
         type="button"
         role="menuitem"
         class={cn(
-          dropdownItemClass,
-          'text-(--text-muted)',
-          focusedIndex === allMenuItems.length ? 'bg-(--surface-2)' : ''
+          itemClass,
+          "text-(--text-secondary)",
+          focusedIndex === allMenuItems.length && "bg-(--surface-hover)"
         )}
         onclick={openSaveDialog}
       >
-        Save current as...
+        Save current as…
       </button>
     </div>
   {/if}
@@ -278,46 +265,38 @@ const primaryButton = cn(
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black/20"
+    class={cn("fixed inset-0 z-50 flex items-center justify-center bg-black/25 backdrop-blur-[1px]")}
     onclick={() => { isSaveDialogOpen = false; }}
   >
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class={cn(
-        'w-[300px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated) p-5'
-      )}
+      class={cn(sheetSurface, "w-[300px] p-5")}
       onclick={(e) => e.stopPropagation()}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Save preset"
     >
-      <h3 class="text-[13px] font-semibold text-(--text-primary) mb-3">Save Preset</h3>
+      <h3 class={cn("mb-3 text-[13px] font-medium text-(--text-primary)")}>Save Preset</h3>
       <input
         type="text"
         bind:value={savePresetName}
         placeholder="Preset name"
         aria-label="Preset name"
-        class={cn(
-          'w-full rounded-(--radius-input) border bg-(--surface-elevated) px-2 py-1.5 text-[12px] text-(--text-primary) focus:outline-none focus:ring-2 focus:ring-(--focus-ring)',
-          saveError ? 'border-(--color-ember-orange) mb-1' : 'border-(--border-subtle) mb-3'
-        )}
+        class={cn(inputClass, "w-full", saveError ? "mb-1" : "mb-3")}
         onkeydown={(e) => { if (e.key === 'Enter') { void handleSavePreset(); } }}
       />
       {#if saveError}
-        <p class="text-[11px] text-(--text-secondary) mb-2">{saveError}</p>
+        <p class={cn("mb-2 text-[11px] text-(--status-hot)")}>{saveError}</p>
       {/if}
-      <div class="flex justify-end gap-2">
+      <div class={cn("flex justify-end gap-2")}>
         <button
           type="button"
-          class={cancelButton}
+          class={cn(buttonSecondary)}
           onclick={() => { isSaveDialogOpen = false; }}
         >
           Cancel
         </button>
         <button
           type="button"
-          class={primaryButton}
+          class={cn(buttonPrimary)}
           disabled={savePresetName.trim().length === 0}
           onclick={handleSavePreset}
         >
diff --git a/src/components/SensorListPane.svelte b/src/components/SensorListPane.svelte
index 2c52e13..7bba16a 100644
--- a/src/components/SensorListPane.svelte
+++ b/src/components/SensorListPane.svelte
@@ -1,155 +1,95 @@
 <script lang="ts">
-import {
-	Battery,
-	Cpu,
-	HardDrive,
-	Monitor,
-	Thermometer,
-	Wifi,
-} from "lucide-svelte";
+import { HardDrive, Thermometer } from "lucide-svelte";
 import { cn } from "$lib/cn";
-import {
-	getAllSensorsForDisplay,
-	getReadMoreLabel,
-	isPerCoreTemperatureUnavailable,
-	SUMMARY_SENSOR_LIMIT,
-	shouldShowReadMore,
-} from "$lib/sensorListPaneState";
-import type { Sensor, SensorData } from "$lib/types";
+import type { Sensor } from "$lib/types";
+import { telemetryGrid } from "$lib/ui";
 
 interface Props {
-	sensorData: SensorData | null;
+	sensors: Sensor[];
+	emptyLabel?: string;
 }
 
-let { sensorData }: Props = $props();
+const { sensors, emptyLabel = "No sensors available." }: Props = $props();
 
-const displaySensors = $derived(
-	sensorData ? getAllSensorsForDisplay(sensorData) : [],
-);
-const perCoreTemperatureUnavailable = $derived(
-	isPerCoreTemperatureUnavailable(sensorData),
-);
-const loading = $derived(!sensorData);
-let expanded: boolean = $state(false);
-const showReadMore = $derived(shouldShowReadMore(displaySensors.length));
-const visibleSensors = $derived(
-	!expanded && showReadMore
-		? displaySensors.slice(0, SUMMARY_SENSOR_LIMIT)
-		: displaySensors,
-);
-const cnClasses = (
-	...inputs: Array<string | undefined | null | false>
-): string => cn(...inputs);
+function statusDotClass(sensor: Sensor): string {
+	if (sensor.value === null) return "bg-(--status-unknown)";
+	if (sensor.sensor_type === "Storage") return "bg-(--status-normal)";
+	if (sensor.value > 85) return "bg-(--status-hot)";
+	if (sensor.value >= 60) return "bg-(--status-warm)";
+	return "bg-(--status-normal)";
+}
 
-function getStatusColor(value: number | null): string {
-	if (value === null) return "text-(--text-muted)";
-	return "text-(--text-primary)";
+function statusLabel(sensor: Sensor): string {
+	if (sensor.value === null) return "N/A";
+	if (sensor.sensor_type === "Storage") return "OK";
+	if (sensor.value > 85) return "Hot";
+	if (sensor.value >= 60) return "Warm";
+	return "Normal";
 }
 
-function getStatusDotColor(value: number | null): string {
-	if (value === null) return "bg-(--color-silver-mist)";
-	if (value > 85) return "bg-(--color-ember-orange)";
-	return "bg-(--color-driftwood)";
+function valueTextClass(value: number | null): string {
+	return value === null ? "text-(--text-muted)" : "text-(--text-value)";
 }
 
 function formatValue(sensor: Sensor): string {
-	if (sensor.name === "Disk Drives:") {
-		return "";
-	}
-
-	if (sensor.value === null) {
-		return "N/A";
-	}
+	if (sensor.value === null) return "N/A";
+	return sensor.unit === "C"
+		? `${Math.round(sensor.value)} °C`
+		: `${Math.round(sensor.value)} ${sensor.unit}`;
+}
 
-	return `${Math.round(sensor.value)}`;
+function formatRange(sensor: Sensor): string {
+	if (sensor.sensor_type === "Storage") return "20 - 70";
+	if (sensor.sensor_type === "Battery") return "20 - 45";
+	if (sensor.sensor_type === "Gpu") return "40 - 110";
+	return "40 - 100";
 }
 
 function getSensorIcon(name: string) {
 	const lowerName = name.toLowerCase();
-	if (name === "Disk Drives:") return null;
-	if (lowerName.includes("cpu")) return Cpu;
-	if (lowerName.includes("gpu")) return Monitor;
-	if (lowerName.includes("ram") || lowerName.includes("memory")) return Monitor; // Fallback since MemoryStick isn't always available, let's use Thermometer or something else
 	if (
 		lowerName.includes("ssd") ||
 		lowerName.includes("storage") ||
-		lowerName.includes("hdd")
+		lowerName.includes("hdd") ||
+		lowerName.includes("disk")
 	)
 		return HardDrive;
-	if (lowerName.includes("battery")) return Battery;
-	if (
-		lowerName.includes("airport") ||
-		lowerName.includes("wi-fi") ||
-		lowerName.includes("wifi")
-	)
-		return Wifi;
 	return Thermometer;
 }
-
-function getSensorIconColor(name: string) {
-	if (name === "Disk Drives:") return "text-(--text-muted)";
-	return "text-(--text-secondary)";
-}
 </script>
 
-<aside class={cnClasses("min-h-0 overflow-y-auto bg-(--surface-1)")} aria-label="Temperature sensors panel">
-  <!-- Header -->
-  <div
-    class={cnClasses("sticky top-0 grid grid-cols-[1fr_auto] items-center border-b border-(--border-subtle) bg-(--surface-2) text-[11px] font-medium text-(--text-secondary)")}
-    role="row"
-  >
-    <div class="px-2 py-1 flex items-center border-r border-(--border-subtle)">Sensor</div>
-    <div class="px-2 py-1 min-w-[70px] text-right">Value °C</div>
+{#if sensors.length === 0}
+  <div class={cn("px-4 py-3 text-[12px] text-(--text-muted)")}>
+    <span>{emptyLabel}</span>
   </div>
-
-  {#if loading}
-    <div class={cnClasses("px-2 py-2 text-(--text-muted)")}>
-      <span>Loading sensors...</span>
-    </div>
-  {:else if displaySensors.length > 0}
-    <div class={cnClasses("flex flex-col")}>
-      {#if perCoreTemperatureUnavailable}
-        <div class={cnClasses("border-b border-(--border-subtle) bg-(--surface-2) px-2 py-1 text-[11px] text-(--text-muted)")}>
-          <span>Per-core temperature not exposed on this Mac</span>
-        </div>
-      {/if}
-      {#each visibleSensors as sensor (sensor.key)}
-        {@const Icon = getSensorIcon(sensor.name)}
-        <div
-          class={cnClasses(
-            "grid grid-cols-[1fr_auto] items-center border-b border-(--border-subtle) hover:bg-(--surface-hover) last:border-b-0"
-          )}
-          role="row"
-        >
-          <div class={cnClasses("flex items-center gap-2 truncate px-2 py-1 text-[12px]", sensor.name === "Disk Drives:" ? "text-(--text-muted) font-medium" : "text-(--text-primary)")}>
-            {#if Icon}
-              <Icon size={14} class={cnClasses("shrink-0", getSensorIconColor(sensor.name))} />
-            {/if}
-            <span class="truncate">{sensor.name}</span>
-          </div>
-          <div class={cnClasses("flex items-center justify-end gap-1.5 px-2 py-1 min-w-[70px] text-right text-[12px] font-mono [font-variant-numeric:tabular-nums]", getStatusColor(sensor.value))}>
-            {#if sensor.value !== null && sensor.name !== "Disk Drives:"}
-              <span class={cnClasses("inline-block size-1.5 shrink-0 rounded-full", getStatusDotColor(sensor.value))}></span>
-            {/if}
-            {formatValue(sensor)}
-          </div>
-        </div>
-      {/each}
-      {#if showReadMore}
-        <button
-          type="button"
-          class={cnClasses(
-            "w-full border-t border-(--border-subtle) bg-(--surface-2) px-2 py-1.5 text-[11px] text-(--text-muted) hover:text-(--text-secondary) hover:bg-(--surface-hover) cursor-pointer transition-colors"
-          )}
-          onclick={() => { expanded = !expanded; }}
-        >
-          {getReadMoreLabel(expanded, displaySensors.length)}
-        </button>
-      {/if}
-    </div>
-  {:else}
-    <div class={cnClasses("px-2 py-2 text-(--text-muted)")}>
-      <span>No sensors available.</span>
+{:else}
+  {#each sensors as sensor, i (sensor.key)}
+    {@const Icon = getSensorIcon(sensor.name)}
+    <div
+      class={cn(
+        "grid min-h-[30px] items-center border-b border-(--border-subtle) px-3 text-[12px] last:border-b-0",
+        telemetryGrid,
+        i % 2 === 1 && "bg-(--table-row-alternating)"
+      )}
+      role="row"
+    >
+      <div class={cn("flex min-w-0 items-center gap-3 pl-7 pr-3")}>
+        <Icon size={18} class={cn("shrink-0 text-(--text-secondary)")} strokeWidth={1.75} />
+        <span class={cn("truncate text-(--text-primary)")}>{sensor.name}</span>
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 tabular-nums", valueTextClass(sensor.value))}>
+        {formatValue(sensor)}
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 tabular-nums text-(--text-secondary)")}>
+        {formatRange(sensor)}
+      </div>
+      <div class={cn("border-l border-(--table-column-separator) px-3 text-(--text-secondary)")}>
+        -
+      </div>
+      <div class={cn("flex items-center gap-1.5 border-l border-(--table-column-separator) px-3 text-(--text-secondary)")}>
+        <span data-testid="status-dot" class={cn("inline-block size-1.5 shrink-0 rounded-full", statusDotClass(sensor))}></span>
+        {statusLabel(sensor)}
+      </div>
     </div>
-  {/if}
-</aside>
+  {/each}
+{/if}
diff --git a/src/components/UpdateDialog.svelte b/src/components/UpdateDialog.svelte
index 7099cae..6b54f9f 100644
--- a/src/components/UpdateDialog.svelte
+++ b/src/components/UpdateDialog.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+import { Download } from "lucide-svelte";
 import { fade, scale } from "svelte/transition";
 import { cn } from "$lib/cn";
+import { backdropSurface, buttonPrimary, buttonSecondary, sheetSurface } from "$lib/ui";
 import { checkForUpdate, type UpdateCheckResult } from "$lib/updater";
 
 interface Props {
@@ -38,30 +40,17 @@ function handleKeydown(event: KeyboardEvent): void {
 		onclose();
 	}
 }
-
-const buttonBase =
-	"rounded-(--radius-button) border px-4 py-1.5 text-[12px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset)";
-
-const cancelButton = cn(
-	buttonBase,
-	"border-(--border-subtle) bg-(--surface-elevated) text-(--text-primary) shadow-(--shadow-hairline) hover:bg-(--surface-2)",
-);
-
-const primaryButton = cn(
-	buttonBase,
-	"border-(--control-active-border) bg-(--control-active-bg) text-(--control-active-text)",
-);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div
-  class={cn('fixed inset-0 z-50 flex items-center justify-center')}
+  class={cn("fixed inset-0 z-50 flex items-center justify-center")}
   transition:fade={{ duration: 150 }}
 >
   <button
     type="button"
-    class={cn('absolute inset-0 bg-black/20 backdrop-blur-[1px] cursor-default')}
+    class={cn(backdropSurface)}
     onclick={onclose}
     aria-label="Close dialog"
     tabindex="-1"
@@ -70,74 +59,68 @@ const primaryButton = cn(
 
   <div
     bind:this={dialogEl}
-    class={cn(
-      'relative w-[360px] rounded-(--radius-dialog) border border-(--border-subtle) bg-(--surface-elevated) shadow-(--shadow-elevated)'
-    )}
+    class={cn(sheetSurface, "relative w-[360px]")}
     role="dialog"
     aria-modal="true"
     aria-label="Software Update"
-    transition:scale={{ duration: 150, start: 0.95, opacity: 0 }}
+    transition:scale={{ duration: 150, start: 0.96, opacity: 0 }}
   >
-    <div class={cn('flex flex-col items-center px-6 pt-6 pb-2')}>
-      <div class={cn('mb-3 flex h-12 w-12 items-center justify-center rounded-(--radius-card) border border-(--border-subtle) bg-(--surface-2)')}>
-        <svg class="h-6 w-6 text-(--text-primary)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-          <polyline points="7 10 12 15 17 10" />
-          <line x1="12" y1="15" x2="12" y2="3" />
-        </svg>
+    <div class={cn("flex flex-col items-center px-6 pt-6 pb-2")}>
+      <div class={cn("mb-3 flex h-11 w-11 items-center justify-center rounded-[12px] bg-(--surface-0)")}>
+        <Download size={20} class={cn("text-(--text-primary)")} strokeWidth={1.75} />
       </div>
 
-      <h2 class={cn('text-[14px] font-semibold text-(--text-primary)')}>
+      <h2 class={cn("text-[15px] font-semibold text-(--text-primary)")}>
         Software Update
       </h2>
     </div>
 
-    <div class={cn('px-6 py-3 text-center')}>
+    <div class={cn("px-6 py-3 text-center")}>
       {#if isChecking}
-        <p class={cn('text-[12px] text-(--text-secondary) animate-pulse')}>
-          Checking for updates...
+        <p class={cn("animate-pulse text-[12px] text-(--text-secondary)")}>
+          Checking for updates…
         </p>
       {:else if result?.status === "up-to-date"}
-        <p class={cn('text-[12px] text-(--text-secondary)')}>
+        <p class={cn("text-[12px] text-(--text-secondary)")}>
           You're running the latest version.
         </p>
       {:else if result?.status === "managed-by-app-store"}
-        <p class={cn('text-[12px] text-(--text-secondary)')}>
+        <p class={cn("text-[12px] text-(--text-secondary)")}>
           Updates are managed by the App Store.
         </p>
       {:else if result?.status === "available"}
-        <p class={cn('text-[12px] text-(--text-primary)')}>
+        <p class={cn("text-[12px] text-(--text-primary)")}>
           Version {result.version} is available.
         </p>
         {#if result.body}
-          <div class={cn('mt-2 max-h-[120px] overflow-y-auto rounded-(--radius-input) border border-(--border-subtle) bg-(--surface-1) p-2 text-left text-[11px] text-(--text-secondary)')}>
+          <div class={cn("mt-2 max-h-[120px] overflow-y-auto rounded-[8px] border border-(--border-subtle) bg-(--surface-0) p-2 text-left text-[11px] text-(--text-secondary)")}>
             {result.body}
           </div>
         {/if}
         {#if isInstalling}
-          <p class={cn('mt-2 text-[11px] text-(--text-secondary) animate-pulse')}>
-            Downloading and installing...
+          <p class={cn("mt-2 animate-pulse text-[11px] text-(--text-secondary)")}>
+            Downloading and installing…
           </p>
         {/if}
       {:else if result?.status === "error"}
-        <p class={cn('text-[12px] text-(--text-secondary)')}>
+        <p class={cn("text-[12px] text-(--text-primary)")}>
           {result.message}
         </p>
       {/if}
     </div>
 
-    <div class={cn('flex justify-center gap-2 px-6 pb-5 pt-2')}>
+    <div class={cn("flex justify-center gap-2 px-6 pb-5 pt-2")}>
       {#if result?.status === "available" && !isInstalling}
         <button
           type="button"
-          class={cancelButton}
+          class={cn(buttonSecondary)}
           onclick={onclose}
         >
           Later
         </button>
         <button
           type="button"
-          class={primaryButton}
+          class={cn(buttonPrimary)}
           onclick={handleInstall}
         >
           Install &amp; Restart
@@ -145,7 +128,7 @@ const primaryButton = cn(
       {:else}
         <button
           type="button"
-          class={cancelButton}
+          class={cn(buttonSecondary)}
           onclick={onclose}
           disabled={isInstalling}
         >
diff --git a/src/e2e/tauriMockCore.ts b/src/e2e/tauriMockCore.ts
index a210198..365b5bf 100644
--- a/src/e2e/tauriMockCore.ts
+++ b/src/e2e/tauriMockCore.ts
@@ -53,11 +53,34 @@ const baseSensorData = (state: E2eMockState): SensorData => ({
 			unit: "C",
 			sensor_type: "Cpu",
 		},
+		{
+			key: "TB0T",
+			name: "Battery",
+			value: 37,
+			unit: "C",
+			sensor_type: "Battery",
+			source: "smc",
+		},
+		{
+			key: "TG0D",
+			name: "GPU Cluster (AGX)",
+			value: 68,
+			unit: "C",
+			sensor_type: "Gpu",
+			source: "iohid_iokit",
+		},
 	],
+	diagnostics: {
+		model_id: "MacBookPro18,3",
+		diagnostics_enabled: false,
+		active_providers: ["smc", "iohid_iokit"],
+		unresolved: [],
+		per_core_cpu_temp_available: true,
+	},
 	fans: [
 		{
 			index: 0,
-			label: "Fan 0",
+			label: "System Fan 1",
 			actual: 2000,
 			min: state.fanState.min,
 			max: state.fanState.max,
@@ -67,6 +90,24 @@ const baseSensorData = (state: E2eMockState): SensorData => ({
 					: state.fanState.min,
 			mode: state.fanState.mode,
 		},
+		{
+			index: 1,
+			label: "System Fan 2",
+			actual: 2200,
+			min: state.fanState.min,
+			max: state.fanState.max,
+			target: state.fanState.targetRpm,
+			mode: state.fanState.mode,
+		},
+		{
+			index: 2,
+			label: "System Fan 3",
+			actual: 2500,
+			min: state.fanState.min,
+			max: state.fanState.max,
+			target: state.fanState.targetRpm,
+			mode: state.fanState.mode,
+		},
 	],
 });
 
@@ -116,6 +157,22 @@ export async function invoke<T>(
 			emitSensorUpdate(state);
 			return undefined as T;
 		}
+		case "set_all_fans_constant_rpm": {
+			const rpm = Number(args?.rpm ?? state.fanState.targetRpm);
+			state.fanState.mode = "forced";
+			state.fanState.targetRpm = Math.max(
+				state.fanState.min,
+				Math.min(state.fanState.max, Math.round(rpm)),
+			);
+			state.lastCommand = "set_all_fans_constant_rpm";
+			emitSensorUpdate(state);
+			return undefined as T;
+		}
+		case "restore_all_fans_auto":
+			state.fanState.mode = "auto";
+			state.lastCommand = "restore_all_fans_auto";
+			emitSensorUpdate(state);
+			return undefined as T;
 		case "get_alert_config":
 			return {
 				enabled: false,
@@ -125,7 +182,7 @@ export async function invoke<T>(
 		case "get_presets":
 			return [] as T;
 		case "get_active_preset":
-			return state.fanState.mode === "auto" ? "Automatic" : null;
+			return (state.fanState.mode === "auto" ? "Automatic" : null) as T;
 		case "get_power_preset_config":
 			return {
 				enabled: false,
@@ -164,6 +221,16 @@ export async function listen<T>(
 	};
 }
 
+export async function emit<T>(event: string, payload?: T): Promise<void> {
+	getMockState().listeners.get(event)?.forEach((handler) => {
+		handler({ payload } as { payload: SensorData });
+	});
+}
+
+export function isTauri(): boolean {
+	return true;
+}
+
 export type { FanControlConfig };
 
 export class Resource {
diff --git a/src/lib/devMock.test.ts b/src/lib/devMock.test.ts
new file mode 100644
index 0000000..a366b2e
--- /dev/null
+++ b/src/lib/devMock.test.ts
@@ -0,0 +1,101 @@
+import { emit } from "@tauri-apps/api/event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { handleDevMockCommand, resetDevMockStateForTest } from "./devMock";
+import type { FanControlConfig, SensorData } from "./types";
+
+vi.mock("@tauri-apps/api/event", () => ({
+	emit: vi.fn(),
+}));
+
+vi.mock("@tauri-apps/api/mocks", () => ({
+	mockIPC: vi.fn(),
+	mockWindows: vi.fn(),
+}));
+
+describe("devMock fan control", () => {
+	beforeEach(() => {
+		resetDevMockStateForTest();
+		vi.clearAllMocks();
+	});
+
+	it("stores custom RPM configs and updates fan telemetry for multiple fans", () => {
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 0, rpm: 5000 });
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 1, rpm: 5000 });
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 2, rpm: 5000 });
+
+		const configs = handleDevMockCommand("get_fan_control_configs") as Record<
+			string,
+			FanControlConfig
+		>;
+		const sensors = handleDevMockCommand("get_sensors") as SensorData;
+
+		expect(configs["0"]).toEqual({
+			mode: "constant_rpm",
+			target_rpm: 5000,
+		});
+		expect(configs["1"]).toEqual({
+			mode: "constant_rpm",
+			target_rpm: 5000,
+		});
+		expect(configs["2"]).toEqual({
+			mode: "constant_rpm",
+			target_rpm: 5000,
+		});
+		expect(sensors.fans[0].mode).toBe("forced");
+		expect(sensors.fans[0].target).toBe(5000);
+		expect(sensors.fans[1].mode).toBe("forced");
+		expect(sensors.fans[1].target).toBe(5000);
+		expect(sensors.fans[2].mode).toBe("forced");
+		expect(sensors.fans[2].target).toBe(5000);
+		expect(emit).toHaveBeenCalledWith(
+			"sensor_update",
+			expect.objectContaining({
+				fans: expect.arrayContaining([
+					expect.objectContaining({ mode: "forced", target: 5000 }),
+				]),
+			}),
+		);
+	});
+
+	it("rejects writes for unknown fans", () => {
+		expect(() =>
+			handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 9, rpm: 5000 }),
+		).toThrow("Fan index 9 not found in development mock");
+	});
+
+	it("clamps custom RPM targets to the mock fan bounds", () => {
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 1, rpm: 9999 });
+		const highSensors = handleDevMockCommand("get_sensors") as SensorData;
+
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 1, rpm: 1 });
+		const lowSensors = handleDevMockCommand("get_sensors") as SensorData;
+
+		expect(highSensors.fans[1].target).toBe(6550);
+		expect(lowSensors.fans[1].target).toBe(1200);
+	});
+
+	it("restores auto config and telemetry", () => {
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 0, rpm: 5000 });
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 1, rpm: 5000 });
+		handleDevMockCommand("set_fan_constant_rpm", { fanIndex: 2, rpm: 5000 });
+		handleDevMockCommand("set_fan_auto", { fanIndex: 0 });
+		handleDevMockCommand("set_fan_auto", { fanIndex: 1 });
+		handleDevMockCommand("set_fan_auto", { fanIndex: 2 });
+
+		const configs = handleDevMockCommand("get_fan_control_configs") as Record<
+			string,
+			FanControlConfig
+		>;
+		const sensors = handleDevMockCommand("get_sensors") as SensorData;
+
+		expect(configs["0"]).toEqual({ mode: "auto" });
+		expect(configs["1"]).toEqual({ mode: "auto" });
+		expect(configs["2"]).toEqual({ mode: "auto" });
+		expect(sensors.fans[0].mode).toBe("auto");
+		expect(sensors.fans[1].mode).toBe("auto");
+		expect(sensors.fans[2].mode).toBe("auto");
+		expect(sensors.fans[0].target).toBe(3200);
+		expect(sensors.fans[1].target).toBe(3200);
+		expect(sensors.fans[2].target).toBe(3200);
+	});
+});
diff --git a/src/lib/devMock.ts b/src/lib/devMock.ts
new file mode 100644
index 0000000..2e70560
--- /dev/null
+++ b/src/lib/devMock.ts
@@ -0,0 +1,285 @@
+import { emit } from "@tauri-apps/api/event";
+import { mockIPC, mockWindows } from "@tauri-apps/api/mocks";
+import type { FanControlConfig, Preset, SensorData } from "./types";
+
+/**
+ * Browser-only dev mock. Installs a Tauri IPC shim so the dashboard renders
+ * with sample telemetry outside the native webview. Never loaded in
+ * production (see src/main.ts) and never used inside Tauri.
+ */
+
+let tick = 0;
+
+const sampleFans = [
+	{
+		index: 0,
+		label: "System Fan 1",
+		min: 1200,
+		max: 6550,
+		actual: 2532,
+		target: 3200,
+	},
+	{
+		index: 1,
+		label: "System Fan 2",
+		min: 1200,
+		max: 6550,
+		actual: 2200,
+		target: 3200,
+	},
+	{
+		index: 2,
+		label: "System Fan 3",
+		min: 1200,
+		max: 6550,
+		actual: 2000,
+		target: 3200,
+	},
+] as const;
+
+const defaultFanConfigs = (): Record<string, FanControlConfig> =>
+	Object.fromEntries(
+		sampleFans.map((fan) => [
+			String(fan.index),
+			{ mode: "constant_rpm", target_rpm: fan.target },
+		]),
+	);
+
+let fanConfigs: Record<string, FanControlConfig> = defaultFanConfigs();
+
+function wobble(): number {
+  tick += 1;
+  return 0;
+}
+
+function clampRpm(rpm: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, Math.round(rpm)));
+}
+
+function getCommandNumber(args: unknown, key: string): number {
+	if (!args || typeof args !== "object") {
+		throw new Error(`Missing command arguments for ${key}`);
+	}
+
+	const value = (args as Record<string, unknown>)[key];
+	if (typeof value !== "number" || !Number.isFinite(value)) {
+		throw new Error(`Invalid ${key}: ${String(value)}`);
+	}
+
+	return value;
+}
+
+function getCommandString(args: unknown, key: string): string {
+	if (!args || typeof args !== "object") {
+		throw new Error(`Missing command arguments for ${key}`);
+	}
+
+	const value = (args as Record<string, unknown>)[key];
+	if (typeof value !== "string" || value.trim() === "") {
+		throw new Error(`Invalid ${key}: ${String(value)}`);
+	}
+
+	return value;
+}
+
+function getSampleFan(fanIndex: number): (typeof sampleFans)[number] {
+	const fan = sampleFans.find((sampleFan) => sampleFan.index === fanIndex);
+	if (!fan) {
+		throw new Error(`Fan index ${fanIndex} not found in development mock`);
+	}
+	return fan;
+}
+
+function fanData(o: number): SensorData["fans"] {
+	return sampleFans.map((fan) => {
+		const config = fanConfigs[String(fan.index)] ?? { mode: "auto" };
+		const target =
+			config.mode === "constant_rpm"
+				? config.target_rpm
+				: config.mode === "sensor_based"
+					? fan.min
+					: fan.target;
+
+		return {
+			index: fan.index,
+			label: fan.label,
+			actual: fan.actual + o * 20,
+			min: fan.min,
+			max: fan.max,
+			target,
+			mode: config.mode === "auto" ? "auto" : "forced",
+		};
+	});
+}
+
+function sampleSensorData(): SensorData {
+  const o = wobble();
+  return {
+    summary: { cpu_package: null, gpu: null, ram: null, ssd: null },
+    details: [
+      { key: "TB0T", name: "Battery", value: 37 + o, unit: "C", sensor_type: "Battery", source: "smc" },
+      { key: "TCPUAVG", name: "CPU Core Average", value: 56 + o, unit: "C", sensor_type: "Cpu", source: "derived" },
+      { key: "TP0b", name: "CPU Efficiency Cores Average", value: 49 + o, unit: "C", sensor_type: "Cpu", source: "iohid_iokit" },
+      { key: "TP2b", name: "CPU Performance Cores Average", value: 61 + o, unit: "C", sensor_type: "Cpu", source: "iohid_iokit" },
+      { key: "TG0D", name: "GPU Cluster (AGX)", value: 68 + o, unit: "C", sensor_type: "Gpu", source: "iohid_iokit" },
+      { key: "TPCD", name: "Power Management Unit", value: 52 + o, unit: "C", sensor_type: "Power", source: "iohid_iokit" },
+      { key: "TN0n", name: "APPLE SSD AP0512Q", value: 38 + o, unit: "C", sensor_type: "Storage", source: "smc", null_reason: null },
+      { key: "TN1n", name: "SanDisk Extreme Pro", value: 36 + o, unit: "C", sensor_type: "Storage", source: "smc", null_reason: null },
+    ],
+    diagnostics: {
+      model_id: "MacBookPro18,3",
+      diagnostics_enabled: false,
+      active_providers: ["smc", "iohid_iokit"],
+      unresolved: [],
+      per_core_cpu_temp_available: true,
+    },
+    fans: fanData(o),
+  };
+}
+
+function samplePresets(): Preset[] {
+  return [
+    { name: "Automatic", builtin: true, configs: {} },
+    { name: "High Cooling", builtin: true, configs: {} },
+    { name: "Quiet", builtin: true, configs: {} },
+  ];
+}
+
+function sampleFanConfigs(): Record<string, FanControlConfig> {
+  return fanConfigs;
+}
+
+function emitSensorUpdate(): void {
+	void emit("sensor_update", sampleSensorData());
+}
+
+function setConstantRpm(args: unknown): void {
+	const fanIndex = getCommandNumber(args, "fanIndex");
+	const rpm = getCommandNumber(args, "rpm");
+	const fan = getSampleFan(fanIndex);
+	fanConfigs = {
+		...fanConfigs,
+		[String(fanIndex)]: {
+			mode: "constant_rpm",
+			target_rpm: clampRpm(rpm, fan.min, fan.max),
+		},
+	};
+	emitSensorUpdate();
+}
+
+function setSensorControl(args: unknown): void {
+	const fanIndex = getCommandNumber(args, "fanIndex");
+	const sensorKey = getCommandString(args, "sensorKey");
+	const tempLow = getCommandNumber(args, "tempLow");
+	const tempHigh = getCommandNumber(args, "tempHigh");
+	const sensorExists = sampleSensorData().details.some((sensor) => sensor.key === sensorKey);
+	getSampleFan(fanIndex);
+	if (!sensorExists) {
+		throw new Error(`Sensor key '${sensorKey}' not found in development mock`);
+	}
+	fanConfigs = {
+		...fanConfigs,
+		[String(fanIndex)]: {
+			mode: "sensor_based",
+			sensor_key: sensorKey,
+			temp_low: tempLow,
+			temp_high: tempHigh,
+		},
+	};
+	emitSensorUpdate();
+}
+
+function setAuto(args: unknown): void {
+	const fanIndex = getCommandNumber(args, "fanIndex");
+	getSampleFan(fanIndex);
+	fanConfigs = {
+		...fanConfigs,
+		[String(fanIndex)]: { mode: "auto" },
+	};
+	emitSensorUpdate();
+}
+
+function setAllConstantRpm(args: unknown): void {
+	const rpm = getCommandNumber(args, "rpm");
+	fanConfigs = Object.fromEntries(
+		sampleFans.map((fan) => [
+			String(fan.index),
+			{
+				mode: "constant_rpm" as const,
+				target_rpm: clampRpm(rpm, fan.min, fan.max),
+			},
+		]),
+	);
+	emitSensorUpdate();
+}
+
+function restoreAllAuto(): void {
+	fanConfigs = Object.fromEntries(
+		sampleFans.map((fan) => [String(fan.index), { mode: "auto" as const }]),
+	);
+	emitSensorUpdate();
+}
+
+export function handleDevMockCommand(cmd: string, args?: unknown): unknown {
+  switch (cmd) {
+    case "get_sensors":
+      return sampleSensorData();
+    case "get_fan_control_configs":
+      return sampleFanConfigs();
+    case "set_fan_constant_rpm":
+      setConstantRpm(args);
+      return undefined;
+    case "set_fan_sensor_control":
+      setSensorControl(args);
+      return undefined;
+    case "set_fan_auto":
+      setAuto(args);
+      return undefined;
+	case "set_all_fans_constant_rpm":
+		setAllConstantRpm(args);
+		return undefined;
+	case "restore_all_fans_auto":
+		restoreAllAuto();
+		return undefined;
+    case "get_presets":
+      return samplePresets();
+    case "get_active_preset":
+      return "Automatic";
+    case "get_privilege_status":
+      return { has_write_access: true, fan_control_available: true, reason: null };
+    case "get_tray_display_mode":
+      return 0;
+    case "get_app_info":
+      return { name: "FanGuard", version: "0.1.0-beta.5", identifier: "io.github.naufaldi.fanguard" };
+    case "get_power_preset_config":
+      return { enabled: false, ac_preset: null, battery_preset: null };
+    case "get_current_power_source":
+      return "ac";
+    case "get_alert_config":
+      return { enabled: false, cpu_threshold: 85, cooldown_secs: 300 };
+    default:
+      return undefined;
+  }
+}
+
+export function resetDevMockStateForTest(): void {
+	tick = 0;
+	fanConfigs = defaultFanConfigs();
+}
+
+let interval: ReturnType<typeof setInterval> | null = null;
+
+export function installDevMock(): void {
+  mockWindows("main");
+  mockIPC((cmd, args) => handleDevMockCommand(cmd, args), { shouldMockEvents: true });
+  interval = setInterval(() => {
+    void emit("sensor_update", sampleSensorData());
+  }, 2000);
+}
+
+export function stopDevMock(): void {
+  if (interval) {
+    clearInterval(interval);
+    interval = null;
+  }
+}
diff --git a/src/lib/globalFanControl.test.ts b/src/lib/globalFanControl.test.ts
new file mode 100644
index 0000000..2f13ebf
--- /dev/null
+++ b/src/lib/globalFanControl.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import {
+	clampRpmTarget,
+	deriveGlobalFanMode,
+	getSharedFanRange,
+	toGlobalFanControlState,
+} from "./globalFanControl";
+import type { FanData } from "./types";
+
+const fan = (overrides: Partial<FanData>): FanData => ({
+	index: 0,
+	label: "System Fan",
+	actual: 2400,
+	min: 1200,
+	max: 6500,
+	target: 2400,
+	mode: "auto",
+	...overrides,
+});
+
+describe("globalFanControl", () => {
+	it("uses the shared RPM range across all detected fans", () => {
+		const range = getSharedFanRange([
+			fan({ index: 0, min: 1200, max: 6500 }),
+			fan({ index: 1, min: 1600, max: 6200 }),
+		]);
+
+		expect(range).toEqual({ kind: "ready", minRpm: 1600, maxRpm: 6200 });
+	});
+
+	it("disables control when fans do not share a safe range", () => {
+		const state = toGlobalFanControlState([
+			fan({ index: 0, min: 4000, max: 4500 }),
+			fan({ index: 1, min: 1200, max: 3000 }),
+		]);
+
+		expect(state.canControl).toBe(false);
+		expect(state.disabledReason).toBe(
+			"Detected fans do not share a safe RPM range.",
+		);
+	});
+
+	it("clamps the target to the shared range", () => {
+		const range = getSharedFanRange([
+			fan({ index: 0, min: 1200, max: 6500 }),
+			fan({ index: 1, min: 1600, max: 6200 }),
+		]);
+
+		expect(clampRpmTarget(1000, range)).toBe(1600);
+		expect(clampRpmTarget(7000, range)).toBe(6200);
+		expect(clampRpmTarget(3200, range)).toBe(3200);
+	});
+
+	it("reports manual mode when any fan is already forced", () => {
+		expect(
+			deriveGlobalFanMode([
+				fan({ index: 0, mode: "auto" }),
+				fan({ index: 1, mode: "forced" }),
+			]),
+		).toBe("manual");
+	});
+
+	it("uses the average current RPM as the default automatic target", () => {
+		const state = toGlobalFanControlState([
+			fan({ index: 0, actual: 2400 }),
+			fan({ index: 1, actual: 2600 }),
+		]);
+
+		expect(state.currentRpm).toBe(2500);
+		expect(state.targetRpm).toBe(2500);
+		expect(state.mode).toBe("auto");
+	});
+});
diff --git a/src/lib/globalFanControl.ts b/src/lib/globalFanControl.ts
new file mode 100644
index 0000000..e3c0ff1
--- /dev/null
+++ b/src/lib/globalFanControl.ts
@@ -0,0 +1,113 @@
+import type { FanData } from "./types";
+
+export type GlobalFanControlMode = "auto" | "manual";
+
+export type SharedFanRange =
+	| { readonly kind: "none"; readonly reason: string }
+	| {
+			readonly kind: "ready";
+			readonly minRpm: number;
+			readonly maxRpm: number;
+	  }
+	| {
+			readonly kind: "invalid";
+			readonly minRpm: number;
+			readonly maxRpm: number;
+			readonly reason: string;
+	  };
+
+export type GlobalFanControlState = {
+	readonly fanCount: number;
+	readonly mode: GlobalFanControlMode;
+	readonly currentRpm: number | null;
+	readonly targetRpm: number;
+	readonly range: SharedFanRange;
+	readonly canControl: boolean;
+	readonly disabledReason: string | null;
+};
+
+const roundRpm = (value: number): number => Math.round(value);
+
+const average = (values: readonly number[]): number | null =>
+	values.length === 0
+		? null
+		: values.reduce((sum, value) => sum + value, 0) / values.length;
+
+const fanMinimums = (fans: readonly FanData[]): number[] =>
+	fans.map((fan) => roundRpm(fan.min));
+
+const fanMaximums = (fans: readonly FanData[]): number[] =>
+	fans.map((fan) => roundRpm(fan.max));
+
+export const getSharedFanRange = (
+	fans: readonly FanData[],
+): SharedFanRange => {
+	if (fans.length === 0) {
+		return { kind: "none", reason: "No fans detected." };
+	}
+
+	const minRpm = Math.max(...fanMinimums(fans));
+	const maxRpm = Math.min(...fanMaximums(fans));
+
+	return minRpm <= maxRpm
+		? { kind: "ready", minRpm, maxRpm }
+		: {
+				kind: "invalid",
+				minRpm,
+				maxRpm,
+				reason: "Detected fans do not share a safe RPM range.",
+			};
+};
+
+export const clampRpmTarget = (
+	targetRpm: number,
+	range: SharedFanRange,
+): number => {
+	if (range.kind !== "ready") {
+		return roundRpm(targetRpm);
+	}
+
+	return Math.max(range.minRpm, Math.min(range.maxRpm, roundRpm(targetRpm)));
+};
+
+export const deriveGlobalFanMode = (
+	fans: readonly FanData[],
+): GlobalFanControlMode =>
+	fans.some((fan) => fan.mode === "forced") ? "manual" : "auto";
+
+const forcedTargets = (fans: readonly FanData[]): number[] =>
+	fans
+		.filter((fan) => fan.mode === "forced")
+		.map((fan) => roundRpm(fan.target));
+
+const currentRpms = (fans: readonly FanData[]): number[] =>
+	fans.map((fan) => roundRpm(fan.actual));
+
+const defaultTargetRpm = (
+	fans: readonly FanData[],
+	range: SharedFanRange,
+): number => {
+	const preferredTarget =
+		average(forcedTargets(fans)) ?? average(currentRpms(fans)) ?? 0;
+	return clampRpmTarget(preferredTarget, range);
+};
+
+const disabledReasonForRange = (range: SharedFanRange): string | null =>
+	range.kind === "ready" ? null : range.reason;
+
+export const toGlobalFanControlState = (
+	fans: readonly FanData[],
+): GlobalFanControlState => {
+	const range = getSharedFanRange(fans);
+	const disabledReason = disabledReasonForRange(range);
+
+	return {
+		fanCount: fans.length,
+		mode: deriveGlobalFanMode(fans),
+		currentRpm: average(currentRpms(fans)),
+		targetRpm: defaultTargetRpm(fans, range),
+		range,
+		canControl: range.kind === "ready",
+		disabledReason,
+	};
+};
diff --git a/src/lib/sensorListPaneState.test.ts b/src/lib/sensorListPaneState.test.ts
index a59f5dd..c5fa0ae 100644
--- a/src/lib/sensorListPaneState.test.ts
+++ b/src/lib/sensorListPaneState.test.ts
@@ -5,10 +5,11 @@ import {
 	getReadMoreLabel,
 	getSummarySensorsForDisplay,
 	isPerCoreTemperatureUnavailable,
+	partitionDisplaySensors,
 	SUMMARY_SENSOR_LIMIT,
 	shouldShowReadMore,
 } from "./sensorListPaneState";
-import type { SensorData } from "./types";
+import type { Sensor, SensorData } from "./types";
 
 const emptyFans = { fans: [] as SensorData["fans"] };
 
@@ -200,9 +201,8 @@ describe("sensorListPaneState", () => {
 
 		const allSensors = getAllSensorsForDisplay(sensorData);
 
-		// Temperature sensors with no data on this hardware are hidden; storage sensors remain
+		// Sensors with no data on this hardware are hidden; disk marker remains
 		expect(allSensors.map((sensor) => sensor.name)).toEqual([
-			"Battery",
 			"CPU Core Average",
 			"CPU Efficiency Core 1",
 			"CPU Efficiency Core 2",
@@ -210,12 +210,12 @@ describe("sensorListPaneState", () => {
 			"GPU Cluster 1",
 			"GPU Cluster 2",
 			"GPU Cluster Average",
+			"Battery",
 			"Disk Drives:",
-			"APPLE SSD",
 		]);
 
 		expect(allSensors.find((sensor) => sensor.name === "Disk Drives:")?.value).toBeNull();
-		expect(allSensors.find((sensor) => sensor.name === "APPLE SSD")?.value).toBeNull();
+		expect(allSensors.find((sensor) => sensor.name === "APPLE SSD")).toBeUndefined();
 		expect(allSensors.find((sensor) => sensor.name === "GPU Cluster Average")?.value).toBe(59);
 	});
 
@@ -401,4 +401,32 @@ describe("sensorListPaneState", () => {
 		expect(isPerCoreTemperatureUnavailable(sensorData)).toBe(false);
 		expect(isPerCoreTemperatureUnavailable(null)).toBe(false);
 	});
+
+	it("splits the flat display list into temperature and disk groups", () => {
+		const sensors: Sensor[] = [
+			{ key: "TB0T", name: "Battery", value: 34, unit: "C", sensor_type: "Battery" },
+			{ key: "TCPUAVG", name: "CPU Core Average", value: 55, unit: "C", sensor_type: "Cpu" },
+			{ key: "DISK_SECTION", name: "Disk Drives:", value: null, unit: "C", sensor_type: "Storage" },
+			{ key: "TN0n", name: "APPLE SSD", value: null, unit: "C", sensor_type: "Storage" },
+		];
+
+		const partitions = partitionDisplaySensors(sensors);
+
+		expect(partitions.temperature.map((s) => s.name)).toEqual([
+			"Battery",
+			"CPU Core Average",
+		]);
+		expect(partitions.disk.map((s) => s.name)).toEqual(["APPLE SSD"]);
+	});
+
+	it("treats a list without the disk marker as all temperature sensors", () => {
+		const sensors: Sensor[] = [
+			{ key: "TB0T", name: "Battery", value: 34, unit: "C", sensor_type: "Battery" },
+		];
+
+		const partitions = partitionDisplaySensors(sensors);
+
+		expect(partitions.temperature).toHaveLength(1);
+		expect(partitions.disk).toHaveLength(0);
+	});
 });
diff --git a/src/lib/sensorListPaneState.ts b/src/lib/sensorListPaneState.ts
index 3a80c2c..a339a08 100644
--- a/src/lib/sensorListPaneState.ts
+++ b/src/lib/sensorListPaneState.ts
@@ -10,7 +10,6 @@ type CatalogRow = {
 };
 
 const TARGET_CATALOG: ReadonlyArray<CatalogRow> = [
-	{ key: "TB0T", name: "Battery", unit: "C", sensor_type: "Battery" },
 	{ key: "TCPUAVG", name: "CPU Core Average", unit: "C", sensor_type: "Cpu" },
 	{ key: "TP0b", name: "CPU Efficiency Cluster 1", unit: "C", sensor_type: "Cpu" },
 	{ key: "TP1b", name: "CPU Efficiency Cluster 2", unit: "C", sensor_type: "Cpu" },
@@ -18,14 +17,16 @@ const TARGET_CATALOG: ReadonlyArray<CatalogRow> = [
 	{ key: "TG0D", name: "GPU Cluster 1", unit: "C", sensor_type: "Gpu" },
 	{ key: "TG0P", name: "GPU Cluster 2", unit: "C", sensor_type: "Gpu" },
 	{ key: "TGAVG", name: "GPU Cluster Average", unit: "C", sensor_type: "Gpu" },
+	{ key: "TPCD", name: "Power Manager Die Average", unit: "C", sensor_type: "Power" },
+	{ key: "TB0T", name: "Battery", unit: "C", sensor_type: "Battery" },
 	{ key: "Tm0P", name: "Mainboard", unit: "C", sensor_type: "Other" },
 	{ key: "TM0P", name: "Memory Bank 1", unit: "C", sensor_type: "Memory" },
 	{ key: "TM1P", name: "Memory Bank 2", unit: "C", sensor_type: "Memory" },
-	{ key: "TPCD", name: "Power Manager Die Average", unit: "C", sensor_type: "Power" },
 	{ key: "PDTR", name: "Power Supply Proximity", unit: "W", sensor_type: "Power" },
 	{ key: "Ts0P", name: "Trackpad", unit: "C", sensor_type: "Trackpad" },
 	{ key: "DISK_SECTION", name: "Disk Drives:", unit: "C", sensor_type: "Storage" },
 	{ key: "TN0n", name: "APPLE SSD", unit: "C", sensor_type: "Storage" },
+	{ key: "TN1n", name: "SanDisk Extreme Pro", unit: "C", sensor_type: "Storage" },
 ];
 
 /** Sensor keys relevant for fan control decisions (heat sources, not peripherals). */
@@ -165,11 +166,11 @@ export function buildGpuAverageSensor(details: Sensor[]): Sensor {
 	return {
 		key: explicitAverage?.key ?? "TGAVG",
 		name: "GPU Cluster Average",
-		value: explicitAverage?.value ?? average(gpuValues),
+		value: explicitAverage?.value ?? (gpuValues.length > 1 ? average(gpuValues) : null),
 		unit: "C",
 		sensor_type: "Gpu",
 		source: explicitAverage?.source ?? "derived",
-		null_reason: gpuValues.length === 0 ? "unsupported" : null,
+		null_reason: gpuValues.length <= 1 ? "unsupported" : null,
 	};
 }
 
@@ -309,7 +310,9 @@ export function getAllSensorsForDisplay(sensorData: SensorData): Sensor[] {
 		return [byKey.get(row.key) ?? byName.get(row.name) ?? toPlaceholderSensor(row)];
 	});
 	return orderedCatalog.filter(
-		(s) => s.unit !== "W" && (s.source !== "placeholder" || s.sensor_type === "Storage"),
+		(s) =>
+			s.unit !== "W" &&
+			(s.key === "DISK_SECTION" || s.value !== null),
 	);
 }
 
@@ -318,3 +321,30 @@ export function isPerCoreTemperatureUnavailable(
 ): boolean {
 	return sensorData?.diagnostics?.per_core_cpu_temp_available === false;
 }
+
+const DISK_SECTION_MARKER = "Disk Drives:";
+
+export type DisplaySensorPartitions = {
+	temperature: Sensor[];
+	disk: Sensor[];
+};
+
+/**
+ * Split the flat display list into the two disclosure groups used by the
+ * unified grouped layout. The "Disk Drives:" catalog row acts as the
+ * section marker between temperature sensors and disk rows.
+ */
+export function partitionDisplaySensors(
+	sensors: Sensor[],
+): DisplaySensorPartitions {
+	const markerIndex = sensors.findIndex(
+		(sensor) => sensor.name === DISK_SECTION_MARKER,
+	);
+	if (markerIndex === -1) {
+		return { temperature: sensors, disk: [] };
+	}
+	return {
+		temperature: sensors.slice(0, markerIndex),
+		disk: sensors.slice(markerIndex + 1),
+	};
+}
diff --git a/src/lib/tauriCommands.test.ts b/src/lib/tauriCommands.test.ts
index 35f40f7..652fc71 100644
--- a/src/lib/tauriCommands.test.ts
+++ b/src/lib/tauriCommands.test.ts
@@ -6,7 +6,9 @@ import {
 	getPrivilegeStatus,
 	getSensors,
 	listenToSensorUpdates,
+	restoreAllFansAuto,
 	SENSOR_UPDATE_EVENT,
+	setAllFansConstantRpm,
 	setFanAuto,
 	setFanConstantRpm,
 } from "./tauriCommands";
@@ -61,7 +63,7 @@ describe("tauriCommands", () => {
 		let forwardedPayload: SensorData | null = null;
 		const unlisten = vi.fn();
 		mockedListen.mockImplementation(async (_event, callback) => {
-			callback({ payload: sampleSensors } as { payload: SensorData });
+			callback({ event: SENSOR_UPDATE_EVENT, id: 1, payload: sampleSensors });
 			return unlisten;
 		});
 
@@ -127,4 +129,23 @@ describe("tauriCommands", () => {
 		});
 		expect(mockedInvoke).toHaveBeenCalledWith("get_privilege_status");
 	});
+
+	it("maps global fan control to one backend operation", async () => {
+		const mockedInvoke = vi.mocked(invoke);
+		mockedInvoke.mockClear();
+		mockedInvoke.mockResolvedValue(undefined);
+
+		await setAllFansConstantRpm(3200);
+		await restoreAllFansAuto();
+
+		expect(mockedInvoke).toHaveBeenNthCalledWith(
+			1,
+			"set_all_fans_constant_rpm",
+			{ rpm: 3200 },
+		);
+		expect(mockedInvoke).toHaveBeenNthCalledWith(
+			2,
+			"restore_all_fans_auto",
+		);
+	});
 });
diff --git a/src/lib/tauriCommands.ts b/src/lib/tauriCommands.ts
index 451bf4e..2fc5d51 100644
--- a/src/lib/tauriCommands.ts
+++ b/src/lib/tauriCommands.ts
@@ -94,6 +94,14 @@ export async function setFanAuto(fanIndex: number): Promise<void> {
 	return invoke<void>("set_fan_auto", { fanIndex });
 }
 
+export async function setAllFansConstantRpm(rpm: number): Promise<void> {
+	return invoke<void>("set_all_fans_constant_rpm", { rpm });
+}
+
+export async function restoreAllFansAuto(): Promise<void> {
+	return invoke<void>("restore_all_fans_auto");
+}
+
 export async function getFanControlConfigs(): Promise<
 	Record<string, FanControlConfig>
 > {
diff --git a/src/lib/ui.ts b/src/lib/ui.ts
new file mode 100644
index 0000000..4d58296
--- /dev/null
+++ b/src/lib/ui.ts
@@ -0,0 +1,35 @@
+/**
+ * Shared macOS Liquid Glass UI class tokens.
+ * These helpers keep older component imports stable while the visual language
+ * moves to compact native controls.
+ */
+
+export const buttonPrimary =
+	"inline-flex min-h-7 items-center justify-center rounded-[8px] border border-(--accent-blue) bg-(--accent-blue) px-3 text-[12px] font-medium text-white transition-colors hover:bg-(--accent-blue-pressed) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset) disabled:cursor-not-allowed disabled:opacity-45 cursor-pointer";
+
+export const buttonSecondary =
+	"inline-flex min-h-7 items-center justify-center rounded-[8px] border border-(--border-subtle) bg-(--material-control) px-3 text-[12px] font-medium text-(--text-primary) transition-colors hover:bg-(--surface-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset) disabled:cursor-not-allowed disabled:opacity-45 cursor-pointer";
+
+export const buttonGhost =
+	"inline-flex min-h-7 items-center justify-center rounded-[8px] px-2.5 text-[12px] font-medium text-(--text-secondary) transition-colors hover:bg-(--surface-hover) hover:text-(--text-primary) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-1 focus-visible:ring-offset-(--focus-ring-offset) cursor-pointer";
+
+export const segmentedActive =
+	"inline-flex min-h-6 items-center justify-center rounded-[7px] bg-(--accent-blue) px-3 text-[12px] font-medium text-white shadow-[inset_0_0_0_0.5px_rgb(255_255_255_/_35%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) cursor-pointer";
+
+export const segmentedInactive =
+	"inline-flex min-h-6 items-center justify-center rounded-[7px] px-3 text-[12px] font-medium text-(--text-secondary) transition-colors hover:bg-(--surface-hover) hover:text-(--text-primary) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) cursor-pointer";
+
+export const sheetSurface =
+	"rounded-[18px] border border-(--border-subtle) bg-(--material-sheet) shadow-[0_18px_48px_rgb(0_0_0_/_18%)]";
+
+export const backdropSurface =
+	"fixed inset-0 bg-black/20 backdrop-blur-[2px] cursor-default";
+
+export const inputClass =
+	"min-h-7 rounded-[8px] border border-(--border-subtle) bg-(--material-control) px-2.5 text-[12px] text-(--text-primary) [font-variant-numeric:tabular-nums] focus:outline-none focus:ring-2 focus:ring-(--focus-ring) focus:border-(--border-strong)";
+
+export const popoverSurface =
+	"rounded-[14px] border border-(--border-subtle) bg-(--material-popover) shadow-[0_12px_32px_rgb(0_0_0_/_16%)]";
+
+export const telemetryGrid =
+	"grid-cols-[minmax(220px,2fr)_minmax(120px,1fr)_minmax(130px,1fr)_minmax(100px,0.8fr)_minmax(100px,0.8fr)]";
diff --git a/src/main.ts b/src/main.ts
index aed5af9..5209093 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import "./app.css";
+import { isTauri } from "@tauri-apps/api/core";
 import { mount } from "svelte";
 import App from "./App.svelte";
 
@@ -8,8 +9,15 @@ if (!appRoot) {
   throw new Error("App root element not found");
 }
 
-const app = mount(App, {
-  target: appRoot,
-});
-
-export default app;
+// Browser-only dev preview: install a Tauri IPC mock so the dashboard renders
+// with sample data outside the native webview. Tree-shaken out of production
+// builds (import.meta.env.DEV is statically false) and skipped inside Tauri.
+if (import.meta.env.DEV && !isTauri()) {
+  void (async () => {
+    const { installDevMock } = await import("./lib/devMock");
+    installDevMock();
+    mount(App, { target: appRoot });
+  })();
+} else {
+  mount(App, { target: appRoot });
+}
diff --git a/vite.config.ts b/vite.config.ts
index 0b4da41..6e600ae 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,7 @@ export default defineConfig({
 		svelte() as unknown as PluginOption,
 	],
 	server: {
-		port: 1420,
+		port: 5173,
 		strictPort: true,
 		hmr: {
 			overlay: true,