diff --git a/package.json b/package.json
index 99d3d42..2a7c00c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,12 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.60.3",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.34.0",
+    "@vue-flow/minimap": "^1.4.1",
+    "@vue-flow/node-resizer": "^1.3.6",
+    "@vue-flow/node-toolbar": "^1.1.0",
     "@vueuse/core": "^10.9.0",
     "colord": "^2.9.3",
     "dayjs": "^1.11.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fed4b17..14f935f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,24 @@ importers:
       '@unocss/reset':
         specifier: ^0.60.3
         version: 0.60.3
+      '@vue-flow/background':
+        specifier: ^1.3.0
+        version: 1.3.0(@vue-flow/core@1.34.0)(vue@3.4.27)
+      '@vue-flow/controls':
+        specifier: ^1.1.2
+        version: 1.1.2(@vue-flow/core@1.34.0)(vue@3.4.27)
+      '@vue-flow/core':
+        specifier: ^1.34.0
+        version: 1.34.0(vue@3.4.27)
+      '@vue-flow/minimap':
+        specifier: ^1.4.1
+        version: 1.4.1(@vue-flow/core@1.34.0)(vue@3.4.27)
+      '@vue-flow/node-resizer':
+        specifier: ^1.3.6
+        version: 1.3.6(@vue-flow/core@1.34.0)(vue@3.4.27)
+      '@vue-flow/node-toolbar':
+        specifier: ^1.1.0
+        version: 1.1.0(@vue-flow/core@1.34.0)
       '@vueuse/core':
         specifier: ^10.9.0
         version: 10.9.0(vue@3.4.27)
