diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
index 0a9e37ff..f5bcebf4 100644
--- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -21,6 +21,10 @@ function handleSegmentChange(value: string | number) {
   themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
 }
 
+function handleGrayscaleChange(value: boolean) {
+  themeStore.setGrayscale(value);
+}
+
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>
 
@@ -46,8 +50,8 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
         <NSwitch v-model:value="themeStore.sider.inverted" />
       </SettingItem>
     </Transition>
-    <SettingItem :label="$t('theme.themeSchema.grayscale')">
-      <NSwitch v-model:value="themeStore.grayscale" />
+    <SettingItem :label="$t('theme.grayscale')">
+      <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
     </SettingItem>
   </div>
 </template>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index c25125f3..fcd534bb 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -55,9 +55,9 @@ const local: App.I18n.Schema = {
       title: 'Theme Schema',
       light: 'Light',
       dark: 'Dark',
-      auto: 'Follow System',
-      grayscale: 'Grayscale'
+      auto: 'Follow System'
     },
+    grayscale: 'Grayscale',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 7b2b219b..5536fe69 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -55,9 +55,9 @@ const local: App.I18n.Schema = {
       title: '主题模式',
       light: '亮色模式',
       dark: '暗黑模式',
-      auto: '跟随系统',
-      grayscale: '灰度模式'
+      auto: '跟随系统'
     },
+    grayscale: '灰度模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 1fde468d..7049b4aa 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -71,6 +71,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.themeScheme = themeScheme;
   }
 
+  /**
+   * Set grayscale value
+   *
+   * @param isGrayscale
+   */
+  function setGrayscale(isGrayscale: boolean) {
+    settings.value.grayscale = isGrayscale;
+  }
+
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -154,7 +163,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       themeColors,
       val => {
         setupThemeVarsToHtml();
-
         localStg.set('themeColor', val.primary);
       },
       { immediate: true }
@@ -172,6 +180,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     themeColors,
     naiveTheme,
     settingsJson,
+    setGrayscale,
     resetStore,
     setThemeScheme,
     toggleThemeScheme,
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index e4a9df77..48baaccc 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -299,7 +299,8 @@ declare namespace App {
         tokenExpired: string;
       };
       theme: {
-        themeSchema: { title: string } & Record<UnionKey.ThemeScheme | UnionKey.Grayscale, string>;
+        themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
+        grayscale: string;
         layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
         themeColor: {
           title: string;