From ba4be8aa6bbe81e1db86f79d0007d4b884b730da Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 28 Sep 2026 11:54:04 +0700
Subject: [PATCH] Match desktop app styling to the webapp

Bring the desktop app's UI in line with the webapp's brutalist design:
flat near-black surfaces, white/15 hairline borders, square panels and
modals, 3px corners on controls, white primary buttons, mono uppercase
labels, and Archivo display headings.

- Retoken the default theme, fonts, and global CSS to the webapp values
- Port the webapp's restyled shared components (buttons, modals,
  popovers, tooltips, inputs, select, switch, model selector)
- Restyle prompt boxes, galleries, lightbox, and the 3D scene editor
- Render the webapp pricing table inside the desktop pricing modal
  (new @storyteller/ui-pricing-table package), keeping the Tauri
  purchase and plan-management flow
- Restyle settings, login, credits, and provider modals
- Restyle the top bar, task queue, create pages, and apps page
---
 frontend/apps/artcraft/app/index.html         |   2 +-
 .../GlobalFileDropHandler.tsx                 |  10 +-
 .../experiences/ImageTo3DExperience.tsx       |  86 ++--
 .../generation-feed/CreateEmptyState.tsx      |  56 +++
 .../DesktopCreatePageShell.tsx                |  41 +-
 .../DesktopGenerationGallery.tsx              |   8 +-
 .../src/components/media/UploadEntryCard.tsx  |  43 +-
 .../components/reusable/ConfirmationModal.tsx |  14 +-
 .../app/src/components/reusable/CostModal.tsx |  16 +-
 .../UploadModalMedia/UploadFilesMedia.tsx     |   2 +-
 .../UploadModalMedia/UploadImageMedia.tsx     |   2 +-
 .../UploadImageMediaModal.tsx                 |   2 +-
 .../UploadModalMedia/UploadModalMedia.tsx     |   2 +-
 .../src/components/signaled/ErrorDialog.tsx   |   4 +-
 .../signaled/TopBar/AppsQuickMenu.tsx         | 159 +++---
 .../signaled/TopBar/AuthButtons.tsx           |   8 +-
 .../signaled/TopBar/ProfileDropdown.tsx       |  17 +-
 .../signaled/TopBar/SceneTitleInput.tsx       |  39 +-
 .../components/signaled/TopBar/TaskQueue.tsx  |  74 +--
 .../src/components/signaled/TopBar/TopBar.tsx | 162 +++---
 .../signaled/TopBar/UploadImagesButton.tsx    |   7 +-
 .../apps/artcraft/app/src/config/appMenu.tsx  |  69 ++-
 .../app/src/pages/PageAngles/Angles.tsx       |  28 +-
 .../app/src/pages/PageApps/AppsIndexPage.tsx  |  80 ++-
 .../app/src/pages/PageAudio/CreateAudio.tsx   |   2 -
 .../PageBackgroundChange.tsx                  |  48 +-
 .../app/src/pages/PageImage/Background.css    |  17 -
 .../src/pages/PageImage/BackgroundGallery.tsx |  16 -
 .../app/src/pages/PageImage/TextToImage.tsx   |   2 -
 .../PageImageTo3DObject/ImageTo3DObject.tsx   |   1 -
 .../PageImageTo3DWorld/ImageTo3DWorld.tsx     |   1 -
 .../ImageWatermarkRemover.tsx                 |  20 +-
 .../PageRemoveBackground/RemoveBackground.tsx |  34 +-
 .../src/pages/PageStoryboard/Storyboard.tsx   |  98 ++--
 .../app/src/pages/PageVideo/Background.css    |  17 -
 .../src/pages/PageVideo/BackgroundGallery.tsx |  16 -
 .../app/src/pages/PageVideo/ImageToVideo.tsx  |   2 -
 .../VideoFrameExtractor.tsx                   |  76 +--
 .../VideoWatermarkRemover.tsx                 |  32 +-
 frontend/apps/artcraft/app/src/root.tsx       |   2 +-
 .../apps/artcraft/app/src/styles/base.css     | 237 +++++++--
 .../apps/artcraft/app/src/styles/tailwind.css |  31 +-
 frontend/apps/artcraft/tailwind.config.ts     |  38 ++
 .../libs/components/badge/src/lib/badge.tsx   |   2 +-
 .../src/lib/button-dropdown.tsx               |  14 +-
 .../src/lib/button-icon-select.tsx            |   8 +-
 .../button-icon/src/lib/button-icon.tsx       |   4 +-
 .../button/src/lib/GenerateButton.tsx         |   4 +-
 .../button/src/lib/ToggleButton.tsx           |  15 +-
 .../libs/components/button/src/lib/button.tsx |  19 +-
 .../src/lib/camera-settings-modal.tsx         |  28 +-
 .../components/checkbox/src/lib/checkbox.tsx  |   8 +-
 .../close-button/src/lib/close-button.tsx     |   4 +-
 .../src/lib/drag-and-drop-zone.tsx            |  10 +-
 .../gallery-modal/src/lib/DragGhost.tsx       |   4 +-
 .../gallery-modal/src/lib/FolderColorRow.tsx  |  12 +-
 .../src/lib/FolderNameDialog.tsx              |   9 +-
 .../src/lib/GalleryDraggableItem.tsx          |  43 +-
 .../src/lib/GalleryFolderChip.tsx             |   4 +-
 .../src/lib/GalleryItemMenuItems.tsx          |  45 +-
 .../gallery-modal/src/lib/gallery-modal.tsx   |  72 +--
 .../src/lib/CopyPromptButton.tsx              |   2 +-
 .../generation-list/src/lib/FailedCard.tsx    |   8 +-
 .../generation-list/src/lib/FailedRow.tsx     |  10 +-
 .../src/lib/GalleryAutoplayToggle.tsx         |   4 +-
 .../generation-list/src/lib/GalleryCard.tsx   |  29 +-
 .../generation-list/src/lib/GalleryRow.tsx    |  34 +-
 .../src/lib/GallerySelectToggle.tsx           |   4 +-
 .../src/lib/GalleryViewToggle.tsx             |   4 +-
 .../generation-list/src/lib/PendingCard.tsx   |   8 +-
 .../generation-list/src/lib/PendingRow.tsx    |   4 +-
 .../components/gravatar/src/lib/gravatar.tsx  |   2 +-
 .../help-menu/src/lib/help-menu.tsx           |  30 +-
 .../components/input/src/lib/InputVector.tsx  |   4 +-
 .../components/input/src/lib/NumberInput.tsx  |  10 +-
 .../libs/components/input/src/lib/input.tsx   |  16 +-
 .../src/lib/cheatsheet/Cheatsheet.tsx         |  10 +-
 .../lib/components/KeybindCaptureInput.tsx    |   2 +-
 .../src/lib/settings/KeybindsSettings.tsx     |  52 +-
 .../libs/components/label/src/lib/label.tsx   |   7 +-
 .../lightbox-modal/src/lib/lightbox-modal.tsx | 134 +++--
 .../src/lib/tags/TagChipInput.tsx             |   9 +-
 .../src/lib/tags/TagsSection.tsx              |   2 +-
 .../list-dropdown/src/lib/ListDropdown.tsx    |  13 +-
 .../components/loading/src/lib/LoadingBar.tsx |   4 +-
 .../src/lib/DesktopLoginBridge.tsx            |  18 +-
 .../src/lib/LoginSuccess.module.css           |  62 +--
 .../login-modal/src/lib/LoginSuccess.tsx      |   3 +-
 .../login-modal/src/lib/artcraft-signup.tsx   |  27 +-
 .../login-modal/src/lib/login-modal.tsx       | 144 +++---
 .../src/lib/menu-icon-selector.tsx            |  11 +-
 .../libs/components/modal/src/lib/modal.tsx   |  15 +-
 .../src/lib/classy-model-selector.tsx         |  18 +-
 .../moodboard/src/lib/grid/BoardGrid.tsx      |  20 +-
 .../pagescene/src/lib/Stage3DBody.tsx         |   8 +-
 .../lib/comps/AnonHintChip/AnonHintChip.tsx   |   2 +-
 .../comps/AspectRatioMenu/AspectRatioMenu.tsx |   3 +-
 .../lib/comps/AssetMenu/AnimationsModal.tsx   |  16 +-
 .../src/lib/comps/AssetMenu/AssetModal.tsx    |  20 +-
 .../comps/AssetMenu/shared/ItemElement.tsx    |   2 +-
 .../CameraStatusPill/CameraStatusPill.tsx     |  24 +-
 .../comps/CompletionModal/CompletionModal.tsx |  10 +-
 .../ControlPanelSceneObject.tsx               |  12 +-
 .../src/lib/comps/Controls3D/Controls3D.tsx   |  19 +-
 .../ControlsTopButtons/ControlsTopButtons.tsx |  10 +-
 .../comps/ExitCameraView/ExitCameraView.tsx   |   2 +-
 .../FocalLengthDisplay/FocalLengthDisplay.tsx |   2 +-
 .../src/lib/comps/Outliner/Outliner.tsx       |  19 +-
 .../src/lib/comps/PoseModeSelector.tsx        |   6 +-
 .../PrecisionSelector/PrecisionSelector.tsx   |   2 +-
 .../PreviewEngineCamera.tsx                   |   4 +-
 .../pagescene/src/lib/comps/PreviewImages.tsx |   4 +-
 .../comps/RecordControls/RecordControls.tsx   |   4 +-
 .../lib/comps/SceneModePill/SceneModePill.tsx |   6 +-
 .../src/lib/comps/Timeline/MotionPopover.tsx  |   6 +-
 .../src/lib/comps/Timeline/TimelineBar.tsx    |  12 +-
 .../lib/comps/Timeline/TimelineClipRow.tsx    |  39 +-
 .../src/lib/comps/Timeline/TimelineEditor.tsx |  19 +-
 .../lib/comps/Timeline/TimelineTrackRow.tsx   |   4 +-
 .../pagescene/src/lib/comps/toolbarStyles.ts  |   2 +
 .../components/popover/src/lib/popover.tsx    | 144 +++---
 .../src/lib/cost-breakdown-modal.tsx          |  28 +-
 .../pricing-modal/src/lib/credits-modal.tsx   |  40 +-
 .../pricing-modal/src/lib/pricing-modal.tsx   | 476 +++++-------------
 .../components/pricing-modal/tsconfig.json    |   3 +
 .../pricing-modal/tsconfig.lib.json           |   3 +
 .../components/pricing-table/package.json     |  21 +
 .../components/pricing-table/src/index.ts     |   8 +
 .../src/lib/pricing-promo-banner.tsx          |  41 ++
 .../pricing-table/src/lib/pricing-table.tsx   | 128 +++++
 .../pricing-table/src/lib/promo-discounts.ts  |  29 ++
 .../src/lib/website-pricing-table.css         |  55 ++
 .../src/lib/website-pricing-table.tsx         | 408 +++++++++++++++
 .../components/pricing-table/tsconfig.json    |  25 +
 .../pricing-table/tsconfig.lib.json           |  59 +++
 .../pricing-table/tsconfig.spec.json          |  34 ++
 .../components/pricing-table/vite.config.ts   |  50 ++
 .../promptbox/src/lib/CharactersModal.tsx     |  68 +--
 .../promptbox/src/lib/ImagePromptRow.tsx      |  30 +-
 .../promptbox/src/lib/MentionChipMenu.tsx     |  10 +-
 .../promptbox/src/lib/MentionTextarea.tsx     |  10 +-
 .../promptbox/src/lib/PromptBox2D.tsx         |  30 +-
 .../promptbox/src/lib/PromptBox3D.tsx         |  24 +-
 .../promptbox/src/lib/PromptBoxAudio.tsx      |  26 +-
 .../promptbox/src/lib/PromptBoxEdit.tsx       |  38 +-
 .../src/lib/PromptBoxErrorBoundary.tsx        |   2 +-
 .../promptbox/src/lib/PromptBoxImage.tsx      |  30 +-
 .../promptbox/src/lib/PromptBoxVideo.tsx      |  47 +-
 .../src/lib/PromptClearAllButton.tsx          |   4 +-
 .../src/lib/PromptFullscreenButton.tsx        |   4 +-
 .../src/lib/PromptFullscreenModal.tsx         |   1 -
 .../src/lib/common/AudioReferenceRow.tsx      |  12 +-
 .../src/lib/common/AudioTuningPopover.tsx     |   2 +-
 .../src/lib/common/SoundsSettingsPopover.tsx  |   4 +-
 .../src/lib/common/StylePromptRow.tsx         |   2 +-
 .../promptbox/src/lib/deck/DeckCard.tsx       |  12 +-
 .../promptbox/src/lib/deck/KeyframeCards.tsx  |   2 +-
 .../promptbox/src/lib/deck/ReferenceDeck.tsx  |   8 +-
 .../src/lib/deck/usePromptBoxDrop.tsx         |   6 +-
 .../others/GenericProviderBillingBlock.tsx    |  12 +-
 .../src/lib/provider-billing-modal.tsx        |   7 +-
 .../src/lib/provider-setup-modal.tsx          |  39 +-
 .../libs/components/select/src/lib/select.tsx |  21 +-
 .../src/lib/panes/AboutSettingsPane.tsx       |  17 +-
 .../AccountSettings/AccountSettingsPane.tsx   |   4 +-
 .../AccountSettings/ArtcraftAccountBlock.tsx  |  18 +-
 .../AccountSettings/GrokAccountBlock.tsx      |  18 +-
 .../MidjourneyAccountBlock.tsx                |  18 +-
 .../src/lib/panes/AppearanceSettingsPane.tsx  | 101 ++--
 .../src/lib/panes/AudioSettingsPane.tsx       |   6 +-
 .../src/lib/panes/BillingSettingsPane.tsx     |  57 ++-
 .../src/lib/panes/DownloadsSettingsPane.tsx   |  14 +-
 .../panes/ProviderPrioritySettingsPane.tsx    |  18 +-
 .../settings-modal/src/lib/settings-modal.tsx |  22 +-
 .../libs/components/switch/src/lib/switch.tsx |  12 +-
 .../tab-selector/src/lib/tab-selector.tsx     |   8 +-
 .../components/toaster/src/lib/toaster.tsx    |   3 +
 .../components/tooltip/src/lib/tooltip.tsx    |  99 ++--
 .../src/lib/UploadModal3D/UploadFiles3D.tsx   |  14 +-
 .../lib/UploadModalImage/UploadFilesImage.tsx |  10 +-
 .../lib/UploadModalSplat/UploadFilesSplat.tsx |  10 +-
 frontend/package-lock.json                    |   8 +
 frontend/tsconfig.base.json                   |   3 +
 frontend/tsconfig.json                        |   3 +
 184 files changed, 3100 insertions(+), 2269 deletions(-)
 create mode 100644 frontend/apps/artcraft/app/src/components/generation-feed/CreateEmptyState.tsx
 delete mode 100644 frontend/apps/artcraft/app/src/pages/PageImage/Background.css
 delete mode 100644 frontend/apps/artcraft/app/src/pages/PageImage/BackgroundGallery.tsx
 delete mode 100644 frontend/apps/artcraft/app/src/pages/PageVideo/Background.css
 delete mode 100644 frontend/apps/artcraft/app/src/pages/PageVideo/BackgroundGallery.tsx
 create mode 100644 frontend/libs/components/pagescene/src/lib/comps/toolbarStyles.ts
 create mode 100644 frontend/libs/components/pricing-table/package.json
 create mode 100644 frontend/libs/components/pricing-table/src/index.ts
 create mode 100644 frontend/libs/components/pricing-table/src/lib/pricing-promo-banner.tsx
 create mode 100644 frontend/libs/components/pricing-table/src/lib/pricing-table.tsx
 create mode 100644 frontend/libs/components/pricing-table/src/lib/promo-discounts.ts
 create mode 100644 frontend/libs/components/pricing-table/src/lib/website-pricing-table.css
 create mode 100644 frontend/libs/components/pricing-table/src/lib/website-pricing-table.tsx
 create mode 100644 frontend/libs/components/pricing-table/tsconfig.json
 create mode 100644 frontend/libs/components/pricing-table/tsconfig.lib.json
 create mode 100644 frontend/libs/components/pricing-table/tsconfig.spec.json
 create mode 100644 frontend/libs/components/pricing-table/vite.config.ts

diff --git a/frontend/apps/artcraft/app/index.html b/frontend/apps/artcraft/app/index.html
index 166218c75f..6768a74d4c 100644
--- a/frontend/apps/artcraft/app/index.html
+++ b/frontend/apps/artcraft/app/index.html
@@ -31,7 +31,7 @@
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+  <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..800&display=swap"
     rel="stylesheet" />
   <!-- <link rel="stylesheet" href="/src/styles.css" /> -->
 </head>
diff --git a/frontend/apps/artcraft/app/src/components/GlobalFileDropHandler/GlobalFileDropHandler.tsx b/frontend/apps/artcraft/app/src/components/GlobalFileDropHandler/GlobalFileDropHandler.tsx
index 231bf158ba..368189837e 100644
--- a/frontend/apps/artcraft/app/src/components/GlobalFileDropHandler/GlobalFileDropHandler.tsx
+++ b/frontend/apps/artcraft/app/src/components/GlobalFileDropHandler/GlobalFileDropHandler.tsx
@@ -191,11 +191,11 @@ export function GlobalFileDropHandler() {
   return (
     <>
       {isDragging && modalType === null && (
-        <div className="pointer-events-none fixed inset-0 z-[9999] flex items-center justify-center bg-black/40">
-          <div className="flex flex-col items-center gap-3 rounded-2xl border-2 border-dashed border-white/60 bg-black/30 px-16 py-12 text-white backdrop-blur-sm">
-            <Maximize2Icon  className="text-4xl opacity-80" />
-            <div className="text-xl font-semibold">Drop to Upload</div>
-            <div className="text-sm opacity-60">GLB, PNG, JPG, JPEG, SPZ</div>
+        <div className="pointer-events-none fixed inset-0 z-[9999] flex items-center justify-center bg-black/70">
+          <div className="flex flex-col items-center gap-3 border border-dashed border-white/60 bg-ui-panel px-16 py-12 text-white">
+            <Maximize2Icon className="text-3xl opacity-60" />
+            <div className="font-display text-2xl tracking-tight">Drop to Upload</div>
+            <div className="hud-label text-white/50">GLB, PNG, JPG, JPEG, SPZ</div>
           </div>
         </div>
       )}
diff --git a/frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx b/frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx
index eb4f3d6420..090898616b 100644
--- a/frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx
+++ b/frontend/apps/artcraft/app/src/components/experiences/ImageTo3DExperience.tsx
@@ -36,6 +36,7 @@ import {
   useCostBreakdownModalStore,
 } from "@storyteller/ui-pricing-modal";
 import { HelpMenuButton } from "@storyteller/ui-help-menu";
+import { CreateEmptyState } from "~/components/generation-feed/CreateEmptyState";
 
 type Mode = "image" | "text";
 type Variant = "object" | "world";
@@ -549,9 +550,9 @@ export const ImageTo3DExperience = ({
         role="button"
         tabIndex={0}
         className={twMerge(
-          "flex flex-col items-center justify-center rounded-2xl border-[3px] border-dashed border-primary/40 bg-primary/5 text-center text-xs transition-all hover:border-primary hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-primary/40",
+          "flex flex-col items-center justify-center border border-dashed border-white/20 bg-white/[0.015] text-center text-xs transition-all hover:border-white/40 hover:bg-white/5 focus:border-white/60 focus:outline-none",
           hasResults ? "aspect-square w-24" : "aspect-square w-48",
-          dragActive && "border-primary bg-primary/10",
+          dragActive && "border-white/60 bg-white/5",
         )}
         onDragEnter={(event) => {
           event.preventDefault();
@@ -581,11 +582,11 @@ export const ImageTo3DExperience = ({
         <PlusIcon
           
           className={twMerge(
-            "text-base-fg opacity-90 drop-shadow",
+            "text-base-fg opacity-80",
             hasResults ? "text-2xl" : "text-4xl",
           )} />
         {!hasResults && (
-          <span className="mt-3 text-[15px] font-medium text-base-fg opacity-60">
+          <span className="mt-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
             Add Image
           </span>
         )}
@@ -598,7 +599,7 @@ export const ImageTo3DExperience = ({
       {uploadedPreview ? (
         <div
           className={twMerge(
-            "group relative cursor-pointer overflow-hidden rounded-2xl border-[3px] border-primary/40 bg-black/30 transition-all",
+            "group relative cursor-pointer overflow-hidden border border-white/30 bg-black/30 transition-all hover:border-white/60",
             hasResults ? "aspect-square w-24" : "aspect-square w-48",
           )}
           onClick={() => !isUploading && fileInputRef.current?.click()}
@@ -613,13 +614,13 @@ export const ImageTo3DExperience = ({
           />
           {isUploading && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="h-8 w-8 animate-spin rounded-full border-[3px] border-white/30 border-t-primary" />
+              <div className="h-8 w-8 animate-spin rounded-full border-[3px] border-white/30 border-t-white" />
             </div>
           )}
           {!isUploading && (
             <button
               type="button"
-              className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100"
+              className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[3px] bg-black/60 text-white opacity-0 transition-all hover:bg-black group-hover:opacity-100"
               onClick={(event) => {
                 event.stopPropagation();
                 setUploadedPreview(null);
@@ -645,7 +646,7 @@ export const ImageTo3DExperience = ({
         ref={textareaRef}
         id={promptInputId}
         rows={1}
-        className="text-md max-h-[5.5em] w-full resize-none overflow-y-auto rounded bg-transparent pr-2 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
+        className="text-md max-h-[5.5em] w-full resize-none overflow-y-auto rounded-[3px] bg-transparent pr-2 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
         value={prompt}
         placeholder="Describe any object you want to generate from scratch..."
         onChange={(event) => setPrompt(event.target.value)}
@@ -691,8 +692,8 @@ export const ImageTo3DExperience = ({
                 role="button"
                 tabIndex={0}
                 className={twMerge(
-                  "flex h-32 w-32 flex-col items-center justify-center rounded-xl border-2 border-dashed border-primary/40 bg-primary/5 transition-all hover:border-primary hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-primary/40",
-                  dragActive && "border-primary bg-primary/10",
+                  "flex h-32 w-32 flex-col items-center justify-center border border-dashed border-white/20 bg-white/[0.015] transition-all hover:border-white/40 hover:bg-white/5 focus:border-white/60 focus:outline-none",
+                  dragActive && "border-white/60 bg-white/5",
                 )}
                 onDragEnter={(e) => {
                   e.preventDefault();
@@ -730,8 +731,8 @@ export const ImageTo3DExperience = ({
               >
                 <PlusIcon
                   
-                  className="text-3xl text-base-fg opacity-90 drop-shadow" />
-                <span className="mt-2 text-sm font-medium text-base-fg/50">
+                  className="text-3xl text-base-fg opacity-80" />
+                <span className="mt-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                   Add Images
                 </span>
               </div>
@@ -740,7 +741,7 @@ export const ImageTo3DExperience = ({
           <textarea
             ref={worldTextareaRef}
             rows={2}
-            className="w-full resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 outline-none ring-2 ring-transparent transition-all focus:ring-primary/80"
+            className="w-full resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
             style={{ maxHeight: "5em" }}
             value={worldPrompt}
             placeholder="Describe your 3D world (optional)..."
@@ -754,7 +755,7 @@ export const ImageTo3DExperience = ({
       <div
         key={img.id}
         className={twMerge(
-          "glass group relative aspect-square overflow-hidden rounded-lg border-2 border-white/30 transition-all",
+          "group relative aspect-square overflow-hidden rounded-[3px] border border-white/30 bg-black/30 transition-all",
           hasResults ? "w-10" : "w-auto",
           img.isUploading
             ? "cursor-default"
@@ -772,13 +773,13 @@ export const ImageTo3DExperience = ({
         />
         {img.isUploading && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/20">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-primary" />
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
           </div>
         )}
         {!img.isUploading && (
           <button
             type="button"
-            className="absolute right-[2px] top-[2px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white opacity-0 backdrop-blur-md transition-colors hover:bg-red/70 group-hover:opacity-100"
+            className="absolute right-[2px] top-[2px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-[3px] bg-black/60 text-white opacity-0 transition-colors hover:bg-red/70 group-hover:opacity-100"
             onClick={(e) => {
               e.stopPropagation();
               removeWorldImage(img.id);
@@ -820,7 +821,7 @@ export const ImageTo3DExperience = ({
         <Button
           variant="action"
           className={twMerge(
-            "aspect-square overflow-hidden rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 transition-all hover:bg-ui-controls/60 dark:border-white/25",
+            "aspect-square overflow-hidden rounded-[3px] border border-dashed border-black/15 bg-white/5 transition-all hover:border-white/40 hover:bg-white/10 dark:border-white/25",
             hasResults ? "w-10" : "w-14",
           )}
           onClick={() => worldFileInputRef.current?.click()}
@@ -836,7 +837,7 @@ export const ImageTo3DExperience = ({
     );
 
     const imageCountRow = (
-      <div className="flex items-center justify-center gap-2 text-xs text-base-fg/40">
+      <div className="flex items-center justify-center gap-2 font-mono text-[11px] tabular-nums text-base-fg/40">
         <span>
           {worldImages.length}/{MAX_WORLD_IMAGES} images
         </span>
@@ -865,7 +866,7 @@ export const ImageTo3DExperience = ({
             <textarea
               ref={worldTextareaRef}
               rows={1}
-              className="flex-1 resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2 text-sm text-base-fg placeholder-base-fg/60 focus:outline-none focus:ring-2 focus:ring-primary/60"
+              className="flex-1 resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
               value={worldPrompt}
               placeholder="Describe world (optional)..."
               onChange={(e) => setWorldPrompt(e.target.value)}
@@ -887,7 +888,7 @@ export const ImageTo3DExperience = ({
         <textarea
           ref={worldTextareaRef}
           rows={2}
-          className="w-full resize-none overflow-y-auto rounded-lg bg-white/5 px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 focus:outline-none focus:ring-2 focus:ring-primary/60"
+          className="w-full resize-none overflow-y-auto rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2.5 text-base text-base-fg placeholder-base-fg/60 transition-colors focus:border-white/60 focus:outline-none"
           style={{ maxHeight: "5em" }}
           value={worldPrompt}
           placeholder="Describe your 3D world (optional)..."
@@ -907,7 +908,7 @@ export const ImageTo3DExperience = ({
     results.find((r) => r.id === selectedResultId) || results[0];
 
   return (
-    <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full bg-ui-panel text-base-fg">
+    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background text-base-fg">
       {backgroundImage && !hasResults && (
         <>
           <div className="pointer-events-none fixed inset-0 z-[1] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_49%,_rgb(var(--st-controls-rgb)_/_var(--st-gallery-vignette-alpha))_100%)]" />
@@ -928,9 +929,12 @@ export const ImageTo3DExperience = ({
 
       <div className="relative z-10 h-full w-full p-8">
         {!hasResults && (
-          <div className="pointer-events-none absolute left-0 top-[calc(50%-280px)] w-full text-center">
-            <h1 className="mb-3 text-7xl font-bold tracking-tight">{title}</h1>
-            <p className="text-xl text-base-fg/70">{subtitle}</p>
+          <div className="pointer-events-none absolute left-0 top-[calc(50%-280px)] flex w-full justify-center">
+            <CreateEmptyState
+              title={title}
+              subtitle={subtitle}
+              className="py-8 sm:py-8"
+            />
           </div>
         )}
 
@@ -944,7 +948,7 @@ export const ImageTo3DExperience = ({
             style={{ height: `calc(100vh - ${bottomOffsetPx + 80}px)` }}
           >
             {/* Left: Viewer */}
-            <div className="glass relative h-full overflow-hidden rounded-xl border border-ui-panel-border">
+            <div className="relative h-full overflow-hidden border border-ui-panel-border bg-ui-panel">
               <Viewer3D
                 key={activeResult?.id}
                 modelUrl={activeResult?.modelUrl}
@@ -1002,13 +1006,15 @@ export const ImageTo3DExperience = ({
             </div>
 
             {/* Right: History List */}
-            <div className="glass flex h-full flex-col overflow-hidden rounded-xl border border-ui-panel-border">
-              <div className="flex items-center justify-between p-4">
-                <h3 className="font-semibold text-base-fg/80">History</h3>
+            <div className="flex h-full flex-col overflow-hidden border border-ui-panel-border bg-ui-panel">
+              <div className="flex items-center justify-between border-b border-ui-panel-border px-4 py-3">
+                <h3 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+                  History
+                </h3>
                 {results.length > 0 && (
                   <button
                     onClick={resetResults}
-                    className="rounded-md bg-red/20 px-3 py-1 text-xs text-white/70 transition-colors hover:bg-red/30"
+                    className="rounded-[3px] border border-red/40 bg-red/10 px-3 py-1 text-xs text-white/70 transition-colors hover:bg-red/20"
                   >
                     Clear Session
                   </button>
@@ -1024,13 +1030,13 @@ export const ImageTo3DExperience = ({
                         key={result.id}
                         onClick={() => setSelectedResultId(result.id)}
                         className={twMerge(
-                          "group flex w-full items-center gap-3 rounded-xl border p-2 text-left transition-all hover:bg-ui-controls/40",
+                          "group flex w-full items-center gap-3 rounded-none border p-2 text-left transition-all hover:bg-white/5",
                           isSelected
-                            ? "border-primary/50 bg-primary/10"
-                            : "border-transparent bg-ui-controls/20",
+                            ? "border-white bg-white/10"
+                            : "border-white/10 bg-transparent hover:border-white/30",
                         )}
                       >
-                        <div className="relative aspect-square h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black/30 ring-1 ring-white/5">
+                        <div className="relative aspect-square h-14 w-14 shrink-0 overflow-hidden border border-white/10 bg-black/30">
                           {result.previewUrl ? (
                             <img
                               src={result.previewUrl}
@@ -1049,7 +1055,7 @@ export const ImageTo3DExperience = ({
                           )}
                           {isPending && (
                             <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-primary" />
+                              <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" />
                             </div>
                           )}
                         </div>
@@ -1063,7 +1069,7 @@ export const ImageTo3DExperience = ({
                                 Generating…
                               </span>
                             ) : (
-                              <span className="text-base-fg/45">
+                              <span className="font-mono tabular-nums text-base-fg/45">
                                 {formatTime(result.timestamp)}
                               </span>
                             )}
@@ -1093,7 +1099,7 @@ export const ImageTo3DExperience = ({
           <div ref={promptContentRef}>
             <div
               className={twMerge(
-                "glass w-full rounded-xl shadow-2xl ring-1 ring-white/10",
+                "glass w-full",
                 hasResults ? "p-3" : "p-5",
               )}
             >
@@ -1138,7 +1144,7 @@ export const ImageTo3DExperience = ({
                   activeTab={activeMode}
                   onTabChange={(tabId) => setActiveMode(tabId as Mode)}
                   className="w-fit"
-                  indicatorClassName="bg-primary/25"
+                  indicatorClassName="bg-white/15"
                 />
               </div>
             )}
@@ -1195,12 +1201,12 @@ export const ImageTo3DExperience = ({
 
       {previewImage && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
           onClick={() => setPreviewImage(null)}
         >
           <button
             type="button"
-            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white transition-colors hover:bg-black/80"
+            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-[3px] border border-white/15 bg-black/60 text-white transition-colors hover:border-white/30 hover:bg-black"
             onClick={() => setPreviewImage(null)}
           >
             <XIcon  className="h-4 w-4" />
@@ -1208,7 +1214,7 @@ export const ImageTo3DExperience = ({
           <img
             src={previewImage}
             alt="Preview"
-            className="max-h-[80vh] max-w-[80vw] rounded-xl object-contain shadow-2xl"
+            className="max-h-[80vh] max-w-[80vw] border border-white/15 object-contain"
             onClick={(e) => e.stopPropagation()}
           />
         </div>
diff --git a/frontend/apps/artcraft/app/src/components/generation-feed/CreateEmptyState.tsx b/frontend/apps/artcraft/app/src/components/generation-feed/CreateEmptyState.tsx
new file mode 100644
index 0000000000..68f341ca15
--- /dev/null
+++ b/frontend/apps/artcraft/app/src/components/generation-feed/CreateEmptyState.tsx
@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+const CORNERS = [
+  "top-0 left-0",
+  "top-0 right-0",
+  "bottom-0 left-0",
+  "bottom-0 right-0",
+];
+
+interface CreateEmptyStateProps {
+  title: string;
+  subtitle: string;
+  children?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}
+
+/** A quiet editorial section with a fine border and corner registration marks. */
+export function CreateEmptyState({
+  title,
+  subtitle,
+  children,
+  compact = false,
+  className,
+}: CreateEmptyStateProps) {
+  return (
+    <section
+      className={twMerge(
+        "create-empty-section relative w-full max-w-3xl px-6 text-left sm:px-10",
+        compact ? "py-8" : "py-10 sm:py-14",
+        className,
+      )}
+    >
+      <h1
+        className={twMerge(
+          "text-balance font-display leading-[1.05] tracking-[-0.035em] text-ui-ink",
+          compact ? "text-2xl" : "text-3xl md:text-5xl",
+        )}
+      >
+        {title}
+      </h1>
+      <p className="mt-4 max-w-xl text-pretty text-sm leading-relaxed text-white/60 sm:text-base">
+        {subtitle}
+      </p>
+      {children && <div className="mt-6">{children}</div>}
+      {CORNERS.map((corner) => (
+        <span
+          key={corner}
+          aria-hidden="true"
+          className={`frame-corner-mark ${corner}`}
+        />
+      ))}
+    </section>
+  );
+}
diff --git a/frontend/apps/artcraft/app/src/components/generation-feed/DesktopCreatePageShell.tsx b/frontend/apps/artcraft/app/src/components/generation-feed/DesktopCreatePageShell.tsx
index f8578c272f..197b7c269c 100644
--- a/frontend/apps/artcraft/app/src/components/generation-feed/DesktopCreatePageShell.tsx
+++ b/frontend/apps/artcraft/app/src/components/generation-feed/DesktopCreatePageShell.tsx
@@ -1,15 +1,16 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
+import { CreateEmptyState } from "./CreateEmptyState";
 
 // Shared page chrome for the desktop Generate Image / Generate Video pages,
-// mirroring the webapp's CreateMediaPageShell: a centered hero over the
-// decorative background, and a scrollable generation feed (padded past the
-// fixed promptbox) once there is anything to show.
+// mirroring the webapp's CreateMediaPageShell: a centered empty-state panel,
+// and a scrollable generation feed (padded past the fixed promptbox) once
+// there is anything to show.
 //
-// The hero + background behave like a splash screen: they stay up while the
-// feed is still loading (pages remount on tab switches, so this covers the
-// reload) and fade out once content arrives. With a genuinely empty library
-// they simply stay — they ARE the empty state.
+// The empty state (and optional background) behave like a splash screen:
+// they stay up while the feed is still loading (pages remount on tab
+// switches, so this covers the reload) and fade out once content arrives.
+// With a genuinely empty library they simply stay.
 
 const SPLASH_FADE_MS = 700;
 
@@ -17,7 +18,8 @@ interface DesktopCreatePageShellProps {
   hasContent: boolean;
   emptyStateTitle: string;
   emptyStateSubtitle: string;
-  /** Decorative page background (fixed-position); fades out with the hero. */
+  /** Optional decorative page background (fixed-position); fades out with
+   *  the empty state. */
   background?: ReactNode;
   /** Height of the fixed promptbox area, used to pad the feed's bottom. */
   bottomOffset: number;
@@ -55,11 +57,11 @@ export function DesktopCreatePageShell({
   }, [hasContent, splashState]);
 
   return (
-    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background">
+    <div className="flex h-[calc(100vh-56px)] w-full bg-ui-background text-white">
       <div className="relative h-full w-full">
         {hasContent && (
           <div
-            className="h-full w-full overflow-y-auto pt-4"
+            className="h-full w-full overflow-y-auto pt-0.5"
             style={{ paddingBottom: bottomOffset + 24 }}
           >
             {listContent}
@@ -73,15 +75,14 @@ export function DesktopCreatePageShell({
               splashState === "fading" ? "opacity-0" : "opacity-100",
             )}
           >
-            <div className="flex h-full w-full flex-col items-center justify-center pb-52">
-              <div className="relative z-20 flex flex-col items-center justify-center text-center drop-shadow-xl">
-                <h1 className="text-7xl font-bold text-base-fg">
-                  {emptyStateTitle}
-                </h1>
-                <span className="pt-2 text-xl text-base-fg opacity-80">
-                  {emptyStateSubtitle}
-                </span>
-              </div>
+            <div
+              className="relative z-20 flex h-full w-full items-center justify-center px-6"
+              style={{ paddingBottom: bottomOffset }}
+            >
+              <CreateEmptyState
+                title={emptyStateTitle}
+                subtitle={emptyStateSubtitle}
+              />
             </div>
             {background}
           </div>
@@ -92,7 +93,7 @@ export function DesktopCreatePageShell({
         {hasContent && (
           <div
             aria-hidden
-            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-64 bg-gradient-to-t from-ui-background to-transparent"
+            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-48 bg-gradient-to-t from-ui-background to-transparent"
           />
         )}
 
diff --git a/frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx b/frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx
index 69fef3c575..327031844a 100644
--- a/frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx
+++ b/frontend/apps/artcraft/app/src/components/generation-feed/DesktopGenerationGallery.tsx
@@ -180,7 +180,7 @@ function SelectionDownloadBar({
         type="button"
         onClick={handleDownload}
         disabled={isDownloading || selectedItems.length === 0}
-        className="flex items-center gap-2 rounded-full bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:opacity-60"
+        className="flex items-center gap-2 border border-white/15 bg-ui-controls/60 px-3 py-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white transition-colors hover:bg-ui-controls/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 disabled:opacity-60"
       >
         <DynamicIcon
           icon={isDownloading ? LoaderCircleIcon : ArrowDownToLineIcon}
@@ -226,8 +226,8 @@ function ItemActions({
 
   const buttonClass =
     variant === "card"
-      ? "flex h-7 w-7 items-center justify-center rounded-md text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60"
-      : "flex h-8 w-8 items-center justify-center rounded-md text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
+      ? "flex h-7 w-7 items-center justify-center text-white/85 transition-colors hover:bg-white/15 hover:text-white disabled:opacity-60"
+      : "flex h-8 w-8 items-center justify-center text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-60";
 
   const handleRecreate = useCallback(
     async (e: React.MouseEvent) => {
@@ -305,7 +305,7 @@ function ItemActions({
             aria-label="Make Video"
             className={buttonClass}
           >
-            <VideoIcon  className="text-sm" />
+            <VideoIcon className="text-sm" />
           </button>
         </Tooltip>
       )}
diff --git a/frontend/apps/artcraft/app/src/components/media/UploadEntryCard.tsx b/frontend/apps/artcraft/app/src/components/media/UploadEntryCard.tsx
index d12eeb92c7..82380031ff 100644
--- a/frontend/apps/artcraft/app/src/components/media/UploadEntryCard.tsx
+++ b/frontend/apps/artcraft/app/src/components/media/UploadEntryCard.tsx
@@ -106,8 +106,8 @@ export const UploadEntryCard = ({
   return (
     <div
       className={twMerge(
-        "bg-ui-background/60 relative flex h-full flex-col items-center justify-center gap-8 overflow-hidden rounded-2xl border-2 border-dashed border-ui-panel-border p-10 text-center transition-colors",
-        isDragActive && "border-primary/80 bg-primary/5",
+        "relative flex h-full flex-col items-center justify-center gap-6 overflow-hidden rounded-[3px] border border-dashed border-white/15 bg-ui-background p-8 text-center transition-colors hover:border-white/40",
+        isDragActive && "border-white bg-white/10 hover:border-white",
         disabled && "pointer-events-none opacity-60",
       )}
       onDragEnter={handleDragEnter}
@@ -124,35 +124,28 @@ export const UploadEntryCard = ({
         onChange={handleFileChange}
         disabled={disabled}
       />
-      <div className="flex flex-col items-center gap-6">
-        <div className="relative">
-          <div
-            className={twMerge(
-              "relative flex h-32 w-32 items-center justify-center rounded-2xl border-2 shadow-xl backdrop-blur-sm",
-              accentBackgroundClass,
-              accentBorderClass,
-            )}
-          >
-            <DynamicIcon
-              icon={icon}
-              className="text-5xl text-white drop-shadow-lg"
-            />
-          </div>
+      <div className="flex flex-col items-center gap-4">
+        <div
+          className={twMerge(
+            "flex h-14 w-14 items-center justify-center border",
+            accentBackgroundClass,
+            accentBorderClass,
+          )}
+        >
+          <DynamicIcon icon={icon} className="text-xl text-white" />
         </div>
-        <div className="space-y-3">
-          <h3 className="text-4xl font-bold tracking-tight text-base-fg">
-            {title}
-          </h3>
-          <p className="mx-auto max-w-md text-base leading-relaxed text-base-fg/70">
+        <div>
+          <h3 className="text-lg font-semibold text-base-fg">{title}</h3>
+          <p className="mx-auto mt-1 max-w-md text-sm text-base-fg/60">
             {description}
           </p>
         </div>
-        <div className="mt-4 flex flex-wrap justify-center gap-4">
+        <div className="mt-2 flex flex-wrap justify-center gap-2">
           <Button
             variant="primary"
             icon={primaryIcon}
             onClick={handlePrimaryClick}
-            className="px-8 py-3 text-base font-semibold shadow-lg"
+            className="px-3 py-2"
             disabled={disabled}
           >
             {primaryLabel}
@@ -162,7 +155,7 @@ export const UploadEntryCard = ({
               variant="action"
               icon={secondaryIcon}
               onClick={onSecondaryClick}
-              className="border-2 px-8 py-3 text-base font-semibold"
+              className="px-3 py-2"
               disabled={disabled}
             >
               {secondaryLabel}
@@ -173,7 +166,7 @@ export const UploadEntryCard = ({
               variant="action"
               icon={tertiaryIcon}
               onClick={onTertiaryClick}
-              className="border-2 px-8 py-3 text-base font-semibold"
+              className="px-3 py-2"
               disabled={disabled}
             >
               {tertiaryLabel}
diff --git a/frontend/apps/artcraft/app/src/components/reusable/ConfirmationModal.tsx b/frontend/apps/artcraft/app/src/components/reusable/ConfirmationModal.tsx
index d7c51c7b58..02f09be486 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/ConfirmationModal.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/ConfirmationModal.tsx
@@ -24,7 +24,7 @@ export const ConfirmationModal = ({
   onClose,
   onOk,
   okText = "OK",
-  okColor = "bg-brand-success",
+  okColor = "",
   onCancel,
   cancelText = "Cancel",
   canHide,
@@ -52,7 +52,7 @@ export const ConfirmationModal = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-black/40" />
+          <div className="fixed inset-0 bg-black/80" />
         </Transition.Child>
         <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
           <Transition.Child
@@ -64,15 +64,15 @@ export const ConfirmationModal = ({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all">
+            <Dialog.Panel className="w-full max-w-md transform overflow-hidden border border-white/15 bg-ui-modal p-5 text-left align-middle transition-all">
               <Dialog.Title
                 as="h4"
-                className="mb-4 text-xl font-bold text-white"
+                className="mb-4 font-display text-xl tracking-tight text-white"
               >
                 {title}
               </Dialog.Title>
 
-              <div className="mt-2">{text}</div>
+              <div className="mt-2 text-sm leading-relaxed text-white/70">{text}</div>
               {canHide && (
                 <div className="mt-2">
                   <Checkbox id="hide-dialog" label="Do not show this again" />
@@ -84,7 +84,7 @@ export const ConfirmationModal = ({
                   <Button
                     type="button"
                     onClick={onCancel}
-                    className="rounded-lg px-3 py-2"
+                    className="px-3 py-2"
                     variant="secondary"
                   >
                     {cancelText}
@@ -94,7 +94,7 @@ export const ConfirmationModal = ({
                   <Button
                     type="button"
                     onClick={handleOk}
-                    className={[okColor, "rounded-lg px-3 py-2"].join(" ")}
+                    className={[okColor, "px-3 py-2"].join(" ").trim()}
                   >
                     {okText}
                   </Button>
diff --git a/frontend/apps/artcraft/app/src/components/reusable/CostModal.tsx b/frontend/apps/artcraft/app/src/components/reusable/CostModal.tsx
index a959d9f04b..32995cf568 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/CostModal.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/CostModal.tsx
@@ -37,11 +37,11 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
         transition={{ duration: 0.1, ease: "easeOut" }}
         drag
         dragMomentum={false}
-        className="pointer-events-auto z-10 flex w-72 flex-col overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel shadow-2xl"
+        className="pointer-events-auto z-10 flex w-72 flex-col overflow-hidden border border-white/15 bg-ui-panel"
       >
-        <div className="bg-ui-panel-header flex cursor-move select-none items-center justify-between border-b border-ui-panel-border px-4 py-3">
-          <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-base-fg">
-            <CoinsIcon  className="text-yellow-400" />
+        <div className="flex cursor-move select-none items-center justify-between border-b border-white/15 px-4 py-3">
+          <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg">
+            <CoinsIcon className="text-primary" />
             Cost Breakdown
           </div>
           <button
@@ -53,10 +53,10 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
         </div>
 
         <div className="space-y-4 bg-ui-panel p-4">
-          <div className="border-ui-controls-border rounded-lg border bg-ui-controls/50 p-3">
+          <div className="border border-white/15 bg-white/5 p-3">
             <div className="mb-1 flex items-center justify-between">
               <span className="text-sm text-base-fg/80">Total Cost</span>
-              <span className="text-lg font-bold text-base-fg">
+              <span className="text-lg font-semibold tabular-nums tracking-tight text-base-fg">
                 {credits} Credits
               </span>
             </div>
@@ -66,7 +66,7 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
           </div>
 
           <div className="space-y-1">
-            <label className="text-xs font-medium text-base-fg/80">
+            <label className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
               Currency
             </label>
             <Select
@@ -77,7 +77,7 @@ export const CostModal = ({ credits = 1, onClose }: CostModalProps) => {
             />
           </div>
 
-          <div className="mt-2 border-t border-ui-panel-border pt-3 text-center text-[10px] text-base-fg/40">
+          <div className="mt-2 border-t border-white/15 pt-3 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-base-fg/40">
             1 Credit = $0.01 USD
           </div>
         </div>
diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadFilesMedia.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadFilesMedia.tsx
index c1630c6747..4fe4eaec30 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadFilesMedia.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadFilesMedia.tsx
@@ -84,7 +84,7 @@ export const UploadFilesMedia = ({
           <h6 className="z-10 text-red">{assetFile.error}</h6>
         )}
 
-        <div className="relative m-auto aspect-square w-full overflow-hidden rounded-lg bg-brand-secondary">
+        <div className="relative m-auto aspect-square w-full overflow-hidden border border-white/15 bg-ui-controls">
           {!assetFile.value && (
             <h6 className="absolute left-0 top-1/2 -mt-5 w-full text-center">
               File Preview
diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMedia.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMedia.tsx
index d5799b74f9..b483a64c90 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMedia.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMedia.tsx
@@ -85,7 +85,7 @@ export const UploadImageMedia = ({
           <H6 className="z-10 text-red"> {assetFile.error} </H6>
         )}
 
-        <div className="relative m-auto aspect-square w-full overflow-hidden rounded-lg bg-brand-secondary">
+        <div className="relative m-auto aspect-square w-full overflow-hidden border border-white/15 bg-ui-controls">
           {!assetFile.value && (
             <H6 className="absolute left-0 top-1/2 -mt-5 w-full text-center">
               File Preview
diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx
index 94ff4dfebc..e65a5b7a90 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx
@@ -61,7 +61,7 @@ export function UploadImageMediaModal({
         return (
           <>
             <LoadingDots className="mb-1 bg-transparent" />
-            <div className="w-100 text-center opacity-50">Uploading...</div>
+            <div className="hud-label w-full text-center text-base-fg/50">Uploading...</div>
           </>
         );
       case UploaderStates.success:
diff --git a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx
index 2c3c528e56..b3168736df 100644
--- a/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx
+++ b/frontend/apps/artcraft/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx
@@ -59,7 +59,7 @@ export function UploadModalMedia({
         return (
           <>
             <LoadingDots className="mb-1 bg-transparent" />
-            <div className="w-100 text-center opacity-50">Uploading...</div>
+            <div className="hud-label w-full text-center text-base-fg/50">Uploading...</div>
           </>
         );
       case UploaderStates.success:
diff --git a/frontend/apps/artcraft/app/src/components/signaled/ErrorDialog.tsx b/frontend/apps/artcraft/app/src/components/signaled/ErrorDialog.tsx
index 51c8f33039..383b0c2305 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/ErrorDialog.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/ErrorDialog.tsx
@@ -20,14 +20,14 @@ export function ErrorDialog() {
     <Modal
       title={errorDialogTitle}
       titleIcon={TriangleAlertIcon}
-      titleIconClassName="text-brand-primary"
+      titleIconClassName="text-red-400"
       isOpen={showErrorDialog}
       onClose={() => setShowErrorDialog(false)}
       showClose={false}
     >
       <div>
         {errorDialogMessage}
-        <div className="flex justify-end">
+        <div className="mt-4 flex justify-end">
           <Button
             type="button"
             onClick={() => setShowErrorDialog(false)}
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/AppsQuickMenu.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/AppsQuickMenu.tsx
index 899f97aa96..4a8ce8af8b 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/AppsQuickMenu.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/AppsQuickMenu.tsx
@@ -3,8 +3,10 @@ import { twMerge } from "tailwind-merge";
 import {
   useGenerateApps,
   useEditApps,
+  getAppCardPalette,
   getBadgeStyles,
   goToApp,
+  type FullAppItem,
 } from "~/config/appMenu";
 
 export const AppsQuickMenu = () => {
@@ -12,101 +14,68 @@ export const AppsQuickMenu = () => {
   const editApps = useEditApps();
   return (
     <div className="grid w-[680px] grid-cols-2 gap-3">
-      <div>
-        <h3 className="mb-2 px-2 text-xs font-semibold opacity-50">Create</h3>
-        <div className="space-y-0.5">
-          {generateApps.map((app) => (
-            <button
-              key={app.id}
-              onClick={() => goToApp(app.action)}
-              disabled={!app.action}
-              className={twMerge(
-                "group flex w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-colors",
-                app.action
-                  ? "cursor-pointer hover:bg-base-fg/10"
-                  : "cursor-default opacity-60",
-              )}
-            >
-              <div
-                className={twMerge(
-                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors",
-                  app.color || "bg-ui-panel",
-                )}
-              >
-                <DynamicIcon icon={app.icon} className="text-sm" />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5">
-                  <div className="truncate text-[13px] font-medium">
-                    {app.label}
-                  </div>
-                  {app.badge && (
-                    <span
-                      className={twMerge(
-                        "shrink-0 rounded-full px-2 py-1 text-[9px] font-bold uppercase tracking-wider",
-                        getBadgeStyles(app.badge),
-                      )}
-                    >
-                      {app.badge}
-                    </span>
-                  )}
-                </div>
-                <div className="truncate text-[11px] opacity-60">
-                  {app.description}
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <h3 className="mb-2 px-2 text-xs font-semibold opacity-50">Edit</h3>
-        <div className="space-y-0.5">
-          {editApps.map((app) => (
-            <button
-              key={app.id}
-              onClick={() => goToApp(app.action)}
-              disabled={!app.action}
-              className={twMerge(
-                "group flex w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-colors",
-                app.action
-                  ? "cursor-pointer hover:bg-base-fg/10"
-                  : "cursor-default opacity-60",
-              )}
-            >
-              <div
-                className={twMerge(
-                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors",
-                  app.color || "bg-ui-panel",
-                )}
-              >
-                <DynamicIcon icon={app.icon} className="text-sm" />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5">
-                  <div className="truncate text-[13px] font-medium">
-                    {app.label}
-                  </div>
-                  {app.badge && (
-                    <span
-                      className={twMerge(
-                        "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
-                        getBadgeStyles(app.badge),
-                      )}
-                    >
-                      {app.badge}
-                    </span>
-                  )}
-                </div>
-                <div className="truncate text-[11px] opacity-60">
-                  {app.description}
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
+      <AppsQuickMenuSection title="Create" apps={generateApps} />
+      <AppsQuickMenuSection title="Edit" apps={editApps} />
     </div>
   );
 };
+
+const AppsQuickMenuSection = ({
+  title,
+  apps,
+}: {
+  title: string;
+  apps: FullAppItem[];
+}) => (
+  <div>
+    <h3 className="hud-label mb-2 px-2 text-base-fg/50">{title}</h3>
+    <div className="space-y-0.5">
+      {apps.map((app) => {
+        const palette = getAppCardPalette(app.id);
+        return (
+          <button
+            key={app.id}
+            onClick={() => goToApp(app.action)}
+            disabled={!app.action}
+            className={twMerge(
+              "group flex w-full items-center gap-3 px-2 py-2 text-left transition-colors",
+              app.action
+                ? "cursor-pointer hover:bg-white/10"
+                : "cursor-default opacity-60",
+            )}
+          >
+            <div
+              className={twMerge(
+                "flex h-8 w-8 shrink-0 items-center justify-center border transition-colors",
+                palette.iconBg,
+                palette.iconColor,
+              )}
+            >
+              <DynamicIcon icon={app.icon} className="text-sm" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5">
+                <div className="truncate text-[13px] font-medium">
+                  {app.label}
+                </div>
+                {app.badge && (
+                  <span
+                    className={twMerge(
+                      "shrink-0 border px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase leading-none tracking-[0.12em]",
+                      getBadgeStyles(app.badge),
+                    )}
+                  >
+                    {app.badge}
+                  </span>
+                )}
+              </div>
+              <div className="truncate text-[11px] text-base-fg/60">
+                {app.description}
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  </div>
+);
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/AuthButtons.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/AuthButtons.tsx
index 960a7d84bd..e13a2393db 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/AuthButtons.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/AuthButtons.tsx
@@ -1,7 +1,6 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { AUTH_STATUS } from "~/enums";
 import { authentication } from "~/signals";
-import { Button } from "@storyteller/ui-button";
 // import ProfileDropdown from "./ProfileDropdown";
 
 export const AuthButtons = ({
@@ -19,15 +18,14 @@ export const AuthButtons = ({
     return (
       <>
         <div className="flex items-center gap-2">
-          <span className="text-white/20">|</span>
-          <Button
-            className="h-[38px]"
+          <button
+            className="flex h-8 items-center gap-1.5 rounded-[3px] bg-white px-3.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-black transition-colors hover:bg-white/80"
             onClick={() => {
               loginSignUpPressed();
             }}
           >
             Login / Sign Up
-          </Button>
+          </button>
         </div>
       </>
     );
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/ProfileDropdown.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/ProfileDropdown.tsx
index 211ae0b441..459a5b086b 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/ProfileDropdown.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/ProfileDropdown.tsx
@@ -56,20 +56,20 @@ export default function ProfileDropdown() {
       >
         <Menu.Items
           static
-          className="absolute right-[-5px] mt-2.5 w-36 overflow-hidden rounded-lg bg-brand-secondary shadow-lg focus:outline-none"
+          className="absolute right-0 z-50 mt-2 w-48 origin-top-right overflow-hidden rounded-[3px] border border-white/15 bg-[#101014] focus:outline-none"
         >
           <Menu.Item key={0}>
             {({ active }) => (
               <a
                 className={twMerge(
-                  "duration-50 group flex w-full items-center gap-2 bg-action/60 px-3 py-[10px] text-start text-sm font-medium text-white transition-all",
-                  active && "bg-action-500/80",
+                  "group flex w-full items-center gap-2 px-4 py-2 text-start text-sm text-white/70 transition-colors",
+                  active && "bg-white/10",
                 )}
                 href={profileUrl}
                 target="_blank"
                 rel="noreferrer"
               >
-                <UserIcon />
+                <UserIcon className="text-[11px] text-white/50" />
                 My Profile
               </a>
             )}
@@ -79,12 +79,15 @@ export default function ProfileDropdown() {
               {({ active }) => (
                 <button
                   className={twMerge(
-                    "duration-50 group flex w-full items-center gap-2 bg-action/60 px-3 py-[10px] text-start text-sm font-medium text-white transition-all",
-                    active && "bg-action-500/80",
+                    "group flex w-full items-center gap-2 px-4 py-2 text-start text-sm text-white/70 transition-colors",
+                    active && "bg-white/10",
                   )}
                   onClick={() => option.onClick()}
                 >
-                  <DynamicIcon icon={option.icon} />
+                  <DynamicIcon
+                    icon={option.icon}
+                    className="text-[11px] text-white/50"
+                  />
                   {option.label}
                 </button>
               )}
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/SceneTitleInput.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/SceneTitleInput.tsx
index 542615dff2..1dd589e2b1 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/SceneTitleInput.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/SceneTitleInput.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useSignals } from "@preact/signals-react/runtime";
-import { LoaderCircleIcon, PencilIcon } from "lucide-react";
+import { ChevronRightIcon, LoaderCircleIcon, PencilIcon } from "lucide-react";
 import { scene, signalScene, authentication } from "~/signals";
 import { usePageSceneStore } from "@storyteller/ui-pagescene";
 import { Input } from "@storyteller/ui-input";
 import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
-import { getCreatorIcon, ModelCreator } from "@storyteller/model-list";
 
 interface Props {
   pageName: string;
@@ -95,27 +94,29 @@ export const SceneTitleInput = ({ pageName }: Props) => {
       data-tauri-drag-region
     >
       {!showInput && (
-        <div className="flex items-center gap-2.5" data-tauri-drag-region>
-          {getCreatorIcon(
-            ModelCreator.ArtCraft,
-            "h-5 w-5 icon-auto-contrast opacity-60",
-          )}
-          <span className="text-nowrap opacity-60">{pageName}</span>
-          <span className="opacity-60">/</span>
+        <div className="flex items-center gap-1.5" data-tauri-drag-region>
+          <span
+            className="hud-label text-nowrap text-base-fg/70"
+            data-tauri-drag-region
+          >
+            {pageName}
+          </span>
+          <ChevronRightIcon
+            aria-hidden="true"
+            className="h-3 w-3 shrink-0 text-base-fg/50"
+          />
 
           {isSceneOwner ? (
             <button
-              className="ml-0.5 rounded-md px-2 py-1 transition-all hover:cursor-text hover:bg-white/[8%]"
+              className="flex max-w-[280px] items-center border border-transparent px-3 py-1.5 text-sm font-semibold text-white transition-colors hover:cursor-text hover:bg-white/10"
               onClick={handleShowInput}
               data-tauri-drag-region="false"
             >
-              {scene.value.title || ""}
-              <PencilIcon
-                
-                className="ml-2 text-sm opacity-50" />
+              <span className="truncate">{scene.value.title || ""}</span>
+              <PencilIcon className="ml-2 shrink-0 text-sm opacity-50" />
             </button>
           ) : (
-            <div className="ml-0.5 rounded-md px-2 py-1">
+            <div className="max-w-[280px] truncate border border-transparent px-3 py-1.5 text-sm font-semibold text-white/80">
               {scene.value.title || ""}
             </div>
           )}
@@ -128,8 +129,8 @@ export const SceneTitleInput = ({ pageName }: Props) => {
             disabled={scene.value.ownerToken !== userInfo.value?.user_token}
             className="w-[420px]"
             inputClassName={twMerge(
-              "text-center h-8 focus:outline-brand-primary",
-              isSaving && "outline-brand-secondary",
+              "text-center h-[34px] text-sm font-semibold focus:outline-white/60",
+              isSaving && "outline-white/30",
             )}
             isError={!isValid}
             value={scene.value.title || ""}
@@ -152,7 +153,9 @@ export const SceneTitleInput = ({ pageName }: Props) => {
         </div>
       )}
 
-      {isSaving && <LoaderCircleIcon className="animate-spin" />}
+      {isSaving && (
+        <LoaderCircleIcon className="shrink-0 animate-spin text-sm opacity-70" />
+      )}
     </div>
   );
 };
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/TaskQueue.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/TaskQueue.tsx
index 4e94261f52..b710abc9f3 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/TaskQueue.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/TaskQueue.tsx
@@ -41,6 +41,7 @@ import { coverImageCache } from "~/pages/PageImageTo3DObject/ImageTo3DStore";
 import { useCreditsState } from "@storyteller/credits";
 import { getMetaForTask, cleanupOldEntries } from "./taskEnqueueMeta";
 import { twMerge } from "tailwind-merge";
+import dayjs from "dayjs";
 
 type InProgressTask = {
   id: string;
@@ -159,7 +160,7 @@ const CopyPromptButton = ({ prompt }: { prompt: string }) => {
       delay={300}
     >
       <button
-        className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+        className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
         aria-label="Copy prompt"
         onClick={(e) => {
           e.stopPropagation();
@@ -195,7 +196,7 @@ const InProgressCard = ({
   const hasRefImages = task.refImageUrls && task.refImageUrls.length > 0;
 
   const thumbnailContent = hasRefImages ? (
-    <div className="relative h-[86px] w-[86px] shrink-0 overflow-hidden rounded">
+    <div className="relative h-[72px] w-[72px] shrink-0 overflow-hidden">
       <img
         src={task.refImageUrls![0]}
         alt="Reference"
@@ -212,13 +213,13 @@ const InProgressCard = ({
           size="lg" />
       </div>
       {task.refImageUrls!.length > 1 && (
-        <div className="absolute bottom-0.5 right-0.5 rounded bg-black/60 px-1 text-[9px] text-white/80">
+        <div className="absolute bottom-0.5 right-0.5 bg-black/60 px-1 text-[9px] text-white/80">
           +{task.refImageUrls!.length - 1}
         </div>
       )}
     </div>
   ) : (
-    <div className="flex h-[86px] w-[86px] shrink-0 items-center justify-center overflow-hidden rounded bg-ui-controls">
+    <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden bg-ui-controls">
       <LoaderCircleIcon
         
         className="animate-spin text-base-fg/60"
@@ -227,7 +228,7 @@ const InProgressCard = ({
   );
 
   return (
-    <div className="rounded-md p-2 transition-colors hover:bg-ui-controls/40">
+    <div className="p-2 transition-colors hover:bg-ui-controls/40">
       <div className="flex items-center gap-2.5">
         {thumbnailContent}
         <div className="min-w-0 flex-1">
@@ -239,7 +240,7 @@ const InProgressCard = ({
                   content="Seedance 2.0 is in Early Alpha. Generations may be slow and may experience outages."
                   position="top"
                   strategy="fixed"
-                  className="w-[200px] text-wrap bg-yellow-400/60 backdrop-blur-3xl"
+                  className="w-[200px] text-wrap bg-yellow-400/60"
                   zIndex={50}
                   delay={100}
                 >
@@ -249,7 +250,7 @@ const InProgressCard = ({
                 </Tooltip>
               )}
             </div>
-            <div className="ml-2 shrink-0 text-[11px] tabular-nums text-base-fg/60">
+            <div className="ml-2 shrink-0 text-xs tabular-nums text-base-fg/60">
               {progressPercent}%
             </div>
           </div>
@@ -259,9 +260,9 @@ const InProgressCard = ({
             </div>
           )}
           <div className="mt-1.5 flex items-center gap-2">
-            <div className="h-1.5 min-w-0 flex-1 rounded bg-ui-controls">
+            <div className="h-1.5 min-w-0 flex-1 bg-ui-controls">
               <div
-                className="h-1.5 rounded bg-brand-primary-400"
+                className="h-1.5 bg-white"
                 style={{
                   width: `${Math.max(0, Math.min(100, task.progress))}%`,
                 }}
@@ -269,7 +270,7 @@ const InProgressCard = ({
             </div>
           </div>
           {timeLabel && (
-            <div className="mt-1 text-[11px] text-base-fg/50">{timeLabel}</div>
+            <div className="mt-1 text-xs text-base-fg/50">{timeLabel}</div>
           )}
           {task.prompt && <PromptLine prompt={task.prompt} className="mt-0" />}
         </div>
@@ -277,7 +278,7 @@ const InProgressCard = ({
           {task.prompt && <CopyPromptButton prompt={task.prompt} />}
           {onDismiss && (
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+              className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
               aria-label="Dismiss"
               onClick={(e) => {
                 e.stopPropagation();
@@ -304,12 +305,12 @@ const CompletedCard = ({
 }) => {
   return (
     <div
-      className="flex cursor-pointer items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-ui-controls/40"
+      className="flex cursor-pointer items-center gap-2.5 p-2 transition-colors hover:bg-ui-controls/40"
       onClick={onClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : -1}
     >
-      <div className="h-[86px] w-[86px] shrink-0 overflow-hidden rounded bg-ui-controls">
+      <div className="h-[72px] w-[72px] shrink-0 overflow-hidden bg-ui-controls">
         {task.thumbnailUrl ? (
           <img
             src={task.thumbnailUrl}
@@ -342,7 +343,7 @@ const CompletedCard = ({
         )}
         {task.completedAt && (
           <div className="text-xs text-base-fg opacity-60">
-            {task.completedAt.toISOString()}
+            {dayjs(task.completedAt).format("MMM D, h:mm A")}
           </div>
         )}
         {task.prompt && <PromptLine prompt={task.prompt} />}
@@ -351,7 +352,7 @@ const CompletedCard = ({
         {task.prompt && <CopyPromptButton prompt={task.prompt} />}
         {onDismiss && (
           <button
-            className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+            className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
             aria-label="Dismiss"
             onClick={(e) => {
               e.stopPropagation();
@@ -398,7 +399,7 @@ const FailedCard = ({
   const hasRefImages = task.refImageUrls && task.refImageUrls.length > 0;
 
   const thumbnailContent = hasRefImages ? (
-    <div className="relative h-[86px] w-[86px] shrink-0 overflow-hidden rounded">
+    <div className="relative h-[72px] w-[72px] shrink-0 overflow-hidden">
       <img
         src={task.refImageUrls![0]}
         alt="Reference"
@@ -415,13 +416,13 @@ const FailedCard = ({
           size="lg" />
       </div>
       {task.refImageUrls!.length > 1 && (
-        <div className="absolute bottom-0.5 right-0.5 rounded bg-black/60 px-1 text-[9px] text-white/80">
+        <div className="absolute bottom-0.5 right-0.5 bg-black/60 px-1 text-[9px] text-white/80">
           +{task.refImageUrls!.length - 1}
         </div>
       )}
     </div>
   ) : (
-    <div className="flex h-[86px] w-[86px] shrink-0 items-center justify-center overflow-hidden rounded bg-red-500/10">
+    <div className="flex h-[72px] w-[72px] shrink-0 items-center justify-center overflow-hidden bg-red-500/10">
       <CircleAlertIcon
         
         className="text-red-400"
@@ -430,7 +431,7 @@ const FailedCard = ({
   );
 
   return (
-    <div className="rounded-md p-2 transition-colors hover:bg-ui-controls/40">
+    <div className="p-2 transition-colors hover:bg-ui-controls/40">
       <div className="flex items-center gap-2.5">
         {thumbnailContent}
         <div className="min-w-0 flex-1">
@@ -445,7 +446,7 @@ const FailedCard = ({
             </div>
           )}
           <div className="mt-1 flex min-w-0 items-center gap-1.5 overflow-hidden">
-            <span className="shrink-0 rounded bg-red-500/15 px-1.5 py-0 text-[11px] font-medium text-red-400">
+            <span className="shrink-0 bg-red-500/15 px-1.5 py-0 text-[11px] font-medium text-red-400">
               {statusLabel}
             </span>
             {task.failureReason && (
@@ -478,13 +479,18 @@ const FailedCard = ({
               </div>
             )}
           </div>
+          {task.failedAt && (
+            <div className="mt-0.5 text-[11px] text-base-fg/40">
+              {dayjs(task.failedAt).format("MMM D, h:mm A")}
+            </div>
+          )}
           {task.prompt && <PromptLine prompt={task.prompt} />}
         </div>
         <div className="ml-auto flex shrink-0 items-center gap-1">
           {task.prompt && <CopyPromptButton prompt={task.prompt} />}
           {onDismiss && (
             <button
-              className="flex h-6 w-6 items-center justify-center rounded-full text-base-fg/60 hover:bg-ui-controls"
+              className="flex h-6 w-6 items-center justify-center text-base-fg/60 hover:bg-ui-controls"
               aria-label="Dismiss"
               onClick={(e) => {
                 e.stopPropagation();
@@ -1002,23 +1008,21 @@ export const TaskQueue = () => {
       <Tooltip content="Task Queue" position="bottom" closeOnClick={true}>
         <div className="relative">
           {badgeCount > 0 && (
-            <div className="absolute -right-1 -top-1 z-20 flex h-[17px] w-[17px] items-center justify-center rounded-full bg-brand-primary-400 text-[13px] font-medium text-white">
+            <div className="absolute -right-1 -top-1 z-20 flex h-[15px] min-w-[15px] items-center justify-center bg-white px-1 font-mono text-[10px] font-semibold text-black ring-2 ring-[#0b0b0c]">
               {badgeCount}
             </div>
           )}
           <PopoverMenu
             mode="default"
-            buttonClassName="h-[34px] w-[34px] !p-0 relative"
-            panelClassName="w-[400px] p-2 bg-ui-panel mt-2.5"
+            buttonClassName="h-8 w-8 !p-0 relative bg-transparent hover:bg-white/10 border border-white/15 hover:border-white/30 text-white/80 rounded-[3px] shadow-none"
+            panelClassName="w-[400px] p-2 bg-[#101014] border border-white/15 mt-2 rounded-[3px]"
             position="bottom"
             align="end"
             triggerIcon={
               inProgressCount > 0 ? (
-                <LoaderCircleIcon
-                  
-                  className="animate-spin" />
+                <LoaderCircleIcon className="animate-spin text-[11px]" />
               ) : (
-                <ListChecksIcon />
+                <ListChecksIcon className="text-[11px]" />
               )
             }
             onOpenChange={handleOpenChange}
@@ -1037,7 +1041,7 @@ export const TaskQueue = () => {
                       <div>
                         {inProgress.length > 0 && (
                           <div className="mb-4">
-                            <div className="mb-1 px-1 text-xs uppercase tracking-wide text-base-fg/50">
+                            <div className="mb-1 px-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                               In Progress
                             </div>
                             {inProgress.map((t) => (
@@ -1056,7 +1060,7 @@ export const TaskQueue = () => {
                         {failed.length > 0 && (
                           <div className="mb-4">
                             <div className="mb-1 flex items-center justify-between px-1">
-                              <div className="text-xs font-semibold uppercase tracking-wide text-red-400/70">
+                              <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-red-400/70">
                                 Failed
                               </div>
                               <button
@@ -1081,7 +1085,7 @@ export const TaskQueue = () => {
                         {completed.length > 0 && (
                           <div>
                             <div className="mb-1 flex items-center justify-between px-1">
-                              <div className="text-xs font-semibold uppercase tracking-wide text-base-fg/50">
+                              <div className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                                 Completed
                               </div>
                               <button
@@ -1159,7 +1163,7 @@ export const TaskQueue = () => {
         showClose={false}
       >
         <div className="flex h-full flex-col">
-          <div className="rounded-t-xl border-ui-panel-border bg-ui-panel">
+          <div className="border-b border-ui-panel-border bg-ui-panel">
             <div className="flex items-center justify-between p-3">
               <h2 className="text-lg font-semibold">Task Queue</h2>
               <div className="flex items-center gap-2">
@@ -1207,7 +1211,7 @@ export const TaskQueue = () => {
               <div>
                 {inProgress.length > 0 && (
                   <div className="mb-4">
-                    <div className="mb-2 px-1 text-xs uppercase tracking-wide text-base-fg/50">
+                    <div className="mb-1 px-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                       In Progress
                     </div>
                     {inProgress.map((t) => (
@@ -1223,7 +1227,7 @@ export const TaskQueue = () => {
                 )}
                 {failed.length > 0 && (
                   <div className="mb-4">
-                    <div className="mb-2 px-1 text-xs uppercase tracking-wide text-red-400/70">
+                    <div className="mb-1 px-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-red-400/70">
                       Failed
                     </div>
                     {failed.map((t) => (
@@ -1237,7 +1241,7 @@ export const TaskQueue = () => {
                 )}
                 {completed.length > 0 && (
                   <div>
-                    <div className="mb-2 px-1 text-xs uppercase tracking-wide text-base-fg/50">
+                    <div className="mb-1 px-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
                       Completed
                     </div>
                     {completed.map((t) => (
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/TopBar.tsx
index 88ee789b65..0aee614752 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/TopBar.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/TopBar.tsx
@@ -1,8 +1,7 @@
-import { CalculatorIcon, CheckIcon, CircleAlertIcon, CoinsIcon, GemIcon, HouseIcon, ImagesIcon, MinusIcon, PictureInPicture2Icon, SettingsIcon, SquareIcon, XIcon } from "lucide-react";
+import { CalculatorIcon, CheckIcon, ChevronRightIcon, CircleAlertIcon, CoinsIcon, GemIcon, HouseIcon, ImagesIcon, MinusIcon, PictureInPicture2Icon, SettingsIcon, SquareIcon, XIcon } from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { signal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { getCreatorIcon, ModelCreator } from "@storyteller/model-list";
 import { useCreditsState, type CreditsIconStatus } from "@storyteller/credits";
 import { gtagEvent } from "@storyteller/google-analytics";
 import { ProviderBillingModal } from "@storyteller/provider-billing-modal";
@@ -42,7 +41,7 @@ import {
 } from "@storyteller/ui-generation-list";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { Tooltip } from "@storyteller/ui-tooltip";
-import { useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { APP_DESCRIPTORS, goToApp } from "~/config/appMenu";
 import {
   applyMakeVideoFromImage,
@@ -167,10 +166,10 @@ const CreditsCoinWithStatus = ({
       }
     >
       <span className="relative inline-flex">
-        <CoinsIcon  className="text-primary" />
+        <CoinsIcon className="text-[11px] text-primary" />
         {showBadge && (
           <span
-            className={`absolute -right-1.5 -top-1.5 flex h-3 w-3 items-center justify-center rounded-full ring-1 ring-ui-background ${badgeColorClass}`}
+            className={`absolute -right-1.5 -top-1.5 flex h-3 w-3 items-center justify-center ring-1 ring-ui-panel ${badgeColorClass}`}
           >
             <DynamicIcon icon={badgeIconDef} className="text-[7px]" />
           </span>
@@ -347,40 +346,50 @@ export const TopBar = ({ pageName }: Props) => {
     }
   };
 
-  const getPageTitle = (): string => {
+  const getPageCrumbs = (): string[] => {
     switch (tabStore.activeTabId) {
       case "2D":
-        return "Canvas";
+        return ["Studio", "Canvas"];
       case "3D":
-        return "3D Editor";
+        return ["Studio", "3D Editor"];
       case "IMAGE":
-        return "Create Image";
+        return ["Create", "Image"];
       case "VIDEO":
-        return "Create Video";
+        return ["Create", "Video"];
       case "AUDIO":
-        return "Create Audio";
+        return ["Create", "Audio"];
       case "EDIT":
-        return "Edit Image";
+        return ["Studio", "Edit Image"];
       case "VIDEO_FRAME_EXTRACTOR":
-        return "Video Frame Extractor";
+        return ["Studio", "Frame Extractor"];
       case "VIDEO_WATERMARK_REMOVAL":
-        return "Video Watermark Remover";
+        return ["Studio", "Video Watermark Remover"];
       case "IMAGE_WATERMARK_REMOVAL":
-        return "Image Watermark Remover";
+        return ["Studio", "Image Watermark Remover"];
       case "IMAGE_TO_3D_OBJECT":
-        return "Image to 3D Object";
+        return ["Create", "3D Object"];
       case "IMAGE_TO_3D_WORLD":
-        return "Image to 3D World";
-      case "APPS":
-        return "ArtCraft";
+        return ["Create", "3D World"];
+      case "REMOVE_BACKGROUND":
+        return ["Studio", "Remove Background"];
+      case "ANGLES":
+        return ["Create", "Angles"];
+      case "STORYBOARD":
+        return ["Create", "Storyboard"];
       case "BACKGROUND_CHANGE":
-        return "Background Change";
+        return ["Studio", "Background Change"];
+      case "VIDEO_EDITOR":
+        return ["Studio", "Edit Video"];
+      case "MOODBOARD":
+        return ["Studio", "Moodboard"];
+      case "APPS":
+        return ["Home"];
       default:
-        return "Artcraft";
+        return ["ArtCraft"];
     }
   };
 
-  const pageTitle = getPageTitle();
+  const pageCrumbs = getPageCrumbs();
 
   const { toggleModal: toggleSubscriptionModal } = usePricingModalStore();
   const { toggleModal: toggleCreditsModal } = useCreditsModalStore();
@@ -418,7 +427,7 @@ export const TopBar = ({ pageName }: Props) => {
   return (
     <>
       <header
-        className="fixed left-0 top-0 z-[60] w-full border-b border-ui-panel-border bg-ui-background"
+        className="fixed left-0 top-0 z-[60] w-full border-b border-ui-border bg-ui-panel"
         data-tauri-drag-region
       >
         <nav
@@ -479,27 +488,47 @@ export const TopBar = ({ pageName }: Props) => {
           </div>
 
           <div
-            className={`${tabStore.activeTabId === "3D" ? "no-drag" : ""} flex items-center justify-center gap-2 font-medium`}
+            className={`${tabStore.activeTabId === "3D" ? "no-drag" : ""} flex min-w-0 items-center justify-center gap-2 font-medium`}
             data-tauri-drag-region
           >
             {tabStore.activeTabId === "3D" ? (
               <SceneTitleInput pageName={pageName} />
             ) : (
               <h1
-                className="flex items-center gap-2.5 text-base-fg"
+                className="hud-label flex min-w-0 items-center gap-1.5 text-base-fg/70"
                 data-tauri-drag-region
               >
-                {getCreatorIcon(
-                  ModelCreator.ArtCraft,
-                  "h-5 w-5 icon-auto-contrast opacity-50",
-                )}
-                {pageTitle}
+                {pageCrumbs.map((crumb, i) => {
+                  const isLast = i === pageCrumbs.length - 1;
+                  return (
+                    <Fragment key={`${crumb}-${i}`}>
+                      {i > 0 && (
+                        <ChevronRightIcon
+                          aria-hidden="true"
+                          className="h-3 w-3 shrink-0 text-base-fg/50"
+                          data-tauri-drag-region
+                        />
+                      )}
+                      <span
+                        className={
+                          isLast
+                            ? "truncate bg-ui-ink px-1.5 py-1 text-ui-panel"
+                            : "truncate"
+                        }
+                        aria-current={isLast ? "page" : undefined}
+                        data-tauri-drag-region
+                      >
+                        {crumb}
+                      </span>
+                    </Fragment>
+                  );
+                })}
               </h1>
             )}
           </div>
 
           <div className="flex justify-end gap-2" data-tauri-drag-region>
-            <div className="no-drag flex items-center gap-1.5">
+            <div className="no-drag flex items-center gap-1.5 sm:gap-2">
               {(tabStore.activeTabId === "IMAGE" ||
                 tabStore.activeTabId === "VIDEO") && <GallerySelectToggle />}
               {tabStore.activeTabId === "VIDEO" && <GalleryAutoplayToggle />}
@@ -508,26 +537,26 @@ export const TopBar = ({ pageName }: Props) => {
                 tabStore.activeTabId === "AUDIO") && <GalleryViewToggle />}
               <PopoverMenu
                 position="bottom"
-                align="center"
+                align="end"
                 triggerIcon={
                   <CreditsCoinWithStatus iconStatus={creditsIconStatus} />
                 }
                 triggerLabel={
                   <span className="whitespace-nowrap text-sm font-medium">
-                    {sumTotalCredits} Credits
+                    {sumTotalCredits.toLocaleString()}
                   </span>
                 }
-                buttonClassName="h-[30px] px-2 ps-1.5 bg-transparent hover:bg-ui-controls/30 border-0 shadow-none"
-                panelClassName="mt-3 bg-ui-panel border border-ui-panel-border text-base-fg"
+                buttonClassName="h-8 px-3 ps-2.5 bg-transparent hover:bg-white/10 border border-white/15 hover:border-white/30 shadow-none text-white/80 rounded-[3px] gap-1.5"
+                panelClassName="mt-2 bg-[#101014] border border-white/15 text-white rounded-[3px]"
               >
                 {(close) => (
-                  <div className="w-72 p-2.5 text-base-fg">
+                  <div className="w-72 p-3 text-white">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="flex items-center gap-1.5 text-sm font-medium text-base-fg/80">
+                      <span className="text-sm font-medium text-white/70">
                         Your credit balance
                       </span>
                       <button
-                        className="text-sm font-medium text-primary-400 transition-all hover:text-primary-300"
+                        className="text-sm font-medium text-primary transition-colors hover:text-primary-300"
                         onClick={() => {
                           close();
                           toggleCreditsModal();
@@ -536,15 +565,13 @@ export const TopBar = ({ pageName }: Props) => {
                         Buy credits
                       </button>
                     </div>
-                    <div className="flex items-center gap-2 text-4xl font-bold text-base-fg">
-                      <CoinsIcon
-                        
-                        className="text-2xl text-primary" />
-                      {sumTotalCredits}
+                    <div className="flex items-center gap-2 text-3xl font-semibold tracking-tight text-white">
+                      <CoinsIcon className="text-xl text-primary" />
+                      {sumTotalCredits.toLocaleString()}
                     </div>
 
                     <button
-                      className="mt-2 flex items-center gap-1.5 text-xs text-base-fg/50 transition-colors hover:text-primary"
+                      className="mt-2 flex items-center gap-1.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/50 transition-colors hover:text-white"
                       onClick={() => {
                         close();
                         useCostBreakdownModalStore.getState().openModal();
@@ -556,7 +583,7 @@ export const TopBar = ({ pageName }: Props) => {
 
                     <div className="mt-3 flex gap-2">
                       <Button
-                        variant="action"
+                        variant="secondary"
                         className="h-9 grow"
                         onClick={() => {
                           close();
@@ -586,21 +613,35 @@ export const TopBar = ({ pageName }: Props) => {
                   variant="primary"
                   icon={GemIcon}
                   onClick={toggleSubscriptionModal}
-                  className="transition-all duration-300"
+                  className="h-8 px-3"
                 >
                   Upgrade
                 </Button>
               )}
 
-              <UploadImagesButton className="h-[34px] w-[34px]" />
+              <TaskQueue />
+
+              <button
+                type="button"
+                onClick={handleOpenGalleryModal}
+                aria-label="My Library"
+                className="flex h-8 items-center gap-1.5 rounded-[3px] border border-white/15 px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/80 transition-colors hover:border-white/30 hover:bg-white/10"
+              >
+                <ImagesIcon className="text-[11px]" />
+                <span className="hidden whitespace-nowrap xl:block">
+                  My Library
+                </span>
+              </button>
+
+              <UploadImagesButton />
 
               <Tooltip content="Settings" position="bottom" delay={300}>
                 <Button
                   aria-label="Settings"
                   variant="secondary"
                   icon={SettingsIcon}
-                  iconClassName="h-5 w-5 shrink-0"
-                  className="h-[34px] w-[34px] p-0"
+                  iconClassName="h-4 w-4 shrink-0"
+                  className="h-8 w-8 border-white/15 bg-transparent p-0 text-white/80 hover:border-white/30 hover:bg-white/10"
                   onClick={() => {
                     setSettingsSection("general");
                     setIsSettingsModalOpen(true);
@@ -608,19 +649,6 @@ export const TopBar = ({ pageName }: Props) => {
                   }}
                 />
               </Tooltip>
-
-              <Button
-                variant="secondary"
-                icon={ImagesIcon}
-                onClick={handleOpenGalleryModal}
-              >
-                <span className="hidden whitespace-nowrap text-base-fg xl:block">
-                  My Library
-                </span>
-              </Button>
-
-              {/* <Activity /> */}
-              <TaskQueue />
             </div>
 
             <div className="no-drag">
@@ -631,14 +659,14 @@ export const TopBar = ({ pageName }: Props) => {
               <div className="no-drag flex items-center">
                 <Button
                   variant="secondary"
-                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent text-base-fg opacity-70 shadow-none hover:bg-ui-controls/20 hover:opacity-100"
+                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent p-0 text-base-fg opacity-70 shadow-none hover:bg-white/10 hover:opacity-100"
                   onClick={minimize}
                 >
-                  <MinusIcon  className="text-xs" />
+                  <MinusIcon className="text-xs" />
                 </Button>
                 <Button
                   variant="secondary"
-                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent text-base-fg opacity-70 shadow-none hover:bg-ui-controls/20 hover:opacity-100"
+                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent p-0 text-base-fg opacity-70 shadow-none hover:bg-white/10 hover:opacity-100"
                   onClick={toggleMaximize}
                 >
                   <DynamicIcon
@@ -648,10 +676,10 @@ export const TopBar = ({ pageName }: Props) => {
                 </Button>
                 <Button
                   variant="secondary"
-                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent text-base-fg opacity-70 shadow-none hover:bg-red/10 hover:text-red"
+                  className="h-[32px] w-[44px] rounded-none border-0 bg-transparent p-0 text-base-fg opacity-70 shadow-none hover:bg-red hover:text-white hover:opacity-100"
                   onClick={close}
                 >
-                  <XIcon  className="text-lg" />
+                  <XIcon className="text-lg" />
                 </Button>
               </div>
             )}
diff --git a/frontend/apps/artcraft/app/src/components/signaled/TopBar/UploadImagesButton.tsx b/frontend/apps/artcraft/app/src/components/signaled/TopBar/UploadImagesButton.tsx
index 733b2d92f0..7374dc0451 100644
--- a/frontend/apps/artcraft/app/src/components/signaled/TopBar/UploadImagesButton.tsx
+++ b/frontend/apps/artcraft/app/src/components/signaled/TopBar/UploadImagesButton.tsx
@@ -18,8 +18,11 @@ export const UploadImagesButton = ({ className }: Props) => {
         <Button
           variant="secondary"
           icon={UploadIcon}
-          iconClassName="h-5 w-5 shrink-0"
-          className={twMerge("h-[38px] w-[38px] p-0", className)}
+          iconClassName="h-4 w-4 shrink-0"
+          className={twMerge(
+            "h-8 w-8 rounded-[3px] border border-white/15 bg-transparent p-0 text-white/80 shadow-none hover:border-white/30 hover:bg-white/10",
+            className,
+          )}
           onClick={() => setIsOpen(true)}
         />
       </Tooltip>
diff --git a/frontend/apps/artcraft/app/src/config/appMenu.tsx b/frontend/apps/artcraft/app/src/config/appMenu.tsx
index 0f18a6a1b1..5fae79778a 100644
--- a/frontend/apps/artcraft/app/src/config/appMenu.tsx
+++ b/frontend/apps/artcraft/app/src/config/appMenu.tsx
@@ -83,98 +83,116 @@ export interface FullAppItem {
 }
 
 // Per-app card palette for the Apps page (webapp-home-style cards). Derived
-// from each app's Tailwind color family so the icon box, its border, and the
-// hover gradient all share a hue. Keyed by app id; falls back to a neutral
-// slate when an id is missing.
+// from each app's Tailwind color family so the icon tile, its border, and the
+// hover state all share a hue. Keyed by app id; falls back to a neutral tone
+// when an id is missing.
 interface AppCardPalette {
-  /** Hover gradient overlay, e.g. "from-blue-500/20 to-blue-500/0". */
+  /** Hover tint for the card, e.g. "from-blue-500/20 to-blue-500/0". Legacy. */
   accent: string;
-  /** Icon box background + border, e.g. "bg-blue-500/20 border-blue-400/30". */
+  /** Icon tile background + border, e.g. "bg-blue-500/20 border-blue-400/40". */
   iconBg: string;
   /** Icon glyph color, e.g. "text-blue-300". */
   iconColor: string;
+  /** Card hover border + background, e.g. "hover:border-blue-400/60 hover:bg-blue-500/10". */
+  hoverStyle: string;
 }
 
 const APP_CARD_PALETTES: Record<string, AppCardPalette> = {
   "text-to-image": {
     accent: "from-blue-500/20 to-blue-500/0",
-    iconBg: "bg-blue-500/20 border-blue-400/30",
+    iconBg: "bg-blue-500/20 border-blue-400/40",
     iconColor: "text-blue-300",
+    hoverStyle: "hover:border-blue-400/60 hover:bg-blue-500/10",
   },
   "image-to-video": {
     accent: "from-amber-500/20 to-amber-500/0",
-    iconBg: "bg-amber-500/20 border-amber-400/30",
+    iconBg: "bg-amber-500/20 border-amber-400/40",
     iconColor: "text-amber-300",
+    hoverStyle: "hover:border-amber-400/60 hover:bg-amber-500/10",
   },
   "create-audio": {
     accent: "from-pink-500/20 to-pink-500/0",
-    iconBg: "bg-pink-500/20 border-pink-400/30",
+    iconBg: "bg-pink-500/20 border-pink-400/40",
     iconColor: "text-pink-300",
+    hoverStyle: "hover:border-pink-400/60 hover:bg-pink-500/10",
   },
   "image-to-3d-object": {
     accent: "from-emerald-500/20 to-emerald-500/0",
-    iconBg: "bg-emerald-500/20 border-emerald-400/30",
+    iconBg: "bg-emerald-500/20 border-emerald-400/40",
     iconColor: "text-emerald-300",
+    hoverStyle: "hover:border-emerald-400/60 hover:bg-emerald-500/10",
   },
   "image-to-3d-world": {
     accent: "from-sky-500/20 to-sky-500/0",
-    iconBg: "bg-sky-500/20 border-sky-400/30",
+    iconBg: "bg-sky-500/20 border-sky-400/40",
     iconColor: "text-sky-300",
+    hoverStyle: "hover:border-sky-400/60 hover:bg-sky-500/10",
   },
   angles: {
     accent: "from-lime-500/20 to-lime-500/0",
-    iconBg: "bg-lime-500/20 border-lime-400/30",
+    iconBg: "bg-lime-500/20 border-lime-400/40",
     iconColor: "text-lime-300",
+    hoverStyle: "hover:border-lime-400/60 hover:bg-lime-500/10",
   },
   storyboard: {
     accent: "from-fuchsia-500/20 to-fuchsia-500/0",
-    iconBg: "bg-fuchsia-500/20 border-fuchsia-400/30",
+    iconBg: "bg-fuchsia-500/20 border-fuchsia-400/40",
     iconColor: "text-fuchsia-300",
+    hoverStyle: "hover:border-fuchsia-400/60 hover:bg-fuchsia-500/10",
   },
   "2d-canvas": {
     accent: "from-sky-500/20 to-sky-500/0",
-    iconBg: "bg-sky-500/20 border-sky-400/30",
+    iconBg: "bg-sky-500/20 border-sky-400/40",
     iconColor: "text-sky-300",
+    hoverStyle: "hover:border-sky-400/60 hover:bg-sky-500/10",
   },
   "3d-editor": {
     accent: "from-emerald-500/20 to-emerald-500/0",
-    iconBg: "bg-emerald-500/20 border-emerald-400/30",
+    iconBg: "bg-emerald-500/20 border-emerald-400/40",
     iconColor: "text-emerald-300",
+    hoverStyle: "hover:border-emerald-400/60 hover:bg-emerald-500/10",
   },
   "edit-image": {
     accent: "from-purple-500/20 to-purple-500/0",
-    iconBg: "bg-purple-500/20 border-purple-400/30",
+    iconBg: "bg-purple-500/20 border-purple-400/40",
     iconColor: "text-purple-300",
+    hoverStyle: "hover:border-purple-400/60 hover:bg-purple-500/10",
   },
   "remove-background": {
     accent: "from-violet-500/20 to-violet-500/0",
-    iconBg: "bg-violet-500/20 border-violet-400/30",
+    iconBg: "bg-violet-500/20 border-violet-400/40",
     iconColor: "text-violet-300",
+    hoverStyle: "hover:border-violet-400/60 hover:bg-violet-500/10",
   },
   "video-frame-extractor": {
     accent: "from-rose-500/20 to-rose-500/0",
-    iconBg: "bg-rose-500/20 border-rose-400/30",
+    iconBg: "bg-rose-500/20 border-rose-400/40",
     iconColor: "text-rose-300",
+    hoverStyle: "hover:border-rose-400/60 hover:bg-rose-500/10",
   },
   "background-change": {
     accent: "from-orange-500/20 to-orange-500/0",
-    iconBg: "bg-orange-500/20 border-orange-400/30",
+    iconBg: "bg-orange-500/20 border-orange-400/40",
     iconColor: "text-orange-300",
+    hoverStyle: "hover:border-orange-400/60 hover:bg-orange-500/10",
   },
   "video-editor": {
     accent: "from-teal-500/20 to-teal-500/0",
-    iconBg: "bg-teal-500/20 border-teal-400/30",
+    iconBg: "bg-teal-500/20 border-teal-400/40",
     iconColor: "text-teal-300",
+    hoverStyle: "hover:border-teal-400/60 hover:bg-teal-500/10",
   },
   "video-watermark-removal": {
     accent: "from-cyan-500/20 to-cyan-500/0",
-    iconBg: "bg-cyan-500/20 border-cyan-400/30",
+    iconBg: "bg-cyan-500/20 border-cyan-400/40",
     iconColor: "text-cyan-300",
+    hoverStyle: "hover:border-cyan-400/60 hover:bg-cyan-500/10",
   },
   "image-watermark-removal": {
     accent: "from-indigo-500/20 to-indigo-500/0",
-    iconBg: "bg-indigo-500/20 border-indigo-400/30",
+    iconBg: "bg-indigo-500/20 border-indigo-400/40",
     iconColor: "text-indigo-300",
+    hoverStyle: "hover:border-indigo-400/60 hover:bg-indigo-500/10",
   },
 };
 
@@ -182,6 +200,7 @@ const FALLBACK_APP_CARD_PALETTE: AppCardPalette = {
   accent: "from-white/10 to-white/0",
   iconBg: "bg-ui-controls border-ui-controls-border",
   iconColor: "text-base-fg",
+  hoverStyle: "hover:border-white/30 hover:bg-white/10",
 };
 
 export const getAppCardPalette = (id: string): AppCardPalette =>
@@ -387,13 +406,13 @@ export const useEditApps = (): FullAppItem[] => {
 export const getBadgeStyles = (badge?: string) => {
   switch (badge) {
     case "NEW":
-      return "bg-teal-600 text-white";
+      return "border-purple-400/40 text-purple-300";
     case "BEST":
-      return "bg-primary text-white";
+      return "border-primary/30 text-ui-accent-ink";
     case "SOON":
-      return "bg-gray-600 text-white";
+      return "border-white/20 text-base-fg/50";
     case "BETA":
-      return "bg-amber-500 text-white";
+      return "border-amber-400/40 text-amber-300";
     default:
       return "";
   }
diff --git a/frontend/apps/artcraft/app/src/pages/PageAngles/Angles.tsx b/frontend/apps/artcraft/app/src/pages/PageAngles/Angles.tsx
index 0e6ca4c749..c29f4615f3 100644
--- a/frontend/apps/artcraft/app/src/pages/PageAngles/Angles.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageAngles/Angles.tsx
@@ -482,7 +482,7 @@ export const Angles = () => {
           /* ──── Upload screen ──── */
           <div className="flex flex-1 items-center justify-center p-8 lg:p-16">
             <div className="w-full max-w-5xl">
-              <div className="relative aspect-video overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-panel shadow-lg">
+              <div className="relative aspect-video overflow-hidden border border-ui-panel-border bg-ui-panel">
                 <UploadEntryCard
                   icon={CrosshairIcon}
                   title="Angles"
@@ -498,7 +498,7 @@ export const Angles = () => {
                   disabled={isLoadingImage}
                 />
                 {isLoadingImage && (
-                  <div className="bg-ui-panel/80 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
+                  <div className="bg-ui-panel/80 absolute inset-0 flex items-center justify-center">
                     <LoadingSpinner className="h-12 w-12" />
                   </div>
                 )}
@@ -519,7 +519,7 @@ export const Angles = () => {
             {/* Full-bleed image display */}
             <div className="flex h-full w-full items-center justify-center px-16 pb-56 pt-16">
               <div
-                className="relative overflow-hidden rounded-xl shadow-lg"
+                className="relative overflow-hidden"
                 style={imageContainerStyle}
               >
                 {activeAngle ? (
@@ -584,12 +584,12 @@ export const Angles = () => {
 
             {/* ── Floating bottom angle controls ── */}
             <div className="absolute bottom-4 left-1/2 z-10 w-[calc(100%-32px)] max-w-[860px] -translate-x-1/2">
-              <div className="glass flex items-center gap-4 rounded-xl px-4 lg:gap-5 lg:px-5">
+              <div className="glass flex items-center gap-4 rounded-none px-4 lg:gap-5 lg:px-5">
                 {/* Orbit sphere */}
                 <div className="relative shrink-0 px-5 py-5">
                   <button
                     onClick={() => handleTiltStep(1)}
-                    className="absolute left-1/2 top-0 z-10 -translate-x-1/2 p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
+                    className="absolute left-1/2 top-0 z-10 -translate-x-1/2 rounded-[3px] p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
                   >
                     <ChevronUpIcon
                       
@@ -597,7 +597,7 @@ export const Angles = () => {
                   </button>
                   <button
                     onClick={() => handleTiltStep(-1)}
-                    className="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
+                    className="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 rounded-[3px] p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
                   >
                     <ChevronDownIcon
                       
@@ -605,7 +605,7 @@ export const Angles = () => {
                   </button>
                   <button
                     onClick={() => handleRotationStep(-1)}
-                    className="absolute left-0 top-1/2 z-10 -translate-y-1/2 p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
+                    className="absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-[3px] p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
                   >
                     <ChevronLeftIcon
                       
@@ -613,7 +613,7 @@ export const Angles = () => {
                   </button>
                   <button
                     onClick={() => handleRotationStep(1)}
-                    className="absolute right-0 top-1/2 z-10 -translate-y-1/2 p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
+                    className="absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-[3px] p-1 text-base-fg/40 transition-colors hover:text-base-fg/80"
                   >
                     <ChevronRightIcon
                       
@@ -633,7 +633,7 @@ export const Angles = () => {
                 {/* Sliders group */}
                 <div className="flex min-w-0 flex-1 flex-col gap-2">
                   <div className="flex items-center gap-3">
-                    <span className="w-14 shrink-0 text-xs font-medium text-base-fg">
+                    <span className="w-16 shrink-0 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       Rotation
                     </span>
                     <div className="min-w-0 flex-1">
@@ -646,13 +646,13 @@ export const Angles = () => {
                         suffix="°"
                       />
                     </div>
-                    <span className="w-10 shrink-0 text-left text-xs tabular-nums text-base-fg/70">
+                    <span className="w-10 shrink-0 text-left font-mono text-xs tabular-nums text-base-fg/70">
                       {rotationToDisplay(angleConfig.rotation)}°
                     </span>
                   </div>
 
                   <div className="flex items-center gap-3">
-                    <span className="w-14 shrink-0 text-xs font-medium text-base-fg">
+                    <span className="w-16 shrink-0 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       Tilt
                     </span>
                     <div className="min-w-0 flex-1">
@@ -665,13 +665,13 @@ export const Angles = () => {
                         suffix="°"
                       />
                     </div>
-                    <span className="w-9 shrink-0 text-left text-xs tabular-nums text-base-fg/70">
+                    <span className="w-9 shrink-0 text-left font-mono text-xs tabular-nums text-base-fg/70">
                       {angleConfig.tilt}°
                     </span>
                   </div>
 
                   <div className="flex items-center gap-3">
-                    <span className="w-14 shrink-0 text-xs font-medium text-base-fg">
+                    <span className="w-16 shrink-0 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       Zoom
                     </span>
                     <div className="min-w-0 flex-1">
@@ -683,7 +683,7 @@ export const Angles = () => {
                         onChange={handleZoomSlider}
                       />
                     </div>
-                    <span className="w-9 shrink-0 text-left text-xs tabular-nums text-base-fg/70">
+                    <span className="w-9 shrink-0 text-left font-mono text-xs tabular-nums text-base-fg/70">
                       {angleConfig.zoom}
                     </span>
                   </div>
diff --git a/frontend/apps/artcraft/app/src/pages/PageApps/AppsIndexPage.tsx b/frontend/apps/artcraft/app/src/pages/PageApps/AppsIndexPage.tsx
index 19702043c7..afd5daffd2 100644
--- a/frontend/apps/artcraft/app/src/pages/PageApps/AppsIndexPage.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageApps/AppsIndexPage.tsx
@@ -23,28 +23,35 @@ export const AppsIndexPage = () => {
     // flush against the right edge; horizontal padding lives on the inner
     // wrapper instead.
     <div className="fixed inset-0 overflow-y-auto bg-ui-background pt-[56px] text-base-fg">
-      <main className="mx-auto max-w-6xl px-6 pb-20 pt-12 sm:pt-20">
-        <h1 className="mx-auto text-center text-4xl font-semibold tracking-tight sm:text-6xl">
-          What will you <span className="text-primary">craft</span> today?
+      <main className="mx-auto w-full max-w-6xl px-5 pb-20 pt-8 sm:px-8 sm:pt-12">
+        <p className="hud-label mb-4 text-ui-accent-ink">
+          Your creative workspace
+        </p>
+        <h1 className="max-w-3xl font-display text-3xl leading-tight tracking-tight sm:text-5xl">
+          What will you <span className="text-ui-accent-ink">craft</span> today?
         </h1>
-        <p className="mx-auto mt-3 max-w-xl text-center text-lg text-base-fg/55">
-          Every tool in your toolbox - pick one and start creating.
+        <p className="mt-4 max-w-xl text-sm leading-relaxed text-base-fg/70 sm:text-base">
+          Start with an idea. Choose a tool to bring it to life.
         </p>
 
-        <div className="mt-12 space-y-10">
-          {categories.map((category) => (
-            <section key={category.title}>
-              <h2 className="mb-4 text-sm font-semibold text-base-fg/85">
-                {category.title}
-              </h2>
-              <div className="grid auto-rows-min gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                {category.apps.map((app) => (
-                  <AppCard key={app.id} app={app} />
-                ))}
-              </div>
-            </section>
-          ))}
-        </div>
+        {categories.map((category, index) => (
+          <section
+            key={category.title}
+            className={twMerge(
+              "border-t border-ui-border pt-6",
+              index === 0 ? "mt-8 sm:mt-10" : "mt-10",
+            )}
+          >
+            <h2 className="hud-label mb-4 text-base-fg/70">
+              {category.title}
+            </h2>
+            <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {category.apps.map((app) => (
+                <AppCard key={app.id} app={app} />
+              ))}
+            </div>
+          </section>
+        ))}
       </main>
     </div>
   );
@@ -59,27 +66,14 @@ function AppCard({ app }: { app: FullAppItem }) {
       onClick={() => goToApp(app.action)}
       disabled={!enabled}
       className={twMerge(
-        "group relative block overflow-hidden rounded-2xl bg-ui-controls/50 p-5 text-left transition-colors",
-        enabled
-          ? "cursor-pointer hover:bg-ui-controls"
-          : "cursor-default opacity-60",
+        "group relative flex h-full rounded-[3px] border border-ui-border bg-white/5 p-5 text-left transition-colors duration-150 focus-visible:border-primary",
+        enabled ? twMerge("cursor-pointer", palette.hoverStyle) : "cursor-default opacity-60",
       )}
     >
-      {/* Hover accent — gradient wash matching the app's hue. */}
-      {enabled && (
-        <div
-          aria-hidden
-          className={twMerge(
-            "pointer-events-none absolute -inset-px rounded-2xl bg-gradient-to-br opacity-0 transition-opacity group-hover:opacity-100",
-            palette.accent,
-          )}
-        />
-      )}
-
-      <div className="relative flex items-start gap-4">
+      <div className="relative flex w-full items-start gap-4">
         <div
           className={twMerge(
-            "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border",
+            "flex h-10 w-10 shrink-0 items-center justify-center border",
             palette.iconBg,
             palette.iconColor,
           )}
@@ -88,14 +82,14 @@ function AppCard({ app }: { app: FullAppItem }) {
         </div>
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-2">
-            <div className="flex min-w-0 items-center gap-2">
-              <h3 className="truncate text-base font-semibold text-base-fg">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h3 className="text-base font-bold uppercase tracking-tight text-ui-ink">
                 {app.label}
               </h3>
               {app.badge && (
                 <span
                   className={twMerge(
-                    "shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none tracking-wider",
+                    "shrink-0 border px-1.5 py-1 font-mono text-[9px] font-medium leading-none tracking-wider",
                     getBadgeStyles(app.badge),
                   )}
                 >
@@ -104,12 +98,12 @@ function AppCard({ app }: { app: FullAppItem }) {
               )}
             </div>
             {enabled && (
-              <ArrowRightIcon
-                
-                className="text-sm text-base-fg/40 transition-all group-hover:translate-x-0.5 group-hover:text-base-fg/70" />
+              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[3px] border border-white/15 text-white/40 transition-colors duration-150 group-hover:border-white/40 group-hover:text-white">
+                <ArrowRightIcon className="text-xs" />
+              </span>
             )}
           </div>
-          <p className="mt-1 text-sm leading-snug text-base-fg/55">
+          <p className="mt-2 text-sm leading-relaxed text-base-fg/70">
             {app.description}
           </p>
         </div>
diff --git a/frontend/apps/artcraft/app/src/pages/PageAudio/CreateAudio.tsx b/frontend/apps/artcraft/app/src/pages/PageAudio/CreateAudio.tsx
index b670c138a6..3987fa90f1 100644
--- a/frontend/apps/artcraft/app/src/pages/PageAudio/CreateAudio.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageAudio/CreateAudio.tsx
@@ -8,7 +8,6 @@ import {
   FilterMediaClasses,
 } from "@storyteller/api";
 import { useOmniGenAudioModels, useAudioCostEstimate } from "@storyteller/omni-gen";
-import BackgroundGallery from "../PageImage/BackgroundGallery";
 import {
   galleryModalLightboxImage,
   galleryModalLightboxMediaId,
@@ -149,7 +148,6 @@ const CreateAudio = () => {
       hasContent={hasContent}
       emptyStateTitle="Create Audio"
       emptyStateSubtitle="Describe a song, a sound, or a sample"
-      background={<BackgroundGallery />}
       bottomOffset={promptHeight + 40}
       listContent={
         <DesktopGenerationGallery
diff --git a/frontend/apps/artcraft/app/src/pages/PageBackgroundChange/PageBackgroundChange.tsx b/frontend/apps/artcraft/app/src/pages/PageBackgroundChange/PageBackgroundChange.tsx
index bab2dc284a..a73da5d48a 100644
--- a/frontend/apps/artcraft/app/src/pages/PageBackgroundChange/PageBackgroundChange.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageBackgroundChange/PageBackgroundChange.tsx
@@ -1,11 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { SparklesIcon } from "lucide-react";
 import { toast } from "@storyteller/ui-toaster";
 import { UploadImageMedia, UploadVideoMedia } from "@storyteller/api";
 import {
   PromptBoxVFX,
   SubTabStrip,
-  TruchetPattern,
   VFXResultCard,
   VFXShowcaseView,
   newIdempotencyToken,
@@ -14,6 +12,7 @@ import {
   VFX_NOT_AVAILABLE_ERROR,
   VFX_SHOWCASE,
 } from "@storyteller/ui-vfx";
+import { CreateEmptyState } from "~/components/generation-feed/CreateEmptyState";
 
 export const PageBackgroundChange = () => {
   const subTab = useVFXStore((s) => s.subTab);
@@ -113,34 +112,17 @@ export const PageBackgroundChange = () => {
           className="relative flex flex-1 items-center justify-center px-6"
           style={{ paddingBottom: Math.max(promptBoxHeight + 36, 240) }}
         >
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-0 z-0"
-            style={{
-              maskImage:
-                "radial-gradient(ellipse 60% 60% at 50% 45%, black 30%, transparent 85%)",
-              WebkitMaskImage:
-                "radial-gradient(ellipse 60% 60% at 50% 45%, black 30%, transparent 85%)",
-            }}
-          >
-            <TruchetPattern
-              intensity={0.8}
-              className="absolute inset-0 h-full w-full"
-            />
-          </div>
-          <div className="relative z-10">
-            <EmptyState
-              title="No background changes yet"
-              subtitle="Upload a source video and a reference image, then optionally add a prompt."
-            />
-          </div>
+          <CreateEmptyState
+            title="No background changes yet"
+            subtitle="Upload a source video and a reference image, then optionally add a prompt."
+          />
         </div>
       ) : (
         <div
           className="flex-1 overflow-y-auto"
           style={{ paddingBottom: Math.max(promptBoxHeight + 36, 240) }}
         >
-          <div className="flex flex-col gap-10 px-6 pt-6">
+          <div className="flex flex-col items-center gap-10 px-6 pt-6">
             {history.map((r) => (
               <VFXResultCard
                 key={r.id}
@@ -155,6 +137,7 @@ export const PageBackgroundChange = () => {
                   failureReason: r.failureReason,
                 }}
                 onDismiss={() => dismissResult(r.id)}
+                className="w-[min(960px,calc(100vw-32px))]"
               />
             ))}
           </div>
@@ -163,7 +146,7 @@ export const PageBackgroundChange = () => {
 
       <div
         aria-hidden
-        className="via-ui-background/85 pointer-events-none fixed bottom-0 left-0 right-0 z-20 h-72 bg-gradient-to-t from-ui-background to-transparent"
+        className="pointer-events-none fixed bottom-0 left-0 right-0 z-20 h-72 bg-gradient-to-t from-ui-background via-ui-background/85 to-transparent"
       />
 
       <div
@@ -184,19 +167,4 @@ export const PageBackgroundChange = () => {
   );
 };
 
-interface EmptyStateProps {
-  title: string;
-  subtitle: string;
-}
-
-const EmptyState = ({ title, subtitle }: EmptyStateProps) => (
-  <div className="flex max-w-md flex-col items-center gap-4 text-center">
-    <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-base-fg/5 ring-1 ring-base-fg/10">
-      <SparklesIcon  className="text-2xl" />
-    </div>
-    <h3 className="text-2xl font-bold text-base-fg">{title}</h3>
-    <p className="max-w-xs text-sm text-base-fg/60">{subtitle}</p>
-  </div>
-);
-
 export default PageBackgroundChange;
diff --git a/frontend/apps/artcraft/app/src/pages/PageImage/Background.css b/frontend/apps/artcraft/app/src/pages/PageImage/Background.css
deleted file mode 100644
index 4ad6b11e31..0000000000
--- a/frontend/apps/artcraft/app/src/pages/PageImage/Background.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.stretch-background-image {
-  background-image:
-    linear-gradient(
-      0deg,
-      rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha)),
-      rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha))
-    ),
-    url("/resources/images/digital-mountains.webp");
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  min-width: 100%;
-  min-height: 100%;
-  filter: grayscale(var(--st-photo-grayscale));
-}
diff --git a/frontend/apps/artcraft/app/src/pages/PageImage/BackgroundGallery.tsx b/frontend/apps/artcraft/app/src/pages/PageImage/BackgroundGallery.tsx
deleted file mode 100644
index e384936d98..0000000000
--- a/frontend/apps/artcraft/app/src/pages/PageImage/BackgroundGallery.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import "./Background.css";
-
-export default function GalleryBackground() {
-  return (
-    <>
-      <div className="pointer-events-none fixed inset-0 z-[1] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_49%,_rgb(var(--st-controls-rgb)_/_var(--st-gallery-vignette-alpha))_100%)]" />
-      <div className="fixed inset-0 z-0 overflow-hidden">
-        <div
-          className={`stretch-background-image h-full w-full opacity-30 transition-opacity duration-1000`}
-        >
-          <div className="absolute inset-0 grid grid-cols-5 gap-6 px-6 opacity-35" />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/frontend/apps/artcraft/app/src/pages/PageImage/TextToImage.tsx b/frontend/apps/artcraft/app/src/pages/PageImage/TextToImage.tsx
index 435c110f11..4f7203a074 100644
--- a/frontend/apps/artcraft/app/src/pages/PageImage/TextToImage.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageImage/TextToImage.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { JobContextType } from "@storyteller/common";
 import { PromptBoxImage } from "@storyteller/ui-promptbox";
 import { UploadImageMedia, FilterMediaClasses } from "@storyteller/api";
-import BackgroundGallery from "./BackgroundGallery";
 import {
   useTextToImagePageModelList,
   ModelPage,
@@ -158,7 +157,6 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
       hasContent={hasContent}
       emptyStateTitle="Create Image"
       emptyStateSubtitle="Add a prompt, then generate"
-      background={<BackgroundGallery />}
       bottomOffset={promptHeight + 40}
       listContent={
         <DesktopGenerationGallery
diff --git a/frontend/apps/artcraft/app/src/pages/PageImageTo3DObject/ImageTo3DObject.tsx b/frontend/apps/artcraft/app/src/pages/PageImageTo3DObject/ImageTo3DObject.tsx
index 357998ac6a..5071ef5ca2 100644
--- a/frontend/apps/artcraft/app/src/pages/PageImageTo3DObject/ImageTo3DObject.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageImageTo3DObject/ImageTo3DObject.tsx
@@ -6,7 +6,6 @@ export const ImageTo3DObject = () => {
       title="Generate 3D Object"
       subtitle="Transform your image into a 3D object with textures."
       variant="object"
-      backgroundImage="/resources/images/floating-cubes.webp"
     />
   );
 };
diff --git a/frontend/apps/artcraft/app/src/pages/PageImageTo3DWorld/ImageTo3DWorld.tsx b/frontend/apps/artcraft/app/src/pages/PageImageTo3DWorld/ImageTo3DWorld.tsx
index d25a37d7f5..b4f92ba37d 100644
--- a/frontend/apps/artcraft/app/src/pages/PageImageTo3DWorld/ImageTo3DWorld.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageImageTo3DWorld/ImageTo3DWorld.tsx
@@ -6,7 +6,6 @@ export const ImageTo3DWorld = () => {
       title="Image to 3D World"
       subtitle="Generate 3D worlds from an image with World Labs"
       variant="world"
-      backgroundImage="/resources/images/room-of-items.webp"
     />
   );
 };
diff --git a/frontend/apps/artcraft/app/src/pages/PageImageWatermarkRemover/ImageWatermarkRemover.tsx b/frontend/apps/artcraft/app/src/pages/PageImageWatermarkRemover/ImageWatermarkRemover.tsx
index d9e96fdfa0..0ff5e98f4d 100644
--- a/frontend/apps/artcraft/app/src/pages/PageImageWatermarkRemover/ImageWatermarkRemover.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageImageWatermarkRemover/ImageWatermarkRemover.tsx
@@ -104,7 +104,7 @@ export const ImageWatermarkRemover = () => {
 
   return (
     <>
-      <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-panel text-base-fg">
+      <div className="flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-background text-base-fg">
         <div className="flex-1 overflow-y-auto">
           <main
             className={
@@ -115,7 +115,7 @@ export const ImageWatermarkRemover = () => {
           >
             {!imageUrl ? (
               <div className="w-full max-w-5xl">
-                <div className="aspect-video overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="aspect-video overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <UploadEntryCard
                     icon={DropletIcon}
                     title="Remove Image Watermark"
@@ -133,7 +133,7 @@ export const ImageWatermarkRemover = () => {
               </div>
             ) : (
               <div className="flex w-full max-w-5xl flex-col gap-5">
-                <div className="w-full overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="w-full overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <div className="relative w-full bg-black">
                     <Button
                       icon={RotateCwIcon}
@@ -142,7 +142,7 @@ export const ImageWatermarkRemover = () => {
                         setImageUrl("");
                         setImageDimensions(null);
                       }}
-                      className="absolute right-3 top-3 z-10 border-2 border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
+                      className="absolute right-3 top-3 z-10 border border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
                     >
                       Switch Image
                     </Button>
@@ -151,7 +151,7 @@ export const ImageWatermarkRemover = () => {
                         ref={imageRef}
                         src={imageUrl}
                         alt="Selected pic"
-                        className="max-h-[70vh] max-w-full rounded-lg object-contain shadow-2xl"
+                        className="max-h-[70vh] max-w-full object-contain"
                         onLoad={(e) => {
                           const img = e.currentTarget;
                           setImageDimensions({
@@ -177,12 +177,12 @@ export const ImageWatermarkRemover = () => {
                   </Button>
                 </div>
 
-                <div className="rounded-2xl border border-ui-panel-border bg-ui-background p-6 shadow-lg">
+                <div className="border border-ui-panel-border bg-ui-panel p-6">
                   <div>
-                    <div className="mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-base-fg/60">
+                    <div className="mb-4 flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       <ImagesIcon
                         
-                        className="text-primary" />
+                        className="text-ui-accent-ink" />
                       Image Information
                     </div>
                     {imageDimensions ? (
@@ -191,7 +191,7 @@ export const ImageWatermarkRemover = () => {
                           <span className="font-medium text-base-fg/70">
                             Resolution
                           </span>
-                          <span className="font-mono text-lg font-bold text-base-fg">
+                          <span className="font-mono text-lg font-semibold tabular-nums text-base-fg">
                             {imageDimensions.width} × {imageDimensions.height}
                           </span>
                         </div>
@@ -199,7 +199,7 @@ export const ImageWatermarkRemover = () => {
                           <span className="font-medium text-base-fg/70">
                             Aspect Ratio
                           </span>
-                          <span className="font-mono text-lg font-bold text-base-fg">
+                          <span className="font-mono text-lg font-semibold tabular-nums text-base-fg">
                             {(
                               imageDimensions.width / imageDimensions.height
                             ).toFixed(2)}
diff --git a/frontend/apps/artcraft/app/src/pages/PageRemoveBackground/RemoveBackground.tsx b/frontend/apps/artcraft/app/src/pages/PageRemoveBackground/RemoveBackground.tsx
index f03a53829a..f469134557 100644
--- a/frontend/apps/artcraft/app/src/pages/PageRemoveBackground/RemoveBackground.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageRemoveBackground/RemoveBackground.tsx
@@ -543,12 +543,12 @@ export const RemoveBackground = () => {
 
   return (
     <>
-      <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-panel text-base-fg">
+      <div className="flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-panel text-base-fg">
         <div className="flex flex-1 items-center justify-center overflow-y-auto p-16">
           <main className="flex h-full w-full flex-col items-center justify-center">
             {showUploadScreen ? (
               <div className="w-full max-w-5xl">
-                <div className="relative aspect-video overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="relative aspect-video overflow-hidden border border-ui-panel-border bg-ui-background">
                   <UploadEntryCard
                     icon={WandSparklesIcon}
                     title="Remove Background"
@@ -564,7 +564,7 @@ export const RemoveBackground = () => {
                     disabled={isLoadingImage}
                   />
                   {isLoadingImage && (
-                    <div className="bg-ui-panel/80 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
+                    <div className="bg-ui-panel/80 absolute inset-0 flex items-center justify-center">
                       <LoadingSpinner className="h-12 w-12" />
                     </div>
                   )}
@@ -580,9 +580,9 @@ export const RemoveBackground = () => {
                       onMouseDown={handleCompareMouseDown}
                       disabled={!activeImage || isProcessing}
                       className={twMerge(
-                        "border-ui-controls-border select-none border-2 px-6 py-2.5 text-sm font-semibold transition-all",
+                        "border-ui-controls-border select-none border px-6 py-2.5 text-sm font-semibold transition-all",
                         isHoldingCompare
-                          ? "border-primary bg-primary/20"
+                          ? "border-white bg-white/10"
                           : "border-ui-controls-border",
                         (!activeImage || isProcessing) &&
                           "cursor-not-allowed opacity-50",
@@ -598,7 +598,7 @@ export const RemoveBackground = () => {
                       onClick={handleDownload}
                       disabled={!activeImage || isProcessing}
                       className={twMerge(
-                        "select-none border-2 border-primary px-6 py-2.5 text-sm font-semibold transition-all",
+                        "select-none px-6 py-2.5 text-sm font-semibold transition-all",
                         (!activeImage || isProcessing) &&
                           "cursor-not-allowed opacity-50",
                       )}
@@ -610,11 +610,11 @@ export const RemoveBackground = () => {
 
                 <div className="flex flex-1 items-center justify-center">
                   <div
-                    className="relative overflow-hidden rounded-2xl border border-ui-panel-border shadow-xl"
+                    className="relative overflow-hidden border border-ui-panel-border"
                     style={imageContainerStyle}
                   >
                     {isProcessing && (
-                      <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/60 backdrop-blur-sm">
+                      <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/70">
                         {currentOriginalUrl && (
                           <img
                             src={currentOriginalUrl}
@@ -624,12 +624,12 @@ export const RemoveBackground = () => {
                         )}
                         <div className="relative z-10 flex flex-col items-center gap-4">
                           <div className="relative">
-                            <div className="h-16 w-16 animate-spin rounded-full border-4 border-primary-500/30 border-t-primary-500" />
+                            <div className="h-16 w-16 animate-spin rounded-full border-2 border-white/20 border-t-white" />
                             <WandSparklesIcon
                               
-                              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl text-primary-400" />
+                              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl text-white" />
                           </div>
-                          <span className="text-lg font-semibold text-white">
+                          <span className="font-mono text-sm font-semibold uppercase tracking-[0.12em] text-white">
                             Removing Background...
                           </span>
                         </div>
@@ -679,7 +679,7 @@ export const RemoveBackground = () => {
 
                         <div
                           ref={progressBarRef}
-                          className="absolute bottom-0 top-0 w-1 bg-primary-500 shadow-lg shadow-primary-500/50"
+                          className="absolute bottom-0 top-0 w-1 bg-white"
                           style={{
                             left: `${revealProgressRef.current}%`,
                             transform: "translateX(-50%)",
@@ -695,7 +695,7 @@ export const RemoveBackground = () => {
                   </div>
                 </div>
 
-                <div className="mt-auto flex shrink-0 items-center gap-3 rounded-xl border border-ui-panel-border bg-ui-background p-2">
+                <div className="mt-auto flex shrink-0 items-center gap-3 border border-ui-panel-border bg-ui-background p-2">
                   <input
                     type="file"
                     ref={fileInputRef}
@@ -711,7 +711,7 @@ export const RemoveBackground = () => {
                     position="top"
                     showIconsInList
                     buttonClassName={twMerge(
-                      "h-14 w-14 border-2 border-dashed border-ui-panel-border bg-ui-controls/50",
+                      "h-14 w-14 rounded-[3px] border border-dashed border-white/20 bg-white/[0.015] hover:border-white/40 hover:bg-white/5",
                       isProcessing && "cursor-not-allowed opacity-50",
                     )}
                     triggerIcon={
@@ -724,10 +724,10 @@ export const RemoveBackground = () => {
                       key={img.id}
                       onClick={() => handleThumbnailClick(img)}
                       className={twMerge(
-                        "relative h-14 w-14 overflow-hidden rounded-lg border-2 transition-all",
+                        "relative h-14 w-14 overflow-hidden rounded-[3px] border transition-all",
                         img.id === activeImageId
-                          ? "border-primary ring-2 ring-primary/30"
-                          : "border-transparent hover:border-primary/50",
+                          ? "border-white"
+                          : "border-white/15 hover:border-white/30",
                       )}
                     >
                       <img
diff --git a/frontend/apps/artcraft/app/src/pages/PageStoryboard/Storyboard.tsx b/frontend/apps/artcraft/app/src/pages/PageStoryboard/Storyboard.tsx
index a0455fc81f..ad63d84fe6 100644
--- a/frontend/apps/artcraft/app/src/pages/PageStoryboard/Storyboard.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageStoryboard/Storyboard.tsx
@@ -40,11 +40,11 @@ const formatTime = (s: number): string => {
 const EmptyState = ({ onAdd }: { onAdd: () => void }) => (
   <div className="flex h-[calc(100vh-56px)] w-full items-center justify-center bg-ui-background">
     <div className="flex flex-col items-center gap-4 text-center">
-      <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-white/5">
+      <div className="flex h-20 w-20 items-center justify-center border border-white/15 bg-white/[0.015]">
         <ImagesIcon  className="text-4xl text-base-fg/40" />
       </div>
       <div>
-        <p className="text-lg font-semibold text-base-fg">No shots yet</p>
+        <p className="font-display text-2xl tracking-tight text-base-fg">No shots yet</p>
         <p className="mt-1 text-sm text-base-fg/50">Add your first shot to get started</p>
       </div>
       <Button variant="primary" icon={PlusIcon} onClick={onAdd}>
@@ -68,63 +68,63 @@ const MetadataEditor = ({ board, onUpdate, onDelete, onUpload, onSketch }: Metad
   <aside className="flex w-[280px] shrink-0 flex-col border-r border-ui-panel-border bg-ui-panel">
     <div className="flex-1 overflow-y-auto p-4">
       <div className="flex flex-col gap-3">
-        <div className="text-xs font-medium uppercase tracking-wider text-base-fg/40">
+        <div className="hud-label text-base-fg/40">
           Shot {board.shotNumber}
         </div>
 
         <div>
-          <label className="mb-1 block text-xs text-base-fg/60">Title</label>
+          <label className="mb-1 block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">Title</label>
           <input
             type="text"
             value={board.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Shot title"
-            className="w-full rounded-md border border-ui-panel-border bg-ui-background px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-primary focus:outline-none"
+            className="w-full rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-white/60 focus:outline-none"
           />
         </div>
 
         <div>
-          <label className="mb-1 block text-xs text-base-fg/60">Dialogue</label>
+          <label className="mb-1 block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">Dialogue</label>
           <textarea
             value={board.dialogue}
             onChange={(e) => onUpdate({ dialogue: e.target.value })}
             placeholder="Character dialogue..."
             rows={3}
-            className="w-full resize-none rounded-md border border-ui-panel-border bg-ui-background px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-primary focus:outline-none"
+            className="w-full resize-none rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-white/60 focus:outline-none"
           />
         </div>
 
         <div>
-          <label className="mb-1 block text-xs text-base-fg/60">Action</label>
+          <label className="mb-1 block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">Action</label>
           <textarea
             value={board.action}
             onChange={(e) => onUpdate({ action: e.target.value })}
             placeholder="On-screen action..."
             rows={3}
-            className="w-full resize-none rounded-md border border-ui-panel-border bg-ui-background px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-primary focus:outline-none"
+            className="w-full resize-none rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-white/60 focus:outline-none"
           />
         </div>
 
         <div>
-          <label className="mb-1 block text-xs text-base-fg/60">Notes</label>
+          <label className="mb-1 block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">Notes</label>
           <textarea
             value={board.notes}
             onChange={(e) => onUpdate({ notes: e.target.value })}
             placeholder="Director notes..."
             rows={3}
-            className="w-full resize-none rounded-md border border-ui-panel-border bg-ui-background px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-primary focus:outline-none"
+            className="w-full resize-none rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder:text-base-fg/30 focus:border-white/60 focus:outline-none"
           />
         </div>
 
         <div>
-          <label className="mb-1 block text-xs text-base-fg/60">Duration (seconds)</label>
+          <label className="mb-1 block font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">Duration (seconds)</label>
           <input
             type="number"
             min={0}
             step={0.5}
             value={board.duration}
             onChange={(e) => onUpdate({ duration: parseFloat(e.target.value) || 0 })}
-            className="w-full rounded-md border border-ui-panel-border bg-ui-background px-3 py-2 text-sm text-base-fg focus:border-primary focus:outline-none"
+            className="w-full rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 font-mono text-sm tabular-nums text-base-fg focus:border-white/60 focus:outline-none"
           />
         </div>
       </div>
@@ -170,7 +170,7 @@ const MainPreview = ({
           style={{ pointerEvents: "none" }}
         />
         {board.title && (
-          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-lg bg-black/60 px-4 py-2 backdrop-blur-sm">
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 border border-white/15 bg-black/70 px-4 py-2">
             <p className="text-sm font-medium text-white">{board.title}</p>
           </div>
         )}
@@ -178,7 +178,7 @@ const MainPreview = ({
     ) : (
       <button
         onClick={onUploadClick}
-        className="flex flex-col items-center gap-3 rounded-xl border-2 border-dashed border-ui-panel-border p-12 text-base-fg/40 transition-colors hover:border-primary/50 hover:text-base-fg/70"
+        className="flex flex-col items-center gap-3 border border-dashed border-white/20 bg-white/[0.015] p-12 text-base-fg/40 transition-colors hover:border-white/40 hover:bg-white/5 hover:text-base-fg/70"
       >
         <UploadIcon  className="text-3xl" />
         <span className="text-sm">Click to upload an image</span>
@@ -332,9 +332,9 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
       onClick={() => setTool(t)}
       title={label}
       className={twMerge(
-        "flex h-8 w-8 items-center justify-center rounded-md transition-colors",
+        "flex h-8 w-8 items-center justify-center rounded-[3px] transition-colors",
         tool === t
-          ? "bg-primary text-white"
+          ? "bg-white text-black"
           : "text-base-fg/60 hover:bg-white/10 hover:text-base-fg",
       )}
     >
@@ -352,7 +352,7 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
         <div className="mx-1 h-5 w-px bg-ui-panel-border" />
 
         {/* Color picker */}
-        <label className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-ui-panel-border" title="Stroke color">
+        <label className="relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-[3px] border border-white/15 hover:border-white/30" title="Stroke color">
           <span
             className="h-4 w-4 rounded-sm border border-white/20"
             style={{ background: color }}
@@ -367,16 +367,16 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
 
         {/* Brush size */}
         <div className="flex items-center gap-1.5">
-          <span className="text-[10px] text-base-fg/40">Size</span>
+          <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-base-fg/40">Size</span>
           <input
             type="range"
             min={1}
             max={32}
             value={brushSize}
             onChange={(e) => setBrushSize(Number(e.target.value))}
-            className="w-20 accent-primary"
+            className="w-20 accent-white"
           />
-          <span className="w-5 text-center text-[10px] text-base-fg/50">{brushSize}</span>
+          <span className="w-5 text-center font-mono text-[10px] tabular-nums text-base-fg/50">{brushSize}</span>
         </div>
 
         <div className="mx-1 h-5 w-px bg-ui-panel-border" />
@@ -385,7 +385,7 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
           onClick={handleUndo}
           disabled={undoStack.length === 0}
           title="Undo"
-          className="flex h-8 w-8 items-center justify-center rounded-md text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg disabled:opacity-30"
+          className="flex h-8 w-8 items-center justify-center rounded-[3px] text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg disabled:opacity-30"
         >
           <RotateCcwIcon  className="text-sm" />
         </button>
@@ -393,7 +393,7 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
         <button
           onClick={handleClear}
           title="Clear canvas"
-          className="flex h-8 w-8 items-center justify-center rounded-md text-base-fg/60 transition-colors hover:bg-white/10 hover:text-red-400"
+          className="flex h-8 w-8 items-center justify-center rounded-[3px] text-base-fg/60 transition-colors hover:bg-white/10 hover:text-red-400"
         >
           <XIcon  className="text-sm" />
         </button>
@@ -401,7 +401,7 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
         <button
           onClick={onExit}
           title="Done sketching"
-          className="ml-auto flex h-8 items-center gap-1.5 rounded-md bg-primary px-3 text-xs font-medium text-white transition-colors hover:bg-primary-400"
+          className="ml-auto flex h-8 items-center gap-1.5 rounded-[3px] bg-white px-3 text-xs font-medium text-black transition-colors hover:bg-white/85"
         >
           <CheckIcon  className="text-xs" />
           Done
@@ -421,7 +421,7 @@ const SketchCanvas = ({ initialImageDataUrl, onSave, onExit }: SketchCanvasProps
             touchAction: "none",
             display: "block",
           }}
-          className="rounded shadow-xl"
+          className="border border-white/15"
           onPointerDown={handlePointerDown}
           onPointerMove={handlePointerMove}
           onPointerUp={handlePointerUp}
@@ -467,11 +467,11 @@ const ThumbnailItem = ({
     onDragEnd={onDragEnd}
     onClick={onSelect}
     className={twMerge(
-      "relative flex h-[60px] w-[100px] shrink-0 cursor-pointer overflow-hidden rounded-md border-2 transition-all select-none",
+      "relative flex h-[60px] w-[100px] shrink-0 cursor-pointer overflow-hidden rounded-[3px] border transition-all select-none",
       isSelected
-        ? "border-primary ring-2 ring-primary/30"
-        : "border-transparent hover:border-white/20",
-      isDragOver && "border-primary/60 opacity-60",
+        ? "border-white"
+        : "border-white/15 hover:border-white/30",
+      isDragOver && "border-white/60 opacity-60",
     )}
   >
     {board.imageDataUrl ? (
@@ -482,7 +482,7 @@ const ThumbnailItem = ({
       </div>
     )}
     <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1.5 py-0.5">
-      <span className="text-[10px] text-white/70">{board.shotNumber}</span>
+      <span className="font-mono text-[10px] tabular-nums text-white/85">{board.shotNumber}</span>
     </div>
   </div>
 );
@@ -515,7 +515,7 @@ const Filmstrip = ({
   <div className="flex h-[80px] shrink-0 items-center gap-2 overflow-x-auto border-t border-ui-panel-border bg-ui-panel px-3">
     <button
       onClick={onAdd}
-      className="flex h-[60px] w-[60px] shrink-0 items-center justify-center rounded-md border-2 border-dashed border-ui-panel-border bg-transparent text-base-fg/40 transition-colors hover:border-primary/50 hover:text-primary"
+      className="flex h-[60px] w-[60px] shrink-0 items-center justify-center rounded-[3px] border border-dashed border-white/20 bg-white/[0.015] text-base-fg/40 transition-colors hover:border-white/40 hover:bg-white/5 hover:text-base-fg"
       title="Add shot"
     >
       <PlusIcon />
@@ -705,12 +705,12 @@ const Timeline = ({
   const playheadLeft = currentTimeSeconds * PIXELS_PER_SECOND;
 
   return (
-    <div className="shrink-0 border-t border-ui-panel-border bg-[#1a1a1a]">
+    <div className="shrink-0 border-t border-ui-panel-border bg-ui-panel">
       {/* Header row */}
       <div className="flex items-center justify-between border-b border-ui-panel-border/40 px-3 py-1">
-        <span className="font-mono text-xs text-base-fg/50">{formatTime(currentTimeSeconds)}</span>
-        <span className="text-xs text-base-fg/25">Timeline</span>
-        <span className="font-mono text-xs text-base-fg/50">{formatTime(totalDuration)}</span>
+        <span className="font-mono text-xs tabular-nums text-base-fg/50">{formatTime(currentTimeSeconds)}</span>
+        <span className="hud-label text-base-fg/25">Timeline</span>
+        <span className="font-mono text-xs tabular-nums text-base-fg/50">{formatTime(totalDuration)}</span>
       </div>
 
       {/* Lane */}
@@ -729,7 +729,7 @@ const Timeline = ({
               style={{ left: i * PIXELS_PER_SECOND }}
             >
               <div className="h-2 w-px bg-white/10" />
-              <span className="text-[9px] text-base-fg/25">{i}s</span>
+              <span className="font-mono text-[9px] tabular-nums text-base-fg/25">{i}s</span>
             </div>
           ))}
 
@@ -743,9 +743,9 @@ const Timeline = ({
               <div
                 key={board.id}
                 className={twMerge(
-                  "absolute top-6 bottom-1 flex items-stretch overflow-hidden rounded border transition-colors",
+                  "absolute top-6 bottom-1 flex items-stretch overflow-hidden border transition-colors",
                   isSelected
-                    ? "border-primary bg-primary/25"
+                    ? "border-white bg-white/15"
                     : "border-white/15 bg-white/5 hover:bg-white/10",
                 )}
                 style={{
@@ -776,13 +776,13 @@ const Timeline = ({
                       "{board.dialogue}"
                     </span>
                   )}
-                  <span className="text-[9px] text-base-fg/30">{board.duration.toFixed(1)}s</span>
+                  <span className="font-mono text-[9px] tabular-nums text-base-fg/30">{board.duration.toFixed(1)}s</span>
                 </div>
 
                 {/* Resize handle */}
                 <div
                   data-resize="true"
-                  className="absolute right-0 top-0 bottom-0 w-2 rounded-r opacity-0 transition-opacity hover:bg-white/30 hover:opacity-100"
+                  className="absolute right-0 top-0 bottom-0 w-2 opacity-0 transition-opacity hover:bg-white/30 hover:opacity-100"
                   style={{ cursor: "ew-resize" }}
                   onPointerDown={(e) => handleResizePointerDown(e, board.id, board.duration)}
                   title="Drag to resize duration"
@@ -804,10 +804,10 @@ const Timeline = ({
 
           {/* Playhead */}
           <div
-            className="pointer-events-none absolute top-0 bottom-0 z-20 w-px bg-primary"
+            className="pointer-events-none absolute top-0 bottom-0 z-20 w-px bg-white"
             style={{ left: playheadLeft }}
           >
-            <div className="absolute -left-[4px] top-0 h-0 w-0 border-x-[4px] border-t-[7px] border-x-transparent border-t-primary" />
+            <div className="absolute -left-[4px] top-0 h-0 w-0 border-x-[4px] border-t-[7px] border-x-transparent border-t-white" />
           </div>
         </div>
       </div>
@@ -845,14 +845,14 @@ const PlaybackControls = ({
   onNextScene,
 }: PlaybackControlsProps) => {
   const transportBtnClass =
-    "flex h-9 w-9 items-center justify-center rounded-md text-base-fg/70 transition-colors hover:bg-white/10 hover:text-base-fg active:scale-95";
+    "flex h-9 w-9 items-center justify-center rounded-[3px] text-base-fg/70 transition-colors hover:bg-white/10 hover:text-base-fg active:scale-95";
 
   return (
-    <div className="flex h-[52px] shrink-0 items-center border-t border-ui-panel-border bg-[#111] px-4">
+    <div className="flex h-[52px] shrink-0 items-center border-t border-ui-panel-border bg-ui-background px-4">
       {/* Left stats */}
       <div className="flex w-32 flex-col">
-        <span className="font-mono text-xs text-base-fg/60">{formatTime(currentTimeSeconds)}</span>
-        <span className="text-[10px] text-base-fg/30">
+        <span className="font-mono text-xs tabular-nums text-base-fg/60">{formatTime(currentTimeSeconds)}</span>
+        <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-base-fg/30">
           {currentBoardNumber !== null ? `Shot ${currentBoardNumber}` : "—"}
         </span>
       </div>
@@ -876,7 +876,7 @@ const PlaybackControls = ({
 
         {/* Play / Pause */}
         <button
-          className="mx-1 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white transition-all hover:bg-primary-400 active:scale-95"
+          className="mx-1 flex h-10 w-10 items-center justify-center rounded-[3px] bg-white text-black transition-all hover:bg-white/85 active:scale-95"
           onClick={isPlaying ? onPause : onPlay}
           title={isPlaying ? "Pause" : "Play"}
         >
@@ -901,8 +901,8 @@ const PlaybackControls = ({
 
       {/* Right stats */}
       <div className="flex w-32 flex-col items-end">
-        <span className="font-mono text-xs text-base-fg/60">{formatTime(totalDuration)}</span>
-        <span className="text-[10px] text-base-fg/30">{totalBoards} shot{totalBoards !== 1 ? "s" : ""}</span>
+        <span className="font-mono text-xs tabular-nums text-base-fg/60">{formatTime(totalDuration)}</span>
+        <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-base-fg/30">{totalBoards} shot{totalBoards !== 1 ? "s" : ""}</span>
       </div>
     </div>
   );
diff --git a/frontend/apps/artcraft/app/src/pages/PageVideo/Background.css b/frontend/apps/artcraft/app/src/pages/PageVideo/Background.css
deleted file mode 100644
index bbe9b6f110..0000000000
--- a/frontend/apps/artcraft/app/src/pages/PageVideo/Background.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.video-background-image {
-  background-image:
-    linear-gradient(
-      0deg,
-      rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha)),
-      rgb(var(--st-photo-tint-rgb) / var(--st-photo-tint-alpha))
-    ),
-    url("/resources/images/forest-trees.webp");
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  min-width: 100%;
-  min-height: 100%;
-  filter: grayscale(var(--st-photo-grayscale));
-}
diff --git a/frontend/apps/artcraft/app/src/pages/PageVideo/BackgroundGallery.tsx b/frontend/apps/artcraft/app/src/pages/PageVideo/BackgroundGallery.tsx
deleted file mode 100644
index daf787f211..0000000000
--- a/frontend/apps/artcraft/app/src/pages/PageVideo/BackgroundGallery.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import "./Background.css";
-
-export default function GalleryBackground() {
-  return (
-    <>
-      <div className="pointer-events-none fixed inset-0 z-[1] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,_transparent_49%,_rgb(var(--st-controls-rgb)_/_var(--st-gallery-vignette-alpha))_100%)]" />
-      <div className="fixed inset-0 z-0 overflow-hidden">
-        <div
-          className={`video-background-image h-full w-full opacity-30 transition-opacity duration-1000`}
-        >
-          <div className="absolute inset-0 grid grid-cols-5 gap-6 px-6 opacity-35" />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/frontend/apps/artcraft/app/src/pages/PageVideo/ImageToVideo.tsx b/frontend/apps/artcraft/app/src/pages/PageVideo/ImageToVideo.tsx
index c4ae011265..0429bc16c3 100644
--- a/frontend/apps/artcraft/app/src/pages/PageVideo/ImageToVideo.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageVideo/ImageToVideo.tsx
@@ -10,7 +10,6 @@ import {
   UploadAudioMedia,
   FilterMediaClasses,
 } from "@storyteller/api";
-import BackgroundGallery from "./BackgroundGallery";
 import {
   ClassyModelSelector,
   useImageToVideoPageModelList,
@@ -186,7 +185,6 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
       hasContent={hasContent}
       emptyStateTitle="Create Video"
       emptyStateSubtitle="Choose an image, add a prompt, then generate"
-      background={<BackgroundGallery />}
       bottomOffset={promptHeight + 40}
       listContent={
         <DesktopGenerationGallery
diff --git a/frontend/apps/artcraft/app/src/pages/PageVideoFrameExtractor/VideoFrameExtractor.tsx b/frontend/apps/artcraft/app/src/pages/PageVideoFrameExtractor/VideoFrameExtractor.tsx
index c69d8eae60..0c10a7c14b 100644
--- a/frontend/apps/artcraft/app/src/pages/PageVideoFrameExtractor/VideoFrameExtractor.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageVideoFrameExtractor/VideoFrameExtractor.tsx
@@ -457,7 +457,7 @@ export const VideoFrameExtractor = () => {
 
   return (
     <>
-      <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-panel text-base-fg">
+      <div className="flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-background text-base-fg">
         <div className="flex-1 overflow-y-auto">
           <main
             className={
@@ -468,7 +468,7 @@ export const VideoFrameExtractor = () => {
           >
             {!videoUrl ? (
               <div className="w-full max-w-5xl">
-                <div className="aspect-video overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="aspect-video overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <UploadEntryCard
                     icon={ImagesIcon}
                     title="Extract Video Frames"
@@ -486,7 +486,7 @@ export const VideoFrameExtractor = () => {
               </div>
             ) : (
               <div className="flex w-full max-w-5xl flex-col gap-5">
-                <div className="w-full overflow-hidden rounded-xl border border-ui-panel-border bg-ui-controls/40">
+                <div className="w-full overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <div className="relative aspect-video w-full bg-black">
                     <Button
                       icon={RotateCwIcon}
@@ -500,7 +500,7 @@ export const VideoFrameExtractor = () => {
                         setSavedFrames(new Set());
                         setConvertingFrames(new Set());
                       }}
-                      className="absolute right-3 top-3 z-10 border-2 border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
+                      className="absolute right-3 top-3 z-10 border border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
                     >
                       Switch Video
                     </Button>
@@ -516,17 +516,17 @@ export const VideoFrameExtractor = () => {
                     <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent p-4">
                       <div
                         ref={progressBarRef}
-                        className="group relative mb-3 h-3 cursor-pointer rounded-full bg-white/20"
+                        className="group relative mb-3 h-3 cursor-pointer bg-white/15"
                         onClick={handleProgressBarClick}
                       >
                         <div
-                          className="absolute h-full overflow-hidden rounded-full bg-primary"
+                          className="absolute h-full overflow-hidden bg-white"
                           style={{
                             width: `${duration ? (currentTime / duration) * 100 : 0}%`,
                           }}
                         />
                         <div
-                          className="absolute top-1/2 h-6 w-1.5 -translate-y-1/2 cursor-ew-resize rounded-full bg-yellow-400 shadow-lg"
+                          className="absolute top-1/2 h-6 w-1.5 -translate-y-1/2 cursor-ew-resize bg-yellow-400"
                           style={{
                             left: `${duration ? (startTime / duration) * 100 : 0}%`,
                           }}
@@ -570,7 +570,7 @@ export const VideoFrameExtractor = () => {
                         <div className="flex items-center gap-2">
                           <button
                             onClick={() => seekToFrame("first")}
-                            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                             title="First Frame"
                           >
                             <SkipBackIcon
@@ -579,7 +579,7 @@ export const VideoFrameExtractor = () => {
                           </button>
                           <button
                             onClick={togglePlayPause}
-                            className="flex h-9 w-9 items-center justify-center rounded-full bg-white/20 hover:bg-white/30"
+                            className="flex h-9 w-9 items-center justify-center rounded-[3px] bg-white/20 transition-colors hover:bg-white/30"
                           >
                             <DynamicIcon
                               icon={isPlaying ? PauseIcon : PlayIcon}
@@ -588,7 +588,7 @@ export const VideoFrameExtractor = () => {
                           </button>
                           <button
                             onClick={() => seekToFrame("last")}
-                            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                             title="Last Frame"
                           >
                             <SkipForwardIcon
@@ -598,7 +598,7 @@ export const VideoFrameExtractor = () => {
                           <div className="mx-1 h-6 w-px bg-white/20" />
                           <button
                             onClick={toggleMute}
-                            className="flex h-7 w-7 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-7 w-7 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                           >
                             <DynamicIcon
                               icon={isMuted ? VolumeXIcon : Volume2Icon}
@@ -617,7 +617,7 @@ export const VideoFrameExtractor = () => {
                             className="w-20 accent-white"
                           />
                         </div>
-                        <div className="font-mono text-sm text-white">
+                        <div className="font-mono text-sm tabular-nums text-white">
                           {formatTime(currentTime)} / {formatTime(duration)}
                         </div>
                       </div>
@@ -640,24 +640,24 @@ export const VideoFrameExtractor = () => {
 
                 <div className="grid w-full grid-cols-1 gap-5 md:grid-cols-2">
                   <div className="flex flex-col gap-5">
-                    <div className="group rounded-2xl border border-ui-panel-border bg-ui-background p-6 shadow-lg">
+                    <div className="group border border-ui-panel-border bg-ui-panel p-6">
                       <div>
-                        <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-base-fg/60">
+                        <div className="mb-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                           Start Time
                         </div>
-                        <div className="font-mono text-3xl font-bold text-primary drop-shadow-sm">
+                        <div className="font-mono text-3xl font-semibold tabular-nums text-ui-accent-ink">
                           {formatTimePrecise(startTime)}
                         </div>
                         <div className="mt-3 flex items-center gap-2 text-xs text-base-fg/60">
-                          <div className="h-2.5 w-2.5 animate-pulse rounded-full bg-yellow-400 shadow-lg shadow-yellow-400/50" />
+                          <div className="h-2.5 w-2.5 animate-pulse rounded-full bg-yellow-400" />
                           <span>Adjust via the yellow marker on the video</span>
                         </div>
                       </div>
                     </div>
 
-                    <div className="group rounded-2xl border border-ui-panel-border bg-ui-background p-6 shadow-lg">
+                    <div className="group border border-ui-panel-border bg-ui-panel p-6">
                       <div>
-                        <div className="mb-4 text-xs font-semibold uppercase tracking-wider text-base-fg/60">
+                        <div className="mb-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                           Video Information
                         </div>
                         <div className="space-y-3 text-sm">
@@ -665,7 +665,7 @@ export const VideoFrameExtractor = () => {
                             <span className="font-medium text-base-fg/70">
                               Duration
                             </span>
-                            <span className="font-mono text-lg font-bold text-base-fg">
+                            <span className="font-mono text-lg font-semibold tabular-nums text-base-fg">
                               {formatTime(duration)}
                             </span>
                           </div>
@@ -674,7 +674,7 @@ export const VideoFrameExtractor = () => {
                               <span className="font-medium text-base-fg/70">
                                 Resolution
                               </span>
-                              <span className="font-mono font-bold text-base-fg">
+                              <span className="font-mono font-semibold tabular-nums text-base-fg">
                                 {videoRef.current.videoWidth} ×{" "}
                                 {videoRef.current.videoHeight}
                               </span>
@@ -685,12 +685,12 @@ export const VideoFrameExtractor = () => {
                     </div>
                   </div>
 
-                  <div className="rounded-2xl border border-ui-panel-border bg-ui-background p-6 shadow-lg">
+                  <div className="border border-ui-panel-border bg-ui-panel p-6">
                     <div>
-                      <h3 className="mb-5 flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-base-fg/60">
+                      <h3 className="mb-5 flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                         <SparklesIcon
                           
-                          className="text-primary" />
+                          className="text-ui-accent-ink" />
                         Extraction Settings
                       </h3>
 
@@ -698,7 +698,7 @@ export const VideoFrameExtractor = () => {
                         <div>
                           <label
                             htmlFor="numFrames"
-                            className="mb-2.5 block text-sm font-semibold text-base-fg"
+                            className="mb-1.5 block text-xs font-medium text-base-fg/60"
                           >
                             Number of Frames
                           </label>
@@ -716,14 +716,14 @@ export const VideoFrameExtractor = () => {
                                 ),
                               )
                             }
-                            className="border-ui-controls-border w-full rounded-xl border-2 bg-ui-controls px-4 py-3.5 text-base-fg focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
+                            className="w-full rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm tabular-nums text-base-fg focus:border-white/60 focus:outline-none"
                           />
                         </div>
 
                         <div>
                           <label
                             htmlFor="frameDistance"
-                            className="mb-2.5 block text-sm font-semibold text-base-fg"
+                            className="mb-1.5 block text-xs font-medium text-base-fg/60"
                           >
                             Distance (ms)
                           </label>
@@ -738,11 +738,11 @@ export const VideoFrameExtractor = () => {
                                 Math.max(1, parseInt(e.target.value) || 1),
                               )
                             }
-                            className="border-ui-controls-border w-full rounded-xl border-2 bg-ui-controls px-4 py-3.5 text-base-fg focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
+                            className="w-full rounded-[3px] border border-white/15 bg-ui-controls px-3 py-2 text-sm tabular-nums text-base-fg focus:border-white/60 focus:outline-none"
                           />
                         </div>
 
-                        <div className="text-xs leading-relaxed text-base-fg/80">
+                        <div className="text-xs leading-relaxed text-base-fg/60">
                           Extracting multiple frames helps capture a sharp,
                           non-blurred frame.
                         </div>
@@ -754,26 +754,26 @@ export const VideoFrameExtractor = () => {
                 {extractedFrames.length > 0 && (
                   <div
                     ref={extractedFramesRef}
-                    className="rounded-2xl border border-ui-panel-border bg-ui-controls p-6 shadow-lg"
+                    className="border border-ui-panel-border bg-ui-panel p-6"
                   >
                     <div>
-                      <div className="mb-6 flex items-center justify-between">
-                        <h3 className="flex items-center gap-2 text-xl font-bold uppercase tracking-wider text-base-fg">
+                      <div className="mb-4 flex items-center justify-between">
+                        <h3 className="flex items-center gap-2 text-sm font-semibold text-base-fg">
                           <ImagesIcon
                             
-                            className="text-primary" />
+                            className="text-ui-accent-ink" />
                           Extracted Frames
                         </h3>
-                        <div className="bg-ui-badge rounded-full border-2 border-primary/30 px-5 py-2 text-sm font-bold text-base-fg shadow-lg">
+                        <div className="border border-white/20 px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase leading-none tracking-[0.12em] text-base-fg/70">
                           {extractedFrames.length}{" "}
                           {extractedFrames.length === 1 ? "Frame" : "Frames"}
                         </div>
                       </div>
-                      <div className="grid grid-cols-2 gap-5">
+                      <div className="grid grid-cols-2 gap-3">
                         {extractedFrames.map((frame, index) => (
                           <div
                             key={frame.id}
-                            className="group relative overflow-hidden rounded-xl border-2 border-ui-panel-border bg-ui-controls"
+                            className="group relative overflow-hidden border border-ui-panel-border bg-ui-background transition-colors hover:border-white/30"
                           >
                             <div className="aspect-video overflow-hidden bg-black">
                               <img
@@ -782,12 +782,12 @@ export const VideoFrameExtractor = () => {
                                 className="h-full w-full object-contain"
                               />
                             </div>
-                            <div className="space-y-2 bg-ui-background p-3">
+                            <div className="space-y-2 border-t border-ui-panel-border/60 bg-ui-background p-3">
                               <div className="flex items-center justify-between">
-                                <span className="bg-ui-badge rounded border border-ui-panel-border px-2 py-1 text-xs font-bold text-base-fg">
+                                <span className="border border-white/20 px-1.5 py-0.5 font-mono text-[9px] font-semibold uppercase leading-none tracking-[0.12em] text-base-fg/70">
                                   #{index + 1}
                                 </span>
-                                <div className="font-mono text-xs font-semibold text-base-fg/70">
+                                <div className="font-mono text-xs tabular-nums text-base-fg/70">
                                   {formatTimePrecise(frame.timestamp)}
                                 </div>
                               </div>
diff --git a/frontend/apps/artcraft/app/src/pages/PageVideoWatermarkRemover/VideoWatermarkRemover.tsx b/frontend/apps/artcraft/app/src/pages/PageVideoWatermarkRemover/VideoWatermarkRemover.tsx
index 67a9e58512..da81e93f36 100644
--- a/frontend/apps/artcraft/app/src/pages/PageVideoWatermarkRemover/VideoWatermarkRemover.tsx
+++ b/frontend/apps/artcraft/app/src/pages/PageVideoWatermarkRemover/VideoWatermarkRemover.tsx
@@ -203,7 +203,7 @@ export const VideoWatermarkRemover = () => {
 
   return (
     <>
-      <div className="bg-ui-panel-gradient flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-panel text-base-fg">
+      <div className="flex h-[calc(100vh-56px)] w-full overflow-hidden bg-ui-background text-base-fg">
         <div className="flex-1 overflow-y-auto">
           <main
             className={
@@ -214,7 +214,7 @@ export const VideoWatermarkRemover = () => {
           >
             {!videoUrl ? (
               <div className="w-full max-w-5xl">
-                <div className="aspect-video overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="aspect-video overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <UploadEntryCard
                     icon={DropletIcon}
                     title="Remove Video Watermark"
@@ -232,7 +232,7 @@ export const VideoWatermarkRemover = () => {
               </div>
             ) : (
               <div className="flex w-full max-w-5xl flex-col gap-5">
-                <div className="w-full overflow-hidden rounded-2xl border border-ui-panel-border bg-ui-background shadow-lg">
+                <div className="w-full overflow-hidden border border-ui-panel-border bg-ui-panel">
                   <div className="relative aspect-video w-full bg-black">
                     <Button
                       icon={RotateCwIcon}
@@ -241,7 +241,7 @@ export const VideoWatermarkRemover = () => {
                         setVideoUrl("");
                         setCurrentTime(0);
                       }}
-                      className="absolute right-3 top-3 z-10 border-2 border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
+                      className="absolute right-3 top-3 z-10 border border-red/50 px-3 py-1.5 text-sm hover:border-red/80 hover:bg-red/80"
                     >
                       Switch Video
                     </Button>
@@ -256,11 +256,11 @@ export const VideoWatermarkRemover = () => {
                     <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent p-4">
                       <div
                         ref={progressBarRef}
-                        className="group relative mb-3 h-3 cursor-pointer rounded-full bg-white/20"
+                        className="group relative mb-3 h-3 cursor-pointer bg-white/15"
                         onClick={handleProgressBarClick}
                       >
                         <div
-                          className="absolute h-full overflow-hidden rounded-full bg-primary"
+                          className="absolute h-full overflow-hidden bg-white"
                           style={{
                             width: `${duration ? (currentTime / duration) * 100 : 0}%`,
                           }}
@@ -270,7 +270,7 @@ export const VideoWatermarkRemover = () => {
                         <div className="flex items-center gap-2">
                           <button
                             onClick={() => seekToFrame("first")}
-                            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                             title="First Frame"
                           >
                             <SkipBackIcon
@@ -279,7 +279,7 @@ export const VideoWatermarkRemover = () => {
                           </button>
                           <button
                             onClick={togglePlayPause}
-                            className="flex h-9 w-9 items-center justify-center rounded-full bg-white/20 hover:bg-white/30"
+                            className="flex h-9 w-9 items-center justify-center rounded-[3px] bg-white/20 transition-colors hover:bg-white/30"
                           >
                             <DynamicIcon
                               icon={isPlaying ? PauseIcon : PlayIcon}
@@ -288,7 +288,7 @@ export const VideoWatermarkRemover = () => {
                           </button>
                           <button
                             onClick={() => seekToFrame("last")}
-                            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                             title="Last Frame"
                           >
                             <SkipForwardIcon
@@ -298,7 +298,7 @@ export const VideoWatermarkRemover = () => {
                           <div className="mx-1 h-6 w-px bg-white/20" />
                           <button
                             onClick={toggleMute}
-                            className="flex h-7 w-7 items-center justify-center rounded-full bg-white/10 hover:bg-white/20"
+                            className="flex h-7 w-7 items-center justify-center rounded-[3px] bg-white/10 transition-colors hover:bg-white/20"
                           >
                             <DynamicIcon
                               icon={isMuted ? VolumeXIcon : Volume2Icon}
@@ -317,7 +317,7 @@ export const VideoWatermarkRemover = () => {
                             className="w-20 accent-white"
                           />
                         </div>
-                        <div className="font-mono text-sm text-white">
+                        <div className="font-mono text-sm tabular-nums text-white">
                           {formatTime(currentTime)} / {formatTime(duration)}
                         </div>
                       </div>
@@ -338,12 +338,12 @@ export const VideoWatermarkRemover = () => {
                   </Button>
                 </div>
 
-                <div className="rounded-2xl border border-ui-panel-border bg-ui-background p-6 shadow-lg">
+                <div className="border border-ui-panel-border bg-ui-panel p-6">
                   <div>
-                    <div className="mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-base-fg/60">
+                    <div className="mb-4 flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       <VideoIcon
                         
-                        className="text-primary" />
+                        className="text-ui-accent-ink" />
                       Video Information
                     </div>
                     <div className="space-y-3 text-sm">
@@ -351,7 +351,7 @@ export const VideoWatermarkRemover = () => {
                         <span className="font-medium text-base-fg/70">
                           Duration
                         </span>
-                        <span className="font-mono text-lg font-bold text-base-fg">
+                        <span className="font-mono text-lg font-semibold tabular-nums text-base-fg">
                           {formatTime(duration)}
                         </span>
                       </div>
@@ -360,7 +360,7 @@ export const VideoWatermarkRemover = () => {
                           <span className="font-medium text-base-fg/70">
                             Resolution
                           </span>
-                          <span className="font-mono font-bold text-base-fg">
+                          <span className="font-mono font-semibold tabular-nums text-base-fg">
                             {videoRef.current.videoWidth} ×{" "}
                             {videoRef.current.videoHeight}
                           </span>
diff --git a/frontend/apps/artcraft/app/src/root.tsx b/frontend/apps/artcraft/app/src/root.tsx
index 284d684894..ee68612edd 100644
--- a/frontend/apps/artcraft/app/src/root.tsx
+++ b/frontend/apps/artcraft/app/src/root.tsx
@@ -38,7 +38,7 @@ export const links: LinksFunction = () => [
   },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300..800&display=swap",
   },
 ];
 
diff --git a/frontend/apps/artcraft/app/src/styles/base.css b/frontend/apps/artcraft/app/src/styles/base.css
index e2056ea6a5..2df03b0dbd 100644
--- a/frontend/apps/artcraft/app/src/styles/base.css
+++ b/frontend/apps/artcraft/app/src/styles/base.css
@@ -1,6 +1,6 @@
 * {
   scrollbar-width: thin;
-  scrollbar-color: #363636 #171717;
+  scrollbar-color: #2c2c2f #0b0b0c;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -9,13 +9,12 @@
 }
 
 *::-webkit-scrollbar-track {
-  background: #171717;
+  background: #0b0b0c;
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: #363636;
-  border-radius: 4px;
-  border: 2px solid #171717;
+  background-color: #2c2c2f;
+  border: 2px solid #0b0b0c;
 }
 
 /* Light theme: the scrollbar track/thumb must be light, not the dark defaults. */
@@ -46,18 +45,37 @@ input[type="number"] {
   appearance: textfield;
 }
 
+/* Display face: Archivo, matching artcraft-webapp. */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-family: "Outfit", sans-serif;
+  font-family:
+    "Archivo",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  letter-spacing: -0.03em;
+}
+
+/* Only display-scale headings run expanded on the wdth axis; compact
+   headings (card titles, section labels) stay at normal width so they
+   don't truncate in tight layouts. */
+h1,
+h2 {
+  font-stretch: 118%;
+  font-weight: 620;
 }
 
 body {
   font-family:
-    "Source Sans 3",
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
@@ -70,22 +88,61 @@ body {
   background-color: var(--st-bg);
   color-scheme: var(--st-color-scheme, dark);
   user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: #2d81ff;
+  color: #ffffff;
+}
+
+:focus-visible {
+  outline: 2px solid #74aaff;
+  outline-offset: 3px;
+}
+
+/* Mono HUD micro-label, matching the webapp/marketing site's .hud-label. */
+.hud-label {
+  font-family:
+    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.font-serif-italic {
+  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+
+/* Display utility carries the ax-display treatment (Archivo at weight 620,
+   118% width). Plain (unlayered) rule so it wins over font-weight
+   utilities like font-semibold. */
+.font-display {
+  font-stretch: 118%;
+  font-weight: 620;
 }
 
 /* ===================== THEME VARIABLES ===================== */
+/* The default (the "gray" theme id) is the brutalist system shared with
+   artcraft-webapp: near-black surfaces, white/15 hairline borders. */
 :root {
-  --st-bg: #121212;
-  /* gray theme default */
-  --st-panel: #1f1f1f;
-  --st-panel-border: #3f3f3f;
-  --st-modal: #1f1f1f;
+  --st-bg: #121316;
+  --st-panel: #101014;
+  --st-panel-border: rgba(255, 255, 255, 0.15);
+  --st-modal: #101014;
   /* default modal surface (can be gradient per theme) */
-  --st-controls: #3e3e41;
-  --st-controls-rgb: 62 62 65;
-  --st-controls-border: #3f3f3f;
-  --st-fg: #ffffff;
-  --st-fg-rgb: 255 255 255;
-  --st-divider: #515168;
+  --st-controls: #1e1f22;
+  --st-controls-rgb: 30 31 34;
+  --st-controls-border: rgba(255, 255, 255, 0.15);
+  --st-sunken: #060607;
+  --st-fg: #f2f1ee;
+  --st-fg-rgb: 242 241 238;
+  --st-divider: rgba(255, 255, 255, 0.15);
   --st-gallery-vignette-alpha: 0.6;
   /* Photo tint (default neutral) */
   --st-photo-tint-rgb: 0 0 0;
@@ -95,28 +152,45 @@ body {
   --st-badge-alpha: 0.4;
 
   /* shadcn design tokens consumed by @storyteller/ui-video-editor.
-     Dark-theme palette — the editor only runs in dark mode today.
-     --primary matches the webapp's brand blue (#2d81ff) so the
-     selection ring is consistent across hosts. */
-  --background: 0 0% 9%;
+     Same values as artcraft-webapp's styles.css. */
+  --background: 225 10% 8%;
   --foreground: 0 0% 98%;
-  --card: 0 0% 12%;
+  --card: 240 11% 7%;
   --card-foreground: 0 0% 98%;
-  --popover: 0 0% 12%;
+  --popover: 240 11% 7%;
   --popover-foreground: 0 0% 98%;
   --primary: 216 100% 59%;
   --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 24%;
+  --secondary: 240 4% 9%;
   --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 18%;
+  --muted: 240 4% 9%;
   --muted-foreground: 0 0% 64%;
-  --accent: 0 0% 16%;
+  --accent: 240 4% 9%;
   --accent-foreground: 0 0% 98%;
   --destructive: 0 70% 50%;
   --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 18%;
-  --input: 0 0% 18%;
-  --ring: 217 91% 60%;
+  --border: 0 0% 100% / 0.15;
+  --input: 0 0% 100% / 0.15;
+  --ring: 217 100% 73%;
+
+  /* Motion tokens, mirrored from artcraft-webapp. */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
+  --dur-fast: 140ms;
+  --dur-base: 220ms;
+  --dur-slow: 340ms;
+  --dur-page: 260ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-fast: 1ms;
+    --dur-base: 1ms;
+    --dur-slow: 1ms;
+    --dur-page: 1ms;
+  }
 }
 
 /* Light theme */
@@ -130,6 +204,7 @@ body {
   --st-controls-rgb: 238 238 239;
   --st-controls-border: #dcdcdf;
   /* requested light button border */
+  --st-sunken: #ececef;
   --st-fg: #111827;
   --st-fg-rgb: 17 24 39;
   --st-divider: #d1d5db;
@@ -141,18 +216,19 @@ body {
   --st-badge-alpha: 0.1;
 }
 
-/* Gray (current) */
+/* Default dark (brutalist, matches artcraft-webapp) */
 .theme-gray {
-  --st-bg: #121212;
-  --st-panel: #1f1f1f;
-  --st-panel-border: #272727;
-  --st-modal: #1f1f1f;
-  --st-controls: #3e3e41;
-  --st-controls-rgb: 62 62 65;
-  --st-controls-border: #464646;
-  --st-fg: #ffffff;
-  --st-fg-rgb: 255 255 255;
-  --st-divider: #272727;
+  --st-bg: #121316;
+  --st-panel: #101014;
+  --st-panel-border: rgba(255, 255, 255, 0.15);
+  --st-modal: #101014;
+  --st-controls: #1e1f22;
+  --st-controls-rgb: 30 31 34;
+  --st-controls-border: rgba(255, 255, 255, 0.15);
+  --st-sunken: #060607;
+  --st-fg: #f2f1ee;
+  --st-fg-rgb: 242 241 238;
+  --st-divider: rgba(255, 255, 255, 0.15);
   --st-color-scheme: dark;
   --st-gallery-vignette-alpha: 0.3;
   --st-photo-tint-rgb: 0 0 0;
@@ -165,11 +241,12 @@ body {
 .theme-black {
   --st-bg: #000000;
   --st-panel: #0a0a0a;
-  --st-panel-border: #242424;
+  --st-panel-border: rgba(255, 255, 255, 0.15);
   --st-modal: #0a0a0a;
   --st-controls: #111111;
   --st-controls-rgb: 17 17 17;
-  --st-controls-border: #242424;
+  --st-controls-border: rgba(255, 255, 255, 0.15);
+  --st-sunken: #000000;
   --st-fg: #ffffff;
   --st-fg-rgb: 255 255 255;
   --st-divider: #303030;
@@ -193,7 +270,8 @@ body {
     radial-gradient(520px 280px at 110% 120%, #1cb6be33, transparent), #0f1220;
   --st-controls: #1a1f35;
   --st-controls-rgb: 26 31 53;
-  --st-controls-border: #1e2237;
+  --st-controls-border: rgba(255, 255, 255, 0.15);
+  --st-sunken: #05070d;
   --st-fg: #f8fafc;
   --st-fg-rgb: 248 250 252;
   --st-divider: #2a3152;
@@ -217,7 +295,8 @@ body {
     radial-gradient(700px 360px at 115% 120%, #fb923c88, transparent), #1a121a;
   --st-controls: #271927;
   --st-controls-rgb: 39 25 39;
-  --st-controls-border: #3a253a;
+  --st-controls-border: rgba(255, 255, 255, 0.15);
+  --st-sunken: #0d070b;
   --st-fg: #f8fafc;
   --st-fg-rgb: 248 250 252;
   --st-divider: #4a2e3a;
@@ -238,14 +317,10 @@ body {
   background: var(--st-panel);
 }
 
+/* Panel surface. Brutalist system: flat, no gradient (class name kept
+   for lib compatibility). */
 .bg-ui-panel-gradient {
-  background:
-    radial-gradient(
-      60.68% 60.68% at 50% 0%,
-      rgba(255, 255, 255, 0.08) 0%,
-      rgba(0, 0, 0, 0) 70%
-    ),
-    var(--st-panel);
+  background: var(--st-panel);
   background-color: var(--st-panel);
 }
 
@@ -331,7 +406,6 @@ img {
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb {
   background-color: rgba(255, 255, 255, 0.2);
-  border-radius: 9999px;
 }
 
 .promptbox-scrollbar::-webkit-scrollbar-thumb:hover {
@@ -730,3 +804,60 @@ img {
 .promptbox-drop-chip {
   animation: promptbox-drop-chip-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
+
+/* ===================== Brutalist extras (from artcraft-webapp) ========== */
+
+.liquid-glass {
+  background: rgba(11, 11, 12, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    translate: 0 8px;
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+.animate-toast-in {
+  animation: toast-in 0.2s ease-out both;
+}
+
+.bg-dots {
+  background-image: radial-gradient(#ffffff20 1px, transparent 0);
+  background-color: var(--st-panel);
+  background-size: 33px 33px;
+  background-position: center;
+}
+
+/* Fine registration marks echo the landing page section corners. */
+.frame-corner-mark {
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  margin: -5px;
+  pointer-events: none;
+  background:
+    linear-gradient(rgba(242, 241, 238, 0.4), rgba(242, 241, 238, 0.4))
+      center / 1px 11px no-repeat,
+    linear-gradient(rgba(242, 241, 238, 0.4), rgba(242, 241, 238, 0.4))
+      center / 11px 1px no-repeat;
+}
+
+/* Contained section borders match the landing without decorative extensions. */
+.create-empty-section {
+  margin-inline: 12px;
+  border: 1px solid rgba(242, 241, 238, 0.2);
+  background: rgba(242, 241, 238, 0.015);
+}
+
+@media (min-width: 640px) {
+  .create-empty-section {
+    margin-inline: 32px;
+  }
+}
diff --git a/frontend/apps/artcraft/app/src/styles/tailwind.css b/frontend/apps/artcraft/app/src/styles/tailwind.css
index 2cd3472061..135d8f56db 100644
--- a/frontend/apps/artcraft/app/src/styles/tailwind.css
+++ b/frontend/apps/artcraft/app/src/styles/tailwind.css
@@ -2,29 +2,46 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Subtle 3px corners on interactive controls (matches artcraft-webapp).
+   The brutalist system keeps large surfaces (panels, modals, tables),
+   passive labels, and media tiles square; anything pressable gets a soft
+   corner for affordance. Tailwind radius utilities (rounded-full,
+   rounded-none) still win — the utilities layer is emitted after base. */
+@layer base {
+  button,
+  select,
+  textarea,
+  input:not([type="radio"]):not([type="range"]),
+  [role="button"] {
+    border-radius: 3px;
+  }
+}
+
 @layer components {
   .filter-tab {
-    @apply text-nowrap rounded-lg border border-[#363636] bg-ui-controls-button px-2.5 py-1 text-[13px] font-medium text-white/80 transition-all duration-150 hover:border-brand-primary/50 hover:bg-assets-background/80;
+    @apply text-nowrap rounded-[3px] border border-white/15 bg-white/5 px-2.5 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70 transition-colors duration-150 hover:border-white/25 hover:bg-white/[0.07] hover:text-white;
   }
 
   .filter-tab.active {
-    @apply border border-brand-primary text-white hover:border-brand-primary hover:bg-ui-controls-button;
+    @apply border-white bg-white text-black hover:border-white hover:bg-white hover:text-black;
   }
 
   .filter-tab:disabled {
-    @apply border-transparent bg-ui-controls-button/50 hover:border-transparent disabled:text-white/30;
+    @apply border-transparent bg-white/[0.03] text-white/30 hover:border-transparent hover:bg-white/[0.03];
   }
 
+  /* Brutalist system: former "glass" surfaces are flat near-black panels
+     with white/15 hairline borders (class name kept for lib compatibility). */
   .glass {
-    @apply relative border border-white/10 shadow-lg backdrop-blur-xl transition-colors duration-300;
-    @apply bg-[#303032]/90 !important;
+    @apply relative rounded-[3px] border border-white/15 backdrop-blur-sm transition-colors duration-300;
+    @apply bg-[#1E1F22]/95 !important;
   }
 
   /* Light theme: the glass surface must be a light panel, not the dark
      hard-coded fill above. Tint + border swapped to read on a light bg. */
   .theme-light .glass {
-    @apply border-black/10 !important;
-    background-color: rgb(248 248 248 / 0.92) !important;
+    @apply border-black/15 !important;
+    background-color: rgb(248 248 248 / 0.95) !important;
   }
 }
 
diff --git a/frontend/apps/artcraft/tailwind.config.ts b/frontend/apps/artcraft/tailwind.config.ts
index 7097e7b4d1..7d9fa35957 100644
--- a/frontend/apps/artcraft/tailwind.config.ts
+++ b/frontend/apps/artcraft/tailwind.config.ts
@@ -12,6 +12,36 @@ export default {
     extend: {
       fontFamily: {
         "custom-font": ["Fira Sans", "sans-serif"],
+        // Brutalist type system, matching artcraft-webapp.
+        mono: [
+          "Geist Mono",
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Consolas",
+          "monospace",
+        ],
+        display: [
+          "Archivo",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "sans-serif",
+        ],
+        sans: [
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "sans-serif",
+        ],
       },
       keyframes: {
         fadeIn: {
@@ -225,12 +255,20 @@ export default {
         wrapper: "#39394d",
       },
       ui: {
+        // Brutalist system (matches artcraft-webapp): near-black surfaces
+        // with white/15 hairline borders. Values come from the --st-* theme
+        // variables in app/src/styles/base.css.
         background: "var(--st-bg)",
         panel: "var(--st-panel)",
         "panel-border": "var(--st-panel-border)",
+        border: "var(--st-panel-border)",
         controls: "rgb(var(--st-controls-rgb) / <alpha-value>)",
         "controls-button": "rgb(var(--st-controls-rgb) / <alpha-value>)",
+        "controls-border": "var(--st-controls-border)",
         divider: "var(--st-divider)",
+        ink: "rgb(var(--st-fg-rgb) / <alpha-value>)",
+        "accent-ink": "#74aaff",
+        sunken: "var(--st-sunken)",
       },
       "base-fg": "rgb(var(--st-fg-rgb) / <alpha-value>)",
       media: {
diff --git a/frontend/libs/components/badge/src/lib/badge.tsx b/frontend/libs/components/badge/src/lib/badge.tsx
index e885acc713..da60a7919e 100644
--- a/frontend/libs/components/badge/src/lib/badge.tsx
+++ b/frontend/libs/components/badge/src/lib/badge.tsx
@@ -12,7 +12,7 @@ export const Badge = ({ label, className, icon }: BadgeProps) => {
   return (
     <div
       className={twMerge(
-        "flex items-center gap-1 rounded-[6px] bg-ui-controls/45 px-[4px] py-[1px] text-[10px] shadow-sm",
+        "flex items-center gap-1 rounded-none border border-ui-controls-border bg-black/40 px-1.5 py-px font-mono text-[10px] font-medium uppercase tracking-[0.1em]",
         className
       )}
     >
diff --git a/frontend/libs/components/button-dropdown/src/lib/button-dropdown.tsx b/frontend/libs/components/button-dropdown/src/lib/button-dropdown.tsx
index 394e0a3408..c52a886621 100644
--- a/frontend/libs/components/button-dropdown/src/lib/button-dropdown.tsx
+++ b/frontend/libs/components/button-dropdown/src/lib/button-dropdown.tsx
@@ -101,7 +101,7 @@ export const ButtonDropdown = ({
           <Menu.Items
             static
             className={twMerge(
-              "absolute z-20 mt-1 w-max divide-y divide-gray-100 overflow-hidden rounded-lg bg-brand-secondary py-1.5 shadow-xl focus:outline-none",
+              "absolute z-20 mt-2 w-max min-w-48 overflow-hidden rounded-[3px] border border-ui-panel-border bg-ui-controls p-1.5 text-base-fg focus:outline-none",
               align === "left" ? "left-0" : "right-0",
             )}
           >
@@ -109,19 +109,19 @@ export const ButtonDropdown = ({
               {options.map((option, index) => (
                 <Fragment key={index}>
                   {option.divider && (
-                    <div className="my-1.5 border-t border-white/5" />
+                    <div className="my-1.5 border-t border-white/15" />
                   )}
                   <Menu.Item>
                     {({ active }) => (
                       <button
                         disabled={option.disabled}
                         className={twMerge(
-                          "duration-50 bg-brand-secondary font-medium text-white transition-all",
-                          active ? "bg-brand-secondary-800" : "",
+                          "rounded-[3px] bg-transparent font-medium text-base-fg transition-colors duration-150",
+                          active ? "bg-white/10" : "",
                           option.disabled
                             ? "pointer-events-none opacity-40"
                             : "",
-                          "group flex w-full items-center py-1.5 pl-7 pr-4 text-sm",
+                          "group flex w-full items-center gap-2 px-2.5 py-2 text-sm",
                           option.className,
                         )}
                         onClick={() => handleOptionClick(index)}
@@ -130,11 +130,11 @@ export const ButtonDropdown = ({
                           {option.icon && (
                             <DynamicIcon
                               icon={option.icon}
-                              className="mr-2"
+                              className="mr-2 h-4 w-4 shrink-0"
                             />
                           )}
                           <div className="grow text-start">{option.label}</div>
-                          <div className="ml-10 font-normal text-white/75">
+                          <div className="ml-6 font-mono text-[11px] font-normal text-white/45">
                             {option.description && option.description}
                           </div>
                           {showSelected && (
diff --git a/frontend/libs/components/button-icon-select/src/lib/button-icon-select.tsx b/frontend/libs/components/button-icon-select/src/lib/button-icon-select.tsx
index d861e16c76..e286280858 100644
--- a/frontend/libs/components/button-icon-select/src/lib/button-icon-select.tsx
+++ b/frontend/libs/components/button-icon-select/src/lib/button-icon-select.tsx
@@ -15,12 +15,14 @@ interface ButtonIconSelectProps {
   options: Option[];
   onOptionChange?: (value: string) => void;
   selectedOption?: string;
+  buttonClassName?: string;
 }
 
 export function ButtonIconSelect({
   options,
   onOptionChange,
   selectedOption,
+  buttonClassName,
 }: ButtonIconSelectProps) {
   const [internalSelectedOption, setInternalSelectedOption] = useState<string>(
     selectedOption || options[0].value
@@ -54,7 +56,8 @@ export function ButtonIconSelect({
                 text ? "h-auto w-auto gap-2 px-3 py-1.5" : "w-9",
                 internalSelectedOption === value
                   ? "border-brand-primary bg-brand-primary/20"
-                  : "border-transparent hover:bg-ui-panel/[0.4]"
+                  : "border-transparent hover:bg-ui-panel/[0.4]",
+                buttonClassName,
               )}
               onClick={() => handleOptionChange(value)}
             >
@@ -72,7 +75,8 @@ export function ButtonIconSelect({
               text ? "h-auto w-auto gap-2 px-3 py-1.5" : "w-9",
               internalSelectedOption === value
                 ? "border-brand-primary bg-brand-primary/20"
-                : "border-transparent hover:bg-ui-panel/[0.4]"
+                : "border-transparent hover:bg-ui-panel/[0.4]",
+              buttonClassName,
             )}
             onClick={() => handleOptionChange(value)}
           >
diff --git a/frontend/libs/components/button-icon/src/lib/button-icon.tsx b/frontend/libs/components/button-icon/src/lib/button-icon.tsx
index 48b259a733..9e100ee6d7 100644
--- a/frontend/libs/components/button-icon/src/lib/button-icon.tsx
+++ b/frontend/libs/components/button-icon/src/lib/button-icon.tsx
@@ -20,12 +20,12 @@ export const ButtonIcon = ({
   ...rest
 }: ButtonIconProps) => {
   const className = twMerge(
-    "box-content flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
+    "box-content flex h-8 w-8 items-center justify-center rounded-[3px] transition-colors duration-150",
     bgFill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
     disabled && "opacity-50 hover:bg-transparent",
-    propsClassName
+    propsClassName,
   );
 
   return (
diff --git a/frontend/libs/components/button/src/lib/GenerateButton.tsx b/frontend/libs/components/button/src/lib/GenerateButton.tsx
index 673202403b..fff7dd34f8 100644
--- a/frontend/libs/components/button/src/lib/GenerateButton.tsx
+++ b/frontend/libs/components/button/src/lib/GenerateButton.tsx
@@ -37,8 +37,8 @@ export const GenerateButton = ({
               disabled && "opacity-50",
             )}
           >
-            <CoinsIcon  className="text-xs text-white" />
-            <span className="text-[13px] font-bold text-white/90">
+            <CoinsIcon className="text-xs" />
+            <span className="text-[13px] font-bold">
               {credits}
             </span>
           </div>
diff --git a/frontend/libs/components/button/src/lib/ToggleButton.tsx b/frontend/libs/components/button/src/lib/ToggleButton.tsx
index d50754e513..f2b90ea7b8 100644
--- a/frontend/libs/components/button/src/lib/ToggleButton.tsx
+++ b/frontend/libs/components/button/src/lib/ToggleButton.tsx
@@ -27,13 +27,14 @@ export const ToggleButton = ({
     <Button
       className={twMerge(
         // 34px matches the sibling toolbar controls (GenerateButton, the
-        // PopoverMenu triggers); the 2px border is inside the box.
-        "flex h-[34px] items-center justify-center rounded-lg border-2 border-transparent text-sm text-white backdrop-blur-lg transition-all",
-        hasLabel ? "px-3" : "w-[34px]",
+        // PopoverMenu triggers). Flat control surface + hairline border,
+        // same idiom as the PopoverMenu triggers beside it.
+        "flex h-[34px] items-center justify-center rounded-[3px] border border-ui-controls-border bg-ui-controls text-white transition-colors",
+        hasLabel ? "px-3" : "w-[34px] p-0",
         isActive
-          ? "border-white/20 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
-          : "bg-[#5F5F68]/60 hover:bg-[#5F5F68]/90",
-        className
+          ? "border-white/30 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
+          : "hover:bg-ui-controls hover:bg-[linear-gradient(rgba(255,255,255,0.07),rgba(255,255,255,0.07))]",
+        className,
       )}
       variant="secondary"
       onClick={onClick}
@@ -46,7 +47,7 @@ export const ToggleButton = ({
           />
         )}
         {label && (
-          <span className="text-sm font-medium text-white/90">{label}</span>
+          <span className="whitespace-nowrap text-white/90">{label}</span>
         )}
       </span>
     </Button>
diff --git a/frontend/libs/components/button/src/lib/button.tsx b/frontend/libs/components/button/src/lib/button.tsx
index d7bf2ffe39..5a090b688b 100644
--- a/frontend/libs/components/button/src/lib/button.tsx
+++ b/frontend/libs/components/button/src/lib/button.tsx
@@ -4,6 +4,9 @@ import { DynamicIcon } from "@storyteller/icons";
 import { twMerge } from "tailwind-merge";
 import { ButtonHTMLAttributes, AnchorHTMLAttributes } from "react";
 
+export const NEUTRAL_BUTTON_HOVER_CLASSES =
+  "hover:bg-white/[0.07] hover:border-white/25";
+
 type AnchorProps = Omit<
   AnchorHTMLAttributes<HTMLAnchorElement>,
   keyof ButtonHTMLAttributes<HTMLButtonElement>
@@ -39,20 +42,22 @@ export const Button = ({
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
-        return "bg-ui-controls text-base-fg border border-ui-controls-border hover:bg-ui-controls/80 focus-visible:outline-secondary";
+        // Resting bg-white/5 tint (matching the home grid cards) so the
+        // button reads as a surface, not a bare outline on the page bg.
+        return "bg-white/5 text-base-fg border border-ui-controls-border";
       }
       case "action": {
-        return "bg-ui-controls text-base-fg border border-ui-controls-border hover:bg-ui-controls/80 focus-visible:outline-action";
+        return "bg-ui-controls text-base-fg border border-ui-controls-border";
       }
       case "destructive": {
-        return "bg-red hover:bg-red/90 text-white focus-visible:outline-red";
+        return "bg-red-500 hover:bg-red-400 text-white";
       }
       case "ghost": {
-        return "bg-transparent text-base-fg border border-ui-controls-border/70 hover:bg-ui-controls/30 focus-visible:outline-primary-600";
+        return "bg-transparent text-base-fg/70 hover:text-base-fg";
       }
       case "primary":
       default: {
-        return "bg-primary hover:bg-primary-400 text-white focus-visible:outline-primary-600";
+        return "bg-white hover:bg-white/90 text-black font-bold";
       }
     }
   }
@@ -62,8 +67,10 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "w-fit text-sm font-medium rounded-lg px-3 py-1.5 border border-transparent shadow-sm focus-visible:outline focus-visible:outline-0 focus-visible:outline-offset-0 transition-all duration-150 flex gap-2 items-center justify-center active:scale-95 transform",
+    "w-fit rounded-[3px] font-mono text-xs font-semibold uppercase tracking-[0.12em] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150 flex gap-2 items-center justify-center",
     getVariantClassNames(propsVariant),
+    (propsVariant === "secondary" || propsVariant === "action" || propsVariant === "ghost") &&
+      NEUTRAL_BUTTON_HOVER_CLASSES,
     propsClassName,
     disabledClass,
   );
diff --git a/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx b/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx
index 191df9d316..1750d9c78b 100644
--- a/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx
+++ b/frontend/libs/components/camera-settings-modal/src/lib/camera-settings-modal.tsx
@@ -115,25 +115,27 @@ export const CameraSettingsModal = ({
       showClose={false}
     >
       <div className="grid h-full grid-cols-12 gap-3">
-        <div className="relative col-span-4 p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:dark:bg-white/10">
+        <div className="relative col-span-4 p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-white/15">
           <div className="flex items-center justify-between gap-2.5 py-0.5">
-            <h2 className="text-[18px] font-semibold opacity-80">Camera</h2>
+            <h2 className="hud-label text-base-fg/60">Camera</h2>
             <Tooltip content="Add camera" position="top" delay={200}>
               <button
-                className="h-6 w-6 rounded-full text-white/70 transition-colors hover:text-white/100"
+                className="flex h-6 w-6 items-center justify-center rounded-[3px] text-white/70 transition-colors hover:bg-white/10 hover:text-white"
                 onClick={onAddCamera}
               >
                 <PlusIcon  className="text-xl" />
               </button>
             </Tooltip>
           </div>
-          <hr className="my-2 w-full border-white/10" />
+          <hr className="my-2 w-full border-white/15" />
           <div className="space-y-1">
             {cameras.map((camera) => (
               <button
                 key={camera.id}
-                className={`h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
-                  camera.id === selectedCameraId ? "bg-[#63636B]/40" : ""
+                className={`h-9 w-full rounded-[3px] border-l-2 p-2 text-left transition-colors duration-100 ${
+                  camera.id === selectedCameraId
+                    ? "border-white bg-white/10"
+                    : "border-transparent hover:bg-white/5"
                 }`}
                 onClick={() => handleCameraSelect(camera)}
               >
@@ -151,7 +153,7 @@ export const CameraSettingsModal = ({
           <div className="flex h-full flex-col">
             <div>
               <div className="flex items-center justify-between gap-2.5 py-0.5 opacity-100">
-                <h2 className="text-[18px] font-semibold">
+                <h2 className="font-display text-[18px] font-semibold">
                   {selectedCamera?.label || "Camera"}
                 </h2>
                 <Tooltip
@@ -164,10 +166,10 @@ export const CameraSettingsModal = ({
                   delay={200}
                 >
                   <button
-                    className={`h-6 w-6 rounded-lg transition-colors ${
+                    className={`flex h-6 w-6 items-center justify-center rounded-[3px] transition-colors ${
                       selectedCamera?.id === "main"
                         ? "cursor-not-allowed text-white/30"
-                        : "text-white/60 hover:text-white/100"
+                        : "text-white/60 hover:bg-white/10 hover:text-white"
                     }`}
                     onClick={() =>
                       selectedCamera &&
@@ -180,10 +182,10 @@ export const CameraSettingsModal = ({
                   </button>
                 </Tooltip>
               </div>
-              <hr className="my-2 w-full border-white/10" />
+              <hr className="my-2 w-full border-white/15" />
               <div className="space-y-4">
                 <div className="space-y-1">
-                  <Label htmlFor="camera-name" className="text-sm opacity-70">
+                  <Label htmlFor="camera-name">
                     Name
                   </Label>
                   <Input
@@ -199,7 +201,7 @@ export const CameraSettingsModal = ({
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="focal-length" className="text-sm opacity-70">
+                  <Label htmlFor="focal-length">
                     Focal Length
                   </Label>
                   <div
@@ -220,7 +222,7 @@ export const CameraSettingsModal = ({
                       showIncrement={true}
                       className="w-full"
                     />
-                    <span className="min-w-[60px] text-sm">
+                    <span className="min-w-[60px] font-mono text-sm tabular-nums">
                       {selectedCamera?.focalLength || 35}mm
                     </span>
                   </div>
diff --git a/frontend/libs/components/checkbox/src/lib/checkbox.tsx b/frontend/libs/components/checkbox/src/lib/checkbox.tsx
index c44979c00c..fa9413b11d 100644
--- a/frontend/libs/components/checkbox/src/lib/checkbox.tsx
+++ b/frontend/libs/components/checkbox/src/lib/checkbox.tsx
@@ -97,12 +97,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <span
           aria-hidden
           className={twMerge(
-            "relative inline-block shrink-0 rounded-[4px] border transition-colors",
+            "relative inline-block shrink-0 rounded-[3px] border transition-colors",
             boxDims,
             isChecked
-              ? "border-primary bg-primary text-white"
-              : "border-ui-controls-border bg-ui-controls hover:border-primary/60",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40",
+              ? "border-white bg-white text-black"
+              : "border-ui-controls-border bg-transparent hover:border-white/60",
+            "peer-focus-visible:ring-1 peer-focus-visible:ring-white/60",
             checkboxClassName,
           )}
         >
diff --git a/frontend/libs/components/close-button/src/lib/close-button.tsx b/frontend/libs/components/close-button/src/lib/close-button.tsx
index b9240eecf4..8845850177 100644
--- a/frontend/libs/components/close-button/src/lib/close-button.tsx
+++ b/frontend/libs/components/close-button/src/lib/close-button.tsx
@@ -22,9 +22,9 @@ export const CloseButton = ({
     <button
       onClick={onClick}
       className={twMerge(
-        "flex items-center justify-center rounded-full bg-black/40 text-white/60 transition-all hover:bg-black/70 hover:text-white",
+        "flex items-center justify-center rounded-[3px] bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
         sizeClasses[size],
-        className
+        className,
       )}
     >
       <XIcon />
diff --git a/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx b/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
index 69a30188ba..887f7f94bf 100644
--- a/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
+++ b/frontend/libs/components/file-uploader/src/lib/drag-and-drop-zone.tsx
@@ -13,14 +13,14 @@ export const DragAndDropZone = ({
 }) => {
   if (files.length === 0) {
     return (
-      <div className="flex cursor-pointer items-center gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
-        <FileUpIcon  className="text-4xl" />
+      <div className="flex cursor-pointer items-center gap-3.5 rounded-none border border-dashed border-white/20 bg-white/[0.02] p-3 transition-colors hover:border-white/40 hover:bg-white/[0.05]">
+        <FileUpIcon className="text-4xl text-white/60" />
         <div className="flex flex-col gap-0">
           <p className="font-medium">
             <u>Upload a file</u> or drop it here
           </p>
 
-          <p className="flex items-center gap-2 text-sm font-normal opacity-50">
+          <p className="flex items-center gap-2 font-mono text-[11px] font-normal uppercase tracking-[0.12em] opacity-50">
             {fileTypes.join(", ").toString()} supported
           </p>
         </div>
@@ -37,7 +37,7 @@ export const DragAndDropZone = ({
         : `${Math.floor(file.size / 1024)} KB`;
 
     return (
-      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
+      <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-none border border-dashed border-white/20 bg-white/[0.02] p-3 transition-colors hover:border-white/40 hover:bg-white/[0.05]">
         <DynamicIcon icon={fileIcon} className="text-4xl" />
         <div className="flex grow flex-col gap-0">
           <p className="font-medium">
@@ -55,7 +55,7 @@ export const DragAndDropZone = ({
   }
 
   return (
-    <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-lg border border-dashed border-[#363636] bg-brand-secondary p-3">
+    <div className="flex cursor-pointer items-center justify-between gap-3.5 rounded-none border border-dashed border-white/20 bg-white/[0.02] p-3 transition-colors hover:border-white/40 hover:bg-white/[0.05]">
       <DynamicIcon icon={fileIcon} className="text-4xl" />
       <div className="flex grow flex-col gap-0">
         <p className="font-medium">{files.length} files selected</p>
diff --git a/frontend/libs/components/gallery-modal/src/lib/DragGhost.tsx b/frontend/libs/components/gallery-modal/src/lib/DragGhost.tsx
index 40772be630..9961352207 100644
--- a/frontend/libs/components/gallery-modal/src/lib/DragGhost.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/DragGhost.tsx
@@ -133,7 +133,7 @@ export function DragGhost({
         zIndex: 10000,
         pointerEvents: "none",
       }}
-      className="flex cursor-grabbing flex-col overflow-hidden rounded-xl shadow-[0_18px_40px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/20"
+      className="flex cursor-grabbing flex-col overflow-hidden shadow-[0_18px_40px_-12px_rgba(0,0,0,0.7)] ring-1 ring-white/20"
     >
       <img
         src={state.thumbnail}
@@ -143,7 +143,7 @@ export function DragGhost({
       />
       {state.indicator && (
         <div
-          className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full shadow-md ring-1 ring-black/30 ${
+          className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center shadow-md ring-1 ring-black/30 ${
             state.indicator === "ok" ? "bg-emerald-500" : "bg-red-500"
           }`}
         >
diff --git a/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx b/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
index 133269d6ad..859d1cb43c 100644
--- a/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/FolderColorRow.tsx
@@ -25,7 +25,7 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
         onClick={() => onSetColor(c)}
         style={{ backgroundColor: c }}
         className={twMerge(
-          "h-5 w-5 rounded-full border border-black/20 transition-transform hover:scale-110",
+          "h-5 w-5 rounded-[3px] border border-black/20 transition-transform hover:scale-110",
           colorCode === c &&
             "ring-2 ring-white ring-offset-1 ring-offset-ui-panel",
         )}
@@ -37,16 +37,16 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
       aria-label="Clear color"
       onClick={() => onSetColor(null)}
       className={twMerge(
-        "flex h-5 w-5 items-center justify-center rounded-full border border-ui-panel-border text-base-fg/50 hover:text-base-fg",
+        "flex h-5 w-5 items-center justify-center rounded-[3px] border border-ui-panel-border text-base-fg/50 hover:text-base-fg",
         !colorCode && "ring-2 ring-white ring-offset-1 ring-offset-ui-panel",
       )}
     >
-      <XIcon  className="text-[10px]" />
+      <XIcon className="text-[10px]" />
     </button>
     {/* Custom hex (native picker) */}
     <label
       title="Custom color"
-      className="relative h-5 w-5 cursor-pointer overflow-hidden rounded-full border border-ui-panel-border"
+      className="relative h-5 w-5 cursor-pointer overflow-hidden rounded-[3px] border border-ui-panel-border"
       style={{
         background:
           "conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red)",
@@ -55,7 +55,9 @@ export const FolderColorRow: React.FC<FolderColorRowProps> = ({
       <input
         type="color"
         value={
-          colorCode && /^#[0-9a-fA-F]{6}$/.test(colorCode) ? colorCode : "#888888"
+          colorCode && /^#[0-9a-fA-F]{6}$/.test(colorCode)
+            ? colorCode
+            : "#888888"
         }
         onChange={(e) => onSetColor(e.target.value)}
         className="absolute -inset-1 h-[150%] w-[150%] cursor-pointer opacity-0"
diff --git a/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx b/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
index 3969337a69..8e232b85ae 100644
--- a/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/FolderNameDialog.tsx
@@ -48,7 +48,7 @@ export const FolderNameDialog: React.FC<FolderNameDialogProps> = ({
       onClose={onClose}
       title={title}
       accessibleTitle={title}
-      className="w-80 max-w-[90vw]"
+      className="w-80 max-w-[90vw] [&_h2]:font-sans [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:tracking-normal [&_h2]:[font-stretch:normal]"
     >
       <div className="space-y-3">
         {subtitle && (
@@ -57,26 +57,27 @@ export const FolderNameDialog: React.FC<FolderNameDialogProps> = ({
         <input
           ref={inputRef}
           type="text"
+          aria-label="Folder name"
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter") submit();
           }}
-          className="w-full rounded-md border border-ui-panel-border bg-ui-controls/40 px-3 py-1.5 text-sm text-base-fg outline-none focus:ring-1 focus:ring-primary/50"
+          className="w-full rounded-[3px] border border-ui-panel-border bg-ui-controls/40 px-3 py-1.5 text-sm text-base-fg outline-none focus:ring-1 focus:ring-primary/50"
           autoFocus
         />
         <div className="flex justify-end gap-2">
           <Button
             variant="action"
             onClick={onClose}
-            className="px-3 py-1 text-sm"
+            className="px-3 py-1.5 text-[11px]"
           >
             Cancel
           </Button>
           <Button
             onClick={submit}
             disabled={!value.trim()}
-            className="px-3 py-1 text-sm"
+            className="px-3 py-1.5 text-[11px]"
           >
             {confirmLabel}
           </Button>
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
index 057d4e424c..a1b8f82f45 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
@@ -1,9 +1,4 @@
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { CheckIcon, EllipsisIcon, MusicIcon, UploadIcon } from "lucide-react";
 import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
@@ -248,7 +243,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       type="button"
       tabIndex={-1}
       className={twMerge(
-        "w-full group relative overflow-visible rounded-md border-[3px] transition-colors outline-none focus:outline-none focus-visible:outline-none active:outline-none aspect-square",
+        "w-full group relative overflow-visible border-[3px] transition-colors outline-none focus:outline-none focus-visible:outline-none active:outline-none aspect-square",
         selected || bulkSelected
           ? "border-primary"
           : disabled
@@ -272,10 +267,8 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
         {isAudio ? (
           <div className="flex h-full w-full flex-col bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02]">
             <div className="flex min-h-0 flex-1 items-center justify-center">
-              <div className="flex h-11 w-11 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
-                <MusicIcon
-                  
-                  className="text-lg text-white/70" />
+              <div className="flex h-11 w-11 items-center justify-center bg-white/10 ring-1 ring-white/15">
+                <MusicIcon className="text-lg text-white/70" />
               </div>
             </div>
             <p className="line-clamp-2 shrink-0 px-2.5 pb-2.5 text-left text-xs leading-snug text-white/75">
@@ -316,12 +309,12 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
           </>
         )}
         {selected && (
-          <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary">
-            <CheckIcon  className="text-sm" />
+          <div className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-[3px] bg-primary">
+            <CheckIcon className="text-sm" />
           </div>
         )}
         {disabled && (
-          <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-white/80">
+          <div className="absolute left-2 top-2 bg-black/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-white/80">
             Added
           </div>
         )}
@@ -356,10 +349,8 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             position="bottom"
             align="end"
             mode="default"
-            triggerIcon={
-              <EllipsisIcon  className="text-base-fg" />
-            }
-            buttonClassName="h-7 w-7 p-0 rounded-full bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg border border-ui-controls-border"
+            triggerIcon={<EllipsisIcon className="text-base-fg" />}
+            buttonClassName="h-7 w-7 p-0 bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg border border-ui-controls-border"
             panelClassName="w-max min-w-44 p-1"
             closeOnUnhover
           >
@@ -394,7 +385,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             />
             <div
               ref={ctxPanelRef}
-              className="fixed z-[9999] w-max min-w-44 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+              className="fixed z-[9999] w-max min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
               style={{ left: ctxMenu.x, top: ctxMenu.y }}
             >
               <GalleryItemMenuItems
@@ -418,7 +409,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       {mode !== "select" && onBulkSelectToggle && (
         <div
           className={twMerge(
-            "absolute left-2 top-2 z-[2] flex h-5 w-5 items-center justify-center rounded border-2 cursor-pointer transition-all duration-100",
+            "absolute left-2 top-2 z-[2] flex h-5 w-5 items-center justify-center rounded-[3px] border-2 cursor-pointer transition-all duration-100",
             bulkSelected
               ? "bg-primary border-primary"
               : "border-white/60 bg-black/40 hover:border-white",
@@ -432,16 +423,12 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             onBulkSelectToggle?.();
           }}
         >
-          {bulkSelected && (
-            <CheckIcon
-              
-              className="text-[10px] text-white" />
-          )}
+          {bulkSelected && <CheckIcon className="text-[10px] text-white" />}
         </div>
       )}
       {/* Media class badge on hover — bottom-left */}
       {!disableTooltipAndBadge && item.mediaClass && (
-        <div className="pointer-events-none absolute left-2 bottom-2 z-[1] rounded-full bg-black/50 backdrop-blur-lg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+        <div className="pointer-events-none absolute left-2 bottom-2 z-[1] bg-black/50 backdrop-blur-lg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white opacity-0 group-hover:opacity-100 transition-opacity duration-150">
           {item.mediaClass === "dimensional" ||
           item.mediaClass === "mesh" ||
           item.mediaClass === "splat"
@@ -451,8 +438,8 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       )}
       {/* Upload badge — bottom-right (always visible, even in select mode) */}
       {item.isUpload && (
-        <div className="pointer-events-none absolute right-2 bottom-2 z-[1] flex h-5 w-5 items-center justify-center rounded-full bg-black/50 backdrop-blur-lg text-white">
-          <UploadIcon  className="text-[10px]" />
+        <div className="pointer-events-none absolute right-2 bottom-2 z-[1] flex h-5 w-5 items-center justify-center bg-black/50 backdrop-blur-lg text-white">
+          <UploadIcon className="text-[10px]" />
         </div>
       )}
       {/* Conditionally wrap with Tooltip — hidden when selecting or in bulk mode */}
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
index 5471064598..cbc55eca1b 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryFolderChip.tsx
@@ -67,7 +67,7 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
       }}
       style={colorCode ? { borderColor: colorCode } : undefined}
       className={twMerge(
-        "group/chip relative w-full aspect-square overflow-hidden rounded-md border-2 border-ui-controls/40 bg-ui-controls/20 transition-[transform,border-color,background-color,box-shadow] duration-200 ease-out cursor-pointer hover:border-primary/60",
+        "group/chip relative w-full aspect-square overflow-hidden rounded-[3px] border-2 border-ui-controls/40 bg-ui-controls/20 transition-[transform,border-color,background-color,box-shadow] duration-200 ease-out cursor-pointer hover:border-primary/60",
         // A dragged item hovering the folder makes it lift and glow — clear,
         // tactile "drop here" feedback rather than a flat color swap.
         "[&.folder-drag-over]:scale-[1.04] [&.folder-drag-over]:border-primary [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:ring-2 [&.folder-drag-over]:ring-primary/40",
@@ -168,7 +168,7 @@ export const GalleryFolderChip: React.FC<GalleryFolderChipProps> = ({
             e.stopPropagation();
             openMenuAt(e.currentTarget as HTMLElement);
           }}
-          className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-full bg-black/40 text-white opacity-0 transition-opacity hover:bg-black/60 group-hover/chip:opacity-100 [@media(pointer:coarse)]:opacity-100"
+          className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-[3px] bg-black/40 text-white opacity-0 transition-opacity hover:bg-black/60 group-hover/chip:opacity-100 [@media(pointer:coarse)]:opacity-100"
         >
           <EllipsisIcon  className="text-sm" />
         </span>
diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
index 8d6ef183c6..8fe9332f18 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx
@@ -1,5 +1,14 @@
 import React, { useState } from "react";
-import { ChevronRightIcon, EyeIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, PencilIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import {
+  ChevronRightIcon,
+  EyeIcon,
+  FolderIcon,
+  FolderMinusIcon,
+  FolderPlusIcon,
+  PencilIcon,
+  PlusIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { twMerge } from "tailwind-merge";
 import { GalleryItem } from "./gallery-modal";
 import { GalleryFolder } from "./GalleryDraggableItem";
@@ -28,7 +37,7 @@ export interface GalleryItemMenuItemsProps {
 }
 
 const ROW =
-  "flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap";
+  "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap";
 
 /**
  * The gallery-tile menu body (Open / Edit / Add to Folder ▸ / Remove from
@@ -60,7 +69,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             onOpen();
           }}
         >
-          <EyeIcon  className="text-base-fg w-4" />
+          <EyeIcon className="text-base-fg w-4" />
           <span>
             {item.mediaClass === "video"
               ? "View video"
@@ -85,7 +94,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             close();
           }}
         >
-          <PencilIcon  className="text-base-fg w-4" />
+          <PencilIcon className="text-base-fg w-4" />
           <span>Edit image</span>
         </button>
       )}
@@ -103,28 +112,28 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
         >
           <button
             type="button"
-            className="flex w-full items-center justify-between gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap"
+            className="flex w-full items-center justify-between gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-base-fg text-sm whitespace-nowrap"
             onClick={(e) => {
               e.stopPropagation();
               setFolderSubmenuOpen((v) => !v);
             }}
           >
             <div className="flex items-center gap-2">
-              <FolderPlusIcon  className="text-base-fg w-4" />
+              <FolderPlusIcon className="text-base-fg w-4" />
               <span>Add to Folder</span>
             </div>
             <ChevronRightIcon
-              
               className={twMerge(
                 "text-[10px] text-base-fg/50 transition-transform",
                 COARSE_POINTER && folderSubmenuOpen && "rotate-90",
-              )} />
+              )}
+            />
           </button>
           {folderSubmenuOpen &&
             (COARSE_POINTER ? (
               // Touch: expand inline (accordion) — a fly-out would overflow
               // the screen edge on narrow viewports.
-              <div className="mb-1 max-h-48 overflow-y-auto rounded-md bg-ui-controls/20 p-1">
+              <div className="mb-1 max-h-48 overflow-y-auto bg-ui-controls/20 p-1">
                 <FolderList
                   item={item}
                   folders={folders}
@@ -138,7 +147,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
               </div>
             ) : (
               <div className="absolute left-full top-0 -ml-1 pl-2 z-50">
-                <div className="max-h-64 overflow-y-auto w-max min-w-36 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl">
+                <div className="max-h-64 overflow-y-auto w-max min-w-36 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl">
                   <FolderList
                     item={item}
                     folders={folders}
@@ -165,7 +174,7 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
             close();
           }}
         >
-          <FolderMinusIcon  className="text-base-fg w-4" />
+          <FolderMinusIcon className="text-base-fg w-4" />
           <span>Remove from folder</span>
         </button>
       )}
@@ -173,14 +182,14 @@ export const GalleryItemMenuItems: React.FC<GalleryItemMenuItemsProps> = ({
       {onDelete && (
         <button
           type="button"
-          className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm whitespace-nowrap"
+          className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm whitespace-nowrap"
           onClick={(e) => {
             e.stopPropagation();
             close();
             onDelete();
           }}
         >
-          <Trash2Icon  className="text-red w-4" />
+          <Trash2Icon className="text-red w-4" />
           <span className="text-red">Delete</span>
         </button>
       )}
@@ -209,7 +218,7 @@ const FolderList = ({
       <button
         key={folder.id}
         type="button"
-        className="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-ui-controls/60 text-base-fg text-sm"
+        className="flex w-full items-center gap-2 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg text-sm"
         onClick={(e) => {
           e.stopPropagation();
           onAddToFolder?.([item.id], folder.id);
@@ -217,9 +226,9 @@ const FolderList = ({
         }}
       >
         <FolderIcon
-          
           className={folder.colorCode ? "text-xs" : "text-primary text-xs"}
-          style={folder.colorCode ? { color: folder.colorCode } : undefined} />
+          style={folder.colorCode ? { color: folder.colorCode } : undefined}
+        />
         <span className="truncate">{folder.name}</span>
       </button>
     ))}
@@ -228,14 +237,14 @@ const FolderList = ({
     )}
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-ui-controls/60 text-base-fg/70 text-sm whitespace-nowrap"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/60 text-base-fg/70 text-sm whitespace-nowrap"
       onClick={(e) => {
         e.stopPropagation();
         closeAll();
         onCreateFolderFromMenu?.();
       }}
     >
-      <PlusIcon  className="text-xs w-4" />
+      <PlusIcon className="text-xs w-4" />
       <span>New Folder</span>
     </button>
   </>
diff --git a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
index 4158d9a2bd..b188f8cf78 100644
--- a/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx
@@ -135,7 +135,7 @@ const SkeletonGrid = ({ columns }: { columns: number }) => {
     <div className="space-y-6 p-4 animate-in fade-in duration-200">
       {/* Fake date heading */}
       <div>
-        <div className="h-4 w-24 rounded bg-white/[0.06] mb-3" />
+        <div className="h-4 w-24 bg-white/[0.06] mb-3" />
         <div
           className={twMerge("grid", gapClass)}
           style={{
@@ -143,7 +143,7 @@ const SkeletonGrid = ({ columns }: { columns: number }) => {
           }}
         >
           {Array.from({ length: SKELETON_COUNT }).map((_, i) => (
-            <div key={i} className="aspect-square rounded-md overflow-hidden">
+            <div key={i} className="aspect-square overflow-hidden">
               <div
                 className="h-full w-full bg-white/[0.06]"
                 style={{
@@ -477,7 +477,7 @@ const BulkThumb = ({
   const showImage = !!thumbnail && !failed;
 
   return (
-    <div className="h-8 w-8 rounded overflow-hidden border-2 border-ui-panel bg-black/30 flex-shrink-0">
+    <div className="h-8 w-8 overflow-hidden border-2 border-ui-panel bg-black/30 flex-shrink-0">
       {showImage ? (
         <img
           src={thumbnail}
@@ -523,14 +523,14 @@ const FolderContextMenuItems = ({
 }) => (
   <div
     className={twMerge(
-      "min-w-44 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl z-[59]",
+      "min-w-44 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl z-[59]",
       className,
     )}
     style={style}
   >
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onToggleStar(folderId, !hasStar)}
     >
       <StarIcon
@@ -548,7 +548,7 @@ const FolderContextMenuItems = ({
     <div className="mx-1.5 my-1 border-t border-ui-panel-border" />
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onNewSubfolder(folderId)}
     >
       <FolderPlusIcon className="w-4" />
@@ -556,7 +556,7 @@ const FolderContextMenuItems = ({
     </button>
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-base-fg"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-base-fg"
       onClick={() => onRename(folderId)}
     >
       <PencilIcon className="w-4" />
@@ -564,7 +564,7 @@ const FolderContextMenuItems = ({
     </button>
     <button
       type="button"
-      className="flex w-full items-center gap-2 px-2 py-2 rounded-md hover:bg-ui-controls/60 text-sm text-red"
+      className="flex w-full items-center gap-2 rounded-[3px] px-2 py-2 hover:bg-ui-controls/60 text-sm text-red"
       onClick={() => onDelete(folderId)}
     >
       <Trash2Icon className="w-4" />
@@ -2581,7 +2581,7 @@ export const GalleryModal = React.memo(
             }
           }}
           className={twMerge(
-            "h-[780px] max-h-[90vh] w-full max-w-5xl rounded-2xl",
+            "h-[780px] max-h-[90vh] w-full max-w-5xl",
             mode === "view" &&
               "h-[780px] min-h-[640px] min-w-[66rem] w-[66rem] max-w-none",
           )}
@@ -2597,18 +2597,18 @@ export const GalleryModal = React.memo(
             </Modal.DragHandle>
           )}
           <div className="relative flex h-full flex-col">
-            <div className="border-b border-ui-panel-border p-4 py-3 bg-ui-panel rounded-t-xl">
+            <div className="border-b border-ui-panel-border p-4 py-3 bg-ui-panel">
               <div className="flex flex-wrap justify-between items-center gap-y-2">
                 <div className="flex items-center gap-3 flex-wrap gap-y-1">
                   {(mode === "view" || mode === "select") && (
-                    <div className="flex items-center gap-0.5 rounded-lg bg-ui-controls/40 p-0.5 relative z-[51]">
+                    <div className="flex items-center gap-0.5 rounded-[3px] bg-ui-controls/40 p-0.5 relative z-[51]">
                       {(["unsorted", "folders"] as const).map((t) => (
                         <button
                           key={t}
                           type="button"
                           onClick={() => switchGalleryTab(t)}
                           className={twMerge(
-                            "rounded-md px-3 py-1 text-sm font-medium transition-colors",
+                            "rounded-[3px] px-3 py-1 text-sm font-medium transition-colors",
                             galleryTab === t
                               ? "bg-ui-controls text-base-fg"
                               : "text-base-fg/60 hover:text-base-fg",
@@ -2625,7 +2625,7 @@ export const GalleryModal = React.memo(
                       <button
                         type="button"
                         onClick={() => handleOpenNewFolderModal(null)}
-                        className="flex items-center gap-2 rounded-lg bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-base-fg hover:bg-ui-controls/90 transition-colors relative z-[51]"
+                        className="flex items-center gap-2 rounded-[3px] bg-ui-controls/60 px-3 py-1.5 text-sm font-medium text-base-fg hover:bg-ui-controls/90 transition-colors relative z-[51]"
                       >
                         <FolderPlusIcon className="text-xs" />
                         New folder
@@ -2654,7 +2654,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={handleCloseTagView}
                         aria-label="Close tag view"
-                        className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                        className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                       >
                         <XIcon className="text-sm" />
                       </button>
@@ -2668,7 +2668,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={handleCloseTagView}
                         aria-label="Close tags"
-                        className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                        className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                       >
                         <XIcon className="text-sm" />
                       </button>
@@ -2709,12 +2709,12 @@ export const GalleryModal = React.memo(
                             if (e.key === "Escape") setRenamingFolderId(null);
                           }}
                           onBlur={handleConfirmRename}
-                          className="text-lg font-semibold bg-transparent rounded px-1.5 py-0 text-base-fg outline-none min-w-[6rem] caret-primary"
+                          className="text-lg font-semibold bg-transparent px-1.5 py-0 text-base-fg outline-none min-w-[6rem] caret-primary"
                           autoFocus
                         />
                       ) : (
                         <h2
-                          className="text-lg font-semibold cursor-pointer hover:bg-ui-controls/30 rounded px-1.5 py-0 transition-colors truncate max-w-[20rem]"
+                          className="text-lg font-semibold cursor-pointer rounded-[3px] hover:bg-ui-controls/30 px-1.5 py-0 transition-colors truncate max-w-[20rem]"
                           onClick={() => handleStartRename(activeFolderId!)}
                         >
                           {activeFolder.name}
@@ -2732,7 +2732,7 @@ export const GalleryModal = React.memo(
                         <button
                           type="button"
                           onClick={() => setFolderMenuOpen((v) => !v)}
-                          className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
+                          className="flex h-7 w-7 items-center justify-center rounded-[3px] hover:bg-ui-controls/60 text-base-fg/60 hover:text-base-fg transition-colors"
                         >
                           <EllipsisIcon className="text-sm" />
                         </button>
@@ -2916,7 +2916,7 @@ export const GalleryModal = React.memo(
                             }
                           }}
                           className={twMerge(
-                            "flex items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+                            "flex items-center justify-between gap-2 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                             isActive &&
                               !activeFolderId &&
                               !activeTagToken &&
@@ -2949,7 +2949,7 @@ export const GalleryModal = React.memo(
                         type="button"
                         onClick={() => handleOpenNewFolderModal(null)}
                         aria-label="New folder"
-                        className="flex h-5 w-5 items-center justify-center rounded text-base-fg/50 hover:bg-ui-controls/60 hover:text-base-fg transition-colors"
+                        className="flex h-5 w-5 items-center justify-center rounded-[3px] text-base-fg/50 hover:bg-ui-controls/60 hover:text-base-fg transition-colors"
                       >
                         <PlusIcon className="text-[10px]" />
                       </button>
@@ -2982,7 +2982,7 @@ export const GalleryModal = React.memo(
                               : undefined
                           }
                           className={twMerge(
-                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:text-base-fg",
+                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors [&.folder-drag-over]:bg-primary/20 [&.folder-drag-over]:text-base-fg",
                             activeRootFolderId === folder.id
                               ? "bg-ui-controls/60 text-base-fg font-medium"
                               : "text-base-fg/70 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3025,7 +3025,7 @@ export const GalleryModal = React.memo(
                               handleOpenTagFromSidebar(tag.tag_token)
                             }
                             className={twMerge(
-                              "flex w-full flex-shrink-0 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+                              "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                               activeTagToken === tag.tag_token
                                 ? "bg-ui-controls/60 text-base-fg font-medium"
                                 : "text-base-fg/70 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3042,7 +3042,7 @@ export const GalleryModal = React.memo(
                           type="button"
                           onClick={handleOpenTagBrowser}
                           className={twMerge(
-                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+                            "flex w-full flex-shrink-0 items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-sm transition-colors",
                             tagBrowserOpen && !activeTagToken
                               ? "bg-ui-controls/60 text-base-fg font-medium"
                               : "text-base-fg/50 hover:bg-ui-controls/30 hover:text-base-fg",
@@ -3079,7 +3079,7 @@ export const GalleryModal = React.memo(
                     </div>
                   ) : activeTagItems.length === 0 ? (
                     <div className="flex h-full flex-col items-center justify-center gap-3">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-400/10">
+                      <div className="flex h-16 w-16 items-center justify-center bg-violet-400/10">
                         <TagIcon className="text-violet-400 text-2xl" />
                       </div>
                       <div className="text-base-fg font-semibold">
@@ -3170,7 +3170,7 @@ export const GalleryModal = React.memo(
                   /* ── All-tags word cloud ── */
                   userTags.length === 0 ? (
                     <div className="flex h-full flex-col items-center justify-center gap-3">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-violet-400/10">
+                      <div className="flex h-16 w-16 items-center justify-center bg-violet-400/10">
                         <TagIcon className="text-violet-400 text-2xl" />
                       </div>
                       <div className="text-base-fg font-semibold">
@@ -3191,7 +3191,7 @@ export const GalleryModal = React.memo(
                   /* ── Folders tab, root: folder cards only (above) ── */
                   currentSubfolders.length === 0 ? (
                     <div className="flex h-full flex-col items-center justify-center gap-3">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
+                      <div className="flex h-16 w-16 items-center justify-center bg-primary/10">
                         <FolderIcon className="text-primary text-2xl" />
                       </div>
                       <div className="text-base-fg font-semibold">
@@ -3223,7 +3223,7 @@ export const GalleryModal = React.memo(
                   ) : activeFolderItems.length === 0 ? (
                     currentSubfolders.length > 0 ? null : (
                       <div className="flex h-full flex-col items-center justify-center gap-3">
-                        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
+                        <div className="flex h-16 w-16 items-center justify-center bg-primary/10">
                           <FolderIcon className="text-primary text-2xl" />
                         </div>
                         <div className="text-base-fg font-semibold">
@@ -3341,7 +3341,7 @@ export const GalleryModal = React.memo(
                           </div>
                           {onLoginClick ? (
                             <button
-                              className="rounded-full bg-primary px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                              className="rounded-[3px] bg-primary px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                               onClick={() => onLoginClick()}
                             >
                               Log in
@@ -3523,7 +3523,7 @@ export const GalleryModal = React.memo(
             />
 
             {mode === "view" && bulkSelectionMode && (
-              <div className="flex items-center justify-between border-t border-ui-panel-border bg-ui-background p-3 py-2 rounded-b-xl">
+              <div className="flex items-center justify-between border-t border-ui-panel-border bg-ui-background p-3 py-2">
                 <div className="flex items-center">
                   {/* Thumbnail previews of selected items */}
                   <div className="flex">
@@ -3548,7 +3548,7 @@ export const GalleryModal = React.memo(
                     })}
                   </div>
                   {bulkSelectedItems.length > 4 && (
-                    <div className="h-8 w-8 rounded overflow-hidden border-2 border-ui-panel bg-black/20 flex-shrink-0 flex items-center justify-center">
+                    <div className="h-8 w-8 overflow-hidden border-2 border-ui-panel bg-black/20 flex-shrink-0 flex items-center justify-center">
                       <span className="text-[11px] font-normal text-white/70">
                         +{bulkSelectedItems.length - 4}
                       </span>
@@ -3576,7 +3576,7 @@ export const GalleryModal = React.memo(
                           className="fixed inset-0 z-[59]"
                           onClick={() => setBulkFolderPopoverOpen(false)}
                         />
-                        <div className="absolute bottom-full mb-2 right-0 w-56 rounded-lg border border-ui-panel-border bg-ui-panel p-2 shadow-xl z-[60]">
+                        <div className="absolute bottom-full mb-2 right-0 w-56 rounded-[3px] border border-ui-panel-border bg-ui-panel p-2 shadow-xl z-[60]">
                           {/* Folders */}
                           <div className="text-[11px] font-semibold uppercase tracking-wider text-base-fg/40 px-2 py-1">
                             Folders
@@ -3592,7 +3592,7 @@ export const GalleryModal = React.memo(
                               <button
                                 key={folder.id}
                                 type="button"
-                                className="flex w-full items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-ui-controls/50 text-sm text-base-fg transition-colors"
+                                className="flex w-full items-center gap-2.5 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg transition-colors"
                                 onClick={() => {
                                   const ids = Array.from(bulkSelectedIds);
                                   requestFolderDrop(ids, folder.id);
@@ -3607,7 +3607,7 @@ export const GalleryModal = React.memo(
                           <div className="mx-1.5 my-1 border-t border-ui-panel-border" />
                           <button
                             type="button"
-                            className="flex w-full items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-ui-controls/50 text-sm text-base-fg/70 transition-colors"
+                            className="flex w-full items-center gap-2.5 rounded-[3px] px-2 py-1.5 hover:bg-ui-controls/50 text-sm text-base-fg/70 transition-colors"
                             onClick={() => {
                               const ids = Array.from(bulkSelectedIds);
                               setBulkFolderPopoverOpen(false);
@@ -3633,7 +3633,7 @@ export const GalleryModal = React.memo(
                   )}
                   <button
                     onClick={clearBulkSelection}
-                    className="flex h-8 w-8 items-center justify-center rounded-md bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg transition-colors"
+                    className="flex h-8 w-8 items-center justify-center rounded-[3px] bg-ui-controls/60 hover:bg-ui-controls/90 text-base-fg transition-colors"
                     aria-label="Clear selection"
                   >
                     <XIcon className="text-base" />
@@ -3643,7 +3643,7 @@ export const GalleryModal = React.memo(
             )}
 
             {mode === "select" && (
-              <div className="flex items-center justify-between border-t border-ui-panel-border bg-ui-panel p-4 rounded-b-xl">
+              <div className="flex items-center justify-between border-t border-ui-panel-border bg-ui-panel p-4">
                 <div className="flex items-center gap-3">
                   <div className="text-sm font-semibold text-base-fg/80">
                     {selectedItemIds.length}/{maxSelections} selected
@@ -3756,7 +3756,7 @@ export const GalleryModal = React.memo(
           createPortal(
             <div
               ref={marqueeRef}
-              className="pointer-events-none fixed z-[9999] rounded-sm border border-primary/60 bg-primary/10"
+              className="pointer-events-none fixed z-[9999] border border-primary/60 bg-primary/10"
               style={{ display: "none" }}
             />,
             document.body,
diff --git a/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx b/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
index 30c0f553e7..e59beba7f5 100644
--- a/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
+++ b/frontend/libs/components/generation-list/src/lib/CopyPromptButton.tsx
@@ -37,7 +37,7 @@ export function CopyPromptButton({
         type="button"
         onClick={handleCopy}
         aria-label="Copy prompt"
-        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-white/40 transition-colors hover:bg-white/10 hover:text-white"
+        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[3px] text-white/40 transition-colors hover:bg-white/10 hover:text-white"
       >
         <DynamicIcon icon={copied ? CheckIcon : CopyIcon} className="text-sm" />
       </button>
diff --git a/frontend/libs/components/generation-list/src/lib/FailedCard.tsx b/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
index d9d3e98b6a..a3cd76eb89 100644
--- a/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/FailedCard.tsx
@@ -32,7 +32,7 @@ export const FailedCard = memo(function FailedCard({
   const iconPath = modelId ? getCreatorIconPathForModelId(modelId) : null;
 
   return (
-    <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-red-500/10">
+    <div className="relative aspect-square w-full overflow-hidden rounded-[3px] bg-red-500/10">
       {refImageUrl && (
         <img
           src={refImageUrl}
@@ -42,9 +42,7 @@ export const FailedCard = memo(function FailedCard({
         />
       )}
       <div className="relative flex h-full flex-col items-center justify-center gap-2 px-4 sm:px-6">
-        <CircleAlertIcon
-          
-          className="text-2xl text-red-400" />
+        <CircleAlertIcon className="text-2xl text-red-400" />
         <span className="text-center text-xs font-medium text-red-400">
           {failureReason || "Generation failed"}
         </span>
@@ -58,7 +56,7 @@ export const FailedCard = memo(function FailedCard({
           <button
             type="button"
             onClick={() => onDismiss(id)}
-            className="flex items-center gap-1.5 rounded-md bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
+            className="flex items-center gap-1.5 rounded-[3px] bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
           >
             <XIcon />
             Dismiss
diff --git a/frontend/libs/components/generation-list/src/lib/FailedRow.tsx b/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
index 28afb25037..4435d2ee28 100644
--- a/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/FailedRow.tsx
@@ -35,9 +35,9 @@ export const FailedRow = memo(function FailedRow({
   const iconPath = modelId ? getCreatorIconPathForModelId(modelId) : null;
 
   return (
-    <div className="flex items-center gap-3 rounded-lg px-2.5 py-2">
+    <div className="flex items-center gap-3 px-2.5 py-2">
       {/* Error thumbnail — ref image (if any) faded behind the warning icon */}
-      <div className="relative flex size-[100px] shrink-0 items-center justify-center overflow-hidden rounded-md bg-red-500/10 leading-none">
+      <div className="relative flex size-[100px] shrink-0 items-center justify-center overflow-hidden bg-red-500/10 leading-none">
         {refImageUrl && (
           <img
             src={refImageUrl}
@@ -46,9 +46,7 @@ export const FailedRow = memo(function FailedRow({
             className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-10"
           />
         )}
-        <CircleAlertIcon
-          
-          className="relative text-2xl text-red-400" />
+        <CircleAlertIcon className="relative text-2xl text-red-400" />
       </div>
 
       {/* Reason + prompt + model */}
@@ -87,7 +85,7 @@ export const FailedRow = memo(function FailedRow({
       <button
         type="button"
         onClick={() => onDismiss(id)}
-        className="flex shrink-0 items-center gap-1.5 rounded-md bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
+        className="flex shrink-0 items-center gap-1.5 rounded-[3px] bg-white/5 px-3 py-1.5 text-xs text-white/50 transition-colors hover:bg-white/10 hover:text-white/70"
       >
         <XIcon />
         Dismiss
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx b/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
index f36a987cd3..01306910be 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryAutoplayToggle.tsx
@@ -24,7 +24,7 @@ export function GalleryAutoplayToggle() {
     <div
       role="group"
       aria-label="Video preview playback"
-      className="flex items-center gap-0.5 rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5"
+      className="flex items-center gap-0.5 rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5"
     >
       {OPTIONS.map(({ autoplay, icon, label }) => {
         const active = autoplayVideos === autoplay;
@@ -35,7 +35,7 @@ export function GalleryAutoplayToggle() {
               aria-label={label}
               aria-pressed={active}
               onClick={() => setAutoplayVideos(autoplay)}
-              className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+              className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
                 active
                   ? "bg-white/10 text-white"
                   : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx b/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
index 0929c1453e..f466f3ff4b 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryCard.tsx
@@ -1,5 +1,12 @@
 import { memo, useCallback, useState, type ReactNode } from "react";
-import { BoxIcon, CheckIcon, EyeIcon, ImageIcon, MusicIcon, VideoIcon } from "lucide-react";
+import {
+  BoxIcon,
+  CheckIcon,
+  EyeIcon,
+  ImageIcon,
+  MusicIcon,
+  VideoIcon,
+} from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import {
   getCreatorIconPathForModelId,
@@ -165,7 +172,7 @@ export const GalleryCard = memo(function GalleryCard({
     <div
       role="button"
       tabIndex={0}
-      className={`group relative block w-full rounded-lg bg-ui-controls/40 leading-none transition-shadow hover:ring-2 hover:ring-primary-400/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 cursor-pointer ${isSquare ? "aspect-square" : ""} ${selected ? "ring-2 ring-primary-400" : lastViewed ? "ring-2 ring-primary-400/50" : ""}`}
+      className={`group relative block w-full rounded-[3px] bg-ui-controls/40 leading-none transition-shadow hover:ring-2 hover:ring-primary-400/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 cursor-pointer ${isSquare ? "aspect-square" : ""} ${selected ? "ring-2 ring-primary-400" : lastViewed ? "ring-2 ring-primary-400/50" : ""}`}
       style={outerStyle}
       onClick={handleCardClick}
       onKeyDown={handleCardKeyDown}
@@ -187,9 +194,7 @@ export const GalleryCard = memo(function GalleryCard({
             </p>
             <div className="flex min-h-0 flex-1 items-center justify-center">
               <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
-                <MusicIcon
-                  
-                  className="text-xl text-white/70" />
+                <MusicIcon className="text-xl text-white/70" />
               </div>
             </div>
             {item.fullImage && (
@@ -216,13 +221,13 @@ export const GalleryCard = memo(function GalleryCard({
       {/* Selection checkbox chip (select mode only) */}
       {selectMode && item.fullImage && (
         <div
-          className={`pointer-events-none absolute left-2 top-2 z-10 flex h-5 w-5 items-center justify-center rounded-md border transition-colors ${
+          className={`pointer-events-none absolute left-2 top-2 z-10 flex h-5 w-5 items-center justify-center rounded-[3px] border transition-colors ${
             selected
               ? "border-primary-400 bg-primary-400 text-white"
               : "border-white/60 bg-black/40 text-transparent"
           }`}
         >
-          <CheckIcon  className="text-[10px]" />
+          <CheckIcon className="text-[10px]" />
         </div>
       )}
 
@@ -230,21 +235,21 @@ export const GalleryCard = memo(function GalleryCard({
           in the lightbox). Top-right so it never collides with the selection
           checkbox chip at top-left. */}
       {lastViewed && (
-        <div className="pointer-events-none absolute right-2 top-2 z-10 flex items-center gap-1 rounded-full bg-black/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-white/80">
+        <div className="pointer-events-none absolute right-2 top-2 z-10 flex items-center gap-1 rounded-[3px] bg-black/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-white/80">
           <EyeIcon />
           Last viewed
         </div>
       )}
 
       {/* Hover overlay with media type + model badges and quick actions */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t rounded-b-lg from-black/70 to-transparent px-2 pb-2 pt-6 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-2 bg-gradient-to-t rounded-b-[3px] from-black/70 to-transparent px-2 pb-2 pt-6 opacity-0 transition-opacity group-hover:opacity-100">
         <div className="pointer-events-auto flex min-w-0 flex-wrap items-center gap-1.5">
-          <div className="flex items-center gap-1.5 rounded-lg bg-black/60 px-2.5 py-1 text-xs font-medium text-white/90">
+          <div className="flex items-center gap-1.5 bg-black/60 px-2.5 py-1 text-xs font-medium text-white/90">
             <DynamicIcon icon={mediaIcon} className="text-[10px]" />
             {mediaLabel}
           </div>
           {modelDisplayName && modelIconPath && (
-            <div className="flex items-center gap-1 rounded-lg bg-black/60 px-2 py-1 text-[10px] text-white/80">
+            <div className="flex items-center gap-1 bg-black/60 px-2 py-1 text-[10px] text-white/80">
               <img
                 src={modelIconPath}
                 alt=""
@@ -256,7 +261,7 @@ export const GalleryCard = memo(function GalleryCard({
         </div>
 
         {actionsSlot && !selectMode && (
-          <div className="pointer-events-auto flex shrink-0 items-center gap-0.5 rounded-lg bg-black/60 p-1 backdrop-blur-sm">
+          <div className="pointer-events-auto flex shrink-0 items-center gap-0.5 rounded-[3px] bg-black/60 p-1 backdrop-blur-sm">
             {actionsSlot}
           </div>
         )}
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx b/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
index cbfb65a63c..b53c64b903 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryRow.tsx
@@ -1,5 +1,13 @@
 import { memo, useCallback, type ReactNode } from "react";
-import { BoxIcon, CheckIcon, EyeIcon, ImageIcon, MusicIcon, PlayIcon, VideoIcon } from "lucide-react";
+import {
+  BoxIcon,
+  CheckIcon,
+  EyeIcon,
+  ImageIcon,
+  MusicIcon,
+  PlayIcon,
+  VideoIcon,
+} from "lucide-react";
 import {
   getCreatorIconPathForModelId,
   getModelDisplayName,
@@ -54,7 +62,13 @@ export const GalleryRow = memo(function GalleryRow({
       : isAudio
         ? MusicIcon
         : ImageIcon;
-  const mediaLabel = isVideo ? "Video" : is3D ? "3D" : isAudio ? "Audio" : "Image";
+  const mediaLabel = isVideo
+    ? "Video"
+    : is3D
+      ? "3D"
+      : isAudio
+        ? "Audio"
+        : "Image";
 
   const effectiveModelId = modelId ?? item.modelId;
   const modelDisplayName = effectiveModelId
@@ -90,23 +104,23 @@ export const GalleryRow = memo(function GalleryRow({
       tabIndex={0}
       onClick={handleRowClick}
       onKeyDown={handleRowKeyDown}
-      className={`group flex cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 transition-colors hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60 ${selected ? "bg-primary-400/10" : ""}`}
+      className={`group flex cursor-pointer items-center gap-3 rounded-[3px] px-2.5 py-2 transition-colors hover:bg-white/[0.04] focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60 ${selected ? "bg-primary-400/10" : ""}`}
     >
       {/* Selection checkbox (select mode only) */}
       {selectMode && (
         <div
-          className={`pointer-events-none flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors ${
+          className={`pointer-events-none flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] border transition-colors ${
             selected
               ? "border-primary-400 bg-primary-400 text-white"
               : "border-white/60 bg-black/40 text-transparent"
           } ${item.fullImage ? "" : "invisible"}`}
         >
-          <CheckIcon  className="text-[10px]" />
+          <CheckIcon className="text-[10px]" />
         </div>
       )}
 
       {/* Thumbnail */}
-      <div className={`relative size-[100px] shrink-0 overflow-hidden rounded-md bg-ui-controls/40 leading-none ${lastViewed ? "ring-2 ring-primary-400/50" : ""}`}>
+      <div className={`relative size-[100px] shrink-0 overflow-hidden bg-ui-controls/40 leading-none ${lastViewed ? "ring-2 ring-primary-400/50" : ""}`}>
         <GalleryThumbnail
           thumbnail={item.thumbnail}
           stillThumbnail={item.stillThumbnail}
@@ -119,9 +133,7 @@ export const GalleryRow = memo(function GalleryRow({
         {isVideo && item.thumbnail && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
             <span className="flex h-6 w-6 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm">
-              <PlayIcon
-                
-                className="ml-0.5 text-[9px] text-white/90" />
+              <PlayIcon className="ml-0.5 text-[9px] text-white/90" />
             </span>
           </div>
         )}
@@ -138,7 +150,7 @@ export const GalleryRow = memo(function GalleryRow({
       {/* Title + model / media meta */}
       <div className="min-w-0 flex-1">
         {loading ? (
-          <div className="relative h-4 w-2/3 max-w-[280px] overflow-hidden rounded bg-white/[0.06]">
+          <div className="relative h-4 w-2/3 max-w-[280px] overflow-hidden bg-white/[0.06]">
             <div className="animate-shimmer absolute inset-0" />
           </div>
         ) : (
@@ -155,7 +167,7 @@ export const GalleryRow = memo(function GalleryRow({
           </div>
         )}
         {isAudio && item.fullImage && (
-          <div className="mt-1.5 max-w-md rounded-md bg-white/[0.04]">
+          <div className="mt-1.5 max-w-md bg-white/[0.04]">
             <WaveformAudioPlayer
               src={item.fullImage}
               durationMillis={item.durationMillis}
diff --git a/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx b/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
index d4f11616df..4cdcafc3c3 100644
--- a/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GallerySelectToggle.tsx
@@ -11,14 +11,14 @@ export function GallerySelectToggle() {
   const label = active ? "Exit selection" : "Select items";
 
   return (
-    <div className="flex items-center rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5">
+    <div className="flex items-center rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5">
       <Tooltip content={label} position="bottom" delay={300}>
         <button
           type="button"
           aria-label={label}
           aria-pressed={active}
           onClick={() => setActive(!active)}
-          className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+          className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
             active
               ? "bg-white/10 text-white"
               : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx b/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
index b6623d50f0..e7e1667444 100644
--- a/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
+++ b/frontend/libs/components/generation-list/src/lib/GalleryViewToggle.tsx
@@ -26,7 +26,7 @@ export function GalleryViewToggle() {
     <div
       role="group"
       aria-label="Gallery layout"
-      className="flex items-center gap-0.5 rounded-lg border border-white/[0.08] bg-white/[0.04] p-0.5"
+      className="flex items-center gap-0.5 rounded-[3px] border border-white/[0.08] bg-white/[0.04] p-0.5"
     >
       {OPTIONS.map(({ mode, icon, label }) => {
         const active = viewMode === mode;
@@ -37,7 +37,7 @@ export function GalleryViewToggle() {
               aria-label={label}
               aria-pressed={active}
               onClick={() => setViewMode(mode)}
-              className={`flex h-6 w-6 items-center justify-center rounded-md text-xs transition-colors ${
+              className={`flex h-6 w-6 items-center justify-center rounded-[3px] text-xs transition-colors ${
                 active
                   ? "bg-white/10 text-white"
                   : "text-white/45 hover:text-white/80"
diff --git a/frontend/libs/components/generation-list/src/lib/PendingCard.tsx b/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
index e09c2c7305..b9d7273dad 100644
--- a/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
+++ b/frontend/libs/components/generation-list/src/lib/PendingCard.tsx
@@ -36,18 +36,16 @@ export const PendingCard = memo(function PendingCard({
   const iconPath = getCreatorIconPathForModelId(modelId);
 
   return (
-    <div className="group relative aspect-square w-full overflow-hidden rounded-lg bg-white/[0.03]">
+    <div className="group relative aspect-square w-full overflow-hidden rounded-[3px] bg-white/[0.03]">
       <div className="animate-shimmer h-full w-full" />
       {batchCount != null && batchCount > 1 && (
-        <div className="absolute left-2 right-2 top-2 z-10 rounded-md bg-black/60 px-2.5 py-1.5 text-center text-[10px] leading-snug text-white/70 backdrop-blur-sm">
+        <div className="absolute left-2 right-2 top-2 z-10 bg-black/60 px-2.5 py-1.5 text-center text-[10px] leading-snug text-white/70 backdrop-blur-sm">
           Generating {batchCount} {batchNoun(mediaClass)} · Results may appear
           one at a time
         </div>
       )}
       <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
-        <LoaderCircleIcon
-          
-          className="animate-spin text-2xl text-white/20" />
+        <LoaderCircleIcon className="animate-spin text-2xl text-white/20" />
         {progressPercent != null && (
           <span className="text-xs tabular-nums text-white/40">
             {progressPercent}%
diff --git a/frontend/libs/components/generation-list/src/lib/PendingRow.tsx b/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
index 44ce7f7e06..3328aa3392 100644
--- a/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
+++ b/frontend/libs/components/generation-list/src/lib/PendingRow.tsx
@@ -38,9 +38,9 @@ export const PendingRow = memo(function PendingRow({
   const iconPath = getCreatorIconPathForModelId(modelId);
 
   return (
-    <div className="group flex items-center gap-3 rounded-lg px-2.5 py-2">
+    <div className="group flex items-center gap-3 px-2.5 py-2">
       {/* Thumbnail placeholder */}
-      <div className="relative size-[100px] shrink-0 overflow-hidden rounded-md bg-white/[0.03] leading-none">
+      <div className="relative size-[100px] shrink-0 overflow-hidden bg-white/[0.03] leading-none">
         <div className="animate-shimmer h-full w-full" />
         <div className="absolute inset-0 flex items-center justify-center">
           <LoaderCircleIcon
diff --git a/frontend/libs/components/gravatar/src/lib/gravatar.tsx b/frontend/libs/components/gravatar/src/lib/gravatar.tsx
index 6e429a69ec..8d35ddecc5 100644
--- a/frontend/libs/components/gravatar/src/lib/gravatar.tsx
+++ b/frontend/libs/components/gravatar/src/lib/gravatar.tsx
@@ -68,7 +68,7 @@ function Gravatar(props: Props) {
   return (
     <div
       className={twMerge(
-        "relative aspect-square overflow-hidden rounded-full border border-white",
+        "relative aspect-square overflow-hidden border border-white",
         props.className
       )}
     >
diff --git a/frontend/libs/components/help-menu/src/lib/help-menu.tsx b/frontend/libs/components/help-menu/src/lib/help-menu.tsx
index d9b6fe2dbf..d85fa57a4d 100644
--- a/frontend/libs/components/help-menu/src/lib/help-menu.tsx
+++ b/frontend/libs/components/help-menu/src/lib/help-menu.tsx
@@ -66,16 +66,16 @@ const NewsView = ({ onBack }: { onBack: () => void }) => {
         </button>
 
         <div className="article-content">
-          <h1 className="text-2xl font-bold mb-2">{selectedPost.title}</h1>
+          <h1 className="font-display text-2xl font-bold mb-2">{selectedPost.title}</h1>
           {selectedPost.date && (
-            <p className="text-xs text-white/50 mb-4">{selectedPost.date}</p>
+            <p className="font-mono text-[11px] uppercase tracking-[0.12em] text-white/50 mb-4">{selectedPost.date}</p>
           )}
 
           {selectedPost.thumbnail && (
             <img
               src={selectedPost.thumbnail}
               alt={selectedPost.title}
-              className="w-full h-48 object-cover rounded-lg mb-4 border border-white/10"
+              className="w-full h-48 object-cover rounded-none mb-4 border border-white/15"
             />
           )}
 
@@ -86,17 +86,17 @@ const NewsView = ({ onBack }: { onBack: () => void }) => {
         </div>
         <style>{`
           .article-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
-          .article-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #93c5fd; }
+          .article-content h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #ffffff; }
           .article-content h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.5rem; }
           .article-content p { margin-bottom: 0.75rem; line-height: 1.6; }
           .article-content ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
           .article-content li { margin-bottom: 0.25rem; }
-          .article-content img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.1); margin: 1rem 0; }
-          .article-content a { color: #3b82f6; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
-          .article-content a:hover { border-bottom-color: #3b82f6; }
+          .article-content img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; border: 1px solid rgba(255,255,255,0.15); margin: 1rem 0; }
+          .article-content a { color: #74aaff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
+          .article-content a:hover { border-bottom-color: #74aaff; }
           
           /* Video embed styles */
-          .article-content .video-embed { position: relative; width: 100%; margin: 1.5rem 0; border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); background: #000; }
+          .article-content .video-embed { position: relative; width: 100%; margin: 1.5rem 0; border-radius: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); background: #000; }
           .article-content .youtube-embed { padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; }
           .article-content .youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
           .article-content .video-embed video { display: block; width: 100%; height: auto; max-height: 50vh; }
@@ -111,18 +111,18 @@ const NewsView = ({ onBack }: { onBack: () => void }) => {
         <div
           key={item.slug}
           onClick={() => setSelectedSlug(item.slug)}
-          className="bg-white/5 hover:bg-white/10 border border-white/10 p-4 rounded-lg cursor-pointer transition-all group"
+          className="bg-white/5 hover:bg-white/[0.07] border border-white/15 hover:border-white/25 p-4 rounded-none cursor-pointer transition-colors group"
         >
           <div className="flex justify-between items-start">
-            <h3 className="text-lg font-semibold group-hover:text-blue-300 transition-colors flex items-center gap-2">
+            <h3 className="text-lg font-semibold group-hover:text-white transition-colors flex items-center gap-2">
               {item.title}
               <ArrowRightIcon
                 
                 size="xs"
-                className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-blue-400" />
+                className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-white" />
             </h3>
             {item.date && (
-              <span className="text-xs text-white/40 font-mono whitespace-nowrap ml-2">
+              <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-white/40 whitespace-nowrap ml-2">
                 {item.date}
               </span>
             )}
@@ -372,7 +372,7 @@ export function HelpMenuButton({
                     key={item.id}
                     type="button"
                     onClick={() => viewTutorial(item)}
-                    className="group block overflow-hidden rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 text-left"
+                    className="group block overflow-hidden rounded-none border border-white/15 bg-white/5 transition-colors hover:border-white/25 hover:bg-white/[0.07] text-left"
                   >
                     <div className="aspect-video w-full overflow-hidden">
                       <img
@@ -402,12 +402,12 @@ export function HelpMenuButton({
               >
                 Back
               </Button>
-              <div className="text-lg font-bold text-base-fg">
+              <div className="font-display text-lg font-bold text-base-fg">
                 Tutorial: {selected.title}
               </div>
             </div>
             <div className="w-full">
-              <div className="aspect-video w-full overflow-hidden rounded-lg border border-white/10 bg-black">
+              <div className="aspect-video w-full overflow-hidden rounded-none border border-white/15 bg-black">
                 <div ref={playerContainerRef} className="h-full w-full" />
               </div>
             </div>
diff --git a/frontend/libs/components/input/src/lib/InputVector.tsx b/frontend/libs/components/input/src/lib/InputVector.tsx
index 59d0473173..680d936316 100644
--- a/frontend/libs/components/input/src/lib/InputVector.tsx
+++ b/frontend/libs/components/input/src/lib/InputVector.tsx
@@ -39,10 +39,10 @@ export const InputVector = ({
   oldZ.current = z;
 
   const inputCommonClasses =
-    "relative h-6 rounded-r-lg bg-black/25 p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-black/40";
+    "relative h-6 rounded-r-[3px] bg-black/25 p-2 text-sm text-white transition-all duration-100 ease-in-out outline-none -outline-offset-2 text-end w-full hover:cursor-e-resize hover:bg-black/40";
 
   const wrapperCommonClasses =
-    "relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-lg before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
+    "relative flex items-center before:inline-block before:h-6 before:bg-brand-primary before:text-white before:rounded-l-[3px] before:w-1.5 before:text-center before:justify-center before:items-center before:font-semibold before:flex before:align-middle before:leading-8 text-xs";
 
   const lockedCommonClasses =
     "hover:cursor-not-allowed hover:bg-brand-secondary";
diff --git a/frontend/libs/components/input/src/lib/NumberInput.tsx b/frontend/libs/components/input/src/lib/NumberInput.tsx
index 0facc0447e..884dfa9e7f 100644
--- a/frontend/libs/components/input/src/lib/NumberInput.tsx
+++ b/frontend/libs/components/input/src/lib/NumberInput.tsx
@@ -51,7 +51,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({
   };
 
   const incrementButtonStyle =
-    "flex h-[15px] w-6 items-center justify-center text-[10px] text-white/80 bg-ui-controls hover:bg-ui-controls-button outline-none focus:outline-none transition-all active:outline-none";
+    "flex h-[15px] w-6 items-center justify-center text-[10px] text-white/80 bg-ui-controls hover:bg-white/10 outline-none focus:outline-none transition-colors active:outline-none";
 
   return (
     <div className="relative">
@@ -60,21 +60,21 @@ export const NumberInput: React.FC<NumberInputProps> = ({
         value={inputValue}
         onChange={handleChange}
         onBlur={handleBlur}
-        inputClassName="w-[70px] h-[30px] rounded-md text-sm"
+        inputClassName="w-[70px] h-[30px] rounded-[3px] text-sm"
       />
 
-      <div className="absolute right-0 top-0 flex h-[30px] flex-col rounded-r-md border-l border-white/15 bg-gray-800">
+      <div className="absolute right-0 top-0 flex h-[30px] flex-col rounded-r-[3px] border-l border-white/15 bg-ui-controls">
         <button
           className={twMerge(
             incrementButtonStyle,
-            "rounded-tr-md border-b border-white/10",
+            "rounded-tr-[3px] border-b border-white/15",
           )}
           onClick={handleIncrement}
         >
           <ChevronUpIcon />
         </button>
         <button
-          className={twMerge(incrementButtonStyle, "rounded-br-md")}
+          className={twMerge(incrementButtonStyle, "rounded-br-[3px]")}
           onClick={handleDecrement}
         >
           <ChevronDownIcon />
diff --git a/frontend/libs/components/input/src/lib/input.tsx b/frontend/libs/components/input/src/lib/input.tsx
index 68c798fbc3..f178c806d2 100644
--- a/frontend/libs/components/input/src/lib/input.tsx
+++ b/frontend/libs/components/input/src/lib/input.tsx
@@ -28,7 +28,7 @@ export const Input = React.forwardRef(
       errorMessage,
       ...rest
     }: InputProps,
-    ref: React.ForwardedRef<HTMLInputElement>
+    ref: React.ForwardedRef<HTMLInputElement>,
   ) => {
     return (
       <div className={twMerge("flex flex-col", className)}>
@@ -45,13 +45,13 @@ export const Input = React.forwardRef(
             ref={ref}
             id={id ? id : label ? label : undefined}
             className={twMerge(
-              "h-10 w-full rounded-lg px-3 py-2.5 outline-none",
-              "bg-ui-panel text-base-fg placeholder-base-fg/50",
-              "border border-ui-panel-border transition-all duration-150 ease-in-out hover:border-primary/60 focus:border-primary focus:!outline-none",
+              "h-10 w-full rounded-[3px] px-3 py-2.5 outline-none",
+              "bg-ui-panel text-base-fg placeholder-base-fg/40",
+              "border border-ui-panel-border transition-colors duration-150 ease-in-out hover:border-white/40 focus:border-white focus:!outline-none",
               "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-ui-panel-border",
               icon && "pl-10",
-              isError && "outline-red focus:outline-red",
-              inputClassName
+              isError && "border-red-500 focus:border-red-500",
+              inputClassName,
             )}
             onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
               if (onFocus) {
@@ -66,12 +66,12 @@ export const Input = React.forwardRef(
             {...rest}
           />
           {errorMessage && (
-            <h6 className="absolute z-10 text-red">{errorMessage}</h6>
+            <h6 className="absolute z-10 text-red-400">{errorMessage}</h6>
           )}
         </div>
       </div>
     );
-  }
+  },
 );
 
 Input.displayName = "Input";
diff --git a/frontend/libs/components/keybinds/src/lib/cheatsheet/Cheatsheet.tsx b/frontend/libs/components/keybinds/src/lib/cheatsheet/Cheatsheet.tsx
index 36ecbef403..bdaf276986 100644
--- a/frontend/libs/components/keybinds/src/lib/cheatsheet/Cheatsheet.tsx
+++ b/frontend/libs/components/keybinds/src/lib/cheatsheet/Cheatsheet.tsx
@@ -57,15 +57,15 @@ export function Cheatsheet({
       <div
         data-keybinds-cheatsheet
         className={twMerge(
-          "max-h-[80%] w-[min(680px,90%)] overflow-auto rounded-xl border border-white/15 bg-black/70 p-6 text-white/90 shadow-2xl backdrop-blur-sm",
+          "max-h-[80%] w-[min(680px,90%)] overflow-auto rounded-none border border-white/15 bg-ui-panel/95 p-6 text-white/90",
           pinned && "pointer-events-auto",
         )}
       >
         <div className="mb-3 flex items-center justify-between">
-          <span className="text-xs uppercase tracking-widest text-white/50">
+          <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60">
             Keyboard shortcuts
           </span>
-          <span className="text-xs capitalize text-white/40">
+          <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-white/40">
             {selectedPreset} preset
           </span>
         </div>
@@ -75,7 +75,7 @@ export function Cheatsheet({
             if (!rows?.length) return null;
             return (
               <div key={group}>
-                <div className="mb-2 text-xs font-semibold uppercase tracking-wider text-white/60">
+                <div className="mb-2 font-mono text-[11px] font-medium uppercase tracking-[0.13em] text-white/45">
                   {group}
                 </div>
                 <ul className="flex flex-col gap-1.5">
@@ -94,7 +94,7 @@ export function Cheatsheet({
           })}
         </div>
         {pinned && (
-          <div className="mt-5 border-t border-white/10 pt-3 text-center text-xs text-white/40">
+          <div className="mt-5 border-t border-white/15 pt-3 text-center font-mono text-[11px] uppercase tracking-[0.12em] text-white/40">
             Press Esc or click outside to close
           </div>
         )}
diff --git a/frontend/libs/components/keybinds/src/lib/components/KeybindCaptureInput.tsx b/frontend/libs/components/keybinds/src/lib/components/KeybindCaptureInput.tsx
index d8bbef150c..97f480e7ab 100644
--- a/frontend/libs/components/keybinds/src/lib/components/KeybindCaptureInput.tsx
+++ b/frontend/libs/components/keybinds/src/lib/components/KeybindCaptureInput.tsx
@@ -36,7 +36,7 @@ export function KeybindCaptureInput({
       onClick={() => setCapturing((v) => !v)}
       aria-label="Change keybinding"
       className={twMerge(
-        "inline-flex min-h-8 min-w-[7rem] items-center justify-center rounded-md border px-2 py-1 text-sm transition-colors",
+        "inline-flex min-h-8 min-w-[7rem] items-center justify-center rounded-[3px] border px-2 py-1 text-sm transition-colors",
         capturing
           ? "border-primary/80 bg-primary/10 text-primary animate-pulse"
           : accent
diff --git a/frontend/libs/components/keybinds/src/lib/settings/KeybindsSettings.tsx b/frontend/libs/components/keybinds/src/lib/settings/KeybindsSettings.tsx
index 156c199ced..b259060c19 100644
--- a/frontend/libs/components/keybinds/src/lib/settings/KeybindsSettings.tsx
+++ b/frontend/libs/components/keybinds/src/lib/settings/KeybindsSettings.tsx
@@ -176,8 +176,8 @@ export function KeybindsSettings({
           Deliberately reset-free: destructive actions live with their scope
           (section headers) or in the danger row at the bottom, never beside
           the search field where a stray click can nuke every override. */}
-      <div className="sticky top-0 z-10 -mt-2 flex flex-col gap-3 border-b border-white/[0.06] bg-ui-modal/80 py-3 backdrop-blur-xl">
-        <div className="flex items-center gap-1.5 rounded-2xl bg-white/[0.04] p-1.5 ring-1 ring-white/[0.06]">
+      <div className="sticky top-0 z-10 -mt-2 flex flex-col gap-3 border-b border-white/[0.06] bg-ui-modal py-3">
+        <div className="flex items-center gap-1.5 rounded-none bg-white/[0.04] p-1.5 ring-1 ring-white/15">
           <ModeToggle mode={searchMode} onChange={switchMode} />
           {searchMode === "name" ? (
             <NameSearchField value={nameSearch} onChange={setNameSearch} />
@@ -273,7 +273,7 @@ export function KeybindsSettings({
           and gated behind a two-step confirm. Hidden when there is nothing to
           destroy. ─────────────────────────────────────────────────────────── */}
       {overriddenCount > 0 && (
-        <div className="flex items-center justify-between gap-4 rounded-2xl bg-red/[0.04] p-4 ring-1 ring-red/20">
+        <div className="flex items-center justify-between gap-4 rounded-none bg-red/[0.04] p-4 ring-1 ring-red/20">
           <div className="flex min-w-0 flex-col gap-0.5">
             <span className="text-[13px] font-medium text-base-fg/90">
               Reset all customizations
@@ -296,7 +296,7 @@ export function KeybindsSettings({
       )}
 
       {/* ── Video editor lives in its own customizer ───────────────────────── */}
-      <div className="flex items-start gap-3 rounded-2xl bg-white/[0.02] p-4 text-[13px] leading-relaxed text-base-fg/55 ring-1 ring-white/[0.06]">
+      <div className="flex items-start gap-3 rounded-none bg-white/[0.02] p-4 text-[13px] leading-relaxed text-base-fg/55 ring-1 ring-white/15">
         <InfoIcon className="mt-0.5 h-4 w-4 shrink-0 text-base-fg/35" />
         <span>
           Video editor shortcuts are managed in the video editor itself
@@ -357,14 +357,14 @@ function PresetDropdown({
         aria-haspopup="listbox"
         aria-expanded={open}
         className={twMerge(
-          "flex w-full items-center gap-3 rounded-2xl bg-white/[0.04] p-1.5 text-left ring-1 ring-white/[0.08] transition-all hover:bg-white/[0.06] active:scale-[0.995]",
+          "flex w-full items-center gap-3 rounded-none bg-white/[0.04] p-1.5 text-left ring-1 ring-white/15 transition-all hover:bg-white/[0.06] active:scale-[0.995]",
           EASE,
           open && "ring-primary/40",
         )}
       >
         <div className="flex min-w-0 grow flex-col gap-0.5 px-3 py-1.5">
           <span className="text-sm font-medium text-base-fg">{def.label}</span>
-          <span className="truncate text-[12px] text-base-fg/50">
+          <span className="text-[12px] leading-relaxed text-base-fg/60">
             {def.description}
           </span>
         </div>
@@ -381,7 +381,7 @@ function PresetDropdown({
         role="listbox"
         aria-label="Preset"
         className={twMerge(
-          "absolute left-0 right-0 top-full z-20 mt-2 origin-top rounded-2xl bg-ui-modal shadow-[0_20px_50px_-16px_rgba(0,0,0,0.7)] ring-1 ring-white/10 transition-all duration-200 overflow-hidden",
+          "absolute left-0 right-0 top-full z-20 mt-2 origin-top rounded-none bg-ui-modal shadow-[0_20px_50px_-16px_rgba(0,0,0,0.7)] ring-1 ring-white/10 transition-all duration-200 overflow-hidden",
           EASE,
           open
             ? "scale-100 opacity-100"
@@ -457,7 +457,7 @@ function ModeToggle({
   onChange: (mode: SearchMode) => void;
 }) {
   return (
-    <div className="flex shrink-0 items-center gap-0.5 rounded-[0.625rem] bg-ui-modal/60 p-0.5">
+    <div className="flex shrink-0 items-center gap-0.5 rounded-[3px] bg-ui-modal/60 p-0.5">
       {(["name", "key"] as SearchMode[]).map((m) => (
         <button
           key={m}
@@ -465,7 +465,7 @@ function ModeToggle({
           onClick={() => onChange(m)}
           aria-pressed={mode === m}
           className={twMerge(
-            "rounded-lg px-3 py-1.5 text-[12px] font-medium capitalize transition-all",
+            "rounded-[3px] px-3 py-1.5 text-[12px] font-medium capitalize transition-all",
             EASE,
             mode === m
               ? "bg-white/10 text-base-fg shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
@@ -489,7 +489,7 @@ function NameSearchField({
   return (
     <div
       className={twMerge(
-        "group flex grow items-center rounded-[0.625rem] bg-ui-modal/60 ring-1 ring-transparent transition-all",
+        "group flex grow items-center rounded-[3px] bg-ui-modal/60 ring-1 ring-transparent transition-all",
         EASE,
         "focus-within:bg-ui-modal/80 focus-within:ring-primary/50",
       )}
@@ -508,7 +508,7 @@ function NameSearchField({
           onClick={() => onChange("")}
           aria-label="Clear search"
           className={twMerge(
-            "mr-1.5 grid h-7 w-7 shrink-0 place-items-center rounded-full text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
+            "mr-1.5 grid h-7 w-7 shrink-0 place-items-center rounded-[3px] text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
             EASE,
           )}
         >
@@ -533,7 +533,7 @@ function KeySearchField({
   return (
     <div
       className={twMerge(
-        "flex grow items-center rounded-[0.625rem] bg-ui-modal/60 ring-1 transition-all",
+        "flex grow items-center rounded-[3px] bg-ui-modal/60 ring-1 transition-all",
         EASE,
         listening ? "ring-primary/60" : "ring-transparent",
       )}
@@ -570,7 +570,7 @@ function KeySearchField({
           onClick={onClear}
           aria-label="Clear key filter"
           className={twMerge(
-            "mr-1.5 grid h-7 w-7 shrink-0 place-items-center rounded-full text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
+            "mr-1.5 grid h-7 w-7 shrink-0 place-items-center rounded-[3px] text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
             EASE,
           )}
         >
@@ -605,8 +605,8 @@ function CollapsibleSurface({
   children: React.ReactNode;
 }) {
   return (
-    <div className="rounded-2xl bg-white/[0.04] ring-1 ring-white/[0.06]">
-      <div className="overflow-hidden rounded-[0.625rem] bg-ui-modal/40">
+    <div className="rounded-none bg-white/[0.04] ring-1 ring-white/15">
+      <div className="overflow-hidden rounded-[3px] bg-ui-modal/40">
         {/* The toggle and the (destructive) section reset are sibling buttons —
             a nested button is invalid HTML and a mis-click on "reset" must
             never also collapse the section. */}
@@ -647,7 +647,7 @@ function CollapsibleSurface({
               onConfirm={onReset}
             />
           )}
-          <span className="shrink-0 rounded-full bg-white/[0.06] px-2 py-0.5 text-xs tabular-nums text-base-fg/55">
+          <span className="shrink-0 rounded-[3px] bg-white/[0.06] px-2 py-0.5 text-xs tabular-nums text-base-fg/55">
             {count}
           </span>
         </div>
@@ -738,7 +738,7 @@ function ConfirmResetButton({
       title={title}
       aria-label={armed ? `${title} — click again to confirm` : title}
       className={twMerge(
-        "relative shrink-0 overflow-hidden whitespace-nowrap rounded-full font-medium transition-all active:scale-[0.97]",
+        "relative shrink-0 overflow-hidden whitespace-nowrap rounded-[3px] font-medium transition-all active:scale-[0.97]",
         EASE,
         prominent
           ? "h-9 px-4 text-[13px]"
@@ -746,7 +746,7 @@ function ConfirmResetButton({
         armed
           ? ready
             ? "bg-red/25 text-white shadow-[0_0_0_3px_rgba(0,0,0,0.15)]"
-            : "cursor-wait bg-white/[0.06] text-base-fg/55 ring-1 ring-white/[0.08]"
+            : "cursor-wait bg-white/[0.06] text-base-fg/55 ring-1 ring-white/15"
           : prominent
             ? "bg-red/10 text-red ring-1 ring-red/30 hover:bg-red/[0.18]"
             : "text-base-fg/45 hover:bg-red/10 hover:text-red",
@@ -827,7 +827,7 @@ function ActionRow({
   return (
     <div
       className={twMerge(
-        "group/row flex items-center gap-3 rounded-xl px-3 py-2 transition-colors",
+        "group/row flex items-center gap-3 rounded-[3px] px-3 py-2 transition-colors",
         EASE,
         "hover:bg-white/[0.03]",
       )}
@@ -859,7 +859,7 @@ function ActionRow({
           title="Revert to preset default"
           aria-label="Revert to preset default"
           className={twMerge(
-            "grid h-7 w-7 shrink-0 place-items-center rounded-full text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
+            "grid h-7 w-7 shrink-0 place-items-center rounded-[3px] text-base-fg/40 transition-all hover:bg-white/10 hover:text-base-fg active:scale-90",
             EASE,
           )}
         >
@@ -887,7 +887,7 @@ function ConflictAlert({
   return (
     <div
       role="alert"
-      className="flex flex-col gap-2.5 rounded-2xl bg-red/[0.08] p-3.5 text-[13px] ring-1 ring-red/30"
+      className="flex flex-col gap-2.5 rounded-none bg-red/[0.08] p-3.5 text-[13px] ring-1 ring-red/30"
     >
       <span className="leading-relaxed text-base-fg/80">
         <KbdBindings bindings={[pending.binding]} /> is already used by{" "}
@@ -901,7 +901,7 @@ function ConflictAlert({
           type="button"
           onClick={onConfirm}
           className={twMerge(
-            "rounded-full bg-red px-4 py-1.5 text-[13px] font-medium text-white transition-all hover:bg-red/85 active:scale-[0.97]",
+            "rounded-[3px] bg-red px-4 py-1.5 text-[13px] font-medium text-white transition-all hover:bg-red/85 active:scale-[0.97]",
             EASE,
           )}
         >
@@ -911,7 +911,7 @@ function ConflictAlert({
           type="button"
           onClick={onCancel}
           className={twMerge(
-            "rounded-full bg-white/[0.06] px-4 py-1.5 text-[13px] text-base-fg/80 transition-all hover:bg-white/10 active:scale-[0.97]",
+            "rounded-[3px] bg-white/[0.06] px-4 py-1.5 text-[13px] text-base-fg/80 transition-all hover:bg-white/10 active:scale-[0.97]",
             EASE,
           )}
         >
@@ -932,7 +932,7 @@ function EmptyState({
   binding: Binding | null;
 }) {
   return (
-    <div className="flex flex-col items-center gap-3 rounded-2xl bg-white/[0.06] px-6 py-12 text-center ring-1 ring-white/[0.06]">
+    <div className="flex flex-col items-center gap-3 rounded-none bg-white/[0.06] px-6 py-12 text-center ring-1 ring-white/15">
       {mode === "key" ? (
         <KeyIcon className="h-6 w-6 text-base-fg/25" />
       ) : (
@@ -955,7 +955,7 @@ function EmptyState({
 
 function Eyebrow({ children }: { children: React.ReactNode }) {
   return (
-    <span className="text-xs font-medium tracking-wide text-base-fg/50">
+    <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
       {children}
     </span>
   );
@@ -963,7 +963,7 @@ function Eyebrow({ children }: { children: React.ReactNode }) {
 
 function GroupLabel({ children }: { children: React.ReactNode }) {
   return (
-    <div className="px-3 pb-1 pt-4 text-[11px] font-medium uppercase tracking-[0.13em] text-base-fg/45 first:pt-2">
+    <div className="px-3 pb-1 pt-4 font-mono text-[11px] font-medium uppercase tracking-[0.13em] text-base-fg/45 first:pt-2">
       {children}
     </div>
   );
diff --git a/frontend/libs/components/label/src/lib/label.tsx b/frontend/libs/components/label/src/lib/label.tsx
index 3a280a6e43..fcf7fdf196 100644
--- a/frontend/libs/components/label/src/lib/label.tsx
+++ b/frontend/libs/components/label/src/lib/label.tsx
@@ -14,11 +14,14 @@ export const Label = ({
   ...rest
 }: LabelProps) => (
   <label
-    className={twMerge("text-base-fg mb-1.5 text-[15px] font-medium", className)}
+    className={twMerge(
+      "text-base-fg/60 mb-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.25em]",
+      className,
+    )}
     {...rest}
   >
     {children}
-    {required && <span className="ml-0.5 text-[#ff6467]">*</span>}
+    {required && <span className="ml-0.5 text-red-400">*</span>}
   </label>
 );
 
diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
index be9821c90d..eacb810ad6 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
@@ -2,7 +2,7 @@ import { Modal } from "@storyteller/ui-modal";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { Button } from "@storyteller/ui-button";
 import dayjs from "dayjs";
-import { ArrowDownToLineIcon, BoxIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, GlobeIcon, LinkIcon, LogOutIcon, MusicIcon, PauseIcon, PencilIcon, PlayIcon, RotateCwIcon, SearchIcon, Trash2Icon, UserIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
+import { ArrowDownToLineIcon, BoxIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, GlobeIcon, ImageIcon, InfoIcon, LinkIcon, LogOutIcon, MusicIcon, PauseIcon, PencilIcon, PlayIcon, RotateCwIcon, SearchIcon, Trash2Icon, UserIcon, VideoIcon, WandSparklesIcon } from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import { MediaFileDelete } from "@storyteller/tauri-api";
 import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
@@ -544,7 +544,7 @@ export function LightboxModal({
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        className="rounded-xl bg-ui-modal h-[760px] w-[1200px] max-w-screen min-w-[1000px] min-h-[600px] p-4"
+        className="rounded-none border-white/15 bg-ui-modal h-[760px] w-[1200px] max-w-screen min-w-[1000px] min-h-[600px] p-4"
         draggable
         allowBackgroundInteraction={true}
         showClose={true}
@@ -555,15 +555,15 @@ export function LightboxModal({
       >
         {/* Invisible drag handle strip at the very top for moving */}
         <Modal.DragHandle>
-          <div className="absolute left-0 top-0 z-20 h-12 w-full cursor-move rounded-t-xl" />
+          <div className="absolute left-0 top-0 z-20 h-12 w-full cursor-move" />
         </Modal.DragHandle>
 
         {/* content grid */}
         <div className="flex h-full gap-4">
           {/* image panel - flexible width */}
-          <div className="group/nav relative flex h-full flex-1 items-center justify-center overflow-hidden rounded-l-xl bg-black/30">
+          <div className="group/nav relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black">
             {!selectedImageUrl ? (
-              <div className="flex h-full w-full items-center justify-center bg-black/30">
+              <div className="flex h-full w-full items-center justify-center bg-black">
                 <span className="text-base-fg/60">Image not available</span>
               </div>
             ) : mediaClass === "dimensional" ||
@@ -601,8 +601,8 @@ export function LightboxModal({
               </video>
             ) : mediaClass === "audio" ? (
               <div className="flex h-full w-full items-center justify-center px-4 sm:px-8">
-                <div className="w-full max-w-xl rounded-2xl border border-white/10 bg-gradient-to-br from-white/[0.08] via-white/[0.04] to-white/[0.02] px-4 py-10 sm:px-6">
-                  <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15">
+                <div className="w-full max-w-xl border border-white/15 bg-ui-controls px-4 py-10 sm:px-6">
+                  <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center border border-white/15 bg-white/10">
                     <MusicIcon
                       
                       className="text-2xl text-white/70" />
@@ -625,7 +625,7 @@ export function LightboxModal({
                         className="embla__slide flex-[0_0_100%]"
                         key={`${url}-${idx}`}
                       >
-                        <div className="relative flex h-full items-center justify-center overflow-hidden rounded-lg bg-black/20">
+                        <div className="relative flex h-full items-center justify-center overflow-hidden bg-black">
                           <img
                             data-lightbox-modal="true"
                             src={addCorsParam(url) || url}
@@ -660,12 +660,12 @@ export function LightboxModal({
                 </div>
 
                 {effectiveImageUrls.length > 1 && (
-                  <div className="mt-3 px-2">
+                  <div className="mt-3 px-2 pb-2">
                     <div
                       className="embla-thumbs overflow-hidden"
                       ref={emblaThumbsRef}
                     >
-                      <div className="embla-thumbs__container flex gap-2">
+                      <div className="embla-thumbs__container flex justify-center gap-2">
                         {effectiveImageUrls.map((url, idx) => {
                           const isSelected = idx === selectedIndex;
                           return (
@@ -674,9 +674,9 @@ export function LightboxModal({
                               type="button"
                               onClick={() => onThumbClick(idx)}
                               className={twMerge(
-                                "embla-thumbs__slide relative h-20 w-20 flex-[0_0_5rem] overflow-hidden rounded-md border-2 transition-all",
+                                "embla-thumbs__slide relative h-16 w-16 flex-[0_0_4rem] overflow-hidden border transition-all",
                                 isSelected
-                                  ? "border-brand-primary-400 opacity-100"
+                                  ? "border-white opacity-100"
                                   : "border-transparent opacity-60 hover:border-white/40 hover:opacity-100",
                               )}
                             >
@@ -701,7 +701,7 @@ export function LightboxModal({
               mediaClass !== "mesh" &&
               mediaClass !== "splat" &&
               mediaClass !== "audio" && (
-                <div className="absolute inset-0 bg-ui-panel flex items-center justify-center">
+                <div className="absolute inset-0 bg-black flex items-center justify-center">
                   <LoadingSpinner className="h-12 w-12 text-base-fg" />
                 </div>
               )}
@@ -713,7 +713,7 @@ export function LightboxModal({
                   e.stopPropagation();
                   onNavigatePrev();
                 }}
-                className="absolute left-3 top-1/2 -translate-y-1/2 z-30 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/70 opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white group-hover/nav:opacity-100 focus:outline-none"
+                className="absolute left-3 top-1/2 -translate-y-1/2 z-30 flex h-10 w-10 items-center justify-center bg-black/50 text-white/70 opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white group-hover/nav:opacity-100 focus:outline-none"
                 aria-label="Previous item"
               >
                 <ChevronLeftIcon  className="text-lg" />
@@ -725,7 +725,7 @@ export function LightboxModal({
                   e.stopPropagation();
                   onNavigateNext();
                 }}
-                className="absolute right-3 top-1/2 -translate-y-1/2 z-30 flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/70 opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white group-hover/nav:opacity-100 focus:outline-none"
+                className="absolute right-3 top-1/2 -translate-y-1/2 z-30 flex h-10 w-10 items-center justify-center bg-black/50 text-white/70 opacity-0 transition-opacity duration-200 hover:bg-black/70 hover:text-white group-hover/nav:opacity-100 focus:outline-none"
                 aria-label="Next item"
               >
                 <ChevronRightIcon  className="text-lg" />
@@ -737,7 +737,7 @@ export function LightboxModal({
           <div className="flex h-full w-[280px] shrink-0 flex-col">
             <div className="flex-1 overflow-y-auto space-y-5 text-base-fg min-h-0 pb-2">
               {creator ? (
-                <div className="sticky top-0 z-10 flex items-center gap-2.5 bg-ui-modal pb-3 pr-10 border-b border-white/5">
+                <div className="sticky top-0 z-10 flex items-center gap-3 bg-ui-modal pb-3 pr-20 border-b border-white/10">
                   {creator.core_info ? (
                     <Gravatar
                       size={36}
@@ -747,10 +747,10 @@ export function LightboxModal({
                       backgroundIndex={
                         creator.core_info.default_avatar.color_index
                       }
-                      className="rounded-xl border-white/10"
+                      className="rounded-none border-white/15"
                     />
                   ) : (
-                    <div className="h-9 w-9 shrink-0 flex items-center justify-center rounded-xl bg-white/10 text-white/50 border border-white/5">
+                    <div className="h-9 w-9 shrink-0 flex items-center justify-center bg-white/10 text-white/50 border border-white/15">
                       <UserIcon />
                     </div>
                   )}
@@ -758,27 +758,28 @@ export function LightboxModal({
                     <span className="text-base-fg text-sm font-semibold leading-none truncate">
                       {creator.display_name}
                     </span>
-                    <span className="text-base-fg/60 text-xs font-medium">
+                    <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                       Author
                     </span>
                   </div>
                 </div>
               ) : promptLoading ? (
-                <div className="sticky top-0 z-10 flex items-center gap-3 bg-ui-modal pb-3 pr-10 border-b border-white/5 animate-pulse">
-                  <div className="h-9 w-9 shrink-0 rounded-xl bg-white/10" />
+                <div className="sticky top-0 z-10 flex items-center gap-3 bg-ui-modal pb-3 pr-20 border-b border-white/10 animate-pulse">
+                  <div className="h-9 w-9 shrink-0 bg-white/10" />
                   <div className="flex flex-col gap-1.5 min-w-0 flex-1">
-                    <div className="h-3.5 w-24 rounded bg-white/10" />
-                    <div className="h-3 w-12 rounded bg-white/10" />
+                    <div className="h-3.5 w-24 bg-white/10" />
+                    <div className="h-3 w-12 bg-white/10" />
                   </div>
                 </div>
               ) : null}
               {(hasPromptToken || promptLoading) && (
                 <>
                   {/* Prompt */}
-                  <div className="space-y-1.5">
+                  <div className="space-y-2">
                     <div className="flex items-center justify-between">
-                      <div className="text-sm font-medium text-base-fg/90">
-                        Prompt
+                      <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+                        <PencilIcon />
+                        <span>Prompt</span>
                       </div>
                       {!promptLoading && prompt && (
                         <button
@@ -814,16 +815,13 @@ export function LightboxModal({
                       )}
                     </div>
                     <div
-                      className="text-sm text-base-fg break-words p-3 rounded-lg leading-relaxed"
-                      style={{
-                        background: "rgb(var(--st-controls-rgb) / 0.20)",
-                      }}
+                      className="text-sm text-base-fg/90 break-words px-4 py-3 bg-black/20 leading-relaxed border border-white/10"
                     >
                       {promptLoading ? (
                         <div className="animate-pulse space-y-2">
-                          <div className="h-3 w-full rounded bg-white/10" />
-                          <div className="h-3 w-4/5 rounded bg-white/10" />
-                          <div className="h-3 w-3/5 rounded bg-white/10" />
+                          <div className="h-3 w-full bg-white/10" />
+                          <div className="h-3 w-4/5 bg-white/10" />
+                          <div className="h-3 w-3/5 bg-white/10" />
                         </div>
                       ) : (
                         <div
@@ -877,30 +875,25 @@ export function LightboxModal({
                     /* Skeleton placeholders while fetching metadata */
                     <>
                       {/* Reference Images skeleton */}
-                      <div className="space-y-1.5 animate-pulse">
-                        <div className="h-3.5 w-28 rounded bg-white/10" />
+                      <div className="space-y-2 animate-pulse">
+                        <div className="h-3.5 w-28 bg-white/10" />
                         <div className="flex gap-1.5">
-                          <div className="h-12 w-12 rounded-lg bg-white/10" />
-                          <div className="h-12 w-12 rounded-lg bg-white/10" />
-                          <div className="h-12 w-12 rounded-lg bg-white/10" />
+                          <div className="h-12 w-12 bg-white/10" />
+                          <div className="h-12 w-12 bg-white/10" />
+                          <div className="h-12 w-12 bg-white/10" />
                         </div>
                       </div>
                       {/* Information skeleton */}
-                      <div className="space-y-1.5 animate-pulse">
-                        <div className="h-3.5 w-24 rounded bg-white/10" />
-                        <div
-                          className="flex flex-col rounded-lg border border-ui-panel-border overflow-hidden"
-                          style={{
-                            background: "rgb(var(--st-controls-rgb) / 0.20)",
-                          }}
-                        >
+                      <div className="space-y-2 animate-pulse">
+                        <div className="h-3.5 w-24 bg-white/10" />
+                        <div className="flex flex-col bg-black/20 border border-white/10 overflow-hidden">
                           {Array.from({ length: 5 }).map((_, i) => (
                             <div
                               key={i}
-                              className="flex items-center justify-between py-2.5 px-3 border-b border-white/5 last:border-0"
+                              className="flex items-center justify-between py-2.5 px-3 border-b border-white/10 last:border-0"
                             >
-                              <div className="h-3.5 w-16 rounded bg-white/10" />
-                              <div className="h-3.5 w-24 rounded bg-white/10" />
+                              <div className="h-3.5 w-16 bg-white/10" />
+                              <div className="h-3.5 w-24 bg-white/10" />
                             </div>
                           ))}
                         </div>
@@ -909,9 +902,10 @@ export function LightboxModal({
                   ) : (
                     <>
                       {contextImages && contextImages.length > 0 && (
-                        <div className="space-y-1.5">
-                          <div className="text-sm font-medium text-base-fg/90">
-                            Reference Media
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+                            <ImageIcon />
+                            <span>Reference Media</span>
                           </div>
                           <div className="grid grid-cols-5 gap-1.5 w-fit">
                             {contextImages.map((contextImage, index) => {
@@ -936,7 +930,7 @@ export function LightboxModal({
                                     <div className="flex flex-col gap-1.5 min-w-[100px]">
                                       {!isAudio && !isVideoRef && (
                                         <button
-                                          className="text-xs text-left text-base-fg/80 hover:text-base-fg transition-colors py-1 px-1 rounded hover:bg-white/5"
+                                          className="text-xs text-left text-base-fg/80 hover:text-base-fg transition-colors py-1 px-1 rounded-[3px] hover:bg-white/5"
                                           onClick={(e) => {
                                             e.stopPropagation();
                                             setRefPreviewUrl(fullSize);
@@ -950,7 +944,7 @@ export function LightboxModal({
                                       )}
                                       {onNavigateToMedia && (
                                         <button
-                                          className="text-xs text-left text-base-fg/80 hover:text-base-fg transition-colors py-1 px-1 rounded hover:bg-white/5"
+                                          className="text-xs text-left text-base-fg/80 hover:text-base-fg transition-colors py-1 px-1 rounded-[3px] hover:bg-white/5"
                                           onClick={(e) => {
                                             e.stopPropagation();
                                             onNavigateToMedia(
@@ -968,7 +962,7 @@ export function LightboxModal({
                                   }
                                 >
                                   <div
-                                    className="glass relative aspect-square overflow-hidden rounded-lg w-12 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer"
+                                    className="relative aspect-square w-12 overflow-hidden border border-white/15 bg-white/5 transition-colors hover:border-white/40 group cursor-pointer"
                                     onClick={() => {
                                       if (isAudio) {
                                         handleAudioToggle(contextImage.media_token, contextImage.media_links.cdn_url);
@@ -1045,7 +1039,7 @@ export function LightboxModal({
 
             {/* buttons with spacing */}
             {actionUrl && (
-              <div className="mt-4 grid grid-cols-2 gap-1.5">
+              <div className="mt-4 grid grid-cols-2 gap-2 border-t border-white/10 pt-4">
                 {onRecreateClicked &&
                   hasPromptToken &&
                   promptData &&
@@ -1241,7 +1235,7 @@ export function LightboxModal({
                 {selectedMediaToken && onDeleteClicked && (
                   <Button
                     icon={Trash2Icon}
-                    className="w-full py-1.5 text-[13px]"
+                    className="w-full border border-red-500/20 bg-red-500/10 py-1.5 text-[13px] text-red-500 hover:bg-red-500/20"
                     variant="destructive"
                     onClick={async (e) => {
                       e.stopPropagation();
@@ -1262,7 +1256,7 @@ export function LightboxModal({
         <Modal
           isOpen={true}
           onClose={() => setRefPreviewUrl(null)}
-          className="rounded-xl bg-ui-modal w-auto h-auto max-w-[75vw] max-h-[75vh] p-4"
+          className="rounded-none border-white/15 bg-ui-modal w-auto h-auto max-w-[75vw] max-h-[75vh] p-4"
           draggable
           allowBackgroundInteraction={true}
           showClose={true}
@@ -1272,9 +1266,9 @@ export function LightboxModal({
           expandable={false}
         >
           <Modal.DragHandle>
-            <div className="absolute left-0 top-0 z-20 h-12 w-full cursor-move rounded-t-xl" />
+            <div className="absolute left-0 top-0 z-20 h-12 w-full cursor-move" />
           </Modal.DragHandle>
-          <div className="relative flex items-center justify-center overflow-hidden rounded-xl bg-black/30">
+          <div className="relative flex items-center justify-center overflow-hidden bg-black">
             <img
               src={addCorsParam(refPreviewUrl) || refPreviewUrl}
               alt="Reference preview"
@@ -1323,12 +1317,12 @@ function InfoSection({
   if (!hasAnyInfo) return null;
 
   return (
-    <div className="space-y-1.5">
-      <div className="text-sm font-medium text-base-fg/90">Information</div>
-      <div
-        className="flex flex-col rounded-lg border border-ui-panel-border overflow-hidden"
-        style={{ background: "rgb(var(--st-controls-rgb) / 0.20)" }}
-      >
+    <div className="space-y-2">
+      <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+        <InfoIcon />
+        <span>Information</span>
+      </div>
+      <div className="flex flex-col bg-black/20 border border-white/10 overflow-hidden">
         {modelType && (
           <InfoRow
             label="Model"
@@ -1386,9 +1380,11 @@ function InfoSection({
 
 function InfoRow({ label, value }: { label: string; value: ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-2 px-3 border-b border-white/5 last:border-0">
-      <span className="text-sm text-base-fg/70 font-medium">{label}</span>
-      <span className="text-sm text-base-fg flex items-center gap-2">
+    <div className="flex items-start justify-between gap-4 px-3 py-2.5 border-b border-white/10 last:border-0">
+      <span className="shrink-0 pt-0.5 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+        {label}
+      </span>
+      <span className="min-w-0 text-right text-sm text-base-fg font-medium flex items-center justify-end gap-2">
         {value}
       </span>
     </div>
diff --git a/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx b/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
index 59e0e1c955..f09145941d 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
@@ -134,14 +134,14 @@ export function TagChipInput({
   };
 
   const chipClass = (value: string) =>
-    `flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-base-fg/80 transition-all ${
+    `flex items-center gap-1 break-all text-left rounded-[3px] border border-white/15 bg-white/5 px-2.5 py-1 text-[11px] font-medium text-base-fg/80 transition-all ${
       flashValue === value ? "ring-2 ring-primary" : ""
     }`;
 
   return (
     <div className="relative">
       <div
-        className={`flex flex-wrap items-center gap-1.5 rounded-xl bg-black/20 border border-white/5 px-3 py-2.5 ${
+        className={`flex flex-wrap items-center gap-1.5 rounded-[3px] bg-ui-panel border border-ui-panel-border focus-within:border-primary/60 px-3 py-2.5 ${
           disabled ? "" : "cursor-text"
         }`}
         onClick={() => inputRef.current?.focus()}
@@ -183,6 +183,7 @@ export function TagChipInput({
               setFocused(false);
               if (draft.trim()) commit(draft);
             }}
+            aria-label="Tags"
             placeholder={chips.length === 0 ? "Add tags (comma separated)" : "Add tag"}
             className="min-w-[7rem] flex-1 bg-transparent py-0.5 text-sm text-base-fg placeholder:text-base-fg/40 focus:outline-none"
           />
@@ -191,7 +192,7 @@ export function TagChipInput({
 
       {dropdownOpen && (
         <div
-          className={`absolute left-0 right-0 z-30 max-h-48 overflow-y-auto rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl ${
+          className={`absolute left-0 right-0 z-30 max-h-48 overflow-y-auto rounded-none border border-ui-panel-border bg-ui-panel p-1 shadow-xl ${
             dropUp ? "bottom-full mb-1" : "top-full mt-1"
           }`}
         >
@@ -203,7 +204,7 @@ export function TagChipInput({
               onMouseDown={(e) => e.preventDefault()}
               onClick={() => pickSuggestion(suggestion.value)}
               onMouseEnter={() => setHighlightIndex(index)}
-              className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-base-fg transition-colors ${
+              className={`flex w-full items-center gap-2 rounded-[3px] px-2 py-1.5 text-sm text-base-fg transition-colors ${
                 highlight === index ? "bg-ui-controls/60" : "hover:bg-ui-controls/40"
               }`}
             >
diff --git a/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx b/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx
index 8290ad8025..936932f68c 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx
@@ -236,7 +236,7 @@ export function TagsSection({
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs font-medium text-base-fg/60">
+        <div className="flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
           <TagIcon />
           <span>Tags</span>
         </div>
diff --git a/frontend/libs/components/list-dropdown/src/lib/ListDropdown.tsx b/frontend/libs/components/list-dropdown/src/lib/ListDropdown.tsx
index ce4592eb66..270bc1cf47 100644
--- a/frontend/libs/components/list-dropdown/src/lib/ListDropdown.tsx
+++ b/frontend/libs/components/list-dropdown/src/lib/ListDropdown.tsx
@@ -16,7 +16,7 @@ export const ListDropdown = ({ list, onSelect }: ListDropdownProps) => {
   return (
     <Listbox value={selected} onChange={setSelected}>
       <div className="relative mt-1">
-        <Listbox.Button className="relative h-10 w-full cursor-pointer rounded-md bg-brand-secondary py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary sm:text-sm">
+        <Listbox.Button className="relative h-10 w-full cursor-pointer rounded-[3px] border border-ui-controls-border bg-ui-controls py-2 pl-3 pr-10 text-left text-base-fg outline-none outline-offset-0 transition-colors duration-150 ease-in-out hover:border-white/40 focus:!outline-none sm:text-sm">
           <span className="block truncate">{Object.keys(selected)[0]}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronDownIcon  aria-hidden="true" />
@@ -28,12 +28,17 @@ export const ListDropdown = ({ list, onSelect }: ListDropdownProps) => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+          <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[3px] border border-ui-panel-border bg-ui-panel text-base focus:outline-none sm:text-sm">
             {list.map((item, itemIdx) => (
               <Listbox.Option
                 key={itemIdx}
-                className={({ active }) =>
-                  `relative cursor-pointer select-none py-2 pl-10 pr-4 text-white ${active ? "text-white" : "text-gray-400"
+                className={({ active, selected }) =>
+                  `relative cursor-pointer select-none py-2 pl-10 pr-4 transition-colors duration-150 ${
+                    active
+                      ? "bg-white text-black"
+                      : selected
+                        ? "bg-white/10 text-base-fg"
+                        : "text-base-fg/90"
                   }`
                 }
                 value={item}
diff --git a/frontend/libs/components/loading/src/lib/LoadingBar.tsx b/frontend/libs/components/loading/src/lib/LoadingBar.tsx
index 37c8352fdb..76a14d69e7 100644
--- a/frontend/libs/components/loading/src/lib/LoadingBar.tsx
+++ b/frontend/libs/components/loading/src/lib/LoadingBar.tsx
@@ -49,11 +49,11 @@ export const LoadingBar = ({
     propsInnerWrapperClassName,
   );
   const progressBackgroundClassName = twMerge(
-    "w-full bg-brand-secondary-800 rounded-full h-2.5",
+    "w-full bg-brand-secondary-800 rounded-none h-2.5",
     propsProgressBackgroundClassName,
   );
   const progressClassName = twMerge(
-    "h-2.5 rounded-full transition-all duration-1000",
+    "h-2.5 rounded-none transition-all duration-1000",
     getVariantClassNames(variant),
     propsProgressClassName,
   );
diff --git a/frontend/libs/components/login-modal/src/lib/DesktopLoginBridge.tsx b/frontend/libs/components/login-modal/src/lib/DesktopLoginBridge.tsx
index fbf4bc68e3..f19ffbbe49 100644
--- a/frontend/libs/components/login-modal/src/lib/DesktopLoginBridge.tsx
+++ b/frontend/libs/components/login-modal/src/lib/DesktopLoginBridge.tsx
@@ -112,21 +112,21 @@ export function DesktopLoginBridge({ onSuccess, onStart, onActiveChange }: { onS
   };
 
   const remaining = challenge ? Math.max(0, Math.ceil((Date.parse(challenge.expires_at) - now) / 1000)) : 0;
-  return <section aria-label="Website login" className="mb-6 rounded-xl border border-white/15 p-4 text-center">
+  return <section aria-label="Website login" className="mb-6 border border-white/15 bg-white/[0.03] p-4 text-center">
     {isActive && <div className="mb-4 text-left">
-      <button type="button" className="inline-flex items-center gap-2 text-sm text-white/70 hover:text-white" onClick={back}>
+      <button type="button" className="inline-flex items-center gap-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/60 transition-colors hover:text-white" onClick={back}>
         <ArrowLeftIcon size={16} aria-hidden="true" /> Back
       </button>
     </div>}
     {challenge ? <>
       <p className="mb-3 text-sm text-white/70">Scan with your phone or approve in your browser.</p>
-      <QRCodeSVG value={challenge.verification_url} size={192} marginSize={4} title="Scan to approve desktop login" className="mx-auto rounded-lg" />
-      <p className="my-3 font-mono text-2xl tracking-widest">{challenge.confirmation_code.slice(0, 4)}-{challenge.confirmation_code.slice(4)}</p>
-      <p className="mb-3 text-xs text-white/60">Verify this code on the website. Expires in {Math.floor(remaining / 60)}:{String(remaining % 60).padStart(2, "0")}</p>
-      <button type="button" className="rounded-lg border border-white/30 px-4 py-2" onClick={() => OpenUrl(challenge.verification_url).catch(() => setMessage("Unable to open the browser. Scan the QR code instead."))}>Open website</button>
-    </> : busy ? <p className="text-sm text-white/70" role="status">Preparing login…</p> : <div className="flex flex-col gap-2">
-      <button type="button" className="rounded-lg bg-white px-4 py-3 font-medium text-black" onClick={() => start(true)}>Login with Website</button>
-      <button type="button" className="rounded-lg border border-white/30 px-4 py-2" onClick={() => start(false)}>Scan to Login</button>
+      <QRCodeSVG value={challenge.verification_url} size={192} marginSize={4} title="Scan to approve desktop login" className="mx-auto" />
+      <p className="my-3 font-mono text-2xl tracking-[0.2em]">{challenge.confirmation_code.slice(0, 4)}-{challenge.confirmation_code.slice(4)}</p>
+      <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.12em] text-white/50">Verify this code on the website. Expires in {Math.floor(remaining / 60)}:{String(remaining % 60).padStart(2, "0")}</p>
+      <button type="button" className="h-10 rounded-[3px] border border-white/15 bg-white/5 px-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white transition-colors hover:bg-white/10" onClick={() => OpenUrl(challenge.verification_url).catch(() => setMessage("Unable to open the browser. Scan the QR code instead."))}>Open website</button>
+    </> : busy ? <p className="font-mono text-[11px] uppercase tracking-[0.12em] text-white/60" role="status">Preparing login…</p> : <div className="flex flex-col gap-2">
+      <button type="button" className="h-10 rounded-[3px] bg-white px-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-black transition-colors hover:bg-white/90" onClick={() => start(true)}>Login with Website</button>
+      <button type="button" className="h-10 rounded-[3px] border border-white/15 bg-white/5 px-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white transition-colors hover:bg-white/10" onClick={() => start(false)}>Scan to Login</button>
       <p className="text-xs text-white/50">Use Google or any account already signed in on the website.</p>
     </div>}
     {message && <p className="mt-3 text-sm text-white/70" role="status">{message}</p>}
diff --git a/frontend/libs/components/login-modal/src/lib/LoginSuccess.module.css b/frontend/libs/components/login-modal/src/lib/LoginSuccess.module.css
index 7db4a2e1ec..5d097da2fc 100644
--- a/frontend/libs/components/login-modal/src/lib/LoginSuccess.module.css
+++ b/frontend/libs/components/login-modal/src/lib/LoginSuccess.module.css
@@ -1,6 +1,5 @@
 .panel {
   position: relative;
-  isolation: isolate;
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -8,60 +7,44 @@
   overflow: hidden;
   padding: 56px 32px;
   text-align: center;
-  background: radial-gradient(ellipse at 50% 0%, rgb(94 234 212 / 9%), transparent 70%);
   animation: arrive 450ms ease-out both;
 }
 
-.glow {
-  position: absolute;
-  z-index: -1;
-  top: -52px;
-  left: calc(50% - 144px);
-  width: 288px;
-  height: 288px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgb(94 234 212 / 24%), rgb(129 140 248 / 12%) 45%, transparent 70%);
-  filter: blur(24px);
-  pointer-events: none;
-  animation: glow 2400ms ease-in-out infinite;
-}
-
 .badge {
   display: flex;
-  width: 76px;
-  height: 76px;
+  width: 64px;
+  height: 64px;
   align-items: center;
   justify-content: center;
   margin-bottom: 28px;
-  border: 1px solid rgb(153 246 228 / 35%);
-  border-radius: 50%;
-  color: #b4f7de;
-  background: linear-gradient(145deg, rgb(153 246 228 / 16%), rgb(94 234 212 / 4%));
-  box-shadow: 0 0 0 8px rgb(94 234 212 / 4%), 0 0 44px rgb(94 234 212 / 18%), inset 0 1px 0 rgb(255 255 255 / 12%);
+  border: 1px solid rgb(255 255 255 / 20%);
+  color: #ffffff;
+  background: rgb(255 255 255 / 5%);
 }
 
 .heading {
   margin: 0;
   max-width: 100%;
-  color: rgb(255 255 255 / 80%);
-  font-size: 18px;
-  font-weight: 500;
+  color: rgb(255 255 255 / 60%);
+  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
   line-height: 1.5;
+  text-transform: uppercase;
 }
 
 .username {
   display: block;
-  margin-top: 4px;
+  margin-top: 10px;
   overflow-wrap: anywhere;
-  color: #b4f7de;
-  background: linear-gradient(100deg, #d4ffec, #99f6e4 55%, #c7d2fe);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: #ffffff;
+  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
   font-size: 30px;
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: -0.025em;
-  line-height: 1.25;
+  line-height: 1.1;
+  text-transform: none;
 }
 
 .caption {
@@ -72,15 +55,10 @@
 }
 
 @keyframes arrive {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-@keyframes glow {
-  0%, 100% { opacity: 0.7; transform: scale(0.95); }
-  50% { opacity: 1; transform: scale(1.06); }
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .panel, .glow { animation: none; }
+  .panel { animation: none; }
 }
diff --git a/frontend/libs/components/login-modal/src/lib/LoginSuccess.tsx b/frontend/libs/components/login-modal/src/lib/LoginSuccess.tsx
index 08ebca8721..cb52ba2090 100644
--- a/frontend/libs/components/login-modal/src/lib/LoginSuccess.tsx
+++ b/frontend/libs/components/login-modal/src/lib/LoginSuccess.tsx
@@ -4,9 +4,8 @@ import styles from "./LoginSuccess.module.css";
 export function LoginSuccess({ username }: { username: string }) {
   return (
     <div className={styles.panel} role="status" aria-live="polite" aria-atomic="true">
-      <div className={styles.glow} aria-hidden="true" />
       <div className={styles.badge} aria-hidden="true">
-        <CheckIcon size={34} strokeWidth={2} />
+        <CheckIcon size={28} strokeWidth={2} />
       </div>
       <h2 className={styles.heading}>
         Logged in as{" "}
diff --git a/frontend/libs/components/login-modal/src/lib/artcraft-signup.tsx b/frontend/libs/components/login-modal/src/lib/artcraft-signup.tsx
index a78c03bd20..176194885a 100644
--- a/frontend/libs/components/login-modal/src/lib/artcraft-signup.tsx
+++ b/frontend/libs/components/login-modal/src/lib/artcraft-signup.tsx
@@ -18,9 +18,10 @@ interface ArtCraftSignUpProps {
   isLoading?: boolean;
 }
 
-const FIELD_LABEL = "text-xs font-semibold text-white/70 ml-1";
+const FIELD_LABEL =
+  "block font-mono text-[11px] font-semibold leading-4 uppercase tracking-[0.12em] text-white/70";
 const FIELD_INPUT =
-  "w-full bg-black/40 border border-white/10 focus:border-primary/50 rounded-xl px-4 py-3 text-white placeholder-white/20 outline-none transition-colors";
+  "h-10 w-full rounded-[3px] border border-white/15 bg-white/5 px-4 py-2 text-sm font-normal leading-5 text-white placeholder-white/20 outline-none transition-colors focus:border-white/40";
 
 export const ArtCraftSignUp = ({
   onSubmit,
@@ -74,12 +75,12 @@ export const ArtCraftSignUp = ({
 
   return (
     <form
-      className="flex w-full flex-col gap-2"
+      className="flex w-full flex-col gap-4"
       onSubmit={handleSubmit}
       ref={formRef}
     >
       {localError && (
-        <div className="flex items-center justify-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-center text-sm text-red-500">
+        <div className="flex items-center justify-center gap-2 border border-red-500/20 bg-red-500/10 px-4 py-3 text-center text-sm text-red-500">
           <TriangleAlertIcon />
           {localError}
         </div>
@@ -87,7 +88,7 @@ export const ArtCraftSignUp = ({
 
       {isSignUp ? (
         <>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <label className={FIELD_LABEL}>Username</label>
             <Input
               name="username"
@@ -97,7 +98,7 @@ export const ArtCraftSignUp = ({
               inputClassName={FIELD_INPUT}
             />
           </div>
-          <div className="space-y-1">
+          <div className="space-y-2">
             <label className={FIELD_LABEL}>Email</label>
             <Input
               name="email"
@@ -110,7 +111,7 @@ export const ArtCraftSignUp = ({
           </div>
         </>
       ) : (
-        <div className="space-y-1">
+        <div className="space-y-2">
           <label className={FIELD_LABEL}>Email or Username</label>
           <Input
             name="usernameOrEmail"
@@ -122,7 +123,7 @@ export const ArtCraftSignUp = ({
         </div>
       )}
 
-      <div className="space-y-1">
+      <div className="space-y-2">
         <label className={FIELD_LABEL}>Password</label>
         <div className="relative">
           <Input
@@ -145,7 +146,7 @@ export const ArtCraftSignUp = ({
       </div>
 
       {isSignUp && (
-        <div className="space-y-1">
+        <div className="space-y-2">
           <label className={FIELD_LABEL}>Confirm Password</label>
           <div className="relative">
             <Input
@@ -168,14 +169,14 @@ export const ArtCraftSignUp = ({
         </div>
       )}
 
-      <div className="pt-4">
+      <div className="pt-2">
         <Button
           type="submit"
           disabled={isLoading}
-          className="h-10 w-full justify-center rounded-full border-none bg-primary font-bold text-white hover:bg-primary-600"
+          className="h-10 w-full justify-center rounded-[3px] border-none bg-white font-mono text-xs font-semibold uppercase tracking-[0.12em] text-black shadow-none hover:bg-white/90"
         >
           {isLoading ? (
-            <LoaderCircleIcon  className="animate-spin" />
+            <LoaderCircleIcon className="animate-spin" />
           ) : isSignUp ? (
             "Sign up"
           ) : (
@@ -184,7 +185,7 @@ export const ArtCraftSignUp = ({
         </Button>
       </div>
 
-      <div className="mt-2 text-center text-sm text-white/60">
+      <div className="mt-4 text-center text-sm text-white/60">
         {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
         <button
           type="button"
diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
index d578afe9aa..b9c24bbb0c 100644
--- a/frontend/libs/components/login-modal/src/lib/login-modal.tsx
+++ b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
@@ -14,6 +14,12 @@ import { useLoginModalStore } from "./useLoginModalStore";
 const DEFAULT_SHOWCASE_VIDEO =
   "https://frontend-cdn.fakeyou.com/videos/knight-video.mp4";
 const LOGIN_SUCCESS_DURATION_MS = 3000;
+const FRAME_CORNERS = [
+  "top-0 left-0",
+  "top-0 right-0",
+  "bottom-0 left-0",
+  "bottom-0 right-0",
+];
 
 interface LoginModalProps {
   onClose?: () => void;
@@ -145,10 +151,10 @@ export function LoginModal({
     if (showSuccess) {
       return (
         <div className="flex flex-1 flex-col items-center justify-center px-8 py-16 text-center">
-          <h2 className="mb-2 text-3xl font-bold text-white">
+          <h2 className="mb-3 font-display text-3xl leading-[1.05] tracking-tight text-white sm:text-4xl">
             Thank you for signing in!
           </h2>
-          <p className="mb-6 text-white/70">
+          <p className="mb-8 text-sm leading-relaxed text-white/60">
             You're all set to start creating amazing content.
           </p>
           <Button
@@ -156,7 +162,7 @@ export function LoginModal({
             onClick={handleClose}
             icon={ArrowRightIcon}
             iconFlip={true}
-            className="text-md"
+            className="h-10 rounded-[3px] bg-white px-5 font-mono text-xs font-semibold uppercase tracking-[0.12em] text-black shadow-none hover:bg-white/90"
           >
             Get Started
           </Button>
@@ -167,16 +173,17 @@ export function LoginModal({
     // Discord
     return (
       <div className="flex flex-1 flex-col items-center justify-center px-8 py-16 text-center">
-        <h2 className="mb-2 text-3xl font-bold text-white">
-          Join Our Community
+        <h2 className="mb-3 font-display text-3xl leading-[1.05] tracking-tight text-white sm:text-4xl">
+          Join our <span className="font-serif-italic">community.</span>
         </h2>
-        <p className="mb-6 max-w-md text-white/70">
+        <p className="mb-8 max-w-md text-sm leading-relaxed text-white/60">
           Connect with other creators, share your work, and get the latest
           updates in our Discord community.
         </p>
-        <div className="flex gap-4">
+        <div className="flex gap-3">
           <Button
             variant="secondary"
+            className="h-10 rounded-[3px] border border-white/15 bg-white/5 px-4 font-mono text-xs font-semibold uppercase tracking-[0.12em] text-white shadow-none hover:bg-white/10"
             onClick={() => {
               setShowDiscord(false);
               setShowSuccess(true);
@@ -188,7 +195,7 @@ export function LoginModal({
             variant="primary"
             onClick={handleDiscordJoin}
             icon={DiscordIcon}
-            className="text-md bg-[#5865F2] hover:bg-[#6a76ff]"
+            className="h-10 rounded-[3px] bg-[#5865F2] px-4 font-mono text-xs font-semibold uppercase tracking-[0.12em] text-white shadow-none hover:bg-[#6a76ff]"
           >
             Join Discord
           </Button>
@@ -222,59 +229,84 @@ export function LoginModal({
             leaveTo="opacity-0 scale-95"
           >
             <div
-              className={`relative flex w-full overflow-hidden rounded-3xl border bg-[#1C1C20] text-white shadow-2xl ${loggedInUsername !== null ? "max-w-md border-emerald-200/20" : "max-w-5xl border-white/[4%] lg:min-h-[640px]"}`}
+              className={`relative w-full ${loggedInUsername !== null ? "max-w-md" : "max-w-lg lg:max-w-5xl"}`}
               onClick={(e) => e.stopPropagation()}
             >
-              {loggedInUsername !== null ? (
-                <LoginSuccess username={loggedInUsername} />
-              ) : inOnboarding ? (
-                renderOnboarding()
-              ) : (
-                <>
-                  {/* ── Form pane ── (no dismiss control — login is required) */}
-                  <div className="relative flex w-full flex-col lg:w-1/2">
-                    <div className="flex flex-1 flex-col justify-center px-8 py-10 sm:px-10">
-                      <div className="mx-auto w-full max-w-sm">
-                        <div className="mb-8 text-center">
-                          <img
-                            src="/resources/logo/artcraft-icon.png"
-                            alt="ArtCraft"
-                            className="pointer-events-none mx-auto mb-6 h-12 w-auto select-none"
-                            draggable={false}
-                          />
-                          <h1 className="mb-2 text-2xl font-semibold">
-                            {isSignUp ? "Create your account" : "Welcome back"}
-                          </h1>
-                          <p className="text-sm text-white/60">
-                            {isSignUp
-                              ? "Sign up to start creating with ArtCraft"
-                              : "Log in to your account"}
-                          </p>
-                        </div>
+              <div
+                className={`relative flex w-full overflow-hidden border border-white/20 bg-[#1e1f22] text-white ${loggedInUsername !== null ? "" : "lg:min-h-[560px]"}`}
+              >
+                {loggedInUsername !== null ? (
+                  <LoginSuccess username={loggedInUsername} />
+                ) : inOnboarding ? (
+                  renderOnboarding()
+                ) : (
+                  <>
+                    {/* ── Form pane ── (no dismiss control — login is required) */}
+                    <div className="relative flex w-full flex-col lg:w-1/2">
+                      <div className="flex flex-1 flex-col justify-center px-6 py-10 sm:px-10 sm:py-12">
+                        <div className="w-full">
+                          <div className="mb-8 text-left">
+                            <img
+                              src="/resources/logo/artcraft-icon.png"
+                              alt="ArtCraft"
+                              className="pointer-events-none mb-8 h-8 w-auto select-none"
+                              draggable={false}
+                            />
+                            <h1 className="mb-3 text-balance font-display text-3xl leading-[1.05] tracking-tight sm:text-4xl">
+                              {isSignUp ? (
+                                "Create your account"
+                              ) : (
+                                <>
+                                  Welcome{" "}
+                                  <span className="font-serif-italic">back.</span>
+                                </>
+                              )}
+                            </h1>
+                            <p className="text-sm leading-relaxed text-white/60">
+                              {isSignUp
+                                ? "Sign up to start creating with ArtCraft"
+                                : "Log in to your creative workspace."}
+                            </p>
+                          </div>
 
-                        {!isSignUp && <DesktopLoginBridge onActiveChange={setIsChallengeActive} onStart={() => { authGeneration.current += 1; }} onSuccess={handleLoginSuccess} />}
-                        {!isChallengeActive && <ArtCraftSignUp
-                          onSubmit={handleAuthSubmit}
-                          isSignUp={isSignUp}
-                          onToggleMode={() => setIsSignUp((prev) => !prev)}
-                          errorMessage={errorMessage}
-                          isLoading={isLoading}
-                        />}
+                          {!isSignUp && <DesktopLoginBridge onActiveChange={setIsChallengeActive} onStart={() => { authGeneration.current += 1; }} onSuccess={handleLoginSuccess} />}
+                          {!isSignUp && !isChallengeActive && (
+                            <div className="mb-6 flex items-center gap-4 before:h-px before:flex-1 before:bg-white/15 after:h-px after:flex-1 after:bg-white/15">
+                              <span className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/40">
+                                or
+                              </span>
+                            </div>
+                          )}
+                          {!isChallengeActive && <ArtCraftSignUp
+                            onSubmit={handleAuthSubmit}
+                            isSignUp={isSignUp}
+                            onToggleMode={() => setIsSignUp((prev) => !prev)}
+                            errorMessage={errorMessage}
+                            isLoading={isLoading}
+                          />}
+                        </div>
+                      </div>
+
+                      <div className="px-6 pb-6 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-white/25 sm:px-10">
+                        &copy; {new Date().getFullYear()} ArtCraft. All rights
+                        reserved.
                       </div>
                     </div>
 
-                    <div className="px-8 pb-8 text-center text-xs text-white/20">
-                      &copy; {new Date().getFullYear()} ArtCraft. All rights
-                      reserved.
+                    {/* ── Showcase pane (desktop only) ── */}
+                    <div className="relative hidden border-l border-white/15 lg:block lg:w-1/2">
+                      <LoginShowcase videoUrl={videoUrl} />
                     </div>
-                  </div>
-
-                  {/* ── Showcase pane (desktop only) ── */}
-                  <div className="relative hidden lg:block lg:w-1/2">
-                    <LoginShowcase videoUrl={videoUrl} />
-                  </div>
-                </>
-              )}
+                  </>
+                )}
+              </div>
+              {FRAME_CORNERS.map((corner) => (
+                <span
+                  key={corner}
+                  aria-hidden="true"
+                  className={`frame-corner-mark ${corner}`}
+                />
+              ))}
             </div>
           </TransitionChild>
         </div>
@@ -287,7 +319,7 @@ export function LoginModal({
 // with a legibility gradient + caption. Mirrors the webapp auth-showcase.
 function LoginShowcase({ videoUrl }: { videoUrl: string }) {
   return (
-    <div className="absolute inset-2 overflow-hidden rounded-2xl bg-black">
+    <div className="absolute inset-0 overflow-hidden bg-[#1e1f22]">
       <video
         src={videoUrl}
         autoPlay
@@ -304,7 +336,7 @@ function LoginShowcase({ videoUrl }: { videoUrl: string }) {
       />
 
       <div className="pointer-events-none absolute inset-x-0 bottom-0 p-8">
-        <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-primary-300">
+        <p className="mb-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white/70">
           One of the cheapest
         </p>
         <h2 className="text-2xl font-bold leading-tight">
diff --git a/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx b/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
index 7520823ff8..e4916496eb 100644
--- a/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
+++ b/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
@@ -87,14 +87,14 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
     >
       <div
         ref={containerRef}
-        className="relative flex gap-1 rounded-full px-1 py-0.5 min-w-max bg-ui-panel border border-ui-panel-border"
+        className="relative flex gap-1 rounded-[3px] px-1 py-0.5 min-w-max bg-ui-panel border border-ui-panel-border"
         style={{ minWidth: 0 }}
         onMouseLeave={() => setHoveredIndex(-1)}
       >
         {/* Active tab background */}
         {selectedIndex >= 0 && (
           <div
-            className="absolute z-10 rounded-full bg-primary/25 border-2 border-primary shadow-md transition-all duration-150 ease-in-out -ml-[1px]"
+            className="absolute z-10 rounded-[2px] bg-base-fg transition-all duration-150 ease-in-out"
             style={{
               left: activeStyle.left,
               width: activeStyle.width,
@@ -106,7 +106,7 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
         {/* Hover background (only if hovering a different tab) */}
         {hoveredIndex !== -1 && hoveredIndex !== selectedIndex && (
           <div
-            className="absolute z-20 rounded-full bg-primary/10 transition-all duration-150 ease-in-out pointer-events-none -ml-[1px]"
+            className="absolute z-20 rounded-[2px] bg-base-fg/10 transition-all duration-150 ease-in-out pointer-events-none"
             style={{
               left: hoverStyle.left,
               width: hoverStyle.width,
@@ -151,7 +151,10 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
                 onClick={() => !disabled && onMenuChange(item.id)}
                 onMouseEnter={() => setHoveredIndex(idx)}
                 className={twMerge(
-                  "relative z-30 flex flex-col items-center justify-center px-3 py-2 rounded-full transition-all duration-150 text-base-fg",
+                  "relative z-30 flex flex-col items-center justify-center px-3 py-2 rounded-[2px] transition-colors duration-150",
+                  idx === selectedIndex
+                    ? "text-ui-panel"
+                    : "text-base-fg/70 hover:text-base-fg",
                   disabled ? "cursor-not-allowed opacity-60" : "",
                 )}
                 tabIndex={0}
diff --git a/frontend/libs/components/modal/src/lib/modal.tsx b/frontend/libs/components/modal/src/lib/modal.tsx
index 578db16efb..40182253a9 100644
--- a/frontend/libs/components/modal/src/lib/modal.tsx
+++ b/frontend/libs/components/modal/src/lib/modal.tsx
@@ -153,8 +153,7 @@ const AnimatedBackdrop = ({
         style={{
           opacity: styles.opacity,
           pointerEvents: "none",
-          background:
-            "radial-gradient(800px 400px at 10% -10%, rgba(45,129,255,0.10), transparent), radial-gradient(600px 320px at 110% 110%, rgba(28,182,190,0.10), transparent), rgba(0,0,0,0.60)",
+          background: "rgba(0, 0, 0, 0.7)",
         }}
       />
     </Dialog.Overlay>
@@ -194,19 +193,13 @@ const ExpandButton = ({ className, size = "md" }: ExpandButtonProps) => {
       aria-label={expanded ? "Restore modal size" : "Expand modal"}
       onClick={toggleExpanded}
       className={twMerge(
-        "flex items-center justify-center rounded-full bg-black/40 text-white/60 transition-all hover:bg-black/70 hover:text-white",
+        "flex items-center justify-center rounded-[3px] bg-black/40 text-white/60 transition-colors hover:bg-white hover:text-black",
         sizeClasses[size],
         "relative z-[70]",
         className,
       )}
     >
-      <DynamicIcon
-        icon={
-          expanded
-            ? Minimize2Icon
-            : Maximize2Icon
-        }
-      />
+      <DynamicIcon icon={expanded ? Minimize2Icon : Maximize2Icon} />
     </button>
   );
 };
@@ -1083,7 +1076,7 @@ export const Modal = ({
                   >
                     <animated.div
                       className={twMerge(
-                        "w-full max-w-lg rounded-2xl relative border border-ui-panel-border bg-ui-modal text-left align-middle shadow-2xl z-[70]",
+                        "w-full max-w-lg rounded-none relative border border-ui-panel-border bg-ui-modal text-left align-middle z-[70]",
                         childPadding && !expanded ? "p-4" : "",
                         className,
                         "!transition-none", // Always disable CSS transitions for spring animations
diff --git a/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx b/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
index 850e9e98c2..36b3e58951 100644
--- a/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
+++ b/frontend/libs/components/model-selector/src/lib/classy-model-selector.tsx
@@ -17,7 +17,7 @@ import {
   getCreatorIcon,
   getModelFamilyName,
 } from "@storyteller/model-list";
-import { ChevronUpIcon, CircleCheckIcon } from "lucide-react";
+import { ChevronUpIcon, CheckIcon } from "lucide-react";
 import { GenerationProvider } from "@storyteller/api-enums";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { defaultModelForPage } from "./defaultModelForPage";
@@ -107,7 +107,7 @@ function ProviderTooltipContent({
               onFinished?.();
             }}
             type="button"
-            className={`group flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 transition-all ${
+            className={`group flex cursor-pointer items-center justify-between rounded-[3px] px-2 py-2 transition-all ${
               selectedProvider === p
                 ? "bg-ui-controls/70 border-l-4 border-primary"
                 : "hover:bg-ui-controls/50"
@@ -118,8 +118,8 @@ function ProviderTooltipContent({
               {getProviderDisplayName(p)}
             </span>
             {selectedProvider === p && (
-              <span className="text-primary text-xl font-bold bg-white rounded-full p-0 h-4 w-4 flex items-center justify-center">
-                <CircleCheckIcon />
+              <span className="ml-2 flex h-5 w-5 shrink-0 items-center justify-center text-white">
+                <CheckIcon aria-hidden="true" className="h-4 w-4" strokeWidth={2.5} />
               </span>
             )}
           </button>
@@ -229,7 +229,7 @@ export function ClassyModelSelector({
                     : undefined;
                   const iconProvider = prov ?? allowedProviders[0];
                   return iconProvider ? (
-                    <div className="mr-1 rounded-md p-1.5 bg-ui-controls/60 group-hover:bg-ui-controls/80 transition-colors">
+                    <div className="mr-1 p-1.5 bg-ui-controls/60 group-hover:bg-ui-controls/80 transition-colors">
                       <span className="text-base-fg/70 group-hover:text-base-fg/90 text-lg">
                         {getProviderIcon(iconProvider)}
                       </span>
@@ -241,7 +241,7 @@ export function ClassyModelSelector({
             isSameModel(item.model as Model | undefined, selectedModel) &&
             selectedProvider &&
             hasMultipleProviders ? (
-              <div className="mr-1 rounded-md p-1.5 bg-primary/60 group-hover:bg-primary/80 transition-colors">
+              <div className="mr-1 p-1.5 bg-primary/60 group-hover:bg-primary/80 transition-colors">
                 <span className="text-base-fg/70 group-hover:text-base-fg/90 text-lg">
                   {getProviderIcon(selectedProvider)}
                 </span>
@@ -313,7 +313,7 @@ export function ClassyModelSelector({
         mode="hoverSelect"
         maxListHeight={maxListHeight}
         {...popoverProps}
-        buttonClassName="rounded-xl bg-ui-controls/90 hover:bg-ui-controls text-left shadow-sm px-3 py-1 gap-3 border border-ui-controls-border"
+        buttonClassName="rounded-[3px] bg-ui-controls text-left shadow-sm px-3 py-1 gap-3 border border-ui-controls-border"
         renderTrigger={(selectedItem) => {
           const modelTitle =
             selectedItem?.label ?? selectedModel?.selectorName ?? "";
@@ -340,9 +340,7 @@ export function ClassyModelSelector({
                   </span>
                 </div>
               </div>
-              <ChevronUpIcon
-                
-                className="text-base text-base-fg/70 self-center" />
+              <ChevronUpIcon className="text-base text-base-fg/70 self-center" />
             </div>
           );
         }}
diff --git a/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx b/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
index 2943361c66..d17ab83ab0 100644
--- a/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
+++ b/frontend/libs/components/moodboard/src/lib/grid/BoardGrid.tsx
@@ -81,9 +81,11 @@ export const BoardGrid = ({
   const [viewportH, setViewportH] = useState(0);
   const [marquee, setMarquee] = useState<Marquee | null>(null);
   const [focusedId, setFocusedId] = useState<string | null>(null);
-  const marqueeRef = useRef<{ active: boolean; moved: boolean; additive: boolean }>(
-    { active: false, moved: false, additive: false },
-  );
+  const marqueeRef = useRef<{
+    active: boolean;
+    moved: boolean;
+    additive: boolean;
+  }>({ active: false, moved: false, additive: false });
 
   useLayoutEffect(() => {
     const el = scrollRef.current;
@@ -103,7 +105,10 @@ export const BoardGrid = ({
   const groups = useMemo<SectionGroup[] | null>(() => {
     if (!sections || sections.length === 0) return null;
     const known = new Set(sections.map((s) => s.id));
-    const bySection = new Map<string | null, Array<{ id: string; aspect: number }>>();
+    const bySection = new Map<
+      string | null,
+      Array<{ id: string; aspect: number }>
+    >();
     for (const it of items) {
       const key = it.sectionId && known.has(it.sectionId) ? it.sectionId : null;
       const entry = { id: it.id, aspect: it.aspect };
@@ -119,7 +124,10 @@ export const BoardGrid = ({
     }));
     const ungrouped = bySection.get(null) ?? [];
     return ungrouped.length > 0
-      ? [{ id: null, name: "Ungrouped", collapsed: false, items: ungrouped }, ...named]
+      ? [
+          { id: null, name: "Ungrouped", collapsed: false, items: ungrouped },
+          ...named,
+        ]
       : named;
   }, [items, sections]);
 
@@ -313,7 +321,7 @@ export const BoardGrid = ({
         })}
         {marquee && marqueeRef.current.moved && (
           <div
-            className="pointer-events-none absolute rounded-[4px] border border-primary bg-primary/10"
+            className="pointer-events-none absolute rounded-[3px] border border-primary bg-primary/10"
             style={{
               left: Math.min(marquee.x0, marquee.x1),
               top: Math.min(marquee.y0, marquee.y1),
diff --git a/frontend/libs/components/pagescene/src/lib/Stage3DBody.tsx b/frontend/libs/components/pagescene/src/lib/Stage3DBody.tsx
index 32fcb0efb5..c1c84955c6 100644
--- a/frontend/libs/components/pagescene/src/lib/Stage3DBody.tsx
+++ b/frontend/libs/components/pagescene/src/lib/Stage3DBody.tsx
@@ -488,20 +488,20 @@ export const Stage3DBody = ({
               className="absolute left-0 top-0 w-full"
               onClick={handleOverlayClick}
             >
-              <div className="grid grid-cols-3 gap-4">
-                <div className="flex flex-col items-start gap-2">
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1 2xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]">
+                <div className="min-w-0 flex flex-col items-start gap-2">
                   {!isRecord && <ControlsTopButtons />}
                   {!isRecord && topBarStartSlot && (
                     <div className="pl-3">{topBarStartSlot}</div>
                   )}
                 </div>
-                <div className="flex flex-col items-center">
+                <div className="col-span-2 row-start-2 flex flex-col items-center 2xl:col-span-1 2xl:col-start-2 2xl:row-start-1">
                   <SceneModePill />
                   {!isRecord && (
                     <Controls3D showImageTo3DButton={showImageTo3DButton} />
                   )}
                 </div>
-                <div className="flex items-start justify-end gap-2 pr-3 pt-3">
+                <div className="col-start-2 row-start-1 flex min-w-0 flex-wrap items-start justify-end gap-2 pr-3 pt-3 2xl:col-start-3">
                   {/* Camera cluster: which camera drives the viewport +
                       the render-frame aspect ratio. */}
                   {!isRecord && <CameraStatusPill />}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/AnonHintChip/AnonHintChip.tsx b/frontend/libs/components/pagescene/src/lib/comps/AnonHintChip/AnonHintChip.tsx
index 5befab53ee..49079cd433 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/AnonHintChip/AnonHintChip.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/AnonHintChip/AnonHintChip.tsx
@@ -21,7 +21,7 @@ export const AnonHintChip = () => {
     <button
       type="button"
       onClick={handleClick}
-      className="glass flex items-center gap-2 rounded-full border border-white/10 px-3 py-1.5 text-xs font-medium text-white/80 shadow-md transition-colors hover:bg-ui-controls/100 hover:text-white"
+      className="flex shrink-0 items-center gap-2 whitespace-nowrap rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-1.5 text-xs font-medium text-white/80 transition-colors hover:bg-white/10 hover:text-white"
     >
       <LogInIcon  className="opacity-70" />
       Sign up to save
diff --git a/frontend/libs/components/pagescene/src/lib/comps/AspectRatioMenu/AspectRatioMenu.tsx b/frontend/libs/components/pagescene/src/lib/comps/AspectRatioMenu/AspectRatioMenu.tsx
index 1441aacdf5..2904373cc0 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/AspectRatioMenu/AspectRatioMenu.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/AspectRatioMenu/AspectRatioMenu.tsx
@@ -6,6 +6,7 @@ import { CameraAspectRatio } from "../../enums";
 import { setCameraAspect } from "../../actions";
 import { usePageSceneStore } from "../../PageSceneStore";
 import { EngineContext } from "../../contexts/EngineContext";
+import { TOOLBAR_BUTTON_CLASS_NAME } from "../toolbarStyles";
 
 // Render-frame aspect ratio picker. Same popover pattern as the prompt
 // boxes' AspectRatioPicker, but driving the 3D editor's camera letterbox
@@ -52,7 +53,7 @@ export const AspectRatioMenu = () => {
         position="bottom"
         panelTitle="Aspect Ratio"
         showIconsInList
-        buttonClassName="glass glass-no-hover h-[34px] rounded-full px-3 text-xs font-medium shadow-xl"
+        buttonClassName={TOOLBAR_BUTTON_CLASS_NAME}
         triggerIcon={<AspectRatioIcon ratio={current.proportions} />}
       />
     </Tooltip>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AnimationsModal.tsx b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AnimationsModal.tsx
index a3168c08fc..e0749c3cff 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AnimationsModal.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AnimationsModal.tsx
@@ -209,7 +209,7 @@ export const AnimationsModal = () => {
       <Modal
         isOpen={animationsModalVisible}
         onClose={handleClose}
-        className="relative h-[640px] max-w-4xl"
+        className="relative h-[640px] max-w-4xl bg-ui-controls"
         childPadding={false}
         showClose={false}
         backdropClassName="bg-transparent"
@@ -228,8 +228,8 @@ export const AnimationsModal = () => {
         </Modal.DragHandle>
         <div className="grid h-full grid-cols-12 gap-3">
           <div className="relative col-span-3 flex h-full flex-col p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:bg-white/10">
-            <div className="flex items-center justify-between gap-2.5 py-0.5">
-              <h2 className="text-[18px] font-semibold opacity-80">
+            <div className="flex h-10 items-center justify-between gap-2.5">
+              <h2 className="font-display text-lg tracking-tight text-white">
                 Animations
               </h2>
             </div>
@@ -240,9 +240,9 @@ export const AnimationsModal = () => {
                   key={tab.id}
                   variant={activeTab === tab.id ? "primary" : "secondary"}
                   className={twMerge(
-                    "w-full justify-start rounded-xl border border-white/[2%] bg-white/[4%] px-3.5 py-2.5 text-left hover:bg-white/15",
+                    "w-full justify-start rounded-[3px] border border-transparent bg-transparent px-3.5 py-2.5 text-left hover:bg-white/15",
                     activeTab === tab.id &&
-                      "border-primary bg-primary/10 hover:bg-primary/10",
+                      "border-white/15 bg-white/10 text-white hover:bg-white/10",
                   )}
                   onClick={() => setActiveTab(tab.id)}
                 >
@@ -259,7 +259,7 @@ export const AnimationsModal = () => {
                 variant="secondary"
                 icon={ArrowUpFromLineIcon}
                 iconClassName="opacity-70"
-                className="w-full justify-center rounded-xl border border-white/10 bg-white/[6%] px-3.5 py-2.5 hover:bg-white/15"
+                className="w-full justify-center rounded-[3px] border border-white/10 bg-white/[6%] px-3.5 py-2.5 hover:bg-white/15"
                 onClick={handleOpenUpload}
               >
                 Upload animation
@@ -281,13 +281,13 @@ export const AnimationsModal = () => {
                       ref={searchInputRef}
                       placeholder="Search animations"
                       className="relative z-[51] grow"
-                      inputClassName="pr-2.5"
+                      inputClassName="bg-white/5 pr-10 placeholder-white/40"
                       icon={SearchIcon}
                       value={searchTerm}
                       onChange={(e: ChangeEvent<HTMLInputElement>) =>
                         setSearchTerm(e.target.value)
                       }
-                      iconClassName="text-white/60"
+                      iconClassName="pointer-events-none left-3 top-1/2 h-4 w-4 -translate-y-1/2 p-0 text-white/50"
                     />
                     {searchTerm && (
                       <CloseButton
diff --git a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AssetModal.tsx b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AssetModal.tsx
index 3f335a7241..7e7a7a4841 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AssetModal.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/AssetModal.tsx
@@ -56,12 +56,12 @@ const AllTabSection = ({
     <div className="mb-2 flex items-center justify-between">
       <h3 className="text-md ml-2 font-semibold opacity-90">{label}</h3>
       <Button
-        variant="secondary"
-        className="mr-3 flex items-center gap-1 px-2 py-1 text-xs"
+        variant="ghost"
+        className="mr-3 h-6 gap-1 px-1.5 py-0 text-[10px] tracking-[0.08em] leading-none"
         onClick={onViewAll}
       >
         View all
-        <ChevronRightIcon  className="text-xs opacity-70" />
+        <ChevronRightIcon className="h-3 w-3 shrink-0 opacity-70" />
       </Button>
     </div>
     <div className="h-[170px]">
@@ -487,7 +487,7 @@ export const AssetModal = () => {
       <Modal
         isOpen={assetModalVisible}
         onClose={handleClose}
-        className="relative h-[640px] max-w-4xl"
+        className="relative h-[640px] max-w-4xl bg-ui-controls"
         childPadding={false}
         showClose={false}
         backdropClassName="bg-transparent"
@@ -507,8 +507,8 @@ export const AssetModal = () => {
         </Modal.DragHandle>
         <div className="grid h-full grid-cols-12 gap-3">
           <div className="relative col-span-3 flex h-full flex-col p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-gray-200 after:bg-white/10">
-            <div className="flex items-center justify-between gap-2.5 py-0.5">
-              <h2 className="text-[18px] font-semibold opacity-80">
+            <div className="flex h-10 items-center justify-between gap-2.5">
+              <h2 className="font-display text-lg tracking-tight text-white">
                 ArtCraft Presets
               </h2>
             </div>
@@ -519,9 +519,9 @@ export const AssetModal = () => {
                   key={tab.id}
                   variant={activeAssetTab === tab.id ? "primary" : "secondary"}
                   className={twMerge(
-                    "w-full justify-start rounded-xl border border-white/[2%] bg-white/[4%] px-3.5 py-2.5 text-left hover:bg-white/15",
+                    "w-full justify-start rounded-[3px] border border-transparent bg-transparent px-3.5 py-2.5 text-left hover:bg-white/15",
                     activeAssetTab === tab.id &&
-                      "border-primary bg-primary/10 hover:bg-primary/10",
+                      "border-white/15 bg-white/10 text-white hover:bg-white/10",
                   )}
                   onClick={() => setActiveAssetTab(tab.id)}
                 >
@@ -551,13 +551,13 @@ export const AssetModal = () => {
                       ref={searchInputRef}
                       placeholder="Search"
                       className="relative z-[51] grow"
-                      inputClassName="pr-2.5"
+                      inputClassName="bg-white/5 pr-10 placeholder-white/40"
                       icon={SearchIcon}
                       value={searchTerm}
                       onChange={(e: ChangeEvent<HTMLInputElement>) =>
                         setSearchTerm(e.target.value)
                       }
-                      iconClassName="text-white/60"
+                      iconClassName="pointer-events-none left-3 top-1/2 h-4 w-4 -translate-y-1/2 p-0 text-white/50"
                     />
                     {searchTerm && (
                       <CloseButton
diff --git a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/shared/ItemElement.tsx b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/shared/ItemElement.tsx
index 3da8df9d4e..a470f87af0 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/shared/ItemElement.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/AssetMenu/shared/ItemElement.tsx
@@ -110,7 +110,7 @@ export const ItemElement = ({ item }: Props) => {
       )}
 
       <div
-        className="pointer-events-none relative aspect-[16/12] w-full select-none overflow-hidden rounded-xl border-[3px] border-white/5 bg-brand-secondary-600 object-cover object-center transition-all group-hover:border-brand-primary"
+        className="pointer-events-none relative aspect-[16/12] w-full select-none overflow-hidden rounded-none border border-white/15 bg-brand-secondary-600 object-cover object-center transition-all group-hover:border-brand-primary"
         onPointerDown={(event) => dragAndDrop.onPointerDown(event, item, editor)}
         onClick={handleClick}
         style={{ cursor: "grab", pointerEvents: "auto" }}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/CameraStatusPill/CameraStatusPill.tsx b/frontend/libs/components/pagescene/src/lib/comps/CameraStatusPill/CameraStatusPill.tsx
index 88ffb94a47..f193db8f65 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/CameraStatusPill/CameraStatusPill.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/CameraStatusPill/CameraStatusPill.tsx
@@ -1,11 +1,13 @@
 import { useContext } from "react";
 import { MoveIcon, VideoIcon } from "lucide-react";
-import { DynamicIcon } from "@storyteller/icons";
+import { Button } from "@storyteller/ui-button";
+import { twMerge } from "tailwind-merge";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { EngineContext } from "../../contexts/EngineContext";
 import { toggleCameraView } from "../../actions";
 import { usePageSceneStore } from "../../PageSceneStore";
 import { EditorStates } from "../../enums";
+import { TOOLBAR_BUTTON_CLASS_NAME } from "../toolbarStyles";
 
 // Small status pill (top-left) showing which camera the viewport is driving:
 // the free "Viewport" camera vs looking through a render camera. Clicking it
@@ -28,21 +30,19 @@ export const CameraStatusPill = () => {
       position="bottom"
       delay={300}
     >
-      <button
+      <Button
         type="button"
+        variant="secondary"
+        icon={inCameraView ? VideoIcon : MoveIcon}
+        aria-pressed={inCameraView}
         onClick={() => editor && toggleCameraView(editor)}
-        className={
-          inCameraView
-            ? "flex h-[34px] items-center gap-2 rounded-full bg-brand-primary px-3 text-xs font-medium text-white shadow-xl transition-all duration-200"
-            : "glass glass-no-hover flex h-[34px] items-center gap-2 rounded-full px-3 text-xs font-medium text-base-fg/70 shadow-xl transition-all duration-200 hover:text-base-fg"
-        }
+        className={twMerge(
+          TOOLBAR_BUTTON_CLASS_NAME,
+          inCameraView && "border-white/30 bg-white/10",
+        )}
       >
-        <DynamicIcon
-          icon={inCameraView ? VideoIcon : MoveIcon}
-          className="h-3 w-3"
-        />
         {inCameraView ? renderCameraLabel : "Viewport"}
-      </button>
+      </Button>
     </Tooltip>
   );
 };
diff --git a/frontend/libs/components/pagescene/src/lib/comps/CompletionModal/CompletionModal.tsx b/frontend/libs/components/pagescene/src/lib/comps/CompletionModal/CompletionModal.tsx
index ccd3a19124..015ea7d7ff 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/CompletionModal/CompletionModal.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/CompletionModal/CompletionModal.tsx
@@ -82,12 +82,12 @@ export const CompletionModal = () => {
 
   return (
     <div className="absolute inset-0 z-[70] flex items-center justify-center bg-black/60 p-6 backdrop-blur-sm">
-      <div className="glass glass-no-hover flex w-full max-w-xl flex-col gap-4 rounded-2xl p-5 text-white shadow-2xl">
+      <div className="border border-ui-panel-border bg-ui-controls flex w-full max-w-xl flex-col gap-4 rounded-none p-5 text-white">
         <div className="text-sm font-semibold text-base-fg/90">
           {isVideo ? "Recording complete" : "Capture complete"}
         </div>
 
-        <div className="flex max-h-[52vh] items-center justify-center overflow-hidden rounded-xl bg-black/30">
+        <div className="flex max-h-[52vh] items-center justify-center overflow-hidden rounded-none bg-white/5">
           {isVideo ? (
             <video
               src={artifact.objectUrl}
@@ -129,7 +129,7 @@ export const CompletionModal = () => {
             type="button"
             onClick={() => clearProducedArtifact()}
             disabled={busy}
-            className="flex h-9 items-center gap-2 rounded-full px-3 text-sm text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg disabled:opacity-50"
+            className="flex h-9 items-center gap-2 rounded-[3px] px-3 text-sm text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg disabled:opacity-50"
           >
             <TrashIcon  className="h-3.5 w-3.5" />
             Discard
@@ -139,7 +139,7 @@ export const CompletionModal = () => {
             <button
               type="button"
               onClick={() => void upload()}
-              className="flex h-9 items-center gap-2 rounded-full bg-brand-primary px-4 text-sm font-medium text-white transition-transform hover:scale-[1.03]"
+              className="flex h-9 items-center gap-2 rounded-[3px] bg-brand-primary px-4 text-sm font-medium text-white transition-colors hover:brightness-110"
             >
               <RotateCwIcon  className="h-3.5 w-3.5" />
               Retry
@@ -148,7 +148,7 @@ export const CompletionModal = () => {
             <button
               type="button"
               onClick={() => void upload()}
-              className="flex h-9 items-center gap-2 rounded-full bg-brand-primary px-4 text-sm font-medium text-white transition-transform hover:scale-[1.03]"
+              className="flex h-9 items-center gap-2 rounded-[3px] bg-brand-primary px-4 text-sm font-medium text-white transition-colors hover:brightness-110"
             >
               <CloudUploadIcon  className="h-3.5 w-3.5" />
               Upload &amp; continue
diff --git a/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index efa0d8cacc..62717fbe51 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -305,7 +305,7 @@ export const ControlPanelSceneObject = () => {
       as="div"
       show={isShowing}
       className={twMerge(
-        "glass absolute bottom-16 right-0 mb-4 mr-4 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-lg border border-ui-panel-border p-3.5 text-white shadow-lg",
+        "border border-ui-panel-border bg-ui-controls absolute bottom-16 right-0 mb-4 mr-4 flex h-fit w-56 origin-bottom-right flex-col gap-2 rounded-none p-3.5 text-white",
       )}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -315,7 +315,7 @@ export const ControlPanelSceneObject = () => {
       leaveTo="opacity-0"
       style={{ transform: `scale(${getScale()})` }}
     >
-      <div className="mb-1 flex justify-between">
+      <div className="mb-1 flex justify-between border-b border-ui-panel-border pb-3">
         <div className="flex items-center gap-2">
           <BoxIcon />
           <p className="max-w-36 truncate font-semibold">
@@ -342,7 +342,7 @@ export const ControlPanelSceneObject = () => {
         className={"flex flex-col gap-2 overflow-y-auto"}
       >
         <div className="flex flex-col gap-1">
-          <p className="font-semibold text-sm">Color</p>
+          <p className="font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/60">Color</p>
           {/* Native <input type="color"> is nested INSIDE the Button's
               <label> so Safari opens the picker reliably. Safari refuses
               to open a color picker triggered via label[htmlFor]→input
@@ -385,7 +385,7 @@ export const ControlPanelSceneObject = () => {
           </Button>
         </div>
         <div className="flex flex-col gap-2">
-          <p className="font-semibold text-sm">Location</p>
+          <p className="font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/60">Location</p>
           <InputVector
             x={localPosition.x.toString()}
             y={localPosition.y.toString()}
@@ -398,7 +398,7 @@ export const ControlPanelSceneObject = () => {
         </div>
 
         <div className="flex flex-col gap-2">
-          <p className="font-semibold text-sm">Rotation</p>
+          <p className="font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/60">Rotation</p>
           <InputVector
             x={localRotation.x.toString()}
             y={localRotation.y.toString()}
@@ -413,7 +413,7 @@ export const ControlPanelSceneObject = () => {
 
         <div className="mb-1 flex flex-col gap-2">
           <DraggablePrecisionMutator onChange={handleUniformScaleChange}>
-            <p className="font-semibold text-sm">Scale</p>
+            <p className="font-mono text-[11px] font-medium uppercase tracking-[0.12em] text-white/60">Scale</p>
           </DraggablePrecisionMutator>
           <InputVector
             x={localScale.x.toString()}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Controls3D/Controls3D.tsx b/frontend/libs/components/pagescene/src/lib/comps/Controls3D/Controls3D.tsx
index 7780016bcb..dd52f44252 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Controls3D/Controls3D.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Controls3D/Controls3D.tsx
@@ -169,14 +169,14 @@ export const Controls3D = ({
   return (
     <>
       <div className="flex justify-center pt-3">
-        <div className="glass rounded-2xl p-1.5 text-white shadow-xl h-fit">
+        <div className="border border-ui-panel-border bg-ui-controls rounded-none p-1.5 text-white h-fit">
           <div className="flex items-center justify-center gap-1.5">
             <div className="flex items-center gap-1.5">
               <div className="relative">
                 {showEmptySceneTooltip && (
                   <div className="absolute -bottom-14 left-1/2 -translate-x-1/2 transform whitespace-nowrap">
-                    <div className="animate-bounce rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow-lg">
-                      Click + to add your first 3D asset!
+                    <div className="rounded-[3px] bg-primary px-4 py-2 text-sm font-medium text-white">
+                      Click + to add your first 3D asset
                       <div className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 transform bg-primary" />
                     </div>
                   </div>
@@ -236,7 +236,7 @@ export const Controls3D = ({
                     ]}
                     onPanelAction={handleAddAssetAction}
                     showIconsInList
-                    buttonClassName={`h-9 w-9 p-2 rounded-xl text-lg ${
+                    buttonClassName={`h-9 w-9 p-2 rounded-[3px] text-lg ${
                       showEmptySceneTooltip
                         ? "bg-primary/90 hover:bg-primary/70"
                         : "border-transparent bg-primary/90 hover:bg-primary/70"
@@ -254,7 +254,7 @@ export const Controls3D = ({
                 >
                   <Button
                     icon={WandSparklesIcon}
-                    className="text-md h-9 w-9 rounded-[10px] bg-white/15 transition-colors hover:bg-white/25"
+                    className="text-md h-9 w-9 rounded-[3px] bg-white/15 transition-colors hover:bg-white/25"
                     variant="secondary"
                     onClick={handleOpenCreate3dModal}
                   />
@@ -262,13 +262,14 @@ export const Controls3D = ({
               )}
             </div>
 
-            <span className="opacity-10">|</span>
+            <span aria-hidden="true" className="h-5 w-px bg-white/15" />
             <ButtonIconSelect
               options={modes}
               onOptionChange={handleModeChange}
               selectedOption={selectedMode}
+              buttonClassName="rounded-[3px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-300"
             />
-            <span className="opacity-10">|</span>
+            <span aria-hidden="true" className="h-5 w-px bg-white/15" />
             {selectedMode === "scale" ? (
               <Tooltip
                 content="Scale is always in local space"
@@ -277,7 +278,7 @@ export const Controls3D = ({
               >
                 <button
                   disabled
-                  className="flex min-w-[92px] cursor-not-allowed items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-3 py-1.5 text-sm font-medium text-base-fg opacity-40 transition-colors duration-150"
+                  className="flex min-w-[92px] cursor-not-allowed items-center justify-center gap-2 rounded-[3px] border border-white/10 bg-white/[0.04] px-3 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-base-fg opacity-40 transition-colors duration-150"
                 >
                   <BoxIcon className="h-3 w-3 text-base-fg/60" />
                   Local
@@ -290,7 +291,7 @@ export const Controls3D = ({
                 delay={300}
               >
                 <button
-                  className="flex min-w-[92px] items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-3 py-1.5 text-sm font-medium text-base-fg transition-colors duration-150 hover:bg-white/[0.08]"
+                  className="flex min-w-[92px] items-center justify-center gap-2 rounded-[3px] border border-white/10 bg-white/[0.04] px-3 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-base-fg transition-colors duration-150 hover:bg-white/[0.08]"
                   onClick={() => editor?.gizmo.toggleTransformSpace()}
                 >
                   <DynamicIcon
diff --git a/frontend/libs/components/pagescene/src/lib/comps/ControlsTopButtons/ControlsTopButtons.tsx b/frontend/libs/components/pagescene/src/lib/comps/ControlsTopButtons/ControlsTopButtons.tsx
index 2e2b8a00cb..6f1d940e46 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/ControlsTopButtons/ControlsTopButtons.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/ControlsTopButtons/ControlsTopButtons.tsx
@@ -15,6 +15,8 @@ import { DEFAULT_CAMERA_ASPECT_RATIO, ToastTypes } from "../../enums";
 import { getSceneGenerationMetaData } from "../../sceneMetadata";
 import { LoadUserScenes } from "./LoadUserScenes";
 
+import { TOOLBAR_BUTTON_CLASS_NAME } from "../toolbarStyles";
+
 const isNumberString = (s: string): boolean => /^\d+$/.test(s);
 
 export const ControlsTopButtons = () => {
@@ -239,11 +241,11 @@ export const ControlsTopButtons = () => {
 
   return (
     <div className="flex flex-col gap-2 pl-3 pt-3">
-      <div className="flex gap-1.5">
+      <div className="flex items-center gap-1.5">
         <ButtonDropdown
           label="File"
           icon={FileIcon}
-          className="shadow-xl"
+          className={TOOLBAR_BUTTON_CLASS_NAME}
           options={[
             {
               label: "New scene",
@@ -379,7 +381,7 @@ export const ControlsTopButtons = () => {
 
         <Button
           icon={outlinerShowing ? SquareCheckIcon : SquareIcon}
-          className="shadow-xl"
+          className={TOOLBAR_BUTTON_CLASS_NAME}
           iconClassName={twMerge(
             "text-[16px]",
             outlinerShowing ? "text-white" : "text-white/20",
@@ -397,7 +399,7 @@ export const ControlsTopButtons = () => {
         <Button
           icon={KeyboardIcon}
           variant="secondary"
-          className="shadow-xl"
+          className={TOOLBAR_BUTTON_CLASS_NAME}
           iconClassName={twMerge(
             "text-[16px]",
             cheatsheetPinned ? "text-white" : "text-white/20",
diff --git a/frontend/libs/components/pagescene/src/lib/comps/ExitCameraView/ExitCameraView.tsx b/frontend/libs/components/pagescene/src/lib/comps/ExitCameraView/ExitCameraView.tsx
index 9404317838..4accdcf891 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/ExitCameraView/ExitCameraView.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/ExitCameraView/ExitCameraView.tsx
@@ -25,7 +25,7 @@ export const ExitCameraView = ({ className }: { className?: string }) => {
       type="button"
       onClick={() => editor && toggleCameraView(editor)}
       className={twMerge(
-        "flex h-11 items-center gap-2 whitespace-nowrap rounded-xl bg-brand-primary px-4 text-sm font-medium text-white shadow-xl transition-colors hover:bg-brand-primary/90",
+        "flex h-11 items-center gap-2 whitespace-nowrap rounded-[3px] bg-brand-primary px-4 text-sm font-medium text-white transition-colors hover:bg-brand-primary/90",
         className,
       )}
     >
diff --git a/frontend/libs/components/pagescene/src/lib/comps/FocalLengthDisplay/FocalLengthDisplay.tsx b/frontend/libs/components/pagescene/src/lib/comps/FocalLengthDisplay/FocalLengthDisplay.tsx
index 0880cd0f7d..f982527fd8 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/FocalLengthDisplay/FocalLengthDisplay.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/FocalLengthDisplay/FocalLengthDisplay.tsx
@@ -15,7 +15,7 @@ export const FocalLengthDisplay = () => {
       leaveTo="opacity-0"
     >
       <div className="absolute left-1/2 top-16 z-10 -translate-x-1/2 transform">
-        <div className="glass rounded-xl px-5 py-2.5 text-center text-2xl font-bold text-white">
+        <div className="border border-ui-panel-border bg-ui-controls rounded-none px-5 py-2.5 text-center text-2xl font-bold text-white">
           {focalLengthDragging.focalLength}mm
         </div>
       </div>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Outliner/Outliner.tsx b/frontend/libs/components/pagescene/src/lib/comps/Outliner/Outliner.tsx
index ea1a51553f..dcb821369c 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Outliner/Outliner.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Outliner/Outliner.tsx
@@ -58,9 +58,9 @@ const OutlinerRow = ({ item }: { item: OutlinerItem }) => {
     <div
       role="button"
       className={twMerge(
-        "flex cursor-pointer items-center justify-between gap-2 rounded-xl border border-transparent px-3 py-2 outline-none transition-colors duration-100 hover:bg-white/5 focus:outline-none",
+        "flex cursor-pointer items-center justify-between gap-2 rounded-[3px] border border-transparent px-3 py-2 transition-colors duration-100 hover:bg-white/5 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-300",
         isSelected &&
-          "border-brand-primary bg-brand-primary/15 hover:bg-brand-primary/15",
+          "border-white/20 bg-white/10 hover:bg-white/10",
       )}
       onDoubleClick={handleDoubleClick}
       onClick={handleSelect}
@@ -146,7 +146,7 @@ export const Outliner = () => {
       as="div"
       show={showing}
       className={twMerge(
-        "flex h-[45vh] w-[260px] flex-col overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel shadow-lg",
+        "flex h-[45vh] w-[260px] flex-col overflow-hidden rounded-[3px] border border-ui-panel-border bg-ui-controls",
       )}
       enter="transition-opacity duration-150"
       enterFrom="opacity-0"
@@ -155,18 +155,23 @@ export const Outliner = () => {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="flex items-center px-4 pb-1 pt-3">
-        <h1 className="grow text-base font-semibold">Scene</h1>
+      <div className="flex items-center border-b border-ui-panel-border px-3 py-2.5">
+        <h2 className="grow font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">Scene</h2>
         <Button
           icon={PlusIcon}
-          className="h-6 bg-transparent px-1.5 text-sm font-medium text-white/80 hover:bg-transparent hover:text-white"
+          variant="ghost"
+          iconClassName="h-3.5 w-3.5 shrink-0"
+          className="h-7 gap-1 px-1.5 py-0 text-[11px] leading-none text-white/70 hover:text-white"
           onClick={openAssetModal}
         >
           Add
         </Button>
         <Button
           icon={XIcon}
-          className="h-5 bg-transparent p-0 text-xl opacity-50 hover:bg-transparent hover:opacity-90"
+          variant="ghost"
+          aria-label="Close scene panel"
+          iconClassName="h-4 w-4 shrink-0"
+          className="h-7 w-7 p-0 text-white/50 hover:text-white"
           onClick={() => {
             usePageSceneStore.getState().setOutlinerShowing(false);
           }}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/PoseModeSelector.tsx b/frontend/libs/components/pagescene/src/lib/comps/PoseModeSelector.tsx
index ff8652d73a..207112d4ce 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/PoseModeSelector.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/PoseModeSelector.tsx
@@ -44,7 +44,7 @@ export const PoseModeSelector: React.FC<PoseModeSelectorProps> = () => {
             <Button
               icon={FootprintsIcon}
               onClick={handleModeChange}
-              className="rounded-xl shadow-xl outline-none focus-visible:outline-none"
+              className="rounded-[3px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-300"
             >
               Enter Pose Mode
             </Button>
@@ -52,7 +52,7 @@ export const PoseModeSelector: React.FC<PoseModeSelectorProps> = () => {
             <Button
               icon={CheckIcon}
               onClick={handleModeChange}
-              className="rounded-xl outline-none  focus-visible:outline-none"
+              className="rounded-[3px] outline-none  focus-visible:outline-none"
             >
               Done
             </Button>
@@ -71,7 +71,7 @@ export const PoseModeSelector: React.FC<PoseModeSelectorProps> = () => {
           <Button
             icon={FilmIcon}
             onClick={() => openAnimationsModal()}
-            className="rounded-xl shadow-xl outline-none focus-visible:outline-none"
+            className="rounded-[3px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-300"
           >
             Add Animation
           </Button>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/PrecisionSelector/PrecisionSelector.tsx b/frontend/libs/components/pagescene/src/lib/comps/PrecisionSelector/PrecisionSelector.tsx
index 13c9792a08..9dc1b24592 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/PrecisionSelector/PrecisionSelector.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/PrecisionSelector/PrecisionSelector.tsx
@@ -27,7 +27,7 @@ export const PrecisionSelector = () => {
         <span
           onMouseEnter={() => handleMouseEnterItem(scale)}
           key={index}
-          className="flex bg-ui-panel text-sm justify-center align-middle justify-items-center px-2 hover:bg-ui-controls"
+          className="flex bg-ui-controls text-sm justify-center align-middle justify-items-center px-2 hover:bg-white/10"
         >
           {scale}
         </span>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/PreviewEngineCamera/PreviewEngineCamera.tsx b/frontend/libs/components/pagescene/src/lib/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
index d26b49896f..eed872f693 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/PreviewEngineCamera/PreviewEngineCamera.tsx
@@ -84,7 +84,7 @@ export const PreviewEngineCamera = () => {
       >
         <div
           className={twMerge(
-            "origin -z-10 flex h-auto w-full flex-wrap items-center gap-1.5 rounded-t-lg bg-ui-panel p-2 text-white",
+            "origin -z-10 flex h-auto w-full flex-wrap items-center gap-1.5 rounded-t-lg bg-ui-controls p-2 text-white",
             camAspect !== CameraAspectRatio.VERTICAL_9_16
               ? "justify-between"
               : "flex-col justify-center",
@@ -134,7 +134,7 @@ export const PreviewEngineCamera = () => {
                   : "aspect-video",
           )}
         >
-          <div className="flex h-full w-full items-center justify-center bg-ui-panel">
+          <div className="flex h-full w-full items-center justify-center bg-ui-controls">
             <LoaderCircleIcon size="3em" className="animate-spin" />
           </div>
           <div className="absolute left-0 top-0 h-full w-full overflow-hidden">
diff --git a/frontend/libs/components/pagescene/src/lib/comps/PreviewImages.tsx b/frontend/libs/components/pagescene/src/lib/comps/PreviewImages.tsx
index 4d109355bc..fbc6d41906 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/PreviewImages.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/PreviewImages.tsx
@@ -13,7 +13,7 @@ export const PreviewImages = () => {
   return (
     <div className="flex justify-center gap-1">
       <div
-        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-panel"
+        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-controls"
         style={{ height: imageHeight, width: imageWidth }}
       >
         <canvas id="raw-preview" width={imageWidth} height={imageHeight} />
@@ -24,7 +24,7 @@ export const PreviewImages = () => {
           className="text-3xl opacity-60" />
       </div>
       <div
-        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-panel"
+        className="block w-full overflow-hidden rounded-lg border border-ui-controls/25 bg-ui-controls"
         style={{ height: imageHeight, width: imageWidth }}
       >
         <img
diff --git a/frontend/libs/components/pagescene/src/lib/comps/RecordControls/RecordControls.tsx b/frontend/libs/components/pagescene/src/lib/comps/RecordControls/RecordControls.tsx
index ea4413b49f..cbf3188208 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/RecordControls/RecordControls.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/RecordControls/RecordControls.tsx
@@ -31,7 +31,7 @@ export const RecordControls = () => {
           type="button"
           onClick={() => editor && captureStill(editor)}
           disabled={busy}
-          className="glass glass-no-hover flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-base-fg shadow-xl hover:bg-white/10 disabled:opacity-50"
+          className="border border-ui-panel-border bg-ui-controls flex items-center gap-2 rounded-[3px] px-5 py-2.5 text-sm font-medium text-base-fg hover:bg-white/10 disabled:opacity-50"
         >
           <CameraIcon  className="h-3.5 w-3.5" />
           Capture
@@ -49,7 +49,7 @@ export const RecordControls = () => {
             type="button"
             onClick={() => editor && void recordVideo(editor)}
             disabled={busy || !timelineExists}
-            className="flex items-center gap-2 rounded-full bg-red px-5 py-2.5 text-sm font-semibold text-white shadow-xl transition-transform hover:scale-[1.03] disabled:opacity-50 disabled:hover:scale-100"
+            className="flex items-center gap-2 rounded-[3px] bg-red px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:brightness-110 disabled:opacity-50"
           >
             <CircleIcon  className="h-3 w-3" />
             Record
diff --git a/frontend/libs/components/pagescene/src/lib/comps/SceneModePill/SceneModePill.tsx b/frontend/libs/components/pagescene/src/lib/comps/SceneModePill/SceneModePill.tsx
index 76880b3434..d337750288 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/SceneModePill/SceneModePill.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/SceneModePill/SceneModePill.tsx
@@ -22,9 +22,9 @@ export const SceneModePill = () => {
         activeTab={sceneMode}
         onTabChange={(id) => setSceneMode(id as SceneMode)}
         className="w-auto"
-        listClassName="rounded-full px-1"
-        tabClassName="rounded-full px-5 py-1"
-        indicatorClassName="rounded-full bg-white/95"
+        listClassName="rounded-none border border-ui-panel-border bg-ui-controls px-1"
+        tabClassName="rounded-[3px] px-5 py-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-300"
+        indicatorClassName="rounded-[3px] bg-white/95"
         selectedTabClassName="text-black"
       />
     </div>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/MotionPopover.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/MotionPopover.tsx
index ea58587ddb..7785437525 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/MotionPopover.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/MotionPopover.tsx
@@ -75,7 +75,7 @@ export const MotionPopover = ({
   return (
     <div
       id="motion-popover"
-      className="glass glass-no-hover pointer-events-auto absolute bottom-full z-50 mb-2 w-[180px] -translate-x-1/2 select-none rounded-2xl p-3 shadow-xl backdrop-blur-md"
+      className="border border-ui-panel-border bg-ui-controls pointer-events-auto absolute bottom-full z-50 mb-2 w-[180px] -translate-x-1/2 select-none rounded-none p-3"
       style={{ left: `${Math.max(12, Math.min(88, leftPercent))}%` }}
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
@@ -95,7 +95,7 @@ export const MotionPopover = ({
               type="button"
               title={p.label}
               onClick={() => commit({ ...preset })}
-              className={`flex h-8 items-center justify-center rounded-md border transition-colors ${
+              className={`flex h-8 items-center justify-center rounded-[3px] border transition-colors ${
                 active
                   ? "border-brand-primary bg-brand-primary/20"
                   : "border-ui-controls-border/60 hover:bg-ui-controls/40"
@@ -118,7 +118,7 @@ export const MotionPopover = ({
       <svg
         ref={svgRef}
         viewBox={`0 0 ${BOX} ${BOX}`}
-        className="w-full touch-none rounded-lg bg-black/20"
+        className="w-full touch-none rounded-[3px] bg-white/5"
         onPointerMove={onPointerMove}
         onPointerUp={() => setDragging(null)}
         onPointerLeave={() => setDragging(null)}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineBar.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineBar.tsx
index 03d155e0cb..67cf3e3004 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineBar.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineBar.tsx
@@ -25,22 +25,24 @@ export const TimelineBar = ({ readOnly = false }: { readOnly?: boolean }) => {
 
   return (
     <div
-      className="glass glass-no-hover flex w-full select-none items-center gap-3 rounded-2xl px-4 py-2 text-white shadow-xl"
+      className="border border-ui-panel-border bg-ui-controls flex w-full select-none items-center gap-3 rounded-none px-4 py-2 text-white"
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
     >
       <button
         type="button"
         onClick={togglePlay}
-        className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/80 hover:bg-white/10"
+        aria-label={isPlaying ? "Pause timeline" : "Play timeline"}
+        className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/80 hover:bg-white/10"
       >
         <DynamicIcon icon={isPlaying ? PauseIcon : PlayIcon} className="h-3.5 w-3.5" />
       </button>
-      <span className="w-9 shrink-0 tabular-nums text-xs text-base-fg/70">
+      <span className="w-9 shrink-0 font-mono tabular-nums text-xs text-base-fg/70">
         {formatTimecode(playhead)}
       </span>
       <input
         type="range"
+        aria-label="Timeline playhead"
         min={0}
         max={duration}
         step={0.01}
@@ -53,7 +55,7 @@ export const TimelineBar = ({ readOnly = false }: { readOnly?: boolean }) => {
         className="h-1 flex-1 cursor-pointer accent-white"
       />
       {readOnly ? (
-        <span className="w-9 shrink-0 text-right tabular-nums text-xs text-base-fg/70">
+        <span className="w-9 shrink-0 text-right font-mono tabular-nums text-xs text-base-fg/70">
           {formatTimecode(duration)}
         </span>
       ) : (
@@ -64,7 +66,7 @@ export const TimelineBar = ({ readOnly = false }: { readOnly?: boolean }) => {
           type="button"
           title="Expand timeline"
           onClick={() => setExpanded(true)}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/60 hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/60 hover:bg-white/10"
         >
           <ChevronUpIcon  className="h-3 w-3" />
         </button>
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
index 24cb25e4f6..0838be03b0 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineClipRow.tsx
@@ -1,6 +1,12 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { FilmIcon, PlusIcon, RepeatIcon, SplineIcon, XIcon } from "lucide-react";
+import {
+  FilmIcon,
+  PlusIcon,
+  RepeatIcon,
+  SplineIcon,
+  XIcon,
+} from "lucide-react";
 import { EngineContext } from "../../contexts/EngineContext/EngineContext";
 import {
   addBakedClipToObject,
@@ -13,13 +19,14 @@ import {
   setClipLoop,
 } from "../../actions";
 import type { TimelineUndoSnapshot } from "../../engine/editor/TimelineController";
-import {
-  usePageSceneStore,
-  type ClipLane,
-} from "../../PageSceneStore";
+import { usePageSceneStore, type ClipLane } from "../../PageSceneStore";
 import { DEFAULT_TIMELINE_FPS } from "../../engine/timeline/types";
 import { ToastTypes } from "../../enums";
-import { fractionToTime, quantizeToFrame, timeToFraction } from "./timelineUtils";
+import {
+  fractionToTime,
+  quantizeToFrame,
+  timeToFraction,
+} from "./timelineUtils";
 
 interface TimelineClipRowProps {
   objectUuid: string;
@@ -64,9 +71,7 @@ export const TimelineClipRow = ({
   // effectively invisible.
   const [pickerAnchor, setPickerAnchor] = useState<DOMRect | null>(null);
   const pickerMenuRef = useRef<HTMLDivElement>(null);
-  const selectedLaneId = usePageSceneStore(
-    (s) => s.timelineSelectedClipLaneId,
-  );
+  const selectedLaneId = usePageSceneStore((s) => s.timelineSelectedClipLaneId);
 
   // A fixed-position popup can't follow its button, so any outside scroll
   // or resize closes it (scrolling INSIDE the popup's own list is exempt).
@@ -164,14 +169,14 @@ export const TimelineClipRow = ({
   return (
     <div className="flex items-center gap-3 py-0.5">
       <div className="flex w-32 shrink-0 items-center gap-2 truncate ps-6 text-xs text-base-fg/50">
-        <FilmIcon  className="h-3 w-3 opacity-60" />
+        <FilmIcon className="h-3 w-3 opacity-60" />
         <span className="truncate">Animation</span>
         {bakedClips && bakedClips.length > 0 && (
           <div className="shrink-0">
             <button
               type="button"
               title="Add one of this object's baked animations"
-              className={`flex h-4 w-4 items-center justify-center rounded-[4px] transition-colors ${
+              className={`flex h-4 w-4 items-center justify-center rounded-[3px] transition-colors ${
                 pickerAnchor
                   ? "bg-brand-primary text-white"
                   : "bg-white/10 text-base-fg/70 hover:bg-white/20 hover:text-base-fg"
@@ -182,7 +187,7 @@ export const TimelineClipRow = ({
                 )
               }
             >
-              <PlusIcon  className="h-2.5 w-2.5" />
+              <PlusIcon className="h-2.5 w-2.5" />
             </button>
             {pickerAnchor &&
               ReactDOM.createPortal(
@@ -227,7 +232,7 @@ export const TimelineClipRow = ({
         /* overflow-hidden: strips are engine-clamped into the lane, but any
            transient out-of-range placement must clip here rather than paint
            over the add-button column. */
-        className="relative h-6 flex-1 overflow-hidden rounded-md bg-black/20"
+        className="relative h-6 flex-1 overflow-hidden rounded-md bg-white/5"
         onPointerMove={onPointerMove}
         onPointerUp={endDrag}
         onPointerLeave={endDrag}
@@ -294,7 +299,7 @@ export const TimelineClipRow = ({
                   editor && setClipLoop(editor, lane.id, !strip.loop)
                 }
               >
-                <RepeatIcon  className="h-2.5 w-2.5" />
+                <RepeatIcon className="h-2.5 w-2.5" />
               </button>
 
               <span className="min-w-0 flex-1 truncate">{strip.name}</span>
@@ -316,7 +321,7 @@ export const TimelineClipRow = ({
                       .setTimelineSelectedClipLane(null);
                   }}
                 >
-                  <XIcon  className="h-2.5 w-2.5" />
+                  <XIcon className="h-2.5 w-2.5" />
                 </button>
               )}
 
@@ -365,13 +370,13 @@ export const TimelineClipRow = ({
                 className={`absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border transition-colors ${
                   active
                     ? "border-brand-primary bg-brand-primary text-white"
-                    : "border-dashed border-white/30 bg-black/30 text-white/40 hover:border-white/60 hover:text-white/80"
+                    : "border-dashed border-white/30 bg-white/5 text-white/40 hover:border-white/60 hover:text-white/80"
                 }`}
                 style={{ left: `${midPct}%` }}
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={() => toggleTransition(lane)}
               >
-                <SplineIcon  className="h-2 w-2" />
+                <SplineIcon className="h-2 w-2" />
               </button>
             );
           })}
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineEditor.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineEditor.tsx
index fcbc7de5e5..3affc733a7 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineEditor.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineEditor.tsx
@@ -317,24 +317,25 @@ export const TimelineEditor = () => {
   return (
     <div
       id="timeline-editor"
-      className="glass glass-no-hover absolute bottom-4 left-1/2 w-[90vw] max-w-5xl -translate-x-1/2 select-none rounded-2xl p-3 text-white shadow-xl"
+      className="border border-ui-panel-border bg-ui-controls absolute bottom-4 left-1/2 w-[90vw] max-w-5xl -translate-x-1/2 select-none rounded-none p-3 text-white"
       onMouseDown={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
     >
       {/* transport + collapse */}
-      <div className="mb-2 flex items-center gap-2">
+      <div className="mb-2 flex items-center gap-2 border-b border-ui-panel-border pb-2">
         <button
           type="button"
           title="Go to start"
           onClick={() => editor && seekTimeline(editor, 0)}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/70 hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/70 hover:bg-white/10"
         >
           <SkipBackIcon  className="h-3.5 w-3.5" />
         </button>
         <button
           type="button"
           onClick={togglePlay}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/90 hover:bg-white/10"
+          aria-label={isPlaying ? "Pause timeline" : "Play timeline"}
+          className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/90 hover:bg-white/10"
         >
           <DynamicIcon
             icon={isPlaying ? PauseIcon : PlayIcon}
@@ -345,11 +346,11 @@ export const TimelineEditor = () => {
           type="button"
           title="Go to end"
           onClick={() => editor && seekTimeline(editor, duration)}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/70 hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/70 hover:bg-white/10"
         >
           <SkipForwardIcon  className="h-3.5 w-3.5" />
         </button>
-        <span className="ml-2 tabular-nums text-xs text-base-fg/60">
+        <span className="ml-2 font-mono tabular-nums text-xs text-base-fg/60">
           {formatTimecodeFrames(playhead, fps)} / {formatTimecode(duration)}
         </span>
         {/* ml-auto lives on a wrapper: Tooltip's className styles the popup
@@ -368,7 +369,7 @@ export const TimelineEditor = () => {
             <button
               type="button"
               onClick={() => setFocusSelected(!focusSelected)}
-              className={`flex h-7 w-7 items-center justify-center rounded-full transition-colors ${
+              className={`flex h-7 w-7 items-center justify-center rounded-[3px] transition-colors ${
                 focusSelected
                   ? "bg-primary/20 text-white"
                   : "text-base-fg/60 hover:bg-white/10"
@@ -382,7 +383,7 @@ export const TimelineEditor = () => {
           type="button"
           title="Collapse timeline"
           onClick={() => setExpanded(false)}
-          className="flex h-7 w-7 items-center justify-center rounded-full text-base-fg/60 hover:bg-white/10"
+          className="flex h-7 w-7 items-center justify-center rounded-[3px] text-base-fg/60 hover:bg-white/10"
         >
           <ChevronDownIcon  className="h-3 w-3" />
         </button>
@@ -552,7 +553,7 @@ export const TimelineEditor = () => {
               footer={
                 <button
                   type="button"
-                  className="mt-2 w-full rounded-md border border-ui-controls-border/60 px-2 py-1.5 text-[11px] text-base-fg/80 transition-colors hover:bg-ui-controls/40"
+                  className="mt-2 w-full rounded-[3px] border border-ui-controls-border/60 px-2 py-1.5 text-[11px] text-base-fg/80 transition-colors hover:bg-ui-controls/40"
                   onClick={() => {
                     if (editor) {
                       setClipTransitionEasing(
diff --git a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineTrackRow.tsx b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineTrackRow.tsx
index 8b743b29bb..30df3623c0 100644
--- a/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineTrackRow.tsx
+++ b/frontend/libs/components/pagescene/src/lib/comps/Timeline/TimelineTrackRow.tsx
@@ -90,7 +90,7 @@ export const TimelineTrackRow = ({
 
       <div
         ref={laneRef}
-        className="relative h-9 flex-1 rounded-lg bg-black/30"
+        className="relative h-9 flex-1 rounded-lg bg-white/5"
         onPointerMove={(e) => {
           if (!draggingId.current || !editor) return;
           moveKeyframe(
@@ -129,7 +129,7 @@ export const TimelineTrackRow = ({
               type="button"
               title="Edit easing"
               data-easing-chip
-              className={`absolute top-1/2 flex h-5 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md border bg-black/60 ${
+              className={`absolute top-1/2 flex h-5 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-md border bg-ui-controls ${
                 active
                   ? "border-brand-primary text-white"
                   : "border-white/40 text-white/80 hover:border-white/80 hover:text-white"
diff --git a/frontend/libs/components/pagescene/src/lib/comps/toolbarStyles.ts b/frontend/libs/components/pagescene/src/lib/comps/toolbarStyles.ts
new file mode 100644
index 0000000000..ffb7b938e3
--- /dev/null
+++ b/frontend/libs/components/pagescene/src/lib/comps/toolbarStyles.ts
@@ -0,0 +1,2 @@
+export const TOOLBAR_BUTTON_CLASS_NAME =
+  "h-9 rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-0 font-mono text-xs font-semibold uppercase tracking-[0.12em] leading-none shadow-none [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:shrink-0";
diff --git a/frontend/libs/components/popover/src/lib/popover.tsx b/frontend/libs/components/popover/src/lib/popover.tsx
index 625b903b3c..27ce35d319 100644
--- a/frontend/libs/components/popover/src/lib/popover.tsx
+++ b/frontend/libs/components/popover/src/lib/popover.tsx
@@ -14,8 +14,14 @@ import {
   PopoverPanel,
 } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
-import { Button } from "@storyteller/ui-button";
-import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, InfoIcon } from "lucide-react";
+import { Button, NEUTRAL_BUTTON_HOVER_CLASSES } from "@storyteller/ui-button";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  InfoIcon,
+} from "lucide-react";
 import { Model, ModelInfo } from "@storyteller/model-list";
 import { Tooltip } from "@storyteller/ui-tooltip";
 
@@ -137,7 +143,7 @@ function PortalTooltip({
               zIndex: 9999,
             }}
             className={twMerge(
-              "pointer-events-auto rounded-lg bg-ui-panel p-3 shadow-xl border border-ui-panel-border text-base-fg",
+              "pointer-events-auto rounded-[3px] bg-ui-controls p-3 border border-ui-panel-border text-base-fg",
               className,
             )}
           >
@@ -238,7 +244,7 @@ function InfoHint({ content }: { content: ReactNode }) {
           if (!pinnedRef.current) setOpen(false);
         }}
       >
-        <InfoIcon  className="h-3.5 w-3.5" />
+        <InfoIcon className="h-3.5 w-3.5" />
       </button>
       {open &&
         createPortal(
@@ -254,7 +260,7 @@ function InfoHint({ content }: { content: ReactNode }) {
               transform: "translate(-50%, -100%)",
               zIndex: 10000,
             }}
-            className="pointer-events-auto rounded-lg border border-white/10 bg-ui-controls px-3 py-1.5 text-center text-xs leading-relaxed text-base-fg shadow-xl"
+            className="pointer-events-auto rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-1.5 text-center text-xs leading-relaxed text-base-fg"
             onClick={(e) => e.stopPropagation()}
             onMouseEnter={() => {
               if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
@@ -350,18 +356,18 @@ function RichListRow({
         if (!item.disabled) onClick?.();
       }}
       className={twMerge(
-        "group flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 transition-colors",
-        item.selected ? "bg-ui-controls/70" : "hover:bg-ui-controls/50",
-        !item.selected && active ? "bg-ui-controls/50" : "",
+        "group flex cursor-pointer items-center gap-3 rounded-[3px] px-2 py-2 transition-colors",
+        item.selected ? "bg-white/10" : "hover:bg-white/5",
+        !item.selected && active ? "bg-white/5" : "",
         item.disabled ? "!cursor-not-allowed opacity-50" : "",
       )}
     >
       <span
         className={twMerge(
-          "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border text-base-fg/80 transition-colors",
+          "flex h-9 w-9 shrink-0 items-center justify-center rounded-none border text-base-fg/80 transition-colors",
           item.selected
-            ? "border-primary bg-primary/20"
-            : "border-ui-controls-border bg-ui-controls/60",
+            ? "border-white bg-white/10"
+            : "border-ui-controls-border bg-white/5",
         )}
       >
         {item.icon}
@@ -390,7 +396,7 @@ function RichListRow({
               {item.badges.map((badge, i) => (
                 <span
                   key={i}
-                  className="inline-flex items-center gap-1 rounded bg-ui-badge px-1.5 py-0.5 text-xs font-medium text-base-fg"
+                  className="inline-flex items-center gap-1 rounded-none bg-ui-badge px-1.5 py-0.5 text-xs font-medium text-base-fg"
                 >
                   {badge?.icon && <span>{badge.icon}</span>}
                   {badge?.label || ""}
@@ -405,10 +411,8 @@ function RichListRow({
       {rightNode ??
         (item.selected &&
           (item.selectedRight ?? (
-            <span className="ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary">
-              <CheckIcon
-                
-                className="text-[11px] font-bold text-white" />
+            <span className="ml-1 flex h-5 w-5 shrink-0 items-center justify-center">
+              <CheckIcon aria-hidden="true" className="h-4 w-4 text-white" strokeWidth={2.5} />
             </span>
           )))}
     </div>
@@ -637,7 +641,7 @@ function SubmenuFlyout({
               transform: "translateY(-50%)",
               zIndex: 9999,
             }}
-            className="pointer-events-auto w-[340px] rounded-lg border border-ui-panel-border bg-ui-panel p-1.5 text-base-fg shadow-xl"
+            className="pointer-events-auto w-[340px] rounded-[3px] border border-ui-panel-border bg-ui-controls p-1.5 text-base-fg"
           >
             <div className="mb-1 mt-0.5 px-1.5 text-sm font-normal text-base-fg opacity-70">
               {item.label}
@@ -647,13 +651,11 @@ function SubmenuFlyout({
                   slow bouncing arrow hinting to scroll up. */}
               <div
                 className={twMerge(
-                  "pointer-events-none absolute inset-x-0 top-0 z-20 flex h-10 items-start justify-center bg-gradient-to-b from-ui-panel to-transparent pt-1 transition-opacity duration-200",
+                  "pointer-events-none absolute inset-x-0 top-0 z-20 flex h-10 items-start justify-center bg-gradient-to-b from-ui-controls to-transparent pt-1 transition-opacity duration-200",
                   canScrollUp ? "opacity-100" : "opacity-0",
                 )}
               >
-                <ChevronUpIcon
-                  
-                  className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                <ChevronUpIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
               </div>
               <div
                 ref={scrollRef}
@@ -706,13 +708,11 @@ function SubmenuFlyout({
                   slow bouncing arrow hinting to scroll down. */}
               <div
                 className={twMerge(
-                  "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex h-10 items-end justify-center bg-gradient-to-t from-ui-panel to-transparent pb-1 transition-opacity duration-200",
+                  "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex h-10 items-end justify-center bg-gradient-to-t from-ui-controls to-transparent pb-1 transition-opacity duration-200",
                   canScrollDown ? "opacity-100" : "opacity-0",
                 )}
               >
-                <ChevronDownIcon
-                  
-                  className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                <ChevronDownIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
               </div>
             </div>
           </div>,
@@ -865,11 +865,11 @@ export const PopoverMenu = ({
   };
 
   const className = twMerge(
-    "text-sm font-medium rounded-lg px-2.5 py-1.5 shadow-sm",
-    "flex gap-2 items-center justify-center outline-none",
-    "transition-all duration-150",
-    "bg-ui-controls px-3 text-base-fg hover:bg-ui-controls/80 border border-ui-controls-border",
-    "active:scale-95 transform",
+    "text-sm font-medium rounded-[3px] px-2.5 py-1.5",
+    "flex gap-2 items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60",
+    "transition-colors duration-150",
+    "bg-ui-controls px-3 text-base-fg border border-ui-controls-border",
+    NEUTRAL_BUTTON_HOVER_CLASSES,
     buttonClassName,
   );
 
@@ -1067,9 +1067,7 @@ export const PopoverMenu = ({
                         <span className="opacity-70">{triggerLabel}</span>
                         <div className="flex items-center gap-2">
                           <span className="truncate">{selectedItem.label}</span>
-                          <ChevronUpIcon
-                            
-                            className="text-sm" />
+                          <ChevronUpIcon className="text-sm" />
                         </div>
                       </div>
                     ) : null}
@@ -1107,7 +1105,7 @@ export const PopoverMenu = ({
                   <div
                     ref={panelContentRef}
                     className={twMerge(
-                      "z-10 min-w-48 mt-2 rounded-lg bg-ui-panel p-1.5 shadow-lg border border-ui-panel-border overflow-visible",
+                      "z-10 min-w-48 mt-2 rounded-[3px] bg-ui-controls p-1.5 border border-ui-panel-border overflow-visible",
                       position === "top" ? "mb-2" : "mt-2",
                       panelClassName,
                     )}
@@ -1115,7 +1113,7 @@ export const PopoverMenu = ({
                     onMouseLeave={() => handlePanelMouseLeave(close)}
                   >
                     {panelTitle && (
-                      <div className="mb-2 mt-0.5 flex justify-between px-1.5 text-sm font-normal text-base-fg opacity-70">
+                      <div className="mb-1 flex items-center justify-between border-b border-ui-panel-border px-2 pb-2 pt-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
                         {panelTitle}
                         {panelActionLabel && (
                           <button
@@ -1142,13 +1140,11 @@ export const PopoverMenu = ({
                             with a slow bouncing arrow hinting to scroll up. */}
                         <div
                           className={twMerge(
-                            "pointer-events-none absolute inset-x-0 top-0 z-20 flex h-10 items-start justify-center bg-gradient-to-b from-ui-panel to-transparent pt-1 transition-opacity duration-200",
+                            "pointer-events-none absolute inset-x-0 top-0 z-20 flex h-10 items-start justify-center bg-gradient-to-b from-ui-controls to-transparent pt-1 transition-opacity duration-200",
                             canScrollUp ? "opacity-100" : "opacity-0",
                           )}
                         >
-                          <ChevronUpIcon
-                            
-                            className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                          <ChevronUpIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
                         </div>
                         <div
                           ref={scrollContainerRef}
@@ -1180,9 +1176,7 @@ export const PopoverMenu = ({
                                       item={item}
                                       active={openTooltipIdx === index}
                                       rightNode={
-                                        <ChevronRightIcon
-                                          
-                                          className="ml-1 shrink-0 text-xs text-base-fg/50" />
+                                        <ChevronRightIcon className="ml-1 shrink-0 text-xs text-base-fg/50" />
                                       }
                                     />
                                   </SubmenuFlyout>
@@ -1243,22 +1237,18 @@ export const PopoverMenu = ({
                             with a slow bouncing arrow hinting to scroll down. */}
                         <div
                           className={twMerge(
-                            "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex h-10 items-end justify-center bg-gradient-to-t from-ui-panel to-transparent pb-1 transition-opacity duration-200",
+                            "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex h-10 items-end justify-center bg-gradient-to-t from-ui-controls to-transparent pb-1 transition-opacity duration-200",
                             canScrollDown ? "opacity-100" : "opacity-0",
                           )}
                         >
-                          <ChevronDownIcon
-                            
-                            className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
+                          <ChevronDownIcon className="animate-bounce text-sm text-base-fg/60 drop-shadow [animation-duration:1.1s]" />
                         </div>
                       </div>
                     ) : mode === "hoverSelect" ? (
                       <div className="relative flex flex-col text-sm text-base-fg overflow-visible">
                         {maxListHeight && canScrollUp && (
-                          <div className="absolute top-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-b from-ui-panel via-ui-panel/80 to-transparent py-1.5 pointer-events-none">
-                            <ChevronUpIcon
-                              
-                              className="text-base-fg/60 text-xs animate-bounce" />
+                          <div className="absolute top-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-b from-ui-controls via-ui-controls/80 to-transparent py-1.5 pointer-events-none">
+                            <ChevronUpIcon className="text-base-fg/60 text-xs animate-bounce" />
                           </div>
                         )}
                         <div
@@ -1296,12 +1286,12 @@ export const PopoverMenu = ({
                                   }
                                 }}
                                 className={twMerge(
-                                  "group flex cursor-pointer items-start gap-2 rounded-lg px-2 py-2 transition-all",
+                                  "group flex cursor-pointer items-start gap-2 rounded-[3px] px-2 py-2 transition-all",
                                   item.selected
-                                    ? "bg-ui-controls/70 border-l-4 border-primary"
-                                    : "hover:bg-ui-controls/50",
+                                    ? "bg-white/10 border-l-2 border-white"
+                                    : "hover:bg-white/5",
                                   !item.selected && openTooltipIdx === index
-                                    ? "bg-ui-controls/50"
+                                    ? "bg-white/5"
                                     : "",
                                   item.disabled
                                     ? "!cursor-not-allowed opacity-50"
@@ -1337,7 +1327,7 @@ export const PopoverMenu = ({
                                               key={i}
                                               className="flex items-center gap-1 min-w-0"
                                             >
-                                              <span className="inline-flex items-center rounded bg-ui-badge px-1.5 py-0.5 text-xs font-medium text-base-fg gap-1">
+                                              <span className="inline-flex items-center rounded-none bg-ui-badge px-1.5 py-0.5 text-xs font-medium text-base-fg gap-1">
                                                 {badge?.icon && (
                                                   <span>{badge.icon}</span>
                                                 )}
@@ -1357,8 +1347,8 @@ export const PopoverMenu = ({
 
                                   {item.selected &&
                                     (item.selectedRight ?? (
-                                      <span className="text-primary text-xl font-bold bg-white rounded-full p-0 h-4 w-4 flex items-center justify-center mr-1">
-                                        <CircleCheckIcon />
+                                      <span className="text-white text-xl flex items-center justify-center mr-1">
+                                        <CheckIcon aria-hidden="true" className="h-4 w-4 shrink-0" strokeWidth={2.5} />
                                       </span>
                                     ))}
                                 </div>
@@ -1391,7 +1381,7 @@ export const PopoverMenu = ({
                                       position="right"
                                       delay={item.tooltipDelayMs ?? 300}
                                       interactive
-                                      className="!pointer-events-auto z-50 min-w-48 rounded-lg bg-ui-panel p-1.5 shadow-lg border border-ui-panel-border"
+                                      className="!pointer-events-auto z-50 min-w-48 rounded-[3px] bg-ui-controls p-1.5 border border-ui-panel-border"
                                       onOpenChange={(open) =>
                                         setOpenTooltipIdx((prev) =>
                                           open
@@ -1416,10 +1406,8 @@ export const PopoverMenu = ({
                           })}
                         </div>
                         {maxListHeight && canScrollDown && (
-                          <div className="absolute bottom-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-t from-ui-panel via-ui-panel/80 to-transparent py-1.5 pointer-events-none">
-                            <ChevronDownIcon
-                              
-                              className="text-base-fg/60 text-xs animate-bounce" />
+                          <div className="absolute bottom-0 left-0 right-0 z-20 flex justify-center bg-gradient-to-t from-ui-controls via-ui-controls/80 to-transparent py-1.5 pointer-events-none">
+                            <ChevronDownIcon className="text-base-fg/60 text-xs animate-bounce" />
                           </div>
                         )}
                         {showAddButton && onAdd && (
@@ -1456,7 +1444,7 @@ export const PopoverMenu = ({
                                 position="right"
                                 delay={item.tooltipDelayMs ?? 1000}
                                 interactive
-                                className="!pointer-events-auto z-50 min-w-48 rounded-lg bg-ui-panel p-1.5 shadow-lg border border-ui-panel-border"
+                                className="!pointer-events-auto z-50 min-w-48 rounded-[3px] bg-ui-controls p-1.5 border border-ui-panel-border"
                                 onOpenChange={(open) =>
                                   setOpenTooltipIdx((prev) =>
                                     open ? index : prev === index ? null : prev,
@@ -1466,9 +1454,10 @@ export const PopoverMenu = ({
                                 <Button
                                   className={twMerge(
                                     "flex w-full items-center shadow-none justify-between px-1.5",
-                                    "bg-transparent hover:bg-ui-controls/60",
+                                    "font-sans text-sm font-medium normal-case tracking-normal",
+                                    "bg-transparent hover:bg-white/5",
                                     openTooltipIdx === index
-                                      ? "bg-ui-controls/60"
+                                      ? "bg-white/5"
                                       : "",
                                     mode === "toggle" && item.selected
                                       ? "hover:bg-ui-controls/80"
@@ -1519,17 +1508,10 @@ export const PopoverMenu = ({
 
                                   {mode === "toggle" && (
                                     <span
-                                      className={twMerge(
-                                        "ml-2 h-5 w-5 rounded-full border flex items-center justify-center transition-colors",
-                                        item.selected
-                                          ? "border-primary bg-primary"
-                                          : "border-transparent bg-transparent",
-                                      )}
+                                      className="ml-2 flex h-5 w-5 shrink-0 items-center justify-center"
                                     >
                                       {item.selected && (
-                                        <CheckIcon
-                                          
-                                          className="text-base-fg text-xs font-bold" />
+                                        <CheckIcon aria-hidden="true" className="h-4 w-4 text-white" strokeWidth={2.5} />
                                       )}
                                     </span>
                                   )}
@@ -1539,7 +1521,8 @@ export const PopoverMenu = ({
                               <Button
                                 className={twMerge(
                                   "flex w-full items-center shadow-none justify-between px-1.5",
-                                  "bg-transparent hover:bg-ui-controls/60",
+                                  "font-sans text-sm font-medium normal-case tracking-normal",
+                                  "bg-transparent hover:bg-white/5",
                                   mode === "toggle" && item.selected
                                     ? "hover:bg-ui-controls/80"
                                     : "",
@@ -1582,17 +1565,10 @@ export const PopoverMenu = ({
 
                                 {mode === "toggle" && (
                                   <span
-                                    className={twMerge(
-                                      "ml-2 h-5 w-5 rounded-full border flex items-center justify-center transition-colors",
-                                      item.selected
-                                        ? "border-primary bg-primary"
-                                        : "border-transparent bg-transparent",
-                                    )}
+                                    className="ml-2 flex h-5 w-5 shrink-0 items-center justify-center"
                                   >
                                     {item.selected && (
-                                      <CheckIcon
-                                        
-                                        className="text-base-fg text-xs font-bold" />
+                                      <CheckIcon aria-hidden="true" className="h-4 w-4 text-white" strokeWidth={2.5} />
                                     )}
                                   </span>
                                 )}
diff --git a/frontend/libs/components/pricing-modal/src/lib/cost-breakdown-modal.tsx b/frontend/libs/components/pricing-modal/src/lib/cost-breakdown-modal.tsx
index 04568275b7..308ea5b269 100644
--- a/frontend/libs/components/pricing-modal/src/lib/cost-breakdown-modal.tsx
+++ b/frontend/libs/components/pricing-modal/src/lib/cost-breakdown-modal.tsx
@@ -321,13 +321,13 @@ export function CostBreakdownModal({ activeTabId }: CostBreakdownModalProps) {
       closeOnEsc={true}
       resizable={false}
       backdropClassName="pointer-events-none !bg-transparent"
-      className="max-w-xs rounded-xl bg-ui-panel border border-ui-panel-border overflow-visible shadow-2xl"
+      className="max-w-xs rounded-none bg-ui-panel border border-ui-panel-border overflow-visible shadow-none"
     >
       {/* Drag Handle - Modal component will recognize this and make it draggable */}
       <DragHandle>
-        <div className="flex items-center gap-2 pb-3 bg-ui-panel-header border-b border-ui-panel-border select-none">
-          <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-base-fg">
-            <CoinsIcon  className="text-white" />
+        <div className="flex items-center gap-2 pb-3 border-b border-ui-panel-border select-none">
+          <div className="hud-label flex items-center gap-2 text-base-fg">
+            <CoinsIcon className="text-base-fg" />
             Cost Breakdown
           </div>
         </div>
@@ -336,7 +336,7 @@ export function CostBreakdownModal({ activeTabId }: CostBreakdownModalProps) {
       <div className="space-y-3 font-sans text-base-fg text-xs mt-3">
         {/* Page indicator */}
         {pageName && (
-          <div className="text-[10px] text-base-fg/75 uppercase tracking-wide text-start font-bold">
+          <div className="font-mono text-[10px] text-base-fg/55 uppercase tracking-[0.12em] text-start">
             {pageName}
           </div>
         )}
@@ -385,18 +385,16 @@ export function CostBreakdownModal({ activeTabId }: CostBreakdownModalProps) {
             </div>
 
             {/* Total Cost */}
-            <div className="bg-ui-controls/50 rounded-lg p-3 border border-ui-controls-border space-y-2.5">
+            <div className="bg-ui-sunken rounded-none p-3 border border-ui-panel-border space-y-2.5">
               {/* Credits row */}
               <div>
-                <div className="text-[10px] text-base-fg/50 uppercase tracking-wider font-medium mb-0.5">
+                <div className="font-mono text-[10px] text-base-fg/50 uppercase tracking-[0.12em] mb-0.5">
                   Credits
                 </div>
-                <div className="text-lg font-bold text-base-fg flex items-center gap-1.5">
+                <div className="font-display text-lg font-medium tracking-[-0.02em] text-base-fg flex items-center gap-1.5">
                   {isEstimateLoading && isLiveEstimatePage ? (
                     <>
-                      <LoaderIcon
-                        
-                        className="animate-spin text-base" />
+                      <LoaderIcon className="animate-spin text-base" />
                       <span className="text-base-fg/50 text-sm">
                         Calculating…
                       </span>
@@ -411,15 +409,15 @@ export function CostBreakdownModal({ activeTabId }: CostBreakdownModalProps) {
                 </div>
               </div>
 
-              <div className="border-t border-ui-controls-border" />
+              <div className="border-t border-ui-panel-border" />
 
               {/* Converted price row */}
               <div>
-                <div className="text-[10px] text-base-fg/50 uppercase tracking-wider font-medium mb-0.5">
+                <div className="font-mono text-[10px] text-base-fg/50 uppercase tracking-[0.12em] mb-0.5">
                   Estimated Price
                 </div>
                 <div className="flex items-center justify-between gap-2">
-                  <span className="text-lg font-bold text-base-fg tracking-tight">
+                  <span className="font-display text-lg font-medium text-base-fg tracking-[-0.02em]">
                     {formattedPrice}
                   </span>
                   <Select
@@ -433,7 +431,7 @@ export function CostBreakdownModal({ activeTabId }: CostBreakdownModalProps) {
             </div>
           </>
         ) : (
-          <div className="bg-ui-controls/50 rounded-lg p-2.5 border border-ui-controls-border text-center text-base-fg/60 text-[11px]">
+          <div className="bg-ui-sunken rounded-none p-2.5 border border-ui-panel-border text-center text-base-fg/60 text-[11px]">
             Credit Costs not yet available for this model
           </div>
         )}
diff --git a/frontend/libs/components/pricing-modal/src/lib/credits-modal.tsx b/frontend/libs/components/pricing-modal/src/lib/credits-modal.tsx
index f802affb4e..d3f59e3dd3 100644
--- a/frontend/libs/components/pricing-modal/src/lib/credits-modal.tsx
+++ b/frontend/libs/components/pricing-modal/src/lib/credits-modal.tsx
@@ -63,7 +63,7 @@ export function CreditsModal({
     <Modal
       isOpen={isOpen}
       onClose={onClose ?? (() => {})}
-      className="rounded-2xl w-full max-w-2xl max-h-[100vh] overflow-y-auto overflow-x-hidden border border-white/5 bg-[#161618] p-0 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.6)]"
+      className="w-full max-w-2xl max-h-[100vh] overflow-y-auto overflow-x-hidden border border-white/15 bg-[#101014] p-0"
       allowBackgroundInteraction={false}
       showClose={true}
       closeOnOutsideClick={true}
@@ -72,18 +72,8 @@ export function CreditsModal({
       backdropClassName="bg-black/80"
     >
       <div className="relative overflow-hidden">
-        {/* Off-center ambient glow, feels designed, not generic */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/25 blur-[80px]"
-        />
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
-        />
-
         <div className="relative px-8 pt-10 pb-8 sm:px-10 sm:pt-11 sm:pb-9">
-          <h2 className="text-3xl font-semibold tracking-tight text-white sm:text-[34px] sm:leading-[1.1]">
+          <h2 className="font-display text-3xl font-semibold tracking-tight text-white sm:text-[34px] sm:leading-[1.1]">
             Buy <span className="text-primary">credits</span>
           </h2>
           <p className="mt-3 text-[15px] leading-relaxed text-white/55">
@@ -101,23 +91,21 @@ export function CreditsModal({
                   onClick={() => handlePurchase(pack)}
                   disabled={purchasingId !== null}
                   className={twMerge(
-                    "group relative flex flex-col gap-6 rounded-2xl border p-6 text-left transition-all disabled:cursor-not-allowed disabled:opacity-60",
+                    "group relative flex flex-col gap-6 border p-6 text-left transition-all disabled:cursor-not-allowed disabled:opacity-60",
                     isPopular
-                      ? "border-primary/50 bg-primary/[0.07] hover:border-primary"
-                      : "border-white/10 bg-white/[0.02] hover:border-white/25 hover:bg-white/[0.04]",
+                      ? "border-white/60 bg-white/[0.06] hover:border-white"
+                      : "border-white/15 bg-white/[0.02] hover:border-white/30 hover:bg-white/[0.04]",
                   )}
                 >
                   {pack.badge && (
-                    <span className="absolute -top-2.5 right-3 rounded-full bg-primary px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow-lg">
+                    <span className="absolute -top-2.5 right-3 bg-white px-2.5 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-black">
                       {pack.badge}
                     </span>
                   )}
 
                   <div className="flex items-center gap-3">
-                    <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/15">
-                      <CoinsIcon
-                        
-                        className="text-primary text-lg" />
+                    <span className="flex h-12 w-12 shrink-0 items-center justify-center bg-white/10">
+                      <CoinsIcon className="text-white text-lg" />
                     </span>
                     <div className="min-w-0">
                       <div className="text-4xl font-bold leading-none tracking-tight text-white">
@@ -127,7 +115,7 @@ export function CreditsModal({
                         {pack.bonus > 0 ? (
                           <>
                             {pack.base.toLocaleString()} +{" "}
-                            <span className="text-primary font-semibold">
+                            <span className="font-semibold text-white">
                               {pack.bonus.toLocaleString()} bonus
                             </span>
                           </>
@@ -142,17 +130,13 @@ export function CreditsModal({
                     <span className="text-2xl font-semibold text-white/80">
                       ${pack.priceUsd}
                     </span>
-                    <span className="flex items-center gap-1.5 text-base font-semibold text-primary-400">
+                    <span className="flex items-center gap-1.5 text-base font-semibold text-white">
                       {isLoading ? (
-                        <LoaderCircleIcon
-                          
-                          className="animate-spin" />
+                        <LoaderCircleIcon className="animate-spin" />
                       ) : (
                         <>
                           Buy
-                          <ArrowRightIcon
-                            
-                            className="text-xs transition-transform group-hover:translate-x-0.5" />
+                          <ArrowRightIcon className="text-xs transition-transform group-hover:translate-x-0.5" />
                         </>
                       )}
                     </span>
diff --git a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
index 5800c644cd..92234c7757 100644
--- a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
+++ b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
@@ -1,38 +1,29 @@
+import { ReactNode } from "react";
 import { Modal } from "@storyteller/ui-modal";
 import { Button } from "@storyteller/ui-button";
-import { twMerge } from "tailwind-merge";
-import { useState } from "react";
-import { CheckIcon, GemIcon, StarIcon } from "lucide-react";
-import { DynamicIcon } from "@storyteller/icons";
-import { usePricingModalStore } from "./pricing-modal-store";
-import { TabSelector } from "@storyteller/ui-tab-selector";
+import { CoinsIcon, CreditCardIcon, TagIcon } from "lucide-react";
 import { invoke } from "@tauri-apps/api/core";
-import {
-  SUBSCRIPTION_PLANS,
-  SubscriptionPlanDetails,
-} from "@storyteller/subscription";
+import { OpenUrl } from "@storyteller/tauri-api";
 import { useSubscriptionState } from "@storyteller/subscription";
-
-const billingTabs = [
-  { id: "yearly", label: "Yearly" },
-  { id: "monthly", label: "Monthly" },
-];
+import {
+  BillingCadence,
+  PricingSectionLabel,
+  PricingTable,
+  PROMO_PCT,
+} from "@storyteller/ui-pricing-table";
+import { usePricingModalStore } from "./pricing-modal-store";
+import { useCreditsModalStore } from "./credits-modal-store";
 
 const pricingConfig = {
   header: {
-    title: "Subscribe to ArtCraft",
+    title: "Pick a plan",
     subtitle:
-      "Support ArtCraft development and get generation credits without having to add 3rd party services. We directly invest your support into building a powerful tool you own forever.",
+      "Get a ton of generations and invest in a tool you'll always own. Your subscription helps keep ArtCraft free and open for everyone.",
   },
-  yearlyDiscount: 20,
 };
 
-// Plans that get an eye-catching gradient frame breaking out of the grid.
-type HighlightKind = "popular" | "best";
-const HIGHLIGHTS: Record<string, HighlightKind> = {
-  artcraft_pro: "popular",
-  artcraft_max: "best",
-};
+const SECONDARY_BUTTON_CLASSES =
+  "gap-2 rounded-none border border-white/15 bg-white/5 px-3.5 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-white shadow-none hover:bg-white/10";
 
 interface PricingContentProps {
   title?: string;
@@ -42,15 +33,9 @@ interface PricingContentProps {
 export function PricingContent({ title, subtitle }: PricingContentProps) {
   const subscriptionStore = useSubscriptionState();
   const hasActiveSub = subscriptionStore.hasPaidPlan();
-  const activePlanId = subscriptionStore.subscriptionInfo?.productSlug || "free";
-
-  const [billingType, setBillingType] = useState("yearly");
-  const isYearly = billingType === "yearly";
-
-  // ── Billing actions (Tauri portal/checkout — unchanged) ──────────────────
-  const handleUnsubscribe = async () => {
-    await invoke("storyteller_open_customer_portal_cancel_plan_command");
-  };
+  const activePlanSlug = hasActiveSub
+    ? (subscriptionStore.subscriptionInfo?.productSlug ?? null)
+    : null;
 
   const handleManageSubscription = async () => {
     await invoke("storyteller_open_customer_portal_manage_plan_command");
@@ -58,24 +43,11 @@ export function PricingContent({ title, subtitle }: PricingContentProps) {
 
   const handleUpdatePaymentMethod = async () => {
     await invoke(
-      "storyteller_open_customer_portal_update_payment_method_command"
+      "storyteller_open_customer_portal_update_payment_method_command",
     );
   };
 
-  const handleSetPlan = async (tierSlug: string) => {
-    const tier = SUBSCRIPTION_PLANS.find((t) => t.slug === tierSlug);
-    const planSlug = tier?.slug;
-    const cadence = isYearly ? "yearly" : "monthly";
-
-    if (planSlug === "free") {
-      if (hasActiveSub) {
-        await handleUnsubscribe();
-        return;
-      } else {
-        return;
-      }
-    }
-
+  const handleSetPlan = async (planSlug: string, cadence: BillingCadence) => {
     if (hasActiveSub) {
       await invoke("storyteller_open_customer_portal_switch_plan_command", {
         request: {
@@ -93,334 +65,115 @@ export function PricingContent({ title, subtitle }: PricingContentProps) {
     }
   };
 
-  const tierHierarchy = {
-    free: 0,
-    artcraft_basic: 1,
-    artcraft_pro: 2,
-    artcraft_max: 3,
-  };
-
-  const isCurrentPlan = (tierId: string) => {
-    return tierId === activePlanId;
-  };
-
-  const getButtonText = (tier: SubscriptionPlanDetails) => {
-    if (isCurrentPlan(tier.slug)) {
-      return "Current Plan";
-    }
-
-    if (activePlanId && activePlanId !== "free") {
-      const currentTierLevel =
-        tierHierarchy[activePlanId as keyof typeof tierHierarchy];
-      const thisTierLevel =
-        tierHierarchy[tier.slug as keyof typeof tierHierarchy];
-
-      if (thisTierLevel < currentTierLevel) {
-        if (tier.slug === "free") {
-          return "Cancel Plan";
-        }
-        return "Switch Plan";
-      }
-    }
-
-    return "Upgrade Plan";
-  };
-
-  const formatPrice = (plan: SubscriptionPlanDetails) => {
-    if (plan.monthlyPrice === 0) {
-      return {
-        current: "$0",
-        original: null as string | null,
-      };
-    }
-
-    if (isYearly) {
-      const discountedMonthlyPrice = Math.round(plan.yearlyPrice / 12);
-      const originalMonthlyPrice = plan.originalYearlyPrice
-        ? Math.round(plan.originalYearlyPrice / 12)
-        : null;
-
-      return {
-        current: `$${discountedMonthlyPrice}`,
-        original: originalMonthlyPrice ? `$${originalMonthlyPrice}` : null,
-      };
-    } else {
-      const monthlyPrice = plan.originalMonthlyPrice || plan.monthlyPrice;
-
-      return {
-        current: `$${monthlyPrice}`,
-        original: null as string | null,
-      };
-    }
+  const handleBuyCredits = () => {
+    usePricingModalStore.getState().closeModal();
+    useCreditsModalStore.getState().openModal();
   };
 
   return (
-    <div className="flex-1 overflow-y-auto p-8 md:p-10 min-h-0 text-white">
-      <div className="mb-10 text-center">
-        <h1 className="mb-4 text-3xl font-semibold tracking-tight text-white md:text-5xl">
-          {title || pricingConfig.header.title}
-        </h1>
-        <p className="mx-auto mb-6 max-w-3xl text-md leading-relaxed text-white/60 md:text-lg">
-          {subtitle || pricingConfig.header.subtitle}
-        </p>
-
-        {/* Billing Toggle */}
-        <div className="relative mx-auto mb-8 flex w-fit items-center justify-center gap-4">
-          <TabSelector
-            tabs={billingTabs}
-            activeTab={billingType}
-            onTabChange={setBillingType}
-            className="w-fit rounded-lg border border-white/20 bg-white/5"
-            tabClassName="w-24 text-md"
-            indicatorClassName="bg-primary/30 border border-primary"
-            selectedTabClassName="text-white"
-          />
-          <span className="pointer-events-none absolute -left-6 -top-3 rounded-full bg-primary px-3 py-0.5 text-sm font-medium text-white">
-            -{pricingConfig.yearlyDiscount}%
-          </span>
+    <div className="min-h-0 flex-1 bg-[#101014] text-white">
+      <div className="bg-primary text-white">
+        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-1 py-2.5 pl-6 pr-14 md:pl-10">
+          <p className="pricing-hud flex items-center gap-2 font-bold">
+            <TagIcon aria-hidden className="h-3.5 w-3.5" />
+            Limited-time offer
+          </p>
+          <p className="text-sm">
+            Save {PROMO_PCT}% on every plan, monthly or yearly — lock in the
+            lowest price today.
+          </p>
         </div>
       </div>
 
-      {/* Pricing Tiers */}
-      <div className="mx-auto grid max-w-6xl grid-cols-1 items-stretch gap-x-4 gap-y-10 md:grid-cols-2 md:gap-6 lg:grid-cols-4">
-        {SUBSCRIPTION_PLANS.map((plan) => {
-          const highlight = HIGHLIGHTS[plan.slug] ?? null;
-          const isCurrent = isCurrentPlan(plan.slug);
-          const pricing = formatPrice(plan);
-          const frame = highlight ? frameClasses(plan.colorScheme) : null;
-
-          // Inner card body, shared between framed and un-framed plans.
-          const cardBody = (
-            <div
-              className={twMerge(
-                getColorSchemeClasses(plan.colorScheme),
-                frame
-                  ? `relative z-10 h-full w-full border-2 bg-[#101014] shadow-2xl ${frame.border}`
-                  : "",
-                isCurrent ? "ring-2 ring-white/50" : "",
-              )}
-            >
-              {isCurrent && (
-                <div className="absolute right-3 top-3 whitespace-nowrap rounded-full bg-white px-3 py-0.5 text-xs font-bold text-black shadow-lg">
-                  CURRENT
-                </div>
-              )}
-
-              <div className="mb-2 flex flex-wrap items-center gap-2">
-                <h3 className="text-xl font-semibold text-white md:text-2xl">
-                  {plan.name}
-                </h3>
-                {pricing.original && (
-                  <span className="inline-flex items-center rounded-md border border-primary/30 bg-primary/80 px-1.5 py-0.5 text-xs font-bold uppercase tracking-wide text-white">
-                    -{pricingConfig.yearlyDiscount}%
-                  </span>
-                )}
-              </div>
-
-              <div className="mb-1 flex items-baseline gap-2">
-                {pricing.original && (
-                  <span className="text-lg text-[#f05951]/80 line-through decoration-[#f05951]/80 md:text-xl">
-                    {pricing.original}
-                  </span>
-                )}
-                <span className="text-3xl font-bold md:text-4xl">
-                  {pricing.current}
-                </span>
-                <span className="text-white/60">/month</span>
-              </div>
-              <div className="mb-4 min-h-[1rem] text-xs font-semibold uppercase tracking-wider text-white/40 md:mb-6">
-                {plan.monthlyPrice === 0
-                  ? "Free forever"
-                  : isYearly
-                    ? "Billed yearly"
-                    : "Billed monthly"}
-              </div>
-
+      <PricingSection>
+        <PricingSectionLabel
+          index="01"
+          label="Pricing"
+          annotation="Free & open source · Subscriptions optional†"
+        />
+        <div className="px-6 py-12 md:px-10 md:py-16">
+          <h1 className="max-w-3xl font-display text-4xl font-medium leading-[1.02] tracking-[-0.035em] text-white sm:text-5xl md:text-6xl">
+            {title || pricingConfig.header.title}
+          </h1>
+          <p className="mt-5 max-w-xl text-lg leading-relaxed text-white/55">
+            {subtitle || pricingConfig.header.subtitle}
+          </p>
+          {hasActiveSub && (
+            <div className="mt-6 flex flex-wrap gap-3">
               <Button
-                className={twMerge(
-                  "mb-6 h-11 w-full justify-center rounded-xl border-transparent md:mb-8",
-                  isCurrent
-                    ? "cursor-default bg-white/20"
-                    : frame
-                      ? `${frame.button} text-white`
-                      : "bg-white text-black hover:bg-white/80",
-                )}
-                onClick={() => handleSetPlan(plan.slug)}
-                disabled={isCurrent}
+                variant="secondary"
+                className={SECONDARY_BUTTON_CLASSES}
+                onClick={handleBuyCredits}
               >
-                {getButtonText(plan)}
+                <CoinsIcon aria-hidden className="h-4 w-4" />
+                Buy more credits
               </Button>
-
-              <ul className="flex-1 space-y-3 md:space-y-4">
-                {plan.features.map((feature, idx) => (
-                  <Feature
-                    key={idx}
-                    text={feature.text}
-                    included={feature.included}
-                    highlighted={!!highlight}
-                  />
-                ))}
-              </ul>
-            </div>
-          );
-
-          // Un-highlighted plans render the card directly into the grid.
-          if (!highlight) {
-            return (
-              <div key={plan.slug} className="contents">
-                {cardBody}
-              </div>
-            );
-          }
-
-          // Highlighted plans keep the same footprint; the solid label tab sits
-          // ABOVE the card and tucks behind the card top so it reads as one
-          // continuous frame.
-          return (
-            <div key={plan.slug} className="relative">
-              <div
-                className={twMerge(
-                  "absolute inset-x-0 bottom-[calc(100%_-_1.75rem)] z-0 flex items-center justify-center gap-1.5 rounded-t-2xl pb-8 pt-2 text-xs font-bold uppercase tracking-[0.1em] text-white sm:rounded-t-[28px]",
-                  frame?.tab,
-                )}
+              <Button
+                variant="secondary"
+                className={SECONDARY_BUTTON_CLASSES}
+                onClick={handleUpdatePaymentMethod}
               >
-                <DynamicIcon
-                  icon={highlight === "popular" ? StarIcon : GemIcon}
-                  className="pb-0.5 text-xs"
-                />
-                {highlight === "popular" ? "Most Popular" : "Best Value"}
-              </div>
-              {cardBody}
+                <CreditCardIcon aria-hidden className="h-4 w-4" />
+                Update payment method
+              </Button>
             </div>
-          );
-        })}
-      </div>
-
-      {/* Manage Subscription — only when the user has a paid plan */}
-      {hasActiveSub && activePlanId !== "free" && (
-        <div className="mt-10 flex flex-wrap justify-center gap-4">
-          <Button
-            onClick={handleUpdatePaymentMethod}
-            className="rounded-xl border border-white/25 bg-transparent px-8 py-3 text-white hover:bg-white/10"
-          >
-            Update your payment method
-          </Button>
-          <Button
-            onClick={handleManageSubscription}
-            className="rounded-xl border border-white/25 bg-transparent px-8 py-3 text-white hover:bg-white/10"
-          >
-            Manage your subscription
-          </Button>
+          )}
         </div>
-      )}
+      </PricingSection>
+
+      <PricingSection>
+        <PricingSectionLabel
+          index="02"
+          label="Choose your plan"
+          annotation="Every paid plan includes video credits"
+        />
+        <PricingTable
+          activePlanSlug={activePlanSlug}
+          showSeedanceFeatures
+          showEnterprise
+          onChoosePlan={handleSetPlan}
+          onManagePlan={handleManageSubscription}
+          onContact={(mailtoUrl) => OpenUrl(mailtoUrl)}
+        />
+      </PricingSection>
+
+      <PricingSection>
+        <div className="grid md:grid-cols-2">
+          <div className="p-6 md:p-10">
+            <p className="pricing-hud text-white/40">Need more credits?</p>
+            <h2 className="mt-4 font-display text-2xl font-medium tracking-[-0.02em] text-white">
+              One-time credit packs
+            </h2>
+            <p className="mt-2 max-w-md leading-relaxed text-white/55">
+              Top up without changing your plan. Credit packs never expire.
+            </p>
+            <Button
+              variant="secondary"
+              className={`mt-6 ${SECONDARY_BUTTON_CLASSES}`}
+              onClick={handleBuyCredits}
+            >
+              <CoinsIcon aria-hidden className="h-4 w-4 text-primary" />
+              Buy credits
+            </Button>
+          </div>
+          <div className="border-t border-white/15 p-6 md:border-l md:border-t-0 md:p-10">
+            <p className="pricing-hud text-white/40">† Footnote</p>
+            <p className="mt-4 max-w-md leading-relaxed text-white/55">
+              ArtCraft can be used without paying for a subscription. You can
+              bring your own compute and third-party subscriptions. We hope
+              you’ll subscribe, though, as that helps accelerate our
+              development.
+            </p>
+          </div>
+        </div>
+      </PricingSection>
     </div>
   );
 }
 
-// Per-plan colored card scheme (mirrors the webapp pricing-table's
-// non-unified theme: green/purple/orange gradient tints + matching borders).
-// All hexes are arbitrary values, so they don't depend on the Tailwind config.
-const getColorSchemeClasses = (
-  colorScheme: SubscriptionPlanDetails["colorScheme"],
-) => {
-  const base =
-    "relative flex flex-col rounded-3xl border p-6 transition-all duration-300 backdrop-blur-md md:p-8";
-
-  switch (colorScheme) {
-    case "green":
-      return twMerge(
-        base,
-        "bg-gradient-to-b from-[#002D23]/80 via-[#006B54]/50 to-[#00D28B]/10 border-[#00a873]/50",
-        "hover:border-[#00a873] hover:shadow-[0_0_30px_rgba(0,210,139,0.2)]",
-      );
-    case "purple":
-      return twMerge(
-        base,
-        "bg-gradient-to-b from-[#2D004D]/80 via-[#6400A8]/50 to-[#C03FFF]/10 border-[#9D4CFF]/50",
-        "hover:border-[#9D4CFF] hover:shadow-[0_0_30px_rgba(192,63,255,0.2)]",
-      );
-    case "orange":
-      return twMerge(
-        base,
-        "bg-gradient-to-b from-[#332100]/80 via-[#B35C00]/50 to-[#FFB347]/10 border-[#FF8C00]/50",
-        "hover:border-[#FF8C00] hover:shadow-[0_0_30px_rgba(255,179,71,0.2)]",
-      );
-    case "dark":
-      return twMerge(
-        base,
-        "bg-[#1C1C20] border-white/10 hover:border-white/20",
-      );
-    default:
-      return twMerge(base, "bg-white/5 border-white/10 hover:border-white/20");
-  }
-};
-
-// Solid frame color for highlighted plans, keyed to each plan's color scheme.
-const frameClasses = (colorScheme: SubscriptionPlanDetails["colorScheme"]) => {
-  switch (colorScheme) {
-    case "green":
-      return {
-        tab: "bg-[#00a873]",
-        border: "border-[#00a873]",
-        button: "bg-[#00a873] hover:bg-[#008a5e]",
-      };
-    case "purple":
-      return {
-        tab: "bg-[#9D4CFF]",
-        border: "border-[#9D4CFF]",
-        button: "bg-[#9D4CFF] hover:bg-[#8633f2]",
-      };
-    case "orange":
-      return {
-        tab: "bg-[#D97700]",
-        border: "border-[#D97700]",
-        button: "bg-[#D97700] hover:bg-[#b86400]",
-      };
-    default:
-      return {
-        tab: "bg-primary",
-        border: "border-primary",
-        button: "bg-primary hover:bg-primary-600",
-      };
-  }
-};
-
-const Feature = ({
-  text,
-  included,
-  highlighted = false,
-}: {
-  text: string;
-  included: boolean;
-  highlighted?: boolean;
-}) => (
-  <li className="flex items-start gap-3">
-    <div
-      className={twMerge(
-        "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
-        included
-          ? highlighted
-            ? "bg-white/20 text-white"
-            : "bg-white/10 text-white/70"
-          : "border border-white/20 text-transparent",
-      )}
-    >
-      {included && <CheckIcon  className="text-xs" />}
-    </div>
-    <span
-      className={twMerge(
-        "mt-[3px] text-sm",
-        included
-          ? highlighted
-            ? "text-white"
-            : "text-white/80"
-          : "text-white/40",
-      )}
-    >
-      {text}
-    </span>
-  </li>
-);
+function PricingSection({ children }: { children: ReactNode }) {
+  return <section className="border-t border-white/15">{children}</section>;
+}
 
 interface PricingModalProps {}
 
@@ -431,11 +184,12 @@ export function PricingModal({}: PricingModalProps = {}) {
     <Modal
       isOpen={isOpen}
       onClose={closeModal}
-      className="flex max-h-[90vh] max-w-screen-2xl flex-col overflow-y-auto rounded-2xl border border-white/5 bg-[#101014]"
+      className="flex max-h-[90vh] max-w-screen-xl flex-col overflow-y-auto rounded-none border border-white/15 bg-[#101014]"
       allowBackgroundInteraction={false}
       showClose={true}
       closeOnOutsideClick={true}
       resizable={false}
+      childPadding={false}
       backdropClassName="bg-black/80"
     >
       <PricingContent title={title} subtitle={subtitle} />
diff --git a/frontend/libs/components/pricing-modal/tsconfig.json b/frontend/libs/components/pricing-modal/tsconfig.json
index 4a6063c253..ae629ee990 100644
--- a/frontend/libs/components/pricing-modal/tsconfig.json
+++ b/frontend/libs/components/pricing-modal/tsconfig.json
@@ -11,6 +11,9 @@
     {
       "path": "../tab-selector"
     },
+    {
+      "path": "../pricing-table"
+    },
     {
       "path": "../button"
     },
diff --git a/frontend/libs/components/pricing-modal/tsconfig.lib.json b/frontend/libs/components/pricing-modal/tsconfig.lib.json
index 603acf26e9..aa4f20a4d9 100644
--- a/frontend/libs/components/pricing-modal/tsconfig.lib.json
+++ b/frontend/libs/components/pricing-modal/tsconfig.lib.json
@@ -52,6 +52,9 @@
     {
       "path": "../tab-selector/tsconfig.lib.json"
     },
+    {
+      "path": "../pricing-table/tsconfig.lib.json"
+    },
     {
       "path": "../button/tsconfig.lib.json"
     },
diff --git a/frontend/libs/components/pricing-table/package.json b/frontend/libs/components/pricing-table/package.json
new file mode 100644
index 0000000000..57de934ac7
--- /dev/null
+++ b/frontend/libs/components/pricing-table/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@storyteller/ui-pricing-table",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": {
+      "development": "./src/lib/website-pricing-table.css",
+      "default": "./dist/index.css"
+    },
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}
diff --git a/frontend/libs/components/pricing-table/src/index.ts b/frontend/libs/components/pricing-table/src/index.ts
new file mode 100644
index 0000000000..eec84a3c10
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/index.ts
@@ -0,0 +1,8 @@
+export {
+  default as PricingTable,
+  PricingSectionLabel,
+} from "./lib/pricing-table";
+export type { BillingCadence, PricingTableProps } from "./lib/pricing-table";
+export { WebsitePricingTable } from "./lib/website-pricing-table";
+export { PricingPromoBanner } from "./lib/pricing-promo-banner";
+export { PROMO_PCT, planPricing } from "./lib/promo-discounts";
diff --git a/frontend/libs/components/pricing-table/src/lib/pricing-promo-banner.tsx b/frontend/libs/components/pricing-table/src/lib/pricing-promo-banner.tsx
new file mode 100644
index 0000000000..90a1b9798a
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/lib/pricing-promo-banner.tsx
@@ -0,0 +1,41 @@
+import { TagIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import { PROMO_PCT } from "./promo-discounts";
+
+interface PricingPromoBannerProps {
+  className?: string;
+}
+
+export const PricingPromoBanner = ({ className }: PricingPromoBannerProps) => (
+  <div
+    className={twMerge(
+      "relative overflow-hidden border border-primary/30 bg-gradient-to-r from-primary-600/35 via-primary-500/15 to-primary/10 px-6 py-6 sm:px-10 sm:py-8",
+      className,
+    )}
+  >
+    {/* Decorative glow, top-right */}
+    <div
+      aria-hidden
+      className="pointer-events-none absolute -right-16 -top-20 h-64 w-64 bg-primary/25 blur-3xl"
+    />
+
+    <div className="relative flex flex-col gap-3">
+      <span className="inline-flex w-fit items-center gap-1.5 bg-primary px-3 py-1 text-xs font-semibold uppercase tracking-[0.1em] text-white">
+        <TagIcon  className="text-[10px]" />
+        Limited-time offer
+      </span>
+
+      <h2 className="text-2xl sm:text-3xl md:text-4xl font-semibold leading-tight tracking-[-0.02em] text-white">
+        Save <span className="text-primary-300">{PROMO_PCT}%</span> on all
+        monthly &amp; yearly plans
+      </h2>
+
+      <p className="max-w-2xl text-sm sm:text-base text-white/60">
+        Every ArtCraft plan is discounted for a limited time - lock in the
+        lowest price and start creating.
+      </p>
+    </div>
+  </div>
+);
+
+export default PricingPromoBanner;
diff --git a/frontend/libs/components/pricing-table/src/lib/pricing-table.tsx b/frontend/libs/components/pricing-table/src/lib/pricing-table.tsx
new file mode 100644
index 0000000000..7cc215fda6
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/lib/pricing-table.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { SUBSCRIPTION_PLANS } from "@storyteller/subscription";
+import {
+  BillingCadence,
+  WebsitePricingTable,
+} from "./website-pricing-table";
+
+export type { BillingCadence };
+
+export interface PricingTableProps {
+  /** Slug of the user's active ArtCraft plan, if any. */
+  activePlanSlug?: string | null;
+  displayName?: string;
+  loading?: boolean;
+  includeFree?: boolean;
+  showSeedanceFeatures?: boolean;
+  showEnterprise?: boolean;
+  className?: string;
+  defaultCadence?: BillingCadence;
+  /** Called when a plan CTA is clicked (never for the active plan). */
+  onChoosePlan: (
+    planSlug: string,
+    cadence: BillingCadence,
+  ) => Promise<unknown> | unknown;
+  /** Opens the subscription management portal. */
+  onManagePlan?: () => Promise<unknown> | unknown;
+  /** Opens a mailto link; defaults to regular link navigation. */
+  onContact?: (mailtoUrl: string) => void;
+}
+
+// Website-style plan grid. Account state and checkout are supplied by the
+// host app, so this stays free of any platform-specific billing APIs.
+export const PricingTable = ({
+  activePlanSlug = null,
+  displayName,
+  loading = false,
+  includeFree = false,
+  showSeedanceFeatures = true,
+  showEnterprise = true,
+  className,
+  defaultCadence = "yearly",
+  onChoosePlan,
+  onManagePlan,
+  onContact,
+}: PricingTableProps) => {
+  const [cadence, setCadence] = useState<BillingCadence>(defaultCadence);
+  const [processingPlan, setProcessingPlan] = useState<string | null>(null);
+  const [managing, setManaging] = useState(false);
+
+  const plans = includeFree
+    ? SUBSCRIPTION_PLANS
+    : SUBSCRIPTION_PLANS.filter((plan) => plan.slug !== "free");
+
+  const handleChoose = async (planSlug: string) => {
+    if (planSlug === activePlanSlug) return;
+    setProcessingPlan(planSlug);
+    try {
+      await onChoosePlan(planSlug, cadence);
+    } catch (error) {
+      console.error("Error initiating checkout:", error);
+    } finally {
+      setProcessingPlan(null);
+    }
+  };
+
+  const handleManage = async () => {
+    if (!onManagePlan) return;
+    setManaging(true);
+    try {
+      await onManagePlan();
+    } catch (error) {
+      console.error("Error accessing subscription management:", error);
+    } finally {
+      setManaging(false);
+    }
+  };
+
+  return (
+    <div className={twMerge("w-full", className)}>
+      <WebsitePricingTable
+        plans={plans}
+        cadence={cadence}
+        onCadenceChange={setCadence}
+        showSeedanceFeatures={showSeedanceFeatures}
+        showEnterprise={showEnterprise}
+        activePlanSlug={activePlanSlug}
+        displayName={displayName}
+        loading={loading}
+        processingPlan={processingPlan}
+        managing={managing}
+        onChoose={handleChoose}
+        onManage={handleManage}
+        onContact={onContact}
+      />
+    </div>
+  );
+};
+
+interface PricingSectionLabelProps {
+  index: string;
+  label: string;
+  annotation?: string;
+  className?: string;
+}
+
+// "01 / Pricing" hairline strip that heads each pricing section.
+export const PricingSectionLabel = ({
+  index,
+  label,
+  annotation,
+  className,
+}: PricingSectionLabelProps) => (
+  <div
+    className={twMerge(
+      "pricing-hud flex items-center justify-between gap-4 border-b border-white/15 px-6 py-3 text-white/55 md:px-10",
+      className,
+    )}
+  >
+    <p>
+      <span className="text-white/40">{index} / </span>
+      {label}
+    </p>
+    {annotation && <p className="hidden text-white/40 sm:block">{annotation}</p>}
+  </div>
+);
+
+export default PricingTable;
diff --git a/frontend/libs/components/pricing-table/src/lib/promo-discounts.ts b/frontend/libs/components/pricing-table/src/lib/promo-discounts.ts
new file mode 100644
index 0000000000..3a42d8d930
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/lib/promo-discounts.ts
@@ -0,0 +1,29 @@
+import { SubscriptionPlanDetails } from "@storyteller/subscription";
+
+// Every plan is shown at this single discount off a higher "before" price, on
+// BOTH the monthly and yearly tabs. The charged prices are unchanged — this
+// only drives the "% OFF" pills, the crossed-out anchor, and the banner copy.
+export const PROMO_PCT = 20;
+
+export interface PlanPricing {
+  /** Displayed price (per month) for the active cadence — a whole dollar amount. */
+  current: number;
+  /** Crossed-out "before" price the discount is applied to — a whole dollar amount. */
+  basePrice: number;
+  /** Discount of `current` vs `basePrice` — always PROMO_PCT. */
+  discountPct: number;
+}
+
+/** Pricing for a plan in the given cadence. The current price is unchanged; the
+ *  base/anchor is current ÷ (1 − PROMO_PCT), rounded to a whole dollar so prices
+ *  never show cents. */
+export const planPricing = (
+  plan: SubscriptionPlanDetails,
+  isYearly: boolean,
+): PlanPricing => {
+  const current = isYearly
+    ? Math.round(plan.yearlyPrice / 12)
+    : (plan.originalMonthlyPrice ?? plan.monthlyPrice);
+  const basePrice = Math.round(current / (1 - PROMO_PCT / 100));
+  return { current, basePrice, discountPct: PROMO_PCT };
+};
diff --git a/frontend/libs/components/pricing-table/src/lib/website-pricing-table.css b/frontend/libs/components/pricing-table/src/lib/website-pricing-table.css
new file mode 100644
index 0000000000..aabda76ea8
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/lib/website-pricing-table.css
@@ -0,0 +1,55 @@
+.pricing-hud {
+  font-family: var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+}
+.pricing-sale-badge {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+}
+
+.website-plan-card {
+  --plan: #555;
+  --plan-ink: #ddd;
+  min-width: 0;
+  background:
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--plan) 14%, transparent),
+      transparent 50%
+    ),
+    var(--pricing-surface, #101014);
+}
+.website-plan-card.plan-green {
+  --plan: #00a873;
+  --plan-ink: #2fd39c;
+}
+.website-plan-card.plan-purple {
+  --plan: #9d4cff;
+  --plan-ink: #c08fff;
+}
+.website-plan-card.plan-orange {
+  --plan: #d97700;
+  --plan-ink: #ffb347;
+}
+.website-plan-card.plan-enterprise {
+  --plan: #3568c9;
+  --plan-ink: #7ea3ee;
+}
+.website-plan-card[data-highlight] {
+  box-shadow: inset 0 0 0 2px var(--plan);
+  background:
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--plan) 22%, transparent),
+      color-mix(in srgb, var(--plan) 4%, transparent)
+    ),
+    var(--pricing-surface, #101014);
+}
+.website-plan-check {
+  background: color-mix(in srgb, var(--plan) 16%, transparent);
+  color: var(--plan-ink);
+}
diff --git a/frontend/libs/components/pricing-table/src/lib/website-pricing-table.tsx b/frontend/libs/components/pricing-table/src/lib/website-pricing-table.tsx
new file mode 100644
index 0000000000..d1ddd623dd
--- /dev/null
+++ b/frontend/libs/components/pricing-table/src/lib/website-pricing-table.tsx
@@ -0,0 +1,408 @@
+import { useState } from "react";
+import {
+  ArrowRightIcon,
+  CheckIcon,
+  CopyIcon,
+  GemIcon,
+  MailIcon,
+  StarIcon,
+} from "lucide-react";
+import { twMerge } from "tailwind-merge";
+import { Button } from "@storyteller/ui-button";
+import { TabSelector } from "@storyteller/ui-tab-selector";
+import { SubscriptionPlanDetails } from "@storyteller/subscription";
+import { PROMO_PCT, planPricing } from "./promo-discounts";
+import "./website-pricing-table.css";
+
+export type BillingCadence = "yearly" | "monthly";
+const BILLING_TABS = [
+  { id: "yearly", label: "Yearly" },
+  { id: "monthly", label: "Monthly" },
+];
+const HIGHLIGHT_ICONS = { "Most popular": StarIcon, "Best value": GemIcon };
+const PLAN_STYLE: Record<
+  string,
+  { tagline: string; highlight?: keyof typeof HIGHLIGHT_ICONS }
+> = {
+  artcraft_basic: { tagline: "For getting started" },
+  artcraft_pro: { tagline: "For serious creators", highlight: "Most popular" },
+  artcraft_max: {
+    tagline: "For studios and power users",
+    highlight: "Best value",
+  },
+};
+const PLAN_BUTTON_CLASSES =
+  "h-11 w-full font-mono text-[11px] font-semibold uppercase tracking-[0.12em] rounded-none bg-[var(--plan)] hover:bg-[var(--plan)] text-white hover:opacity-90";
+const CONTACT_EMAIL = "hello@storyteller.ai";
+const ENTERPRISE_FEATURES = [
+  "Bespoke credit allocation",
+  "Secure models",
+  "Support SLAs",
+  "Custom integrations",
+];
+const TRUST_POINTS = [
+  "Cancel anytime",
+  "Secure checkout via Stripe",
+  "Credits refunded if a generation fails",
+  "Open source — yours forever",
+];
+
+interface WebsitePricingTableProps {
+  plans: SubscriptionPlanDetails[];
+  cadence: BillingCadence;
+  onCadenceChange: (cadence: BillingCadence) => void;
+  showSeedanceFeatures: boolean;
+  showEnterprise: boolean;
+  activePlanSlug: string | null;
+  displayName?: string;
+  loading: boolean;
+  processingPlan: string | null;
+  managing: boolean;
+  onChoose: (slug: string) => void;
+  onManage: () => void;
+  onContact?: (mailtoUrl: string) => void;
+}
+
+// Website presentation reuses the shared table's account and checkout handlers.
+export function WebsitePricingTable({
+  plans,
+  cadence,
+  onCadenceChange: setCadence,
+  showSeedanceFeatures,
+  showEnterprise,
+  activePlanSlug,
+  displayName,
+  loading,
+  processingPlan,
+  managing,
+  onChoose,
+  onManage,
+  onContact,
+}: WebsitePricingTableProps) {
+  const hasActivePlan = !!activePlanSlug && activePlanSlug !== "free";
+  return (
+    <>
+      <div className="flex flex-wrap items-center justify-between gap-4 border-b border-white/15 px-6 py-4 md:px-10">
+        <div className="flex flex-wrap items-center gap-3">
+          <TabSelector
+            tabs={BILLING_TABS}
+            activeTab={cadence}
+            onTabChange={(id) => setCadence(id as BillingCadence)}
+            className="w-fit"
+            listClassName="rounded-none"
+            indicatorClassName="rounded-none"
+            tabClassName="w-24 font-mono text-[11px] uppercase tracking-[0.1em]"
+          />
+          <span className="pricing-hud pricing-sale-badge bg-primary px-2 py-1 text-white">
+            {PROMO_PCT}% off · ends soon
+          </span>
+          <p className="pricing-hud hidden text-primary sm:block">
+            {cadence === "yearly"
+              ? "2 months free"
+              : "Switch to yearly, save 20%"}
+          </p>
+        </div>
+        <p className="pricing-hud hidden text-white/40 sm:block">
+          {displayName ? `Signed in as ${displayName}` : "Prices in USD"}
+        </p>
+      </div>
+
+      <div className="grid gap-px bg-white/15 md:grid-cols-2 xl:grid-cols-4">
+        {plans.map((plan, i) => (
+          <PlanCell
+            key={plan.slug}
+            plan={plan}
+            index={String(i + 1).padStart(2, "0")}
+            cadence={cadence}
+            showSeedanceFeatures={showSeedanceFeatures}
+            isCurrent={plan.slug === activePlanSlug}
+            ctaLabel={
+              plan.slug === activePlanSlug
+                ? "Current plan"
+                : hasActivePlan
+                  ? `Switch to ${plan.name}`
+                  : `Get ${plan.name}`
+            }
+            disabled={loading || processingPlan !== null}
+            processing={processingPlan === plan.slug}
+            onChoose={() => onChoose(plan.slug)}
+          />
+        ))}
+        {showEnterprise && (
+          <EnterpriseCell
+            index={String(plans.length + 1).padStart(2, "0")}
+            onContact={onContact}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-x-8 gap-y-2 border-t border-white/15 px-6 py-4 md:px-10">
+        <ul className="flex flex-wrap items-center gap-x-8 gap-y-2">
+          {TRUST_POINTS.map((point) => (
+            <li
+              key={point}
+              className="pricing-hud flex items-center gap-2 text-white/55"
+            >
+              <CheckIcon aria-hidden className="h-3.5 w-3.5 text-primary" />
+              {point}
+            </li>
+          ))}
+        </ul>
+        {hasActivePlan && (
+          <button
+            type="button"
+            onClick={onManage}
+            disabled={managing}
+            className="pricing-hud text-white/55 underline underline-offset-4 hover:text-white/80 disabled:opacity-50"
+          >
+            {managing ? "Opening portal…" : "Manage plan"}
+          </button>
+        )}
+      </div>
+    </>
+  );
+}
+
+function PlanCell({
+  plan,
+  index,
+  cadence,
+  showSeedanceFeatures,
+  isCurrent,
+  ctaLabel,
+  disabled,
+  processing,
+  onChoose,
+}: {
+  plan: SubscriptionPlanDetails;
+  index: string;
+  cadence: BillingCadence;
+  showSeedanceFeatures: boolean;
+  isCurrent: boolean;
+  ctaLabel: string;
+  disabled: boolean;
+  processing: boolean;
+  onChoose: () => void;
+}) {
+  const { current, basePrice } = planPricing(plan, cadence === "yearly");
+  const yearlySavings =
+    (plan.originalMonthlyPrice ?? plan.monthlyPrice) * 12 - plan.yearlyPrice;
+  const highlight = PLAN_STYLE[plan.slug]?.highlight;
+  const HighlightIcon = highlight ? HIGHLIGHT_ICONS[highlight] : null;
+  const features = plan.features.filter(
+    (f) => !f.seedanceOnly || showSeedanceFeatures,
+  );
+
+  return (
+    <article
+      data-highlight={
+        PLAN_STYLE[plan.slug]?.highlight || isCurrent ? "" : undefined
+      }
+      className={`website-plan-card plan-${plan.colorScheme} flex flex-col`}
+    >
+      <CellIndexRow index={index}>
+        {isCurrent ? (
+          <>
+            <CheckIcon aria-hidden className="h-3 w-3" />
+            Your plan
+          </>
+        ) : (
+          <>
+            {HighlightIcon && <HighlightIcon aria-hidden className="h-3 w-3" />}
+            {PLAN_STYLE[plan.slug]?.highlight ?? "Plan"}
+          </>
+        )}
+      </CellIndexRow>
+
+      <div className="flex flex-1 flex-col p-6 md:p-8">
+        <div className="flex items-center justify-between gap-3">
+          <h3 className="font-display text-2xl font-medium tracking-[-0.02em] text-white">
+            {plan.name}
+          </h3>
+          <span className="pricing-hud bg-[var(--plan)] hover:bg-[var(--plan)] px-2 py-1 font-bold text-white">
+            {PROMO_PCT}% off
+          </span>
+        </div>
+        <p className="mt-1 text-sm text-white/55">
+          {PLAN_STYLE[plan.slug]?.tagline}
+        </p>
+
+        <div className="mt-5 flex items-baseline gap-2">
+          <span className="font-mono text-base text-[#f05951]/80 line-through">
+            ${basePrice}
+          </span>
+          <span className="font-display text-5xl font-medium tracking-[-0.03em] text-white">
+            ${current}
+          </span>
+          <span className="text-white/55">/mo</span>
+        </div>
+        <p className="pricing-hud mt-2 text-white/40">
+          {cadence === "yearly" ? (
+            <>
+              ${plan.yearlyPrice} billed yearly ·{" "}
+              <span className="text-[var(--plan-ink)]">
+                Save ${yearlySavings}
+              </span>
+            </>
+          ) : (
+            "Billed monthly · cancel anytime"
+          )}
+        </p>
+
+        <Button
+          type="button"
+          onClick={onChoose}
+          disabled={disabled || isCurrent}
+          loading={processing}
+          className={twMerge(
+            PLAN_BUTTON_CLASSES,
+            "mt-6",
+            isCurrent && "opacity-60",
+          )}
+        >
+          {ctaLabel}
+          {!isCurrent && <ArrowRightIcon aria-hidden className="h-3.5 w-3.5" />}
+        </Button>
+
+        <p className="pricing-hud mt-8 text-white/40">What you get</p>
+        <FeatureList items={features.map((f) => f.text)} className="mt-3" />
+      </div>
+    </article>
+  );
+}
+
+function EnterpriseCell({
+  index,
+  onContact,
+}: {
+  index: string;
+  onContact?: (mailtoUrl: string) => void;
+}) {
+  return (
+    <article
+      id="enterprise"
+      className="website-plan-card plan-enterprise flex flex-col"
+    >
+      <CellIndexRow index={index}>For teams</CellIndexRow>
+
+      <div className="flex flex-1 flex-col p-6 md:p-8">
+        <h3 className="font-display text-2xl font-medium tracking-[-0.02em] text-white">
+          Enterprise
+        </h3>
+        <div className="mt-5 flex items-baseline gap-2">
+          <span className="font-display text-5xl font-medium tracking-[-0.03em] text-white">
+            Custom
+          </span>
+        </div>
+        <p className="pricing-hud mt-2 text-white/40">
+          Bespoke volume &amp; terms
+        </p>
+
+        <ContactButtons className="mt-6" onContact={onContact} />
+
+        <p className="pricing-hud mt-8 text-white/40">
+          Everything in Max, plus
+        </p>
+        <FeatureList items={ENTERPRISE_FEATURES} className="mt-3" />
+      </div>
+    </article>
+  );
+}
+
+// Solid plan-colored index strip at the top of every cell.
+function CellIndexRow({
+  index,
+  children,
+}: {
+  index: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 bg-[var(--plan)] hover:bg-[var(--plan)] px-6 py-2.5 text-white md:px-8">
+      <p className="pricing-hud flex items-center gap-1.5 font-bold">
+        {children}
+      </p>
+      <p className="pricing-hud opacity-70">{index}</p>
+    </div>
+  );
+}
+
+function FeatureList({
+  items,
+  className,
+}: {
+  items: string[];
+  className?: string;
+}) {
+  return (
+    <ul className={twMerge("flex flex-col gap-2.5", className)}>
+      {items.map((text) => (
+        <li
+          key={text}
+          className="flex items-start gap-2.5 text-sm text-white/80"
+        >
+          <span className="website-plan-check mt-px flex h-4 w-4 shrink-0 items-center justify-center">
+            <CheckIcon aria-hidden className="h-3 w-3" />
+          </span>
+          {text}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// Mailto plus copy-to-clipboard, so visitors without a configured mail
+// client can still grab the address.
+function ContactButtons({
+  className,
+  onContact,
+}: {
+  className?: string;
+  onContact?: (mailtoUrl: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const mailtoUrl = `mailto:${CONTACT_EMAIL}`;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(CONTACT_EMAIL);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard unavailable (insecure context) — the mailto still works.
+    }
+  };
+
+  return (
+    <div className={twMerge("flex gap-px bg-white/30", className)}>
+      <Button
+        as="link"
+        href={mailtoUrl}
+        onClick={
+          onContact
+            ? (e) => {
+                e.preventDefault();
+                onContact(mailtoUrl);
+              }
+            : undefined
+        }
+        className={twMerge(PLAN_BUTTON_CLASSES, "flex-1")}
+      >
+        <MailIcon aria-hidden className="h-3.5 w-3.5" />
+        Contact us
+      </Button>
+      <Button
+        type="button"
+        onClick={copy}
+        aria-label={copied ? "Email copied" : "Copy email address"}
+        className={twMerge(PLAN_BUTTON_CLASSES, "w-12 px-0")}
+      >
+        {copied ? (
+          <CheckIcon aria-hidden className="h-4 w-4" />
+        ) : (
+          <CopyIcon aria-hidden className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/libs/components/pricing-table/tsconfig.json b/frontend/libs/components/pricing-table/tsconfig.json
new file mode 100644
index 0000000000..d9d3b9edae
--- /dev/null
+++ b/frontend/libs/components/pricing-table/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../../state/subscription"
+    },
+    {
+      "path": "../tab-selector"
+    },
+    {
+      "path": "../button"
+    },
+    {
+      "path": "../../icons"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}
diff --git a/frontend/libs/components/pricing-table/tsconfig.lib.json b/frontend/libs/components/pricing-table/tsconfig.lib.json
new file mode 100644
index 0000000000..c02619c154
--- /dev/null
+++ b/frontend/libs/components/pricing-table/tsconfig.lib.json
@@ -0,0 +1,59 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../../state/subscription/tsconfig.lib.json"
+    },
+    {
+      "path": "../tab-selector/tsconfig.lib.json"
+    },
+    {
+      "path": "../button/tsconfig.lib.json"
+    },
+    {
+      "path": "../../icons/tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/pricing-table/tsconfig.spec.json b/frontend/libs/components/pricing-table/tsconfig.spec.json
new file mode 100644
index 0000000000..18b7de51b8
--- /dev/null
+++ b/frontend/libs/components/pricing-table/tsconfig.spec.json
@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/frontend/libs/components/pricing-table/vite.config.ts b/frontend/libs/components/pricing-table/vite.config.ts
new file mode 100644
index 0000000000..f9d1c8737b
--- /dev/null
+++ b/frontend/libs/components/pricing-table/vite.config.ts
@@ -0,0 +1,50 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { isExternal } from '../../shared-vite-config';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/pricing-table',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-pricing-table',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: isExternal
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));
diff --git a/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx b/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
index 7d0fcf4b3a..3b25008962 100644
--- a/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
+++ b/frontend/libs/components/promptbox/src/lib/CharactersModal.tsx
@@ -44,6 +44,8 @@ interface PendingCharacter {
 
 const POLL_INTERVAL_MS = 5000;
 const PENDING_STALE_MS = 3 * 60 * 1000;
+const FIELD_LABEL_CLASSES =
+  "mb-0 text-[11px] tracking-[0.12em] text-base-fg/70";
 
 export const CharactersModal = ({
   isOpen,
@@ -320,7 +322,7 @@ const CharacterListView = ({
           {Array.from({ length: 8 }).map((_, i) => (
             <div
               key={i}
-              className="flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05]"
+              className="flex flex-col overflow-hidden border border-transparent bg-base-fg/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden">
                 <div
@@ -332,7 +334,7 @@ const CharacterListView = ({
               </div>
               <div className="px-2 py-1.5 flex justify-center bg-base-fg/[0.04]">
                 <div
-                  className="h-3 w-2/3 rounded bg-base-fg/[0.08]"
+                  className="h-3 w-2/3 bg-base-fg/[0.08]"
                   style={{
                     animation: `charPulse 1.8s ease-in-out ${i * 0.07 + 0.1}s infinite`,
                   }}
@@ -352,7 +354,7 @@ const CharacterListView = ({
           {/* Create New card */}
           <button
             onClick={onCreateClick}
-            className="flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg border-2 border-dashed border-base-fg/10 bg-base-fg/[0.05] text-base-fg/60 transition-colors hover:border-base-fg/25 hover:text-base-fg/80"
+            className="flex flex-col items-center justify-center gap-2 overflow-hidden border-2 border-dashed border-base-fg/15 bg-base-fg/[0.05] text-base-fg/60 transition-colors hover:border-base-fg/30 hover:text-base-fg/80"
           >
             <div className="flex aspect-square w-full flex-col items-center justify-center gap-2">
               <PlusIcon  className="text-lg" />
@@ -364,7 +366,7 @@ const CharacterListView = ({
           {pendingCharacters.map((pending) => (
             <div
               key={`pending-${pending.name}`}
-              className="relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05]"
+              className="relative flex flex-col overflow-hidden border border-transparent bg-base-fg/[0.05]"
             >
               <div className="aspect-square w-full overflow-hidden bg-base-fg/[0.05]">
                 {pending.previewUrl ? (
@@ -401,7 +403,7 @@ const CharacterListView = ({
             return (
               <div
                 key={character.token}
-                className="group relative flex flex-col overflow-hidden rounded-lg border border-transparent bg-base-fg/[0.05] transition-colors hover:border-base-fg/25 hover:bg-base-fg/10"
+                className="group relative flex flex-col overflow-hidden border border-transparent bg-base-fg/[0.05] transition-colors hover:border-base-fg/30 hover:bg-base-fg/10"
               >
                 <button
                   onClick={() => onSelectCharacter?.(character)}
@@ -441,7 +443,7 @@ const CharacterListView = ({
                           setPreviewCharacter(character);
                         }}
                         title="View full size"
-                        className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-black/80"
+                        className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-black/80"
                       >
                         <EyeIcon  className="text-[10px]" />
                       </button>
@@ -453,7 +455,7 @@ const CharacterListView = ({
                             e.stopPropagation();
                             onEditCharacter(character);
                           }}
-                          className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-black/80"
+                          className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-black/80"
                         >
                           <PenIcon
                             
@@ -464,7 +466,7 @@ const CharacterListView = ({
                             e.stopPropagation();
                             handleDelete(character);
                           }}
-                          className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 transition-colors hover:bg-red-500"
+                          className="flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 transition-colors hover:bg-red-500"
                         >
                           <Trash2Icon
                             
@@ -570,7 +572,7 @@ const EditCharacterView = ({
 
         {/* Avatar preview */}
         {character.maybe_avatar?.cdn_url && (
-          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-base-fg/[0.05]">
+          <div className="flex h-56 max-h-56 shrink-0 items-center justify-center overflow-hidden bg-base-fg/[0.05]">
             <img
               src={character.maybe_avatar.cdn_url}
               alt={character.name}
@@ -580,21 +582,26 @@ const EditCharacterView = ({
         )}
 
         {/* Name input */}
-        <div className="flex flex-col">
-          <Label htmlFor="edit-character-name">Name</Label>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="edit-character-name" className={FIELD_LABEL_CLASSES}>
+            Name
+          </Label>
           <Input
             id="edit-character-name"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="Character name"
             autoComplete="off"
-            inputClassName="bg-base-fg/[0.07] hover:border-ui-panel-border"
+            inputClassName="bg-ui-controls text-sm"
           />
         </div>
 
         {/* Description input */}
-        <div className="flex flex-col">
-          <Label htmlFor="edit-character-description">
+        <div className="flex flex-col gap-1.5">
+          <Label
+            htmlFor="edit-character-description"
+            className={FIELD_LABEL_CLASSES}
+          >
             Description{" "}
             <span className="font-normal text-base-fg/40">(optional)</span>
           </Label>
@@ -605,14 +612,14 @@ const EditCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
+            className="w-full resize-none rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder-base-fg/50 outline-none transition-colors focus:border-white focus:!outline-none"
           />
         </div>
       </div>
 
       {/* Action buttons */}
       <div className="flex justify-end gap-2 pt-4">
-        <Button variant="secondary" className="border-none" onClick={onBack}>
+        <Button variant="secondary" onClick={onBack}>
           Cancel
         </Button>
         <Button
@@ -829,8 +836,8 @@ const NewCharacterView = ({
         <div
           ref={dropZoneRef}
           className={twMerge(
-            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-base-fg/20 bg-base-fg/[0.05] transition-colors overflow-hidden",
-            isDragging && "border-blue-400 bg-blue-500/10",
+            "flex h-56 max-h-56 shrink-0 cursor-pointer flex-col items-center justify-center rounded-[3px] border-2 border-dashed border-base-fg/15 bg-base-fg/[0.05] transition-colors overflow-hidden",
+            isDragging && "border-white/60 bg-white/10",
           )}
           onDragEnter={handleDragEnter}
           onDragOver={handleDragOver}
@@ -860,7 +867,7 @@ const NewCharacterView = ({
                   e.stopPropagation();
                   removeImage(0);
                 }}
-                className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/80 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500"
+                className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center bg-black/60 text-white/80 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500"
               >
                 <XIcon  className="text-sm" />
               </button>
@@ -880,14 +887,14 @@ const NewCharacterView = ({
               >
                 <button
                   onClick={() => setIsGalleryOpen(true)}
-                  className="flex items-center gap-2 rounded-lg bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
+                  className="flex items-center gap-2 rounded-[3px] border border-base-fg/15 bg-transparent px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:border-base-fg/25 hover:bg-base-fg/[0.07] hover:text-base-fg"
                 >
                   <ImagesIcon  className="text-xs" />
                   Choose from Library
                 </button>
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2 rounded-lg bg-base-fg/10 px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:bg-base-fg/20"
+                  className="flex items-center gap-2 rounded-[3px] border border-base-fg/15 bg-transparent px-3 py-1.5 text-sm text-base-fg/80 transition-colors hover:border-base-fg/25 hover:bg-base-fg/[0.07] hover:text-base-fg"
                 >
                   <UploadIcon  className="text-xs" />
                   Upload Image
@@ -906,21 +913,26 @@ const NewCharacterView = ({
         />
 
         {/* Name input */}
-        <div className="flex flex-col">
-          <Label htmlFor="character-name">Name</Label>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="character-name" className={FIELD_LABEL_CLASSES}>
+            Name
+          </Label>
           <Input
             id="character-name"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="Character name"
             autoComplete="off"
-            inputClassName="bg-base-fg/[0.07] hover:border-ui-panel-border"
+            inputClassName="bg-ui-controls text-sm"
           />
         </div>
 
         {/* Description input */}
-        <div className="flex flex-col">
-          <Label htmlFor="character-description">
+        <div className="flex flex-col gap-1.5">
+          <Label
+            htmlFor="character-description"
+            className={FIELD_LABEL_CLASSES}
+          >
             Description{" "}
             <span className="font-normal text-base-fg/40">(optional)</span>
           </Label>
@@ -931,14 +943,14 @@ const NewCharacterView = ({
             placeholder="Description..."
             rows={3}
             autoComplete="off"
-            className="w-full resize-none rounded-lg px-3 py-2 outline-none bg-base-fg/[0.07] text-base-fg placeholder-base-fg/50 border border-ui-panel-border transition-all duration-150 ease-in-out focus:border-primary focus:!outline-none"
+            className="w-full resize-none rounded-[3px] border border-ui-panel-border bg-ui-controls px-3 py-2 text-sm text-base-fg placeholder-base-fg/50 outline-none transition-colors focus:border-white focus:!outline-none"
           />
         </div>
       </div>
 
       {/* Action buttons — sticky at the bottom */}
       <div className="sticky bottom-0 flex justify-end gap-2 pt-4 pb-1 bg-ui-modal">
-        <Button variant="secondary" className="border-none" onClick={onBack}>
+        <Button variant="secondary" onClick={onBack}>
           Cancel
         </Button>
         <Button
diff --git a/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx b/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
index 16a2299307..bfe91161da 100644
--- a/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/ImagePromptRow.tsx
@@ -119,7 +119,7 @@ const AudioRefTile = ({
   }, []);
 
   return (
-    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer flex items-center justify-center">
+    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer flex items-center justify-center">
       <button
         onClick={handleTogglePlay}
         className="flex items-center justify-center w-full h-full"
@@ -273,7 +273,7 @@ export const ImagePromptRow = ({
         style={style}
         {...(allowReorder ? { ...attributes, ...listeners } : {})}
         className={twMerge(
-          "glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 transition-opacity group",
+          "glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 transition-opacity group",
           allowReorder
             ? "cursor-move hover:border-white/80"
             : "cursor-pointer hover:border-white/80",
@@ -865,7 +865,7 @@ export const ImagePromptRow = ({
       )}
       <div
         className={twMerge(
-          "absolute left-0 glass w-full rounded-t-2xl flex",
+          "absolute left-0 glass w-full rounded-t-[3px] flex",
           showVideoReferenceSection ? "-top-[144px]" : "-top-[72px]",
           className,
         )}
@@ -936,7 +936,7 @@ export const ImagePromptRow = ({
                     .map((image, index) => (
                       <div
                         key={image.id}
-                        className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
+                        className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
                         onClick={() => onImageClick?.(image)}
                       >
                         <img
@@ -971,7 +971,7 @@ export const ImagePromptRow = ({
                   .map(({ id, previewUrl }) => (
                     <div
                       key={id}
-                      className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30"
+                      className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30"
                     >
                       {previewUrl && (
                         <div className="absolute inset-0">
@@ -1025,7 +1025,7 @@ export const ImagePromptRow = ({
                   >
                     <Button
                       variant="action"
-                      className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                      className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                       onClick={() => {
                         if (allowUpload) handleUploadClickStart();
                         else {
@@ -1064,7 +1064,7 @@ export const ImagePromptRow = ({
                 <div className="flex gap-2 items-center">
                   {endFrameImage ? (
                     <div
-                      className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
+                      className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer hover:cursor-zoom-in"
                       onClick={() => onImageClick?.(endFrameImage)}
                     >
                       <img
@@ -1085,7 +1085,7 @@ export const ImagePromptRow = ({
                       </button>
                     </div>
                   ) : uploadingEnd ? (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30">
                       {uploadingEnd.previewUrl && (
                         <div className="absolute inset-0">
                           <img
@@ -1136,7 +1136,7 @@ export const ImagePromptRow = ({
                     >
                       <Button
                         variant="action"
-                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                         onClick={() => {
                           if (allowUploadEnd) handleUploadClickEnd();
                           else {
@@ -1177,7 +1177,7 @@ export const ImagePromptRow = ({
                   {referenceVideos.map((video) => (
                     <div
                       key={video.id}
-                      className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer"
+                      className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 hover:border-white/80 transition-all group cursor-pointer"
                     >
                       <video
                         src={video.url}
@@ -1202,7 +1202,7 @@ export const ImagePromptRow = ({
                     </div>
                   ))}
                   {uploadingVideo && (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30">
                       <div className="absolute inset-0">
                         <video
                           src={URL.createObjectURL(uploadingVideo.file)}
@@ -1252,7 +1252,7 @@ export const ImagePromptRow = ({
                       >
                         <Button
                           variant="action"
-                          className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                          className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                           onClick={handleUploadClickVideo}
                         >
                           <PlusIcon
@@ -1292,7 +1292,7 @@ export const ImagePromptRow = ({
                     />
                   ))}
                   {uploadingAudio && (
-                    <div className="glass relative aspect-square overflow-hidden rounded-lg w-14 border-2 border-white/30 flex items-center justify-center">
+                    <div className="glass relative aspect-square overflow-hidden rounded-[3px] w-14 border-2 border-white/30 flex items-center justify-center">
                       <LoaderCircleIcon
                         
                         className="h-6 w-6 animate-spin text-white" />
@@ -1302,7 +1302,7 @@ export const ImagePromptRow = ({
                     !uploadingAudio && (
                       <Button
                         variant="action"
-                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-lg w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
+                        className="bg-ui-controls/40 hover:bg-ui-controls/60 aspect-square w-full overflow-hidden rounded-[3px] w-14 border-dashed border-2 border-black/5 dark:border-white/25 transition-all"
                         onClick={handleUploadClickAudio}
                       >
                         <PlusIcon
@@ -1317,7 +1317,7 @@ export const ImagePromptRow = ({
         </div>
         <div className="flex items-center">
           <div className="w-[1px] h-full bg-white/10" />
-          <div className="flex items-center gap-2 w-[1px] h-full bg-base-fg/20 dark:bg-base-fg/10 rounded-lg" />
+          <div className="flex items-center gap-2 w-[1px] h-full bg-base-fg/20 dark:bg-base-fg/10" />
           <div className="p-2">
             <Button
               variant="action"
diff --git a/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx b/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
index 6ac3b1b6aa..7643772bd7 100644
--- a/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
+++ b/frontend/libs/components/promptbox/src/lib/MentionChipMenu.tsx
@@ -20,7 +20,7 @@ const ANCHOR_GAP = 4;
 const OPEN_GRACE_MS = 700;
 
 const MENU_ROW =
-  "flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-base-fg transition-colors hover:bg-ui-controls/60 cursor-pointer";
+  "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 text-sm text-base-fg transition-colors hover:bg-ui-controls/60 cursor-pointer";
 
 // Header subtitle and empty-replace-list copy per chip type.
 const TYPE_COPY: Record<MentionItem["type"], { title: string; empty: string }> =
@@ -182,7 +182,7 @@ export function MentionChipMenu({
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
       className={twMerge(
-        "fixed z-[9999] w-56 rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl",
+        "fixed z-[9999] w-56 rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl",
         "transform-gpu transition duration-75 ease-out",
         entered
           ? "translate-y-0 opacity-100"
@@ -210,7 +210,7 @@ export function MentionChipMenu({
               onClick={onPreview}
               title="View full size"
               aria-label={`View ${currentName}`}
-              className="group/avatar relative shrink-0 cursor-pointer overflow-hidden rounded-md"
+              className="group/avatar relative shrink-0 cursor-pointer overflow-hidden rounded-[3px]"
             >
               <ChipAvatar
                 preview={currentPreview}
@@ -255,7 +255,7 @@ export function MentionChipMenu({
           <div className="flex items-center gap-2 px-2 py-1.5">
             <button
               type="button"
-              className="flex h-6 w-6 items-center justify-center rounded-md text-base-fg/60 transition-colors hover:bg-ui-controls/60 hover:text-base-fg"
+              className="flex h-6 w-6 items-center justify-center rounded-[3px] text-base-fg/60 transition-colors hover:bg-ui-controls/60 hover:text-base-fg"
               onClick={() => setView("menu")}
               aria-label="Back"
             >
@@ -312,7 +312,7 @@ function ChipAvatar({
 }) {
   const FallbackIcon = type === "character" ? UserIcon : ImageIcon;
   return (
-    <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-white/10 bg-black/20">
+    <div className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden border border-white/10 bg-black/20">
       {preview ? (
         <img src={preview} alt={name} className="h-full w-full object-cover" />
       ) : (
diff --git a/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx b/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
index 2ea9b38072..8013fbbabb 100644
--- a/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
+++ b/frontend/libs/components/promptbox/src/lib/MentionTextarea.tsx
@@ -83,9 +83,9 @@ interface ChipMenuState {
 // itself bg-ui-controls, so the default bg-ui-controls/80 chip disappears
 // against it.
 const CHIP_CLASS =
-  "mention-chip mx-0.5 inline-flex max-w-[10rem] cursor-pointer items-center gap-1 rounded-md border border-white/10 bg-ui-controls/80 px-1.5 py-0.5 align-middle leading-tight transition-colors hover:border-white/25 hover:bg-white/15 [@media(hover:none)]:bg-black/30 [@media(hover:none)]:border-white/15";
+  "mention-chip mx-0.5 inline-flex max-w-[10rem] cursor-pointer items-center gap-1 rounded-[3px] border border-white/10 bg-ui-controls/80 px-1.5 py-0.5 align-middle leading-tight transition-colors hover:border-white/25 hover:bg-white/15 [@media(hover:none)]:bg-black/30 [@media(hover:none)]:border-white/15";
 const CHIP_IMG_CLASS =
-  "pointer-events-none h-4 w-4 shrink-0 rounded object-cover select-none";
+  "pointer-events-none h-4 w-4 shrink-0 object-cover select-none";
 const CHIP_NAME_CLASS = "pointer-events-none truncate";
 
 /** Coarse-pointer (touch) device — no hover, on-screen keyboard. */
@@ -496,7 +496,7 @@ function MentionDropdown({
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
       onScroll={() => (lastScrollTs.current = performance.now())}
-      className="fixed z-[9999] w-64 max-w-[calc(100vw-2rem)] max-h-72 overflow-y-auto rounded-lg border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
+      className="fixed z-[9999] w-64 max-w-[calc(100vw-2rem)] max-h-72 overflow-y-auto rounded-[3px] border border-ui-panel-border bg-ui-panel p-1 shadow-xl"
       style={{
         pointerEvents: "auto",
         ...(placement
@@ -523,7 +523,7 @@ function MentionDropdown({
             key={item.token ?? `${item.label}-${i}`}
             type="button"
             className={twMerge(
-              "flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-base-fg transition-colors cursor-pointer",
+              "flex w-full items-center gap-2 rounded-[3px] px-2 py-2 text-sm text-base-fg transition-colors cursor-pointer",
               i === activeIndex ? "bg-ui-controls/80" : "hover:bg-ui-controls/60",
             )}
             // Selection happens on pointerup, not click: on mobile the
@@ -570,7 +570,7 @@ function MentionDropdown({
             onClick={() => onSelect(item)}
             onMouseEnter={() => onHover(i)}
           >
-            <div className="h-8 w-8 flex-shrink-0 overflow-hidden rounded-md border border-white/10 flex items-center justify-center bg-black/20">
+            <div className="h-8 w-8 flex-shrink-0 overflow-hidden border border-white/10 flex items-center justify-center bg-black/20">
               {item.type === "character" && item.preview ? (
                 <img
                   src={item.preview}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx b/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
index 04ed2ed437..e552fb7ede 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx
@@ -388,13 +388,13 @@ export const PromptBox2D = ({
         )}
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
+            "glass relative w-full p-4",
             selectedImageModel?.canUseImagePrompt &&
               isImageRowVisible &&
               "rounded-t-none",
           )}
         >
-          <div className="flex justify-center gap-2">
+          <div className="flex gap-3">
             {selectedImageModel?.canUseImagePrompt && (
               <Tooltip
                 content="Add Image"
@@ -406,7 +406,7 @@ export const PromptBox2D = ({
                   variant="action"
                   className={twMerge(
                     "h-8 w-8 p-0 bg-transparent hover:bg-transparent group transition-all border-0 shadow-none",
-                    isImageRowVisible && "text-primary",
+                    isImageRowVisible && "text-white",
                   )}
                   onClick={() => setShowImagePrompts((prev) => !prev)}
                 >
@@ -433,7 +433,7 @@ export const PromptBox2D = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe your image..."
-                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
+                className={`promptbox-scrollbar text-md min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -443,14 +443,14 @@ export const PromptBox2D = ({
               />
               <PromptFullscreenButton onClick={openFullscreen} />
               <span
-                className={`absolute -bottom-1 right-0 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
+                className={`pointer-events-none absolute -bottom-1 right-4 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
               >
                 {prompt.length} / {isFinite(maxLen) ? maxLen : "∞"}
               </span>
             </div>
           </div>
-          <div className="mt-2 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
+          <div className="mt-3.5 flex items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               {modelSelector}
               {selectedImageModel?.canChangeAspectRatio && (
                 <Tooltip
@@ -495,11 +495,6 @@ export const PromptBox2D = ({
               )}
             </div>
             <div className="flex items-center gap-2">
-              <PromptClearAllButton
-                onClick={handleClearAll}
-                disabled={!hasClearableContent}
-                confirmClear={referenceImages.length > 0}
-              />
               {onFitPressed && (
                 <Tooltip
                   content={"Fit canvas to screen"}
@@ -524,8 +519,13 @@ export const PromptBox2D = ({
                   onGenerationCountChange?.(count);
                 }}
               />
+              <PromptClearAllButton
+                onClick={handleClearAll}
+                disabled={!hasClearableContent}
+                confirmClear={referenceImages.length > 0}
+              />
               <GenerateButton
-                className="flex items-center border-none bg-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex items-center border-none bg-white px-3 text-sm font-bold text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50"
                 icon={undefined}
                 onClick={handleGenerate}
                 disabled={isEnqueueing || isDisabled || !prompt.trim()}
@@ -580,14 +580,14 @@ export const PromptBox2D = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage as any}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Describe your image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx b/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
index bd66780eb9..39e1e1b895 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx
@@ -680,8 +680,8 @@ export const PromptBox3D = ({
         )}
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
-            isPromptBoxFocused ? "!border !border-primary" : "",
+            "glass relative w-full p-4",
+            isPromptBoxFocused && "border-primary",
             selectedImageModel?.canUseImagePrompt &&
               isImageRowVisible &&
               "rounded-t-none",
@@ -692,7 +692,7 @@ export const PromptBox3D = ({
           onPointerDown={(e) => e.stopPropagation()}
           onPointerUp={(e) => e.stopPropagation()}
         >
-          <div className="flex justify-center gap-2">
+          <div className="flex gap-3">
             {selectedImageModel?.canUseImagePrompt && (
               <Tooltip
                 content="Add Image"
@@ -704,7 +704,7 @@ export const PromptBox3D = ({
                   variant="action"
                   className={twMerge(
                     "h-8 w-8 p-0 bg-transparent hover:bg-transparent group transition-all border-0 shadow-none",
-                    isImageRowVisible && "text-primary",
+                    isImageRowVisible && "text-white",
                   )}
                   onClick={() => setShowImagePrompts((prev) => !prev)}
                 >
@@ -731,7 +731,7 @@ export const PromptBox3D = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe your image..."
-                className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[300px]" : "max-h-[5.5em]"}`}
+                className={`promptbox-scrollbar text-md min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg placeholder-base-fg/60 focus:outline-none ${isExpanded ? "max-h-[300px]" : "max-h-[5.5em]"}`}
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -747,15 +747,15 @@ export const PromptBox3D = ({
               />
               <PromptFullscreenButton onClick={openFullscreen} />
               <span
-                className={`absolute -bottom-1 right-0 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
+                className={`pointer-events-none absolute -bottom-1 right-4 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
               >
                 {prompt.length} / {isFinite(maxLen) ? maxLen : "∞"}
               </span>
             </div>
           </div>
           {buildMode === "manual" && (
-          <div className="mt-2 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
+          <div className="mt-3.5 flex items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               {modelSelector}
               {selectedImageModel?.supportsNewAspectRatio() && (
                 <AspectRatioPicker
@@ -885,7 +885,7 @@ export const PromptBox3D = ({
                 Save frame
               </Button>
               <GenerateButton
-                className="flex items-center border-none bg-brand-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex items-center border-none bg-white px-3 text-sm font-bold text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50"
                 icon={undefined}
                 onClick={handleEnqueue}
                 disabled={isEnqueueing || !prompt.trim()}
@@ -949,7 +949,7 @@ export const PromptBox3D = ({
                 </Tooltip>
                 <Button
                   variant="primary"
-                  className="flex items-center border-none bg-brand-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                  className="flex items-center border-none bg-white px-3 text-sm font-bold text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50"
                   onClick={handlePromptedUpdate}
                   disabled={!prompt.trim()}
                 >
@@ -1028,14 +1028,14 @@ export const PromptBox3D = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage as any}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Describe your image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
index c82a5074bd..150e5617ca 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxAudio.tsx
@@ -6,7 +6,7 @@ import {
 } from "@storyteller/ui-gallery-modal";
 import { PopoverMenu, PopoverItem } from "@storyteller/ui-popover";
 import { Tooltip } from "@storyteller/ui-tooltip";
-import { GenerateButton, ToggleButton } from "@storyteller/ui-button";
+import { GenerateIconButton, ToggleButton } from "@storyteller/ui-button";
 import { ChevronDownIcon, ChevronUpIcon, MicIcon, MicOffIcon, RepeatIcon } from "lucide-react";
 import { DynamicIcon } from "@storyteller/icons";
 import type { OmniGenAudioModelDetails, OmniGenAudioRequest, OmniGenAudioGenerateResponse, UploadMediaFn } from "@storyteller/api";
@@ -556,23 +556,21 @@ export const PromptBoxAudio = ({
       <div className="relative z-20 flex flex-col">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
-            isFocused
-              ? "ring-1 ring-primary border-primary"
-              : "ring-1 ring-transparent",
+            "glass relative w-full p-4 !transition-all duration-200",
+            isFocused && "border-primary",
           )}
           {...drop.dropZoneProps}
         >
           {dropOverlay}
           {referenceRow}
 
-          <div className="flex justify-center gap-2">
+          <div className="flex gap-3">
             <div className="promptbox-resize-wrap relative flex-1">
               <textarea
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe the music or sound you want..."
-                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
+                className="promptbox-scrollbar text-md min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -588,13 +586,13 @@ export const PromptBoxAudio = ({
             <StylePromptRow value={stylePrompt} onChange={setStylePrompt} />
           )}
 
-          <div className="mt-2 flex items-center justify-between gap-2">
+          <div className="mt-3.5 flex items-center justify-between gap-2">
             <div className="flex flex-wrap items-center gap-2">
               {modelSelector}
               {toggleButtons}
               {settingsPopovers}
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5">
               {missingRequiredAudioRef && (
                 <span className="flex animate-pulse items-center gap-1.5 text-xs font-medium text-red-500">
                   Audio track required
@@ -605,16 +603,12 @@ export const PromptBoxAudio = ({
                 disabled={!hasClearableContent}
                 confirmClear={hasAttachedRefs}
               />
-              <GenerateButton
-                className="flex items-center border-none bg-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
-                icon={undefined}
+              <GenerateIconButton
                 onClick={handleEnqueue}
                 disabled={!prompt.trim() || missingRequiredAudioRef}
                 loading={isEnqueueing}
                 credits={credits}
-              >
-                Generate
-              </GenerateButton>
+              />
             </div>
           </div>
 
@@ -675,7 +669,7 @@ export const PromptBoxAudio = ({
       >
         <textarea
           placeholder="Describe the music or sound you want..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
index aa467897d6..80d5584248 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxEdit.tsx
@@ -330,7 +330,7 @@ export const PromptBoxEdit = ({
         {(supportsMaskedInpainting || isNanoBananaModel) && (
           <div
             className={twMerge(
-              "glass w-fit mx-auto rounded-xl px-2 py-2 flex items-center gap-3",
+              "glass w-fit mx-auto rounded-[3px] px-2 py-2 flex items-center gap-3",
               selectedImageModel?.canUseImagePrompt &&
                 isImageRowVisible &&
                 "mb-[72px]",
@@ -346,7 +346,7 @@ export const PromptBoxEdit = ({
               <Tooltip content="Undo" position="top" delay={200}>
                 <button
                   onClick={onUndo}
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="flex h-8 w-8 items-center justify-center rounded-[3px] text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                   disabled={!onUndo}
                 >
                   <RotateCcwIcon  className="h-4 w-4" />
@@ -355,7 +355,7 @@ export const PromptBoxEdit = ({
               <Tooltip content="Redo" position="top" delay={200}>
                 <button
                   onClick={onRedo}
-                  className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="flex h-8 w-8 items-center justify-center rounded-[3px] text-white/70 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
                   disabled={!onRedo}
                 >
                   <Redo2Icon  className="h-4 w-4" />
@@ -383,14 +383,14 @@ export const PromptBoxEdit = ({
           )}
           <div
             className={twMerge(
-              "glass relative w-[860px] rounded-xl p-4",
-              isFocused && "ring-1 ring-primary border-primary",
+              "glass relative w-[860px] p-4",
+              isFocused && "border-primary",
               selectedImageModel?.canUseImagePrompt &&
                 isImageRowVisible &&
                 "rounded-t-none",
             )}
           >
-            <div className="flex justify-center gap-2">
+            <div className="flex gap-3">
               {selectedImageModel?.canUseImagePrompt && (
                 <Tooltip
                   content="Add Image"
@@ -402,7 +402,7 @@ export const PromptBoxEdit = ({
                     variant="action"
                     className={twMerge(
                       "h-8 w-8 p-0 bg-transparent hover:bg-transparent group transition-all border-0 shadow-none",
-                      isImageRowVisible && "text-primary",
+                      isImageRowVisible && "text-white",
                     )}
                     onClick={() => setShowImagePrompts((prev) => !prev)}
                   >
@@ -428,7 +428,7 @@ export const PromptBoxEdit = ({
                   ref={textareaRef}
                   rows={1}
                   placeholder="Write what you want to change in your image and click generate..."
-                  className={`promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
+                  className={`promptbox-scrollbar text-md min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-white placeholder-white placeholder:text-white/60 focus:outline-none ${isExpanded ? "max-h-[500px]" : "max-h-[5.5em]"}`}
                   value={prompt}
                   onChange={handleChange}
                   onPaste={handlePaste}
@@ -438,14 +438,14 @@ export const PromptBoxEdit = ({
                 />
                 <PromptFullscreenButton onClick={openFullscreen} />
                 <span
-                  className={`absolute -bottom-1 right-0 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-white/40"}`}
+                  className={`pointer-events-none absolute -bottom-1 right-4 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-white/40"}`}
                 >
                   {prompt.length} / {isFinite(maxLen) ? maxLen : "∞"}
                 </span>
               </div>
             </div>
-            <div className="mt-2 flex items-center justify-between gap-2">
-              <div className="flex items-center gap-2">
+            <div className="mt-3.5 flex items-center justify-between gap-2">
+              <div className="flex flex-wrap items-center gap-2">
                 {selectedImageModel?.supportsNewAspectRatio() && (
                   <AspectRatioPicker
                     model={selectedImageModel}
@@ -497,11 +497,6 @@ export const PromptBoxEdit = ({
                 )}
               </div>
               <div className="flex items-center gap-2">
-                <PromptClearAllButton
-                  onClick={handleClearAll}
-                  disabled={!hasClearableContent}
-                  confirmClear={referenceImages.length > 0}
-                />
                 {onFitPressed && (
                   <Tooltip
                     content={"Fit canvas to screen"}
@@ -526,8 +521,13 @@ export const PromptBoxEdit = ({
                     onGenerationCountChange?.(count);
                   }}
                 />
+                <PromptClearAllButton
+                  onClick={handleClearAll}
+                  disabled={!hasClearableContent}
+                  confirmClear={referenceImages.length > 0}
+                />
                 <GenerateButton
-                  className="flex items-center border-none bg-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                  className="flex items-center border-none bg-white px-3 text-sm font-bold text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50"
                   icon={undefined}
                   onClick={handleGenerate}
                   disabled={isDisabled || !prompt.trim()}
@@ -583,14 +583,14 @@ export const PromptBoxEdit = ({
               referenceImages={referenceImages}
               setReferenceImages={setReferenceImages}
               uploadImage={uploadImage}
-              className="relative top-auto rounded-2xl"
+              className="relative top-auto rounded-[3px]"
             />
           ) : undefined
         }
       >
         <textarea
           placeholder="Write what you want to change in your image and click generate..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
index 91f741a611..922487612b 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxErrorBoundary.tsx
@@ -24,7 +24,7 @@ export class PromptBoxErrorBoundary extends Component<Props, State> {
   override render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center rounded-xl border border-red-500/30 bg-red-500/10 px-6 py-4 text-sm text-red-300">
+        <div className="flex items-center justify-center rounded-[3px] border border-red-500/30 bg-red-500/10 px-6 py-4 text-sm text-red-300">
           <span>Something went wrong with the prompt box.&nbsp;</span>
           <button
             className="underline hover:text-red-200"
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
index a1451da120..7040aa8448 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx
@@ -473,15 +473,13 @@ export const PromptBoxImage = ({
       <div className="relative z-20 flex flex-col">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
-            isFocused
-              ? "ring-1 ring-primary border-primary"
-              : "ring-1 ring-transparent",
+            "glass relative w-full p-4 !transition-all duration-200",
+            isFocused && "border-primary",
           )}
           {...drop.dropZoneProps}
         >
           {dropOverlay}
-          <div className="flex justify-center gap-2">
+          <div className="flex gap-3">
             {renderReferenceDeck()}
 
             <div className="promptbox-resize-wrap relative flex-1">
@@ -489,7 +487,7 @@ export const PromptBoxImage = ({
                 ref={textareaRef}
                 rows={1}
                 placeholder="Describe what you want in the image..."
-                className="promptbox-scrollbar text-md mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
+                className="promptbox-scrollbar text-md min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg placeholder-base-fg/60 transition-[height] duration-200 ease-out focus:outline-none"
                 value={prompt}
                 onChange={handleChange}
                 onPaste={handlePaste}
@@ -499,14 +497,14 @@ export const PromptBoxImage = ({
               />
               <PromptFullscreenButton onClick={openFullscreen} />
               <span
-                className={`absolute -bottom-1 right-0 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
+                className={`pointer-events-none absolute -bottom-1 right-4 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
               >
                 {prompt.length} / {isFinite(maxLen) ? maxLen : "∞"}
               </span>
             </div>
           </div>
-          <div className="mt-2 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
+          <div className="mt-3.5 flex items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               {modelSelector}
               {selectedModel?.supportsNewAspectRatio() && (
                 <AspectRatioPicker
@@ -568,12 +566,7 @@ export const PromptBoxImage = ({
                 />
               )}
             </div>
-            <div className="flex items-center gap-2">
-              <PromptClearAllButton
-                onClick={handleClearAll}
-                disabled={!hasClearableContent}
-                confirmClear={referenceImages.length > 0}
-              />
+            <div className="flex items-center gap-1.5">
               <GenerationCountPicker
                 currentModel={selectedModel}
                 currentCount={generationCount}
@@ -581,6 +574,11 @@ export const PromptBoxImage = ({
                   setGenerationCount(count);
                 }}
               />
+              <PromptClearAllButton
+                onClick={handleClearAll}
+                disabled={!hasClearableContent}
+                confirmClear={referenceImages.length > 0}
+              />
               <GenerateIconButton
                 onClick={handleEnqueue}
                 disabled={!prompt.trim()}
@@ -628,7 +626,7 @@ export const PromptBoxImage = ({
       >
         <textarea
           placeholder="Describe what you want in the image..."
-          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+          className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
           value={prompt}
           onChange={handleChange}
           onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
index 8ed2128cca..d6c23116fe 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptBoxVideo.tsx
@@ -1317,7 +1317,7 @@ export const PromptBoxVideo = ({
       <button
         type="button"
         onClick={() => setIsCharactersModalOpen(true)}
-        className="flex h-9 items-center justify-center gap-1 rounded-lg border border-ui-controls-border bg-ui-controls px-3 text-sm font-medium text-base-fg transition-all duration-150 hover:bg-ui-controls/80 active:scale-95"
+        className="flex h-9 items-center justify-center gap-1 rounded-[3px] border border-ui-controls-border bg-ui-controls px-3 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg transition-colors duration-150 hover:bg-ui-controls/80"
       >
         @Characters
       </button>
@@ -1342,16 +1342,14 @@ export const PromptBoxVideo = ({
       <div className="relative z-20 flex flex-col gap-3">
         <div
           className={twMerge(
-            "glass relative w-full rounded-2xl p-4",
-            isFocused
-              ? "ring-1 ring-primary border-primary"
-              : "ring-1 ring-transparent",
+            "glass relative w-full p-4 !transition-all duration-200",
+            isFocused && "border-primary",
           )}
           {...drop.dropZoneProps}
         >
           {dropOverlay}
           {selectedModel?.textToVideoSupported === false && (
-            <div className="mb-2 flex items-center gap-1.5 rounded-md bg-ui-controls/60 px-2.5 py-1.5 text-xs text-base-fg/70">
+            <div className="mb-2 flex items-center gap-1.5 bg-ui-controls/60 px-2.5 py-1.5 text-xs text-base-fg/70">
               <InfoIcon
                 
                 className="h-3 w-3 shrink-0" />
@@ -1361,7 +1359,7 @@ export const PromptBoxVideo = ({
               </span>
             </div>
           )}
-          <div className="relative flex justify-center gap-3">
+          <div className="relative flex gap-3">
             {isReferenceMode ? renderReferenceDeck() : renderKeyframeCards()}
             <div className="promptbox-resize-wrap relative flex-1 min-w-0">
               {hasAnyMentionables ? (
@@ -1378,7 +1376,7 @@ export const PromptBoxVideo = ({
                       ? "Use @Image1, @Video1, @Audio1... to reference uploads in prompt..."
                       : "Describe what you want to happen in the video..."
                   }
-                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg"
+                  className="promptbox-scrollbar text-md relative min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg"
                   onKeyDown={(e) => {
                     if (e.key !== "Enter") return;
                     const isSubmitCombo = enterToGenerate && !e.shiftKey;
@@ -1401,7 +1399,7 @@ export const PromptBoxVideo = ({
                   ref={textareaRef}
                   rows={1}
                   placeholder="Describe what you want to happen in the video..."
-                  className="promptbox-scrollbar text-md relative mb-2 min-h-[2.5em] w-full resize-y overflow-y-auto rounded bg-transparent pb-2 pr-8 pt-1 text-base-fg placeholder-base-fg/60 focus:outline-none"
+                  className="promptbox-scrollbar text-md relative min-h-[2.5em] w-full resize-y overflow-y-auto bg-transparent pr-8 text-base-fg placeholder-base-fg/60 focus:outline-none"
                   value={prompt}
                   onChange={handleChange}
                   onPaste={handlePaste}
@@ -1412,14 +1410,14 @@ export const PromptBoxVideo = ({
               )}
               <PromptFullscreenButton onClick={openFullscreen} />
               <span
-                className={`absolute -bottom-1 right-0 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
+                className={`pointer-events-none absolute -bottom-1 right-4 text-[10px] tabular-nums ${isFinite(maxLen) && prompt.length > maxLen ? "text-red-500" : "text-base-fg/40"}`}
               >
                 {prompt.length} / {isFinite(maxLen) ? maxLen : "∞"}
               </span>
             </div>
           </div>
-          <div className="mt-2 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
+          <div className="mt-3.5 flex items-center justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               {modelSelector}
               <Tooltip
                 content="Aspect Ratio"
@@ -1495,7 +1493,7 @@ export const PromptBoxVideo = ({
                     }
                     triggerLabel={`${effectiveDuration}s`}
                   >
-                    <div className="w-48 pb-0.5">
+                    <div className="w-[min(16rem,calc(100vw-2rem))] pb-0.5">
                       <div className="flex items-center gap-2.5">
                         <div className="flex-1">
                           <SliderV2
@@ -1512,7 +1510,7 @@ export const PromptBoxVideo = ({
                           {effectiveDuration}s
                         </span>
                       </div>
-                      <div className="mt-1.5 flex justify-between px-0.5 text-[11px] text-base-fg/40">
+                      <div className="mt-1.5 flex justify-between px-0.5 text-[11px] tabular-nums text-base-fg/40">
                         <span>{durationRange.min}s</span>
                         <span>{durationRange.max}s</span>
                       </div>
@@ -1533,6 +1531,11 @@ export const PromptBoxVideo = ({
                     icon={AudioLinesIcon}
                     activeIcon={AudioLinesIcon}
                     onClick={() => setGenerateWithSound(!generateWithSound)}
+                    className={
+                      generateWithSound
+                        ? "bg-white/10 hover:bg-white/15 border-white/40"
+                        : undefined
+                    }
                   />
                 </Tooltip>
               )}
@@ -1541,18 +1544,13 @@ export const PromptBoxVideo = ({
 
               {characterButtonEl}
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5">
               {modelNeedsAnImageButNoneAreSelected && (
                 <span className="flex items-center gap-1.5 text-xs text-red-500 font-medium animate-pulse">
                   <InfoIcon />
                   Starting frame required
                 </span>
               )}
-              <PromptClearAllButton
-                onClick={handleClearAll}
-                disabled={!hasClearableContent}
-                confirmClear={hasAttachedRefs}
-              />
               {generationCounts.length > 1 && (
                 <VideoGenerationCountPicker
                   counts={generationCounts}
@@ -1560,6 +1558,11 @@ export const PromptBoxVideo = ({
                   handleCountChange={setGenerationCount}
                 />
               )}
+              <PromptClearAllButton
+                onClick={handleClearAll}
+                disabled={!hasClearableContent}
+                confirmClear={hasAttachedRefs}
+              />
               <Tooltip
                 content="Add a starting image before generating"
                 position="top"
@@ -1672,13 +1675,13 @@ export const PromptBoxVideo = ({
                 ? "Use @Image1, @Video1, @Audio1... to reference uploads in prompt..."
                 : "Describe what you want to happen in the video..."
             }
-            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg"
+            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg"
             style={{ resize: "none" }}
           />
         ) : (
           <textarea
             placeholder="Describe what you want to happen in the video..."
-            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
+            className="promptbox-scrollbar text-md h-full min-h-0 w-full resize-none overflow-y-auto rounded-[3px] bg-transparent text-base-fg placeholder-base-fg/60 focus:outline-none"
             value={prompt}
             onChange={handleChange}
             onPaste={handlePaste}
diff --git a/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx b/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
index ed8ff48ede..3a5dbfbbf9 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptClearAllButton.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { Modal } from "@storyteller/ui-modal";
-import { Button } from "@storyteller/ui-button";
+import { Button, NEUTRAL_BUTTON_HOVER_CLASSES } from "@storyteller/ui-button";
 import { EraserIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
@@ -16,7 +16,7 @@ import { twMerge } from "tailwind-merge";
 // `buttonClassName` to PopoverMenu triggers (e.g. the generation count
 // picker) so they match this button.
 export const PROMPT_TOOLBAR_ICON_BUTTON_CLASSES =
-  "flex h-9 w-9 items-center justify-center rounded-lg border-0 bg-transparent px-0 text-base-fg/50 shadow-none transition-colors hover:bg-base-fg/10 hover:text-base-fg/90";
+  `flex h-9 w-9 items-center justify-center rounded-[3px] border border-transparent bg-transparent px-0 text-base-fg/50 shadow-none transition-colors ${NEUTRAL_BUTTON_HOVER_CLASSES} hover:text-base-fg/90`;
 
 interface PromptClearAllButtonProps {
   onClick: () => void;
diff --git a/frontend/libs/components/promptbox/src/lib/PromptFullscreenButton.tsx b/frontend/libs/components/promptbox/src/lib/PromptFullscreenButton.tsx
index acc97e91ad..94fa64eb25 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptFullscreenButton.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptFullscreenButton.tsx
@@ -20,12 +20,12 @@ export const PromptFullscreenButton = ({
 }: PromptFullscreenButtonProps) => {
   return (
     <div className={`absolute right-0 top-0 z-10 ${className ?? ""}`}>
-      <Tooltip content="Focus mode" position="left">
+      <Tooltip content="Focus mode" position="top" delay={200}>
         <button
           type="button"
           aria-label="Expand prompt to focus mode"
           onClick={onClick}
-          className="flex h-6 w-6 items-center justify-center rounded-full bg-base-fg/5 text-base-fg/50 transition-colors hover:bg-base-fg/10 hover:text-base-fg/90 focus:outline-none"
+          className="flex h-6 w-6 items-center justify-center bg-base-fg/5 text-base-fg/50 transition-colors hover:bg-base-fg/10 hover:text-base-fg/90 focus:outline-none"
         >
           <Maximize2Icon
             
diff --git a/frontend/libs/components/promptbox/src/lib/PromptFullscreenModal.tsx b/frontend/libs/components/promptbox/src/lib/PromptFullscreenModal.tsx
index 21726627cf..4210e06ed3 100644
--- a/frontend/libs/components/promptbox/src/lib/PromptFullscreenModal.tsx
+++ b/frontend/libs/components/promptbox/src/lib/PromptFullscreenModal.tsx
@@ -83,7 +83,6 @@ export const PromptFullscreenModal = ({
       closeOnOutsideClick
       closeOnEsc
       className="w-full max-w-4xl"
-      backdropClassName="backdrop-blur-md"
     >
       {/* Explicit inline height (not a Tailwind arbitrary class) so the column
           is reliably bounded across the modal's nested wrappers — that's what
diff --git a/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx b/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
index ce61bdaf67..d533c3ba11 100644
--- a/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/AudioReferenceRow.tsx
@@ -242,7 +242,7 @@ export const AudioReferenceRow = forwardRef<
               type="button"
               onClick={() => audioInputRef.current?.click()}
               disabled={isUploadingAudio}
-              className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+              className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
             >
               <PlusIcon  className="h-3 w-3" />
               {isUploadingAudio ? "Uploading…" : "Add audio"}
@@ -252,7 +252,7 @@ export const AudioReferenceRow = forwardRef<
                 type="button"
                 onClick={onPickAudioFromLibrary}
                 disabled={isUploadingAudio}
-                className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+                className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
               >
                 <FolderOpenIcon  className="h-3 w-3" />
                 From library
@@ -270,7 +270,7 @@ export const AudioReferenceRow = forwardRef<
             {referenceImages.map((image) => (
               <div
                 key={image.id}
-                className="group relative h-9 w-9 overflow-hidden rounded-lg border border-ui-controls-border"
+                className="group relative h-9 w-9 overflow-hidden rounded-[3px] border border-ui-controls-border"
               >
                 <img
                   src={image.url}
@@ -294,7 +294,7 @@ export const AudioReferenceRow = forwardRef<
                 type="button"
                 onClick={() => imageInputRef.current?.click()}
                 disabled={isUploadingImage}
-                className="flex h-9 items-center gap-1.5 rounded-lg border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
+                className="flex h-9 items-center gap-1.5 rounded-[3px] border border-dashed border-ui-controls-border bg-ui-controls/50 px-3 text-sm text-base-fg/70 transition-colors hover:bg-ui-controls hover:text-base-fg disabled:cursor-wait disabled:opacity-60"
               >
                 <PlusIcon  className="h-3 w-3" />
                 {isUploadingImage ? "Uploading…" : "Add image"}
@@ -337,7 +337,7 @@ function AudioRefTile({
   }, [audio.url, isPlaying]);
 
   return (
-    <div className="group flex h-9 items-center gap-2 rounded-lg border border-ui-controls-border bg-ui-controls px-2.5">
+    <div className="group flex h-9 items-center gap-2 rounded-[3px] border border-ui-controls-border bg-ui-controls px-2.5">
       <button
         type="button"
         aria-label={isPlaying ? "Stop" : "Play"}
@@ -356,7 +356,7 @@ function AudioRefTile({
         type="button"
         aria-label="Remove audio"
         onClick={() => onRemove(audio.id)}
-        className="flex h-4 w-4 items-center justify-center rounded text-base-fg/40 transition-colors hover:text-base-fg"
+        className="flex h-4 w-4 items-center justify-center rounded-[3px] text-base-fg/40 transition-colors hover:text-base-fg"
       >
         <XIcon  className="h-2.5 w-2.5" />
       </button>
diff --git a/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx b/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
index 4b00d0e85a..a42a5086b7 100644
--- a/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/AudioTuningPopover.tsx
@@ -64,7 +64,7 @@ export function AudioTuningPopover({
                   key={hz}
                   type="button"
                   onClick={() => onSampleRateChange?.(hz)}
-                  className={`rounded-md border px-2 py-1 text-xs font-medium transition-colors ${
+                  className={`rounded-[3px] border px-2 py-1 text-xs font-medium transition-colors ${
                     hz === sampleRateHz
                       ? "border-white/30 bg-white/15 text-base-fg"
                       : "border-transparent bg-white/5 text-base-fg/60 hover:bg-white/10 hover:text-base-fg"
diff --git a/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx b/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
index ddfaed0239..d01dafada8 100644
--- a/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/SoundsSettingsPopover.tsx
@@ -77,7 +77,7 @@ export function SoundsSettingsPopover({
                   <button
                     type="button"
                     onClick={() => onBpmChange?.(null)}
-                    className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
+                    className="rounded-[3px] bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-base-fg/60 transition-colors hover:bg-white/10 hover:text-base-fg"
                   >
                     Auto
                   </button>
@@ -107,7 +107,7 @@ export function SoundsSettingsPopover({
                   type="button"
                   title={entry.label}
                   onClick={() => onMusicalKeyChange?.(entry.value)}
-                  className={`rounded-md border px-1.5 py-1 text-xs font-medium transition-colors ${
+                  className={`rounded-[3px] border px-1.5 py-1 text-xs font-medium transition-colors ${
                     entry.value === musicalKey
                       ? "border-white/30 bg-white/15 text-base-fg"
                       : "border-transparent bg-white/5 text-base-fg/60 hover:bg-white/10 hover:text-base-fg"
diff --git a/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx b/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
index b8729b238b..ccfe190beb 100644
--- a/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
+++ b/frontend/libs/components/promptbox/src/lib/common/StylePromptRow.tsx
@@ -43,7 +43,7 @@ export function StylePromptRow({
           type="button"
           aria-label="Clear style"
           onClick={() => onChange("")}
-          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-base-fg/40 transition-colors hover:bg-white/10 hover:text-base-fg"
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] text-base-fg/40 transition-colors hover:bg-white/10 hover:text-base-fg"
         >
           <XIcon  className="h-3 w-3" />
         </button>
diff --git a/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx b/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
index b25e8c1d3a..a6952c3242 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/DeckCard.tsx
@@ -88,7 +88,7 @@ export const DeckCard = ({
   return (
     <div
       className={twMerge(
-        "glass group relative aspect-square w-14 shrink-0 overflow-hidden rounded-lg border-2 border-white/30 transition-all duration-200",
+        "glass group relative aspect-square w-14 shrink-0 overflow-hidden rounded-[3px] border-2 border-white/30 transition-all duration-200",
         !item.uploading &&
           "cursor-pointer hover:border-white/80 hover:cursor-zoom-in",
         item.kind === "audio" && "hover:cursor-pointer",
@@ -143,12 +143,12 @@ export const DeckCard = ({
       )}
 
       {item.kind === "video" && (
-        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center rounded bg-black/60 text-white">
+        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center bg-black/60 text-white">
           <VideoIcon  className="h-2.5 w-2.5" />
         </div>
       )}
       {item.kind === "audio" && (
-        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center rounded bg-black/60 text-white">
+        <div className="pointer-events-none absolute left-[3px] top-[3px] flex h-4 w-4 items-center justify-center bg-black/60 text-white">
           <MusicIcon  className="h-2.5 w-2.5" />
         </div>
       )}
@@ -235,7 +235,7 @@ export const DeckAddMenu = ({
               key={action.key}
               type="button"
               onClick={action.onSelect}
-              className="flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-[13px] font-medium text-base-fg transition-colors hover:bg-white/10"
+              className="flex w-full items-center gap-2.5 rounded-[3px] px-2.5 py-1.5 text-left text-[13px] font-medium text-base-fg transition-colors hover:bg-white/10"
             >
               <DynamicIcon
                 icon={
@@ -274,13 +274,13 @@ export const DeckPreviewModal = ({ item, onClose }: DeckPreviewModalProps) => (
           src={item.previewUrl ?? item.url}
           controls
           autoPlay
-          className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          className="max-h-[90vh] max-w-[90vw] object-contain"
         />
       ) : (
         <img
           src={item.previewUrl ?? item.url}
           alt={item.name}
-          className="max-h-[90vh] max-w-[90vw] rounded-lg object-contain"
+          className="max-h-[90vh] max-w-[90vw] object-contain"
         />
       ))}
   </Modal>
diff --git a/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx b/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
index b8f01cabfe..95f43873f2 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/KeyframeCards.tsx
@@ -142,7 +142,7 @@ export const DeckSlotCard = ({
       type="button"
       onClick={() => enabledActions[0]?.onSelect()}
       className={twMerge(
-        "glass flex aspect-square w-14 flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:z-10 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25",
+        "glass flex aspect-square w-14 flex-col items-center justify-center gap-0.5 rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:z-10 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25",
         tiltClass,
       )}
     >
diff --git a/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx b/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
index ca5f54fc27..7f44ecc4cc 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/ReferenceDeck.tsx
@@ -252,7 +252,7 @@ export const ReferenceDeck = ({
           <button
             type="button"
             onClick={handleAddClick}
-            className="glass flex aspect-square w-14 -rotate-6 flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25"
+            className="glass flex aspect-square w-14 -rotate-6 flex-col items-center justify-center gap-0.5 rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all duration-200 hover:rotate-0 hover:scale-105 hover:bg-ui-controls/60 dark:border-white/25"
           >
             <PlusIcon className="text-lg opacity-80" />
             <span className="text-[9px] font-medium leading-none opacity-70">
@@ -270,7 +270,7 @@ export const ReferenceDeck = ({
   const expandedPanel = (
     <div
       className={twMerge(
-        "glass w-max rounded-xl border border-white/10 p-2 shadow-2xl",
+        "glass w-max rounded-[3px] border border-white/10 p-2 shadow-2xl",
         // In-flow (fullscreen modal): cap at the container width so the
         // cards wrap into rows instead of overflowing the modal.
         alwaysExpanded
@@ -296,7 +296,7 @@ export const ReferenceDeck = ({
           <button
             type="button"
             onClick={onClearAll}
-            className="flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-base-fg/60 transition-colors hover:text-red-400"
+            className="flex items-center gap-1 rounded-[3px] px-1 py-0.5 text-[11px] text-base-fg/60 transition-colors hover:text-red-400"
           >
             <Trash2Icon className="h-2.5 w-2.5" />
             Clear all
@@ -362,7 +362,7 @@ export const ReferenceDeck = ({
             <button
               type="button"
               onClick={handleAddClick}
-              className="glass flex aspect-square w-14 shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all hover:bg-ui-controls/60 dark:border-white/25"
+              className="glass flex aspect-square w-14 shrink-0 items-center justify-center rounded-[3px] border-2 border-dashed border-black/5 bg-ui-controls/40 text-base-fg transition-all hover:bg-ui-controls/60 dark:border-white/25"
             >
               <PlusIcon className="text-xl opacity-80" />
             </button>,
diff --git a/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx b/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
index c1bf58fa34..5603d36586 100644
--- a/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
+++ b/frontend/libs/components/promptbox/src/lib/deck/usePromptBoxDrop.tsx
@@ -466,15 +466,15 @@ export function PromptBoxDropOverlay({
   return (
     <div
       className={twMerge(
-        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed bg-[#161618]/85 backdrop-blur-sm",
-        rejected ? "border-red-400/80" : "border-primary",
+        "promptbox-drop-overlay pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 rounded-[3px] border-2 border-dashed bg-ui-controls/85",
+        rejected ? "border-red-400/80" : "border-white/60",
       )}
     >
       <div className="flex items-center gap-2">
         {kinds.map((kind, i) => (
           <div
             key={kind.label}
-            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-base-fg/90"
+            className="promptbox-drop-chip flex h-9 w-9 items-center justify-center bg-white/10 text-base-fg/90"
             style={{ animationDelay: `${i * 50}ms` }}
           >
             <DynamicIcon icon={kind.icon} className="text-sm" />
diff --git a/frontend/libs/components/provider-billing-modal/src/lib/others/GenericProviderBillingBlock.tsx b/frontend/libs/components/provider-billing-modal/src/lib/others/GenericProviderBillingBlock.tsx
index cee5fb3b00..6491838d71 100644
--- a/frontend/libs/components/provider-billing-modal/src/lib/others/GenericProviderBillingBlock.tsx
+++ b/frontend/libs/components/provider-billing-modal/src/lib/others/GenericProviderBillingBlock.tsx
@@ -11,9 +11,15 @@ export function GenericProviderBillingBlock({
   const serviceProviderName = getServiceProviderName(provider);
 
   return (
-    <div>
-      Please set up {serviceProviderName} on their website 
-      to use it with Artcraft.
+    <div className="flex w-full flex-col gap-3 text-base-fg">
+      <p className="hud-label text-base-fg/55">Billing</p>
+      <h2 className="font-display text-2xl font-medium tracking-[-0.02em]">
+        Set up {serviceProviderName}
+      </h2>
+      <p className="text-sm leading-relaxed text-base-fg/60">
+        Please set up {serviceProviderName} on their website to use it with
+        ArtCraft.
+      </p>
     </div>
   );
 }
diff --git a/frontend/libs/components/provider-billing-modal/src/lib/provider-billing-modal.tsx b/frontend/libs/components/provider-billing-modal/src/lib/provider-billing-modal.tsx
index 00f96646cc..ad558f3ee4 100644
--- a/frontend/libs/components/provider-billing-modal/src/lib/provider-billing-modal.tsx
+++ b/frontend/libs/components/provider-billing-modal/src/lib/provider-billing-modal.tsx
@@ -60,11 +60,12 @@ export function ProviderBillingModal({
         setShowModal(false);
       }}
       className={twMerge(
-        "bg-ui-panel border border-ui-panel-border transition-all duration-300 overflow-y-auto",
+        "rounded-none border transition-all duration-300 overflow-y-auto",
         isArtcraft
-          ? "max-w-screen-2xl max-h-[90vh]"
-          : "max-w-2xl max-h-[500px]",
+          ? "max-w-screen-xl max-h-[90vh] border-white/15 bg-[#101014]"
+          : "max-w-2xl max-h-[500px] border-ui-panel-border bg-ui-panel",
       )}
+      childPadding={!isArtcraft}
       showClose={true}
     >
       <div
diff --git a/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx
index 8e55ccbec1..dc5be93da5 100644
--- a/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx
+++ b/frontend/libs/components/provider-setup-modal/src/lib/provider-setup-modal.tsx
@@ -67,37 +67,28 @@ export function ProviderSetupModal({
       onClose={() => {
         setShowModal(false);
       }}
-      className="max-w-2xl max-h-[500px] p-6"
+      className="max-w-xl p-6"
       showClose={true}
     >
-      <div className="flex flex-col items-center justify-center gap-6">
-        <div className="flex flex-col items-center gap-3">
-
-          <br />
-
-          <h1 className="text-3xl font-bold">
-            <WandSparklesIcon
-              
-              className="mr-3 text-[24px]" />
+      <div className="flex flex-col gap-6 text-base-fg">
+        <div className="flex flex-col gap-3">
+          <p className="hud-label flex items-center gap-2 text-base-fg/55">
+            <WandSparklesIcon aria-hidden className="h-3.5 w-3.5" />
+            Connect account
+          </p>
+          <h1 className="font-display text-3xl font-medium leading-[1.05] tracking-[-0.03em]">
             {modalTitle}
           </h1>
-          <div className="text-center">
-            <p className="text-lg font-medium text-white/80">{modalSubTitle}</p>
-
-            <br />
-
-            <p className="text-white/60">{modalDescription}</p>
-
-            <br />
-
-          </div>
+          <p className="text-base font-medium text-base-fg/80">
+            {modalSubTitle}
+          </p>
+          <p className="text-sm leading-relaxed text-base-fg/60">
+            {modalDescription}
+          </p>
         </div>
 
-        {/*<div className="aspect-video w-full overflow-hidden rounded-md">
-          Test
-        </div>*/}
         <Button
-          className="font-semibold"
+          className="h-10 px-4"
           icon={ArrowRightIcon}
           iconFlip={true}
           onClick={() => {
diff --git a/frontend/libs/components/select/src/lib/select.tsx b/frontend/libs/components/select/src/lib/select.tsx
index 8a8cf58e62..330a4c1783 100644
--- a/frontend/libs/components/select/src/lib/select.tsx
+++ b/frontend/libs/components/select/src/lib/select.tsx
@@ -28,7 +28,7 @@ export const Select = ({
   className,
 }: ListDropdownProps) => {
   const selectedOption = options.find(
-    (option: SelectOption) => option.value === value
+    (option: SelectOption) => option.value === value,
   ) || { label: placeholder || "", value: "" };
 
   return (
@@ -38,7 +38,7 @@ export const Select = ({
           <>
             <ListboxButton
               id={id}
-              className="relative h-10 w-full cursor-pointer rounded-md bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-all duration-150 ease-in-out sm:text-sm focus:!outline-none hover:bg-ui-controls/80"
+              className="relative h-10 w-full cursor-pointer rounded-[3px] bg-ui-controls text-base-fg border border-ui-controls-border py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-colors duration-150 ease-in-out sm:text-sm focus:!outline-none hover:border-white/40"
             >
               <span
                 className={twMerge("block truncate", !value && "opacity-50")}
@@ -46,7 +46,7 @@ export const Select = ({
                 {selectedOption.label}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5">
-                <ChevronDownIcon  aria-hidden="true" />
+                <ChevronDownIcon aria-hidden="true" />
               </span>
             </ListboxButton>
 
@@ -57,16 +57,16 @@ export const Select = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-ui-panel border border-ui-panel-border py-1.5 text-base shadow-xl focus:outline-none sm:text-sm">
+              <ListboxOptions className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-[3px] bg-ui-panel border border-ui-panel-border text-base focus:outline-none sm:text-sm">
                 {options.map((option, itemIdx) => (
                   <ListboxOption
                     key={itemIdx}
                     className={({ focus, selected }) =>
                       twMerge(
-                        "relative cursor-pointer select-none py-2 pl-7 pr-2 transition-all duration-150 ease-in-out",
-                        focus && "bg-ui-controls/50",
-                        selected && "bg-primary/20",
-                        !selected ? "text-base-fg/90" : "text-base-fg"
+                        "relative cursor-pointer select-none py-2 pl-7 pr-2 transition-colors duration-150 ease-in-out",
+                        !selected ? "text-base-fg/90" : "text-base-fg",
+                        selected && "bg-white/10",
+                        focus && "bg-white text-black",
                       )
                     }
                     value={option.value}
@@ -82,10 +82,7 @@ export const Select = ({
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-2.5">
-                            <CheckIcon
-                              
-                              aria-hidden="true"
-                              className="text-xs" />
+                            <CheckIcon aria-hidden="true" className="text-xs" />
                           </span>
                         ) : null}
                       </>
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AboutSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AboutSettingsPane.tsx
index 1cb76c8d08..c1cceda984 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AboutSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AboutSettingsPane.tsx
@@ -46,12 +46,13 @@ export const AboutSettingsPane = (args: AboutSettingsPaneProps) => {
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="space-y-4 pt-3 text-base-fg">
         <div className="space-y-1">
           <Label>
             Artcraft Version
           </Label>
           <div
+            className="text-sm font-medium"
             onClick={handleVersionClick}
             style={{ cursor: "default", userSelect: "none" }}
           >
@@ -61,45 +62,45 @@ export const AboutSettingsPane = (args: AboutSettingsPaneProps) => {
 
         <div className="space-y-1">
           <Label>Artcraft Host</Label>
-          <div>{appInfo?.storyteller_host}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.storyteller_host}</div>
         </div>
 
         <div className="space-y-1">
           <Label>Git Commit ID</Label>
-          <div>{appInfo?.git_commit_short_id} &middot; {appInfo?.git_commit_id}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.git_commit_short_id} &middot; {appInfo?.git_commit_id}</div>
         </div>
 
         <div className="space-y-1">
           <Label>Git Commit Timestamp</Label>
-          <div>{appInfo?.git_commit_timestamp}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.git_commit_timestamp}</div>
         </div>
 
         <div className="space-y-1">
           <Label>
             Build Timestamp
           </Label>
-          <div>{appInfo?.build_timestamp}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.build_timestamp}</div>
         </div>
 
         <div className="space-y-1">
           <Label>
             Operating System
           </Label>
-          <div>{appInfo?.os_platform} ({appInfo?.os_version})</div>
+          <div className="break-all text-sm font-medium">{appInfo?.os_platform} ({appInfo?.os_version})</div>
         </div>
 
         <div className="space-y-1">
           <Label>
             Artcraft Data Directory
           </Label>
-          <div>{appInfo?.artcraft_root_directory}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.artcraft_root_directory}</div>
         </div>
 
         <div className="space-y-1">
           <Label>
             Downloads Directory
           </Label>
-          <div>{appInfo?.download_directory}</div>
+          <div className="break-all text-sm font-medium">{appInfo?.download_directory}</div>
         </div>
 
       </div>
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/AccountSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/AccountSettingsPane.tsx
index e979b8b258..c430de7f0c 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/AccountSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/AccountSettingsPane.tsx
@@ -10,11 +10,13 @@ export const AccountSettingsPane = ({
   globalAccountLogoutCallback,
 }: AccountSettingsPaneProps) => {
   return (
-    <div className="space-y-4 text-base-fg">
+    <div className="flex flex-col gap-5 pt-3 text-base-fg">
       <ArtcraftAccountBlock
         globalAccountLogoutCallback={globalAccountLogoutCallback}
       />
+      <hr className="border-ui-panel-border" />
       <GrokAccountBlock />
+      <hr className="border-ui-panel-border" />
       <MidjourneyAccountBlock />
     </div>
   );
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/ArtcraftAccountBlock.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/ArtcraftAccountBlock.tsx
index 3ae0d9d697..c0dbf3cef2 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/ArtcraftAccountBlock.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/ArtcraftAccountBlock.tsx
@@ -64,9 +64,15 @@ export const ArtcraftAccountBlock = ({
   };
 
   return (
-    <div className="flex justify-between items-center">
-      <span>ArtCraft Account:</span>
-      <pre>{artcraftSession?.display_name}</pre>
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+          ArtCraft account
+        </p>
+        <p className="truncate text-sm font-medium text-base-fg/80">
+          {artcraftSession?.display_name || "Not logged in"}
+        </p>
+      </div>
       <Button
         variant={
           isCheckingArtcraftSession
@@ -75,14 +81,12 @@ export const ArtcraftAccountBlock = ({
             ? "destructive"
             : "primary"
         }
-        className="h-[30px]"
+        className="h-9 shrink-0 px-3"
         onClick={handleArtcraftButton}
         disabled={isCheckingArtcraftSession}
       >
         {isCheckingArtcraftSession ? (
-          <LoaderCircleIcon
-            
-            className="animate-spin text-sm" />
+          <LoaderCircleIcon className="animate-spin text-sm" />
         ) : isLoggedIn ? (
           "Log Out"
         ) : (
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/GrokAccountBlock.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/GrokAccountBlock.tsx
index 9483f5aa58..14e3b0d363 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/GrokAccountBlock.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/GrokAccountBlock.tsx
@@ -57,9 +57,15 @@ export const GrokAccountBlock = () => {
   };
 
   return(
-    <div className="flex justify-between items-center">
-      <span>Grok Account:</span>
-      <pre>{grokSession?.payload?.maybe_email || "Not logged in"}</pre>
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+          Grok account
+        </p>
+        <p className="truncate text-sm font-medium text-base-fg/80">
+          {grokSession?.payload?.maybe_email || "Not logged in"}
+        </p>
+      </div>
       <Button
         variant={
           grokSession?.payload?.can_clear_state && !isCheckingGrokSession
@@ -68,14 +74,12 @@ export const GrokAccountBlock = () => {
             ? "primary"
             : "secondary"
         }
-        className="h-[30px]"
+        className="h-9 shrink-0 px-3"
         onClick={handleGrokButton}
         disabled={isCheckingGrokSession}
       >
         {isCheckingGrokSession ? (
-          <LoaderCircleIcon
-            
-            className="animate-spin text-sm" />
+          <LoaderCircleIcon className="animate-spin text-sm" />
         ) : grokSession?.payload?.can_clear_state ? (
           "Disconnect"
         ) : (
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/MidjourneyAccountBlock.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/MidjourneyAccountBlock.tsx
index 9833b0ef78..a98a0878da 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/MidjourneyAccountBlock.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AccountSettings/MidjourneyAccountBlock.tsx
@@ -57,9 +57,15 @@ export const MidjourneyAccountBlock = () => {
   };
 
   return(
-    <div className="flex justify-between items-center">
-      <span>Midjourney Account:</span>
-      <pre>{midjourneySession?.payload?.maybe_email || "Not logged in"}</pre>
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+          Midjourney account
+        </p>
+        <p className="truncate text-sm font-medium text-base-fg/80">
+          {midjourneySession?.payload?.maybe_email || "Not logged in"}
+        </p>
+      </div>
       <Button
         variant={
           midjourneySession?.payload?.can_clear_state && !isCheckingMidjourneySession
@@ -68,14 +74,12 @@ export const MidjourneyAccountBlock = () => {
             ? "primary"
             : "secondary"
         }
-        className="h-[30px]"
+        className="h-9 shrink-0 px-3"
         onClick={handleMidjourneyButton}
         disabled={isCheckingMidjourneySession}
       >
         {isCheckingMidjourneySession ? (
-          <LoaderCircleIcon
-            
-            className="animate-spin text-sm" />
+          <LoaderCircleIcon className="animate-spin text-sm" />
         ) : midjourneySession?.payload?.can_clear_state ? (
           "Disconnect"
         ) : (
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AppearanceSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AppearanceSettingsPane.tsx
index 2e11fb66f3..e2547b0e8e 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AppearanceSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AppearanceSettingsPane.tsx
@@ -1,3 +1,5 @@
+import { CheckIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
 import { Label } from "@storyteller/ui-label";
 import { useEffect, useMemo, useState } from "react";
 
@@ -41,88 +43,79 @@ export const AppearanceSettingsPane = () => {
   const themes = useMemo(
     () => [
       {
-        id: "light" as const,
-        label: "Light",
-        swatch: (
-          <div
-            className="h-8 w-8 rounded-full border border-gray-300"
-            style={{ background: "#ffffff" }}
-          />
-        ),
+        id: "gray" as const,
+        label: "Default",
+        swatch: <Swatch background="#121316" />,
       },
       {
-        id: "gray" as const,
-        label: "Gray",
-        swatch: (
-          <div
-            className="h-8 w-8 rounded-full border border-gray-700"
-            style={{ background: "#242424" }}
-          />
-        ),
+        id: "light" as const,
+        label: "Light",
+        swatch: <Swatch background="#ffffff" />,
       },
       {
         id: "black" as const,
         label: "Black",
-        swatch: (
-          <div
-            className="h-8 w-8 rounded-full border border-gray-800"
-            style={{ background: "#000000" }}
-          />
-        ),
+        swatch: <Swatch background="#000000" />,
       },
       {
         id: "aurora" as const,
         label: "Aurora",
         swatch: (
-          <div
-            className="h-8 w-8 rounded-full border border-gray-700"
-            style={{
-              background:
-                "radial-gradient(28px 14px at 20% 10%, #2d81ff, transparent), radial-gradient(32px 20px at 80% 80%, #1cb6be, transparent), #0d0f16",
-            }}
-          />
+          <Swatch background="radial-gradient(28px 14px at 20% 10%, #2d81ff, transparent), radial-gradient(32px 20px at 80% 80%, #1cb6be, transparent), #0d0f16" />
         ),
       },
       {
         id: "sunset" as const,
         label: "Sunset",
         swatch: (
-          <div
-            className="h-8 w-8 rounded-full border border-gray-700"
-            style={{
-              background:
-                "radial-gradient(28px 14px at 20% 10%, #8b5cf6, transparent), radial-gradient(32px 20px at 80% 80%, #fb923c, transparent), #140b12",
-            }}
-          />
+          <Swatch background="radial-gradient(28px 14px at 20% 10%, #8b5cf6, transparent), radial-gradient(32px 20px at 80% 80%, #fb923c, transparent), #140b12" />
         ),
       },
     ],
-    []
+    [],
   );
 
   return (
-    <div className="space-y-4">
-      <div>
+    <div className="space-y-4 pt-3 text-base-fg">
+      <div className="flex flex-col gap-0.5">
         <Label>Themes</Label>
-        <p className="text-sm opacity-70">
+        <p className="text-xs opacity-70">
           Choose your preferred look. Applies instantly.
         </p>
       </div>
-      <div className="grid grid-cols-2 gap-3">
-        {themes.map((t) => (
-          <button
-            key={t.id}
-            className={`group flex items-center gap-3 rounded-lg border border-white/10 bg-[#63636B]/10 p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/30 ${
-              selected === t.id ? "ring-2 ring-brand-primary-500" : ""
-            }`}
-            onClick={() => setSelected(t.id)}
-            aria-pressed={selected === t.id}
-          >
-            {t.swatch}
-            <div className="text-sm opacity-90">{t.label}</div>
-          </button>
-        ))}
+      <div className="grid grid-cols-2 gap-2">
+        {themes.map((t) => {
+          const isSelected = selected === t.id;
+          return (
+            <button
+              key={t.id}
+              className={twMerge(
+                "group flex items-center gap-3 border p-2 text-left transition-colors duration-100",
+                isSelected
+                  ? "border-base-fg/70 bg-base-fg/10"
+                  : "border-ui-panel-border bg-base-fg/[0.03] hover:border-base-fg/30 hover:bg-base-fg/[0.06]",
+              )}
+              onClick={() => setSelected(t.id)}
+              aria-pressed={isSelected}
+            >
+              {t.swatch}
+              <span className="flex-1 font-mono text-[11px] font-semibold uppercase tracking-[0.12em]">
+                {t.label}
+              </span>
+              {isSelected && (
+                <CheckIcon aria-hidden className="mr-1 h-3.5 w-3.5" />
+              )}
+            </button>
+          );
+        })}
       </div>
     </div>
   );
 };
+
+const Swatch = ({ background }: { background: string }) => (
+  <div
+    className="h-8 w-8 shrink-0 border border-base-fg/20"
+    style={{ background }}
+  />
+);
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
index ab0abdd0e3..c18ffbd3df 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/AudioSettingsPane.tsx
@@ -106,9 +106,9 @@ export const AudioSettingsPane = (args: AudioSettingsPaneProps) => {
 
   return (
     <>
-      <div className="space-y-4">
-        <div className="flex flex-col">
-          <Label htmlFor="play-sounds">
+      <div className="space-y-4 pt-3 text-base-fg">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="play-sounds" className="mb-0">
             Play Notification Sounds for Events?
           </Label>
           <Switch enabled={playSounds} setEnabled={setPlaySounds} />
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
index 532d102479..3e2c39cea9 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/BillingSettingsPane.tsx
@@ -48,24 +48,22 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
 
   return (
     <>
-      <div className="space-y-4 text-base-fg">
+      <div className="flex flex-col gap-0.5 pt-3 text-base-fg">
         <Label>Support ArtCraft</Label>
-        <p className="text-sm opacity-70">
+        <p className="text-xs opacity-70">
           You do not have to purchase anything from us to use ArtCraft, but you
           can support ArtCraft development by subscribing or buying credits.
         </p>
       </div>
 
-      <br />
+      <hr className="my-5 border-ui-panel-border" />
 
       <div className="space-y-4 text-base-fg">
         <div className="space-y-2">
           <Label>Current ArtCraft Plan</Label>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-xl font-semibold ">
-              <StarIcon
-                
-                className="text-[#C03FFF] text-lg" />
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2 font-display text-2xl font-medium tracking-[-0.02em]">
+              <StarIcon className="text-lg text-base-fg/70" />
               {currentPlanDetails.name}
             </div>
             <div className="flex gap-2">
@@ -73,7 +71,7 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
 
               <Button
                 variant="primary"
-                className="h-[30px]"
+                className="h-9 shrink-0 px-4"
                 onClick={() => toggleSubscriptionModal()}
               >
                 {changeOrUpgradePlanButtonLabel}
@@ -91,14 +89,14 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
         */}
 
         {subscriptionEndAt && (
-          <div className="flex items-center gap-2 text-white/50">
+          <div className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] text-base-fg/50">
             <InfoIcon />
             Subscription ends on {subscriptionEndAt}
           </div>
         )}
 
         {nextBillAt && (
-          <div className="flex items-center gap-2 text-white/50">
+          <div className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] text-base-fg/50">
             <InfoIcon />
             Next payment on {nextBillAt}
           </div>
@@ -110,12 +108,12 @@ export const BillingSettingsPane = (args: BillingSettingsPaneProps) => {
           <Label htmlFor="credits" className="flex items-center gap-2">
             Your ArtCraft credit balance
           </Label>
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-2">
-              <CoinsIcon
-                
-                className="text-primary text-lg" />
-              <span className="text-2xl font-bold">{sumTotalCredits}</span>
+              <CoinsIcon className="text-lg text-base-fg/70" />
+              <span className="font-display text-2xl font-medium tracking-[-0.02em]">
+                {sumTotalCredits}
+              </span>
             </div>
             <div className="flex gap-2">
               <BuyCreditsButton />
@@ -135,7 +133,7 @@ const CancelPlanButton = () => {
   };
 
   return (
-    <Button variant="secondary" className="h-[30px]" onClick={handleClick}>
+    <Button variant="secondary" className="h-9 shrink-0 px-3" onClick={handleClick}>
       Cancel plan
     </Button>
   );
@@ -147,7 +145,7 @@ const BuyCreditsButton = () => {
   return (
     <Button
       variant="primary"
-      className="h-[30px]"
+      className="h-9 shrink-0 px-4"
       onClick={() => toggleCreditsModal()}
     >
       Buy credits
@@ -157,14 +155,19 @@ const BuyCreditsButton = () => {
 
 const CreditsTally = ({ creditsStore }: { creditsStore: CreditsState }) => {
   return (
-    <div className="flex pl-5 pt-3">
-      <ul className="list-disc">
-        <li>
-          {" "}
-          {creditsStore.monthlyCredits} monthly credits (refilled monthly){" "}
-        </li>
-        <li> {creditsStore.bankedCredits} purchased credits </li>
-      </ul>
-    </div>
+    <ul className="mt-4 divide-y divide-ui-panel-border border border-ui-panel-border">
+      <li className="flex items-baseline justify-between gap-3 px-3 py-2">
+        <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
+          Monthly credits (refilled monthly)
+        </span>
+        <span className="text-sm font-medium">{creditsStore.monthlyCredits}</span>
+      </li>
+      <li className="flex items-baseline justify-between gap-3 px-3 py-2">
+        <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.12em] text-base-fg/50">
+          Purchased credits
+        </span>
+        <span className="text-sm font-medium">{creditsStore.bankedCredits}</span>
+      </li>
+    </ul>
   );
 };
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.tsx
index fecc5b67b4..44497d67d8 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.tsx
@@ -146,19 +146,21 @@ export const DownloadsSettingsPane = () => {
   };
 
   return (
-    <div className="space-y-4 text-base-fg">
+    <div className="space-y-4 pt-3 text-base-fg">
       {settingsError && <p role="alert" className="text-red-400">{settingsError}</p>}
       <div className="space-y-2">
         <Label htmlFor="download-path">Default Download Directory</Label>
-        <p className="opacity-80">
+        <p className="text-xs opacity-70">
           This is where downloads are placed after downloading. The current path
           is:
         </p>
-        <div className="py-1.5 px-2 rounded-md mt-1 bg-ui-panel border border-ui-panel-border text-base-fg">
-          <pre>{currentDownloadLabel}</pre>
+        <div className="mt-1 border border-ui-panel-border bg-ui-sunken px-3 py-2 text-base-fg">
+          <pre className="whitespace-pre-wrap break-all font-mono text-xs">
+            {currentDownloadLabel}
+          </pre>
         </div>
       </div>
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         <Button variant="primary" onClick={openDirectoryPicker}>
           <FolderIcon />
           Choose Directory
@@ -237,7 +239,7 @@ export const DownloadsSettingsPane = () => {
                 onChange={(event) => setCustomFormat(event.target.value)}
                 placeholder={DEFAULT_CUSTOM_FORMAT}
                 spellCheck={false}
-                className="min-w-0 flex-1 rounded-md border border-ui-controls-border bg-ui-controls px-3 py-2 font-mono text-xs"
+                className="min-w-0 flex-1 rounded-[3px] border border-ui-controls-border bg-ui-controls px-3 py-2 font-mono text-xs outline-none focus:border-base-fg/40"
               />
               <Button variant="secondary" onClick={saveCustomFormat}>Save format</Button>
             </div>
diff --git a/frontend/libs/components/settings-modal/src/lib/panes/ProviderPrioritySettingsPane.tsx b/frontend/libs/components/settings-modal/src/lib/panes/ProviderPrioritySettingsPane.tsx
index fc26789321..2b7dc750a1 100644
--- a/frontend/libs/components/settings-modal/src/lib/panes/ProviderPrioritySettingsPane.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/panes/ProviderPrioritySettingsPane.tsx
@@ -64,13 +64,13 @@ const SortableItem = ({
       {...attributes}
       {...listeners}
       className={`
-        flex items-center justify-between rounded-lg p-3 transition-colors duration-200 border border-ui-controls-border bg-ui-controls/60 text-base-fg
+        flex items-center justify-between rounded-[3px] p-3 transition-colors duration-200 border border-ui-controls-border bg-base-fg/[0.03] text-base-fg
         ${
           isUpdating
             ? "opacity-60 cursor-not-allowed"
-            : "cursor-move hover:bg-ui-controls/80"
+            : "cursor-move hover:border-base-fg/30 hover:bg-base-fg/[0.06]"
         }
-        ${isDragging ? "opacity-70 shadow-lg" : ""}
+        ${isDragging ? "opacity-70" : ""}
       `}
     >
       <div className="flex items-center gap-3">
@@ -80,9 +80,7 @@ const SortableItem = ({
         <span className="font-medium">{name}</span>
       </div>
       <div className="flex items-center">
-        <GripVerticalIcon
-          
-          className="text-base-fg/40 text-sm" />
+        <GripVerticalIcon className="text-base-fg/40 text-sm" />
       </div>
     </div>
   );
@@ -188,9 +186,9 @@ export const ProviderPrioritySettingsPane = () => {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-4 pt-3">
       <div>
-        <p className="text-sm text-base-fg/70 mb-4">
+        <p className="text-xs text-base-fg/70 mb-4">
           Drag and drop to reorder model provider priority. Higher items will be
           tried first. You can use this to control favorite services and
           spending.
@@ -218,8 +216,8 @@ export const ProviderPrioritySettingsPane = () => {
       </DndContext>
 
       {isUpdating && (
-        <div className="text-xs rounded-full animate-pulse mt-4 flex items-center gap-2 text-base-fg/70">
-          <LoaderCircleIcon  className="animate-spin" />
+        <div className="mt-4 flex animate-pulse items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] text-base-fg/70">
+          <LoaderCircleIcon className="animate-spin" />
           Updating...
         </div>
       )}
diff --git a/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx b/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
index 38761cc518..d437b1a69d 100644
--- a/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
+++ b/frontend/libs/components/settings-modal/src/lib/settings-modal.tsx
@@ -133,14 +133,16 @@ export const SettingsModal = ({
       <Modal
         isOpen={isOpen}
         onClose={onClose}
-        className="max-w-3xl"
+        className="max-w-4xl"
         childPadding={false}
       >
-        <div className="h-[560px]">
+        <div className="h-[600px]">
           <div className="grid h-full grid-cols-12 gap-3">
             <div className="relative col-span-4 p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-ui-panel-border">
               <div className="flex items-center justify-between gap-2.5 py-0.5">
-                <h2 className="text-[18px] font-semibold opacity-80">Settings</h2>
+                <h2 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/60">
+                  Settings
+                </h2>
               </div>
               <hr className="my-2 w-full border-ui-panel-border" />
               <div className="space-y-1">
@@ -148,8 +150,10 @@ export const SettingsModal = ({
                   <button
                     key={section.id}
                     className={twMerge(
-                      "h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/30",
-                      section.id === selectedSection ? "bg-[#63636B]/20" : ""
+                      "h-9 w-full px-2 text-left transition-colors duration-100",
+                      section.id === selectedSection
+                        ? "bg-base-fg/10 text-base-fg"
+                        : "text-base-fg/70 hover:bg-base-fg/[0.06] hover:text-base-fg",
                     )}
                     onClick={() => {
                       gtagEvent("switch_settings_section", {
@@ -168,20 +172,20 @@ export const SettingsModal = ({
             </div>
             <div className="col-span-8 flex h-full flex-col overflow-y-auto relative">
               <div className="w-full border-b border-ui-panel-border py-2.5 ps-0">
-                <h2 className="text-[18px] font-semibold">
+                <h2 className="font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-base-fg/80">
                   {sections.find((s) => s.id === selectedSection)?.label}
                 </h2>
               </div>
               {experimentalEnabled && selectedSection === "experimental" && (
-                <div className="sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-ui-panel-border bg-ui-modal/95 backdrop-blur px-3 py-2">
-                  <div className="flex items-center gap-2 text-xs opacity-80">
+                <div className="sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-ui-panel-border bg-ui-modal px-3 py-2">
+                  <div className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.12em] opacity-80">
                     <FlaskConicalIcon />
                     Experimental features enabled
                   </div>
                   <Button
                     variant="destructive"
                     onClick={() => setIsResetConfirmOpen(true)}
-                    className="px-2 py-1 text-xs"
+                    className="rounded-[3px] px-2 py-1 text-xs"
                   >
                     Reset
                   </Button>
diff --git a/frontend/libs/components/switch/src/lib/switch.tsx b/frontend/libs/components/switch/src/lib/switch.tsx
index 0cc5a843ae..4d2bbdea23 100644
--- a/frontend/libs/components/switch/src/lib/switch.tsx
+++ b/frontend/libs/components/switch/src/lib/switch.tsx
@@ -18,8 +18,10 @@ export function Switch({ enabled, setEnabled, id, label = "Enable notifications"
       {({ checked, disabled }) => (
         <button
           className={clsx(
-            "group inline-flex h-6 w-11 items-center rounded-full",
-            checked ? "bg-primary" : (offClassName ?? "bg-action"),
+            "group inline-flex h-6 w-11 items-center rounded-[3px] border transition-colors",
+            checked
+              ? "border-white bg-white"
+              : (offClassName ?? "border-ui-controls-border bg-transparent"),
             disabled && "cursor-not-allowed opacity-50",
             className,
           )}
@@ -27,8 +29,10 @@ export function Switch({ enabled, setEnabled, id, label = "Enable notifications"
           <span className="sr-only">{label}</span>
           <span
             className={clsx(
-              "size-4 rounded-full bg-white transition",
-              checked ? "translate-x-6" : "translate-x-1",
+              "size-4 rounded-[2px] transition",
+              checked
+                ? "translate-x-[22px] bg-black"
+                : "translate-x-1 bg-white/70",
             )}
           />
         </button>
diff --git a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
index 700f5439c3..b1146bee82 100644
--- a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
+++ b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
@@ -72,14 +72,14 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
       <TabGroup selectedIndex={selectedIndex} onChange={handleTabChange}>
         <TabList
           className={twMerge(
-            "glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-xl p-0.5 py-1 !shadow-none",
+            "glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-[3px] p-0.5 py-1 !shadow-none",
             listClassName,
           )}
         >
           {/* Animated indicator */}
           <div
             className={twMerge(
-              "absolute top-1 z-10 h-[calc(100%-8px)] rounded-md bg-primary/30 transition-all duration-200 ease-in-out",
+              "absolute top-1 z-10 h-[calc(100%-8px)] rounded-[2px] bg-white transition-all duration-200 ease-in-out",
               indicatorClassName,
             )}
             style={{
@@ -99,10 +99,10 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
               disabled={disabled}
               className={({ selected }) =>
                 twMerge(
-                  "relative z-20 mx-0.5 min-w-max rounded-md border-2 border-transparent px-4 py-0.5 text-center text-sm font-semibold transition-all duration-200 ease-in-out",
+                  "relative z-20 mx-0.5 min-w-max rounded-[2px] border-2 border-transparent px-4 py-0.5 text-center text-sm font-semibold transition-all duration-200 ease-in-out",
                   "focus-visible:outline-none focus-visible:ring-0",
                   selected
-                    ? twMerge("text-base-fg", selectedTabClassName)
+                    ? twMerge("text-black", selectedTabClassName)
                     : "text-base-fg/70 hover:text-base-fg",
                   disabled ? "cursor-not-allowed opacity-60" : "",
                   tabClassName,
diff --git a/frontend/libs/components/toaster/src/lib/toaster.tsx b/frontend/libs/components/toaster/src/lib/toaster.tsx
index 955c4fc6f9..20e1c8a1c0 100644
--- a/frontend/libs/components/toaster/src/lib/toaster.tsx
+++ b/frontend/libs/components/toaster/src/lib/toaster.tsx
@@ -57,6 +57,9 @@ export function Toaster({
     <RHToaster
       position={position}
       toastOptions={{
+        style: {
+          borderRadius: "3px",
+        },
         success: {
           style: {
             background: "#ffffff",
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.tsx b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
index 7be1aeef75..5a054b9932 100644
--- a/frontend/libs/components/tooltip/src/lib/tooltip.tsx
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
@@ -175,7 +175,8 @@ export const Tooltip = ({
       // in Chromium/WebKit (our glass surfaces use backdrop-blur), so a fixed
       // tooltip inside one would otherwise be positioned/clipped incorrectly.
       const backdropFilter =
-        cs.backdropFilter || (cs as unknown as Record<string, string>)["webkitBackdropFilter"];
+        cs.backdropFilter ||
+        (cs as unknown as Record<string, string>)["webkitBackdropFilter"];
       if (
         cs.transform !== "none" ||
         cs.willChange === "transform" ||
@@ -342,54 +343,54 @@ export const Tooltip = ({
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-        <div
-          ref={setTooltipRef}
-          {...(portal ? { "data-modal-outside-safe": "" } : {})}
-          onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
-          onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
-          onClick={() => {
-            if (closeOnClick) {
-              setIsShowing(false);
-            }
-          }}
-          style={{
-            ...getStyleForPosition(),
-            transitionDelay: `${delay}ms`,
-            transitionProperty: "opacity",
-            transitionDuration: "200ms",
-            transitionTimingFunction: "ease-out",
-            zIndex,
-          }}
-          className={twMerge(
-            isFixed ? "fixed" : "absolute",
-            "w-max rounded-lg bg-ui-controls shadow-xl border border-ui-controls-border",
-            interactive
-              ? "pointer-events-auto p-3"
-              : "px-2.5 py-1.5 text-[13px] font-medium pointer-events-none",
-            "text-base-fg",
-            className ? className : "",
-          )}
-        >
-          {interactive ? (
-            content
-          ) : (
-            <div className="flex flex-col gap-1">
-              {content}
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt="tooltip"
-                  className="mb-1 aspect-square w-56 rounded-md"
-                />
-              )}
-              {description && (
-                <p className="text-sm text-base-fg font-normal">
-                  {description}
-                </p>
-              )}
-            </div>
-          )}
-        </div>
+      <div
+        ref={setTooltipRef}
+        {...(portal ? { "data-modal-outside-safe": "" } : {})}
+        onPointerEnter={() => interactive && setIsHoveringTooltip(true)}
+        onPointerLeave={() => interactive && setIsHoveringTooltip(false)}
+        onClick={() => {
+          if (closeOnClick) {
+            setIsShowing(false);
+          }
+        }}
+        style={{
+          ...getStyleForPosition(),
+          transitionDelay: `${delay}ms`,
+          transitionProperty: "opacity",
+          transitionDuration: "200ms",
+          transitionTimingFunction: "ease-out",
+          zIndex,
+        }}
+        className={twMerge(
+          isFixed ? "fixed" : "absolute",
+          "w-max rounded-[3px] bg-ui-panel border border-ui-panel-border",
+          interactive
+            ? "pointer-events-auto p-3"
+            : "px-2.5 py-1.5 font-mono text-[11px] font-medium uppercase tracking-[0.1em] pointer-events-none",
+          "text-base-fg",
+          className ? className : "",
+        )}
+      >
+        {interactive ? (
+          content
+        ) : (
+          <div className="flex flex-col gap-1">
+            {content}
+            {imageSrc && (
+              <img
+                src={imageSrc}
+                alt="tooltip"
+                className="mb-1 aspect-square w-56 rounded-none"
+              />
+            )}
+            {description && (
+              <p className="font-sans text-xs font-normal normal-case tracking-normal text-base-fg/80">
+                {description}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
     </Transition>
   );
 
diff --git a/frontend/libs/components/upload-modal/src/lib/UploadModal3D/UploadFiles3D.tsx b/frontend/libs/components/upload-modal/src/lib/UploadModal3D/UploadFiles3D.tsx
index 25a06c3bb9..58c3b74552 100644
--- a/frontend/libs/components/upload-modal/src/lib/UploadModal3D/UploadFiles3D.tsx
+++ b/frontend/libs/components/upload-modal/src/lib/UploadModal3D/UploadFiles3D.tsx
@@ -619,9 +619,9 @@ export const UploadFiles3D = ({
             previewSkeletonVisible ? "Hide skeleton" : "Show skeleton"
           }
           onClick={handleSkeletonToggle}
-          className={`flex h-10 w-10 items-center justify-center rounded-md border transition-colors ${
+          className={`flex h-10 w-10 items-center justify-center rounded-[3px] border transition-colors ${
             previewSkeletonVisible
-              ? "border-primary bg-primary/20 text-white"
+              ? "border-white bg-white/10 text-white"
               : "border-ui-controls-border bg-ui-controls text-white/70 hover:text-white"
           }`}
         >
@@ -698,11 +698,11 @@ export const UploadFiles3D = ({
       {isMulti ? (
         <PanelGroup direction="horizontal">
           <Panel defaultSize={33} minSize={20}>
-          <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-lg bg-brand-secondary p-2">
+          <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-none border border-white/15 bg-black/30 p-2">
             {fileEntries.map((entry, i) => (
               <li
                 key={i}
-                className={`group flex cursor-pointer items-center justify-between gap-1.5 rounded px-2 py-1 text-sm transition-colors ${
+                className={`group flex cursor-pointer items-center justify-between gap-1.5 rounded-[3px] px-2 py-1 text-sm transition-colors ${
                   i === previewIndex ? "bg-white/10" : "hover:bg-white/5"
                 }`}
                 onClick={() => setPreviewIndex(i)}
@@ -759,14 +759,14 @@ export const UploadFiles3D = ({
 
           <PanelResizeHandle className="flex w-4 items-center justify-center">
             <div
-              className="h-8 w-1 rounded-full bg-white/20 transition-colors hover:bg-white/40"
+              className="h-8 w-1 rounded-none bg-white/20 transition-colors hover:bg-white/40"
               onPointerDown={(e) => e.stopPropagation()}
             />
           </PanelResizeHandle>
 
           <Panel defaultSize={67} minSize={25}>
           <div className="flex h-full flex-col gap-2">
-            <div className="relative w-full min-h-48 overflow-hidden rounded-lg bg-brand-secondary">
+            <div className="relative w-full min-h-48 overflow-hidden rounded-none border border-white/15 bg-black/30">
               <canvas
                 className="pointer-events-none h-full min-h-48 !w-full"
                 ref={canvasCallbackRef}
@@ -814,7 +814,7 @@ export const UploadFiles3D = ({
           </Panel>
         </PanelGroup>
       ) : (
-        <div className="relative m-auto w-full min-h-48 overflow-hidden rounded-lg bg-brand-secondary">
+        <div className="relative m-auto w-full min-h-48 overflow-hidden rounded-none border border-white/15 bg-black/30">
           <canvas
             className="pointer-events-none h-full min-h-48 !w-full"
             ref={canvasCallbackRef}
diff --git a/frontend/libs/components/upload-modal/src/lib/UploadModalImage/UploadFilesImage.tsx b/frontend/libs/components/upload-modal/src/lib/UploadModalImage/UploadFilesImage.tsx
index 0a2dd9d67a..622cee04f9 100644
--- a/frontend/libs/components/upload-modal/src/lib/UploadModalImage/UploadFilesImage.tsx
+++ b/frontend/libs/components/upload-modal/src/lib/UploadModalImage/UploadFilesImage.tsx
@@ -204,11 +204,11 @@ export const UploadFilesImage = ({
         isMulti ? (
           <PanelGroup direction="horizontal">
             <Panel defaultSize={33} minSize={20}>
-            <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-lg bg-brand-secondary p-2">
+            <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-none border border-white/15 bg-black/30 p-2">
               {fileEntries.map((entry, i) => (
                 <li
                   key={i}
-                  className={`group flex items-center justify-between gap-1.5 rounded px-2 py-1 cursor-pointer text-sm transition-colors ${
+                  className={`group flex items-center justify-between gap-1.5 rounded-[3px] px-2 py-1 cursor-pointer text-sm transition-colors ${
                     i === previewIndex ? "bg-white/10" : "hover:bg-white/5"
                   }`}
                   onClick={() => setPreviewIndex(i)}
@@ -264,14 +264,14 @@ export const UploadFilesImage = ({
 
             <PanelResizeHandle className="flex w-4 items-center justify-center">
               <div
-                className="h-8 w-1 rounded-full bg-white/20 transition-colors hover:bg-white/40"
+                className="h-8 w-1 rounded-none bg-white/20 transition-colors hover:bg-white/40"
                 onPointerDown={(e) => e.stopPropagation()}
               />
             </PanelResizeHandle>
 
             <Panel defaultSize={67} minSize={25}>
             <div className="flex h-full flex-col gap-2">
-              <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-brand-secondary flex items-center justify-center">
+              <div className="relative aspect-square w-full overflow-hidden rounded-none border border-white/15 bg-black/30 flex items-center justify-center">
                 {previewUrl && (
                   <img
                     key={previewIndex}
@@ -309,7 +309,7 @@ export const UploadFilesImage = ({
           </PanelGroup>
         ) : (
           previewUrl && (
-            <div className="relative m-auto flex aspect-square w-full items-center justify-center overflow-hidden rounded-lg bg-brand-secondary">
+            <div className="relative m-auto flex aspect-square w-full items-center justify-center overflow-hidden rounded-none border border-white/15 bg-black/30">
               <img
                 alt="Preview"
                 className="m-auto max-h-full max-w-full object-contain"
diff --git a/frontend/libs/components/upload-modal/src/lib/UploadModalSplat/UploadFilesSplat.tsx b/frontend/libs/components/upload-modal/src/lib/UploadModalSplat/UploadFilesSplat.tsx
index 9ecc3eca51..ad5dd639ae 100644
--- a/frontend/libs/components/upload-modal/src/lib/UploadModalSplat/UploadFilesSplat.tsx
+++ b/frontend/libs/components/upload-modal/src/lib/UploadModalSplat/UploadFilesSplat.tsx
@@ -331,11 +331,11 @@ export const UploadFilesSplat = ({
       {isMulti ? (
         <PanelGroup direction="horizontal">
           <Panel defaultSize={33} minSize={20}>
-          <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-lg bg-brand-secondary p-2">
+          <ul className="flex h-full flex-col gap-1 overflow-y-auto rounded-none border border-white/15 bg-black/30 p-2">
             {fileEntries.map((entry, i) => (
               <li
                 key={i}
-                className={`group flex items-center justify-between gap-1.5 rounded px-2 py-1 cursor-pointer text-sm transition-colors ${
+                className={`group flex items-center justify-between gap-1.5 rounded-[3px] px-2 py-1 cursor-pointer text-sm transition-colors ${
                   i === previewIndex ? "bg-white/10" : "hover:bg-white/5"
                 }`}
                 onClick={() => setPreviewIndex(i)}
@@ -389,14 +389,14 @@ export const UploadFilesSplat = ({
 
           <PanelResizeHandle className="flex w-4 items-center justify-center">
             <div
-              className="h-8 w-1 rounded-full bg-white/20 transition-colors hover:bg-white/40"
+              className="h-8 w-1 rounded-none bg-white/20 transition-colors hover:bg-white/40"
               onPointerDown={(e) => e.stopPropagation()}
             />
           </PanelResizeHandle>
 
           <Panel defaultSize={67} minSize={25}>
           <div className="flex h-full flex-col gap-2">
-            <div className="relative w-full min-h-48 overflow-hidden rounded-lg bg-brand-secondary">
+            <div className="relative w-full min-h-48 overflow-hidden rounded-none border border-white/15 bg-black/30">
               <canvas
                 className="pointer-events-none h-full min-h-48 !w-full"
                 ref={canvasCallbackRef}
@@ -442,7 +442,7 @@ export const UploadFilesSplat = ({
           </Panel>
         </PanelGroup>
       ) : (
-        <div className="relative m-auto w-full min-h-48 overflow-hidden rounded-lg bg-brand-secondary">
+        <div className="relative m-auto w-full min-h-48 overflow-hidden rounded-none border border-white/15 bg-black/30">
           <canvas
             className="pointer-events-none h-full min-h-48 !w-full"
             ref={canvasCallbackRef}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 18561a8b56..7175a6a9aa 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -584,6 +584,10 @@
       "name": "@storyteller/ui-pricing-modal",
       "version": "0.0.1"
     },
+    "libs/components/pricing-table": {
+      "name": "@storyteller/ui-pricing-table",
+      "version": "0.0.1"
+    },
     "libs/components/promptbox": {
       "name": "@storyteller/ui-promptbox",
       "version": "0.0.1"
@@ -8520,6 +8524,10 @@
       "resolved": "libs/components/pricing-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-pricing-table": {
+      "resolved": "libs/components/pricing-table",
+      "link": true
+    },
     "node_modules/@storyteller/ui-promptbox": {
       "resolved": "libs/components/promptbox",
       "link": true
diff --git a/frontend/tsconfig.base.json b/frontend/tsconfig.base.json
index 98f8111ce9..69cb314ef1 100644
--- a/frontend/tsconfig.base.json
+++ b/frontend/tsconfig.base.json
@@ -132,6 +132,9 @@
       "@storyteller/ui-pricing-modal": [
         "libs/components/pricing-modal/src/index.ts"
       ],
+      "@storyteller/ui-pricing-table": [
+        "libs/components/pricing-table/src/index.ts"
+      ],
       "@storyteller/ui-promptbox": [
         "libs/components/promptbox/src/index.ts"
       ],
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 3dbba58d61..157516fd76 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -120,6 +120,9 @@
     {
       "path": "./libs/components/pricing-modal"
     },
+    {
+      "path": "./libs/components/pricing-table"
+    },
     {
       "path": "./libs/model-list"
     },