diff --git a/src/apis/index.ts b/src/apis/index.ts
index 3157ba8..22ac48e 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -28,6 +28,7 @@ export const [updatingGEODatabases, setUpdatingGEODatabases] =
   createSignal(false)
 export const [flushingFakeIPData, setFlushingFakeIPData] = createSignal(false)
 export const [upgradingBackend, setUpgradingBackend] = createSignal(false)
+export const [upgradingUI, setUpgradingUI] = createSignal(false)
 export const [restartingBackend, setRestartingBackend] = createSignal(false)
 
 export const reloadConfigFileAPI = async () => {
@@ -77,6 +78,17 @@ export const upgradeBackendAPI = async () => {
   setUpgradingBackend(false)
 }
 
+export const upgradeUIAPI = async () => {
+  const request = useRequest()
+  setUpgradingUI(true)
+  try {
+    await request.post('upgrade/ui')
+  } catch {
+    /* empty */
+  }
+  setUpgradingUI(false)
+}
+
 export const restartBackendAPI = async () => {
   const request = useRequest()
   setRestartingBackend(true)
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 4289380..3b2396b 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -58,6 +58,7 @@ export default {
   updateGEODatabases: 'Update GEO Databases',
   restartCore: 'Restart Core',
   upgradeCore: 'Upgrade Core',
+  upgradeUI: 'Upgrade Dashboard',
   proxiesSorting: 'Proxies Sorting',
   orderNatural: 'Original order in config file',
   orderLatency_asc: 'By latency from low to high',
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index 6e43546..b3473ab 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -60,6 +60,7 @@ export default {
   updateGEODatabases: '更新 GEO 数据库',
   restartCore: '重启核心',
   upgradeCore: '更新核心',
+  upgradeUI: '更新控制面板',
   proxiesSorting: '节点排序',
   orderNatural: '原配置文件中的排序',
   orderLatency_asc: '按延迟从低到高',
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 058018b..b4aa989 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -18,6 +18,8 @@ import {
   updatingGEODatabases,
   upgradeBackendAPI,
   upgradingBackend,
+  upgradeUIAPI,
+  upgradingUI,
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
 import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
@@ -114,6 +116,16 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
   const navigate = useNavigate()
 
   const portList = [
+    {
+      label: () => t('port', { name: 'Mixed' }),
+      key: 'mixed-port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI(
+          'mixed-port',
+          Number(e.target.value),
+          refetch,
+        ),
+    },
     {
       label: () => t('port', { name: 'HTTP' }),
       key: 'port',
@@ -150,16 +162,6 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
           refetch,
         ),
     },
-    {
-      label: () => t('port', { name: 'Mixed' }),
-      key: 'mixed-port',
-      onChange: (e: Event & { target: HTMLInputElement }) =>
-        void updateBackendConfigAPI(
-          'mixed-port',
-          Number(e.target.value),
-          refetch,
-        ),
-    },
   ]
 
   const { form, setInitialValues, reset } = createForm<
@@ -327,14 +329,6 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
           {t('reloadConfig')}
         </Button>
 
-        <Button
-          class="btn-secondary"
-          loading={updatingGEODatabases()}
-          onClick={updateGEODatabasesAPI}
-        >
-          {t('updateGEODatabases')}
-        </Button>
-
         <Button
           class="btn-accent"
           loading={flushingFakeIPData()}
@@ -343,16 +337,6 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
           {t('flushFakeIP')}
         </Button>
 
-        <Show when={!isSingBox(backendVersion())}>
-          <Button
-            class="btn-error"
-            loading={upgradingBackend()}
-            onClick={upgradeBackendAPI}
-          >
-            {t('upgradeCore')}
-          </Button>
-        </Show>
-
         <Button
           class="btn-warning"
           loading={restartingBackend()}
@@ -361,15 +345,31 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
           {t('restartCore')}
         </Button>
 
-        <Button
-          class="btn-info"
-          onClick={() => {
-            setSelectedEndpoint('')
-            navigate(ROUTES.Setup)
-          }}
-        >
-          {t('switchEndpoint')}
-        </Button>
+        <Show when={!isSingBox(backendVersion())}>
+          <Button
+            class="btn-secondary"
+            loading={updatingGEODatabases()}
+            onClick={updateGEODatabasesAPI}
+          >
+            {t('updateGEODatabases')}
+          </Button>
+
+          <Button
+            class="btn-info"
+            loading={upgradingUI()}
+            onClick={upgradeUIAPI}
+          >
+            {t('upgradeUI')}
+          </Button>
+
+          <Button
+            class="btn-error"
+            loading={upgradingBackend()}
+            onClick={upgradeBackendAPI}
+          >
+            {t('upgradeCore')}
+          </Button>
+        </Show>
       </div>
     </div>
   )
@@ -377,7 +377,7 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
 
 const ConfigForXd = () => {
   const [t] = useI18n()
-
+  const navigate = useNavigate()
   const languages = [
     {
       label: () => t('en'),
@@ -419,6 +419,19 @@ const ConfigForXd = () => {
             </For>
           </select>
         </div>
+
+        <div class="flex flex-col">
+          <div class="py-2 text-center text-lg font-semibold">&nbsp;</div>
+          <Button
+            class="btn-info"
+            onClick={() => {
+              setSelectedEndpoint('')
+              navigate(ROUTES.Setup)
+            }}
+          >
+            {t('switchEndpoint')}
+          </Button>
+        </div>
       </div>
 
       <div class="flex flex-col gap-2">