diff --git a/src/constants/index.ts b/src/constants/index.ts
index a07de631..0ce391a9 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -151,12 +151,6 @@ export enum TAILWINDCSS_SIZE {
   LG = 'lg',
 }
 
-export enum MODE_OPTIONS {
-  Global = 'global',
-  Rule = 'rule',
-  Direct = 'direct',
-}
-
 export enum LOG_LEVEL {
   Info = 'info',
   Error = 'error',
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 27c2b05a..ca290e5d 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -21,7 +21,7 @@ import {
   upgradingUI,
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
-import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { LANG, ROUTES, themes } from '~/constants'
 import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
@@ -179,6 +179,10 @@ const ConfigForm = () => {
     }
   })
 
+  const modes = () => {
+    return configsData()?.modes || ["rule", "direct", "global"]
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <select
@@ -188,9 +192,11 @@ const ConfigForm = () => {
           void updateBackendConfigAPI('mode', e.target.value, refetch)
         }
       >
-        <option value={MODE_OPTIONS.Global}>{t('global')}</option>
-        <option value={MODE_OPTIONS.Rule}>{t('rule')}</option>
-        <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
+        <For echo={modes()}>
+          {(name) => (
+            <option value={name}>{t(name) ?? name}</option>
+          )}
+        </For>
       </select>
 
       <Show when={!isSingBox()}>
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 32421f0a..965f4d9d 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -117,7 +117,8 @@ export type Log = {
 export type LogWithSeq = Log & { seq: number }
 
 export type Config = {
-  mode: 'global' | 'rule' | 'direct'
+  mode: string
+  modes?: string[]
   port: number
   'socks-port': number
   'redir-port': number