From d87141ffc2fb0c39455d6c29728644673e023d26 Mon Sep 17 00:00:00 2001
From: Fernando <52652158+rene-roid@users.noreply.github.com>
Date: Wed, 30 Sep 2026 10:45:09 +0200
Subject: [PATCH 1/4] Add Liquid Glass interface style with a mobile dock

A new Appearance setting switches between the original look and a
frosted "Liquid Glass" style modelled on the Umbrel App Store. Shared
borders, surfaces and radii are CSS tokens that [data-ui='glass']
swaps; component-specific differences use a `glass:` Tailwind variant.
The choice is stored server-side (ui_style) and mirrored to
localStorage so the right style paints before settings load.

Glass mode adds a dashboard banner with a close button; it can be
turned back on from Settings (dashboard_hero).

Navigation no longer overflows on narrow screens: under md it moves to
a bottom dock, and nav links collapse to icons until xl. Sticky bars
and full-height panes read the navbar's measured height from --nav-h
instead of assuming 60px.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/server/src/lib/settings.ts               |   4 +
 apps/server/src/routes/settings.ts            |   5 +
 apps/web/index.html                           |   4 +-
 apps/web/src/App.tsx                          |   7 +-
 apps/web/src/components/BulkConfirmDialog.tsx |  12 +-
 apps/web/src/components/BulkRenameDialog.tsx  |  16 +-
 apps/web/src/components/BulkTagDialog.tsx     |  10 +-
 apps/web/src/components/ConfirmDialog.tsx     |   6 +-
 apps/web/src/components/FilterToolbar.tsx     |  12 +-
 apps/web/src/components/LoginGate.tsx         |   4 +-
 apps/web/src/components/MediaCard.tsx         |  27 +-
 apps/web/src/components/MediaViewer.tsx       |  16 +-
 apps/web/src/components/Menu.tsx              |   2 +-
 apps/web/src/components/Navbar.tsx            | 248 ++++++++++------
 .../web/src/components/ReleaseNotesDialog.tsx |   8 +-
 apps/web/src/components/SelectionBar.tsx      |  20 +-
 apps/web/src/components/TagSearchInput.tsx    |  10 +-
 apps/web/src/components/TagSidebar.tsx        |  10 +-
 apps/web/src/components/Toast.tsx             |   2 +-
 apps/web/src/components/UpdateToast.tsx       |   2 +-
 apps/web/src/hooks/useUiStyle.ts              |  21 ++
 apps/web/src/index.css                        |  92 ++++++
 apps/web/src/main.tsx                         |   3 +
 apps/web/src/routes/Boards.tsx                |  16 +-
 apps/web/src/routes/Dashboard.tsx             | 269 +++++++++++++++---
 apps/web/src/routes/Discover.tsx              |  10 +-
 apps/web/src/routes/Explore.tsx               |   4 +-
 apps/web/src/routes/LibraryView.tsx           |   4 +-
 .../routes/downloader/DownloaderConsole.tsx   |  12 +-
 .../src/routes/downloader/DownloaderPage.tsx  |  38 +--
 .../web/src/routes/settings/DuplicatesTab.tsx |  16 +-
 .../src/routes/settings/JobsConfigureTab.tsx  |  20 +-
 .../src/routes/settings/JobsHistoryTab.tsx    |   2 +-
 apps/web/src/routes/settings/JobsTab.tsx      |   2 +-
 apps/web/src/routes/settings/LibrariesTab.tsx |  40 +--
 apps/web/src/routes/settings/MiscTabs.tsx     | 151 ++++++++--
 apps/web/src/routes/settings/ReleasesTab.tsx  |   2 +-
 apps/web/src/routes/settings/TaggingTab.tsx   |  18 +-
 apps/web/src/routes/settings/UploadsTab.tsx   |   6 +-
 apps/web/src/routes/settings/index.tsx        |  14 +-
 packages/shared/src/index.ts                  |   4 +
 41 files changed, 822 insertions(+), 347 deletions(-)
 create mode 100644 apps/web/src/hooks/useUiStyle.ts