@@ -1688,6 +1706,72 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
+  /@vue-flow/background@1.3.0(@vue-flow/core@1.34.0)(vue@3.4.27):
+    resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.34.0(vue@3.4.27)
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@vue-flow/controls@1.1.2(@vue-flow/core@1.34.0)(vue@3.4.27):
+    resolution: {integrity: sha512-6dtl/JnwDBNau5h3pDBdOCK6tdxiVAOL3cyruRL61gItwq5E97Hmjmj2BIIqX2p7gU1ENg3z80Z4zlu58fGlsg==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.34.0(vue@3.4.27)
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@vue-flow/core@1.34.0(vue@3.4.27):
+    resolution: {integrity: sha512-g00ZxAMmIziFG16FeuE9WEsELNlABzFvv835tXJwCM1b5HAjbzh/d8iFtl6OkuCGfBeTgpo/PrqzU7nmLQpY2w==}
+    peerDependencies:
+      vue: ^3.3.0
+    dependencies:
+      '@vueuse/core': 10.9.0(vue@3.4.27)
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.27(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
+  /@vue-flow/minimap@1.4.1(@vue-flow/core@1.34.0)(vue@3.4.27):
+    resolution: {integrity: sha512-EkBNDKc65ccNpv6sgpCPo4woIZ8yUGUbmZuGwg2Aur6sC3DXlMetGbFeOxlKKDKTlidUJmaG/hLVl3zNILUgYg==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.34.0(vue@3.4.27)
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@vue-flow/node-resizer@1.3.6(@vue-flow/core@1.34.0)(vue@3.4.27):
+    resolution: {integrity: sha512-xiq8wtuOYW+NqF+DVRvBXeUPwBS/RCBgBSv5N4Ahf1DlbePgXBYdFCJeyApj3uSiTI+JkBx7pl82ojnbeefOBg==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.34.0(vue@3.4.27)
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@vue-flow/node-toolbar@1.1.0(@vue-flow/core@1.34.0):
+    resolution: {integrity: sha512-6RVDHgY+x8m1cXPaEkqPa/RMR90AC1hPHYBK/QVh8k6lJnFPgwJ9PSiYoC4amsUiDK0mF0Py+PlztLJY1ty+4A==}
+    peerDependencies:
+      '@vue-flow/core': ^1.12.2
+    dependencies:
+      '@vue-flow/core': 1.34.0(vue@3.4.27)
+    dev: false
+
   /@vue-macros/common@1.10.3(vue@3.4.27):
     resolution: {integrity: sha512-YSgzcbXrRo8a/TF/YIguqEmTld1KA60VETKJG8iFuaAfj7j+Tbdin3cj7/cYbcCHORSq1v9IThgq7r8keH7LXQ==}
     engines: {node: '>=16.14.0'}
@@ -2222,6 +2306,71 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
   /date-fns-tz@2.0.1(date-fns@2.30.0):
     resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
     peerDependencies:
diff --git a/src/components/card/YCard.vue b/src/components/card/YCard.vue
index 5576e18..0c21594 100644
--- a/src/components/card/YCard.vue
+++ b/src/components/card/YCard.vue
@@ -48,14 +48,11 @@ function handleFullscreen() {
     </template>
 
     <template
-      v-for="(_, key) in slots"
+      v-for="(_, key) in omit(slots, ['header-extra', 'footer'])"
       :key="key"
       #[key]
     >
-      <slot
-        v-if="!['header-extra', 'footeer'].includes(key)"
-        :name="key"
-      />
+      <slot :name="key" />
     </template>
 
     <template #footer>
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
new file mode 100644
index 0000000..6b72c64
--- /dev/null
+++ b/src/layouts/blank.vue
@@ -0,0 +1,3 @@
+<template>
+  <YRouterView />
+</template>
diff --git a/src/layouts/components/header/CollapseButton.vue b/src/layouts/components/header/CollapseButton.vue
new file mode 100644
index 0000000..63c1074
--- /dev/null
+++ b/src/layouts/components/header/CollapseButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import HeaderButton from '../header/HeaderButton.vue'
+
+const { setting } = useThemeSetting()
+const collapsed = computed(() => setting.value.sider.collapsed)
+
+function toggle() {
+  setting.value.sider.collapsed = !collapsed.value
+}
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="collapsed ? 'i-icon-park-outline-expand-left' : 'i-icon-park-outline-expand-right'" />
+    </template>
+    {{ collapsed ? '展开' : '折叠' }}菜单
+  </HeaderButton>
+</template>
diff --git a/src/layouts/components/header/FullscreenButton.vue b/src/layouts/components/header/FullscreenButton.vue
new file mode 100644
index 0000000..a2575f2
--- /dev/null
+++ b/src/layouts/components/header/FullscreenButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HeaderButton from '../header/HeaderButton.vue'
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="isFullscreen ? 'i-icon-park-outline-off-screen' : 'i-icon-park-outline-full-screen'" />
+    </template>
+    全屏切换
+  </HeaderButton>
+</template>
diff --git a/src/layouts/components/header/HeaderButton.vue b/src/layouts/components/header/HeaderButton.vue
new file mode 100644
index 0000000..498cb95
--- /dev/null
+++ b/src/layouts/components/header/HeaderButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+  click: []
+}>()
+
+const { setting } = useThemeSetting()
+const mode = useColorMode()
+const isDark = computed(() => mode.value === 'dark')
+
+function handleClick() {
+  emits('click')
+}
+</script>
+
+<template>
+  <NTooltip>
+    <template #trigger>
+      <div
+        :class="{
+          'hover:bg-#ffffff1f': !isDark && setting?.header.inverted,
+        }"
+        class="h-32px w-32px flex-center cursor-pointer rounded-8px bg-#2e33380d transition-300 dark:bg-#ffffff14 hover:bg-#2e333817 dark:hover:bg-#ffffff1f"
+        @click="handleClick"
+      >
+        <slot name="trigger" />
+      </div>
+    </template>
+    <slot />
+  </NTooltip>
+</template>
diff --git a/src/layouts/components/LayoutMode.vue b/src/layouts/components/header/LayoutMode.vue
similarity index 100%
rename from src/layouts/components/LayoutMode.vue
rename to src/layouts/components/header/LayoutMode.vue
diff --git a/src/layouts/components/LayoutSetting.vue b/src/layouts/components/header/LayoutSetting.vue
similarity index 92%
rename from src/layouts/components/LayoutSetting.vue
rename to src/layouts/components/header/LayoutSetting.vue
index cb641d8..233040c 100644
--- a/src/layouts/components/LayoutSetting.vue
+++ b/src/layouts/components/header/LayoutSetting.vue
@@ -10,13 +10,13 @@ defineProps<{
 const show = defineModel<boolean>('show')
 
 const message = useMessage()
-const mode = useColorMode()
-const isDark = computed(() => mode.value === 'dark')
+const { store } = useColorMode()
+const isDark = computed(() => store.value === 'dark')
 const { setting } = useThemeSetting()
 const { copy } = useClipboard()
 
 async function handleUpdateValue(val: 'light' | 'dark' | 'auto') {
-  mode.value = val
+  store.value = val
   setting.value.themeMode = val
 }
 
@@ -46,7 +46,7 @@ function handleCopySetting() {
         主题模式
       </NDivider>
       <NTabs
-        :value="setting.themeMode"
+        :value="store"
         type="segment"
         class="mb-12px"
         @update:value="handleUpdateValue"
@@ -118,6 +118,9 @@ function handleCopySetting() {
             class="w-140px"
           />
         </NFormItem>
+        <NFormItem label="折叠侧边栏">
+          <NSwitch v-model:value="setting.sider.collapsed" />
+        </NFormItem>
         <NFormItem
           v-if="!isDark"
           label="深色侧边栏"
@@ -151,35 +154,35 @@ function handleCopySetting() {
       </NDivider>
       <NFormItem label="主色">
         <NColorPicker
-          v-model:value="setting.themeColor.primaryColor"
+          v-model:value="setting.lightThemeColor.primaryColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="信息色">
         <NColorPicker
-          v-model:value="setting.themeColor.infoColor"
+          v-model:value="setting.lightThemeColor.infoColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="成功色">
         <NColorPicker
-          v-model:value="setting.themeColor.successColor"
+          v-model:value="setting.lightThemeColor.successColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="警告色">
         <NColorPicker
-          v-model:value="setting.themeColor.warningColor"
+          v-model:value="setting.lightThemeColor.warningColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="错误色">
         <NColorPicker
-          v-model:value="setting.themeColor.errorColor"
+          v-model:value="setting.lightThemeColor.errorColor"
           :show-alpha="false"
           class="w-90px"
         />
diff --git a/src/layouts/components/header/ThemeModeButton.vue b/src/layouts/components/header/ThemeModeButton.vue
new file mode 100644
index 0000000..0d060bb
--- /dev/null
+++ b/src/layouts/components/header/ThemeModeButton.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import HeaderButton from './HeaderButton.vue'
+
+const mode = useColorMode()
+const isDark = computed(() => mode.value === 'dark')
+function toggle() {
+  mode.value = isDark.value ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="isDark ? 'i-icon-park-outline-moon' : 'i-icon-park-outline-sun-one'" />
+    </template>
+    主题切换
+  </HeaderButton>
+</template>
diff --git a/src/layouts/components/header/ThemeSettingButton.vue b/src/layouts/components/header/ThemeSettingButton.vue
new file mode 100644
index 0000000..4cba24d
--- /dev/null
+++ b/src/layouts/components/header/ThemeSettingButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import HeaderButton from './HeaderButton.vue'
+import LayoutSetting from './LayoutSetting.vue'
+
+const [show, toggleShow] = useToggle(false)
+</script>
+
+<template>
+  <HeaderButton @click="toggleShow(true)">
+    <template #trigger>
+      <div class="i-icon-park-outline-platte" />
+    </template>
+    主题配置
+  </HeaderButton>
+
+  <LayoutSetting v-model:show="show" />
+</template>
diff --git a/src/layouts/components/header/UserDropdown.vue b/src/layouts/components/header/UserDropdown.vue
new file mode 100644
index 0000000..5fc1361
--- /dev/null
+++ b/src/layouts/components/header/UserDropdown.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const { setting } = useThemeSetting()
+const mode = useColorMode()
+const isDark = computed(() => mode.value === 'dark')
+
+const options = [
+  {
+    key: 'me',
+    label: '个人中心',
+    icon: () => renderIcon('i-icon-park-outline-user'),
+  },
+  {
+    type: 'divider',
+  },
+  {
+    key: 'logout',
+    label: '退出登录',
+    icon: () => renderIcon('i-icon-park-outline-logout'),
+  },
+
+]
+</script>
+
+<template>
+  <NDropdown
+    :options="options"
+    trigger="click"
+  >
+    <div
+      :class="{
+        'hover:bg-#ffffff1f': !isDark && setting?.header.inverted,
+      }"
+      class="h-42px max-w-150px flex-center cursor-pointer rounded-full bg-#2e33380d px-8px transition-300 dark:bg-#ffffff14 hover:bg-#2e333817 dark:hover:bg-#ffffff1f"
+    >
+      <NAvatar
+        src="https://avatars.githubusercontent.com/u/108928776?s=80&v=4"
+        round
+        class="mr-8px h-28px min-w-28px w-28px bg-transparent"
+      />
+      <NEllipsis>
+        超级管理员
+      </NEllipsis>
+    </div>
+  </NDropdown>
+</template>
diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue
new file mode 100644
index 0000000..49fa772
--- /dev/null
+++ b/src/layouts/components/sider/Logo.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const router = useRouter()
+const { setting } = useThemeSetting()
+
+function goHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div
+    class="flex-center cursor-pointer px-16px"
+    :style="{ height: `${setting.header.height}px` }"
+    @click="goHome"
+  >
+    <img
+      src="/public/vite.svg"
+      class="h-32px"
+    >
+    <div
+      v-if="!setting.sider.collapsed"
+      class="ml-8px text-20px font-700"
+    >
+      a4v
+    </div>
+  </div>
+</template>
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
new file mode 100644
index 0000000..55e80ba
--- /dev/null
+++ b/src/layouts/components/sider/Menu.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const selected = computed(() => route.path)
+
+const options = [
+  {
+    key: '/',
+    label: '首页',
+    icon: () => renderIcon('i-icon-park-outline-home'),
+  },
+  {
+    key: '/about',
+    label: '关于',
+    icon: () => renderIcon('i-icon-park-outline-tag'),
+  },
+]
+
+const { setting } = useThemeSetting()
+
+function handleSelect(key: string) {
+  router.push(key)
+}
+</script>
+
+<template>
+  <NScrollbar>
+    <NMenu
+      :value="selected"
+      :options
+      :collapsed="setting.sider.collapsed"
+      :collapsed-width="setting.sider.collapsedWidth"
+      :collapsed-icon-size="18"
+      :icon-size="18"
+      :indent="23"
+      class="first:[&_.n-menu-item]:mt-0"
+      @update:value="handleSelect"
+    />
+  </NScrollbar>
+</template>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 207f98b..b5a39fc 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import LayoutSetting from './components/LayoutSetting.vue'
+import Logo from './components/sider/Logo.vue'
+import Menu from './components/sider/Menu.vue'
+import CollapseButton from './components/header/CollapseButton.vue'
+import FullscreenButton from './components/header/FullscreenButton.vue'
+import ThemeModeButton from './components/header/ThemeModeButton.vue'
+import ThemeSettingButton from './components/header/ThemeSettingButton.vue'
+import UserDropdown from './components/header/UserDropdown.vue'
 
-const router = useRouter()
 const mode = useColorMode()
 const isDark = computed(() => mode.value === 'dark')
 const { setting } = useThemeSetting()
-
-const showSetting = ref(false)
-
-function go(path: string) {
-  router.push(path)
-}
 </script>
 
 <template>
@@ -21,6 +20,7 @@ function go(path: string) {
     :show-sider="setting.sider.show && setting.layoutMode !== 'horizontal'"
     :sider-width="setting.sider.width"
     :sider-collapsed-width="setting.sider.collapsedWidth"
+    :collapsed="setting.sider.collapsed"
     :header-height="setting.header.height"
     :footer-height="setting.footer.height"
     :header-class="{
@@ -32,34 +32,33 @@ function go(path: string) {
     :footer-class="{
       'bg-#001427 text-#ffffffd1': !isDark && setting?.footer.inverted,
     }"
+    content-class="rounded-tl-12px rounded-bl-12px"
     class="!h-100vh dark:bg-#18181c"
   >
     <template #sider>
-      <div class="wh-full flex-center">
-        <NFlex vertical>
-          <NButton @click="go('/')">
-            首页
-          </NButton>
-          <NButton @click="go('/about')">
-            关于
-          </NButton>
-        </NFlex>
+      <div class="wh-full flex flex-col">
+        <Logo />
+        <Menu />
       </div>
     </template>
 
     <template #header>
       <div class="wh-full flex items-center justify-between">
-        <div>header</div>
-        <NFlex class="mr-24px">
-          <div
-            :class="{
-              'hover:bg-#ffffff17': !isDark && setting?.header.inverted,
-            }"
-            class="h-40px w-40px flex-center cursor-pointer rounded-3px transition-300 hover:bg-#f3f3f5 dark:hover:bg-#ffffff17"
-            @click="showSetting = true"
-          >
-            <div class="i-icon-park-outline-platte text-16px" />
-          </div>
+        <NFlex
+          align="center"
+          :class="setting.sider.inverted ? 'ml-24px' : 'ml-0'"
+          class="transition-300 transition-property-margin"
+        >
+          <CollapseButton />
+        </NFlex>
+        <NFlex
+          align="center"
+          class="mr-24px"
+        >
+          <FullscreenButton />
+          <ThemeModeButton />
+          <ThemeSettingButton />
+          <UserDropdown />
         </NFlex>
       </div>
     </template>
@@ -73,7 +72,5 @@ function go(path: string) {
         footer
       </div>
     </template>
-
-    <LayoutSetting v-model:show="showSetting" />
   </YLayout>
 </template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 2fe7df2..a0556d3 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,5 +5,7 @@ const title = 'Hello World!'
 <template>
   <div class="p-24px">
     <NP>{{ title }}</NP>
+    <NDatePicker />
+    <NDataTable />
   </div>
 </template>
diff --git a/src/router.ts b/src/router.ts
index 6e71214..69ee871 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
 import { setupLayouts } from 'virtual:generated-layouts'
 
-const { loadingBar } = useNaiveApi()
+const { loadingBar } = useNaiveDiscreteApi()
 
 export const router = createRouter({
   history: createWebHistory(),