diff --git a/contact-frontend/packages/modules/services/system/src/routes/index.ts b/contact-frontend/packages/modules/services/system/src/routes/index.ts
index 7a8201e7..9fa59f2f 100644
--- a/contact-frontend/packages/modules/services/system/src/routes/index.ts
+++ b/contact-frontend/packages/modules/services/system/src/routes/index.ts
@@ -45,7 +45,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'oss',
         name: ROUTE_NAME.SYSTEM_OSS_INDEX,
-        component: () => import('../views/HomeView.vue'),
+        component: () => import('../views/OSSView.vue'),
         meta: {
           title: '对象存储设置',
           requiresAuth: true,
@@ -55,7 +55,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'cdn',
         name: ROUTE_NAME.SYSTEM_CDN_INDEX,
-        component: () => import('../views/HomeView.vue'),
+        component: () => import('../views/CDNView.vue'),
         meta: {
           title: 'CDN 设置',
           requiresAuth: true,
@@ -101,7 +101,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'source',
         name: ROUTE_NAME.SYSTEM_SOURCE_INDEX,
-        component: () => import('../views/HomeView.vue'),
+        component: () => import('../views/MetaDataView.vue'),
         meta: {
           title: '元数据',
           requiresAuth: true,
@@ -111,7 +111,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: 'notification',
         name: ROUTE_NAME.SYSTEM_NOTIFICATION_INDEX,
-        component: () => import('../views/HomeView.vue'),
+        component: () => import('../views/NotificationView.vue'),
         meta: {
           title: '通知设置',
           requiresAuth: true,
@@ -119,9 +119,9 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'notification',
+        path: 'log',
         name: ROUTE_NAME.SYSTEM_LOG_INDEX,
-        component: () => import('../views/HomeView.vue'),
+        component: () => import('../views/LogView.vue'),
         meta: {
           title: '日志查看',
           requiresAuth: true,
diff --git a/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue b/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue
index 21d0c44e..c3c1f81a 100644
--- a/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue
+++ b/contact-frontend/packages/modules/services/system/src/views/AuthenticatorView.vue
@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
 <template>
-  <div>调整登录</div>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
 </template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/CDNView.vue b/contact-frontend/packages/modules/services/system/src/views/CDNView.vue
new file mode 100644
index 00000000..c3c1f81a
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/CDNView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
+<template>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/HomeView.vue b/contact-frontend/packages/modules/services/system/src/views/HomeView.vue
index 86a98f46..de103406 100644
--- a/contact-frontend/packages/modules/services/system/src/views/HomeView.vue
+++ b/contact-frontend/packages/modules/services/system/src/views/HomeView.vue
@@ -1,3 +1,3 @@
 <template>
-  <div>system home</div>
+  <div class="p-4">system home</div>
 </template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/LogView.vue b/contact-frontend/packages/modules/services/system/src/views/LogView.vue
new file mode 100644
index 00000000..c3c1f81a
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/LogView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
+<template>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/MetaDataView.vue b/contact-frontend/packages/modules/services/system/src/views/MetaDataView.vue
new file mode 100644
index 00000000..c3c1f81a
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/MetaDataView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
+<template>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/NotificationView.vue b/contact-frontend/packages/modules/services/system/src/views/NotificationView.vue
new file mode 100644
index 00000000..c3c1f81a
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/NotificationView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
+<template>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
+</template>
diff --git a/contact-frontend/packages/modules/services/system/src/views/OSSView.vue b/contact-frontend/packages/modules/services/system/src/views/OSSView.vue
new file mode 100644
index 00000000..c3c1f81a
--- /dev/null
+++ b/contact-frontend/packages/modules/services/system/src/views/OSSView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NTabs, NTab } from 'naive-ui'
+</script>
+<template>
+  <div class="p-4">
+    <n-tabs type="line" :bar-width="32">
+      <n-tab name="users"> 用户 </n-tab>
+      <n-tab name="social"> 登录方式 </n-tab>
+      <n-tab name="template"> 模板 </n-tab>
+      <n-tab name="dashboard"> 使用情况 </n-tab>
+      <n-tab name="setting"> 设置 </n-tab>
+    </n-tabs>
+  </div>
+</template>