diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index ba86926a..24c32f14 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -12,6 +12,8 @@
     --font-mono-jetbrains: JetbrainsMono;
 
     --radius-control: 0.375rem;
+    --radius-menu-item: 0.625rem;
+    --radius-popup: 1rem;
     --radius-surface: 0.625rem;
     --radius-dialog: 0.875rem;
     --radius-emphasis: 0.75rem;
diff --git a/app/assets/css/interface.css b/app/assets/css/interface.css
index e4c978de..a9b829a2 100644
--- a/app/assets/css/interface.css
+++ b/app/assets/css/interface.css
@@ -3,6 +3,8 @@
     --ui-chrome: #f5f5f6;
     --ui-panel: #fafafa;
     --ui-popup: #fff;
+    --ui-popup-surface: var(--ui-popup);
+    --ui-popup-filter: none;
     --ui-field: #fff;
     --ui-hover: #e8e8eb;
     --ui-selected: #dedee3;
@@ -55,6 +57,7 @@
     --ui-chrome: #202020;
     --ui-panel: #242424;
     --ui-popup: #2b2b2b;
+    --ui-popup-surface: var(--ui-popup);
     --ui-field: #303030;
     --ui-hover: #383838;
     --ui-selected: #424242;
@@ -67,7 +70,126 @@
     --ui-shadow: 0 12px 36px rgb(0 0 0 / 30%), 0 2px 6px rgb(0 0 0 / 20%);
 }
 
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+    :root,
+    .dark {
+        --ui-popup-surface: color-mix(in srgb, var(--ui-popup) 55%, transparent);
+        --ui-popup-filter: blur(24px) saturate(140%);
+    }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+    :root,
+    .dark {
+        --ui-popup-surface: var(--ui-popup);
+        --ui-popup-filter: none;
+    }
+}
+
 @layer components {
+    .preview-card {
+        min-width: 0;
+        cursor: pointer;
+        border: 1px solid transparent;
+        border-radius: var(--radius-popup);
+        background-color: transparent;
+        color: var(--ui-muted);
+        transition:
+            background-color 120ms ease,
+            border-color 120ms ease,
+            color 120ms ease;
+    }
+
+    .preview-card:hover {
+        background-color: var(--ui-hover);
+        color: var(--ui-text);
+    }
+
+    .preview-card[aria-pressed='true'] {
+        border-color: var(--ui-focus);
+        background-color: var(--ui-selected);
+        color: var(--ui-text);
+    }
+
+    .preview-card:focus-visible {
+        outline: 2px solid var(--ui-focus);
+        outline-offset: 2px;
+    }
+
+    .preview-thumbnail {
+        isolation: isolate;
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid var(--ui-line);
+        border-radius: 10px;
+    }
+
+    .preview-caption {
+        display: block;
+        width: 100%;
+        overflow: hidden;
+        padding: 0 4px 2px;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+        text-align: center;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .preview-selection,
+    .preview-action {
+        border: 1px solid var(--ui-line);
+        background: var(--ui-popup-surface);
+        -webkit-backdrop-filter: var(--ui-popup-filter);
+        backdrop-filter: var(--ui-popup-filter);
+        color: var(--ui-text);
+        box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
+    }
+
+    .preview-selection {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        z-index: 3;
+        display: flex;
+        width: 20px;
+        height: 20px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 9999px;
+        pointer-events: none;
+    }
+
+    .preview-swatch {
+        border-color: var(--ui-line);
+        border-radius: 12px;
+    }
+
+    .preview-swatch:hover {
+        outline: 1px solid var(--ui-muted);
+        outline-offset: 2px;
+    }
+
+    .preview-swatch[aria-pressed='true'] {
+        outline: 2px solid var(--ui-focus);
+        outline-offset: 2px;
+    }
+
+    .preview-action {
+        cursor: pointer;
+    }
+
+    @media (hover: none) {
+        .preview-action {
+            opacity: 1;
+        }
+    }
+
+    .preview-action:hover {
+        background: var(--ui-hover);
+    }
+
     .ui-navbar-button {
         display: flex;
         width: 32px;
@@ -145,14 +267,16 @@
     .ui-popup,
     .ui-dialog {
         border: 1px solid var(--ui-line);
-        background: var(--ui-popup);
+        background: var(--ui-popup-surface);
+        -webkit-backdrop-filter: var(--ui-popup-filter);
+        backdrop-filter: var(--ui-popup-filter);
         color: var(--ui-text);
         box-shadow: var(--ui-shadow);
         outline: none;
     }
 
     .ui-popup {
-        border-radius: var(--radius-surface);
+        border-radius: var(--radius-popup);
         transform-origin: var(--reka-popper-transform-origin, center);
     }
 
@@ -166,7 +290,6 @@
 
     .ui-dialog {
         border-radius: var(--radius-dialog);
-        background: var(--ui-panel);
     }
 
     .ui-dialog[data-state='open'] {
@@ -216,7 +339,7 @@
 
     .ui-menu-item {
         min-height: 28px;
-        border-radius: var(--radius-control);
+        border-radius: var(--radius-menu-item);
         color: var(--ui-text);
         outline: none;
     }
@@ -237,6 +360,12 @@
         opacity: 0.4;
     }
 
+    .ui-menu-separator {
+        height: 1px;
+        margin: 6px 8px;
+        background: var(--ui-line);
+    }
+
     .ui-close {
         display: inline-flex;
         width: 28px;
diff --git a/app/components/ButtonBackground.vue b/app/components/ButtonBackground.vue
index d5c8d4bf..f03e9add 100644
--- a/app/components/ButtonBackground.vue
+++ b/app/components/ButtonBackground.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="relative h-20 w-full">
+    <div class="group relative h-20 w-full">
         <button
             v-bind="{ ...previewAttributes, ...$attrs }"
             type="button"
-            class="rounded-emphasis relative size-full cursor-pointer overflow-hidden focus:outline-hidden focus-visible:ring-2 focus-visible:ring-violet-500"
-            :class="active ? 'ring-1 ring-violet-500 dark:ring-violet-400' : ''"
+            class="preview-card preview-swatch relative size-full overflow-hidden"
+            :aria-pressed="active"
         >
             <img
                 v-if="thumbnail"
@@ -17,6 +17,10 @@
             />
 
             <slot />
+
+            <span v-if="active" class="preview-selection" aria-hidden="true">
+                <CheckIcon class="size-3" />
+            </span>
         </button>
 
         <button
@@ -24,16 +28,16 @@
             type="button"
             aria-label="Delete custom background"
             @click="$emit('delete')"
-            class="absolute top-1 right-1 z-10 inline-flex size-6 cursor-pointer items-center justify-center rounded-full bg-zinc-800 text-white shadow-sm hover:bg-zinc-700 focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:outline-hidden active:bg-zinc-600"
+            class="preview-action focus-visible:outline-ui-focus absolute right-1.5 bottom-1.5 z-10 inline-flex size-6 items-center justify-center rounded-full opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2"
         >
-            <XIcon class="size-4 text-white" />
+            <XIcon class="size-3" />
         </button>
     </div>
 </template>
 
 <script setup>
 import { computed } from 'vue';
-import { XIcon } from 'lucide-vue-next';
+import { CheckIcon, XIcon } from 'lucide-vue-next';
 
 defineOptions({ inheritAttrs: false });
 
diff --git a/app/components/ButtonTheme.vue b/app/components/ButtonTheme.vue
index 919bd771..b3db10fe 100644
--- a/app/components/ButtonTheme.vue
+++ b/app/components/ButtonTheme.vue
@@ -1,65 +1,68 @@
 <template>
     <button
         v-bind="$attrs"
-        class="rounded-emphasis relative h-48 w-64 cursor-pointer overflow-hidden text-left focus:outline-hidden"
-        :class="active ? 'ring-1 ring-violet-500 dark:ring-violet-400' : ''"
+        type="button"
+        :aria-label="theme"
+        :aria-pressed="active"
+        class="preview-card flex h-48 w-full flex-col gap-2 p-1.5 text-left"
     >
-        <div v-if="!hasScene" class="absolute inset-0" v-bind="background" />
+        <div class="preview-thumbnail relative min-h-0 flex-1">
+            <div v-if="!hasScene" class="absolute inset-0" v-bind="background" />
 
-        <DeferredComponent
-            as="div"
-            :show="rendered"
-            :threshold="[0, 0.2]"
-            @intersected="visible = $event"
-            class="relative flex size-full items-center justify-center"
-        >
-            <div v-if="blocks && hasScene" class="relative size-full overflow-hidden">
-                <Canvas
-                    preview
-                    class="absolute top-1/2 left-1/2 flex origin-center items-center justify-center"
-                    :style="{ transform: `translate(-50%, -50%) scale(${previewScale})` }"
-                    :width="previewWidth"
-                    :height="previewHeight"
-                    :position="themeSettings.position"
-                    :background="themeSettings.background"
-                    :background-attributes="background"
-                    :scene="themeSettings.scene"
-                    :theme-type="themeSettings.themeType"
+            <DeferredComponent
+                as="div"
+                :show="rendered"
+                :threshold="[0, 0.2]"
+                @intersected="visible = $event"
+                class="relative flex size-full items-center justify-center"
+            >
+                <div v-if="blocks && hasScene" class="relative size-full overflow-hidden">
+                    <Canvas
+                        preview
+                        class="absolute top-1/2 left-1/2 flex origin-center items-center justify-center"
+                        :style="{ transform: `translate(-50%, -50%) scale(${previewScale})` }"
+                        :width="previewWidth"
+                        :height="previewHeight"
+                        :position="themeSettings.position"
+                        :background="themeSettings.background"
+                        :background-attributes="background"
+                        :scene="themeSettings.scene"
+                        :theme-type="themeSettings.themeType"
+                    >
+                        <template #default="{ sceneGutters }">
+                            <Window
+                                preview
+                                class="absolute z-1 shrink-0"
+                                :blocks="blocks"
+                                :settings="themeSettings"
+                                :scene-gutters="sceneGutters"
+                            />
+                        </template>
+                    </Canvas>
+                </div>
+
+                <Window v-else-if="blocks" preview :blocks="blocks" :settings="themeSettings" />
+            </DeferredComponent>
+
+            <div v-if="rendering" class="absolute inset-0 flex items-center justify-center">
+                <span
+                    class="rounded-control flex items-center justify-center bg-zinc-200/80 p-2 backdrop-blur-xs dark:bg-zinc-950/80"
                 >
-                    <template #default="{ sceneGutters }">
-                        <Window
-                            preview
-                            class="absolute z-1 shrink-0"
-                            :blocks="blocks"
-                            :settings="themeSettings"
-                            :scene-gutters="sceneGutters"
-                        />
-                    </template>
-                </Canvas>
+                    <Spinner class="text-zinc-700 dark:text-zinc-200" />
+                </span>
             </div>
 
-            <Window v-else-if="blocks" preview :blocks="blocks" :settings="themeSettings" />
-        </DeferredComponent>
-
-        <div v-if="rendering" class="absolute inset-0 flex items-center justify-center">
-            <span
-                class="rounded-control flex items-center justify-center bg-zinc-200/80 p-2 backdrop-blur-xs dark:bg-zinc-950/80"
-            >
-                <Spinner class="text-zinc-700 dark:text-zinc-200" />
+            <span v-if="active" class="preview-selection" aria-hidden="true">
+                <CheckIcon class="size-3" />
             </span>
         </div>
 
-        <div class="absolute inset-x-0 bottom-2 flex justify-center">
-            <span
-                class="rounded-full border border-white/20 bg-black/40 px-3 py-1 text-[10px] font-medium tracking-wide text-white shadow-xs backdrop-blur-md"
-            >
-                {{ theme }}
-            </span>
-        </div>
+        <span class="preview-caption">{{ theme }}</span>
     </button>
 </template>
 
 <script setup>
+import { CheckIcon } from 'lucide-vue-next';
 import useHighlightedCode from '@/composables/useHighlightedCode';
 import { defaults, cloneDeep } from 'lodash';
 import { ref, watch, reactive, toRefs, computed } from 'vue';
@@ -92,11 +95,11 @@ watch(highlighted, (value) => {
 });
 
 const previewWidth = 640;
-const previewHeight = 480;
+const previewHeight = 360;
 const previewScale = 0.4;
 
 const settingOverrides = {
-    scale: 0.5,
+    scale: 0.65,
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
diff --git a/app/components/PopoverPanel.vue b/app/components/PopoverPanel.vue
index 597e50d6..c4c739af 100644
--- a/app/components/PopoverPanel.vue
+++ b/app/components/PopoverPanel.vue
@@ -17,8 +17,8 @@
             @focus-outside="onDismissOutside"
         >
             <div>
-                <div class="text-ui-text flex items-center justify-between gap-2 px-3 pt-3 pb-2">
-                    <div class="text-ui-text text-xs font-medium">
+                <div class="text-ui-muted flex items-center justify-between gap-2 pt-2 pr-2 pl-3">
+                    <div class="text-xs font-normal">
                         {{ title }}
                     </div>
 
diff --git a/app/components/SearchableSelect.vue b/app/components/SearchableSelect.vue
index 49b88291..fba6b47a 100644
--- a/app/components/SearchableSelect.vue
+++ b/app/components/SearchableSelect.vue
@@ -31,7 +31,7 @@
             "
         >
             <div class="flex min-h-0 flex-col overflow-hidden">
-                <div class="border-ui-line shrink-0 border-b p-1 pb-2">
+                <div class="shrink-0 p-1">
                     <Input
                         ref="searchInput"
                         v-model="search"
@@ -41,6 +41,8 @@
                     />
                 </div>
 
+                <div class="ui-menu-separator" role="separator" />
+
                 <ScrollArea ref="optionsScrollArea" class="h-72 min-h-0">
                     <div class="p-1">
                         <button
diff --git a/app/components/TabBackgrounds.vue b/app/components/TabBackgrounds.vue
index 8d98a3ba..11b60995 100644
--- a/app/components/TabBackgrounds.vue
+++ b/app/components/TabBackgrounds.vue
@@ -1,66 +1,68 @@
 <template>
-    <div class="flex w-full flex-col justify-start gap-4">
-        <div>
-            <div class="grid grid-cols-3 gap-3 p-4">
-                <ButtonBackground
-                    :active="false"
-                    v-tooltip.bottom="{
-                        content: 'Add Custom Background',
-                    }"
-                    @click="$emit('add')"
-                    class="flex items-center justify-center border border-zinc-200 bg-zinc-50 hover:bg-zinc-200 active:bg-white dark:border-zinc-700 dark:bg-zinc-600 dark:hover:bg-zinc-950 dark:active:bg-black"
-                >
-                    <PlusCircleIcon class="size-5 text-zinc-600 dark:text-zinc-300" />
-                </ButtonBackground>
-
+    <div class="flex w-full flex-col gap-3 p-4">
+        <div
+            class="flex items-center justify-between gap-2"
+            role="toolbar"
+            aria-label="Background actions"
+        >
+            <span class="text-ui-muted text-xs">Backgrounds</span>
+            <div class="floating-toolbar flex items-center gap-1">
                 <ColorPicker :value="backgroundColor" @change="$emit('color', $event)">
-                    <ButtonBackground
-                        :active="!!backgroundColor"
-                        v-tooltip.bottom="'Pick Color'"
-                        class="flex items-center justify-center border border-zinc-200 bg-zinc-50 hover:bg-zinc-200 active:bg-white dark:border-zinc-700 dark:bg-zinc-600 dark:hover:bg-zinc-950 dark:active:bg-black"
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        aria-label="Pick background color"
+                        :aria-pressed="!!backgroundColor"
+                        v-tooltip.bottom="'Pick color'"
                     >
-                        <DropletIcon class="size-5 text-zinc-600 dark:text-zinc-300" />
-                    </ButtonBackground>
-
+                        <DropletIcon />
+                    </Button>
                     <template #popover="{ alpha }">
                         <div class="flex justify-center px-3 pt-1 pb-3">
                             <Button
                                 size="sm"
                                 class="w-full justify-center"
-                                @click="
-                                    addCustomBackground({
-                                        style: { backgroundColor: alpha },
-                                    })
-                                "
+                                @click="addCustomBackground({ style: { backgroundColor: alpha } })"
                             >
                                 Save
                             </Button>
                         </div>
                     </template>
                 </ColorPicker>
-
-                <ButtonBackground
-                    v-for="{ id, custom, thumbnail, ...attrs } in backgrounds"
-                    class="highlight"
-                    :key="id"
-                    :custom="custom"
-                    :attributes="attrs"
-                    :thumbnail="thumbnail"
-                    :title="id"
-                    :data-ref="`button-background-${id}`"
-                    :active="background === id && !backgroundColor"
-                    @delete="$emit('delete', id)"
-                    @mousedown.prevent
-                    @click="selectBackground($event, id)"
-                />
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    aria-label="Add custom background"
+                    v-tooltip.bottom="'Add custom background'"
+                    @click="$emit('add')"
+                >
+                    <PlusIcon />
+                </Button>
             </div>
         </div>
+
+        <div class="grid grid-cols-3 gap-3">
+            <ButtonBackground
+                v-for="{ id, custom, thumbnail, ...attrs } in backgrounds"
+                :key="id"
+                :custom="custom"
+                :attributes="attrs"
+                :thumbnail="thumbnail"
+                :title="id"
+                :aria-label="id"
+                :data-ref="`button-background-${id}`"
+                :active="background === id && !backgroundColor"
+                @delete="$emit('delete', id)"
+                @mousedown.prevent
+                @click="selectBackground($event, id)"
+            />
+        </div>
     </div>
 </template>
 
 <script setup>
 import useBackgrounds from '@/composables/useBackgrounds';
-import { PlusCircleIcon, DropletIcon } from 'lucide-vue-next';
+import { PlusIcon, DropletIcon } from 'lucide-vue-next';
 import { onMounted, toRefs } from 'vue';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
 
diff --git a/app/components/TabScenes.vue b/app/components/TabScenes.vue
index 0938466e..c4b0e0ec 100644
--- a/app/components/TabScenes.vue
+++ b/app/components/TabScenes.vue
@@ -1,22 +1,18 @@
 <template>
     <div class="w-full">
-        <div class="grid grid-cols-2 gap-3 p-3">
+        <div class="grid grid-cols-2 gap-3 p-4">
             <button
                 v-for="scene in scenes"
                 :key="scene.id"
                 :data-ref="`button-scene-${scene.id}`"
                 type="button"
-                class="flex min-w-0 flex-col items-center gap-2 rounded-xl p-1.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
-                :class="
-                    activeScene === scene.id
-                        ? 'bg-zinc-200/80 text-zinc-950 ring-1 ring-violet-500 dark:bg-zinc-950 dark:text-zinc-50 dark:ring-violet-400'
-                        : ''
-                "
+                class="preview-card flex min-w-0 flex-col gap-2 p-1.5"
+                :aria-pressed="activeScene === scene.id"
                 @mousedown.prevent
                 @click="selectScene($event, scene.id)"
             >
                 <span
-                    class="scene-preview relative aspect-video w-full overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700"
+                    class="preview-thumbnail scene-preview relative aspect-video w-full"
                     :class="[
                         `scene-preview-${scene.id}`,
                         { 'is-checker': scene.preview.background === 'checker' },
@@ -40,15 +36,23 @@
                             <span class="scene-preview-line is-tiny"></span>
                         </span>
                     </span>
+                    <span
+                        v-if="activeScene === scene.id"
+                        class="preview-selection"
+                        aria-hidden="true"
+                    >
+                        <CheckIcon class="size-3" />
+                    </span>
                 </span>
 
-                <span class="max-w-full truncate">{{ scene.title }}</span>
+                <span class="preview-caption">{{ scene.title }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup>
+import { CheckIcon } from 'lucide-vue-next';
 import { onMounted, toRefs } from 'vue';
 import useScrollRefIntoView from '@/composables/useScrollRefIntoView';
 
diff --git a/app/components/TabThemes.vue b/app/components/TabThemes.vue
index cde7f1c3..669bbc96 100644
--- a/app/components/TabThemes.vue
+++ b/app/components/TabThemes.vue
@@ -8,7 +8,7 @@
             <div
                 v-for="entry in visibleThemes"
                 :key="entry.theme"
-                class="absolute left-1/2 -translate-x-1/2"
+                class="absolute right-4 left-4"
                 :style="{ top: `${padding + entry.index * rowHeight}px` }"
             >
                 <ButtonTheme
diff --git a/app/components/ui/context-menu/ContextMenuSeparator.vue b/app/components/ui/context-menu/ContextMenuSeparator.vue
index 94e131af..a2595cc6 100644
--- a/app/components/ui/context-menu/ContextMenuSeparator.vue
+++ b/app/components/ui/context-menu/ContextMenuSeparator.vue
@@ -13,8 +13,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ContextMenuSeparator
-        v-bind="delegatedProps"
-        :class="cn('bg-ui-line -mx-1 my-1 h-px', props.class)"
-    />
+    <ContextMenuSeparator v-bind="delegatedProps" :class="cn('ui-menu-separator', props.class)" />
 </template>
diff --git a/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index ccac875c..00acf0e7 100644
--- a/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -13,8 +13,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <DropdownMenuSeparator
-        v-bind="delegatedProps"
-        :class="cn('bg-ui-line -mx-1 my-1 h-px', props.class)"
-    />
+    <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('ui-menu-separator', props.class)" />
 </template>
diff --git a/app/components/ui/select/SelectSeparator.vue b/app/components/ui/select/SelectSeparator.vue
index 2f862b9d..37cf3655 100644
--- a/app/components/ui/select/SelectSeparator.vue
+++ b/app/components/ui/select/SelectSeparator.vue
@@ -13,8 +13,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <SelectSeparator
-        v-bind="delegatedProps"
-        :class="cn('bg-ui-line -mx-1 my-1 h-px', props.class)"
-    />
+    <SelectSeparator v-bind="delegatedProps" :class="cn('ui-menu-separator', props.class)" />
 </template>
diff --git a/app/components/ui/sonner/Sonner.vue b/app/components/ui/sonner/Sonner.vue
index e5783c0a..46e847f0 100644
--- a/app/components/ui/sonner/Sonner.vue
+++ b/app/components/ui/sonner/Sonner.vue
@@ -15,8 +15,13 @@ const props = defineProps({
         :rich-colors="props.richColors"
         class="toaster group"
         :toast-options="{
+            style: {
+                background: 'var(--ui-popup-surface)',
+                backdropFilter: 'var(--ui-popup-filter)',
+                WebkitBackdropFilter: 'var(--ui-popup-filter)',
+            },
             classes: {
-                toast: 'group toast group-[.toaster]:bg-white group-[.toaster]:text-zinc-950 group-[.toaster]:border-zinc-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-zinc-950 dark:group-[.toaster]:text-zinc-50 dark:group-[.toaster]:border-zinc-800',
+                toast: 'group toast group-[.toaster]:text-ui-text group-[.toaster]:border-ui-line group-[.toaster]:shadow-lg',
                 description: 'group-[.toast]:text-zinc-500 dark:group-[.toast]:text-zinc-400',
                 actionButton:
                     'group-[.toast]:bg-zinc-900 group-[.toast]:text-zinc-50 dark:group-[.toast]:bg-zinc-50 dark:group-[.toast]:text-zinc-900',
diff --git a/app/components/ui/sonner/Toaster.vue b/app/components/ui/sonner/Toaster.vue
index e5783c0a..46e847f0 100644
--- a/app/components/ui/sonner/Toaster.vue
+++ b/app/components/ui/sonner/Toaster.vue
@@ -15,8 +15,13 @@ const props = defineProps({
         :rich-colors="props.richColors"
         class="toaster group"
         :toast-options="{
+            style: {
+                background: 'var(--ui-popup-surface)',
+                backdropFilter: 'var(--ui-popup-filter)',
+                WebkitBackdropFilter: 'var(--ui-popup-filter)',
+            },
             classes: {
-                toast: 'group toast group-[.toaster]:bg-white group-[.toaster]:text-zinc-950 group-[.toaster]:border-zinc-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-zinc-950 dark:group-[.toaster]:text-zinc-50 dark:group-[.toaster]:border-zinc-800',
+                toast: 'group toast group-[.toaster]:text-ui-text group-[.toaster]:border-ui-line group-[.toaster]:shadow-lg',
                 description: 'group-[.toast]:text-zinc-500 dark:group-[.toast]:text-zinc-400',
                 actionButton:
                     'group-[.toast]:bg-zinc-900 group-[.toast]:text-zinc-50 dark:group-[.toast]:bg-zinc-50 dark:group-[.toast]:text-zinc-900',
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4c3e80bc..21314ece 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -828,33 +828,31 @@ html.dark,
 }
 
 .v-popper--theme-tooltip .v-popper__inner {
-    @apply rounded-control bg-zinc-900 px-2 py-1 text-[10px] leading-tight font-medium text-zinc-100 shadow-sm;
-}
-
-.dark .v-popper--theme-tooltip .v-popper__inner {
-    @apply bg-zinc-100 text-zinc-900;
+    @apply rounded-control px-2 py-1 text-[10px] leading-tight font-medium shadow-sm;
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-outer {
-    @apply border-zinc-900;
-}
-
-.dark .v-popper--theme-tooltip .v-popper__arrow-outer {
-    @apply border-zinc-100;
+    border-color: var(--ui-popup-surface);
 }
 
 .v-popper--theme-tooltip .v-popper__arrow-inner {
     @apply hidden;
 }
 
-.v-popper--theme-dropdown .v-popper__inner {
+.v-popper--theme-dropdown .v-popper__inner,
+.v-popper--theme-tooltip .v-popper__inner {
     border: 1px solid var(--ui-line);
-    border-radius: var(--radius-surface);
-    background: var(--ui-popup);
+    background: var(--ui-popup-surface);
+    -webkit-backdrop-filter: var(--ui-popup-filter);
+    backdrop-filter: var(--ui-popup-filter);
     color: var(--ui-text);
     box-shadow: var(--ui-shadow);
 }
 
+.v-popper--theme-dropdown .v-popper__inner {
+    border-radius: var(--radius-popup);
+}
+
 .v-popper--theme-dropdown .v-popper__arrow-container {
     display: none;
 }