diff --git a/src/App.vue b/src/App.vue
index 1b7c49697..d64512c74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { dateZhCN, zhCN } from 'naive-ui';
+import { dateZhCN, useThemeVars, zhCN } from 'naive-ui';
 import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';
diff --git a/src/plugins/fast-crud/common.scss b/src/plugins/fast-crud/common.scss
new file mode 100644
index 000000000..1fc959c0d
--- /dev/null
+++ b/src/plugins/fast-crud/common.scss
@@ -0,0 +1,11 @@
+html:root {
+	--baseColor: #fff;
+}
+/* 深色模式 */
+html.dark:root {
+	--baseColor: #000;
+}
+
+.fs-container {
+	background-color: var(--baseColor);
+}
diff --git a/src/plugins/fast-crud/index.tsx b/src/plugins/fast-crud/index.tsx
index d07dadb7e..8e3bcfffd 100644
--- a/src/plugins/fast-crud/index.tsx
+++ b/src/plugins/fast-crud/index.tsx
@@ -3,6 +3,7 @@ import type { FsSetupOptions, PageQuery } from '@fast-crud/fast-crud';
 // eslint-disable-next-line import/order
 import { FastCrud } from '@fast-crud/fast-crud';
 import '@fast-crud/fast-crud/dist/style.css';
+import './common.scss';
 
 import {
   FsExtendsCopyable,
diff --git a/src/router/modules/crud.ts b/src/router/modules/crud.ts
index 2d33521bf..549664795 100644
--- a/src/router/modules/crud.ts
+++ b/src/router/modules/crud.ts
@@ -21,7 +21,7 @@ const component: any = {
     },
     {
       name: 'crud_header_group',
-      path: '/crud/header-group',
+      path: '/crud/header_group',
       component: 'self',
       meta: {
         title: '多级表头',
diff --git a/src/typings/page-route.d.ts b/src/typings/page-route.d.ts
index bf71cffa0..c4136d751 100644
--- a/src/typings/page-route.d.ts
+++ b/src/typings/page-route.d.ts
@@ -33,7 +33,7 @@ declare namespace PageRoute {
     | 'crud'
     | 'crud_demo'
     | 'crud_doc'
-    | 'crud_header-group'
+    | 'crud_header_group'
     | 'crud_source'
     | 'dashboard'
     | 'dashboard_analysis'
@@ -96,7 +96,7 @@ declare namespace PageRoute {
     | 'component_table'
     | 'crud_demo'
     | 'crud_doc'
-    | 'crud_header-group'
+    | 'crud_header_group'
     | 'crud_source'
     | 'dashboard_analysis'
     | 'dashboard_workbench'
diff --git a/src/views/crud/header-group/api.ts b/src/views/crud/header_group/api.ts
similarity index 100%
rename from src/views/crud/header-group/api.ts
rename to src/views/crud/header_group/api.ts
diff --git a/src/views/crud/header-group/crud.tsx b/src/views/crud/header_group/crud.tsx
similarity index 98%
rename from src/views/crud/header-group/crud.tsx
rename to src/views/crud/header_group/crud.tsx
index 67248998f..e2afaf4a9 100644
--- a/src/views/crud/header-group/crud.tsx
+++ b/src/views/crud/header_group/crud.tsx
@@ -23,7 +23,7 @@ export default function createCrudOptions(): CreateCrudOptionsRet {
   return {
     crudOptions: {
       container: {
-        is: 'fs-layout-card'
+        // is: 'fs-layout-card'
       },
       request: {
         pageRequest,
diff --git a/src/views/crud/header-group/index.vue b/src/views/crud/header_group/index.vue
similarity index 84%
rename from src/views/crud/header-group/index.vue
rename to src/views/crud/header_group/index.vue
index 20eb56841..b7c433d3e 100644
--- a/src/views/crud/header-group/index.vue
+++ b/src/views/crud/header_group/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full">
+  <div class="h-full fs-page-header-group">
     <fs-crud ref="crudRef" v-bind="crudBinding" />
   </div>
 </template>
@@ -26,3 +26,8 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="scss">
+.fs-page-header-group {
+
+}
+</style>
diff --git a/src/views/index.ts b/src/views/index.ts
index 3e9fd9f62..69a6bdcf8 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -18,7 +18,7 @@ export const views: Record<
   component_table: () => import('./component/table/index.vue'),
   crud_demo: () => import('./crud/demo/index.vue'),
   crud_doc: () => import('./crud/doc/index.vue'),
-  'crud_header-group': () => import('./crud/header-group/index.vue'),
+  crud_header_group: () => import('./crud/header_group/index.vue'),
   crud_source: () => import('./crud/source/index.vue'),
   dashboard_analysis: () => import('./dashboard/analysis/index.vue'),
   dashboard_workbench: () => import('./dashboard/workbench/index.vue'),