diff --git a/src/App.vue b/src/App.vue
index 712a727b..404125a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,10 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="app.themeOverrids">
-    <naive-app>
-      <router-view />
-    </naive-app>
-  </n-config-provider>
+  <app-provider>
+    <router-view />
+  </app-provider>
 </template>
 
 <script lang="ts" setup>
-import { NConfigProvider, darkTheme, zhCN, dateZhCN } from 'naive-ui';
-import { computed } from 'vue';
-import { NaiveApp } from '@/components';
-import { useAppStore } from '@/store';
-
-const app = useAppStore();
-const theme = computed(() => (app.themeSettings.darkMode ? darkTheme : undefined));
+import AppProvider from './AppProvider.vue';
 </script>
 <style></style>
diff --git a/src/AppProvider.vue b/src/AppProvider.vue
new file mode 100644
index 00000000..d81ccc44
--- /dev/null
+++ b/src/AppProvider.vue
@@ -0,0 +1,34 @@
+<template>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme" :theme-overrides="app.themeOverrids">
+    <n-loading-bar-provider>
+      <n-dialog-provider>
+        <n-notification-provider>
+          <n-message-provider>
+            <slot></slot>
+            <app-provider-content />
+          </n-message-provider>
+        </n-notification-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {
+  NConfigProvider,
+  darkTheme,
+  zhCN,
+  dateZhCN,
+  NLoadingBarProvider,
+  NDialogProvider,
+  NNotificationProvider,
+  NMessageProvider
+} from 'naive-ui';
+import { AppProviderContent } from '@/components';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const theme = computed(() => (app.themeSettings.darkMode ? darkTheme : undefined));
+</script>
+<style scoped></style>
diff --git a/src/components/business/index.ts b/src/components/business/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/common/NaiveApp/NaiveContent.vue b/src/components/common/AppProviderContent/index.vue
similarity index 100%
rename from src/components/common/NaiveApp/NaiveContent.vue
rename to src/components/common/AppProviderContent/index.vue
diff --git a/src/components/common/NaiveApp/index.vue b/src/components/common/NaiveApp/index.vue
deleted file mode 100644
index ee3b3d50..00000000
--- a/src/components/common/NaiveApp/index.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <n-loading-bar-provider>
-    <n-dialog-provider>
-      <n-notification-provider>
-        <n-message-provider>
-          <slot></slot>
-          <naive-content />
-        </n-message-provider>
-      </n-notification-provider>
-    </n-dialog-provider>
-  </n-loading-bar-provider>
-</template>
-
-<script lang="ts" setup>
-import { NLoadingBarProvider, NDialogProvider, NNotificationProvider, NMessageProvider } from 'naive-ui';
-import NaiveContent from './NaiveContent.vue';
-</script>
-<style scoped></style>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 638eb567..ff66d87d 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,3 +1,3 @@
-import NaiveApp from './NaiveApp/index.vue';
+import AppProviderContent from './AppProviderContent/index.vue';
 
-export { NaiveApp };
+export { AppProviderContent };
diff --git a/src/components/index.ts b/src/components/index.ts
index ddce31e8..f149c5aa 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1 @@
-export { NaiveApp } from './common';
+export { AppProviderContent } from './common';
diff --git a/src/layouts/BasicContent.vue b/src/layouts/BasicContent.vue
new file mode 100644
index 00000000..f3e96c4f
--- /dev/null
+++ b/src/layouts/BasicContent.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>
diff --git a/src/main.ts b/src/main.ts
index adadd374..0105be84 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,14 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import AppProvider from './AppProvider.vue';
 import { setupStore } from './store';
 import { router, setupRouter } from './router';
 import { setupSmoothScroll, setupNaive } from './plugins';
-import { NaiveApp } from './components';
 import 'virtual:windi.css';
 import './styles/css/global.css';
 
 async function setupApp() {
-  const naiveApp = createApp(NaiveApp);
+  const naiveApp = createApp(AppProvider);
   const app = createApp(App);
 
   /** 注册naive UI组件 */
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3b07db15..8d371eb7 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -5,6 +5,7 @@
         {{ item.label }}
       </n-button>
     </n-space>
+    <router-link to="/system">system</router-link>
   </div>
 </template>
 
diff --git a/src/views/system/index.vue b/src/views/system/index.vue
index b426f528..165d9c71 100644
--- a/src/views/system/index.vue
+++ b/src/views/system/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div>System</div>
+  <div>
+    <h3>System</h3>
+    <n-button>
+      <router-link to="/home">home</router-link>
+    </n-button>
+  </div>
 </template>
 
 <script lang="ts" setup></script>