diff --git a/apps/server/src/lib/settings.ts b/apps/server/src/lib/settings.ts
index 5698785..b3b7e4c 100644
--- a/apps/server/src/lib/settings.ts
+++ b/apps/server/src/lib/settings.ts
@@ -18,6 +18,10 @@ const DEFAULTS: Record<string, string> = {
   // Off until switched on in Settings. Engagement tracking runs regardless, so the taste profile
   // is already warm the first time it's turned on.
   discover_enabled: '0',
+  // 'glass' (Liquid Glass) or 'classic' (the original look).
+  ui_style: 'glass',
+  // The Liquid Glass dashboard banner; its close button turns this off.
+  dashboard_hero: '1',
 };
 
 export function getSetting(key: string): string {
diff --git a/apps/server/src/routes/settings.ts b/apps/server/src/routes/settings.ts
index ce8ce99..79dfb4e 100644
--- a/apps/server/src/routes/settings.ts
+++ b/apps/server/src/routes/settings.ts
@@ -30,8 +30,12 @@ const EDITABLE_KEYS = new Set([
   'gifs_as_videos',
   'video_transcode_enabled',
   'discover_enabled',
+  'ui_style',
+  'dashboard_hero',
 ]);
 
+const UI_STYLES = new Set(['glass', 'classic']);
+
 settingsRouter.get(
   '/api/settings',
   wrap(async (_req, res) => {
@@ -45,6 +49,7 @@ settingsRouter.patch(
     const body = z.record(z.string()).parse(req.body);
     for (const [key, value] of Object.entries(body)) {
       if (!EDITABLE_KEYS.has(key)) return res.status(400).json({ error: `Setting not editable: ${key}` });
+      if (key === 'ui_style' && !UI_STYLES.has(value)) return res.status(400).json({ error: `Unknown ui_style: ${value}` });
       if (key === 'gifs_as_videos' && value !== getSetting(key)) {
         enqueueGifReclassifyJob(value === '1');
       }
diff --git a/apps/web/index.html b/apps/web/index.html
index e1075de..5acf06c 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -2,11 +2,11 @@
 <html lang="en" style="background:#09090b">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Sakuya</title>
     <link rel="icon" href="/icon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index a2448b3..b68b4a1 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -7,6 +7,7 @@ import { ReleaseNotesDialog } from './components/ReleaseNotesDialog';
 import { UpdateToast } from './components/UpdateToast';
 import { LoginGate } from './components/LoginGate';
 import { useAuth } from './hooks/useAuth';
+import { applyUiStyle } from './hooks/useUiStyle';
 import { JobsProvider } from './hooks/useJobs';
 import { DownloaderProvider } from './hooks/useDownloader';
 import { Dashboard } from './routes/Dashboard';
@@ -32,6 +33,10 @@ export function App() {
     }
   }, [settings?.accent_color]);
 
+  useEffect(() => {
+    if (settings?.ui_style) applyUiStyle(settings.ui_style);
+  }, [settings?.ui_style]);
+
   if (loading) return null;
   // Only gate when the server says login is on. An unreachable server has no auth status at all,
   // and showing a password prompt for it sends people hunting for a password that doesn't exist.
@@ -40,7 +45,7 @@ export function App() {
   return (
     <JobsProvider>
       <DownloaderProvider>
-        <div className="relative min-h-screen bg-zinc-950 text-zinc-100">
+        <div className="relative min-h-screen text-zinc-100">
           <ReleaseNotesDialog />
           <UpdateToast />
           <Navbar />
diff --git a/apps/web/src/components/BulkConfirmDialog.tsx b/apps/web/src/components/BulkConfirmDialog.tsx
index f193dae..feafa9a 100644
--- a/apps/web/src/components/BulkConfirmDialog.tsx
+++ b/apps/web/src/components/BulkConfirmDialog.tsx
@@ -49,7 +49,7 @@ export function BulkConfirmDialog({
       onClick={busy ? undefined : onCancel}
     >
       <div
-        className="flex max-h-[80vh] w-full max-w-[560px] flex-col rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="flex max-h-[80vh] w-full max-w-[560px] flex-col rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-2 text-[15px] font-bold">{title}</div>
@@ -64,11 +64,11 @@ export function BulkConfirmDialog({
           </div>
         )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900/40">
+        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-line bg-zinc-900/40">
           {shown.map((row) => (
             <div
               key={row.id}
-              className={`flex items-center gap-2.5 border-b border-zinc-800/60 px-2.5 py-1.5 last:border-b-0 ${
+              className={`flex items-center gap-2.5 border-b border-line/60 px-2.5 py-1.5 last:border-b-0 ${
                 row.warning ? 'bg-rose-500/5' : ''
               }`}
             >
@@ -76,7 +76,7 @@ export function BulkConfirmDialog({
                 src={thumbUrl(row.id)}
                 alt=""
                 loading="lazy"
-                className="h-7 w-7 flex-none rounded border border-zinc-800 object-cover"
+                className="h-7 w-7 flex-none rounded border border-line object-cover"
               />
               <div className="min-w-0 flex-1">
                 <div className="truncate text-[12px] font-semibold text-zinc-200" title={row.label}>
@@ -101,14 +101,14 @@ export function BulkConfirmDialog({
           <button
             disabled={busy}
             onClick={onCancel}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+            className="cursor-pointer rounded-btn border border-line px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
           >
             Cancel
           </button>
           <button
             disabled={busy || rows.length === blocking}
             onClick={onConfirm}
-            className={`cursor-pointer rounded-[7px] px-3.5 py-1.5 text-[12.5px] font-semibold text-white disabled:opacity-40 ${
+            className={`cursor-pointer rounded-btn px-3.5 py-1.5 text-[12.5px] font-semibold text-white disabled:opacity-40 ${
               danger ? 'bg-rose-600 hover:bg-rose-500' : 'bg-accent hover:opacity-90'
             }`}
           >
diff --git a/apps/web/src/components/BulkRenameDialog.tsx b/apps/web/src/components/BulkRenameDialog.tsx
index eb3e610..113edaa 100644
--- a/apps/web/src/components/BulkRenameDialog.tsx
+++ b/apps/web/src/components/BulkRenameDialog.tsx
@@ -12,7 +12,7 @@ function segStyle(active: boolean): string {
 }
 
 const inputClass =
-  'w-full rounded-lg border border-zinc-800 bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-zinc-600';
+  'w-full rounded-lg border border-line bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-line-hover';
 
 /**
  * Bulk rename with a live preview. The preview rows and the payload come from the same
@@ -79,12 +79,12 @@ export function BulkRenameDialog({
       onClick={onCancel}
     >
       <div
-        className="flex max-h-[85vh] w-full max-w-[600px] flex-col rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="flex max-h-[85vh] w-full max-w-[600px] flex-col rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-3 text-[15px] font-bold">Rename {selected.length} files</div>
 
-        <div className="mb-3 flex w-fit rounded-lg border border-zinc-800 bg-zinc-900 p-0.5">
+        <div className="mb-3 flex w-fit rounded-lg border border-line bg-zinc-900 p-0.5">
           <div className={segStyle(opts.mode === 'pattern')} onClick={() => set({ mode: 'pattern' })}>
             Pattern
           </div>
@@ -110,7 +110,7 @@ export function BulkRenameDialog({
                   min={0}
                   value={opts.startAt}
                   onChange={(e) => set({ startAt: Number(e.target.value) || 0 })}
-                  className="w-[68px] rounded-lg border border-zinc-800 bg-zinc-900 px-2 py-2 text-[12.5px] text-zinc-100 outline-none focus:border-zinc-600"
+                  className="w-[68px] rounded-lg border border-line bg-zinc-900 px-2 py-2 text-[12.5px] text-zinc-100 outline-none focus:border-line-hover"
                 />
               </div>
             </div>
@@ -158,11 +158,11 @@ export function BulkRenameDialog({
             {stats.errors > 0 && <span className="text-rose-400"> · {stats.errors} blocked</span>}
           </div>
         </div>
-        <div className="min-h-[120px] flex-1 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900/40">
+        <div className="min-h-[120px] flex-1 overflow-y-auto rounded-lg border border-line bg-zinc-900/40">
           {plan.map((row) => (
             <div
               key={row.id}
-              className={`flex items-center gap-2 border-b border-zinc-800/60 px-2.5 py-1.5 text-[11.5px] last:border-b-0 ${
+              className={`flex items-center gap-2 border-b border-line/60 px-2.5 py-1.5 text-[11.5px] last:border-b-0 ${
                 row.error ? 'bg-rose-500/5' : ''
               }`}
             >
@@ -183,14 +183,14 @@ export function BulkRenameDialog({
         <div className="mt-4 flex justify-end gap-2">
           <button
             onClick={onCancel}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
+            className="cursor-pointer rounded-btn border border-line px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
           >
             Cancel
           </button>
           <button
             disabled={stats.changed === 0}
             onClick={() => setConfirming(true)}
-            className="cursor-pointer rounded-[7px] bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
           >
             Review changes
           </button>
diff --git a/apps/web/src/components/BulkTagDialog.tsx b/apps/web/src/components/BulkTagDialog.tsx
index 271fc26..23b07a3 100644
--- a/apps/web/src/components/BulkTagDialog.tsx
+++ b/apps/web/src/components/BulkTagDialog.tsx
@@ -90,7 +90,7 @@ export function BulkTagDialog({
       onClick={onCancel}
     >
       <div
-        className="flex max-h-[80vh] w-full max-w-[520px] flex-col rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="flex max-h-[80vh] w-full max-w-[520px] flex-col rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-1 text-[15px] font-bold">Edit tags on {ids.length} files</div>
@@ -125,7 +125,7 @@ export function BulkTagDialog({
         />
 
         <div className="mb-1.5 mt-5 text-xs font-bold tracking-[0.4px] text-zinc-500">REMOVE</div>
-        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900/40 p-2">
+        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-line bg-zinc-900/40 p-2">
           {(present ?? []).length === 0 && (
             <div className="px-1 py-2 text-[11.5px] text-zinc-600">No tags on the selected files.</div>
           )}
@@ -141,7 +141,7 @@ export function BulkTagDialog({
                   className={`flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11.5px] font-semibold ${
                     staged
                       ? 'border-rose-500/50 bg-rose-500/15 text-rose-300 line-through'
-                      : 'border-zinc-700 bg-zinc-800 text-zinc-300 hover:border-zinc-600'
+                      : 'border-line-strong bg-zinc-800 text-zinc-300 hover:border-line-hover'
                   }`}
                 >
                   <span>{tag.name}</span>
@@ -156,14 +156,14 @@ export function BulkTagDialog({
         <div className="mt-4 flex justify-end gap-2">
           <button
             onClick={onCancel}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
+            className="cursor-pointer rounded-btn border border-line px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
           >
             Cancel
           </button>
           <button
             disabled={!hasChanges}
             onClick={() => setConfirming(true)}
-            className="cursor-pointer rounded-[7px] bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90 disabled:opacity-40"
           >
             Review changes
           </button>
diff --git a/apps/web/src/components/ConfirmDialog.tsx b/apps/web/src/components/ConfirmDialog.tsx
index 2063446..bbce3f6 100644
--- a/apps/web/src/components/ConfirmDialog.tsx
+++ b/apps/web/src/components/ConfirmDialog.tsx
@@ -24,7 +24,7 @@ export function ConfirmDialog({
       onClick={onCancel}
     >
       <div
-        className="w-full max-w-[420px] rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="w-full max-w-[420px] rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-2 text-[15px] font-bold">{title}</div>
@@ -32,13 +32,13 @@ export function ConfirmDialog({
         <div className="flex justify-end gap-2">
           <button
             onClick={onCancel}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
+            className="cursor-pointer rounded-btn border border-line px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
           >
             {cancelLabel}
           </button>
           <button
             onClick={onConfirm}
-            className={`cursor-pointer rounded-[7px] px-3.5 py-1.5 text-[12.5px] font-semibold text-white ${
+            className={`cursor-pointer rounded-btn px-3.5 py-1.5 text-[12.5px] font-semibold text-white ${
               danger ? 'bg-rose-600 hover:bg-rose-500' : 'bg-accent hover:opacity-90'
             }`}
           >
diff --git a/apps/web/src/components/FilterToolbar.tsx b/apps/web/src/components/FilterToolbar.tsx
index 3ad429b..876b35f 100644
--- a/apps/web/src/components/FilterToolbar.tsx
+++ b/apps/web/src/components/FilterToolbar.tsx
@@ -17,7 +17,7 @@ function segStyle(active: boolean): string {
 
 function buttonStyle(accent?: boolean): string {
   return `flex flex-none cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg border px-3 py-[7px] text-[13px] font-semibold ${
-    accent ? 'border-accent/40 text-accent' : 'border-zinc-800 text-zinc-400 hover:text-zinc-200'
+    accent ? 'border-accent/40 text-accent' : 'border-line text-zinc-400 hover:text-zinc-200'
   }`;
 }
 
@@ -86,7 +86,7 @@ export function FilterToolbar({
     {
       id: 'type',
       inline: (
-        <div className="flex flex-none rounded-lg border border-zinc-800 bg-zinc-900 p-0.5">
+        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5">
           {(['all', 'image', 'video'] as const).map((t) => (
             <div key={t} className={segStyle(filters.typeParam === t)} onClick={() => actions.setType(t)}>
               {t === 'all' ? 'All' : t === 'image' ? 'Images' : 'Videos'}
@@ -126,7 +126,7 @@ export function FilterToolbar({
     {
       id: 'sort',
       inline: (
-        <div className="flex flex-none rounded-lg border border-zinc-800 bg-zinc-900 p-0.5">
+        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5">
           {SORTS.map((srt) => (
             <div key={srt.key} className={segStyle(filters.sort === srt.key)} onClick={() => actions.setSort(srt.key)}>
               <span className="flex items-center gap-1">
@@ -264,7 +264,7 @@ export function FilterToolbar({
             <div
               title="More filters"
               aria-label="More filters"
-              className="relative flex cursor-pointer items-center rounded-lg border border-zinc-800 px-2 py-[7px] text-zinc-400 hover:text-zinc-200"
+              className="relative flex cursor-pointer items-center rounded-lg border border-line px-2 py-[7px] text-zinc-400 hover:text-zinc-200"
               onClick={() => setMenuOpen((open) => !open)}
             >
               <MoreVertical size={16} />
@@ -286,7 +286,7 @@ export function FilterToolbar({
             <span
               key={chip.id}
               className={`flex items-center gap-1.5 rounded-full border py-0.5 pl-2.5 pr-1.5 text-xs font-semibold ${
-                chip.tag ? 'border-accent/40 bg-accent/15 text-violet-300' : 'border-zinc-700 bg-zinc-800 text-zinc-300'
+                chip.tag ? 'border-accent/40 bg-accent/15 text-violet-300' : 'border-line-strong bg-zinc-800 text-zinc-300'
               }`}
             >
               {chip.label}
@@ -303,7 +303,7 @@ export function FilterToolbar({
           ))}
           {chips.length > CHIP_LIMIT && (
             <span
-              className="cursor-pointer rounded-full border border-zinc-700 px-2.5 py-[3px] text-xs font-semibold text-zinc-400 hover:text-zinc-200"
+              className="cursor-pointer rounded-full border border-line-strong px-2.5 py-[3px] text-xs font-semibold text-zinc-400 hover:text-zinc-200"
               onClick={() => setShowAllChips((open) => !open)}
             >
               {showAllChips ? 'Show less' : `+${chips.length - CHIP_LIMIT} more`}
diff --git a/apps/web/src/components/LoginGate.tsx b/apps/web/src/components/LoginGate.tsx
index 44c471e..8ca8724 100644
--- a/apps/web/src/components/LoginGate.tsx
+++ b/apps/web/src/components/LoginGate.tsx
@@ -25,7 +25,7 @@ export function LoginGate() {
     <div className="grid min-h-screen place-items-center bg-zinc-950 px-4">
       <form
         onSubmit={handleSubmit}
-        className="w-full max-w-sm rounded-lg border border-zinc-800 bg-zinc-900/60 p-6 shadow-lg"
+        className="w-full max-w-sm rounded-lg border border-line bg-zinc-900/60 p-6 shadow-lg"
       >
         <h1 className="mb-1 text-lg font-semibold text-zinc-50">
           Sakuya<span className="text-accent">.</span>
@@ -37,7 +37,7 @@ export function LoginGate() {
           value={secret}
           onChange={(e) => setSecret(e.target.value)}
           placeholder="Password"
-          className="w-full rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-zinc-500"
+          className="w-full rounded-md border border-line-strong bg-zinc-950 px-3 py-2 text-sm text-zinc-100 outline-none focus:border-zinc-500"
         />
         {error && <p className="mt-2 text-sm text-red-400">{error}</p>}
         <button
diff --git a/apps/web/src/components/MediaCard.tsx b/apps/web/src/components/MediaCard.tsx
index 0b4c0f2..868df74 100644
--- a/apps/web/src/components/MediaCard.tsx
+++ b/apps/web/src/components/MediaCard.tsx
@@ -8,7 +8,7 @@ import { HeartButton } from './HeartButton';
 export function TypeBadge({ type }: { type: 'image' | 'video' }) {
   return (
     <div
-      className={`absolute left-1.5 top-1.5 rounded px-1.5 py-px text-[9px] font-bold tracking-wide text-white backdrop-blur ${
+      className={`absolute left-1.5 top-1.5 rounded px-1.5 py-px text-[9px] glass:left-2 glass:top-2 glass:rounded-full glass:px-2 glass:py-0.5 font-bold tracking-wide text-white backdrop-blur ${
         type === 'video' ? 'bg-accent/85' : 'bg-black/60'
       }`}
     >
@@ -21,7 +21,7 @@ export function DurationBadge({ seconds }: { seconds: number | null }) {
   const label = formatDuration(seconds);
   if (!label) return null;
   return (
-    <div className="absolute bottom-1.5 right-1.5 rounded bg-black/70 px-1.5 py-px text-[10px] font-semibold text-zinc-100">
+    <div className="absolute bottom-1.5 right-1.5 rounded bg-black/70 px-1.5 py-px text-[10px] glass:bottom-2 glass:right-2 glass:rounded-full glass:bg-black/60 glass:px-2 glass:py-0.5 glass:backdrop-blur font-semibold text-zinc-100">
       {label}
     </div>
   );
@@ -52,15 +52,15 @@ export const MediaCard = memo(function MediaCard({
   return (
     <div className="cursor-pointer select-none" onClick={(e) => onActivate(index, e)}>
       <div
-        className={`group relative aspect-square w-full overflow-hidden rounded-[10px] border bg-zinc-900 ${
-          selected ? 'border-accent ring-2 ring-accent' : 'border-zinc-800'
+        className={`group relative aspect-square w-full overflow-hidden rounded-panel border bg-zinc-900 glass:rounded-xl glass:bg-white/[0.03] glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_18px_48px_rgba(0,0,0,0.16)] glass:transition-colors ${
+          selected ? 'border-accent ring-2 ring-accent' : 'border-line glass:hover:border-white/20'
         }`}
       >
         <img
           src={thumbUrl(item.id)}
           alt={item.filename}
           loading="lazy"
-          className="h-full w-full object-cover"
+          className="h-full w-full object-cover glass:transition-transform glass:duration-300 glass:group-hover:scale-[1.03]"
         />
         {item.type === 'video' && <TypeBadge type={item.type} />}
         <DurationBadge seconds={item.durationSeconds} />
@@ -71,7 +71,7 @@ export const MediaCard = memo(function MediaCard({
                 ? `Related to tags you like: "${item.reasonTag}"`
                 : `Recommended because you like "${item.reasonTag}"`
             }
-            className={`absolute bottom-1.5 left-1.5 max-w-[85%] truncate rounded px-1.5 py-px text-[9.5px] font-bold tracking-wide text-white backdrop-blur ${
+            className={`absolute bottom-1.5 left-1.5 max-w-[85%] truncate rounded px-1.5 py-px glass:bottom-2 glass:left-2 glass:rounded-full glass:px-2 glass:py-0.5 text-[9.5px] font-bold tracking-wide text-white backdrop-blur ${
               item.reasonRelated ? 'bg-teal-500/85' : 'bg-accent/85'
             }`}
           >
@@ -120,9 +120,14 @@ export function WideCard({
   showProgress?: boolean;
 }) {
   return (
-    <div className="group w-[200px] flex-none cursor-pointer" onClick={onClick}>
-      <div className="relative h-[112px] w-[200px] overflow-hidden rounded-[10px] border border-zinc-800 bg-zinc-900">
-        <img src={thumbUrl(item.id)} alt={item.filename} loading="lazy" className="h-full w-full object-cover" />
+    <div className="group w-[200px] flex-none cursor-pointer glass:w-[220px]" onClick={onClick}>
+      <div className="relative h-[112px] w-[200px] overflow-hidden rounded-panel border border-line bg-zinc-900 glass:h-[124px] glass:w-[220px] glass:rounded-xl glass:bg-white/[0.03] glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_18px_48px_rgba(0,0,0,0.16)] glass:transition-colors glass:group-hover:border-white/20">
+        <img
+          src={thumbUrl(item.id)}
+          alt={item.filename}
+          loading="lazy"
+          className="h-full w-full object-cover glass:transition-transform glass:duration-300 glass:group-hover:scale-[1.04]"
+        />
         {showProgress && (
           <div className="absolute inset-x-0 bottom-0 h-[3px] bg-white/15">
             <div className="h-full bg-accent" style={{ width: `${Math.round(item.viewProgress * 100)}%` }} />
@@ -138,8 +143,8 @@ export function WideCard({
           <HeartButton mediaId={item.id} liked={item.liked} size="sm" />
         </div>
       </div>
-      <div className="mt-[7px] truncate text-[12.5px] font-semibold text-zinc-200">{item.filename}</div>
-      <div className="mt-px text-[11px] text-zinc-500">{item.libraryName}</div>
+      <div className="mt-[7px] truncate text-[12.5px] font-semibold text-zinc-200 glass:mt-2.5 glass:px-0.5 glass:font-display glass:text-[13.5px] glass:text-zinc-100">{item.filename}</div>
+      <div className="mt-px text-[11px] text-zinc-500 glass:px-0.5 glass:text-[12px]">{item.libraryName}</div>
     </div>
   );
 }
diff --git a/apps/web/src/components/MediaViewer.tsx b/apps/web/src/components/MediaViewer.tsx
index ecf2724..9916658 100644
--- a/apps/web/src/components/MediaViewer.tsx
+++ b/apps/web/src/components/MediaViewer.tsx
@@ -431,7 +431,7 @@ export function MediaViewer({ items, index, onIndexChange, onClose, onNearEnd }:
           />
         )}
       </div>
-      <div className="w-full flex-none overflow-y-auto border-t border-zinc-800 bg-[#111113] p-[18px] sm:w-[340px] sm:border-l sm:border-t-0 sm:p-[22px]">
+      <div className="w-full flex-none overflow-y-auto border-t border-line bg-surface p-[18px] sm:w-[340px] sm:border-l sm:border-t-0 sm:p-[22px]">
         <div className="mb-0.5 flex items-center gap-1.5">
           {renaming ? (
             <input
@@ -444,7 +444,7 @@ export function MediaViewer({ items, index, onIndexChange, onClose, onNearEnd }:
                 else if (e.key === 'Escape') setRenaming(false);
               }}
               onBlur={() => setRenaming(false)}
-              className="min-w-0 flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-1.5 py-0.5 text-base font-bold text-zinc-100 outline-none focus:border-accent"
+              className="min-w-0 flex-1 rounded-md border border-line-strong bg-zinc-900 px-1.5 py-0.5 text-base font-bold text-zinc-100 outline-none focus:border-accent"
             />
           ) : (
             <span className="min-w-0 flex-1 truncate break-all text-base font-bold" title={displayName}>
@@ -553,7 +553,7 @@ export function MediaViewer({ items, index, onIndexChange, onClose, onNearEnd }:
             }
           }}
           placeholder={`Add ${addCategory} tag, press Enter…`}
-          className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-zinc-600"
+          className="w-full rounded-lg border border-line bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-line-hover"
         />
         <BoardsSection mediaId={item.id} boards={detail?.id === item.id ? detail.boards : []} />
       </div>
@@ -650,7 +650,7 @@ function BoardsSection({ mediaId, boards }: { mediaId: number; boards: Board[] }
           }}
           onBlur={() => setCreating(false)}
           placeholder="New board name, press Enter…"
-          className="w-full rounded-lg border border-zinc-800 bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-zinc-600"
+          className="w-full rounded-lg border border-line bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-line-hover"
         />
       ) : (
         <select
@@ -659,7 +659,7 @@ function BoardsSection({ mediaId, boards }: { mediaId: number; boards: Board[] }
             if (e.target.value === 'new') setCreating(true);
             else if (e.target.value) addMutation.mutate(Number(e.target.value));
           }}
-          className="w-full cursor-pointer rounded-lg border border-zinc-800 bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none focus:border-zinc-600"
+          className="w-full cursor-pointer rounded-lg border border-line bg-zinc-900 px-2.5 py-2 text-[12.5px] text-zinc-100 outline-none focus:border-line-hover"
         >
           <option value="">Add to board…</option>
           {addable.map((board) => (
@@ -716,7 +716,7 @@ function TagPill({
         <X size={11} />
       </button>
       {menuOpen && (
-        <div className="absolute left-0 top-[26px] z-20 flex flex-col overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl">
+        <div className="absolute left-0 top-[26px] z-20 flex flex-col overflow-hidden rounded-lg border border-line-strong bg-zinc-900 shadow-xl">
           {(['general', 'character', 'rating', 'user'] as TagCategory[]).map((c) => (
             <div
               key={c}
@@ -748,7 +748,7 @@ function SimilarPanel({
 }) {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <div className="absolute bottom-4 left-4 z-10 w-[240px] rounded-xl border border-zinc-800 bg-zinc-950/85 backdrop-blur">
+    <div className="absolute bottom-4 left-4 z-10 w-[240px] rounded-xl border border-line bg-zinc-950/85 backdrop-blur">
       <button className={`w-full flex cursor-pointer items-center justify-between ${collapsed ? 'px-3 py-2' : 'px-3 py-3 mb-2'}`} onClick={() => setCollapsed((c) => !c)}>
         <span className="text-[11px] font-bold tracking-[0.4px] text-zinc-400">SIMILAR & DUPLICATES</span>
         <ChevronRight size={16} className={`text-zinc-500 transition-transform ${collapsed ? '' : 'rotate-90'}`} />
@@ -793,7 +793,7 @@ function Section({
             title={m.filename}
             onClick={() => onPick(m)}
             className={`h-12 w-12 flex-none cursor-pointer rounded-md border object-cover hover:border-accent ${
-              m.id === previousId ? 'border-2 border-accent' : 'border border-zinc-800'
+              m.id === previousId ? 'border-2 border-accent' : 'border border-line'
             }`}
           />
         ))}
diff --git a/apps/web/src/components/Menu.tsx b/apps/web/src/components/Menu.tsx
index 8e6ecdf..997387c 100644
--- a/apps/web/src/components/Menu.tsx
+++ b/apps/web/src/components/Menu.tsx
@@ -36,7 +36,7 @@ export function MenuPanel({
       <div className="fixed inset-0 z-[70]" onClick={onClose} />
       <div
         style={{ width }}
-        className={`absolute right-0 z-[71] overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)] ${
+        className={`absolute right-0 z-[71] overflow-hidden rounded-lg border border-line-strong bg-zinc-900 py-1 shadow-[0_8px_24px_rgba(0,0,0,0.5)] ${
           side === 'top' ? 'bottom-[calc(100%+6px)]' : 'top-[calc(100%+6px)]'
         }`}
       >
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 50cb936..2bb2cf1 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Activity, Download, Home, Images, LayoutGrid, Lock, Settings, Sparkles } from 'lucide-react';
@@ -8,12 +8,46 @@ import { useScanAllLibraries } from '../hooks/useScanAllLibraries';
 import { TagSearchInput } from './TagSearchInput';
 import { api } from '../lib/api';
 
+const NAV_ITEMS = [
+  { to: '/', label: 'Dashboard', icon: Home, tint: 'from-sky-400 to-blue-600' },
+  { to: '/explore', label: 'Explore', icon: LayoutGrid, tint: 'from-violet-400 to-indigo-600' },
+  { to: '/discover', label: 'Discover', icon: Sparkles, tint: 'from-amber-300 to-orange-500' },
+  { to: '/boards', label: 'Boards', icon: Images, tint: 'from-pink-400 to-rose-600' },
+  { to: '/downloader', label: 'Downloader', icon: Download, tint: 'from-emerald-300 to-teal-600' },
+];
+
+// Labels only show from xl up; below that the links collapse to icons so nothing gets pushed off
+// the bar. Under md the links move to the bottom dock instead.
 function navPill(active: boolean): string {
-  return `flex cursor-pointer items-center rounded-[7px] px-2.5 py-2 text-[13.5px] font-semibold sm:px-3.5 sm:py-[7px] ${
-    active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'
+  const base =
+    'flex cursor-pointer items-center gap-2 rounded-field px-2.5 py-2 text-[13.5px] font-semibold xl:px-3.5 xl:py-[7px] ' +
+    'glass:h-10 glass:rounded-2xl glass:border glass:py-0 glass:pl-[7px] glass:pr-[7px] glass:font-display glass:text-[14px] glass:transition-colors xl:glass:pl-2 xl:glass:pr-3.5';
+  return `${base} ${
+    active
+      ? 'bg-zinc-800 text-zinc-100 glass:border-accent/55 glass:bg-accent/20 glass:text-white glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]'
+      : 'text-zinc-400 hover:text-zinc-200 glass:border-white/[0.045] glass:bg-white/[0.02] glass:font-medium glass:hover:bg-white/5 glass:hover:text-white'
   }`;
 }
 
+function iconButton(active: boolean): string {
+  return `relative flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 glass:h-[38px] glass:w-[38px] glass:rounded-full glass:border glass:text-zinc-300 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] glass:transition-colors ${
+    active
+      ? 'bg-zinc-800 glass:border-white/15 glass:bg-white/12 glass:text-white'
+      : 'hover:bg-zinc-900 glass:border-white/8 glass:bg-white/[0.03] glass:hover:bg-white/8 glass:hover:text-white'
+  }`;
+}
+
+/** Colored rounded tile behind a nav icon; only visible in the Liquid Glass style. */
+function IconTile({ tint, children, className = '' }: { tint: string; children: React.ReactNode; className?: string }) {
+  return (
+    <span
+      className={`hidden place-items-center rounded-[9px] bg-gradient-to-br text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] glass:grid ${tint} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
 const STATUS_COLOR: Record<string, string> = {
   running: 'text-amber-500',
   queued: 'text-zinc-500',
@@ -40,38 +74,34 @@ function JobsButton() {
 
   return (
     <div ref={rootRef} className="relative">
-        <button
-            title="Jobs"
-            onClick={() => setOpen((v) => !v)}
-            className={`relative flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 ${
-                open ? 'bg-zinc-800' : 'hover:bg-zinc-900'
-            }`}
-        >
-            <Activity size={16} />
-            {activeJobs.length > 0 && (
-                <span className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-accent"/>
-            )}
-        </button>
-        {open && (
-            <div
-                className="absolute right-0 top-[42px] z-50 w-[280px] rounded-[10px] border border-zinc-800 bg-[#111113] p-3 shadow-xl">
-                <div className="mb-2 text-[12px] font-bold uppercase tracking-[0.3px] text-zinc-500">Running jobs</div>
-                {activeJobs.length === 0 && (
-                  <div className="mb-3 flex flex-col gap-2">
-                    <div className="text-[12.5px] text-zinc-600">No running jobs</div>
-                    <button
-                      disabled={!libraries?.length || scanAllMutation.isPending}
-                      onClick={() => scanAllMutation.mutate()}
-                      className="w-full cursor-pointer rounded-lg border border-zinc-800 py-[7px] text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40"
-                    >
-                      Scan all now
-                    </button>
-                  </div>
-                )}
-                {activeJobs.length > 0 && (
+      <button title="Jobs" onClick={() => setOpen((v) => !v)} className={iconButton(open)}>
+        <Activity size={16} />
+        {activeJobs.length > 0 && (
+          <span className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-accent glass:right-0.5 glass:top-0.5 glass:h-2 glass:w-2 glass:ring-2 glass:ring-zinc-950" />
+        )}
+      </button>
+      {open && (
+        <div className="absolute right-0 top-[42px] z-50 w-[280px] max-w-[calc(100vw-32px)] rounded-panel border border-line bg-surface p-3 shadow-xl glass:top-[46px] glass:w-[300px] glass:bg-surface/95 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_34px_110px_rgba(0,0,0,0.42)] glass:backdrop-blur-xl">
+          <div className="mb-2 text-[12px] font-bold uppercase tracking-[0.3px] text-zinc-500">Running jobs</div>
+          {activeJobs.length === 0 && (
+            <div className="mb-3 flex flex-col gap-2">
+              <div className="text-[12.5px] text-zinc-600">No running jobs</div>
+              <button
+                disabled={!libraries?.length || scanAllMutation.isPending}
+                onClick={() => scanAllMutation.mutate()}
+                className="w-full cursor-pointer rounded-lg border border-line py-[7px] text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40 glass:rounded-full"
+              >
+                Scan all now
+              </button>
+            </div>
+          )}
+          {activeJobs.length > 0 && (
             <div className="mb-3 flex flex-col gap-2">
               {activeJobs.map((job) => (
-                <div key={job.id} className="rounded-lg border border-zinc-800 bg-zinc-900 px-2.5 py-2">
+                <div
+                  key={job.id}
+                  className="rounded-lg border border-line bg-zinc-900 px-2.5 py-2 glass:rounded-xl glass:bg-white/[0.03] glass:px-3"
+                >
                   <div className="mb-0.5 flex items-center justify-between gap-2">
                     <div className="truncate text-[12.5px] font-semibold">{job.label}</div>
                     <span className={`shrink-0 text-[10px] font-bold uppercase tracking-[0.3px] ${STATUS_COLOR[job.status]}`}>
@@ -88,7 +118,7 @@ function JobsButton() {
               setOpen(false);
               navigate('/settings?tab=jobs');
             }}
-            className="w-full cursor-pointer rounded-lg bg-zinc-800 py-[7px] text-[12.5px] font-semibold text-zinc-100 hover:bg-zinc-700"
+            className="w-full cursor-pointer rounded-lg bg-zinc-800 py-[7px] text-[12.5px] font-semibold text-zinc-100 hover:bg-zinc-700 glass:rounded-full glass:bg-white/15 glass:py-2 glass:hover:bg-white/20"
           >
             View all jobs
           </button>
@@ -109,87 +139,119 @@ function LockButton() {
         await api.logout();
         queryClient.setQueryData(['auth-status'], { enabled: true, unlocked: false });
       }}
-      className="flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-900"
+      className={iconButton(false)}
     >
       <Lock size={16} />
     </button>
   );
 }
 
+/** Bottom tab bar that carries the navigation on phones, where the top bar has no room for it. */
+function MobileDock({ items }: { items: typeof NAV_ITEMS }) {
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 grid h-(--dock-h) border-t border-line bg-zinc-950/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden glass:inset-x-3 glass:bottom-[calc(10px+env(safe-area-inset-bottom))] glass:h-[58px] glass:rounded-[22px] glass:border glass:border-white/10 glass:bg-[#18181b]/70 glass:pb-0 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.5)] glass:backdrop-blur-2xl"
+      style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
+    >
+      {items.map(({ to, label, icon: Icon, tint }) => (
+        <NavLink
+          key={to}
+          to={to}
+          className={({ isActive }) =>
+            `flex flex-col items-center justify-center gap-1 text-[10.5px] font-semibold glass:gap-0.5 ${
+              isActive ? 'text-zinc-100 [&_.dock-icon]:text-accent glass:[&_.dock-tile]:ring-2 glass:[&_.dock-tile]:ring-white/40' : 'text-zinc-500'
+            }`
+          }
+        >
+          <Icon size={19} className="dock-icon glass:hidden" />
+          <IconTile tint={tint} className="dock-tile h-7 w-7">
+            <Icon size={15} strokeWidth={2.4} />
+          </IconTile>
+          {label}
+        </NavLink>
+      ))}
+    </nav>
+  );
+}
+
 export function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const barRef = useRef<HTMLDivElement>(null);
   const [searchTags, setSearchTags] = useState<string[]>([]);
   const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.settings, staleTime: 60_000 });
   const discoverEnabled = settings?.discover_enabled === '1';
+  const items = NAV_ITEMS.filter((item) => item.to !== '/discover' || discoverEnabled);
+
+  // The bar wraps onto a second row on narrow screens, so sticky toolbars and full-height panes
+  // read its real height from --nav-h instead of assuming 60px.
+  useLayoutEffect(() => {
+    const el = barRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      document.documentElement.style.setProperty('--nav-h', `${el.offsetHeight}px`);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
 
   const goToExplore = (tags: string[]) => {
     navigate(tags.length ? `/explore?tags=${tags.map(encodeURIComponent).join(',')}` : '/explore');
   };
 
   return (
-    <div className="sticky top-0 z-40 flex flex-wrap items-center gap-x-2 gap-y-2 border-b border-zinc-800 bg-zinc-950/75 px-4 py-2.5 backdrop-blur-xl sm:h-[60px] sm:flex-nowrap sm:gap-x-6 sm:px-5 sm:py-0">
-      <div className="flex shrink-0 cursor-pointer items-center gap-2" onClick={() => navigate('/')}>
-        <div className="flex h-7 w-7 items-center justify-center rounded-lg text-sm font-extrabold text-white">
-          <img src="/icon.png" alt="Sakuya" className="h-full w-full" />
+    <>
+      <div
+        ref={barRef}
+        className="sticky top-0 z-40 flex flex-wrap items-center gap-x-2 gap-y-2.5 border-b border-line bg-zinc-950/75 px-4 py-2.5 backdrop-blur-xl md:h-[60px] md:flex-nowrap md:gap-x-4 md:px-5 md:py-0 glass:border-white/[0.06] glass:bg-[#0b0b0e]/70 glass:backdrop-blur-2xl lg:glass:gap-x-5 lg:glass:px-6"
+      >
+        <div className="flex shrink-0 cursor-pointer items-center gap-2 glass:gap-2.5" onClick={() => navigate('/')}>
+          <img src="/icon.png" alt="Sakuya" className="h-7 w-7" />
+          <div className="text-[15px] font-bold tracking-tight md:hidden lg:block glass:font-display glass:text-[16px] glass:font-semibold">
+            Sakuya<span className="text-accent glass:hidden">.</span>
+          </div>
         </div>
-        <div className="hidden text-[15px] font-bold tracking-tight sm:block">
-          Sakuya<span className="text-accent">.</span>
+        <nav className="hidden items-center gap-1 md:flex glass:gap-1.5">
+          {items.map(({ to, label, icon: Icon, tint }) => (
+            <NavLink key={to} to={to} className={({ isActive }) => navPill(isActive)} title={label}>
+              <Icon size={15} className="xl:hidden glass:hidden" />
+              <IconTile tint={tint} className="h-[26px] w-[26px]">
+                <Icon size={14} strokeWidth={2.4} />
+              </IconTile>
+              <span className="hidden xl:inline">{label}</span>
+            </NavLink>
+          ))}
+        </nav>
+        <div className="order-last w-full md:order-none md:ml-2 md:w-auto md:min-w-0 md:max-w-[420px] md:flex-1 glass:md:ml-auto glass:md:max-w-[360px]">
+          <TagSearchInput
+            tags={searchTags}
+            onAddTag={(tag) => {
+              const next = [...searchTags, tag];
+              setSearchTags(next);
+              goToExplore(next);
+            }}
+            onRemoveTag={(tag) => {
+              const next = searchTags.filter((t) => t !== tag);
+              setSearchTags(next);
+              goToExplore(next);
+            }}
+            onFreeText={(q) => navigate(`/explore?q=${encodeURIComponent(q)}`)}
+            placeholder="Search tags, filenames, folders..."
+          />
         </div>
-      </div>
-      <div className="flex items-center gap-1">
-        <NavLink to="/" className={({ isActive }) => navPill(isActive)} title="Dashboard">
-          <Home size={15} className="sm:hidden" />
-          <span className="hidden sm:inline">Dashboard</span>
-        </NavLink>
-        <NavLink to="/explore" className={({ isActive }) => navPill(isActive)} title="Explore">
-          <LayoutGrid size={15} className="sm:hidden" />
-          <span className="hidden sm:inline">Explore</span>
-        </NavLink>
-        {discoverEnabled && (
-          <NavLink to="/discover" className={({ isActive }) => navPill(isActive)} title="Discover">
-            <Sparkles size={15} className="sm:hidden" />
-            <span className="hidden sm:inline">Discover</span>
-          </NavLink>
-        )}
-        <NavLink to="/boards" className={({ isActive }) => navPill(isActive)} title="Boards">
-          <Images size={15} className="sm:hidden" />
-          <span className="hidden sm:inline">Boards</span>
-        </NavLink>
-        <NavLink to="/downloader" className={({ isActive }) => navPill(isActive)} title="Downloader">
-          <Download size={15} className="sm:hidden" />
-          <span className="hidden sm:inline">Downloader</span>
-        </NavLink>
-      </div>
-      <div className="order-1 w-full sm:order-none sm:ml-2 sm:w-auto sm:max-w-[420px] sm:flex-1">
-        <TagSearchInput
-          tags={searchTags}
-          onAddTag={(tag) => {
-            const next = [...searchTags, tag];
-            setSearchTags(next);
-            goToExplore(next);
-          }}
-          onRemoveTag={(tag) => {
-            const next = searchTags.filter((t) => t !== tag);
-            setSearchTags(next);
-            goToExplore(next);
-          }}
-          onFreeText={(q) => navigate(`/explore?q=${encodeURIComponent(q)}`)}
-          placeholder="Search tags, filenames, folders..."
-        />
-      </div>
-      <div className="hidden sm:block sm:flex-1" />
-      <JobsButton />
-      <LockButton />
-        <button
+        <div className="ml-auto flex shrink-0 items-center gap-2 glass:gap-2.5 glass:md:ml-0">
+          <JobsButton />
+          <LockButton />
+          <button
             title="Settings"
             onClick={() => navigate('/settings')}
-            className={`flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 ${
-                location.pathname.startsWith('/settings') ? 'bg-zinc-800' : 'hover:bg-zinc-900'
-            }`}
-        >
+            className={iconButton(location.pathname.startsWith('/settings'))}
+          >
             <Settings size={16} />
-        </button>
-    </div>
+          </button>
+        </div>
+      </div>
+      <MobileDock items={items} />
+    </>
   );
 }
diff --git a/apps/web/src/components/ReleaseNotesDialog.tsx b/apps/web/src/components/ReleaseNotesDialog.tsx
index 841832a..e3076c7 100644
--- a/apps/web/src/components/ReleaseNotesDialog.tsx
+++ b/apps/web/src/components/ReleaseNotesDialog.tsx
@@ -31,10 +31,10 @@ export function ReleaseNotesDialog() {
         onClick={close}
       >
         <div
-          className="flex max-h-[85vh] w-full max-w-[760px] flex-col overflow-hidden rounded-2xl border border-zinc-800 bg-[#111113] shadow-[0_24px_64px_rgba(0,0,0,0.6)]"
+          className="flex max-h-[85vh] w-full max-w-[760px] flex-col overflow-hidden rounded-2xl border border-line bg-surface shadow-[0_24px_64px_rgba(0,0,0,0.6)]"
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="flex items-center gap-3.5 border-b border-zinc-800 bg-gradient-to-b from-accent/10 to-transparent px-7 py-6">
+          <div className="flex items-center gap-3.5 border-b border-line bg-gradient-to-b from-accent/10 to-transparent px-7 py-6">
             <div className="flex h-11 w-11 flex-none items-center justify-center rounded-full bg-accent/15">
               <PartyPopper size={22} className="text-accent" />
             </div>
@@ -54,13 +54,13 @@ export function ReleaseNotesDialog() {
               {unseen.map((r, i) => (
                 <div
                   key={r.version}
-                  className={`release-notes ${i > 0 ? 'mt-6 border-t border-zinc-800 pt-6' : ''}`}
+                  className={`release-notes ${i > 0 ? 'mt-6 border-t border-line pt-6' : ''}`}
                   dangerouslySetInnerHTML={{ __html: r.html }}
                 />
               ))}
             </div>
           </div>
-          <div className="flex justify-end border-t border-zinc-800 px-7 py-4">
+          <div className="flex justify-end border-t border-line px-7 py-4">
             <button
               onClick={close}
               className="cursor-pointer rounded-lg bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:opacity-90"
diff --git a/apps/web/src/components/SelectionBar.tsx b/apps/web/src/components/SelectionBar.tsx
index 3dc8f99..2ce00e7 100644
--- a/apps/web/src/components/SelectionBar.tsx
+++ b/apps/web/src/components/SelectionBar.tsx
@@ -31,8 +31,8 @@ const NEEDS_ROWS: Action[] = ['tags', 'rename', 'like', 'unlike', 'delete', 'ret
 function actionButton(danger?: boolean): string {
   return `flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-[7px] text-[12.5px] font-semibold ${
     danger
-      ? 'border-zinc-800 text-zinc-400 hover:border-rose-500/40 hover:text-rose-400'
-      : 'border-zinc-800 text-zinc-300 hover:border-zinc-700 hover:text-zinc-100'
+      ? 'border-line text-zinc-400 hover:border-rose-500/40 hover:text-rose-400'
+      : 'border-line text-zinc-300 hover:border-line-strong hover:text-zinc-100'
   }`;
 }
 
@@ -193,8 +193,8 @@ export function SelectionBar({
 
   return (
     <>
-      <div className="fixed inset-x-0 bottom-0 z-[60] flex justify-center px-4 pb-5">
-        <div className="fade-in flex max-w-full flex-wrap items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900/95 px-3 py-2.5 shadow-[0_8px_30px_rgba(0,0,0,0.6)] backdrop-blur">
+      <div className="fixed inset-x-0 bottom-(--dock-h) z-[60] flex justify-center px-4 pb-5">
+        <div className="fade-in flex max-w-full flex-wrap items-center gap-2 rounded-xl border border-line-strong bg-zinc-900/95 px-3 py-2.5 shadow-[0_8px_30px_rgba(0,0,0,0.6)] backdrop-blur">
           <span className="px-1 text-[12.5px] font-bold text-zinc-100">
             {ids.length} selected
           </span>
@@ -428,7 +428,7 @@ function LoadingDialog({ onCancel }: { onCancel: () => void }) {
       className="fade-in fixed inset-0 z-[95] flex items-center justify-center bg-zinc-950/80 p-6 backdrop-blur"
       onClick={onCancel}
     >
-      <div className="rounded-xl border border-zinc-800 bg-[#111113] px-6 py-5 text-[12.5px] text-zinc-400">
+      <div className="rounded-xl border border-line bg-surface px-6 py-5 text-[12.5px] text-zinc-400">
         Loading selection…
       </div>
     </div>
@@ -463,11 +463,11 @@ function BoardPicker({
       onClick={onCancel}
     >
       <div
-        className="flex max-h-[70vh] w-full max-w-[420px] flex-col rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="flex max-h-[70vh] w-full max-w-[420px] flex-col rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-3 text-[15px] font-bold">Add to board</div>
-        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-zinc-800 bg-zinc-900/40">
+        <div className="min-h-0 flex-1 overflow-y-auto rounded-lg border border-line bg-zinc-900/40">
           {boards.length === 0 && (
             <div className="px-3 py-3 text-[11.5px] text-zinc-600">No boards yet — create one below.</div>
           )}
@@ -475,7 +475,7 @@ function BoardPicker({
             <div
               key={board.id}
               onClick={() => onPick({ id: board.id, name: board.name })}
-              className="flex cursor-pointer items-center justify-between border-b border-zinc-800/60 px-3 py-2 last:border-b-0 hover:bg-white/5"
+              className="flex cursor-pointer items-center justify-between border-b border-line/60 px-3 py-2 last:border-b-0 hover:bg-white/5"
             >
               <span className="truncate text-[12.5px] font-semibold text-zinc-200">{board.name}</span>
               <span className="flex-none text-[11px] text-zinc-500">{board.itemCount}</span>
@@ -490,12 +490,12 @@ function BoardPicker({
               if (e.key === 'Enter' && newName.trim()) createMutation.mutate(newName.trim());
             }}
             placeholder="New board name"
-            className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-zinc-600"
+            className="flex-1 rounded-field border border-line bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-line-hover"
           />
           <button
             disabled={!newName.trim() || createMutation.isPending}
             onClick={() => createMutation.mutate(newName.trim())}
-            className="cursor-pointer rounded-[7px] bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             Create
           </button>
diff --git a/apps/web/src/components/TagSearchInput.tsx b/apps/web/src/components/TagSearchInput.tsx
index f2e9c9f..4b4ebd5 100644
--- a/apps/web/src/components/TagSearchInput.tsx
+++ b/apps/web/src/components/TagSearchInput.tsx
@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useQuery } from '@tanstack/react-query';
+import { Search } from 'lucide-react';
 import { api } from '../lib/api';
 import { useDebounce } from '../hooks/useDebounce';
 
@@ -125,9 +126,10 @@ export function TagSearchInput({
     <div className="relative w-full">
       <div
         ref={boxRef}
-        className="flex w-full flex-wrap items-center gap-1.5 rounded-lg border border-zinc-800 bg-zinc-900 px-2 py-1.5 focus-within:border-zinc-600"
+        className="flex w-full flex-wrap items-center gap-1.5 rounded-lg border border-line bg-zinc-900 px-2 py-1.5 focus-within:border-line-hover glass:min-h-[38px] glass:rounded-[19px] glass:bg-white/[0.04] glass:pl-3 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_8px_26px_rgba(24,24,27,0.05)] glass:transition-colors glass:focus-within:bg-white/[0.06]"
         onClick={() => inputRef.current?.focus()}
       >
+        <Search size={15} className="hidden shrink-0 text-zinc-500 glass:block" />
         {showChips &&
           tags.map((tag) => (
             <span
@@ -168,7 +170,7 @@ export function TagSearchInput({
         createPortal(
           <div
             style={{ top: anchor.top, left: anchor.left, width: anchor.width }}
-            className="fixed z-[97] overflow-hidden rounded-lg border border-zinc-600 bg-zinc-900 shadow-[0_8px_24px_rgba(0,0,0,0.5)]"
+            className="fixed z-[97] overflow-hidden rounded-lg border border-line-hover bg-zinc-900 shadow-[0_8px_24px_rgba(0,0,0,0.5)] glass:rounded-2xl glass:border-white/12 glass:bg-[#18181b]/95 glass:p-1 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_24px_64px_rgba(0,0,0,0.5)] glass:backdrop-blur-xl"
           >
             {visible.map((s, i) => (
               <div
@@ -178,8 +180,8 @@ export function TagSearchInput({
                   commit(s.name);
                 }}
                 onMouseEnter={() => setHighlight(i)}
-                className={`flex cursor-pointer items-center justify-between px-3 py-2 text-[12.5px] ${
-                  i === highlight ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-200'
+                className={`flex cursor-pointer items-center justify-between px-3 py-2 text-[12.5px] glass:rounded-xl ${
+                  i === highlight ? 'bg-zinc-800 text-zinc-100 glass:bg-white/10' : 'text-zinc-200'
                 }`}
               >
                 <span>{s.name}</span>
diff --git a/apps/web/src/components/TagSidebar.tsx b/apps/web/src/components/TagSidebar.tsx
index 8968d21..54ac4da 100644
--- a/apps/web/src/components/TagSidebar.tsx
+++ b/apps/web/src/components/TagSidebar.tsx
@@ -6,8 +6,10 @@ import { exploreQueryString } from '../hooks/useFilters';
 import type { FilterState, FilterActions } from '../hooks/useFilters';
 
 function rowStyle(active: boolean): string {
-  return `flex cursor-pointer items-center justify-between rounded-[7px] px-2.5 py-[7px] text-[12.5px] font-semibold ${
-    active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'
+  return `flex cursor-pointer items-center justify-between rounded-field px-2.5 py-[7px] text-[12.5px] font-semibold glass:rounded-full glass:px-3 ${
+    active
+      ? 'bg-zinc-800 text-zinc-100 glass:bg-white/10 glass:text-white'
+      : 'text-zinc-400 hover:text-zinc-200 glass:hover:bg-white/5'
   }`;
 }
 
@@ -54,7 +56,7 @@ export function TagSidebar({
   if (collapsed) {
     return (
       <button
-        className="sticky top-[60px] flex h-[calc(100vh-60px)] w-7 flex-none cursor-pointer items-start justify-center border-r border-zinc-800 pt-[18px] text-zinc-500 hover:text-zinc-300"
+        className="sticky top-(--nav-h) flex h-[calc(100dvh-var(--nav-h)-var(--dock-h))] w-7 flex-none cursor-pointer items-start justify-center border-r border-line pt-[18px] text-zinc-500 hover:text-zinc-300"
         onClick={onToggle}
       >
         <ChevronRight size={18} />
@@ -65,7 +67,7 @@ export function TagSidebar({
   return (
     <>
       <div className="fixed inset-0 z-40 bg-black/60 sm:hidden" onClick={onToggle} />
-      <div className="fixed inset-y-0 left-0 z-50 h-full w-[230px] overflow-y-auto border-r border-zinc-800 bg-zinc-950 px-3.5 py-[18px] sm:sticky sm:top-[60px] sm:z-auto sm:h-[calc(100vh-60px)] sm:flex-none sm:bg-transparent">
+      <div className="fixed inset-y-0 left-0 z-50 h-full w-[230px] overflow-y-auto border-r border-line bg-zinc-950 px-3.5 py-[18px] sm:sticky sm:top-(--nav-h) sm:z-auto sm:h-[calc(100dvh-var(--nav-h)-var(--dock-h))] sm:flex-none sm:bg-transparent">
       <div className="mb-2.5 flex items-center justify-between">
         <div className="text-[11px] font-bold tracking-[0.6px] text-zinc-500">LIBRARIES</div>
         <button className="cursor-pointer text-zinc-500 hover:text-zinc-300" onClick={onToggle}>
diff --git a/apps/web/src/components/Toast.tsx b/apps/web/src/components/Toast.tsx
index d171ad3..793929d 100644
--- a/apps/web/src/components/Toast.tsx
+++ b/apps/web/src/components/Toast.tsx
@@ -21,7 +21,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     <ToastContext.Provider value={showToast}>
       {children}
       {message && (
-        <div className="toast-in fixed bottom-6 right-6 z-[100] flex items-center gap-2.5 rounded-[10px] border border-zinc-600 bg-zinc-900 px-4 py-3 shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
+        <div className="toast-in fixed bottom-[calc(var(--dock-h)+24px)] right-6 z-[100] flex items-center gap-2.5 rounded-panel border border-line-hover bg-zinc-900 px-4 py-3 shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
           <Check size={16} className="text-green-500" />
           <span className="text-[13px] text-zinc-200">{message}</span>
         </div>
diff --git a/apps/web/src/components/UpdateToast.tsx b/apps/web/src/components/UpdateToast.tsx
index fdcf321..24e8790 100644
--- a/apps/web/src/components/UpdateToast.tsx
+++ b/apps/web/src/components/UpdateToast.tsx
@@ -42,7 +42,7 @@ export function UpdateToast() {
   };
 
   return (
-    <div className="toast-in fixed bottom-6 left-6 z-[100] flex items-center gap-3 rounded-[10px] border border-zinc-600 bg-zinc-900 px-4 py-3 shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
+    <div className="toast-in fixed bottom-[calc(var(--dock-h)+24px)] left-6 z-[100] flex items-center gap-3 rounded-panel border border-line-hover bg-zinc-900 px-4 py-3 shadow-[0_8px_24px_rgba(0,0,0,0.5)]">
       <CircleArrowUp size={16} className="flex-none text-accent" />
       <div className="text-[13px] text-zinc-200">
         Sakuya <span className="font-semibold">{latest}</span> is out —{' '}
diff --git a/apps/web/src/hooks/useUiStyle.ts b/apps/web/src/hooks/useUiStyle.ts
new file mode 100644
index 0000000..e4bbe44
--- /dev/null
+++ b/apps/web/src/hooks/useUiStyle.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import type { UiStyle } from '@sakuya/shared';
+import { api } from '../lib/api';
+
+// Mirrors the server setting so the right style paints before settings load (and on the login gate).
+const STORAGE_KEY = 'sakuya:ui-style';
+
+export function storedUiStyle(): UiStyle {
+  return localStorage.getItem(STORAGE_KEY) === 'classic' ? 'classic' : 'glass';
+}
+
+/** Sets `data-ui` on <html>, which switches the CSS tokens and every `glass:` utility. */
+export function applyUiStyle(style: UiStyle) {
+  document.documentElement.dataset.ui = style;
+  localStorage.setItem(STORAGE_KEY, style);
+}
+
+export function useUiStyle(): UiStyle {
+  const { data } = useQuery({ queryKey: ['settings'], queryFn: api.settings, staleTime: 60_000 });
+  return data?.ui_style ?? storedUiStyle();
+}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 9e04900..e33b7b7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,22 +1,101 @@
 @import 'tailwindcss';
 
+/* Utilities written as `glass:…` only apply under the Liquid Glass interface style. */
+@custom-variant glass (&:where([data-ui='glass'], [data-ui='glass'] *));
+
 :root {
   --accent: #8b5cf6;
+  /* Navbar height (measured at runtime) and the mobile dock's height, for sticky offsets. */
+  --nav-h: 60px;
+  --dock-h: 0px;
+}
+@media (max-width: 767px) {
+  :root {
+    --dock-h: calc(68px + env(safe-area-inset-bottom));
+  }
 }
 
 @theme inline {
   --color-accent: var(--accent);
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+
+/* Interface-style tokens. These values are the original look; [data-ui='glass'] swaps them. */
+@theme {
+  --color-line: #27272a;
+  --color-line-strong: #3f3f46;
+  --color-line-hover: #52525b;
+  --color-surface: #111113;
+  --color-bar: rgb(9 9 11 / 0.9);
+  --radius-btn: 7px;
+  --radius-field: 7px;
+  --radius-panel: 10px;
+}
+
+[data-ui='glass'] {
+  --color-line: rgb(255 255 255 / 0.08);
+  --color-line-strong: rgb(255 255 255 / 0.12);
+  --color-line-hover: rgb(255 255 255 / 0.2);
+  --color-surface: #131316;
+  --color-bar: rgb(11 11 14 / 0.8);
+  --radius-btn: 9999px;
+  --radius-field: 1.25rem;
+  --radius-panel: 1.5rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2.125rem;
+}
+
+html {
+  background: #09090b;
 }
 
 body {
   margin: 0;
+  min-height: 100vh;
+  padding-bottom: var(--dock-h);
   background: #09090b;
   color: #f4f4f5;
   font-family: 'Inter', sans-serif;
   font-variant-numeric: tabular-nums;
 }
 
+[data-ui='glass'] body {
+  background:
+    radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 544px),
+    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 420px),
+    linear-gradient(#0f0f14 0px, #09090b 320px);
+  background-color: #09090b;
+  background-repeat: no-repeat;
+  color: #fafafa;
+  -webkit-font-smoothing: antialiased;
+}
+
+[data-ui='glass'] :is(h1, h2, h3) {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* Frosted card surface with a top-edge highlight, as on apps.umbrel.com. */
+.glass-card {
+  border: 1px solid rgb(255 255 255 / 0.08);
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 18px 48px rgb(0 0 0 / 0.16);
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+.glass-card:hover {
+  border-color: rgb(255 255 255 / 0.14);
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
+}
+
 * {
   box-sizing: border-box;
   scrollbar-width: thin;
@@ -50,6 +129,10 @@ body {
   from { opacity: 0; }
   to { opacity: 1; }
 }
+@keyframes floaty {
+  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
+  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
+}
 @keyframes toastIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
@@ -58,6 +141,15 @@ body {
 .fade-in {
   animation: fadeIn 0.2s ease;
 }
+.floaty {
+  animation: floaty 6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .floaty {
+    animation: none;
+    transform: rotate(var(--r, 0deg));
+  }
+}
 .toast-in {
   animation: toastIn 0.2s ease;
 }
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index 5b0bc12..d1c4d3c 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -5,8 +5,11 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { App } from './App';
 import { ToastProvider } from './components/Toast';
 import { AuthProvider } from './hooks/useAuth';
+import { applyUiStyle, storedUiStyle } from './hooks/useUiStyle';
 import './index.css';
 
+applyUiStyle(storedUiStyle());
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/apps/web/src/routes/Boards.tsx b/apps/web/src/routes/Boards.tsx
index 6fae7be..f935d2a 100644
--- a/apps/web/src/routes/Boards.tsx
+++ b/apps/web/src/routes/Boards.tsx
@@ -33,7 +33,7 @@ export function Boards() {
 
   return (
     <div className="fade-in mx-auto max-w-[1400px] px-4 sm:px-8 pb-16 pt-7">
-      <h1 className="m-0 text-[22px] font-extrabold">Boards</h1>
+      <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Boards</h1>
       <div className="mb-5 mt-1 text-[13px] text-zinc-500">
         Your own collections — add any image or video to a board from its detail view.
       </div>
@@ -46,12 +46,12 @@ export function Boards() {
             if (e.key === 'Enter' && newName.trim()) createMutation.mutate();
           }}
           placeholder="New board name"
-          className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-zinc-600"
+          className="flex-1 rounded-field border border-line bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500 focus:border-line-hover"
         />
         <button
           disabled={!newName.trim() || createMutation.isPending}
           onClick={() => createMutation.mutate()}
-          className="cursor-pointer rounded-[7px] bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
+          className="cursor-pointer rounded-btn bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
         >
           Create
         </button>
@@ -63,7 +63,7 @@ export function Boards() {
         ))}
       </div>
       {boards && boards.length === 0 && (
-        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-zinc-800 py-16 text-zinc-500">
+        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-line py-16 text-zinc-500">
           <Images size={34} className="mb-2.5 text-zinc-700" />
           <div className="text-sm font-semibold text-zinc-400">No boards yet</div>
           <div className="mt-1 text-[12.5px]">Create one above, then add media to it from the viewer.</div>
@@ -102,7 +102,7 @@ function BoardCard({ board }: { board: BoardWithStats }) {
   return (
     <div className="group">
       <div
-        className="relative aspect-[16/10] w-full cursor-pointer overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
+        className="relative aspect-[16/10] w-full cursor-pointer overflow-hidden rounded-xl border border-line bg-zinc-900"
         onClick={() => navigate(`/boards/${board.id}`)}
       >
         {board.thumbMediaId ? (
@@ -127,7 +127,7 @@ function BoardCard({ board }: { board: BoardWithStats }) {
               else if (e.key === 'Escape') setRenaming(false);
             }}
             onBlur={() => setRenaming(false)}
-            className="min-w-0 flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-1.5 py-0.5 text-[13px] font-semibold text-zinc-100 outline-none focus:border-accent"
+            className="min-w-0 flex-1 rounded-md border border-line-strong bg-zinc-900 px-1.5 py-0.5 text-[13px] font-semibold text-zinc-100 outline-none focus:border-accent"
           />
         ) : (
           <span className="min-w-0 flex-1 truncate text-[13px] font-semibold text-zinc-100" title={board.name}>
@@ -188,13 +188,13 @@ export function BoardView() {
     <div className="fade-in">
       <div className="mx-auto max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold">{board?.name ?? '…'}</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">{board?.name ?? '…'}</h1>
           <span className="text-[13px] text-zinc-500">
             {media.total} item{media.total === 1 ? '' : 's'}
           </span>
         </div>
       </div>
-      <div className="sticky top-[60px] z-20 mt-3.5 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
         <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-3">
           <FilterToolbar filters={filters} actions={actions} selection={selection} />
         </div>
diff --git a/apps/web/src/routes/Dashboard.tsx b/apps/web/src/routes/Dashboard.tsx
index 919f648..174b2bf 100644
--- a/apps/web/src/routes/Dashboard.tsx
+++ b/apps/web/src/routes/Dashboard.tsx
@@ -1,71 +1,95 @@
-import { useState } from 'react';
+import { useState, type CSSProperties, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { Heart } from 'lucide-react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Heart, X } from 'lucide-react';
 import type { Media } from '@sakuya/shared';
 import { api, thumbUrl, libraryCoverUrl } from '../lib/api';
 import { WideCard } from '../components/MediaCard';
 import { MediaViewer } from '../components/MediaViewer';
+import { useToast } from '../components/Toast';
+import { useUiStyle } from '../hooks/useUiStyle';
 
 export function Dashboard() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const showToast = useToast();
+  const glass = useUiStyle() === 'glass';
   const { data } = useQuery({ queryKey: ['dashboard'], queryFn: api.dashboard });
+  const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.settings, staleTime: 60_000 });
   const [viewer, setViewer] = useState<{ items: Media[]; index: number } | null>(null);
 
+  const hideHeroMutation = useMutation({
+    mutationFn: () => api.patchSettings({ dashboard_hero: '0' }),
+    onSuccess: (next) => {
+      queryClient.setQueryData(['settings'], next);
+      showToast('Banner hidden. Bring it back in Settings → Appearance');
+    },
+    onError: (err: Error) => showToast(err.message),
+  });
+
+  const Tile = glass ? GlassTile : ClassicTile;
+  const libraryCover = (lib: NonNullable<typeof data>['libraries'][number]) =>
+    lib.customImagePath ? (
+      <img src={libraryCoverUrl(lib.id)} alt={lib.name} className="h-full w-full object-cover" />
+    ) : lib.thumbMediaId ? (
+      <img src={thumbUrl(lib.thumbMediaId)} alt={lib.name} className="h-full w-full object-cover" />
+    ) : (
+      <div className="flex h-full w-full items-center justify-center text-2xl text-zinc-700">◌</div>
+    );
+
   return (
-    <div className="fade-in mx-auto max-w-[1400px] px-4 sm:px-8 pb-16 pt-7">
+    <div className="fade-in mx-auto max-w-[1400px] px-4 pb-16 pt-7 sm:px-8 glass:pt-6">
+      {glass && settings && settings.dashboard_hero !== '0' && (
+        <Hero
+          floating={(data?.recentlyAdded ?? []).slice(0, FLOAT_SLOTS.length)}
+          totalItems={(data?.libraries ?? []).reduce((sum, lib) => sum + lib.itemCount, 0)}
+          libraryCount={data?.libraries.length ?? 0}
+          likedCount={data?.likedCount ?? 0}
+          onExplore={() => navigate('/explore')}
+          onLikes={() => navigate('/explore?liked=1')}
+          onClose={() => hideHeroMutation.mutate()}
+        />
+      )}
+
       <SectionHeader title="Your Libraries" />
-      <div className="mb-9 flex gap-4 overflow-x-auto pb-2">
-        <div className="w-[220px] flex-none cursor-pointer" onClick={() => navigate('/explore?liked=1')}>
-          <div className="relative h-[130px] w-[220px] overflow-hidden rounded-xl border border-zinc-800 bg-gradient-to-br from-rose-500/20 to-zinc-900">
-            <div className="flex h-full w-full items-center justify-center text-rose-500/80">
-              <Heart size={56} fill="currentColor" strokeWidth={1.5} />
+      <div className="mb-9 flex gap-4 overflow-x-auto pb-2 glass:-mx-1 glass:mb-10 glass:gap-3 glass:px-1 glass:pb-3">
+        <Tile
+          title="Likes"
+          subtitle="Media you hearted"
+          count={data?.likedCount ?? 0}
+          liked
+          onClick={() => navigate('/explore?liked=1')}
+          cover={
+            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-rose-500/20 to-zinc-900 text-rose-500/80 glass:from-rose-400 glass:via-pink-500 glass:to-fuchsia-700 glass:text-white/90">
+              <Heart size={glass ? 48 : 56} fill="currentColor" strokeWidth={1.5} />
             </div>
-              <div className="absolute left-2 top-2 flex items-center gap-1 rounded-md bg-rose-500/80 px-[7px] py-0.5 text-[10px] font-bold tracking-[0.4px] text-white backdrop-blur">
-                <Heart size={12} fill="currentColor" />
-                LIKES
-              </div>
-              <div
-                  className="absolute right-2 top-2 rounded-md bg-black/60 px-[7px] py-0.5 text-[10px] font-semibold tracking-[0.4px] text-zinc-200 backdrop-blur">
-                  {data?.likedCount ?? 0} ITEMS
-              </div>
-          </div>
-            <div className="mt-2 text-[13px] font-semibold text-zinc-100">Likes</div>
-            <div className="mt-px text-[11px] text-zinc-500">Media you hearted</div>
-        </div>
+          }
+        />
         {(data?.libraries ?? []).map((lib) => (
-          <div key={lib.id} className="w-[220px] flex-none cursor-pointer" onClick={() => navigate(`/library/${lib.id}`)}>
-            <div className="relative h-[130px] w-[220px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900">
-              {lib.customImagePath ? (
-                <img src={libraryCoverUrl(lib.id)} alt={lib.name} className="h-full w-full object-cover" />
-              ) : lib.thumbMediaId ? (
-                <img src={thumbUrl(lib.thumbMediaId)} alt={lib.name} className="h-full w-full object-cover" />
-              ) : (
-                <div className="flex h-full w-full items-center justify-center text-2xl text-zinc-700">◌</div>
-              )}
-              <div className="absolute right-2 top-2 rounded-md bg-black/60 px-[7px] py-0.5 text-[10px] font-semibold tracking-[0.4px] text-zinc-200 backdrop-blur">
-                {lib.itemCount} ITEMS
-              </div>
-            </div>
-            <div className="mt-2 text-[13px] font-semibold text-zinc-100">{lib.name}</div>
-            <div className="mt-px text-[11px] text-zinc-500 capitalize">{lib.type} Library</div>
-          </div>
+          <Tile
+            key={lib.id}
+            title={lib.name}
+            subtitle={`${lib.type.charAt(0).toUpperCase()}${lib.type.slice(1)} Library`}
+            count={lib.itemCount}
+            onClick={() => navigate(`/library/${lib.id}`)}
+            cover={libraryCover(lib)}
+          />
         ))}
         {data && data.libraries.length === 0 && (
-          <div className="flex h-[130px] w-full flex-col items-center justify-center rounded-xl border border-dashed border-zinc-800 text-zinc-500">
+          <div className="flex h-[130px] w-full flex-col items-center justify-center rounded-xl border border-dashed border-line text-zinc-500 glass:h-[190px]">
             <div className="text-sm font-semibold">No libraries yet</div>
             <div
-              className="mt-1 cursor-pointer text-[12.5px] font-semibold text-accent"
+              className="mt-1 cursor-pointer text-[12.5px] font-semibold text-accent glass:mt-3 glass:rounded-full glass:bg-white/15 glass:px-4 glass:py-2 glass:text-[13px] glass:text-zinc-100 glass:hover:bg-white/20"
               onClick={() => navigate('/settings')}
             >
-              Create one in Settings →
+              Create one in Settings{glass ? '' : ' →'}
             </div>
           </div>
         )}
       </div>
 
       <SectionHeader title="Continue Watching" onSeeAll={() => navigate('/explore?type=video')} />
-      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2">
+      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2 glass:mb-10 glass:gap-4 glass:pb-3">
         {(data?.continueWatching ?? []).map((item, i) => (
           <WideCard
             key={item.id}
@@ -80,7 +104,7 @@ export function Dashboard() {
       </div>
 
       <SectionHeader title="Recently Viewed" onSeeAll={() => navigate('/explore')} />
-      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2">
+      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2 glass:mb-10 glass:gap-4 glass:pb-3">
         {(data?.recentlyViewed ?? []).map((item, i) => (
           <WideCard
             key={item.id}
@@ -95,7 +119,7 @@ export function Dashboard() {
       </div>
 
       <SectionHeader title="Recently Added" onSeeAll={() => navigate('/explore')} />
-      <div className="flex gap-3.5 overflow-x-auto pb-2">
+      <div className="flex gap-3.5 overflow-x-auto pb-2 glass:gap-4 glass:pb-3">
         {(data?.recentlyAdded ?? []).map((item, i) => (
           <WideCard key={item.id} item={item} onClick={() => setViewer({ items: data!.recentlyAdded, index: i })} />
         ))}
@@ -118,13 +142,164 @@ export function Dashboard() {
 
 function SectionHeader({ title, onSeeAll }: { title: string; onSeeAll?: () => void }) {
   return (
-    <div className="mb-3.5 flex items-baseline justify-between">
-      <h2 className="m-0 text-lg font-bold">{title}</h2>
+    <div className="mb-3.5 flex items-baseline justify-between glass:mb-4 glass:items-center">
+      <h2 className="m-0 text-lg font-bold glass:text-[22px] sm:glass:text-[26px]">{title}</h2>
       {onSeeAll && (
-        <div className="cursor-pointer text-xs font-semibold text-accent" onClick={onSeeAll}>
-          See all →
+        <div
+          className="cursor-pointer text-xs font-semibold text-accent glass:rounded-full glass:bg-white/10 glass:px-4 glass:py-1.5 glass:text-[13px] glass:font-medium glass:text-zinc-100 glass:transition-colors glass:hover:bg-white/15"
+          onClick={onSeeAll}
+        >
+          See all<span className="glass:hidden"> →</span>
         </div>
       )}
     </div>
   );
 }
+
+interface TileProps {
+  title: string;
+  subtitle: string;
+  count: number;
+  cover: ReactNode;
+  onClick: () => void;
+  /** The Likes tile, which gets its own badge in the original style. */
+  liked?: boolean;
+}
+
+function ClassicTile({ title, subtitle, count, cover, onClick, liked }: TileProps) {
+  return (
+    <div className="w-[220px] flex-none cursor-pointer" onClick={onClick}>
+      <div className="relative h-[130px] w-[220px] overflow-hidden rounded-xl border border-line bg-zinc-900">
+        {cover}
+        {liked && (
+          <div className="absolute left-2 top-2 flex items-center gap-1 rounded-md bg-rose-500/80 px-[7px] py-0.5 text-[10px] font-bold tracking-[0.4px] text-white backdrop-blur">
+            <Heart size={12} fill="currentColor" />
+            LIKES
+          </div>
+        )}
+        <div className="absolute right-2 top-2 rounded-md bg-black/60 px-[7px] py-0.5 text-[10px] font-semibold tracking-[0.4px] text-zinc-200 backdrop-blur">
+          {count} ITEMS
+        </div>
+      </div>
+      <div className="mt-2 text-[13px] font-semibold text-zinc-100">{title}</div>
+      <div className="mt-px text-[11px] text-zinc-500">{subtitle}</div>
+    </div>
+  );
+}
+
+function GlassTile({ title, subtitle, count, cover, onClick }: TileProps) {
+  return (
+    <div className="glass-card w-[200px] flex-none cursor-pointer rounded-xl p-3" onClick={onClick}>
+      <div className="relative h-[112px] overflow-hidden rounded-[14px] bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]">
+        {cover}
+        <div className="absolute right-2 top-2 rounded-full bg-black/55 px-2 py-0.5 text-[10.5px] font-semibold text-zinc-100 backdrop-blur">
+          {count.toLocaleString()}
+        </div>
+      </div>
+      <div className="mt-3 truncate text-center font-display text-[15px] font-semibold text-zinc-50">{title}</div>
+      <div className="mt-0.5 text-center text-[12px] text-zinc-500">{subtitle}</div>
+    </div>
+  );
+}
+
+// Tilted thumbnails scattered around the hero, echoing the floating app icons on apps.umbrel.com.
+const FLOAT_SLOTS = [
+  { className: 'left-[4%] top-[-20px] h-[74px] w-[74px] opacity-35 blur-[1.5px]', r: '-14deg', delay: '0s' },
+  { className: 'left-[40%] bottom-[-28px] h-[64px] w-[64px] opacity-30 blur-[2px]', r: '12deg', delay: '-2s' },
+  { className: 'right-[5%] top-[24px] h-[84px] w-[84px] opacity-70', r: '10deg', delay: '-1s' },
+  { className: 'right-[3%] bottom-[-16px] h-[92px] w-[92px] opacity-80', r: '-8deg', delay: '-3s' },
+  { className: 'right-[34%] top-[-24px] h-[58px] w-[58px] opacity-45 blur-[1px]', r: '-6deg', delay: '-4s' },
+  { className: 'right-[38%] bottom-[18px] h-[46px] w-[46px] opacity-25 blur-[2px]', r: '18deg', delay: '-5s' },
+];
+
+function Hero({
+  floating,
+  totalItems,
+  libraryCount,
+  likedCount,
+  onExplore,
+  onLikes,
+  onClose,
+}: {
+  floating: Media[];
+  totalItems: number;
+  libraryCount: number;
+  likedCount: number;
+  onExplore: () => void;
+  onLikes: () => void;
+  onClose: () => void;
+}) {
+  return (
+    <div className="relative mb-10 overflow-hidden rounded-3xl border border-white/[0.06] bg-black shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_34px_110px_rgba(0,0,0,0.42)] sm:mb-12">
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(circle at 76% 50%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 340px)',
+        }}
+      />
+      {floating.map((item, i) => {
+        const slot = FLOAT_SLOTS[i];
+        return (
+          <div
+            key={item.id}
+            className={`floaty pointer-events-none absolute hidden overflow-hidden rounded-[22%] border border-white/15 shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_20px_40px_rgba(0,0,0,0.5)] md:block ${slot.className}`}
+            style={{ '--r': slot.r, animationDelay: slot.delay } as CSSProperties}
+          >
+            <img src={thumbUrl(item.id)} alt="" className="h-full w-full object-cover" />
+          </div>
+        );
+      })}
+      <button
+        title="Hide banner"
+        aria-label="Hide banner"
+        onClick={onClose}
+        className="absolute right-3 top-3 z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/10 bg-black/40 text-zinc-300 backdrop-blur transition-colors hover:bg-white/15 hover:text-white"
+      >
+        <X size={15} />
+      </button>
+      <div className="relative flex min-h-[260px] items-center gap-8 px-6 py-9 sm:min-h-[300px] sm:px-12 sm:py-10">
+        <div className="relative z-10 max-w-[620px]">
+          <h1 className="m-0 text-[30px] leading-[1.05] text-white sm:text-[50px]">
+            Your whole collection.
+            <br />
+            Tagged by itself.
+          </h1>
+          <p className="mb-0 mt-4 max-w-[480px] text-[14.5px] leading-relaxed text-zinc-300 sm:text-[16px]">
+            {totalItems.toLocaleString()} items across {libraryCount} {libraryCount === 1 ? 'library' : 'libraries'} and{' '}
+            {likedCount.toLocaleString()} {likedCount === 1 ? 'favorite' : 'favorites'}. Searchable, private, and all
+            yours.
+          </p>
+          <div className="mt-6 flex flex-wrap gap-2.5">
+            <button
+              onClick={onExplore}
+              className="cursor-pointer rounded-full bg-white px-5 py-2.5 text-[14px] font-semibold text-zinc-950 transition-transform hover:scale-[1.03]"
+            >
+              Explore library
+            </button>
+            <button
+              onClick={onLikes}
+              className="cursor-pointer rounded-full bg-white/15 px-5 py-2.5 text-[14px] font-semibold text-white backdrop-blur transition-colors hover:bg-white/20"
+            >
+              View likes
+            </button>
+          </div>
+        </div>
+        <div className="ml-auto hidden shrink-0 pr-[10%] lg:block">
+          <div
+            className="floaty grid h-[168px] w-[168px] place-items-center rounded-[26%] border border-white/25 shadow-[inset_0_2px_0_rgba(255,255,255,0.35),inset_0_-8px_24px_rgba(0,0,0,0.25),0_0_80px_color-mix(in_srgb,var(--accent)_55%,transparent),0_30px_60px_rgba(0,0,0,0.5)]"
+            style={
+              {
+                background:
+                  'linear-gradient(145deg, color-mix(in srgb, var(--accent) 85%, white), color-mix(in srgb, var(--accent) 65%, black))',
+                '--r': '-6deg',
+              } as CSSProperties
+            }
+          >
+            <img src="/icon.png" alt="" className="h-[92px] w-[92px] drop-shadow-[0_6px_16px_rgba(0,0,0,0.35)]" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/Discover.tsx b/apps/web/src/routes/Discover.tsx
index 92af737..2e92226 100644
--- a/apps/web/src/routes/Discover.tsx
+++ b/apps/web/src/routes/Discover.tsx
@@ -104,7 +104,7 @@ export function Discover() {
     <div className="fade-in">
       <div className="max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold">Discover</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Discover</h1>
           <span className="text-[13px] text-zinc-500">
             picked from {feed.total} item{feed.total === 1 ? '' : 's'}
           </span>
@@ -113,9 +113,9 @@ export function Discover() {
           Built from what you like, watch and linger on. Cards show the tag that earned them a spot.
         </div>
       </div>
-      <div className="sticky top-[60px] z-20 mt-3.5 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
         <div className="flex flex-wrap items-center gap-4 px-4 sm:px-8 py-3">
-          <div className="flex rounded-lg border border-zinc-800 bg-zinc-900 p-0.5">
+          <div className="flex rounded-lg border border-line bg-zinc-900 p-0.5">
             {(['all', 'image', 'video'] as const).map((t) => (
               <div
                 key={t}
@@ -161,7 +161,7 @@ export function Discover() {
           </button>
           <button
             onClick={() => update((p) => p.set('seed', String(randomSeed())))}
-            className="cursor-pointer rounded-lg border border-zinc-800 px-3 py-[7px] text-[13px] font-semibold text-zinc-400 hover:text-zinc-200"
+            className="cursor-pointer rounded-lg border border-line px-3 py-[7px] text-[13px] font-semibold text-zinc-400 hover:text-zinc-200"
           >
             Reshuffle
           </button>
@@ -169,7 +169,7 @@ export function Discover() {
             <button
               onClick={selection.enter}
               title="Select multiple files for bulk actions"
-              className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-zinc-800 px-3 py-[7px] text-[13px] font-semibold text-zinc-400 hover:text-zinc-200"
+              className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-line px-3 py-[7px] text-[13px] font-semibold text-zinc-400 hover:text-zinc-200"
             >
               <ListChecks size={16} />
               Select
diff --git a/apps/web/src/routes/Explore.tsx b/apps/web/src/routes/Explore.tsx
index b905166..6fe2a36 100644
--- a/apps/web/src/routes/Explore.tsx
+++ b/apps/web/src/routes/Explore.tsx
@@ -59,13 +59,13 @@ export function Explore() {
       <div className="min-w-0 flex-1">
         <div className="max-w-[1400px] px-4 sm:px-8 pt-6">
           <div className="mb-1 flex items-baseline gap-3">
-            <h1 className="m-0 text-[22px] font-extrabold">Explore</h1>
+            <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Explore</h1>
             <span className="text-[13px] text-zinc-500">
               {media.total} item{media.total === 1 ? '' : 's'}
             </span>
           </div>
         </div>
-        <div className="sticky top-[60px] z-20 mt-3.5 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
+        <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
           <div className="px-4 sm:px-8 py-3">
             <FilterToolbar filters={filters} actions={actions} selection={selection} />
           </div>
diff --git a/apps/web/src/routes/LibraryView.tsx b/apps/web/src/routes/LibraryView.tsx
index 1f61663..349a789 100644
--- a/apps/web/src/routes/LibraryView.tsx
+++ b/apps/web/src/routes/LibraryView.tsx
@@ -28,13 +28,13 @@ export function LibraryView() {
     <div className="fade-in">
       <div className="mx-auto max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold">{library?.name ?? '…'}</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">{library?.name ?? '…'}</h1>
           <span className="text-[13px] text-zinc-500">
             {media.total} item{media.total === 1 ? '' : 's'}
           </span>
         </div>
       </div>
-      <div className="sticky top-[60px] z-20 mt-3.5 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
         <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-3">
           <FilterToolbar filters={filters} actions={actions} selection={selection} />
         </div>
diff --git a/apps/web/src/routes/downloader/DownloaderConsole.tsx b/apps/web/src/routes/downloader/DownloaderConsole.tsx
index 0e98406..c95ee20 100644
--- a/apps/web/src/routes/downloader/DownloaderConsole.tsx
+++ b/apps/web/src/routes/downloader/DownloaderConsole.tsx
@@ -76,7 +76,7 @@ export function DownloaderConsole() {
   };
 
   return (
-    <div className="rounded-xl border border-zinc-800 bg-[#111113] p-4">
+    <div className="rounded-xl border border-line bg-surface p-4">
       <div className="mb-3 flex items-center justify-between">
         <div className="text-[13.5px] font-bold">gallery-dl console</div>
         <div className="flex items-center gap-2">
@@ -86,7 +86,7 @@ export function DownloaderConsole() {
           {running && (
             <button
               onClick={() => stopMutation.mutate()}
-              className="flex cursor-pointer items-center gap-1 rounded-[7px] border border-zinc-800 px-2.5 py-1 text-[11.5px] text-zinc-400 hover:text-red-400"
+              className="flex cursor-pointer items-center gap-1 rounded-field border border-line px-2.5 py-1 text-[11.5px] text-zinc-400 hover:text-red-400"
             >
               <Square size={12} /> Stop
             </button>
@@ -102,7 +102,7 @@ export function DownloaderConsole() {
       </div>
       <pre
         ref={outputRef}
-        className="mb-3 h-[360px] overflow-y-auto whitespace-pre-wrap break-all rounded-[7px] border border-zinc-800 bg-black/40 p-3 font-mono text-[12px] leading-relaxed text-zinc-300"
+        className="mb-3 h-[360px] overflow-y-auto whitespace-pre-wrap break-all rounded-field border border-line bg-black/40 p-3 font-mono text-[12px] leading-relaxed text-zinc-300"
       >
         {buffer || 'No output yet.'}
       </pre>
@@ -115,13 +115,13 @@ export function DownloaderConsole() {
             if (e.key === 'Enter') submit();
           }}
           placeholder={running ? 'Type a response…' : 'e.g. oauth:pixiv'}
-          className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
+          className="flex-1 rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
         />
         {!running && (
           <button
             onClick={submit}
             disabled={!input.trim() || startMutation.isPending}
-            className="flex cursor-pointer items-center gap-1.5 rounded-[7px] bg-accent px-3.5 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="flex cursor-pointer items-center gap-1.5 rounded-field bg-accent px-3.5 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             <Play size={13} /> Run
           </button>
@@ -130,7 +130,7 @@ export function DownloaderConsole() {
           onClick={sendAsInput}
           disabled={!input || inputMutation.isPending}
           title="Send this text straight to the running process's stdin — never runs it as a new gallery-dl command"
-          className="flex cursor-pointer items-center gap-1.5 rounded-[7px] border border-zinc-800 px-3.5 py-[7px] text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+          className="flex cursor-pointer items-center gap-1.5 rounded-field border border-line px-3.5 py-[7px] text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
         >
           <CornerDownLeft size={13} /> Send as input
         </button>
diff --git a/apps/web/src/routes/downloader/DownloaderPage.tsx b/apps/web/src/routes/downloader/DownloaderPage.tsx
index 8a26ea6..bf5ef42 100644
--- a/apps/web/src/routes/downloader/DownloaderPage.tsx
+++ b/apps/web/src/routes/downloader/DownloaderPage.tsx
@@ -137,7 +137,7 @@ export function DownloaderPage() {
               const v = Math.min(8, Math.max(1, Number(e.target.value) || 2));
               concurrencyMutation.mutate(v);
             }}
-            className="w-16 rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-1.5 text-[13px] text-zinc-100 outline-none"
+            className="w-16 rounded-field border border-line bg-zinc-900 px-2 py-1.5 text-[13px] text-zinc-100 outline-none"
           />
         </div>
       </div>
@@ -153,19 +153,19 @@ export function DownloaderPage() {
           <button
             disabled={!!installJob || installMutation.isPending}
             onClick={() => installMutation.mutate()}
-            className="cursor-pointer rounded-[7px] bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             {installJob ? 'Installing…' : 'Install'}
           </button>
         </div>
       )}
 
-      <div className="mb-6 flex gap-1 rounded-[9px] border border-zinc-800 bg-zinc-900 p-1">
+      <div className="mb-6 flex gap-1 rounded-panel border border-line bg-zinc-900 p-1">
         {(['downloads', 'console'] as const).map((t) => (
           <button
             key={t}
             onClick={() => setTab(t)}
-            className={`flex-1 cursor-pointer rounded-[7px] py-1.5 text-[12.5px] font-semibold capitalize transition-colors ${
+            className={`flex-1 cursor-pointer rounded-btn py-1.5 text-[12.5px] font-semibold capitalize transition-colors ${
               tab === t ? 'bg-accent text-white' : 'text-zinc-500 hover:text-zinc-300'
             }`}
           >
@@ -178,14 +178,14 @@ export function DownloaderPage() {
 
       {tab === 'downloads' && (
         <>
-      <div className="mb-6 rounded-xl border border-zinc-800 bg-[#111113] p-4">
+      <div className="mb-6 rounded-xl border border-line bg-surface p-4">
         <div className="mb-3 text-[13.5px] font-bold">New download</div>
         <textarea
           value={urlsText}
           onChange={(e) => setUrlsText(e.target.value)}
           placeholder="One URL per line…"
           rows={4}
-          className="mb-3 w-full resize-y rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2 font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
+          className="mb-3 w-full resize-y rounded-field border border-line bg-zinc-900 px-3 py-2 font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
         />
         <div className="mb-3 grid grid-cols-1 gap-2.5 sm:grid-cols-2">
           <div>
@@ -199,7 +199,7 @@ export function DownloaderPage() {
                 const lib = libraries?.find((l) => l.id === id);
                 if (lib?.folders[0]) setFolderPath(lib.folders[0].path);
               }}
-              className="w-full rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] text-[13px] text-zinc-100 outline-none disabled:opacity-60"
+              className="w-full rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] text-[13px] text-zinc-100 outline-none disabled:opacity-60"
             >
               <option value="">Select a library…</option>
               {(libraries ?? []).map((lib) => (
@@ -221,7 +221,7 @@ export function DownloaderPage() {
               value={folderPath}
               onChange={(e) => setFolderPath(e.target.value)}
               placeholder="/absolute/path/to/folder"
-              className="w-full rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
+              className="w-full rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
             />
           </div>
         </div>
@@ -232,7 +232,7 @@ export function DownloaderPage() {
               <select
                 value={cookieFileId}
                 onChange={(e) => setCookieFileId(e.target.value ? Number(e.target.value) : '')}
-                className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] text-[13px] text-zinc-100 outline-none"
+                className="flex-1 rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] text-[13px] text-zinc-100 outline-none"
               >
                 <option value="">None</option>
                 {(cookies ?? []).map((c) => (
@@ -255,7 +255,7 @@ export function DownloaderPage() {
               <button
                 onClick={() => cookieInputRef.current?.click()}
                 title="Upload cookie file"
-                className="cursor-pointer rounded-[7px] border border-zinc-800 px-2.5 py-[7px] text-zinc-400 hover:text-zinc-200"
+                className="cursor-pointer rounded-btn border border-line px-2.5 py-[7px] text-zinc-400 hover:text-zinc-200"
               >
                 <UploadIcon size={14} />
               </button>
@@ -263,7 +263,7 @@ export function DownloaderPage() {
                 disabled={cookieFileId === '' || deleteCookieMutation.isPending}
                 onClick={() => cookieFileId !== '' && deleteCookieMutation.mutate(Number(cookieFileId))}
                 title="Delete selected cookie file"
-                className="cursor-pointer rounded-[7px] border border-zinc-800 px-2.5 py-[7px] text-zinc-400 hover:text-red-400 disabled:opacity-40"
+                className="cursor-pointer rounded-btn border border-line px-2.5 py-[7px] text-zinc-400 hover:text-red-400 disabled:opacity-40"
               >
                 <X size={14} />
               </button>
@@ -275,7 +275,7 @@ export function DownloaderPage() {
               value={extraArgs}
               onChange={(e) => setExtraArgs(e.target.value)}
               placeholder="e.g. --range 1-20 --write-metadata"
-              className="w-full rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
+              className="w-full rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
             />
           </div>
         </div>
@@ -286,7 +286,7 @@ export function DownloaderPage() {
           <button
             disabled={!canSubmit || createBatchMutation.isPending || !status?.installed}
             onClick={() => createBatchMutation.mutate()}
-            className="flex cursor-pointer items-center gap-1.5 rounded-[7px] bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="flex cursor-pointer items-center gap-1.5 rounded-field bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             <Download size={14} /> Start download
           </button>
@@ -368,7 +368,7 @@ function ItemRow({ item }: { item: DownloadItem }) {
   });
 
   return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900">
+    <div className="rounded-lg border border-line bg-zinc-900">
       <div className="flex items-center gap-2.5 px-3 py-2">
         <button onClick={() => setExpanded((v) => !v)} className="cursor-pointer text-zinc-500 hover:text-zinc-300">
           {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
@@ -412,7 +412,7 @@ function ItemRow({ item }: { item: DownloadItem }) {
         </div>
       </div>
       {expanded && (
-        <div className="max-h-[200px] overflow-y-auto border-t border-zinc-800 bg-black/30 px-3 py-2 font-mono text-[11px] text-zinc-500">
+        <div className="max-h-[200px] overflow-y-auto border-t border-line bg-black/30 px-3 py-2 font-mono text-[11px] text-zinc-500">
           {merged.length === 0 ? (
             <div className="text-zinc-700">No log output yet.</div>
           ) : (
@@ -458,7 +458,7 @@ function RemoveItemModal({
       onClick={onCancel}
     >
       <div
-        className="w-full max-w-[380px] rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="w-full max-w-[380px] rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-2 text-[15px] font-bold">Remove download</div>
@@ -468,19 +468,19 @@ function RemoveItemModal({
         <div className="flex justify-end gap-2">
           <button
             onClick={onCancel}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
+            className="cursor-pointer rounded-btn border border-line px-3.5 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100"
           >
             Cancel
           </button>
           <button
             onClick={onKeep}
-            className="cursor-pointer rounded-[7px] bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90"
+            className="cursor-pointer rounded-btn bg-accent px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:opacity-90"
           >
             Keep files
           </button>
           <button
             onClick={onDelete}
-            className="cursor-pointer rounded-[7px] bg-rose-600 px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:bg-rose-500"
+            className="cursor-pointer rounded-btn bg-rose-600 px-3.5 py-1.5 text-[12.5px] font-semibold text-white hover:bg-rose-500"
           >
             Delete files
           </button>
diff --git a/apps/web/src/routes/settings/DuplicatesTab.tsx b/apps/web/src/routes/settings/DuplicatesTab.tsx
index b309569..453898f 100644
--- a/apps/web/src/routes/settings/DuplicatesTab.tsx
+++ b/apps/web/src/routes/settings/DuplicatesTab.tsx
@@ -64,7 +64,7 @@ export function DuplicatesTab() {
     <div>
       <TabHeader title="Duplicates" subtitle="Find exact duplicate files and clean them up." />
 
-      <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-3.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
             <div className="text-[13.5px] font-bold">Detect duplicates</div>
@@ -79,7 +79,7 @@ export function DuplicatesTab() {
           <button
             disabled={scanMutation.isPending || isFetching}
             onClick={() => scanMutation.mutate()}
-            className="shrink-0 cursor-pointer rounded-[7px] bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="shrink-0 cursor-pointer rounded-btn bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             {scanMutation.isPending || isFetching ? 'Scanning…' : scanned ? 'Rescan' : 'Scan for duplicates'}
           </button>
@@ -88,18 +88,18 @@ export function DuplicatesTab() {
 
       {scanned && groups.length > 0 && (
         <>
-          <div className="mb-3.5 flex items-center justify-between gap-3 rounded-xl border border-zinc-800 bg-[#111113] p-[14px]">
+          <div className="mb-3.5 flex items-center justify-between gap-3 rounded-xl border border-line bg-surface p-[14px]">
             <div className="flex items-center gap-2">
               <button
                 onClick={autoSelect}
-                className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:border-zinc-700 hover:text-zinc-100"
+                className="cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:border-line-strong hover:text-zinc-100"
               >
                 Select all but oldest in each group
               </button>
               {selected.size > 0 && (
                 <button
                   onClick={() => setSelected(new Set())}
-                  className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-zinc-400 hover:text-zinc-200"
+                  className="cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-zinc-400 hover:text-zinc-200"
                 >
                   Clear selection
                 </button>
@@ -108,7 +108,7 @@ export function DuplicatesTab() {
             <button
               disabled={selected.size === 0 || deleteMutation.isPending}
               onClick={() => setShowConfirm(true)}
-              className="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-[7px] bg-rose-600/90 px-3.5 py-1.5 text-[12px] font-semibold text-white hover:bg-rose-600 disabled:opacity-40"
+              className="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-field bg-rose-600/90 px-3.5 py-1.5 text-[12px] font-semibold text-white hover:bg-rose-600 disabled:opacity-40"
             >
               <Trash2 size={14} />
               Delete selected {selected.size > 0 ? `(${selected.size} · ${formatBytes(selectedBytes)})` : ''}
@@ -150,7 +150,7 @@ function DuplicateGroupCard({
   onToggle: (id: number) => void;
 }) {
   return (
-    <div className="rounded-xl border border-zinc-800 bg-[#111113] p-[14px]">
+    <div className="rounded-xl border border-line bg-surface p-[14px]">
       <div className="mb-2.5 text-[12px] font-semibold text-zinc-400">
         {group.items.length} copies · {formatBytes(group.wastedBytes)} wasted
       </div>
@@ -159,7 +159,7 @@ function DuplicateGroupCard({
           <label
             key={m.id}
             className={`flex w-[140px] cursor-pointer flex-col gap-1.5 rounded-lg border p-1.5 ${
-              selected.has(m.id) ? 'border-rose-700 bg-rose-950/20' : 'border-zinc-800 hover:border-zinc-700'
+              selected.has(m.id) ? 'border-rose-700 bg-rose-950/20' : 'border-line hover:border-line-strong'
             }`}
           >
             <div className="relative aspect-square overflow-hidden rounded-md bg-zinc-900">
diff --git a/apps/web/src/routes/settings/JobsConfigureTab.tsx b/apps/web/src/routes/settings/JobsConfigureTab.tsx
index 7ac0781..cc796d6 100644
--- a/apps/web/src/routes/settings/JobsConfigureTab.tsx
+++ b/apps/web/src/routes/settings/JobsConfigureTab.tsx
@@ -61,7 +61,7 @@ function ScheduleSelect({
       value={value}
       disabled={disabled}
       onChange={(e) => onChange(e.target.value as SelectValue)}
-      className="rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-[5px] text-[12px] text-zinc-300 outline-none disabled:opacity-40"
+      className="rounded-field border border-line bg-zinc-900 px-2 py-[5px] text-[12px] text-zinc-300 outline-none disabled:opacity-40"
     >
       {showInherit && <option value="inherit">Use global</option>}
       <option value="off">Off</option>
@@ -108,7 +108,7 @@ export function JobsConfigureTab() {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="rounded-xl border border-line bg-surface p-[18px]">
         <div className="mb-1 text-[13.5px] font-bold">Global defaults</div>
         <div className="mb-3 text-[12px] text-zinc-500">
           Apply to every library that doesn't set its own override.
@@ -120,7 +120,7 @@ export function JobsConfigureTab() {
             return (
               <div
                 key={jt.key}
-                className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2"
+                className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2"
               >
                 <div>
                   <div className="text-[13px] font-semibold text-zinc-200">{jt.label}</div>
@@ -137,7 +137,7 @@ export function JobsConfigureTab() {
                   <button
                     disabled={runNowMutation.isPending}
                     onClick={() => runNowMutation.mutate({ scope: 'global', jobType: jt.key })}
-                    className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+                    className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
                   >
                     Run all now
                   </button>
@@ -146,7 +146,7 @@ export function JobsConfigureTab() {
             );
           })}
 
-          <div className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2">
+          <div className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2">
             <div>
               <div className="text-[13px] font-semibold text-zinc-200">Thumbnails</div>
               <div className="text-[11px] text-zinc-500">Regenerate all cached thumbnails across every library</div>
@@ -154,7 +154,7 @@ export function JobsConfigureTab() {
             <button
               disabled={regenerateThumbnailsMutation.isPending}
               onClick={() => regenerateThumbnailsMutation.mutate()}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
             >
               Regenerate all
             </button>
@@ -162,7 +162,7 @@ export function JobsConfigureTab() {
         </div>
       </div>
 
-      <div className="rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="rounded-xl border border-line bg-surface p-[18px]">
         <div className="mb-1 text-[13.5px] font-bold">Per-library</div>
         <div className="mb-3 text-[12px] text-zinc-500">
           Override the global defaults per library. Leave as “Use global” to inherit.
@@ -213,7 +213,7 @@ function LibraryScheduleCard({
   const [expanded, setExpanded] = useState(() => hasCustom);
 
   return (
-    <div className={`rounded-[10px] border bg-zinc-900/60 p-3 ${hasCustom ? 'border-l-[3px] border-l-amber-600/70 border-zinc-800' : 'border-zinc-800'}`}>
+    <div className={`rounded-panel border bg-zinc-900/60 p-3 ${hasCustom ? 'border-l-[3px] border-l-amber-600/70 border-line' : 'border-line'}`}>
       <button
         onClick={() => setExpanded(!expanded)}
         className="flex w-full cursor-pointer items-center gap-2.5 text-left"
@@ -257,7 +257,7 @@ function LibraryScheduleCard({
               return (
                 <div
                   key={jt.key}
-                  className={`flex items-center justify-between rounded-[7px] px-2.5 py-1.5 transition-colors ${isCustom ? 'bg-amber-600/5' : ''}`}
+                  className={`flex items-center justify-between rounded-field px-2.5 py-1.5 transition-colors ${isCustom ? 'bg-amber-600/5' : ''}`}
                 >
                   <div className="flex items-center gap-2">
                     <JobIcon type={jt.key} />
@@ -285,7 +285,7 @@ function LibraryScheduleCard({
             <button
               disabled={runPending}
               onClick={onRunAll}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-zinc-700 hover:text-zinc-100 disabled:opacity-40 transition-colors"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-line-strong hover:text-zinc-100 disabled:opacity-40 transition-colors"
             >
               Run all for this library
             </button>
diff --git a/apps/web/src/routes/settings/JobsHistoryTab.tsx b/apps/web/src/routes/settings/JobsHistoryTab.tsx
index 06ba996..ac4d4f5 100644
--- a/apps/web/src/routes/settings/JobsHistoryTab.tsx
+++ b/apps/web/src/routes/settings/JobsHistoryTab.tsx
@@ -15,7 +15,7 @@ export function JobsHistoryTab() {
       {jobs.map((job) => {
         const pct = job.total > 0 ? Math.round((job.progress / job.total) * 100) : job.status === 'done' ? 100 : 0;
         return (
-          <div key={job.id} className="rounded-[10px] border border-zinc-800 bg-[#111113] p-3.5">
+          <div key={job.id} className="rounded-panel border border-line bg-surface p-3.5">
             <div className="mb-2 flex items-center justify-between">
               <div className="text-[13.5px] font-bold">{job.label}</div>
               <span className={`text-[11px] font-bold tracking-[0.3px] uppercase ${STATUS_COLOR[job.status]}`}>
diff --git a/apps/web/src/routes/settings/JobsTab.tsx b/apps/web/src/routes/settings/JobsTab.tsx
index 3c66759..cbd4673 100644
--- a/apps/web/src/routes/settings/JobsTab.tsx
+++ b/apps/web/src/routes/settings/JobsTab.tsx
@@ -19,7 +19,7 @@ export function JobsTab() {
       <div className="sticky top-0 z-10 -mt-1 bg-zinc-950 pb-2 pt-1">
         <div className="flex items-start justify-between">
           <TabHeader title="Jobs" subtitle="Configure scan, tagging, and duplicate-detection schedules." />
-          <div className="flex overflow-hidden rounded-[7px] border border-zinc-800">
+          <div className="flex overflow-hidden rounded-field border border-line">
             {(['configure', 'history'] as const).map((s) => (
               <button
                 key={s}
diff --git a/apps/web/src/routes/settings/LibrariesTab.tsx b/apps/web/src/routes/settings/LibrariesTab.tsx
index 6f1193d..8e3360a 100644
--- a/apps/web/src/routes/settings/LibrariesTab.tsx
+++ b/apps/web/src/routes/settings/LibrariesTab.tsx
@@ -60,7 +60,7 @@ export function LibrariesTab() {
         <button
           disabled={!libraries?.length || scanAllMutation.isPending}
           onClick={() => scanAllMutation.mutate()}
-          className="mb-4 cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40"
+          className="mb-4 cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40"
         >
           Scan All
         </button>
@@ -75,19 +75,19 @@ export function LibrariesTab() {
           canMoveDown={i < (libraries?.length ?? 0) - 1}
         />
       ))}
-      <div className="rounded-xl border border-dashed border-zinc-800 p-4">
+      <div className="rounded-xl border border-dashed border-line p-4">
         <div className="mb-2.5 text-[13.5px] font-bold">New library</div>
         <div className="flex gap-2">
           <input
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
             placeholder="Library name"
-            className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500"
+            className="flex-1 rounded-field border border-line bg-zinc-900 px-3 py-[7px] text-[13px] text-zinc-100 outline-none placeholder:text-zinc-500"
           />
           <select
             value={newType}
             onChange={(e) => setNewType(e.target.value)}
-            className="rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-[7px] text-[13px] text-zinc-100 outline-none"
+            className="rounded-field border border-line bg-zinc-900 px-2 py-[7px] text-[13px] text-zinc-100 outline-none"
           >
             <option value="mixed">Mixed</option>
             <option value="image">Images</option>
@@ -96,7 +96,7 @@ export function LibrariesTab() {
           <button
             disabled={!newName.trim() || createMutation.isPending}
             onClick={() => createMutation.mutate()}
-            className="cursor-pointer rounded-[7px] bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-4 py-[7px] text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             Create
           </button>
@@ -207,7 +207,7 @@ function LibraryCard({
   });
 
   return (
-    <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-4">
+    <div className="mb-3.5 rounded-xl border border-line bg-surface p-4">
       <div className="mb-2.5 flex items-center gap-2.5">
         <div className="flex flex-1 items-center gap-2.5">
           <div
@@ -248,7 +248,7 @@ function LibraryCard({
                     if (e.key === 'Enter') submitRename();
                     if (e.key === 'Escape') setRenaming(null);
                   }}
-                  className="w-full max-w-[240px] rounded-[6px] border border-zinc-700 bg-zinc-900 px-2 py-[3px] text-sm font-bold text-zinc-100 outline-none"
+                  className="w-full max-w-[240px] rounded-[6px] border border-line-strong bg-zinc-900 px-2 py-[3px] text-sm font-bold text-zinc-100 outline-none"
                 />
                 <span className="cursor-pointer text-zinc-500 hover:text-zinc-200" onMouseDown={(e) => e.preventDefault()} onClick={submitRename}>
                   <Check size={14} />
@@ -279,13 +279,13 @@ function LibraryCard({
           </button>
         </div>
         <div
-          className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200"
+          className="cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200"
           onClick={() => scanMutation.mutate()}
         >
           Scan
         </div>
         <div
-          className="cursor-pointer rounded-[7px] border border-transparent px-2 py-1.5 text-[12.5px] font-semibold text-zinc-600 hover:text-red-400"
+          className="cursor-pointer rounded-btn border border-transparent px-2 py-1.5 text-[12.5px] font-semibold text-zinc-600 hover:text-red-400"
           title="Delete library"
           onClick={() => {
             if (confirm(`Delete library "${lib.name}"? Uploaded files are removed; folder files stay on disk.`)) {
@@ -300,7 +300,7 @@ function LibraryCard({
         {lib.folders.map((folder) => (
           <div
             key={folder.id}
-            className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] text-[12.5px]"
+            className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] text-[12.5px]"
           >
             <span className="truncate font-mono text-zinc-300">{folder.path}</span>
             <div className="flex flex-none items-center gap-2.5 pl-3">
@@ -327,12 +327,12 @@ function LibraryCard({
             onChange={(e) => setFolderInput(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && folderInput.trim() && addFolderMutation.mutate()}
             placeholder="/absolute/path/to/folder"
-            className="flex-1 rounded-[7px] border border-zinc-800 bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
+            className="flex-1 rounded-field border border-line bg-zinc-900 px-2.5 py-[7px] font-mono text-[12.5px] text-zinc-100 outline-none placeholder:text-zinc-600"
           />
           <button
             disabled={!folderInput.trim() || addFolderMutation.isPending}
             onClick={() => addFolderMutation.mutate()}
-            className="cursor-pointer rounded-[7px] bg-accent px-3 py-[7px] text-[12px] font-semibold text-white disabled:opacity-40"
+            className="cursor-pointer rounded-btn bg-accent px-3 py-[7px] text-[12px] font-semibold text-white disabled:opacity-40"
           >
             Add
           </button>
@@ -345,13 +345,13 @@ function LibraryCard({
           + Add folder
         </div>
       )}
-      <div className="mt-3 flex items-center gap-2.5 border-t border-zinc-800 pt-3">
+      <div className="mt-3 flex items-center gap-2.5 border-t border-line pt-3">
         <span className="text-[12px] text-zinc-500">Auto-scan</span>
         <select
           value={scanInterval}
           disabled={autoScanMutation.isPending}
           onChange={(e) => autoScanMutation.mutate(Number(e.target.value))}
-          className="rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-[5px] text-[12px] text-zinc-300 outline-none disabled:opacity-40"
+          className="rounded-field border border-line bg-zinc-900 px-2 py-[5px] text-[12px] text-zinc-300 outline-none disabled:opacity-40"
         >
           {AUTO_SCAN_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -443,7 +443,7 @@ function ThumbnailPickerModal({
       onClick={onClose}
     >
       <div
-        className="flex max-h-[80vh] w-full max-w-[560px] flex-col rounded-xl border border-zinc-800 bg-[#111113] p-5"
+        className="flex max-h-[80vh] w-full max-w-[560px] flex-col rounded-xl border border-line bg-surface p-5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-1 flex items-center justify-between">
@@ -472,7 +472,7 @@ function ThumbnailPickerModal({
           <button
             disabled={uploadCoverMutation.isPending}
             onClick={() => fileInputRef.current?.click()}
-            className="flex items-center gap-1.5 cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+            className="flex items-center gap-1.5 cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
           >
             <Upload size={13} /> Upload custom image
           </button>
@@ -480,7 +480,7 @@ function ThumbnailPickerModal({
             <button
               disabled={removeCoverMutation.isPending}
               onClick={() => removeCoverMutation.mutate()}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-rose-400 hover:text-rose-300 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-rose-400 hover:text-rose-300 disabled:opacity-40"
             >
               Remove custom image
             </button>
@@ -488,14 +488,14 @@ function ThumbnailPickerModal({
           <button
             disabled={!currentThumbId || regenerateMutation.isPending}
             onClick={() => currentThumbId && regenerateMutation.mutate(currentThumbId)}
-            className="flex items-center gap-1.5 cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+            className="flex items-center gap-1.5 cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
           >
             <RotateCw size={13} /> Regenerate current thumbnail
           </button>
           <button
             disabled={lib.thumbnailMediaId === null || setThumbMutation.isPending}
             onClick={() => setThumbMutation.mutate(null)}
-            className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
+            className="cursor-pointer rounded-btn border border-line px-3 py-1.5 text-[12px] font-semibold text-zinc-300 hover:text-zinc-100 disabled:opacity-40"
           >
             Use latest media
           </button>
@@ -507,7 +507,7 @@ function ThumbnailPickerModal({
               title={m.filename}
               onClick={() => setThumbMutation.mutate(m.id)}
               className={`relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 ${
-                currentThumbId === m.id ? 'border-accent' : 'border-transparent hover:border-zinc-700'
+                currentThumbId === m.id ? 'border-accent' : 'border-transparent hover:border-line-strong'
               }`}
             >
               <img src={thumbUrl(m.id, bust)} alt="" className="h-full w-full object-cover" />
diff --git a/apps/web/src/routes/settings/MiscTabs.tsx b/apps/web/src/routes/settings/MiscTabs.tsx
index d168ffa..d587c56 100644
--- a/apps/web/src/routes/settings/MiscTabs.tsx
+++ b/apps/web/src/routes/settings/MiscTabs.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { Settings } from '@sakuya/shared';
+import type { Settings, UiStyle } from '@sakuya/shared';
 import { api } from '../../lib/api';
 import { formatBytes } from '../../lib/format';
 import { useToast } from '../../components/Toast';
 import { ConfirmDialog } from '../../components/ConfirmDialog';
 import { TabHeader } from './index';
+import { applyUiStyle, useUiStyle } from '../../hooks/useUiStyle';
 
 const ACCENTS = ['#8b5cf6', '#14b8a6', '#f43f5e'];
 
@@ -14,13 +15,15 @@ export function AppearanceTab() {
   const showToast = useToast();
   const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.settings });
   const current = settings?.accent_color ?? '#8b5cf6';
+  const uiStyle = useUiStyle();
 
   const patchMutation = useMutation({
-    mutationFn: (accent: string) => api.patchSettings({ accent_color: accent }),
-    onSuccess: (data) => {
+    mutationFn: (body: Partial<Record<keyof Settings, string>>) => api.patchSettings(body),
+    onSuccess: (data, body) => {
       queryClient.setQueryData(['settings'], data);
       document.documentElement.style.setProperty('--accent', data.accent_color);
-      showToast('Accent updated');
+      applyUiStyle(data.ui_style);
+      showToast(body.accent_color ? 'Accent updated' : 'Appearance updated');
     },
     onError: (err: Error) => showToast(err.message),
   });
@@ -28,18 +31,110 @@ export function AppearanceTab() {
   return (
     <div>
       <TabHeader title="Appearance" subtitle="Visual preferences for the board." />
-      <div className="rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
-        <div className="mb-2.5 text-[13.5px] font-bold">Accent color</div>
-        <div className="flex gap-2.5">
-          {ACCENTS.map((color) => (
-            <div
-              key={color}
-              onClick={() => patchMutation.mutate(color)}
-              className="h-[34px] w-[34px] cursor-pointer rounded-lg border-2"
-              style={{ background: color, borderColor: current === color ? '#f4f4f5' : 'transparent' }}
+      <div className="flex flex-col gap-2.5">
+        <div className="rounded-xl border border-line bg-surface p-[18px]">
+          <div className="text-[13.5px] font-bold">Interface style</div>
+          <div className="mb-3 mt-0.5 text-[12px] text-zinc-500">Switch between the original look and the frosted Liquid Glass one.</div>
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2">
+            {UI_STYLES.map((option) => {
+              const active = uiStyle === option.key;
+              return (
+                <button
+                  key={option.key}
+                  disabled={patchMutation.isPending}
+                  onClick={() => !active && patchMutation.mutate({ ui_style: option.key })}
+                  className={`cursor-pointer rounded-panel border-2 p-2.5 text-left transition-colors disabled:cursor-wait ${
+                    active ? 'border-accent' : 'border-line hover:border-line-hover'
+                  }`}
+                >
+                  <UiStylePreview style={option.key} />
+                  <div className="mt-2.5 flex items-center justify-between px-0.5">
+                    <div className="text-[13px] font-semibold">{option.label}</div>
+                    {active && <span className="text-[11px] font-bold uppercase tracking-[0.3px] text-accent">Active</span>}
+                  </div>
+                  <div className="mt-0.5 px-0.5 text-[11.5px] text-zinc-500">{option.desc}</div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div className="rounded-xl border border-line bg-surface p-[18px]">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <div className="text-[13.5px] font-bold">Dashboard banner</div>
+              <div className="mt-0.5 max-w-[420px] text-[12px] text-zinc-500">
+                The welcome banner at the top of the dashboard. Only shown with the Liquid Glass style.
+              </div>
+            </div>
+            <ToggleSwitch
+              checked={settings?.dashboard_hero !== '0'}
+              pending={patchMutation.isPending}
+              onChange={(value) => patchMutation.mutate({ dashboard_hero: value ? '1' : '0' })}
             />
-          ))}
+          </div>
         </div>
+        <div className="rounded-xl border border-line bg-surface p-[18px]">
+          <div className="mb-2.5 text-[13.5px] font-bold">Accent color</div>
+          <div className="flex gap-2.5">
+            {ACCENTS.map((color) => (
+              <div
+                key={color}
+                onClick={() => patchMutation.mutate({ accent_color: color })}
+                className="h-[34px] w-[34px] cursor-pointer rounded-lg border-2 glass:rounded-full"
+                style={{ background: color, borderColor: current === color ? '#f4f4f5' : 'transparent' }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const UI_STYLES: { key: UiStyle; label: string; desc: string }[] = [
+  { key: 'glass', label: 'Liquid Glass', desc: 'Frosted surfaces, rounded pills and a glowing banner.' },
+  { key: 'classic', label: 'Original', desc: 'The flat, compact look Sakuya shipped with.' },
+];
+
+/** Tiny static mock of each style, drawn in plain markup so it doesn't depend on the active one. */
+function UiStylePreview({ style }: { style: UiStyle }) {
+  const glass = style === 'glass';
+  return (
+    <div
+      className="h-[92px] overflow-hidden p-2"
+      style={{
+        borderRadius: glass ? 14 : 6,
+        background: glass
+          ? 'radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0c0c10'
+          : '#09090b',
+        border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.08)' : '#27272a'),
+      }}
+    >
+      <div className="flex items-center gap-1">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-2.5 w-7"
+            style={{
+              borderRadius: glass ? 999 : 2,
+              background: i === 0 ? (glass ? 'color-mix(in srgb, var(--accent) 45%, transparent)' : '#27272a') : glass ? 'rgb(255 255 255 / 0.06)' : 'transparent',
+            }}
+          />
+        ))}
+        <div className="ml-auto h-2.5 w-12" style={{ borderRadius: glass ? 999 : 2, background: glass ? 'rgb(255 255 255 / 0.08)' : '#18181b' }} />
+      </div>
+      <div className="mt-2 grid grid-cols-4 gap-1.5">
+        {[0, 1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="h-[52px]"
+            style={{
+              borderRadius: glass ? 10 : 3,
+              background: glass ? 'linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03))' : '#18181b',
+              border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.1)' : '#27272a'),
+            }}
+          />
+        ))}
       </div>
     </div>
   );
@@ -125,7 +220,7 @@ export function SystemTab() {
   return (
     <div>
       <TabHeader title="System" subtitle="Storage and maintenance." />
-      <div className="mb-2.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-2.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between gap-4">
           <div>
             <div className="text-[13.5px] font-bold">Store data in your home folder</div>
@@ -157,7 +252,7 @@ export function SystemTab() {
           />
         </div>
       </div>
-      <div className="mb-2.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-2.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between">
           <div>
             <div className="text-[13.5px] font-bold">Thumbnail cache</div>
@@ -176,7 +271,7 @@ export function SystemTab() {
           />
         </div>
       </div>
-      <div className="mb-2.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-2.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between">
           <div>
             <div className="text-[13.5px] font-bold">Video transcoding</div>
@@ -192,13 +287,13 @@ export function SystemTab() {
           />
         </div>
       </div>
-      <div className="flex flex-col gap-2.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="flex flex-col gap-2.5 rounded-xl border border-line bg-surface p-[18px]">
         <Row label="Version" value={info?.version ?? '—'} />
         <Row label="Media stored" value={info ? `${info.mediaCount} files · ${formatBytes(info.mediaBytes)}` : '—'} />
         <Row label="Database size" value={info ? formatBytes(info.dbBytes) : '—'} />
         <Row label="Thumbnail cache" value={info ? formatBytes(info.thumbBytes) : '—'} />
         <div className="mt-1.5 flex flex-col gap-2.5">
-          <div className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2">
+          <div className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2">
             <div>
               <div className="text-[13px] font-semibold text-zinc-200">Thumbnail cache</div>
               <div className="text-[11px] text-zinc-500">Delete all cached thumbnails to free up disk space</div>
@@ -206,13 +301,13 @@ export function SystemTab() {
             <button
               disabled={clearMutation.isPending}
               onClick={() => clearMutation.mutate()}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-rose-400 hover:border-rose-800 hover:text-rose-300 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-rose-400 hover:border-rose-800 hover:text-rose-300 disabled:opacity-40"
             >
               Clear cache
             </button>
           </div>
 
-          <div className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2">
+          <div className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2">
             <div>
               <div className="text-[13px] font-semibold text-zinc-200">Regenerate thumbnails</div>
               <div className="text-[11px] text-zinc-500">Re-process all media files and overwrite existing thumbnails</div>
@@ -220,13 +315,13 @@ export function SystemTab() {
             <button
               disabled={regenerateMutation.isPending}
               onClick={() => setShowRegenerateWarning(true)}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-zinc-700 hover:text-zinc-100 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-line-strong hover:text-zinc-100 disabled:opacity-40"
             >
               Regenerate all
             </button>
           </div>
 
-          <div className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2">
+          <div className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2">
             <div>
               <div className="text-[13px] font-semibold text-zinc-200">Transcode videos</div>
               <div className="text-[11px] text-zinc-500">Check every video and re-encode any the browser can't play</div>
@@ -234,13 +329,13 @@ export function SystemTab() {
             <button
               disabled={transcodeRunMutation.isPending}
               onClick={() => transcodeRunMutation.mutate()}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-zinc-700 hover:text-zinc-100 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-line-strong hover:text-zinc-100 disabled:opacity-40"
             >
               Transcode all videos now
             </button>
           </div>
 
-          <div className="flex items-center justify-between rounded-[7px] border border-zinc-800 bg-zinc-900 px-3 py-2">
+          <div className="flex items-center justify-between rounded-field border border-line bg-zinc-900 px-3 py-2">
             <div>
               <div className="text-[13px] font-semibold text-zinc-200">Clean up orphan data</div>
               <div className="text-[11px] text-zinc-500">Remove thumbnail files and tag counts with no matching media</div>
@@ -248,7 +343,7 @@ export function SystemTab() {
             <button
               disabled={cleanupMutation.isPending}
               onClick={() => setShowCleanupWarning(true)}
-              className="cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-rose-400 hover:border-rose-800 hover:text-rose-300 disabled:opacity-40"
+              className="cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-rose-400 hover:border-rose-800 hover:text-rose-300 disabled:opacity-40"
             >
               Clean up
             </button>
@@ -408,7 +503,7 @@ export function BehaviorTab() {
           const raw = settings?.[row.key];
           const checked = raw !== undefined ? raw === '1' : !!row.defaultOn;
           return (
-            <div key={row.key} className="rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+            <div key={row.key} className="rounded-xl border border-line bg-surface p-[18px]">
               <div className="flex items-center justify-between">
                 <div>
                   <div className="text-[13.5px] font-bold">{row.label}</div>
@@ -424,7 +519,7 @@ export function BehaviorTab() {
                 <button
                   disabled={reclassifyMutation.isPending}
                   onClick={() => reclassifyMutation.mutate()}
-                  className="mt-3 cursor-pointer rounded-[7px] border border-zinc-800 px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-zinc-700 hover:text-zinc-100 disabled:opacity-40"
+                  className="mt-3 cursor-pointer rounded-btn border border-line px-3 py-[5px] text-[12px] font-semibold text-zinc-300 hover:border-line-strong hover:text-zinc-100 disabled:opacity-40"
                 >
                   Reclassify existing GIFs now
                 </button>
diff --git a/apps/web/src/routes/settings/ReleasesTab.tsx b/apps/web/src/routes/settings/ReleasesTab.tsx
index 0b7573e..fe65b24 100644
--- a/apps/web/src/routes/settings/ReleasesTab.tsx
+++ b/apps/web/src/routes/settings/ReleasesTab.tsx
@@ -8,7 +8,7 @@ export function ReleasesTab() {
       <TabHeader title="Releases" subtitle="What's changed in Sakuya over time." />
       <div className="flex flex-col gap-4">
         {releases.map((r, i) => (
-          <div key={r.version} className="rounded-xl border border-zinc-800 bg-[#111113] p-6">
+          <div key={r.version} className="rounded-xl border border-line bg-surface p-6">
             <div className="mb-4 flex items-center gap-2">
               <span className="rounded-full bg-accent/15 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-accent">
                 v{r.version}
diff --git a/apps/web/src/routes/settings/TaggingTab.tsx b/apps/web/src/routes/settings/TaggingTab.tsx
index 6cdcf8a..4a7dfbc 100644
--- a/apps/web/src/routes/settings/TaggingTab.tsx
+++ b/apps/web/src/routes/settings/TaggingTab.tsx
@@ -75,7 +75,7 @@ export function TaggingTab() {
     <div>
       <TabHeader title="AI Tagging" subtitle="Auto-tag new imports with the anime tagger model." />
 
-      <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-3.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
             <div className="text-[13.5px] font-bold">Tagger model</div>
@@ -92,7 +92,7 @@ export function TaggingTab() {
               value={tagger?.model ?? ''}
               disabled={tagger?.status === 'downloading' || selectModelMutation.isPending}
               onChange={(e) => selectModelMutation.mutate(e.target.value)}
-              className="rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-2 text-[12.5px] text-zinc-100 outline-none disabled:opacity-40"
+              className="rounded-field border border-line bg-zinc-900 px-2 py-2 text-[12.5px] text-zinc-100 outline-none disabled:opacity-40"
             >
               {(models ?? []).map((m) => (
                 <option key={m.id} value={m.id}>
@@ -104,7 +104,7 @@ export function TaggingTab() {
               <button
                 disabled={tagger?.status === 'downloading' || downloadMutation.isPending}
                 onClick={() => downloadMutation.mutate()}
-                className="cursor-pointer rounded-[7px] bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
+                className="cursor-pointer rounded-btn bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
               >
                 {tagger?.status === 'downloading' ? 'Downloading…' : 'Download model'}
               </button>
@@ -115,7 +115,7 @@ export function TaggingTab() {
         </div>
       </div>
 
-      <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-3.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
             <div className="text-[13.5px] font-bold">
@@ -147,14 +147,14 @@ export function TaggingTab() {
               tagAllMutation.isPending
             }
             onClick={() => tagAllMutation.mutate()}
-            className="shrink-0 cursor-pointer rounded-[7px] bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="shrink-0 cursor-pointer rounded-btn bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             {activeTagJob ? 'Tagging…' : 'Tag all'}
           </button>
         </div>
       </div>
 
-      <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-3.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
             <div className="text-[13.5px] font-bold">
@@ -181,14 +181,14 @@ export function TaggingTab() {
           <button
             disabled={!!activeHashJob || (tagger?.unhashedCount ?? 0) === 0 || hashAllMutation.isPending}
             onClick={() => hashAllMutation.mutate()}
-            className="shrink-0 cursor-pointer rounded-[7px] bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
+            className="shrink-0 cursor-pointer rounded-btn bg-accent px-4 py-2 text-[12.5px] font-semibold text-white disabled:opacity-40"
           >
             {activeHashJob ? 'Hashing…' : 'Hash images'}
           </button>
         </div>
       </div>
 
-      <div className="mb-3.5 rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="mb-3.5 rounded-xl border border-line bg-surface p-[18px]">
         <div className="flex items-center justify-between">
           <div>
             <div className="text-[13.5px] font-bold">Auto-tag on import</div>
@@ -204,7 +204,7 @@ export function TaggingTab() {
         </div>
       </div>
 
-      <div className="rounded-xl border border-zinc-800 bg-[#111113] p-[18px]">
+      <div className="rounded-xl border border-line bg-surface p-[18px]">
         <div className="mb-1 text-[13.5px] font-bold">Confidence threshold</div>
         <div className="mb-3 text-xs text-zinc-500">Tags below this confidence are discarded.</div>
         <input
diff --git a/apps/web/src/routes/settings/UploadsTab.tsx b/apps/web/src/routes/settings/UploadsTab.tsx
index 48606cc..506da0a 100644
--- a/apps/web/src/routes/settings/UploadsTab.tsx
+++ b/apps/web/src/routes/settings/UploadsTab.tsx
@@ -81,7 +81,7 @@ export function UploadsTab() {
         <select
           value={effectiveLibraryId}
           onChange={(e) => setLibraryId(Number(e.target.value))}
-          className="rounded-[7px] border border-zinc-800 bg-zinc-900 px-2 py-[7px] text-[13px] text-zinc-100 outline-none"
+          className="rounded-field border border-line bg-zinc-900 px-2 py-[7px] text-[13px] text-zinc-100 outline-none"
         >
           {(libraries ?? []).map((lib) => (
             <option key={lib.id} value={lib.id}>
@@ -104,7 +104,7 @@ export function UploadsTab() {
         }}
         onClick={() => fileInput.current?.click()}
         className={`flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed py-10 transition-colors ${
-          dragOver ? 'border-accent bg-accent/5' : 'border-zinc-800 bg-[#111113] hover:border-zinc-700'
+          dragOver ? 'border-accent bg-accent/5' : 'border-line bg-surface hover:border-line-strong'
         }`}
       >
         <Upload className="mb-2 text-zinc-400" size={26} />
@@ -124,7 +124,7 @@ export function UploadsTab() {
       </div>
       <div className="mt-4 flex flex-col gap-2">
         {rows.map((row) => (
-          <div key={row.id} className="flex items-center gap-2.5 rounded-[9px] border border-zinc-800 bg-[#111113] px-3 py-2.5">
+          <div key={row.id} className="flex items-center gap-2.5 rounded-panel border border-line bg-surface px-3 py-2.5">
             <div className="min-w-0 flex-1">
               <div className="truncate text-[12.5px] font-semibold text-zinc-200">{row.name}</div>
               <div className="mt-1.5 h-1 overflow-hidden rounded-full bg-zinc-800">
diff --git a/apps/web/src/routes/settings/index.tsx b/apps/web/src/routes/settings/index.tsx
index 7ccaed1..3621635 100644
--- a/apps/web/src/routes/settings/index.tsx
+++ b/apps/web/src/routes/settings/index.tsx
@@ -32,16 +32,16 @@ export function Settings() {
   const [tab, setTab] = useState<TabKey>(isTabKey(initialTab) ? initialTab : 'libraries');
 
   return (
-    <div className="fade-in mx-auto flex h-[calc(100vh-60px)] max-w-[1200px] flex-col gap-4 overflow-hidden px-4 py-5 sm:flex-row sm:gap-8 sm:px-8 sm:py-7">
+    <div className="fade-in mx-auto flex h-[calc(100dvh-var(--nav-h)-var(--dock-h))] max-w-[1200px] flex-col gap-4 overflow-hidden px-4 py-5 sm:flex-row sm:gap-8 sm:px-8 sm:py-7">
       <div className="flex flex-none gap-1 overflow-x-auto pb-1 sm:w-[200px] sm:flex-col sm:gap-0.5 sm:overflow-visible sm:pb-0">
         {TABS.map((t) => (
           <div
             key={t.key}
             onClick={() => setTab(t.key)}
-            className={`flex-none cursor-pointer whitespace-nowrap rounded-lg border px-3 py-[9px] text-[13.5px] font-semibold ${
+            className={`flex-none cursor-pointer whitespace-nowrap rounded-lg border px-3 py-[9px] text-[13.5px] font-semibold glass:rounded-full glass:px-4 glass:font-display glass:text-[14px] glass:transition-colors ${
               tab === t.key
-                ? 'border-zinc-800 bg-zinc-900 text-zinc-100'
-                : 'border-transparent text-zinc-400 hover:text-zinc-200'
+                ? 'border-line bg-zinc-900 text-zinc-100 glass:border-white/10 glass:bg-white/10 glass:text-white glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]'
+                : 'border-transparent text-zinc-400 hover:text-zinc-200 glass:font-medium glass:hover:bg-white/5'
             }`}
           >
             {t.label}
@@ -65,9 +65,9 @@ export function Settings() {
 
 export function TabHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <>
-      <h2 className="m-0 mb-1 text-[19px] font-bold">{title}</h2>
+    <div>
+      <h2 className="m-0 mb-1 text-[19px] font-bold glass:text-[24px]">{title}</h2>
       <div className="mb-5 text-[13px] text-zinc-500">{subtitle}</div>
-    </>
+    </div>
   );
 }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 06b20a3..e2e5551 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -167,8 +167,12 @@ export interface Settings {
   gifs_as_videos: string;
   video_transcode_enabled: string;
   discover_enabled: string;
+  ui_style: UiStyle;
+  dashboard_hero: string;
 }
 
+export type UiStyle = 'glass' | 'classic';
+
 export interface DashboardResponse {
   libraries: LibraryWithStats[];
   continueWatching: Media[];

From c774721a3d7374b57024cb439a9010e27f330877 Mon Sep 17 00:00:00 2001
From: Fernando <52652158+rene-roid@users.noreply.github.com>
Date: Wed, 30 Sep 2026 10:53:21 +0200
Subject: [PATCH 2/4] Hide top bars on scroll and move tag sidebar to a drawer
 on phones

On phones the navbar and the sticky toolbar under it (Explore, Discover,
Boards, library pages) slide away while scrolling down and return on any
scroll up. Driven by a data-nav-hidden attribute on <html> and a matching
Tailwind variant.

The collapsed tag-sidebar strip is gone on phones, where it took a column
from the grid; a "Libraries & tags" button next to the Explore title
opens the drawer instead.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/Navbar.tsx     | 32 +++++++++++++++++++++++++-
 apps/web/src/components/TagSidebar.tsx |  6 ++---
 apps/web/src/index.css                 |  2 ++
 apps/web/src/routes/Boards.tsx         |  2 +-
 apps/web/src/routes/Discover.tsx       |  2 +-
 apps/web/src/routes/Explore.tsx        | 11 ++++++++-
 apps/web/src/routes/LibraryView.tsx    |  2 +-
 7 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 2bb2cf1..0a0b485 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -195,6 +195,36 @@ export function Navbar() {
     return () => observer.disconnect();
   }, []);
 
+  // On phones the top bar (and the sticky toolbar under it) slides away while scrolling down and
+  // comes back on any scroll up, to give the grid the whole screen.
+  useEffect(() => {
+    const phone = window.matchMedia('(max-width: 767px)');
+    const root = document.documentElement;
+    let lastY = window.scrollY;
+    const setHidden = (hidden: boolean) => root.toggleAttribute('data-nav-hidden', hidden);
+    const onScroll = () => {
+      const y = window.scrollY;
+      const bar = barRef.current;
+      if (!phone.matches || y <= (bar?.offsetHeight ?? 0) || bar?.contains(document.activeElement)) {
+        setHidden(false);
+        lastY = y;
+        return;
+      }
+      // Ignore jitter so a slow drag doesn't flicker the bar.
+      if (Math.abs(y - lastY) < 8) return;
+      setHidden(y > lastY);
+      lastY = y;
+    };
+    const onViewportChange = () => !phone.matches && setHidden(false);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    phone.addEventListener('change', onViewportChange);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      phone.removeEventListener('change', onViewportChange);
+      setHidden(false);
+    };
+  }, []);
+
   const goToExplore = (tags: string[]) => {
     navigate(tags.length ? `/explore?tags=${tags.map(encodeURIComponent).join(',')}` : '/explore');
   };
@@ -203,7 +233,7 @@ export function Navbar() {
     <>
       <div
         ref={barRef}
-        className="sticky top-0 z-40 flex flex-wrap items-center gap-x-2 gap-y-2.5 border-b border-line bg-zinc-950/75 px-4 py-2.5 backdrop-blur-xl md:h-[60px] md:flex-nowrap md:gap-x-4 md:px-5 md:py-0 glass:border-white/[0.06] glass:bg-[#0b0b0e]/70 glass:backdrop-blur-2xl lg:glass:gap-x-5 lg:glass:px-6"
+        className="sticky top-0 z-40 flex flex-wrap items-center transition-transform duration-300 max-md:nav-hidden:-translate-y-full gap-x-2 gap-y-2.5 border-b border-line bg-zinc-950/75 px-4 py-2.5 backdrop-blur-xl md:h-[60px] md:flex-nowrap md:gap-x-4 md:px-5 md:py-0 glass:border-white/[0.06] glass:bg-[#0b0b0e]/70 glass:backdrop-blur-2xl lg:glass:gap-x-5 lg:glass:px-6"
       >
         <div className="flex shrink-0 cursor-pointer items-center gap-2 glass:gap-2.5" onClick={() => navigate('/')}>
           <img src="/icon.png" alt="Sakuya" className="h-7 w-7" />
diff --git a/apps/web/src/components/TagSidebar.tsx b/apps/web/src/components/TagSidebar.tsx
index 54ac4da..9806197 100644
--- a/apps/web/src/components/TagSidebar.tsx
+++ b/apps/web/src/components/TagSidebar.tsx
@@ -56,7 +56,7 @@ export function TagSidebar({
   if (collapsed) {
     return (
       <button
-        className="sticky top-(--nav-h) flex h-[calc(100dvh-var(--nav-h)-var(--dock-h))] w-7 flex-none cursor-pointer items-start justify-center border-r border-line pt-[18px] text-zinc-500 hover:text-zinc-300"
+        className="sticky top-(--nav-h) hidden h-[calc(100dvh-var(--nav-h)-var(--dock-h))] w-7 flex-none cursor-pointer items-start justify-center sm:flex border-r border-line pt-[18px] text-zinc-500 hover:text-zinc-300"
         onClick={onToggle}
       >
         <ChevronRight size={18} />
@@ -66,8 +66,8 @@ export function TagSidebar({
 
   return (
     <>
-      <div className="fixed inset-0 z-40 bg-black/60 sm:hidden" onClick={onToggle} />
-      <div className="fixed inset-y-0 left-0 z-50 h-full w-[230px] overflow-y-auto border-r border-line bg-zinc-950 px-3.5 py-[18px] sm:sticky sm:top-(--nav-h) sm:z-auto sm:h-[calc(100dvh-var(--nav-h)-var(--dock-h))] sm:flex-none sm:bg-transparent">
+      <div className="fade-in fixed inset-0 z-40 bg-black/60 sm:hidden glass:backdrop-blur-sm" onClick={onToggle} />
+      <div className="fixed inset-y-0 left-0 z-50 h-full w-[230px] overflow-y-auto border-r border-line bg-zinc-950 px-3.5 py-[18px] max-sm:w-[min(290px,85vw)] max-sm:pb-[calc(18px+env(safe-area-inset-bottom))] max-sm:glass:rounded-r-3xl max-sm:glass:bg-[#0f0f13]/90 max-sm:glass:backdrop-blur-2xl sm:sticky sm:top-(--nav-h) sm:z-auto sm:h-[calc(100dvh-var(--nav-h)-var(--dock-h))] sm:flex-none sm:bg-transparent">
       <div className="mb-2.5 flex items-center justify-between">
         <div className="text-[11px] font-bold tracking-[0.6px] text-zinc-500">LIBRARIES</div>
         <button className="cursor-pointer text-zinc-500 hover:text-zinc-300" onClick={onToggle}>
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index e33b7b7..ea1db13 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -2,6 +2,8 @@
 
 /* Utilities written as `glass:…` only apply under the Liquid Glass interface style. */
 @custom-variant glass (&:where([data-ui='glass'], [data-ui='glass'] *));
+/* Set on <html> while the phone layout has slid the top bars away on scroll (see Navbar). */
+@custom-variant nav-hidden (&:where([data-nav-hidden], [data-nav-hidden] *));
 
 :root {
   --accent: #8b5cf6;
diff --git a/apps/web/src/routes/Boards.tsx b/apps/web/src/routes/Boards.tsx
index f935d2a..1acd6dd 100644
--- a/apps/web/src/routes/Boards.tsx
+++ b/apps/web/src/routes/Boards.tsx
@@ -194,7 +194,7 @@ export function BoardView() {
           </span>
         </div>
       </div>
-      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur transition-transform duration-300 max-md:nav-hidden:-translate-y-[calc(100%+var(--nav-h))] glass:backdrop-blur-2xl">
         <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-3">
           <FilterToolbar filters={filters} actions={actions} selection={selection} />
         </div>
diff --git a/apps/web/src/routes/Discover.tsx b/apps/web/src/routes/Discover.tsx
index 2e92226..786114f 100644
--- a/apps/web/src/routes/Discover.tsx
+++ b/apps/web/src/routes/Discover.tsx
@@ -113,7 +113,7 @@ export function Discover() {
           Built from what you like, watch and linger on. Cards show the tag that earned them a spot.
         </div>
       </div>
-      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur transition-transform duration-300 max-md:nav-hidden:-translate-y-[calc(100%+var(--nav-h))] glass:backdrop-blur-2xl">
         <div className="flex flex-wrap items-center gap-4 px-4 sm:px-8 py-3">
           <div className="flex rounded-lg border border-line bg-zinc-900 p-0.5">
             {(['all', 'image', 'video'] as const).map((t) => (
diff --git a/apps/web/src/routes/Explore.tsx b/apps/web/src/routes/Explore.tsx
index 6fe2a36..1b648a6 100644
--- a/apps/web/src/routes/Explore.tsx
+++ b/apps/web/src/routes/Explore.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { PanelLeft } from 'lucide-react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../lib/api';
@@ -63,9 +64,17 @@ export function Explore() {
             <span className="text-[13px] text-zinc-500">
               {media.total} item{media.total === 1 ? '' : 's'}
             </span>
+            {/* Phones get this instead of the collapsed sidebar strip, which ate a column of the grid. */}
+            <button
+              onClick={() => setSidebarCollapsed(false)}
+              className="ml-auto flex cursor-pointer items-center gap-1.5 self-center rounded-btn border border-line px-3 py-1.5 text-[12.5px] font-semibold text-zinc-300 hover:text-zinc-100 sm:hidden glass:bg-white/[0.04] glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
+            >
+              <PanelLeft size={14} />
+              Libraries &amp; tags
+            </button>
           </div>
         </div>
-        <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
+        <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur transition-transform duration-300 max-md:nav-hidden:-translate-y-[calc(100%+var(--nav-h))] glass:backdrop-blur-2xl">
           <div className="px-4 sm:px-8 py-3">
             <FilterToolbar filters={filters} actions={actions} selection={selection} />
           </div>
diff --git a/apps/web/src/routes/LibraryView.tsx b/apps/web/src/routes/LibraryView.tsx
index 349a789..bc3626f 100644
--- a/apps/web/src/routes/LibraryView.tsx
+++ b/apps/web/src/routes/LibraryView.tsx
@@ -34,7 +34,7 @@ export function LibraryView() {
           </span>
         </div>
       </div>
-      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur glass:backdrop-blur-2xl">
+      <div className="sticky top-(--nav-h) z-20 mt-3.5 border-b border-line bg-bar backdrop-blur transition-transform duration-300 max-md:nav-hidden:-translate-y-[calc(100%+var(--nav-h))] glass:backdrop-blur-2xl">
         <div className="mx-auto max-w-[1400px] px-4 sm:px-8 py-3">
           <FilterToolbar filters={filters} actions={actions} selection={selection} />
         </div>

From eb492da0129b7f149a492a66dd24c722e0d46c1c Mon Sep 17 00:00:00 2001
From: Fernando <fernandete2003pro@gmail.com>
Date: Fri, 2 Oct 2026 12:20:44 +0000
Subject: [PATCH 3/4] Simplify and tone down the Liquid Glass style

- Merge the separate Classic/Glass tile and card components into single shared components driven by glass: variants
- Replace ad-hoc rounded-xl/rounded-panel radii on thumbnails with a shared rounded-media token
- Tone down Liquid Glass styling: smaller nav pills/icons, plain icons instead of colored tiles, tighter hero banner and spacing
- Drop unused glass-card CSS helper and old radius overrides
---
 apps/web/src/components/FilterToolbar.tsx  |  12 +--
 apps/web/src/components/MediaCard.tsx      |  21 ++---
 apps/web/src/components/Navbar.tsx         |  81 +++++++---------
 apps/web/src/components/TagSearchInput.tsx |   6 +-
 apps/web/src/index.css                     |  29 ++----
 apps/web/src/routes/Boards.tsx             |   6 +-
 apps/web/src/routes/Dashboard.tsx          | 103 +++++++++------------
 apps/web/src/routes/Discover.tsx           |   2 +-
 apps/web/src/routes/Explore.tsx            |   2 +-
 apps/web/src/routes/LibraryView.tsx        |   2 +-
 apps/web/src/routes/settings/MiscTabs.tsx  |   8 +-
 apps/web/src/routes/settings/index.tsx     |   4 +-
 12 files changed, 111 insertions(+), 165 deletions(-)

diff --git a/apps/web/src/components/FilterToolbar.tsx b/apps/web/src/components/FilterToolbar.tsx
index 876b35f..92a54a3 100644
--- a/apps/web/src/components/FilterToolbar.tsx
+++ b/apps/web/src/components/FilterToolbar.tsx
@@ -10,13 +10,13 @@ import type { FilterState, FilterActions } from '../hooks/useFilters';
 import type { SelectionApi } from '../hooks/useSelection';
 
 function segStyle(active: boolean): string {
-  return `cursor-pointer rounded-md px-[13px] py-1.5 text-[12.5px] font-semibold ${
+  return `cursor-pointer rounded-md px-[13px] py-1.5 text-[12.5px] font-semibold glass:rounded-full ${
     active ? 'bg-accent text-white' : 'text-zinc-400 hover:text-zinc-200'
   }`;
 }
 
 function buttonStyle(accent?: boolean): string {
-  return `flex flex-none cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg border px-3 py-[7px] text-[13px] font-semibold ${
+  return `flex flex-none cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg border px-3 py-[7px] text-[13px] font-semibold glass:rounded-full glass:px-3.5 ${
     accent ? 'border-accent/40 text-accent' : 'border-line text-zinc-400 hover:text-zinc-200'
   }`;
 }
@@ -86,7 +86,7 @@ export function FilterToolbar({
     {
       id: 'type',
       inline: (
-        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5">
+        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5 glass:rounded-full glass:bg-white/[0.04]">
           {(['all', 'image', 'video'] as const).map((t) => (
             <div key={t} className={segStyle(filters.typeParam === t)} onClick={() => actions.setType(t)}>
               {t === 'all' ? 'All' : t === 'image' ? 'Images' : 'Videos'}
@@ -94,7 +94,7 @@ export function FilterToolbar({
           ))}
           <div
             title="Show only liked media"
-            className={`flex cursor-pointer items-center rounded-md px-[13px] py-1.5 text-[13px] font-semibold ${
+            className={`flex cursor-pointer items-center rounded-md px-[13px] py-1.5 text-[13px] font-semibold glass:rounded-full ${
               filters.liked ? 'bg-rose-500 text-white' : 'text-zinc-400 hover:text-rose-400'
             }`}
             onClick={actions.toggleLiked}
@@ -126,7 +126,7 @@ export function FilterToolbar({
     {
       id: 'sort',
       inline: (
-        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5">
+        <div className="flex flex-none rounded-lg border border-line bg-zinc-900 p-0.5 glass:rounded-full glass:bg-white/[0.04]">
           {SORTS.map((srt) => (
             <div key={srt.key} className={segStyle(filters.sort === srt.key)} onClick={() => actions.setSort(srt.key)}>
               <span className="flex items-center gap-1">
@@ -264,7 +264,7 @@ export function FilterToolbar({
             <div
               title="More filters"
               aria-label="More filters"
-              className="relative flex cursor-pointer items-center rounded-lg border border-line px-2 py-[7px] text-zinc-400 hover:text-zinc-200"
+              className="relative flex cursor-pointer items-center rounded-lg border border-line px-2 py-[7px] text-zinc-400 hover:text-zinc-200 glass:rounded-full"
               onClick={() => setMenuOpen((open) => !open)}
             >
               <MoreVertical size={16} />
diff --git a/apps/web/src/components/MediaCard.tsx b/apps/web/src/components/MediaCard.tsx
index 868df74..25c5b97 100644
--- a/apps/web/src/components/MediaCard.tsx
+++ b/apps/web/src/components/MediaCard.tsx
@@ -52,15 +52,15 @@ export const MediaCard = memo(function MediaCard({
   return (
     <div className="cursor-pointer select-none" onClick={(e) => onActivate(index, e)}>
       <div
-        className={`group relative aspect-square w-full overflow-hidden rounded-panel border bg-zinc-900 glass:rounded-xl glass:bg-white/[0.03] glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_18px_48px_rgba(0,0,0,0.16)] glass:transition-colors ${
-          selected ? 'border-accent ring-2 ring-accent' : 'border-line glass:hover:border-white/20'
+        className={`group relative aspect-square w-full overflow-hidden rounded-media border bg-zinc-900 glass:bg-white/[0.03] glass:transition-colors ${
+          selected ? 'border-accent ring-2 ring-accent' : 'border-line glass:border-white/[0.07] glass:hover:border-white/25'
         }`}
       >
         <img
           src={thumbUrl(item.id)}
           alt={item.filename}
           loading="lazy"
-          className="h-full w-full object-cover glass:transition-transform glass:duration-300 glass:group-hover:scale-[1.03]"
+          className="h-full w-full object-cover"
         />
         {item.type === 'video' && <TypeBadge type={item.type} />}
         <DurationBadge seconds={item.durationSeconds} />
@@ -120,14 +120,9 @@ export function WideCard({
   showProgress?: boolean;
 }) {
   return (
-    <div className="group w-[200px] flex-none cursor-pointer glass:w-[220px]" onClick={onClick}>
-      <div className="relative h-[112px] w-[200px] overflow-hidden rounded-panel border border-line bg-zinc-900 glass:h-[124px] glass:w-[220px] glass:rounded-xl glass:bg-white/[0.03] glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_18px_48px_rgba(0,0,0,0.16)] glass:transition-colors glass:group-hover:border-white/20">
-        <img
-          src={thumbUrl(item.id)}
-          alt={item.filename}
-          loading="lazy"
-          className="h-full w-full object-cover glass:transition-transform glass:duration-300 glass:group-hover:scale-[1.04]"
-        />
+    <div className="group w-[200px] flex-none cursor-pointer" onClick={onClick}>
+      <div className="relative h-[112px] w-[200px] overflow-hidden rounded-media border border-line bg-zinc-900 glass:border-white/[0.07] glass:transition-colors glass:group-hover:border-white/25">
+        <img src={thumbUrl(item.id)} alt={item.filename} loading="lazy" className="h-full w-full object-cover" />
         {showProgress && (
           <div className="absolute inset-x-0 bottom-0 h-[3px] bg-white/15">
             <div className="h-full bg-accent" style={{ width: `${Math.round(item.viewProgress * 100)}%` }} />
@@ -143,8 +138,8 @@ export function WideCard({
           <HeartButton mediaId={item.id} liked={item.liked} size="sm" />
         </div>
       </div>
-      <div className="mt-[7px] truncate text-[12.5px] font-semibold text-zinc-200 glass:mt-2.5 glass:px-0.5 glass:font-display glass:text-[13.5px] glass:text-zinc-100">{item.filename}</div>
-      <div className="mt-px text-[11px] text-zinc-500 glass:px-0.5 glass:text-[12px]">{item.libraryName}</div>
+      <div className="mt-[7px] truncate text-[12.5px] font-semibold text-zinc-200 glass:text-zinc-100">{item.filename}</div>
+      <div className="mt-px text-[11px] text-zinc-500">{item.libraryName}</div>
     </div>
   );
 }
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 0a0b485..ef1ed2b 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -9,11 +9,11 @@ import { TagSearchInput } from './TagSearchInput';
 import { api } from '../lib/api';
 
 const NAV_ITEMS = [
-  { to: '/', label: 'Dashboard', icon: Home, tint: 'from-sky-400 to-blue-600' },
-  { to: '/explore', label: 'Explore', icon: LayoutGrid, tint: 'from-violet-400 to-indigo-600' },
-  { to: '/discover', label: 'Discover', icon: Sparkles, tint: 'from-amber-300 to-orange-500' },
-  { to: '/boards', label: 'Boards', icon: Images, tint: 'from-pink-400 to-rose-600' },
-  { to: '/downloader', label: 'Downloader', icon: Download, tint: 'from-emerald-300 to-teal-600' },
+  { to: '/', label: 'Dashboard', icon: Home },
+  { to: '/explore', label: 'Explore', icon: LayoutGrid },
+  { to: '/discover', label: 'Discover', icon: Sparkles },
+  { to: '/boards', label: 'Boards', icon: Images },
+  { to: '/downloader', label: 'Downloader', icon: Download },
 ];
 
 // Labels only show from xl up; below that the links collapse to icons so nothing gets pushed off
@@ -21,33 +21,22 @@ const NAV_ITEMS = [
 function navPill(active: boolean): string {
   const base =
     'flex cursor-pointer items-center gap-2 rounded-field px-2.5 py-2 text-[13.5px] font-semibold xl:px-3.5 xl:py-[7px] ' +
-    'glass:h-10 glass:rounded-2xl glass:border glass:py-0 glass:pl-[7px] glass:pr-[7px] glass:font-display glass:text-[14px] glass:transition-colors xl:glass:pl-2 xl:glass:pr-3.5';
+    'glass:h-9 glass:rounded-full glass:border glass:py-0 glass:px-3 glass:text-[13.5px] glass:transition-colors xl:glass:px-3.5';
   return `${base} ${
     active
-      ? 'bg-zinc-800 text-zinc-100 glass:border-accent/55 glass:bg-accent/20 glass:text-white glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]'
-      : 'text-zinc-400 hover:text-zinc-200 glass:border-white/[0.045] glass:bg-white/[0.02] glass:font-medium glass:hover:bg-white/5 glass:hover:text-white'
+      ? 'bg-zinc-800 text-zinc-100 glass:border-white/10 glass:bg-white/10 glass:text-white glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]'
+      : 'text-zinc-400 hover:text-zinc-200 glass:border-transparent glass:font-medium glass:hover:bg-white/5 glass:hover:text-white'
   }`;
 }
 
 function iconButton(active: boolean): string {
-  return `relative flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 glass:h-[38px] glass:w-[38px] glass:rounded-full glass:border glass:text-zinc-300 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] glass:transition-colors ${
+  return `relative flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-lg text-zinc-400 glass:h-9 glass:w-9 glass:rounded-full glass:border glass:transition-colors ${
     active
-      ? 'bg-zinc-800 glass:border-white/15 glass:bg-white/12 glass:text-white'
-      : 'hover:bg-zinc-900 glass:border-white/8 glass:bg-white/[0.03] glass:hover:bg-white/8 glass:hover:text-white'
+      ? 'bg-zinc-800 glass:border-white/10 glass:bg-white/10 glass:text-white'
+      : 'hover:bg-zinc-900 glass:border-transparent glass:hover:bg-white/5 glass:hover:text-zinc-200'
   }`;
 }
 
-/** Colored rounded tile behind a nav icon; only visible in the Liquid Glass style. */
-function IconTile({ tint, children, className = '' }: { tint: string; children: React.ReactNode; className?: string }) {
-  return (
-    <span
-      className={`hidden place-items-center rounded-[9px] bg-gradient-to-br text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] glass:grid ${tint} ${className}`}
-    >
-      {children}
-    </span>
-  );
-}
-
 const STATUS_COLOR: Record<string, string> = {
   running: 'text-amber-500',
   queued: 'text-zinc-500',
@@ -77,11 +66,11 @@ function JobsButton() {
       <button title="Jobs" onClick={() => setOpen((v) => !v)} className={iconButton(open)}>
         <Activity size={16} />
         {activeJobs.length > 0 && (
-          <span className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-accent glass:right-0.5 glass:top-0.5 glass:h-2 glass:w-2 glass:ring-2 glass:ring-zinc-950" />
+          <span className="absolute right-1 top-1 h-[7px] w-[7px] rounded-full bg-accent glass:right-[5px] glass:top-[5px] glass:ring-2 glass:ring-zinc-950" />
         )}
       </button>
       {open && (
-        <div className="absolute right-0 top-[42px] z-50 w-[280px] max-w-[calc(100vw-32px)] rounded-panel border border-line bg-surface p-3 shadow-xl glass:top-[46px] glass:w-[300px] glass:bg-surface/95 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_34px_110px_rgba(0,0,0,0.42)] glass:backdrop-blur-xl">
+        <div className="absolute right-0 top-[42px] z-50 w-[280px] max-w-[calc(100vw-32px)] rounded-panel border border-line bg-surface p-3 shadow-xl glass:top-[44px] glass:bg-surface/95 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_24px_64px_rgba(0,0,0,0.45)] glass:backdrop-blur-xl">
           <div className="mb-2 text-[12px] font-bold uppercase tracking-[0.3px] text-zinc-500">Running jobs</div>
           {activeJobs.length === 0 && (
             <div className="mb-3 flex flex-col gap-2">
@@ -89,7 +78,7 @@ function JobsButton() {
               <button
                 disabled={!libraries?.length || scanAllMutation.isPending}
                 onClick={() => scanAllMutation.mutate()}
-                className="w-full cursor-pointer rounded-lg border border-line py-[7px] text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40 glass:rounded-full"
+                className="w-full cursor-pointer rounded-btn border border-line py-[7px] text-[12.5px] font-semibold text-zinc-400 hover:text-zinc-200 disabled:opacity-40"
               >
                 Scan all now
               </button>
@@ -100,7 +89,7 @@ function JobsButton() {
               {activeJobs.map((job) => (
                 <div
                   key={job.id}
-                  className="rounded-lg border border-line bg-zinc-900 px-2.5 py-2 glass:rounded-xl glass:bg-white/[0.03] glass:px-3"
+                  className="rounded-lg border border-line bg-zinc-900 px-2.5 py-2 glass:bg-white/[0.03]"
                 >
                   <div className="mb-0.5 flex items-center justify-between gap-2">
                     <div className="truncate text-[12.5px] font-semibold">{job.label}</div>
@@ -118,7 +107,7 @@ function JobsButton() {
               setOpen(false);
               navigate('/settings?tab=jobs');
             }}
-            className="w-full cursor-pointer rounded-lg bg-zinc-800 py-[7px] text-[12.5px] font-semibold text-zinc-100 hover:bg-zinc-700 glass:rounded-full glass:bg-white/15 glass:py-2 glass:hover:bg-white/20"
+            className="w-full cursor-pointer rounded-btn bg-zinc-800 py-[7px] text-[12.5px] font-semibold text-zinc-100 hover:bg-zinc-700 glass:bg-white/12 glass:hover:bg-white/18"
           >
             View all jobs
           </button>
@@ -150,24 +139,25 @@ function LockButton() {
 function MobileDock({ items }: { items: typeof NAV_ITEMS }) {
   return (
     <nav
-      className="fixed inset-x-0 bottom-0 z-40 grid h-(--dock-h) border-t border-line bg-zinc-950/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden glass:inset-x-3 glass:bottom-[calc(10px+env(safe-area-inset-bottom))] glass:h-[58px] glass:rounded-[22px] glass:border glass:border-white/10 glass:bg-[#18181b]/70 glass:pb-0 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.5)] glass:backdrop-blur-2xl"
+      className="fixed inset-x-0 bottom-0 z-40 grid h-(--dock-h) border-t border-line bg-zinc-950/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden glass:inset-x-3 glass:bottom-[calc(10px+env(safe-area-inset-bottom))] glass:h-[56px] glass:rounded-2xl glass:border glass:border-white/10 glass:bg-[#18181b]/75 glass:pb-0 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_16px_40px_rgba(0,0,0,0.5)] glass:backdrop-blur-2xl"
       style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
     >
-      {items.map(({ to, label, icon: Icon, tint }) => (
+      {items.map(({ to, label, icon: Icon }) => (
         <NavLink
           key={to}
           to={to}
           className={({ isActive }) =>
-            `flex flex-col items-center justify-center gap-1 text-[10.5px] font-semibold glass:gap-0.5 ${
-              isActive ? 'text-zinc-100 [&_.dock-icon]:text-accent glass:[&_.dock-tile]:ring-2 glass:[&_.dock-tile]:ring-white/40' : 'text-zinc-500'
+            `flex min-w-0 flex-col items-center justify-center gap-[5px] px-1 text-[10.5px] font-semibold transition-colors ${
+              isActive ? 'text-zinc-100 [&_svg]:text-accent' : 'text-zinc-500 glass:hover:text-zinc-300'
             }`
           }
         >
-          <Icon size={19} className="dock-icon glass:hidden" />
-          <IconTile tint={tint} className="dock-tile h-7 w-7">
-            <Icon size={15} strokeWidth={2.4} />
-          </IconTile>
-          {label}
+          {({ isActive }) => (
+            <>
+              <Icon size={20} strokeWidth={isActive ? 2.4 : 2} />
+              <span className="max-w-full truncate leading-none">{label}</span>
+            </>
+          )}
         </NavLink>
       ))}
     </nav>
@@ -233,26 +223,23 @@ export function Navbar() {
     <>
       <div
         ref={barRef}
-        className="sticky top-0 z-40 flex flex-wrap items-center transition-transform duration-300 max-md:nav-hidden:-translate-y-full gap-x-2 gap-y-2.5 border-b border-line bg-zinc-950/75 px-4 py-2.5 backdrop-blur-xl md:h-[60px] md:flex-nowrap md:gap-x-4 md:px-5 md:py-0 glass:border-white/[0.06] glass:bg-[#0b0b0e]/70 glass:backdrop-blur-2xl lg:glass:gap-x-5 lg:glass:px-6"
+        className="sticky top-0 z-40 flex flex-wrap items-center transition-transform duration-300 max-md:nav-hidden:-translate-y-full gap-x-2 gap-y-2 border-b border-line bg-zinc-950/75 px-4 py-2 backdrop-blur-xl md:h-[60px] md:flex-nowrap md:gap-x-4 md:px-5 md:py-0 glass:border-white/[0.06] glass:bg-[#0b0b0e]/70 glass:backdrop-blur-2xl"
       >
-        <div className="flex shrink-0 cursor-pointer items-center gap-2 glass:gap-2.5" onClick={() => navigate('/')}>
+        <div className="flex shrink-0 cursor-pointer items-center gap-2" onClick={() => navigate('/')}>
           <img src="/icon.png" alt="Sakuya" className="h-7 w-7" />
-          <div className="text-[15px] font-bold tracking-tight md:hidden lg:block glass:font-display glass:text-[16px] glass:font-semibold">
+          <div className="text-[15px] font-bold tracking-tight md:hidden lg:block glass:font-display glass:font-semibold">
             Sakuya<span className="text-accent glass:hidden">.</span>
           </div>
         </div>
-        <nav className="hidden items-center gap-1 md:flex glass:gap-1.5">
-          {items.map(({ to, label, icon: Icon, tint }) => (
+        <nav className="hidden items-center gap-1 md:flex glass:gap-0.5">
+          {items.map(({ to, label, icon: Icon }) => (
             <NavLink key={to} to={to} className={({ isActive }) => navPill(isActive)} title={label}>
-              <Icon size={15} className="xl:hidden glass:hidden" />
-              <IconTile tint={tint} className="h-[26px] w-[26px]">
-                <Icon size={14} strokeWidth={2.4} />
-              </IconTile>
+              <Icon size={15} className="xl:hidden glass:xl:block" />
               <span className="hidden xl:inline">{label}</span>
             </NavLink>
           ))}
         </nav>
-        <div className="order-last w-full md:order-none md:ml-2 md:w-auto md:min-w-0 md:max-w-[420px] md:flex-1 glass:md:ml-auto glass:md:max-w-[360px]">
+        <div className="order-last w-full md:order-none md:ml-2 md:w-auto md:min-w-0 md:max-w-[420px] md:flex-1 glass:md:ml-auto glass:md:max-w-[380px]">
           <TagSearchInput
             tags={searchTags}
             onAddTag={(tag) => {
@@ -269,7 +256,7 @@ export function Navbar() {
             placeholder="Search tags, filenames, folders..."
           />
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-2 glass:gap-2.5 glass:md:ml-0">
+        <div className="ml-auto flex shrink-0 items-center gap-2 glass:gap-1 glass:md:ml-0">
           <JobsButton />
           <LockButton />
           <button
diff --git a/apps/web/src/components/TagSearchInput.tsx b/apps/web/src/components/TagSearchInput.tsx
index 4b4ebd5..c7ac6ff 100644
--- a/apps/web/src/components/TagSearchInput.tsx
+++ b/apps/web/src/components/TagSearchInput.tsx
@@ -126,7 +126,7 @@ export function TagSearchInput({
     <div className="relative w-full">
       <div
         ref={boxRef}
-        className="flex w-full flex-wrap items-center gap-1.5 rounded-lg border border-line bg-zinc-900 px-2 py-1.5 focus-within:border-line-hover glass:min-h-[38px] glass:rounded-[19px] glass:bg-white/[0.04] glass:pl-3 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_8px_26px_rgba(24,24,27,0.05)] glass:transition-colors glass:focus-within:bg-white/[0.06]"
+        className="flex w-full flex-wrap items-center gap-1.5 rounded-lg border border-line bg-zinc-900 px-2 py-1.5 focus-within:border-line-hover glass:min-h-9 glass:rounded-full glass:border-white/[0.07] glass:bg-white/[0.04] glass:pl-3 glass:transition-colors glass:focus-within:border-white/20 glass:focus-within:bg-white/[0.06]"
         onClick={() => inputRef.current?.focus()}
       >
         <Search size={15} className="hidden shrink-0 text-zinc-500 glass:block" />
@@ -170,7 +170,7 @@ export function TagSearchInput({
         createPortal(
           <div
             style={{ top: anchor.top, left: anchor.left, width: anchor.width }}
-            className="fixed z-[97] overflow-hidden rounded-lg border border-line-hover bg-zinc-900 shadow-[0_8px_24px_rgba(0,0,0,0.5)] glass:rounded-2xl glass:border-white/12 glass:bg-[#18181b]/95 glass:p-1 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_24px_64px_rgba(0,0,0,0.5)] glass:backdrop-blur-xl"
+            className="fixed z-[97] overflow-hidden rounded-lg border border-line-hover bg-zinc-900 shadow-[0_8px_24px_rgba(0,0,0,0.5)] glass:rounded-panel glass:border-white/12 glass:bg-[#18181b]/95 glass:p-1 glass:shadow-[0_24px_64px_rgba(0,0,0,0.5)] glass:backdrop-blur-xl"
           >
             {visible.map((s, i) => (
               <div
@@ -180,7 +180,7 @@ export function TagSearchInput({
                   commit(s.name);
                 }}
                 onMouseEnter={() => setHighlight(i)}
-                className={`flex cursor-pointer items-center justify-between px-3 py-2 text-[12.5px] glass:rounded-xl ${
+                className={`flex cursor-pointer items-center justify-between px-3 py-2 text-[12.5px] glass:rounded-lg ${
                   i === highlight ? 'bg-zinc-800 text-zinc-100 glass:bg-white/10' : 'text-zinc-200'
                 }`}
               >
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index ea1db13..632d2a2 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -33,6 +33,9 @@
   --radius-btn: 7px;
   --radius-field: 7px;
   --radius-panel: 10px;
+  /* Thumbnails and covers. Deliberately modest in both styles: a grid of heavily rounded
+     photos reads as a sheet of stickers. */
+  --radius-media: 10px;
 }
 
 [data-ui='glass'] {
@@ -42,13 +45,9 @@
   --color-surface: #131316;
   --color-bar: rgb(11 11 14 / 0.8);
   --radius-btn: 9999px;
-  --radius-field: 1.25rem;
-  --radius-panel: 1.5rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1.25rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2.125rem;
+  --radius-field: 10px;
+  --radius-panel: 14px;
+  --radius-media: 10px;
 }
 
 html {
@@ -82,22 +81,6 @@ body {
   letter-spacing: -0.01em;
 }
 
-/* Frosted card surface with a top-edge highlight, as on apps.umbrel.com. */
-.glass-card {
-  border: 1px solid rgb(255 255 255 / 0.08);
-  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.015));
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 18px 48px rgb(0 0 0 / 0.16);
-  transition:
-    border-color 0.2s ease,
-    background 0.2s ease;
-}
-.glass-card:hover {
-  border-color: rgb(255 255 255 / 0.14);
-  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
-}
-
 * {
   box-sizing: border-box;
   scrollbar-width: thin;
diff --git a/apps/web/src/routes/Boards.tsx b/apps/web/src/routes/Boards.tsx
index 1acd6dd..52f0e38 100644
--- a/apps/web/src/routes/Boards.tsx
+++ b/apps/web/src/routes/Boards.tsx
@@ -33,7 +33,7 @@ export function Boards() {
 
   return (
     <div className="fade-in mx-auto max-w-[1400px] px-4 sm:px-8 pb-16 pt-7">
-      <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Boards</h1>
+      <h1 className="m-0 text-[22px] font-extrabold glass:text-[24px] glass:font-semibold">Boards</h1>
       <div className="mb-5 mt-1 text-[13px] text-zinc-500">
         Your own collections — add any image or video to a board from its detail view.
       </div>
@@ -102,7 +102,7 @@ function BoardCard({ board }: { board: BoardWithStats }) {
   return (
     <div className="group">
       <div
-        className="relative aspect-[16/10] w-full cursor-pointer overflow-hidden rounded-xl border border-line bg-zinc-900"
+        className="relative aspect-[16/10] w-full cursor-pointer overflow-hidden rounded-media border border-line bg-zinc-900 glass:border-white/[0.07] glass:transition-colors glass:hover:border-white/25"
         onClick={() => navigate(`/boards/${board.id}`)}
       >
         {board.thumbMediaId ? (
@@ -188,7 +188,7 @@ export function BoardView() {
     <div className="fade-in">
       <div className="mx-auto max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">{board?.name ?? '…'}</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[24px] glass:font-semibold">{board?.name ?? '…'}</h1>
           <span className="text-[13px] text-zinc-500">
             {media.total} item{media.total === 1 ? '' : 's'}
           </span>
diff --git a/apps/web/src/routes/Dashboard.tsx b/apps/web/src/routes/Dashboard.tsx
index 174b2bf..71ae0d1 100644
--- a/apps/web/src/routes/Dashboard.tsx
+++ b/apps/web/src/routes/Dashboard.tsx
@@ -27,7 +27,6 @@ export function Dashboard() {
     onError: (err: Error) => showToast(err.message),
   });
 
-  const Tile = glass ? GlassTile : ClassicTile;
   const libraryCover = (lib: NonNullable<typeof data>['libraries'][number]) =>
     lib.customImagePath ? (
       <img src={libraryCoverUrl(lib.id)} alt={lib.name} className="h-full w-full object-cover" />
@@ -38,7 +37,7 @@ export function Dashboard() {
     );
 
   return (
-    <div className="fade-in mx-auto max-w-[1400px] px-4 pb-16 pt-7 sm:px-8 glass:pt-6">
+    <div className="fade-in mx-auto max-w-[1400px] px-4 pb-16 pt-7 sm:px-8 glass:pt-5">
       {glass && settings && settings.dashboard_hero !== '0' && (
         <Hero
           floating={(data?.recentlyAdded ?? []).slice(0, FLOAT_SLOTS.length)}
@@ -52,7 +51,7 @@ export function Dashboard() {
       )}
 
       <SectionHeader title="Your Libraries" />
-      <div className="mb-9 flex gap-4 overflow-x-auto pb-2 glass:-mx-1 glass:mb-10 glass:gap-3 glass:px-1 glass:pb-3">
+      <div className="mb-9 flex gap-4 overflow-x-auto pb-2">
         <Tile
           title="Likes"
           subtitle="Media you hearted"
@@ -60,8 +59,8 @@ export function Dashboard() {
           liked
           onClick={() => navigate('/explore?liked=1')}
           cover={
-            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-rose-500/20 to-zinc-900 text-rose-500/80 glass:from-rose-400 glass:via-pink-500 glass:to-fuchsia-700 glass:text-white/90">
-              <Heart size={glass ? 48 : 56} fill="currentColor" strokeWidth={1.5} />
+            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-rose-500/20 to-zinc-900 text-rose-500/80">
+              <Heart size={56} fill="currentColor" strokeWidth={1.5} />
             </div>
           }
         />
@@ -76,20 +75,20 @@ export function Dashboard() {
           />
         ))}
         {data && data.libraries.length === 0 && (
-          <div className="flex h-[130px] w-full flex-col items-center justify-center rounded-xl border border-dashed border-line text-zinc-500 glass:h-[190px]">
+          <div className="flex h-[130px] w-full flex-col items-center justify-center rounded-xl border border-dashed border-line text-zinc-500">
             <div className="text-sm font-semibold">No libraries yet</div>
             <div
-              className="mt-1 cursor-pointer text-[12.5px] font-semibold text-accent glass:mt-3 glass:rounded-full glass:bg-white/15 glass:px-4 glass:py-2 glass:text-[13px] glass:text-zinc-100 glass:hover:bg-white/20"
+              className="mt-1 cursor-pointer text-[12.5px] font-semibold text-accent"
               onClick={() => navigate('/settings')}
             >
-              Create one in Settings{glass ? '' : ' →'}
+              Create one in Settings →
             </div>
           </div>
         )}
       </div>
 
       <SectionHeader title="Continue Watching" onSeeAll={() => navigate('/explore?type=video')} />
-      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2 glass:mb-10 glass:gap-4 glass:pb-3">
+      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2">
         {(data?.continueWatching ?? []).map((item, i) => (
           <WideCard
             key={item.id}
@@ -104,7 +103,7 @@ export function Dashboard() {
       </div>
 
       <SectionHeader title="Recently Viewed" onSeeAll={() => navigate('/explore')} />
-      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2 glass:mb-10 glass:gap-4 glass:pb-3">
+      <div className="mb-9 flex gap-3.5 overflow-x-auto pb-2">
         {(data?.recentlyViewed ?? []).map((item, i) => (
           <WideCard
             key={item.id}
@@ -119,7 +118,7 @@ export function Dashboard() {
       </div>
 
       <SectionHeader title="Recently Added" onSeeAll={() => navigate('/explore')} />
-      <div className="flex gap-3.5 overflow-x-auto pb-2 glass:gap-4 glass:pb-3">
+      <div className="flex gap-3.5 overflow-x-auto pb-2">
         {(data?.recentlyAdded ?? []).map((item, i) => (
           <WideCard key={item.id} item={item} onClick={() => setViewer({ items: data!.recentlyAdded, index: i })} />
         ))}
@@ -142,11 +141,11 @@ export function Dashboard() {
 
 function SectionHeader({ title, onSeeAll }: { title: string; onSeeAll?: () => void }) {
   return (
-    <div className="mb-3.5 flex items-baseline justify-between glass:mb-4 glass:items-center">
-      <h2 className="m-0 text-lg font-bold glass:text-[22px] sm:glass:text-[26px]">{title}</h2>
+    <div className="mb-3.5 flex items-baseline justify-between glass:items-center">
+      <h2 className="m-0 text-lg font-bold glass:text-[20px]">{title}</h2>
       {onSeeAll && (
         <div
-          className="cursor-pointer text-xs font-semibold text-accent glass:rounded-full glass:bg-white/10 glass:px-4 glass:py-1.5 glass:text-[13px] glass:font-medium glass:text-zinc-100 glass:transition-colors glass:hover:bg-white/15"
+          className="cursor-pointer text-xs font-semibold text-accent glass:rounded-full glass:border glass:border-white/10 glass:px-3 glass:py-1 glass:text-[12px] glass:font-medium glass:text-zinc-300 glass:transition-colors glass:hover:bg-white/5 glass:hover:text-white"
           onClick={onSeeAll}
         >
           See all<span className="glass:hidden"> →</span>
@@ -166,50 +165,34 @@ interface TileProps {
   liked?: boolean;
 }
 
-function ClassicTile({ title, subtitle, count, cover, onClick, liked }: TileProps) {
+function Tile({ title, subtitle, count, cover, onClick, liked }: TileProps) {
   return (
-    <div className="w-[220px] flex-none cursor-pointer" onClick={onClick}>
-      <div className="relative h-[130px] w-[220px] overflow-hidden rounded-xl border border-line bg-zinc-900">
+    <div className="group w-[220px] flex-none cursor-pointer" onClick={onClick}>
+      <div className="relative h-[130px] w-[220px] overflow-hidden rounded-media border border-line bg-zinc-900 glass:border-white/[0.07] glass:transition-colors glass:group-hover:border-white/25">
         {cover}
         {liked && (
-          <div className="absolute left-2 top-2 flex items-center gap-1 rounded-md bg-rose-500/80 px-[7px] py-0.5 text-[10px] font-bold tracking-[0.4px] text-white backdrop-blur">
+          <div className="absolute left-2 top-2 flex items-center gap-1 rounded-md bg-rose-500/80 px-[7px] py-0.5 text-[10px] font-bold tracking-[0.4px] text-white backdrop-blur glass:rounded-full">
             <Heart size={12} fill="currentColor" />
             LIKES
           </div>
         )}
-        <div className="absolute right-2 top-2 rounded-md bg-black/60 px-[7px] py-0.5 text-[10px] font-semibold tracking-[0.4px] text-zinc-200 backdrop-blur">
-          {count} ITEMS
+        <div className="absolute right-2 top-2 rounded-md bg-black/60 px-[7px] py-0.5 text-[10px] font-semibold tracking-[0.4px] text-zinc-200 backdrop-blur glass:rounded-full">
+          {count.toLocaleString()} ITEMS
         </div>
       </div>
-      <div className="mt-2 text-[13px] font-semibold text-zinc-100">{title}</div>
+      <div className="mt-2 truncate text-[13px] font-semibold text-zinc-100">{title}</div>
       <div className="mt-px text-[11px] text-zinc-500">{subtitle}</div>
     </div>
   );
 }
 
-function GlassTile({ title, subtitle, count, cover, onClick }: TileProps) {
-  return (
-    <div className="glass-card w-[200px] flex-none cursor-pointer rounded-xl p-3" onClick={onClick}>
-      <div className="relative h-[112px] overflow-hidden rounded-[14px] bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]">
-        {cover}
-        <div className="absolute right-2 top-2 rounded-full bg-black/55 px-2 py-0.5 text-[10.5px] font-semibold text-zinc-100 backdrop-blur">
-          {count.toLocaleString()}
-        </div>
-      </div>
-      <div className="mt-3 truncate text-center font-display text-[15px] font-semibold text-zinc-50">{title}</div>
-      <div className="mt-0.5 text-center text-[12px] text-zinc-500">{subtitle}</div>
-    </div>
-  );
-}
-
-// Tilted thumbnails scattered around the hero, echoing the floating app icons on apps.umbrel.com.
+// Tilted thumbnails drifting on the right of the banner, echoing the floating app icons on
+// apps.umbrel.com. Kept to the right half so they never sit behind the headline.
 const FLOAT_SLOTS = [
-  { className: 'left-[4%] top-[-20px] h-[74px] w-[74px] opacity-35 blur-[1.5px]', r: '-14deg', delay: '0s' },
-  { className: 'left-[40%] bottom-[-28px] h-[64px] w-[64px] opacity-30 blur-[2px]', r: '12deg', delay: '-2s' },
-  { className: 'right-[5%] top-[24px] h-[84px] w-[84px] opacity-70', r: '10deg', delay: '-1s' },
-  { className: 'right-[3%] bottom-[-16px] h-[92px] w-[92px] opacity-80', r: '-8deg', delay: '-3s' },
-  { className: 'right-[34%] top-[-24px] h-[58px] w-[58px] opacity-45 blur-[1px]', r: '-6deg', delay: '-4s' },
-  { className: 'right-[38%] bottom-[18px] h-[46px] w-[46px] opacity-25 blur-[2px]', r: '18deg', delay: '-5s' },
+  { className: 'right-[30%] top-[-14px] h-[64px] w-[64px] opacity-40 blur-[1px]', r: '-10deg', delay: '0s' },
+  { className: 'right-[4%] top-[14px] h-[76px] w-[76px] opacity-75', r: '9deg', delay: '-1.5s' },
+  { className: 'right-[6%] bottom-[-14px] h-[84px] w-[84px] opacity-85', r: '-7deg', delay: '-3s' },
+  { className: 'right-[33%] bottom-[-18px] h-[56px] w-[56px] opacity-35 blur-[1.5px]', r: '14deg', delay: '-4.5s' },
 ];
 
 function Hero({
@@ -230,12 +213,12 @@ function Hero({
   onClose: () => void;
 }) {
   return (
-    <div className="relative mb-10 overflow-hidden rounded-3xl border border-white/[0.06] bg-black shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_34px_110px_rgba(0,0,0,0.42)] sm:mb-12">
+    <div className="relative mb-9 overflow-hidden rounded-2xl border border-white/[0.07] bg-black shadow-[inset_0_1px_0_rgba(255,255,255,0.07),0_24px_70px_rgba(0,0,0,0.4)]">
       <div
         className="pointer-events-none absolute inset-0"
         style={{
           background:
-            'radial-gradient(circle at 76% 50%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 340px)',
+            'radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 300px)',
         }}
       />
       {floating.map((item, i) => {
@@ -243,7 +226,7 @@ function Hero({
         return (
           <div
             key={item.id}
-            className={`floaty pointer-events-none absolute hidden overflow-hidden rounded-[22%] border border-white/15 shadow-[inset_0_1px_0_rgba(255,255,255,0.3),0_20px_40px_rgba(0,0,0,0.5)] md:block ${slot.className}`}
+            className={`floaty pointer-events-none absolute hidden overflow-hidden rounded-media border border-white/15 shadow-[inset_0_1px_0_rgba(255,255,255,0.25),0_16px_32px_rgba(0,0,0,0.5)] lg:block ${slot.className}`}
             style={{ '--r': slot.r, animationDelay: slot.delay } as CSSProperties}
           >
             <img src={thumbUrl(item.id)} alt="" className="h-full w-full object-cover" />
@@ -254,40 +237,38 @@ function Hero({
         title="Hide banner"
         aria-label="Hide banner"
         onClick={onClose}
-        className="absolute right-3 top-3 z-20 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/10 bg-black/40 text-zinc-300 backdrop-blur transition-colors hover:bg-white/15 hover:text-white"
+        className="absolute right-3 top-3 z-20 flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-white/10 bg-black/40 text-zinc-300 backdrop-blur transition-colors hover:bg-white/15 hover:text-white"
       >
-        <X size={15} />
+        <X size={14} />
       </button>
-      <div className="relative flex min-h-[260px] items-center gap-8 px-6 py-9 sm:min-h-[300px] sm:px-12 sm:py-10">
-        <div className="relative z-10 max-w-[620px]">
-          <h1 className="m-0 text-[30px] leading-[1.05] text-white sm:text-[50px]">
-            Your whole collection.
-            <br />
-            Tagged by itself.
+      <div className="relative flex min-h-[176px] items-center gap-8 px-6 py-7 sm:px-9 sm:py-8">
+        <div className="relative z-10 max-w-[560px]">
+          <h1 className="m-0 text-[26px] leading-[1.08] text-white sm:text-[34px]">
+            Your whole collection, tagged by itself.
           </h1>
-          <p className="mb-0 mt-4 max-w-[480px] text-[14.5px] leading-relaxed text-zinc-300 sm:text-[16px]">
+          <p className="mb-0 mt-2.5 max-w-[460px] text-[13.5px] leading-relaxed text-zinc-300 sm:text-[14.5px]">
             {totalItems.toLocaleString()} items across {libraryCount} {libraryCount === 1 ? 'library' : 'libraries'} and{' '}
             {likedCount.toLocaleString()} {likedCount === 1 ? 'favorite' : 'favorites'}. Searchable, private, and all
             yours.
           </p>
-          <div className="mt-6 flex flex-wrap gap-2.5">
+          <div className="mt-4 flex flex-wrap gap-2">
             <button
               onClick={onExplore}
-              className="cursor-pointer rounded-full bg-white px-5 py-2.5 text-[14px] font-semibold text-zinc-950 transition-transform hover:scale-[1.03]"
+              className="cursor-pointer rounded-full bg-white px-4 py-2 text-[13px] font-semibold text-zinc-950 transition-colors hover:bg-zinc-200"
             >
               Explore library
             </button>
             <button
               onClick={onLikes}
-              className="cursor-pointer rounded-full bg-white/15 px-5 py-2.5 text-[14px] font-semibold text-white backdrop-blur transition-colors hover:bg-white/20"
+              className="cursor-pointer rounded-full border border-white/10 bg-white/10 px-4 py-2 text-[13px] font-semibold text-white backdrop-blur transition-colors hover:bg-white/15"
             >
               View likes
             </button>
           </div>
         </div>
-        <div className="ml-auto hidden shrink-0 pr-[10%] lg:block">
+        <div className="ml-auto hidden shrink-0 pr-[12%] lg:block">
           <div
-            className="floaty grid h-[168px] w-[168px] place-items-center rounded-[26%] border border-white/25 shadow-[inset_0_2px_0_rgba(255,255,255,0.35),inset_0_-8px_24px_rgba(0,0,0,0.25),0_0_80px_color-mix(in_srgb,var(--accent)_55%,transparent),0_30px_60px_rgba(0,0,0,0.5)]"
+            className="floaty grid h-[112px] w-[112px] place-items-center rounded-[26px] border border-white/25 shadow-[inset_0_2px_0_rgba(255,255,255,0.35),inset_0_-8px_24px_rgba(0,0,0,0.25),0_0_60px_color-mix(in_srgb,var(--accent)_50%,transparent),0_20px_40px_rgba(0,0,0,0.5)]"
             style={
               {
                 background:
@@ -296,7 +277,7 @@ function Hero({
               } as CSSProperties
             }
           >
-            <img src="/icon.png" alt="" className="h-[92px] w-[92px] drop-shadow-[0_6px_16px_rgba(0,0,0,0.35)]" />
+            <img src="/icon.png" alt="" className="h-[64px] w-[64px] drop-shadow-[0_6px_16px_rgba(0,0,0,0.35)]" />
           </div>
         </div>
       </div>
diff --git a/apps/web/src/routes/Discover.tsx b/apps/web/src/routes/Discover.tsx
index 786114f..7d2c647 100644
--- a/apps/web/src/routes/Discover.tsx
+++ b/apps/web/src/routes/Discover.tsx
@@ -104,7 +104,7 @@ export function Discover() {
     <div className="fade-in">
       <div className="max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Discover</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[24px] glass:font-semibold">Discover</h1>
           <span className="text-[13px] text-zinc-500">
             picked from {feed.total} item{feed.total === 1 ? '' : 's'}
           </span>
diff --git a/apps/web/src/routes/Explore.tsx b/apps/web/src/routes/Explore.tsx
index 1b648a6..376d3d9 100644
--- a/apps/web/src/routes/Explore.tsx
+++ b/apps/web/src/routes/Explore.tsx
@@ -60,7 +60,7 @@ export function Explore() {
       <div className="min-w-0 flex-1">
         <div className="max-w-[1400px] px-4 sm:px-8 pt-6">
           <div className="mb-1 flex items-baseline gap-3">
-            <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">Explore</h1>
+            <h1 className="m-0 text-[22px] font-extrabold glass:text-[24px] glass:font-semibold">Explore</h1>
             <span className="text-[13px] text-zinc-500">
               {media.total} item{media.total === 1 ? '' : 's'}
             </span>
diff --git a/apps/web/src/routes/LibraryView.tsx b/apps/web/src/routes/LibraryView.tsx
index bc3626f..14ef11a 100644
--- a/apps/web/src/routes/LibraryView.tsx
+++ b/apps/web/src/routes/LibraryView.tsx
@@ -28,7 +28,7 @@ export function LibraryView() {
     <div className="fade-in">
       <div className="mx-auto max-w-[1400px] px-4 sm:px-8 pt-6">
         <div className="mb-1 flex items-baseline gap-3">
-          <h1 className="m-0 text-[22px] font-extrabold glass:text-[30px] glass:font-semibold">{library?.name ?? '…'}</h1>
+          <h1 className="m-0 text-[22px] font-extrabold glass:text-[24px] glass:font-semibold">{library?.name ?? '…'}</h1>
           <span className="text-[13px] text-zinc-500">
             {media.total} item{media.total === 1 ? '' : 's'}
           </span>
diff --git a/apps/web/src/routes/settings/MiscTabs.tsx b/apps/web/src/routes/settings/MiscTabs.tsx
index d587c56..1625432 100644
--- a/apps/web/src/routes/settings/MiscTabs.tsx
+++ b/apps/web/src/routes/settings/MiscTabs.tsx
@@ -92,7 +92,7 @@ export function AppearanceTab() {
 }
 
 const UI_STYLES: { key: UiStyle; label: string; desc: string }[] = [
-  { key: 'glass', label: 'Liquid Glass', desc: 'Frosted surfaces, rounded pills and a glowing banner.' },
+  { key: 'glass', label: 'Liquid Glass', desc: 'Frosted bars, pill navigation and a welcome banner.' },
   { key: 'classic', label: 'Original', desc: 'The flat, compact look Sakuya shipped with.' },
 ];
 
@@ -103,7 +103,7 @@ function UiStylePreview({ style }: { style: UiStyle }) {
     <div
       className="h-[92px] overflow-hidden p-2"
       style={{
-        borderRadius: glass ? 14 : 6,
+        borderRadius: glass ? 10 : 6,
         background: glass
           ? 'radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0c0c10'
           : '#09090b',
@@ -129,8 +129,8 @@ function UiStylePreview({ style }: { style: UiStyle }) {
             key={i}
             className="h-[52px]"
             style={{
-              borderRadius: glass ? 10 : 3,
-              background: glass ? 'linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03))' : '#18181b',
+              borderRadius: glass ? 5 : 3,
+              background: glass ? 'rgb(255 255 255 / 0.05)' : '#18181b',
               border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.1)' : '#27272a'),
             }}
           />
diff --git a/apps/web/src/routes/settings/index.tsx b/apps/web/src/routes/settings/index.tsx
index 3621635..1b4eb4a 100644
--- a/apps/web/src/routes/settings/index.tsx
+++ b/apps/web/src/routes/settings/index.tsx
@@ -38,7 +38,7 @@ export function Settings() {
           <div
             key={t.key}
             onClick={() => setTab(t.key)}
-            className={`flex-none cursor-pointer whitespace-nowrap rounded-lg border px-3 py-[9px] text-[13.5px] font-semibold glass:rounded-full glass:px-4 glass:font-display glass:text-[14px] glass:transition-colors ${
+            className={`flex-none cursor-pointer whitespace-nowrap rounded-lg border px-3 py-[9px] text-[13.5px] font-semibold glass:rounded-full glass:px-4 glass:transition-colors ${
               tab === t.key
                 ? 'border-line bg-zinc-900 text-zinc-100 glass:border-white/10 glass:bg-white/10 glass:text-white glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]'
                 : 'border-transparent text-zinc-400 hover:text-zinc-200 glass:font-medium glass:hover:bg-white/5'
@@ -66,7 +66,7 @@ export function Settings() {
 export function TabHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
     <div>
-      <h2 className="m-0 mb-1 text-[19px] font-bold glass:text-[24px]">{title}</h2>
+      <h2 className="m-0 mb-1 text-[19px] font-bold glass:text-[20px]">{title}</h2>
       <div className="mb-5 text-[13px] text-zinc-500">{subtitle}</div>
     </div>
   );

From 4543bdc79408db6b30ff43d2c698c9695718d187 Mon Sep 17 00:00:00 2001
From: Fernando <fernandete2003pro@gmail.com>
Date: Fri, 2 Oct 2026 17:51:04 +0000
Subject: [PATCH 4/4] Default to the original style and ask once which look to
 use

The original style is the default again, so updating no longer restyles
an existing install. A one-time "Pick your look" dialog asks which style
to use, once per install, before the release notes are shown.

Phone fixes:
- Dock labels fit at every width down to 320px.
- Opening another page starts it at the top with the bars showing,
  instead of keeping the previous page's scroll offset.
- The dock's bottom spacing moved from <body> to the app wrapper, so
  pages that fit the screen, like Settings and the login screen, no
  longer scroll by the dock's height.
---
 apps/server/src/lib/settings.ts            |  7 +-
 apps/server/src/routes/settings.ts         |  1 +
 apps/server/src/uiStyle.test.ts            | 32 ++++++++
 apps/web/src/App.tsx                       | 11 ++-
 apps/web/src/components/Navbar.tsx         | 25 +++++-
 apps/web/src/components/UiStylePicker.tsx  | 94 ++++++++++++++++++++++
 apps/web/src/components/UiStylePreview.tsx | 51 ++++++++++++
 apps/web/src/hooks/useUiStyle.ts           |  2 +-
 apps/web/src/index.css                     |  1 -
 apps/web/src/routes/settings/MiscTabs.tsx  | 52 +-----------
 packages/shared/src/index.ts               |  1 +
 11 files changed, 217 insertions(+), 60 deletions(-)
 create mode 100644 apps/server/src/uiStyle.test.ts
 create mode 100644 apps/web/src/components/UiStylePicker.tsx
 create mode 100644 apps/web/src/components/UiStylePreview.tsx

diff --git a/apps/server/src/lib/settings.ts b/apps/server/src/lib/settings.ts
index b3b7e4c..1a30336 100644
--- a/apps/server/src/lib/settings.ts
+++ b/apps/server/src/lib/settings.ts
@@ -18,8 +18,11 @@ const DEFAULTS: Record<string, string> = {
   // Off until switched on in Settings. Engagement tracking runs regardless, so the taste profile
   // is already warm the first time it's turned on.
   discover_enabled: '0',
-  // 'glass' (Liquid Glass) or 'classic' (the original look).
-  ui_style: 'glass',
+  // 'classic' (the original look) or 'glass' (Liquid Glass). Classic by default, so an update
+  // doesn't restyle anyone's install out from under them.
+  ui_style: 'classic',
+  // '1' once the one-time "pick your look" prompt has been answered. Server-wide, like ui_style.
+  ui_style_chosen: '0',
   // The Liquid Glass dashboard banner; its close button turns this off.
   dashboard_hero: '1',
 };
diff --git a/apps/server/src/routes/settings.ts b/apps/server/src/routes/settings.ts
index 79dfb4e..447e95d 100644
--- a/apps/server/src/routes/settings.ts
+++ b/apps/server/src/routes/settings.ts
@@ -31,6 +31,7 @@ const EDITABLE_KEYS = new Set([
   'video_transcode_enabled',
   'discover_enabled',
   'ui_style',
+  'ui_style_chosen',
   'dashboard_hero',
 ]);
 
diff --git a/apps/server/src/uiStyle.test.ts b/apps/server/src/uiStyle.test.ts
new file mode 100644
index 0000000..8d001c8
--- /dev/null
+++ b/apps/server/src/uiStyle.test.ts
@@ -0,0 +1,32 @@
+import { expect, test } from 'bun:test';
+import { useTestConfig } from './testConfig';
+
+// Point the server at a throwaway data dir before anything opens the real database.
+useTestConfig('uistyle', { port: 38781 });
+const BASE = 'http://localhost:38781';
+
+await import('./index'); // starts listening on PORT
+
+const patch = (body: unknown) =>
+  fetch(`${BASE}/api/settings`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+const settings = async () => (await (await fetch(`${BASE}/api/settings`)).json()) as Record<string, string>;
+
+test('a fresh install starts on the original style and has not been asked yet', async () => {
+  const s = await settings();
+  expect(s.ui_style).toBe('classic');
+  expect(s.ui_style_chosen).toBe('0');
+});
+
+test('answering the style prompt saves the style and marks it answered', async () => {
+  const res = await patch({ ui_style: 'glass', ui_style_chosen: '1' });
+  expect(res.status).toBe(200);
+  const s = await settings();
+  expect(s.ui_style).toBe('glass');
+  expect(s.ui_style_chosen).toBe('1');
+});
+
+test('an unknown style is rejected and leaves the saved one alone', async () => {
+  const res = await patch({ ui_style: 'neon' });
+  expect(res.status).toBe(400);
+  expect((await settings()).ui_style).toBe('glass');
+});
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index b68b4a1..bdd253d 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { api } from './lib/api';
 import { Navbar } from './components/Navbar';
 import { ReleaseNotesDialog } from './components/ReleaseNotesDialog';
+import { UiStylePicker } from './components/UiStylePicker';
 import { UpdateToast } from './components/UpdateToast';
 import { LoginGate } from './components/LoginGate';
 import { useAuth } from './hooks/useAuth';
@@ -45,8 +46,14 @@ export function App() {
   return (
     <JobsProvider>
       <DownloaderProvider>
-        <div className="relative min-h-screen text-zinc-100">
-          <ReleaseNotesDialog />
+        {/* The bottom padding keeps the last row clear of the phone dock. It lives here rather than
+            on <body> so the login screen, which has no dock, doesn't get it, and min-h-dvh counts it
+            so a page that fits the screen doesn't scroll by the dock's height. */}
+        <div className="relative min-h-dvh pb-(--dock-h) text-zinc-100">
+          {/* The style question comes first and only once per install. "What's new" waits until it's
+              answered, so a first visit never opens two dialogs on top of each other. */}
+          {settings &&
+            (settings.ui_style_chosen !== '1' ? <UiStylePicker current={settings.ui_style} /> : <ReleaseNotesDialog />)}
           <UpdateToast />
           <Navbar />
           <Routes>
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index ef1ed2b..fc1e3bd 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { NavLink, useLocation, useNavigate, useNavigationType } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Activity, Download, Home, Images, LayoutGrid, Lock, Settings, Sparkles } from 'lucide-react';
 import { useJobs } from '../hooks/useJobs';
@@ -135,11 +135,14 @@ function LockButton() {
   );
 }
 
-/** Bottom tab bar that carries the navigation on phones, where the top bar has no room for it. */
+/**
+ * Bottom tab bar that carries the navigation on phones, where the top bar has no room for it.
+ * Sized so all five labels fit whole down to a 360px screen, and below that at a smaller size.
+ */
 function MobileDock({ items }: { items: typeof NAV_ITEMS }) {
   return (
     <nav
-      className="fixed inset-x-0 bottom-0 z-40 grid h-(--dock-h) border-t border-line bg-zinc-950/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden glass:inset-x-3 glass:bottom-[calc(10px+env(safe-area-inset-bottom))] glass:h-[56px] glass:rounded-2xl glass:border glass:border-white/10 glass:bg-[#18181b]/75 glass:pb-0 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_16px_40px_rgba(0,0,0,0.5)] glass:backdrop-blur-2xl"
+      className="fixed inset-x-0 bottom-0 z-40 grid h-(--dock-h) border-t border-line bg-zinc-950/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden glass:inset-x-2 glass:bottom-[calc(8px+env(safe-area-inset-bottom))] glass:h-[56px] glass:rounded-2xl glass:border glass:border-white/10 glass:bg-[#18181b]/75 glass:pb-0 glass:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_16px_40px_rgba(0,0,0,0.5)] glass:backdrop-blur-2xl"
       style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
     >
       {items.map(({ to, label, icon: Icon }) => (
@@ -147,7 +150,7 @@ function MobileDock({ items }: { items: typeof NAV_ITEMS }) {
           key={to}
           to={to}
           className={({ isActive }) =>
-            `flex min-w-0 flex-col items-center justify-center gap-[5px] px-1 text-[10.5px] font-semibold transition-colors ${
+            `flex min-w-0 flex-col items-center justify-center gap-[5px] px-0.5 text-[10.5px] font-semibold transition-colors max-[359px]:px-0 max-[359px]:text-[10px] max-[359px]:tracking-tight ${
               isActive ? 'text-zinc-100 [&_svg]:text-accent' : 'text-zinc-500 glass:hover:text-zinc-300'
             }`
           }
@@ -167,7 +170,9 @@ function MobileDock({ items }: { items: typeof NAV_ITEMS }) {
 export function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
+  const navigationType = useNavigationType();
   const barRef = useRef<HTMLDivElement>(null);
+  const lastPathname = useRef(location.pathname);
   const [searchTags, setSearchTags] = useState<string[]>([]);
   const { data: settings } = useQuery({ queryKey: ['settings'], queryFn: api.settings, staleTime: 60_000 });
   const discoverEnabled = settings?.discover_enabled === '1';
@@ -215,6 +220,18 @@ export function Navbar() {
     };
   }, []);
 
+  // Opening another page starts it at the top with the bars showing. Without this the window kept
+  // the previous page's scroll offset, so a dock tap could land halfway down a feed with the top
+  // bar still slid away. Back and forward are left where the browser puts them, and query-only
+  // changes (filters) don't count as a new page.
+  useEffect(() => {
+    if (location.pathname === lastPathname.current) return;
+    lastPathname.current = location.pathname;
+    if (navigationType === 'POP') return;
+    window.scrollTo(0, 0);
+    document.documentElement.removeAttribute('data-nav-hidden');
+  }, [location.pathname, navigationType]);
+
   const goToExplore = (tags: string[]) => {
     navigate(tags.length ? `/explore?tags=${tags.map(encodeURIComponent).join(',')}` : '/explore');
   };
diff --git a/apps/web/src/components/UiStylePicker.tsx b/apps/web/src/components/UiStylePicker.tsx
new file mode 100644
index 0000000..7ad5aa1
--- /dev/null
+++ b/apps/web/src/components/UiStylePicker.tsx
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Check, Palette } from 'lucide-react';
+import type { UiStyle } from '@sakuya/shared';
+import { api } from '../lib/api';
+import { applyUiStyle } from '../hooks/useUiStyle';
+import { useToast } from './Toast';
+import { UI_STYLES, UiStylePreview } from './UiStylePreview';
+
+/**
+ * One-time "pick your look" prompt. App shows it until `ui_style_chosen` is set, which saving
+ * here does, so it appears once per install. There's no way to dismiss it without answering:
+ * Continue on the preselected style is that, and it keeps the prompt from coming back.
+ */
+export function UiStylePicker({ current }: { current: UiStyle }) {
+  const queryClient = useQueryClient();
+  const showToast = useToast();
+  const [choice, setChoice] = useState<UiStyle>(current);
+
+  const saveMutation = useMutation({
+    mutationFn: () => api.patchSettings({ ui_style: choice, ui_style_chosen: '1' }),
+    onSuccess: (data) => {
+      // Applied here as well as in App: when the choice equals the saved style, ui_style doesn't
+      // change and App's effect wouldn't run.
+      applyUiStyle(data.ui_style);
+      queryClient.setQueryData(['settings'], data);
+    },
+    onError: (err: Error) => showToast(err.message),
+  });
+
+  return (
+    <div className="fade-in fixed inset-0 z-[95] flex items-center justify-center bg-zinc-950/80 p-4 backdrop-blur sm:p-6">
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="ui-style-picker-title"
+        className="flex max-h-[90dvh] w-full max-w-[580px] flex-col overflow-y-auto rounded-2xl border border-line bg-surface shadow-[0_24px_64px_rgba(0,0,0,0.6)]"
+      >
+        <div className="flex items-center gap-3.5 border-b border-line bg-gradient-to-b from-accent/10 to-transparent px-5 py-5 sm:px-6">
+          <div className="flex h-11 w-11 flex-none items-center justify-center rounded-full bg-accent/15">
+            <Palette size={22} className="text-accent" />
+          </div>
+          <div className="min-w-0">
+            <div id="ui-style-picker-title" className="text-[18px] font-extrabold">
+              Pick your look
+            </div>
+            <div className="text-[12.5px] text-zinc-500">
+              You can change it any time in <span className="whitespace-nowrap">Settings → Appearance</span>.
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-2.5 px-5 py-5 sm:grid-cols-2 sm:px-6">
+          {UI_STYLES.map((option) => {
+            const selected = choice === option.key;
+            return (
+              <button
+                key={option.key}
+                type="button"
+                aria-pressed={selected}
+                onClick={() => setChoice(option.key)}
+                className={`cursor-pointer rounded-panel border-2 p-2.5 text-left transition-colors ${
+                  selected ? 'border-accent' : 'border-line hover:border-line-hover'
+                }`}
+              >
+                <UiStylePreview style={option.key} />
+                <div className="mt-2.5 flex items-center justify-between px-0.5">
+                  <div className="text-[13px] font-semibold">{option.label}</div>
+                  <span
+                    className={`flex h-[18px] w-[18px] items-center justify-center rounded-full border ${
+                      selected ? 'border-accent bg-accent text-white' : 'border-line-strong'
+                    }`}
+                  >
+                    {selected && <Check size={12} strokeWidth={3} />}
+                  </span>
+                </div>
+                <div className="mt-0.5 px-0.5 text-[11.5px] text-zinc-500">{option.desc}</div>
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex justify-end border-t border-line px-5 py-4 sm:px-6">
+          <button
+            type="button"
+            disabled={saveMutation.isPending}
+            onClick={() => saveMutation.mutate()}
+            className="cursor-pointer rounded-btn bg-accent px-5 py-2 text-[13px] font-semibold text-white hover:opacity-90 disabled:cursor-wait disabled:opacity-60"
+          >
+            Continue with {UI_STYLES.find((option) => option.key === choice)?.label}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/UiStylePreview.tsx b/apps/web/src/components/UiStylePreview.tsx
new file mode 100644
index 0000000..6240e56
--- /dev/null
+++ b/apps/web/src/components/UiStylePreview.tsx
@@ -0,0 +1,51 @@
+import type { UiStyle } from '@sakuya/shared';
+
+/** The interface styles, default first. Shared by Settings → Appearance and the first-run picker. */
+export const UI_STYLES: { key: UiStyle; label: string; desc: string }[] = [
+  { key: 'classic', label: 'Original', desc: 'The flat, compact look Sakuya shipped with.' },
+  { key: 'glass', label: 'Liquid Glass', desc: 'Frosted bars, pill navigation and a welcome banner.' },
+];
+
+/** Tiny static mock of each style, drawn in plain markup so it doesn't depend on the active one. */
+export function UiStylePreview({ style }: { style: UiStyle }) {
+  const glass = style === 'glass';
+  return (
+    <div
+      className="h-[92px] overflow-hidden p-2"
+      style={{
+        borderRadius: glass ? 10 : 6,
+        background: glass
+          ? 'radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0c0c10'
+          : '#09090b',
+        border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.08)' : '#27272a'),
+      }}
+    >
+      <div className="flex items-center gap-1">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="h-2.5 w-7"
+            style={{
+              borderRadius: glass ? 999 : 2,
+              background: i === 0 ? (glass ? 'color-mix(in srgb, var(--accent) 45%, transparent)' : '#27272a') : glass ? 'rgb(255 255 255 / 0.06)' : 'transparent',
+            }}
+          />
+        ))}
+        <div className="ml-auto h-2.5 w-12" style={{ borderRadius: glass ? 999 : 2, background: glass ? 'rgb(255 255 255 / 0.08)' : '#18181b' }} />
+      </div>
+      <div className="mt-2 grid grid-cols-4 gap-1.5">
+        {[0, 1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="h-[52px]"
+            style={{
+              borderRadius: glass ? 5 : 3,
+              background: glass ? 'rgb(255 255 255 / 0.05)' : '#18181b',
+              border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.1)' : '#27272a'),
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/hooks/useUiStyle.ts b/apps/web/src/hooks/useUiStyle.ts
index e4bbe44..33f2039 100644
--- a/apps/web/src/hooks/useUiStyle.ts
+++ b/apps/web/src/hooks/useUiStyle.ts
@@ -6,7 +6,7 @@ import { api } from '../lib/api';
 const STORAGE_KEY = 'sakuya:ui-style';
 
 export function storedUiStyle(): UiStyle {
-  return localStorage.getItem(STORAGE_KEY) === 'classic' ? 'classic' : 'glass';
+  return localStorage.getItem(STORAGE_KEY) === 'glass' ? 'glass' : 'classic';
 }
 
 /** Sets `data-ui` on <html>, which switches the CSS tokens and every `glass:` utility. */
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 632d2a2..46a23a7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -57,7 +57,6 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
-  padding-bottom: var(--dock-h);
   background: #09090b;
   color: #f4f4f5;
   font-family: 'Inter', sans-serif;
diff --git a/apps/web/src/routes/settings/MiscTabs.tsx b/apps/web/src/routes/settings/MiscTabs.tsx
index 1625432..ca2bd3c 100644
--- a/apps/web/src/routes/settings/MiscTabs.tsx
+++ b/apps/web/src/routes/settings/MiscTabs.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type { Settings, UiStyle } from '@sakuya/shared';
+import type { Settings } from '@sakuya/shared';
 import { api } from '../../lib/api';
 import { formatBytes } from '../../lib/format';
 import { useToast } from '../../components/Toast';
 import { ConfirmDialog } from '../../components/ConfirmDialog';
 import { TabHeader } from './index';
 import { applyUiStyle, useUiStyle } from '../../hooks/useUiStyle';
+import { UI_STYLES, UiStylePreview } from '../../components/UiStylePreview';
 
 const ACCENTS = ['#8b5cf6', '#14b8a6', '#f43f5e'];
 
@@ -91,55 +92,6 @@ export function AppearanceTab() {
   );
 }
 
-const UI_STYLES: { key: UiStyle; label: string; desc: string }[] = [
-  { key: 'glass', label: 'Liquid Glass', desc: 'Frosted bars, pill navigation and a welcome banner.' },
-  { key: 'classic', label: 'Original', desc: 'The flat, compact look Sakuya shipped with.' },
-];
-
-/** Tiny static mock of each style, drawn in plain markup so it doesn't depend on the active one. */
-function UiStylePreview({ style }: { style: UiStyle }) {
-  const glass = style === 'glass';
-  return (
-    <div
-      className="h-[92px] overflow-hidden p-2"
-      style={{
-        borderRadius: glass ? 10 : 6,
-        background: glass
-          ? 'radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0c0c10'
-          : '#09090b',
-        border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.08)' : '#27272a'),
-      }}
-    >
-      <div className="flex items-center gap-1">
-        {[0, 1, 2].map((i) => (
-          <div
-            key={i}
-            className="h-2.5 w-7"
-            style={{
-              borderRadius: glass ? 999 : 2,
-              background: i === 0 ? (glass ? 'color-mix(in srgb, var(--accent) 45%, transparent)' : '#27272a') : glass ? 'rgb(255 255 255 / 0.06)' : 'transparent',
-            }}
-          />
-        ))}
-        <div className="ml-auto h-2.5 w-12" style={{ borderRadius: glass ? 999 : 2, background: glass ? 'rgb(255 255 255 / 0.08)' : '#18181b' }} />
-      </div>
-      <div className="mt-2 grid grid-cols-4 gap-1.5">
-        {[0, 1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="h-[52px]"
-            style={{
-              borderRadius: glass ? 5 : 3,
-              background: glass ? 'rgb(255 255 255 / 0.05)' : '#18181b',
-              border: '1px solid ' + (glass ? 'rgb(255 255 255 / 0.1)' : '#27272a'),
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
 export function SystemTab() {
   const showToast = useToast();
   const queryClient = useQueryClient();
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index e2e5551..390284d 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -168,6 +168,7 @@ export interface Settings {
   video_transcode_enabled: string;
   discover_enabled: string;
   ui_style: UiStyle;
+  ui_style_chosen: string;
   dashboard_hero: string;
 }