diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 86649723..70b20e32 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -12,8 +12,8 @@ function setColorMode(mode: ColorMode) {
   <div flex="~ gap4" w-full>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :tabindex="colorMode.value === 'dark' ? 0 : -1"
-      :class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :tabindex="colorMode.preference === 'dark' ? 0 : -1"
+      :class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('dark')"
     >
       <div i-ri:moon-line />
@@ -21,12 +21,21 @@ function setColorMode(mode: ColorMode) {
     </button>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :tabindex="colorMode.value === 'light' ? 0 : -1"
-      :class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :tabindex="colorMode.preference === 'light' ? 0 : -1"
+      :class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('light')"
     >
       <div i-ri:sun-line />
       {{ $t('settings.interface.light_mode') }}
     </button>
+    <button
+      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :tabindex="colorMode.preference === 'system' ? 0 : -1"
+      :class="colorMode.preference === 'system' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('system')"
+    >
+      <div i-ri:computer-line />
+      {{ $t('settings.interface.system_mode') }}
+    </button>
   </div>
 </template>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 951be211..6a90c65d 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
 
 export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ColorMode = 'light' | 'dark'
+export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface FeatureFlags {
   experimentalVirtualScroller: boolean
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 7484b973..5ee578fd 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -202,7 +202,8 @@
       "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
-      "light_mode": "Light Mode"
+      "light_mode": "Light Mode",
+      "system_mode": "System"
     },
     "language": {
       "display_language": "Display Language",
diff --git a/locales/en-US.json b/locales/en-US.json
index 1dc8d113..942f46dd 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -267,7 +267,8 @@
         "sm": "Small",
         "xl": "Extra large",
         "xs": "Extra small"
-      }
+      },
+      "system_mode": "System"
     },
     "language": {
       "display_language": "Display Language",