diff --git a/locales/en.json b/locales/en.json
index 15014c52..2adb6ae1 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -409,7 +409,8 @@
       "label": "Preferences",
       "title": "Experimental Features",
       "user_picker": "User Picker",
-      "virtual_scroll": "Virtual Scrolling"
+      "virtual_scroll": "Virtual Scrolling",
+      "wellbeing": "Wellbeing"
     },
     "profile": {
       "appearance": {
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 3c6866ab..4e76edcb 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -21,6 +21,34 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
+      @click="togglePreferences('hideAccountHoverCard')"
+    >
+      {{ $t('settings.preferences.hide_account_hover_card') }}
+    </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enableAutoplay')"
+      @click="togglePreferences('enableAutoplay')"
+    >
+      {{ $t('settings.preferences.enable_autoplay') }}
+    </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
+      @click="togglePreferences('enablePinchToZoom')"
+    >
+      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
+    </SettingsToggleItem>
+    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+      <div i-ri-hearts-line />
+      {{ $t('settings.preferences.wellbeing') }}
+    </h2>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'grayscaleMode')"
+      @click="togglePreferences('grayscaleMode')"
+    >
+      {{ $t('settings.preferences.grayscale_mode') }}
+    </SettingsToggleItem>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'hideBoostCount')"
       @click="togglePreferences('hideBoostCount')"
@@ -45,30 +73,6 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.hide_follower_count') }}
     </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
-      @click="togglePreferences('hideAccountHoverCard')"
-    >
-      {{ $t('settings.preferences.hide_account_hover_card') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'grayscaleMode')"
-      @click="togglePreferences('grayscaleMode')"
-    >
-      {{ $t('settings.preferences.grayscale_mode') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enableAutoplay')"
-      @click="togglePreferences('enableAutoplay')"
-    >
-      {{ $t('settings.preferences.enable_autoplay') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
-      @click="togglePreferences('enablePinchToZoom')"
-    >
-      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
-    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}