diff --git a/app/components/Toggle.client.vue b/app/components/Toggle.client.vue
new file mode 100644
index 0000000000..769bd07c4a
--- /dev/null
+++ b/app/components/Toggle.client.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  description?: string
+}>()
+
+const checked = defineModel<boolean>({
+  default: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-full flex items-center justify-between gap-4 group"
+    role="switch"
+    :aria-checked="checked"
+    @click="checked = !checked"
+  >
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
+      :class="checked ? 'bg-accent' : 'bg-bg border border-border'"
+      aria-hidden="true"
+    >
+      <span
+        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
+        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+      />
+    </span>
+  </button>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
+</template>
+
+<style scoped>
+button[aria-checked='false'] > span:last-of-type > span {
+  translate: 0;
+}
+button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(100%);
+}
+html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(-100%);
+}
+</style>
diff --git a/app/components/ToggleSkeleton.vue b/app/components/Toggle.server.vue
similarity index 55%
rename from app/components/ToggleSkeleton.vue
rename to app/components/Toggle.server.vue
index 960464afe0..71d4e4ee93 100644
--- a/app/components/ToggleSkeleton.vue
+++ b/app/components/Toggle.server.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
+  description?: string
 }>()
 </script>
 
 <template>
   <div class="w-full flex items-center justify-between gap-4">
-    <span class="text-sm text-fg font-medium text-start">
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
     <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
   </div>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
 </template>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 4a5ac3f688..200d03306b 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -100,74 +100,18 @@ defineOgImageComponent('Default', {
           </h2>
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
             <!-- Relative dates toggle -->
-            <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.relativeDates"
-                  @click="settings.relativeDates = !settings.relativeDates"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.relative_dates') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <ToggleSkeleton :label="$t('settings.relative_dates')" />
-                </template>
-              </ClientOnly>
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.relative_dates_description') }}
-              </p>
-            </div>
+            <Toggle :label="$t('settings.relative_dates')" v-model="settings.relativeDates" />
 
             <!-- Divider -->
             <div class="border-t border-border" />
 
             <!-- Include @types in install toggle -->
             <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.includeTypesInInstall"
-                  @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.include_types') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="
-                      settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
-                    "
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <ToggleSkeleton :label="$t('settings.include_types')" />
-                </template>
-              </ClientOnly>
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.include_types_description') }}
-              </p>
+              <Toggle
+                :label="$t('settings.include_types')"
+                :description="$t('settings.include_types_description')"
+                v-model="settings.includeTypesInInstall"
+              />
             </div>
 
             <!-- Divider -->
@@ -175,39 +119,11 @@ defineOgImageComponent('Default', {
 
             <!-- Hide platform-specific packages toggle -->
             <div class="space-y-2">
-              <ClientOnly>
-                <button
-                  type="button"
-                  class="w-full flex items-center justify-between gap-4 group"
-                  role="switch"
-                  :aria-checked="settings.hidePlatformPackages"
-                  @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
-                >
-                  <span class="text-sm text-fg font-medium text-start">
-                    {{ $t('settings.hide_platform_packages') }}
-                  </span>
-                  <span
-                    class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
-                    :class="
-                      settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
-                    "
-                    aria-hidden="true"
-                  >
-                    <span
-                      class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-                      :class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
-                    />
-                  </span>
-                </button>
-                <template #fallback>
-                  <p class="text-sm text-fg-muted">
-                    {{ $t('settings.hide_platform_packages') }}
-                  </p>
-                </template>
-              </ClientOnly>
-              <p class="text-sm text-fg-muted">
-                {{ $t('settings.hide_platform_packages_description') }}
-              </p>
+              <Toggle
+                :label="$t('settings.hide_platform_packages')"
+                :description="$t('settings.hide_platform_packages')"
+                v-model="settings.hidePlatformPackages"
+              />
             </div>
           </div>
         </section>
@@ -271,15 +187,3 @@ defineOgImageComponent('Default', {
     </article>
   </main>
 </template>
-
-<style scoped>
-button[aria-checked='false'] > span:last-of-type > span {
-  translate: 0;
-}
-button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(100%);
-}
-html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(-100%);
-}
-</style>