diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 3f8e3ec5..d85ca08c 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -389,6 +389,12 @@ dependencies = [
  "wyz",
 ]
 
+[[package]]
+name = "block"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0d8c1fef690941d3e7788d328517591fecc684c084084702d6ff1641e993699a"
+
 [[package]]
 name = "block-buffer"
 version = "0.10.4"
@@ -700,6 +706,35 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "cocoa"
+version = "0.26.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad36507aeb7e16159dfe68db81ccc27571c3ccd4b76fb2fb72fc59e7a4b1b64c"
+dependencies = [
+ "bitflags 2.11.0",
+ "block",
+ "cocoa-foundation",
+ "core-foundation 0.10.1",
+ "core-graphics 0.24.0",
+ "foreign-types 0.5.0",
+ "libc",
+ "objc",
+]
+
+[[package]]
+name = "cocoa-foundation"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81411967c50ee9a1fc11365f8c585f863a22a9697c89239c452292c40ba79b0d"
+dependencies = [
+ "bitflags 2.11.0",
+ "block",
+ "core-foundation 0.10.1",
+ "core-graphics-types",
+ "objc",
+]
+
 [[package]]
 name = "combine"
 version = "4.6.7"
@@ -770,6 +805,19 @@ version = "0.8.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
 
+[[package]]
+name = "core-graphics"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa95a34622365fa5bbf40b20b75dba8dfa8c94c734aea8ac9a5ca38af14316f1"
+dependencies = [
+ "bitflags 2.11.0",
+ "core-foundation 0.10.1",
+ "core-graphics-types",
+ "foreign-types 0.5.0",
+ "libc",
+]
+
 [[package]]
 name = "core-graphics"
 version = "0.25.0"
@@ -1004,6 +1052,12 @@ dependencies = [
  "windows-sys 0.61.2",
 ]
 
+[[package]]
+name = "dispatch"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd0c93bb4b0c6d9b77f4435b0ae98c24d17f1c45b2ff844c6151a07256ca923b"
+
 [[package]]
 name = "dispatch2"
 version = "0.3.1"
@@ -2488,6 +2542,15 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
+[[package]]
+name = "malloc_buf"
+version = "0.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62bb907fe88d54d8d9ce32a3cceab4218ed2f6b7d35617cafe9adf84e43919cb"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "markup5ever"
 version = "0.14.1"
@@ -2731,6 +2794,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "objc"
+version = "0.2.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1"
+dependencies = [
+ "malloc_buf",
+]
+
 [[package]]
 name = "objc2"
 version = "0.6.4"
@@ -3076,6 +3148,7 @@ dependencies = [
  "tauri-plugin-aptabase",
  "tauri-plugin-autostart",
  "tauri-plugin-global-shortcut",
+ "tauri-plugin-liquid-glass",
  "tauri-plugin-log",
  "tauri-plugin-opener",
  "tauri-plugin-process",
@@ -4812,7 +4885,7 @@ dependencies = [
  "bitflags 2.11.0",
  "block2",
  "core-foundation 0.10.1",
- "core-graphics",
+ "core-graphics 0.25.0",
  "crossbeam-channel",
  "dispatch2",
  "dlopen2",
@@ -5067,6 +5140,24 @@ dependencies = [
  "thiserror 2.0.18",
 ]
 
+[[package]]
+name = "tauri-plugin-liquid-glass"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59a86fd9cd6fc62cad37daa0d7f8be8f4986543d13dd30e4ff5cd2bc81ff91d0"
+dependencies = [
+ "cocoa",
+ "dispatch",
+ "log",
+ "objc",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.18",
+]
+
 [[package]]
 name = "tauri-plugin-log"
 version = "2.8.0"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 074c81ad..e49cec3d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -39,12 +39,13 @@ tauri-plugin-global-shortcut = "2"
 tauri-plugin-autostart = "2.5.1"
 tokio = { version = "1", features = ["rt-multi-thread", "macros"] }
 regex-lite = "0.1.9"
+tauri-plugin-liquid-glass = "0.1.6"
 aes-gcm = "0.10.3"
 
 [target.'cfg(target_os = "macos")'.dependencies]
 objc2 = "0.6"
-objc2-foundation = { version = "0.3", features = ["NSProcessInfo", "NSString"] }
-objc2-app-kit = { version = "0.3", features = ["NSEvent", "NSScreen", "NSGraphics"] }
+objc2-foundation = { version = "0.3", features = ["NSKeyValueCoding", "NSProcessInfo", "NSString"] }
+objc2-app-kit = { version = "0.3", features = ["NSClipView", "NSColor", "NSEvent", "NSGraphics", "NSScreen", "NSScrollView", "NSView", "NSWindow"] }
 objc2-web-kit = { version = "0.3", features = ["WKPreferences", "WKWebView", "WKWebViewConfiguration"] }
 
 [dev-dependencies]
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index cc6aa864..a3f0af54 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -18,6 +18,7 @@
     "process:allow-restart",
     "global-shortcut:default",
     "autostart:default",
+    "liquid-glass:default",
     "core:menu:default"
   ]
 }
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 98b10d92..d74baa76 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -16,6 +16,7 @@ use std::sync::{Arc, Mutex, OnceLock};
 use serde::Serialize;
 use tauri::Emitter;
 use tauri_plugin_aptabase::EventTracker;
+use tauri_plugin_liquid_glass::{GlassMaterialVariant, LiquidGlassConfig, LiquidGlassExt};
 use tauri_plugin_log::{Target, TargetKind};
 use uuid::Uuid;
 
@@ -201,6 +202,33 @@ fn hide_panel(app_handle: tauri::AppHandle) {
     }
 }
 
