diff --git a/components/settings/SettingsToggleItem.vue b/components/settings/SettingsToggleItem.vue
index 8b376503..588754f8 100644
--- a/components/settings/SettingsToggleItem.vue
+++ b/components/settings/SettingsToggleItem.vue
@@ -15,34 +15,34 @@ const { disabled = false } = defineProps<{
     :disabled="disabled"
     :class="disabled ? 'opacity-50 cursor-not-allowed' : ''"
   >
-    <div
+    <span
       w-full flex px5 py3 md:gap2 gap4 items-center
       transition-250
       :class="disabled ? '' : 'group-hover:bg-active'"
       group-focus-visible:ring="2 current"
     >
-      <div flex-1 flex items-center md:gap2 gap4>
-        <div
+      <span flex-1 flex items-center md:gap2 gap4>
+        <span
           v-if="icon" flex items-center justify-center
           flex-shrink-0
           :class="$slots.description ? 'w-12 h-12' : ''"
         >
           <slot name="icon">
-            <div v-if="icon" :class="icon" md:text-size-inherit text-xl />
+            <span v-if="icon" :class="icon" md:text-size-inherit text-xl />
           </slot>
-        </div>
-        <div space-y-1>
-          <p :class="checked ? 'text-base' : 'text-secondary'">
+        </span>
+        <span space-y-1>
+          <span :class="checked ? 'text-base' : 'text-secondary'">
             <slot>
               <span>{{ text }}</span>
             </slot>
-          </p>
-          <p v-if="$slots.description" text-sm text-secondary>
+          </span>
+          <span v-if="$slots.description" block text-sm text-secondary>
             <slot name="description" />
-          </p>
-        </div>
-      </div>
-      <div text-lg :class="checked ? 'i-ri-checkbox-line text-primary' : 'i-ri-checkbox-blank-line text-secondary'" />
-    </div>
+          </span>
+        </span>
+      </span>
+      <span text-lg :class="checked ? 'i-ri-checkbox-line text-primary' : 'i-ri-checkbox-blank-line text-secondary'" />
+    </span>
   </button>
 </template>