diff --git a/docs/app/components/theme-picker/ThemePicker.vue b/docs/app/components/theme-picker/ThemePicker.vue
index a75b482b..fd3e06cf 100644
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -140,7 +140,7 @@ function setBlackAsPrimary(value: boolean) {
           Theme
         </legend>
 
-        <div class="flex gap-1 -mx-2">
+        <div class="grid grid-cols-3 gap-1 -mx-2">
           <ThemePickerButton
             v-for="m in modes"
             :key="m.label"
diff --git a/docs/app/components/theme-picker/ThemePickerButton.vue b/docs/app/components/theme-picker/ThemePickerButton.vue
index d81de813..7dc4a49e 100644
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-picker/ThemePickerButton.vue
@@ -11,15 +11,16 @@ defineProps<{
   <UButton
     size="sm"
     color="neutral"
+    variant="outline"
     :icon="icon"
     :label="label"
-    :variant="selected ? 'soft' : 'outline'"
-    class="capitalize ring-(--ui-border) rounded-(--ui-radius) text-[11px]"
+    class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
+    :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
   >
     <template v-if="chip" #leading>
       <slot name="leading">
         <span
-          class="inline-block w-2 h-2 rounded-full"
+          class="inline-block size-2 rounded-full"
           :class="`bg-(--color-light) dark:bg-(--color-dark)`"
           :style="{
             '--color-light': `var(--color-${chip}-500)`,