+#[tauri::command]
+fn set_liquid_glass_enabled(app_handle: tauri::AppHandle, enabled: bool) -> Result<(), String> {
+    use tauri::Manager;
+
+    let Some(window) = app_handle.get_webview_window("main") else {
+        return Ok(());
+    };
+
+    let config = if enabled {
+        LiquidGlassConfig {
+            corner_radius: 22.0,
+            variant: GlassMaterialVariant::Sidebar,
+            ..Default::default()
+        }
+    } else {
+        LiquidGlassConfig {
+            enabled: false,
+            ..Default::default()
+        }
+    };
+
+    app_handle
+        .liquid_glass()
+        .set_effect(&window, config)
+        .map_err(|error| error.to_string())
+}
+
 #[tauri::command]
 fn open_devtools(#[allow(unused)] app_handle: tauri::AppHandle) {
     #[cfg(debug_assertions)]
@@ -492,9 +520,11 @@ pub fn run() {
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_global_shortcut::Builder::new().build())
         .plugin(tauri_plugin_autostart::Builder::new().build())
+        .plugin(tauri_plugin_liquid_glass::init())
         .invoke_handler(tauri::generate_handler![
             init_panel,
             hide_panel,
+            set_liquid_glass_enabled,
             open_devtools,
             start_probe_batch,
             list_plugins,
@@ -508,7 +538,7 @@ pub fn run() {
             #[cfg(target_os = "macos")]
             {
                 app_nap::disable_app_nap();
-                webkit_config::disable_webview_suspension(app.handle());
+                webkit_config::configure_webview(app.handle());
             }
 
             use tauri::Manager;
diff --git a/src-tauri/src/webkit_config.rs b/src-tauri/src/webkit_config.rs
index f6f65191..3858b365 100644
--- a/src-tauri/src/webkit_config.rs
+++ b/src-tauri/src/webkit_config.rs
@@ -1,7 +1,8 @@
-//! WebKit configuration for disabling background suspension on macOS.
+//! WebKit configuration for macOS panel behavior.
 //!
-//! By default, WebKit suspends JavaScript execution when the webview is not visible.
-//! This module disables that behavior so auto-update timers continue to fire.
+//! We keep JavaScript active while the panel is hidden and force the WKWebView
+//! itself fully transparent so native liquid-glass can show through the app
+//! container instead of only around it.
 
 use tauri::Manager;
 
@@ -12,27 +13,64 @@ fn macos_at_least(major: u64, minor: u64) -> bool {
     (version.majorVersion as u64, version.minorVersion as u64) >= (major, minor)
 }
 
-pub fn disable_webview_suspension(app_handle: &tauri::AppHandle) {
+pub fn configure_webview(app_handle: &tauri::AppHandle) {
     let Some(window) = app_handle.get_webview_window("main") else {
         log::warn!("webkit_config: main window not found");
         return;
     };
 
-    if !macos_at_least(14, 0) {
-        log::info!("WebKit inactiveSchedulingPolicy requires macOS 14.0+; skipping on this system");
-        return;
+    let can_disable_inactive_scheduling = macos_at_least(14, 0);
+    if !can_disable_inactive_scheduling {
+        log::info!(
+            "WebKit inactiveSchedulingPolicy requires macOS 14.0+; skipping scheduling override on this system"
+        );
     }
 
-    if let Err(e) = window.with_webview(|webview| {
-        unsafe {
-            use objc2_web_kit::{WKInactiveSchedulingPolicy, WKWebView};
-            let wk_webview: &WKWebView = &*webview.inner().cast();
-            let config = wk_webview.configuration();
-            let prefs = config.preferences();
+    if let Err(e) = window.with_webview(move |webview| unsafe {
+        use objc2::sel;
+        use objc2_app_kit::NSColor;
+        use objc2_foundation::{NSNumber, NSObjectNSKeyValueCoding, NSObjectProtocol, ns_string};
+        use objc2_web_kit::{WKInactiveSchedulingPolicy, WKWebView};
+
+        let wk_webview: &WKWebView = &*webview.inner().cast();
+        let clear = NSColor::clearColor();
+        let no = NSNumber::numberWithBool(false);
+        let config = wk_webview.configuration();
+        let prefs = config.preferences();
+
+        if can_disable_inactive_scheduling {
             prefs.setInactiveSchedulingPolicy(WKInactiveSchedulingPolicy::None);
-            log::info!("WebKit inactiveSchedulingPolicy set to None");
+        }
+
+        config.setValue_forKey(Some(&no), ns_string!("drawsBackground"));
+        wk_webview.setValue_forKey(Some(&no), ns_string!("drawsBackground"));
+
+        if wk_webview.respondsToSelector(sel!(setUnderPageBackgroundColor:)) {
+            wk_webview.setUnderPageBackgroundColor(Some(&clear));
+        }
+
+        if let Some(scroll_view) = wk_webview.enclosingScrollView() {
+            scroll_view.setDrawsBackground(false);
+            scroll_view.setBackgroundColor(&clear);
+
+            let clip_view = scroll_view.contentView();
+            clip_view.setDrawsBackground(false);
+            clip_view.setBackgroundColor(&clear);
+        }
+
+        if let Some(ns_window) = wk_webview.window() {
+            ns_window.setOpaque(false);
+            ns_window.setBackgroundColor(Some(&clear));
+        }
+
+        if can_disable_inactive_scheduling {
+            log::info!("Configured transparent WKWebView and disabled inactive scheduling");
+        } else {
+            log::info!(
+                "Configured transparent WKWebView; inactive scheduling override not applied on this macOS version"
+            );
         }
     }) {
-        log::warn!("Failed to configure WebKit scheduling: {e}");
+        log::warn!("Failed to configure WKWebView transparency/scheduling: {e}");
     }
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 9c54a0d0..52de726f 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -384,18 +384,44 @@ describe("App", () => {
     // Dark
     await userEvent.click(await screen.findByRole("radio", { name: "Dark" }))
     expect(document.documentElement.classList.contains("dark")).toBe(true)
+    expect(document.documentElement.classList.contains("glass")).toBe(false)
 
     // Light
     await userEvent.click(await screen.findByRole("radio", { name: "Light" }))
     expect(document.documentElement.classList.contains("dark")).toBe(false)
+    expect(document.documentElement.classList.contains("glass")).toBe(false)
+
+    // Glass
+    await userEvent.click(await screen.findByRole("radio", { name: "Glass" }))
+    expect(document.documentElement.classList.contains("dark")).toBe(false)
+    expect(document.documentElement.classList.contains("glass")).toBe(true)
 
     // Back to system should subscribe to matchMedia changes
     await userEvent.click(await screen.findByRole("radio", { name: "System" }))
     expect(mq.addEventListener).toHaveBeenCalled()
+    expect(document.documentElement.classList.contains("glass")).toBe(false)
 
     mmSpy.mockRestore()
   })
 
+  it("syncs native liquid glass mode when running in tauri", async () => {
+    state.isTauriMock.mockReturnValue(true)
+
+    render(<App />)
+    const settingsButtons = await screen.findAllByRole("button", { name: "Settings" })
+    await userEvent.click(settingsButtons[0])
+
+    await userEvent.click(await screen.findByRole("radio", { name: "Glass" }))
+    await waitFor(() =>
+      expect(state.invokeMock).toHaveBeenCalledWith("set_liquid_glass_enabled", { enabled: true })
+    )
+
+    await userEvent.click(await screen.findByRole("radio", { name: "Light" }))
+    await waitFor(() =>
+      expect(state.invokeMock).toHaveBeenCalledWith("set_liquid_glass_enabled", { enabled: false })
+    )
+  })
+
   it("loads plugins, normalizes settings, and renders overview", async () => {
     state.isTauriMock.mockReturnValue(true)
     render(<App />)
@@ -778,6 +804,7 @@ describe("App", () => {
     // because "b" is not in DEFAULT_ENABLED_PLUGINS = ["claude","codex","cursor"])
     state.loadPluginSettingsMock.mockResolvedValue({ order: ["a", "b"], disabled: ["b"] })
     render(<App />)
+    await waitFor(() => expect(state.invokeMock).toHaveBeenCalledWith("list_plugins"))
     const settingsButtons = await screen.findAllByRole("button", { name: "Settings" })
     await userEvent.click(settingsButtons[0])
     // Re-query before each click: the Checkbox remounts on each toggle because
diff --git a/src/components/app/app-shell.tsx b/src/components/app/app-shell.tsx
index 8de76733..7bdeff6a 100644
--- a/src/components/app/app-shell.tsx
+++ b/src/components/app/app-shell.tsx
@@ -9,8 +9,6 @@ import { usePanel } from "@/hooks/app/use-panel"
 import { useAppUpdate } from "@/hooks/use-app-update"
 import { useAppUiStore } from "@/stores/app-ui-store"
 
-const ARROW_OVERHEAD_PX = 37
-
 type AppShellProps = {
   onRefreshAll: () => void
   navPlugins: NavPlugin[]
@@ -67,15 +65,10 @@ export function AppShell({
   const { updateStatus, triggerInstall, checkForUpdates } = useAppUpdate()
 
   return (
-    <div
-      ref={containerRef}
-      tabIndex={-1}
-      className="flex flex-col items-center p-6 pt-1.5 bg-transparent outline-none"
-    >
-      <div className="tray-arrow" />
+    <div ref={containerRef} tabIndex={-1} className="w-full bg-transparent outline-none">
       <div
-        className="relative bg-card rounded-xl overflow-hidden select-none w-full border shadow-lg flex flex-col"
-        style={maxPanelHeightPx ? { maxHeight: `${maxPanelHeightPx - ARROW_OVERHEAD_PX}px` } : undefined}
+        className="app-panel-surface relative rounded-[22px] overflow-hidden select-none w-full flex flex-col"
+        style={maxPanelHeightPx ? { maxHeight: `${maxPanelHeightPx}px` } : undefined}
       >
         <div className="flex flex-1 min-h-0 flex-row">
           <SideNav
@@ -86,7 +79,7 @@ export function AppShell({
             isPluginRefreshAvailable={isPluginRefreshAvailable}
             onReorder={onNavReorder}
           />
-          <div className="flex-1 flex flex-col px-3 pt-2 pb-1.5 min-w-0 bg-card dark:bg-muted/50">
+          <div className="app-main-pane flex-1 flex flex-col px-3 pt-2 pb-1.5 min-w-0">
             <div className="relative flex-1 min-h-0">
               <div ref={scrollRef} className="h-full overflow-y-auto scrollbar-none">
                 <AppContent
@@ -97,7 +90,7 @@ export function AppShell({
                 />
               </div>
               <div
-                className={`pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-card dark:from-muted/50 to-transparent transition-opacity duration-200 ${canScrollDown ? "opacity-100" : "opacity-0"}`}
+                className={`app-scroll-fade pointer-events-none absolute inset-x-0 bottom-0 h-14 transition-opacity duration-200 ${canScrollDown ? "opacity-100" : "opacity-0"}`}
               />
             </div>
             <PanelFooter
diff --git a/src/components/global-shortcut-section.tsx b/src/components/global-shortcut-section.tsx
index 22427ccb..73d80089 100644
--- a/src/components/global-shortcut-section.tsx
+++ b/src/components/global-shortcut-section.tsx
@@ -244,7 +244,7 @@ export function GlobalShortcutSection({
   return (
     <section>
       <h3 className="text-lg font-semibold mb-0">Global Shortcut</h3>
-      <p className="text-sm text-muted-foreground mb-2">
+      <p className="settings-copy text-sm mb-2">
         Show panel from anywhere
       </p>
       <div className="space-y-2">
@@ -258,9 +258,9 @@ export function GlobalShortcutSection({
             onKeyUp={handleKeyUp}
             onBlur={handleBlur}
             className={cn(
-              "w-full h-8 px-3 text-sm rounded-md border-2 border-primary bg-muted/50",
+              "settings-input-surface w-full h-8 px-3 text-sm rounded-md border-2 border-primary",
               "flex items-center outline-none",
-              !pendingDisplay && "text-muted-foreground"
+              !pendingDisplay && "settings-copy"
             )}
           >
             {getDisplayValue()}
@@ -268,9 +268,9 @@ export function GlobalShortcutSection({
         ) : (
           <div
             className={cn(
-              "w-full h-8 px-3 text-sm rounded-md border bg-muted/50",
-              "flex items-center text-left hover:bg-muted transition-colors cursor-pointer",
-              !hasShortcut && "text-muted-foreground"
+              "settings-input-surface w-full h-8 px-3 text-sm rounded-md border",
+              "flex items-center text-left transition-colors cursor-pointer",
+              !hasShortcut && "settings-copy"
             )}
             onClick={startRecording}
             onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") startRecording() }}
@@ -288,12 +288,12 @@ export function GlobalShortcutSection({
                 <X className="h-3.5 w-3.5" />
               </button>
             ) : (
-              <span className="ml-auto text-xs text-muted-foreground">Click to set</span>
+              <span className="ml-auto text-xs settings-copy">Click to set</span>
             )}
           </div>
         )}
       </div>
-      <p className="mt-2 text-xs text-muted-foreground">
+      <p className="mt-2 text-xs settings-copy">
         Press Escape while recording to clear.
       </p>
     </section>
diff --git a/src/components/provider-card.tsx b/src/components/provider-card.tsx
index 2b02722c..29866cbb 100644
--- a/src/components/provider-card.tsx
+++ b/src/components/provider-card.tsx
@@ -304,9 +304,9 @@ function MetricLineRenderer({
     return (
       <div>
         <div className="flex justify-between items-center h-[18px]">
-          <span className="text-xs text-muted-foreground flex-shrink-0">{line.label}</span>
+          <span className="text-xs text-foreground/75 font-normal flex-shrink-0">{line.label}</span>
           <span
-            className="text-xs text-muted-foreground truncate min-w-0 max-w-[60%] text-right"
+            className="text-xs font-semibold text-foreground truncate min-w-0 max-w-[60%] text-right"
             style={line.color ? { color: line.color } : undefined}
             title={line.value}
           >
@@ -314,7 +314,7 @@ function MetricLineRenderer({
           </span>
         </div>
         {line.subtitle && (
-          <div className="text-[10px] text-muted-foreground text-right -mt-0.5">{line.subtitle}</div>
+          <div className="text-[10px] text-foreground/65 text-right -mt-0.5">{line.subtitle}</div>
         )}
       </div>
     )
@@ -324,7 +324,7 @@ function MetricLineRenderer({
     return (
       <div>
         <div className="flex justify-between items-center h-[22px]">
-          <span className="text-sm text-muted-foreground flex-shrink-0">{line.label}</span>
+          <span className="text-sm text-foreground/75 font-normal flex-shrink-0">{line.label}</span>
           <Badge
             variant="outline"
             className="truncate min-w-0 max-w-[60%]"
@@ -339,7 +339,7 @@ function MetricLineRenderer({
           </Badge>
         </div>
         {line.subtitle && (
-          <div className="text-xs text-muted-foreground text-right -mt-0.5">{line.subtitle}</div>
+          <div className="text-xs text-foreground/65 text-right -mt-0.5">{line.subtitle}</div>
         )}
       </div>
     )
@@ -443,7 +443,7 @@ function MetricLineRenderer({
           markerValue={paceMarkerValue}
         />
         <div className="flex justify-between items-center mt-1.5">
-          <span className="text-xs text-muted-foreground tabular-nums">
+          <span className="text-xs font-semibold text-foreground tabular-nums">
             {primaryText}
           </span>
           {secondaryText && (
@@ -456,12 +456,12 @@ function MetricLineRenderer({
                         {...props}
                         type="button"
                         onClick={onResetTimerDisplayModeToggle}
-                        className="text-xs text-muted-foreground tabular-nums hover:text-foreground transition-colors"
+                        className="text-xs text-foreground/70 tabular-nums hover:text-foreground transition-colors"
                       >
                         {secondaryText}
                       </button>
                     ) : (
-                      <span {...props} className="text-xs text-muted-foreground tabular-nums">
+                      <span {...props} className="text-xs text-foreground/70 tabular-nums">
                         {secondaryText}
                       </span>
                     )
@@ -473,12 +473,12 @@ function MetricLineRenderer({
               <button
                 type="button"
                 onClick={onResetTimerDisplayModeToggle}
-                className="text-xs text-muted-foreground tabular-nums hover:text-foreground transition-colors"
+                className="text-xs text-foreground/70 tabular-nums hover:text-foreground transition-colors"
               >
                 {secondaryText}
               </button>
             ) : (
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-foreground/70">
                 {secondaryText}
               </span>
             )
@@ -487,12 +487,12 @@ function MetricLineRenderer({
         {(deficitText || runsOutText) && (
           <div className="flex justify-between items-center mt-0.5">
             {deficitText && (
-              <span className="text-xs text-muted-foreground tabular-nums">
+              <span className="text-xs text-foreground/65 tabular-nums">
                 {deficitText}
               </span>
             )}
             {runsOutText && (
-              <span className="text-xs text-muted-foreground tabular-nums ml-auto">
+              <span className="text-xs text-foreground/65 tabular-nums ml-auto">
                 {runsOutText}
               </span>
             )}
diff --git a/src/components/side-nav.tsx b/src/components/side-nav.tsx
index b363e888..5eed9e56 100644
--- a/src/components/side-nav.tsx
+++ b/src/components/side-nav.tsx
@@ -66,10 +66,10 @@ function NavButton({ isActive, onClick, onContextMenu, children, "aria-label": a
       onContextMenu={onContextMenu}
       aria-label={ariaLabel}
       className={cn(
-        "relative flex items-center justify-center w-full p-2.5 transition-colors",
+        "relative mx-px flex items-center justify-center w-[calc(100%-2px)] rounded-[8px] p-2.5 transition-colors",
         "hover:bg-accent",
         isActive
-          ? "text-foreground before:absolute before:left-0 before:top-1.5 before:bottom-1.5 before:w-0.5 before:bg-primary dark:before:bg-page-accent before:rounded-full"
+          ? "text-foreground before:absolute before:left-[-1px] before:top-1.5 before:bottom-1.5 before:w-0.5 before:bg-primary dark:before:bg-page-accent before:rounded-full"
           : "text-muted-foreground"
       )}
     >
@@ -215,7 +215,7 @@ export function SideNav({
   )
 
   return (
-    <nav className="flex flex-col w-12 border-r bg-muted/50 dark:bg-card py-3">
+    <nav className="app-side-nav flex flex-col w-12 border-r py-3">
       {/* Home */}
       <NavButton
         isActive={activeView === "home"}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 4793f1ed..1db3e8bf 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -41,18 +41,18 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuenow={clamped}
         aria-valuemin={0}
         aria-valuemax={100}
-        className={cn("relative h-3 w-full overflow-hidden rounded-full bg-muted dark:bg-[#353537]", className)}
+        className={cn("usage-progress-track relative h-3 w-full overflow-hidden rounded-full bg-muted dark:bg-[#353537]", className)}
         {...props}
       >
         <div
-          className="h-full transition-all bg-primary"
+          className="usage-progress-indicator h-full transition-all bg-primary"
           style={{ width: `${clamped}%`, ...indicatorStyle }}
         />
         {showMarker && (
           <div
             data-slot="progress-marker"
             aria-hidden="true"
-            className="absolute top-0 bottom-0 w-[2px] z-10 pointer-events-none bg-muted-foreground opacity-50"
+            className="usage-progress-marker absolute top-0 bottom-0 w-[2px] z-10 pointer-events-none bg-muted-foreground opacity-50"
             style={markerStyle}
           />
         )}
diff --git a/src/hooks/app/use-panel.ts b/src/hooks/app/use-panel.ts
index c8d1b5d5..b2ac220e 100644
--- a/src/hooks/app/use-panel.ts
+++ b/src/hooks/app/use-panel.ts
@@ -5,7 +5,7 @@ import { getCurrentWindow, PhysicalSize, currentMonitor } from "@tauri-apps/api/
 import type { ActiveView } from "@/components/side-nav"
 import type { DisplayPluginState } from "@/hooks/app/use-app-plugin-views"
 
-const PANEL_WIDTH = 400
+const PANEL_WIDTH_FALLBACK = 400
 const MAX_HEIGHT_FALLBACK_PX = 600
 const MAX_HEIGHT_FRACTION_OF_MONITOR = 0.8
 
@@ -156,7 +156,12 @@ export function usePanel({
 
     const resizeWindow = async () => {
       const factor = window.devicePixelRatio
-      const width = Math.ceil(PANEL_WIDTH * factor)
+      const measuredPanelWidth = container.getBoundingClientRect().width
+      const panelWidthLogical =
+        Number.isFinite(measuredPanelWidth) && measuredPanelWidth > 0
+          ? measuredPanelWidth
+          : PANEL_WIDTH_FALLBACK
+      const width = Math.ceil(panelWidthLogical * factor)
       const desiredHeightLogical = Math.max(1, container.scrollHeight)
 
       let maxHeightPhysical: number | null = null
diff --git a/src/hooks/app/use-settings-display-actions.test.ts b/src/hooks/app/use-settings-display-actions.test.ts
index 7d0db6a4..e058aeb4 100644
--- a/src/hooks/app/use-settings-display-actions.test.ts
+++ b/src/hooks/app/use-settings-display-actions.test.ts
@@ -53,12 +53,12 @@ describe("useSettingsDisplayActions", () => {
     )
 
     act(() => {
-      result.current.handleThemeModeChange("dark")
+      result.current.handleThemeModeChange("glass")
       result.current.handleDisplayModeChange("used")
       result.current.handleResetTimerDisplayModeChange("absolute")
     })
 
-    expect(trackMock).toHaveBeenCalledWith("setting_changed", { setting: "theme", value: "dark" })
+    expect(trackMock).toHaveBeenCalledWith("setting_changed", { setting: "theme", value: "glass" })
     expect(trackMock).toHaveBeenCalledWith("setting_changed", {
       setting: "display_mode",
       value: "used",
@@ -68,12 +68,12 @@ describe("useSettingsDisplayActions", () => {
       value: "absolute",
     })
 
-    expect(setThemeMode).toHaveBeenCalledWith("dark")
+    expect(setThemeMode).toHaveBeenCalledWith("glass")
     expect(setDisplayMode).toHaveBeenCalledWith("used")
     expect(setResetTimerDisplayMode).toHaveBeenCalledWith("absolute")
     expect(scheduleTrayIconUpdate).toHaveBeenCalledWith("settings", 0)
 
-    expect(saveThemeModeMock).toHaveBeenCalledWith("dark")
+    expect(saveThemeModeMock).toHaveBeenCalledWith("glass")
     expect(saveDisplayModeMock).toHaveBeenCalledWith("used")
     expect(saveResetTimerDisplayModeMock).toHaveBeenCalledWith("absolute")
   })
diff --git a/src/hooks/app/use-settings-theme.ts b/src/hooks/app/use-settings-theme.ts
index 27c970b2..8ec4c270 100644
--- a/src/hooks/app/use-settings-theme.ts
+++ b/src/hooks/app/use-settings-theme.ts
@@ -1,22 +1,42 @@
 import { useEffect } from "react"
+import { invoke, isTauri } from "@tauri-apps/api/core"
 import type { ThemeMode } from "@/lib/settings"
 
 export function useSettingsTheme(themeMode: ThemeMode) {
   useEffect(() => {
     const root = document.documentElement
+    const glass = themeMode === "glass"
+
     const apply = (dark: boolean) => {
       root.classList.toggle("dark", dark)
+      root.classList.toggle("glass", glass)
     }
 
     if (themeMode === "light") {
       apply(false)
+      if (isTauri()) {
+        invoke("set_liquid_glass_enabled", { enabled: false }).catch((error) => {
+          console.error("Failed to update liquid glass mode:", error)
+        })
+      }
       return
     }
     if (themeMode === "dark") {
       apply(true)
+      if (isTauri()) {
+        invoke("set_liquid_glass_enabled", { enabled: false }).catch((error) => {
+          console.error("Failed to update liquid glass mode:", error)
+        })
+      }
       return
     }
 
+    if (isTauri()) {
+      invoke("set_liquid_glass_enabled", { enabled: glass }).catch((error) => {
+        console.error("Failed to update liquid glass mode:", error)
+      })
+    }
+
     const mq = window.matchMedia("(prefers-color-scheme: dark)")
     apply(mq.matches)
     const handler = (e: MediaQueryListEvent) => apply(e.matches)
diff --git a/src/index.css b/src/index.css
index ec8200cc..6ec62ec6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -150,6 +150,253 @@ body,
   padding: 0;
 }
 
+.app-panel-surface {
+  background: var(--card);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+}
+
+.app-panel-surface::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--border);
+  pointer-events: none;
+}
+
+:root.dark .app-panel-surface {
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
+}
+
+.app-side-nav {
+  background: var(--muted);
+}
+
+:root.dark .app-side-nav {
+  background: var(--card);
+}
+
+.app-main-pane {
+  background: var(--card);
+}
+
+:root.dark .app-main-pane {
+  background: var(--muted);
+}
+
+.app-scroll-fade {
+  background: linear-gradient(to top, var(--card), transparent);
+}
+
+:root.dark .app-scroll-fade {
+  background: linear-gradient(to top, var(--muted), transparent);
+}
+
+.settings-copy {
+  color: var(--muted-foreground);
+}
+
+.settings-surface {
+  background: color-mix(in oklab, var(--muted) 56%, transparent);
+}
+
+.settings-plugin-list {
+  background: color-mix(in oklab, var(--muted) 52%, transparent);
+  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
+  overflow: hidden;
+}
+
+.settings-plugin-row {
+  background: transparent;
+}
+
+.settings-plugin-row + .settings-plugin-row {
+  border-top: 1px solid color-mix(in oklab, var(--border) 65%, transparent);
+}
+
+.settings-plugin-row:hover {
+  background: color-mix(in oklab, var(--muted) 72%, transparent);
+}
+
+.settings-plugin-row-enabled .settings-plugin-name {
+  font-weight: 600;
+}
+
+.settings-plugin-row-disabled .settings-plugin-name {
+  font-weight: 500;
+}
+
+.settings-plugin-name {
+  color: var(--foreground);
+}
+
+.settings-plugin-name-disabled {
+  color: color-mix(in oklab, var(--foreground) 55%, var(--muted-foreground));
+}
+
+.settings-plugin-grip {
+  color: var(--muted-foreground);
+}
+
+.settings-plugin-grip:hover {
+  color: var(--foreground);
+}
+
+.settings-input-surface {
+  background: color-mix(in oklab, var(--muted) 52%, transparent);
+  border-color: var(--border);
+}
+
+.settings-input-surface:hover {
+  background: color-mix(in oklab, var(--muted) 66%, transparent);
+}
+
+.menubar-bars-preview {
+  background: transparent;
+  border: 0;
+  backdrop-filter: none;
+}
+
+.usage-progress-track {
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 90%, transparent);
+}
+
+:root.glass .settings-surface,
+:root.glass .settings-input-surface {
+  background: rgba(255, 255, 255, 0.48);
+  border-color: rgba(255, 255, 255, 0.58);
+  backdrop-filter: blur(14px) saturate(130%);
+}
+
+:root.glass .settings-plugin-list {
+  background: rgba(255, 255, 255, 0.34);
+  border-color: rgba(255, 255, 255, 0.56);
+  backdrop-filter: blur(14px) saturate(130%);
+}
+
+:root.glass .settings-plugin-row + .settings-plugin-row {
+  border-top-color: rgba(255, 255, 255, 0.38);
+}
+
+:root.glass .settings-plugin-row:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+:root.glass .settings-copy {
+  color: rgba(20, 24, 33, 0.72);
+}
+
+:root.glass .settings-plugin-name {
+  color: rgba(16, 20, 30, 0.9);
+}
+
+:root.glass .settings-plugin-name-disabled {
+  color: rgba(16, 20, 30, 0.68);
+}
+
+:root.glass .settings-plugin-grip {
+  color: rgba(16, 20, 30, 0.52);
+}
+
+:root.glass .settings-plugin-grip:hover {
+  color: rgba(16, 20, 30, 0.85);
+}
+
+:root.glass .settings-plugin-checkbox {
+  border-color: rgba(16, 20, 30, 0.35);
+  background: rgba(255, 255, 255, 0.65);
+}
+
+:root.glass .usage-progress-track {
+  background: rgba(255, 255, 255, 0.34);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
+}
+
+:root.glass .usage-progress-indicator {
+  filter: saturate(1.05);
+}
+
+:root.glass .usage-progress-marker {
+  background: rgba(255, 255, 255, 0.7);
+  opacity: 0.8;
+}
+
+:root.glass .app-panel-surface {
+  background: transparent;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
+}
+
+:root.dark.glass .app-panel-surface {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+:root.glass .app-side-nav,
+:root.glass .app-main-pane {
+  background: transparent;
+}
+
+:root.glass .app-scroll-fade {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08), transparent);
+}
+
+:root.dark.glass .app-scroll-fade {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.08), transparent);
+}
+
+:root.dark.glass .settings-surface,
+:root.dark.glass .settings-input-surface {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.28);
+}
+
+:root.dark.glass .settings-plugin-list {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.32);
+}
+
+:root.dark.glass .settings-plugin-row + .settings-plugin-row {
+  border-top-color: rgba(255, 255, 255, 0.24);
+}
+
+:root.dark.glass .settings-plugin-row:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+:root.dark.glass .settings-copy {
+  color: rgba(245, 247, 251, 0.84);
+}
+
+:root.dark.glass .settings-plugin-name {
+  color: rgba(245, 247, 251, 0.96);
+}
+
+:root.dark.glass .settings-plugin-name-disabled {
+  color: rgba(245, 247, 251, 0.72);
+}
+
+:root.dark.glass .settings-plugin-grip {
+  color: rgba(245, 247, 251, 0.5);
+}
+
+:root.dark.glass .settings-plugin-grip:hover {
+  color: rgba(245, 247, 251, 0.86);
+}
+
+:root.dark.glass .settings-plugin-checkbox {
+  border-color: rgba(245, 247, 251, 0.34);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+:root.dark.glass .usage-progress-track {
+  background: rgba(255, 255, 255, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
+}
+
+:root.dark.glass .usage-progress-marker {
+  background: rgba(255, 255, 255, 0.48);
+  opacity: 0.75;
+}
+
 /* Hide scrollbar track globally */
 .scrollbar-none {
   scrollbar-width: none;          /* Firefox */
@@ -158,28 +405,6 @@ body,
   display: none;                  /* Chrome / Safari / WebKit */
 }
 
-/* Arrow pointing up toward the tray icon */
-.tray-arrow {
-  width: 0;
-  height: 0;
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  border-bottom: 7px solid var(--border);
-  position: relative;
-  flex-shrink: 0;
-}
-.tray-arrow::after {
-  content: "";
-  position: absolute;
-  left: -6px;
-  top: 1.5px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--card);
-}
-
 /* Border beam for the update button */
 .update-border-beam {
   position: relative;
diff --git a/src/lib/settings.test.ts b/src/lib/settings.test.ts
index 1c686863..5b033cdb 100644
--- a/src/lib/settings.test.ts
+++ b/src/lib/settings.test.ts
@@ -137,6 +137,11 @@ describe("settings", () => {
     await expect(loadThemeMode()).resolves.toBe("dark")
   })
 
+  it("loads stored glass theme mode", async () => {
+    storeState.set("themeMode", "glass")
+    await expect(loadThemeMode()).resolves.toBe("glass")
+  })
+
   it("saves theme mode", async () => {
     await saveThemeMode("light")
     await expect(loadThemeMode()).resolves.toBe("light")
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index a94d0a7c..258e2875 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -12,7 +12,7 @@ export type PluginSettings = {
 
 export type AutoUpdateIntervalMinutes = 5 | 15 | 30 | 60;
 
-export type ThemeMode = "system" | "light" | "dark";
+export type ThemeMode = "system" | "light" | "dark" | "glass";
 
 export type DisplayMode = "used" | "left";
 
@@ -43,7 +43,7 @@ export const DEFAULT_GLOBAL_SHORTCUT: GlobalShortcut = null;
 export const DEFAULT_START_ON_LOGIN = false;
 
 const AUTO_UPDATE_INTERVALS: AutoUpdateIntervalMinutes[] = [5, 15, 30, 60];
-const THEME_MODES: ThemeMode[] = ["system", "light", "dark"];
+const THEME_MODES: ThemeMode[] = ["system", "light", "dark", "glass"];
 const DISPLAY_MODES: DisplayMode[] = ["used", "left"];
 const RESET_TIMER_DISPLAY_MODES: ResetTimerDisplayMode[] = ["relative", "absolute"];
 const MENUBAR_ICON_STYLES: MenubarIconStyle[] = ["provider", "donut", "bars"];
diff --git a/src/pages/settings.test.tsx b/src/pages/settings.test.tsx
index 9139f79e..09dbc978 100644
--- a/src/pages/settings.test.tsx
+++ b/src/pages/settings.test.tsx
@@ -143,6 +143,7 @@ describe("SettingsPage", () => {
     expect(screen.getByText("System")).toBeInTheDocument()
     expect(screen.getByText("Light")).toBeInTheDocument()
     expect(screen.getByText("Dark")).toBeInTheDocument()
+    expect(screen.getByText("Glass")).toBeInTheDocument()
   })
 
   it("updates theme mode", async () => {
@@ -157,6 +158,18 @@ describe("SettingsPage", () => {
     expect(onThemeModeChange).toHaveBeenCalledWith("dark")
   })
 
+  it("updates glass theme mode", async () => {
+    const onThemeModeChange = vi.fn()
+    render(
+      <SettingsPage
+        {...defaultProps}
+        onThemeModeChange={onThemeModeChange}
+      />
+    )
+    await userEvent.click(screen.getByText("Glass"))
+    expect(onThemeModeChange).toHaveBeenCalledWith("glass")
+  })
+
   it("updates display mode", async () => {
     const onDisplayModeChange = vi.fn()
     render(
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index bc257202..ea56cce3 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -127,16 +127,16 @@ function MenubarIconStylePreview({
       : [0.83, 0.7, 0.56];
 
     return (
-      <div className="flex items-center">
+      <div className="menubar-bars-preview flex items-center px-1 py-0.5">
         <div className="flex flex-col gap-0.5 w-5">
           {fractions.map((fraction, i) => {
             const { fillPercent, remainderPercent } = getPreviewBarLayout(fraction);
             return (
-              <div key={i} className={cn("relative h-1 rounded-sm", trackClass)}>
+              <div key={i} className={cn("menubar-bars-track relative h-1 rounded-sm", trackClass)}>
                 {remainderPercent > 0 && (
                   <span
                     aria-hidden
-                    className={remainderClass}
+                    className={cn("menubar-bars-remainder", remainderClass)}
                     style={{
                       position: "absolute",
                       right: 0,
@@ -148,7 +148,7 @@ function MenubarIconStylePreview({
                   />
                 )}
                 <div
-                  className={cn("h-1", fillClass)}
+                  className={cn("menubar-bars-fill h-1", fillClass)}
                   style={{ width: `${fillPercent}%`, borderRadius: "2px 1px 1px 2px" }}
                 />
               </div>
@@ -220,15 +220,15 @@ function SortablePluginItem({
       style={style}
       onClick={() => onToggle(plugin.id)}
       className={cn(
-        "flex items-center gap-3 px-3 py-2 rounded-md bg-card cursor-pointer",
-        "border border-transparent",
-        isDragging && "opacity-50 border-border"
+        "settings-plugin-row flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
+        plugin.enabled ? "settings-plugin-row-enabled" : "settings-plugin-row-disabled",
+        isDragging && "opacity-70"
       )}
     >
       <button
         type="button"
         onClick={(e) => e.stopPropagation()}
-        className="touch-none cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground transition-colors"
+        className="settings-plugin-grip touch-none cursor-grab active:cursor-grabbing transition-colors"
         {...attributes}
         {...listeners}
       >
@@ -237,8 +237,8 @@ function SortablePluginItem({
 
       <span
         className={cn(
-          "flex-1 text-sm",
-          !plugin.enabled && "text-muted-foreground"
+          "settings-plugin-name flex-1 text-sm",
+          !plugin.enabled && "settings-plugin-name-disabled"
         )}
       >
         {plugin.name}
@@ -249,6 +249,7 @@ function SortablePluginItem({
         <Checkbox
           key={`${plugin.id}-${plugin.enabled}`}
           checked={plugin.enabled}
+          className="settings-plugin-checkbox"
           onCheckedChange={() => onToggle(plugin.id)}
         />
       </span>
@@ -320,10 +321,10 @@ export function SettingsPage({
     <div className="py-3 space-y-4">
       <section>
         <h3 className="text-lg font-semibold mb-0">Auto Refresh</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           How obsessive are you
         </p>
-        <div className="bg-muted/50 rounded-lg p-1">
+        <div className="settings-surface rounded-lg p-1">
           <div className="flex gap-1" role="radiogroup" aria-label="Auto-update interval">
             {AUTO_UPDATE_OPTIONS.map((option) => {
               const isActive = option.value === autoUpdateInterval;
@@ -347,10 +348,10 @@ export function SettingsPage({
       </section>
       <section>
         <h3 className="text-lg font-semibold mb-0">Usage Mode</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           Glass half full or half empty
         </p>
-        <div className="bg-muted/50 rounded-lg p-1">
+        <div className="settings-surface rounded-lg p-1">
           <div className="flex gap-1" role="radiogroup" aria-label="Usage display mode">
             {DISPLAY_MODE_OPTIONS.map((option) => {
               const isActive = option.value === displayMode;
@@ -374,10 +375,10 @@ export function SettingsPage({
       </section>
       <section>
         <h3 className="text-lg font-semibold mb-0">Reset Timers</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           Countdown or clock time
         </p>
-        <div className="bg-muted/50 rounded-lg p-1">
+        <div className="settings-surface rounded-lg p-1">
           <div className="flex gap-1" role="radiogroup" aria-label="Reset timer display mode">
             {RESET_TIMER_DISPLAY_OPTIONS.map((option) => {
               const isActive = option.value === resetTimerDisplayMode;
@@ -401,7 +402,7 @@ export function SettingsPage({
                   <span
                     className={cn(
                       "text-xs font-normal",
-                      isActive ? "text-primary-foreground/80" : "text-muted-foreground"
+                      isActive ? "text-primary-foreground/80" : "settings-copy"
                     )}
                   >
                     {example}
@@ -414,10 +415,10 @@ export function SettingsPage({
       </section>
       <section>
         <h3 className="text-lg font-semibold mb-0">Menubar Icon</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           What shows in the menu bar
         </p>
-        <div className="bg-muted/50 rounded-lg p-1">
+        <div className="settings-surface rounded-lg p-1">
           <div className="flex gap-1" role="radiogroup" aria-label="Menubar icon style">
             {MENUBAR_ICON_STYLE_OPTIONS.map((option) => {
               const isActive = option.value === menubarIconStyle;
@@ -446,10 +447,10 @@ export function SettingsPage({
       </section>
       <section>
         <h3 className="text-lg font-semibold mb-0">App Theme</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           How it looks around here
         </p>
-        <div className="bg-muted/50 rounded-lg p-1">
+        <div className="settings-surface rounded-lg p-1">
           <div className="flex gap-1" role="radiogroup" aria-label="Theme mode">
             {THEME_OPTIONS.map((option) => {
               const isActive = option.value === themeMode;
@@ -477,7 +478,7 @@ export function SettingsPage({
       />
       <section>
         <h3 className="text-lg font-semibold mb-0">Start on Login</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           OpenUsage starts when you sign in
         </p>
         <label className="flex items-center gap-2 text-sm select-none text-foreground">
@@ -491,10 +492,10 @@ export function SettingsPage({
       </section>
       <section>
         <h3 className="text-lg font-semibold mb-0">Plugins</h3>
-        <p className="text-sm text-muted-foreground mb-2">
+        <p className="settings-copy text-sm mb-2">
           Your AI coding lineup
         </p>
-        <div className="bg-muted/50 rounded-lg p-1 space-y-1">
+        <div className="settings-plugin-list rounded-lg">
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}