diff --git a/app/components/Settings/AccentColorPicker.vue b/app/components/Settings/AccentColorPicker.vue
index 89988e3b47..ad650442a8 100644
--- a/app/components/Settings/AccentColorPicker.vue
+++ b/app/components/Settings/AccentColorPicker.vue
@@ -16,7 +16,9 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset class="flex items-center gap-4">
+  <fieldset
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+  >
     <legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
     <label
       v-for="color in accentColors"
@@ -35,7 +37,7 @@ onPrehydrate(el => {
       />
     </label>
     <label
-      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
     >
       <input
         type="radio"
diff --git a/app/components/Settings/BgThemePicker.vue b/app/components/Settings/BgThemePicker.vue
index c4f39eb94a..fa7bd90e60 100644
--- a/app/components/Settings/BgThemePicker.vue
+++ b/app/components/Settings/BgThemePicker.vue
@@ -14,7 +14,9 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <fieldset class="flex items-center gap-4">
+  <fieldset
+    class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
+  >
     <legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
     <label
       v-for="theme in backgroundThemes"
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 256060ee1b..4a5905e1e1 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -2,6 +2,7 @@
 defineProps<{
   label?: string
   description?: string
+  class?: string
 }>()
 
 const checked = defineModel<boolean>({
@@ -12,17 +13,22 @@ const checked = defineModel<boolean>({
 <template>
   <button
     type="button"
-    class="w-full flex items-center justify-between gap-4 group"
+    class="w-full flex items-center justify-between gap-4 group focus-visible:outline-none py-1 -my-1"
     role="switch"
     :aria-checked="checked"
     @click="checked = !checked"
+    :class="class"
   >
     <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
     <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer"
-      :class="checked ? 'bg-accent border-accent' : 'bg-fg/50 border-fg/50'"
+      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
+      :class="
+        checked
+          ? 'bg-accent border-accent group-hover:bg-accent/80'
+          : 'bg-fg/50 border-fg/50 group-hover:bg-fg/70'
+      "
       aria-hidden="true"
     >
       <span
@@ -30,7 +36,7 @@ const checked = defineModel<boolean>({
       />
     </span>
   </button>
-  <p v-if="description" class="text-sm text-fg-muted">
+  <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index de75f63ad6..b866b2fd37 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -50,11 +50,11 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           </h1>
           <button
             type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
             @click="router.back()"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
         <p class="text-fg-muted text-lg">
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
       <div class="space-y-8">
         <!-- APPEARANCE Section -->
         <section>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
             {{ $t('settings.sections.appearance') }}
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
@@ -78,7 +78,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
               <select
                 id="theme-select"
                 :value="colorMode.preference"
-                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer"
+                class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
                 @change="
                   colorMode.preference = ($event.target as HTMLSelectElement).value as
                     | 'light'
@@ -114,10 +114,10 @@ const setLocale: typeof setNuxti18nLocale = locale => {
 
         <!-- DISPLAY Section -->
         <section>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
             {{ $t('settings.sections.display') }}
           </h2>
-          <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
+          <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
             <!-- Relative dates toggle -->
             <SettingsToggle
               :label="$t('settings.relative_dates')"
@@ -125,33 +125,29 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             />
 
             <!-- Divider -->
-            <div class="border-t border-border" />
+            <div class="border-t border-border my-4" />
 
             <!-- Include @types in install toggle -->
-            <div class="space-y-2">
-              <SettingsToggle
-                :label="$t('settings.include_types')"
-                :description="$t('settings.include_types_description')"
-                v-model="settings.includeTypesInInstall"
-              />
-            </div>
+            <SettingsToggle
+              :label="$t('settings.include_types')"
+              :description="$t('settings.include_types_description')"
+              v-model="settings.includeTypesInInstall"
+            />
 
             <!-- Divider -->
-            <div class="border-t border-border" />
+            <div class="border-t border-border my-4" />
 
             <!-- Hide platform-specific packages toggle -->
-            <div class="space-y-2">
-              <SettingsToggle
-                :label="$t('settings.hide_platform_packages')"
-                :description="$t('settings.hide_platform_packages_description')"
-                v-model="settings.hidePlatformPackages"
-              />
-            </div>
+            <SettingsToggle
+              :label="$t('settings.hide_platform_packages')"
+              :description="$t('settings.hide_platform_packages_description')"
+              v-model="settings.hidePlatformPackages"
+            />
           </div>
         </section>
 
         <section>
-          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
+          <h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
             {{ $t('settings.sections.language') }}
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
@@ -165,7 +161,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                 <select
                   id="language-select"
                   :value="locale"
-                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer"
+                  class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
                   @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
                 >
                   <option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -176,7 +172,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                   <select
                     id="language-select"
                     disabled
-                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait"
+                    class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait duration-200 transition-colors hover:border-fg-subtle"
                   >
                     <option>{{ $t('common.loading') }}</option>
                   </select>