diff --git a/index.html b/index.html
index 24e2ca0..9cb869f 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="zh-cmn-Hans">
+<html>
 <head>
 	<meta charset="UTF-8">
 	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
 	<meta content="yes" name="apple-mobile-web-app-capable"/>
 	<link rel="apple-touch-icon" href="/favicon.ico">
+	<link rel="stylesheet"  href="./static/global.css">
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
 	<title>Sun-Panel</title>
diff --git a/public/static/global.css b/public/static/global.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/apps/ItemGroupManage/index.vue b/src/components/apps/ItemGroupManage/index.vue
index f50d1f2..24e586a 100644
--- a/src/components/apps/ItemGroupManage/index.vue
+++ b/src/components/apps/ItemGroupManage/index.vue
@@ -139,7 +139,7 @@ onMounted(() => {
       </NButton>
     </div>
 
-    <div class=" overflow-auto w-full mt-[20px]  bg-slate-200 rounded-xl" style="height:calc(100% - 65px)">
+    <div class=" overflow-auto w-full mt-[20px]  bg-slate-200 dark:bg-zinc-900 rounded-xl" style="height:calc(100% - 65px)">
       <VueDraggable
         v-model="groups"
         item-key="sort" :animation="300"
diff --git a/src/components/apps/Style/index.vue b/src/components/apps/Style/index.vue
index bffbe06..96c0fff 100644
--- a/src/components/apps/Style/index.vue
+++ b/src/components/apps/Style/index.vue
@@ -76,7 +76,7 @@ function resetPanelConfig() {
 </script>
 
 <template>
-  <div class="bg-slate-200 rounded-[10px] p-[8px] overflow-auto">
+  <div class="bg-slate-200 dark:bg-zinc-900 rounded-[10px] p-[8px] overflow-auto">
     <NCard style="border-radius:10px" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
         LOGO
diff --git a/src/components/apps/UploadFileManager/index.vue b/src/components/apps/UploadFileManager/index.vue
index c0557c2..62a2794 100644
--- a/src/components/apps/UploadFileManager/index.vue
+++ b/src/components/apps/UploadFileManager/index.vue
@@ -84,7 +84,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-slate-200 p-2 h-full">
+  <div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
     <NSpin v-show="loading" size="small" />
     <NAlert type="info" :bordered="false">
       {{ $t('apps.uploadsFileManager.alertText') }}
diff --git a/src/components/apps/UserInfo/index.vue b/src/components/apps/UserInfo/index.vue
index e20d78f..94ce97a 100644
--- a/src/components/apps/UserInfo/index.vue
+++ b/src/components/apps/UserInfo/index.vue
@@ -4,7 +4,7 @@ import { NButton, NCard, NDivider, NForm, NFormItem, NInput, NSelect, useDialog,
 import { ref } from 'vue'
 import { useAppStore, useAuthStore, usePanelState, useUserStore } from '@/store'
 import { languageOptions } from '@/utils/defaultData'
-import type { Language } from '@/store/modules/app/helper'
+import type { Language, Theme } from '@/store/modules/app/helper'
 import { logout } from '@/api'
 import { RoundCardModal, SvgIcon } from '@/components/common/'
 import { updateInfo, updatePassword } from '@/api/system/user'
@@ -19,15 +19,15 @@ const ms = useMessage()
 const dialog = useDialog()
 
 const languageValue = ref(appStore.language)
-// const themeValue = ref(appStore.theme)
+const themeValue = ref(appStore.theme)
 const nickName = ref(authStore.userInfo?.name || '')
 const isEditNickNameStatus = ref(false)
 const formRef = ref<FormInst | null>(null)
-// const themeOptions: { label: string; key: string; value: Theme }[] = [
-//   { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
-//   { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
-//   { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
-// ]
+const themeOptions: { label: string; key: string; value: Theme }[] = [
+  { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
+  { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
+  { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
+]
 const updatePasswordModalState = ref({
   show: false,
   loading: false,
@@ -138,15 +138,15 @@ function handleChangeLanuage(value: Language) {
   location.reload()
 }
 
-// function handleChangeTheme(value: Theme) {
-//   themeValue.value = value
-//   appStore.setTheme(value)
-//   // location.reload()
-// }
+function handleChangeTheme(value: Theme) {
+  themeValue.value = value
+  appStore.setTheme(value)
+  // location.reload()
+}
 </script>
 
 <template>
-  <div class="bg-slate-200 p-2 h-full">
+  <div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
     <NCard style="border-radius:10px" size="small">
       <div>
         <div class="text-slate-500 font-bold">
@@ -187,14 +187,14 @@ function handleChangeLanuage(value: Language) {
         </div>
       </div>
 
-      <!-- <div class="mt-[10px]">
+      <div class="mt-[10px]">
         <div class="text-slate-500 font-bold">
           {{ $t('apps.userInfo.theme') }}
         </div>
         <div class="max-w-[200px]">
           <NSelect v-model:value="themeValue" :options="themeOptions" @update-value="handleChangeTheme" />
         </div>
-      </div> -->
+      </div>
 
       <NDivider style="margin: 10px 0;" dashed />
       <div>
diff --git a/src/views/home/components/AppStarter/index.vue b/src/views/home/components/AppStarter/index.vue
index 77a6a94..741a1c4 100644
--- a/src/views/home/components/AppStarter/index.vue
+++ b/src/views/home/components/AppStarter/index.vue
@@ -11,7 +11,6 @@ interface App {
   icon: string
   auth?: number
 }
-
 const props = defineProps<{
   visible: boolean
 }>()
@@ -129,9 +128,9 @@ onUnmounted(() => {
           </div>
         </div>
       </template>
-      <div class="w-full h-full">
+      <div class="w-full h-full app-starter-modal-content">
         <NSpace vertical size="large" style="height: 100%;width: 100%;">
-          <NLayout has-sider>
+          <NLayout has-sider style="border-radius:0.75rem;">
             <NLayoutSider
               v-model:collapsed="collapsed"
               collapse-mode="width"
@@ -140,39 +139,41 @@ onUnmounted(() => {
               style="height: 100%;"
               content-style="overflow: hidden"
             >
-              <div
-                class="p-[5px] bg-slate-200 rounded-xl overflow-auto"
-                :style="{
-                  width: isSmallScreen ? '100%' : '220px',
-                  minWidth: '200px',
-                  height,
-                }"
-              >
+              <div class="w-full h-full dark:bg-[#2c2c32]">
                 <div
-                  v-for=" (item, index) in apps"
-                  :key="index"
-                  :style="{ color: componentName === item.componentName ? 'var(--n-color-target)' : '' }"
-                  @click="handleClickApp(item)"
+                  class="p-[5px] bg-slate-200 dark:bg-zinc-900 rounded-xl overflow-auto"
+                  :style="{
+                    width: isSmallScreen ? '100%' : '220px',
+                    minWidth: '200px',
+                    height,
+                  }"
                 >
                   <div
-                    class="bg-white p-[10px] rounded-lg mb-[5px] font-bold cursor-pointer flex items-center"
+                    v-for=" (item, index) in apps"
+                    :key="index"
+                    :style="{ color: componentName === item.componentName ? 'var(--n-color-target)' : '' }"
+                    @click="handleClickApp(item)"
                   >
-                    <div class="flex items-center justify-center">
-                      <div class="text-lg">
-                        <SvgIcon :icon="item.icon" />
+                    <div
+                      class="bg-white dark:bg-zinc-800 p-[10px] rounded-lg mb-[5px] font-bold cursor-pointer flex items-center"
+                    >
+                      <div class="flex items-center justify-center">
+                        <div class="text-lg">
+                          <SvgIcon :icon="item.icon" />
+                        </div>
+                        <span class="ml-2">{{ item.name }}</span>
                       </div>
-                      <span class="ml-2">{{ item.name }}</span>
-                    </div>
                     <!-- 更多按钮 -->
                     <!-- <div class="ml-auto">
                       <SvgIcon icon="mingcute-more-1-fill" />
                     </div> -->
+                    </div>
                   </div>
                 </div>
               </div>
             </NLayoutSider>
             <NLayoutContent :content-style="{ height }">
-              <div class="rounded-lg h-full overflow-auto transition-all duration-500 min-w-[300px] h-full" :class="(isSmallScreen && !collapsed) ? 'opacity-0' : 'opacity-100'">
+              <div class="rounded-2xl h-full overflow-auto transition-all duration-500 min-w-[300px] h-full" :class="(isSmallScreen && !collapsed) ? 'opacity-0' : 'opacity-100'">
                 <AppLoader :component-name="componentName" class="h-full" />
               </div>
             </NLayoutContent>
@@ -188,3 +189,9 @@ onUnmounted(() => {
   text-shadow: 0px 0px 5px gray;
 }
 </style>
+
+<style>
+.dark .app-starter-modal-content .n-layout{
+    background-color: #2c2c32;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a945d36..8fafd21 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -43,7 +43,7 @@ const dropdownShow = ref(false)
 const currentRightSelectItem = ref<Panel.ItemInfo | null>(null)
 const currentAddItenIconGroupId = ref<number | undefined>()
 
-const settingModalShow = ref(false)
+const settingModalShow = ref(true)
 
 const items = ref<ItemGroup[]>([])
 const filterItems = ref<ItemGroup[]>([])
