diff --git a/web-app/src/app/layout/basic/basic.component.ts b/web-app/src/app/layout/basic/basic.component.ts
index 897a0d2d213..fe1e5498a4c 100644
--- a/web-app/src/app/layout/basic/basic.component.ts
+++ b/web-app/src/app/layout/basic/basic.component.ts
@@ -88,13 +88,6 @@ import { CONSTANTS } from '../../shared/constants';
       </div>
     </global-footer>
     <setting-drawer *ngIf="showSettingDrawer"></setting-drawer>
-    <theme-btn
-      [types]="[
-        { key: 'default', text: 'app.theme.default' | i18n },
-        { key: 'dark', text: 'app.theme.dark' | i18n },
-        { key: 'compact', text: 'app.theme.compact' | i18n }
-      ]"
-    ></theme-btn>
   `
 })
 export class LayoutBasicComponent {
diff --git a/web-app/src/app/pojo/SystemConfig.ts b/web-app/src/app/pojo/SystemConfig.ts
index dc27a7ef441..ac9bbf0df76 100644
--- a/web-app/src/app/pojo/SystemConfig.ts
+++ b/web-app/src/app/pojo/SystemConfig.ts
@@ -1,4 +1,5 @@
 export class SystemConfig {
   timeZoneId!: string;
   locale!: string;
+  theme!: string;
 }
diff --git a/web-app/src/app/routes/setting/settings/settings.component.less b/web-app/src/app/routes/setting/settings/settings.component.less
index be10ab1a011..bcfd722978e 100644
--- a/web-app/src/app/routes/setting/settings/settings.component.less
+++ b/web-app/src/app/routes/setting/settings/settings.component.less
@@ -10,7 +10,6 @@
       padding-top: 16px;
       padding-bottom: 16px;
       overflow: auto;
-      background-color: #fff;
     }
 
     .menu {
diff --git a/web-app/src/app/routes/setting/settings/system-config/system-config.component.html b/web-app/src/app/routes/setting/settings/system-config/system-config.component.html
index 733ffd8bc8d..2e71b3479d1 100644
--- a/web-app/src/app/routes/setting/settings/system-config/system-config.component.html
+++ b/web-app/src/app/routes/setting/settings/system-config/system-config.component.html
@@ -49,6 +49,18 @@
             <nz-option [nzValue]="'Pacific/Kiritimati'" [nzLabel]="'Pacific/Kiritimati(UTC+14:00)'"></nz-option>
           </nz-select>
         </se>
+        <se [label]="'settings.system-config.theme' | i18n" [error]="'validation.required' | i18n">
+          <nz-select
+            [(ngModel)]="config.theme"
+            [ngModelOptions]="{ standalone: true }"
+            style="text-align: center; font-weight: bolder"
+            [nzDropdownStyle]="{ 'font-weight': 'bolder', 'font-size': 'larger' }"
+          >
+            <nz-option [nzValue]="'default'" [nzLabel]="'settings.system-config.theme.default' | i18n"></nz-option>
+            <nz-option [nzValue]="'dark'" [nzLabel]="'settings.system-config.theme.dark' | i18n"></nz-option>
+            <nz-option [nzValue]="'compact'" [nzLabel]="'settings.system-config.theme.compact' | i18n"></nz-option>
+          </nz-select>
+        </se>
         <se>
           <button nz-button nzType="primary" [disabled]="f.invalid">{{ 'settings.system-config.ok' | i18n }}</button>
         </se>
diff --git a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts
index de920befb7e..f6a25c49c28 100644
--- a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts
+++ b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts
@@ -37,6 +37,7 @@ export class SystemConfigComponent implements OnInit {
         if (message.code === 0) {
           if (message.data) {
             this.config = message.data;
+            this.changeTheme(this.config.theme); // 刷新后更新主题
           } else {
             this.config = new SystemConfig();
           }
@@ -83,4 +84,22 @@ export class SystemConfigComponent implements OnInit {
         }
       );
   }
+  changeTheme(theme: string): void {
+    const style = this.doc.createElement('link');
+    style.type = 'text/css';
+    style.rel = 'stylesheet';
+    if (theme == 'dark') {
+      style.id = 'dark-theme';
+      style.href = 'assets/style.dark.css';
+    } else if (theme == 'compact') {
+      style.id = 'compact-theme';
+      style.href = 'assets/style.compact.css';
+    } else {
+      const dom = document.getElementById('dark-theme');
+      if (dom) {
+        dom.remove();
+      }
+    }
+    this.doc.body.append(style);
+  }
 }
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index 7129e142170..4e25b9794a8 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -528,6 +528,10 @@
   "settings.system-config.locale.zh_TW": "Traditional Chinese(zh_TW)",
   "settings.system-config.locale.en_US": "English(en_US)",
   "settings.system-config.timezone": "System Time Zone",
+  "settings.system-config.theme": "System Theme",
+  "settings.system-config.theme.default": "Default Theme",
+  "settings.system-config.theme.dark": "Dark Theme",
+  "settings.system-config.theme.compact": "Compact Theme",
   "settings.system-config.ok": "Confirm Update",
   "settings.object-store": "File Server Configuration",
   "settings.object-store.type": "File Server Provider",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 7e3043a2ff6..73e12080544 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -527,6 +527,10 @@
   "settings.system-config.locale.zh_TW": "繁体中文(zh_TW)",
   "settings.system-config.locale.en_US": "英语(en_US)",
   "settings.system-config.timezone": "系统时区",
+  "settings.system-config.theme": "系统主题",
+  "settings.system-config.theme.default": "浅色主题",
+  "settings.system-config.theme.dark": "深色主题",
+  "settings.system-config.theme.compact": "紧凑主题",
   "settings.system-config.ok": "确认更新",
   "settings.object-store": "文件服务配置",
   "settings.object-store.type": "文件服务提供商",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index d9e8835e891..4244df73c63 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -526,6 +526,10 @@
   "settings.system-config.locale.zh_TW": "繁體中文(zh_TW)",
   "settings.system-config.locale.en_US": "英語(en_US)",
   "settings.system-config.timezone": "系統時區",
+  "settings.system-config.theme": "系統主題",
+  "settings.system-config.theme.default": "淺色主題",
+  "settings.system-config.theme.dark": "深色主題",
+  "settings.system-config.theme.compact": "緊湊主題",
   "settings.system-config.ok": "確認更新",
   "settings.object-store": "文件服務配置",
   "settings.object-store.type": "文件服務提供商",