diff --git a/src/assets/imgs/404/404.png b/src/assets/imgs/404/404.png
new file mode 100644
index 0000000..27d4a44
Binary files /dev/null and b/src/assets/imgs/404/404.png differ
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f080929..4150de8 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -18,7 +18,7 @@ import AppMain from './components/AppMain.vue'
         </n-layout-header>
         <n-layout
           position="absolute"
-          content-style="padding: 0 35px 35px"
+          content-style="padding: 0 35px 35px;height: 100%;"
           style="top: 100px; background-color: #f5f6fb"
           :native-scrollbar="false"
         >
diff --git a/src/router/routes/index.js b/src/router/routes/index.js
index 47ca6cc..8ad7d47 100644
--- a/src/router/routes/index.js
+++ b/src/router/routes/index.js
@@ -51,6 +51,26 @@ export const basicRoutes = [
     ],
   },
 
+  {
+    name: 'ERROR-PAGE',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    meta: {
+      title: '错误页',
+    },
+    children: [
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+        },
+      },
+    ],
+  },
+
   {
     name: 'TEST',
     path: '/test',
@@ -92,7 +112,7 @@ export const basicRoutes = [
     path: '/external-link',
     component: Layout,
     meta: {
-      title: '外链',
+      title: '外部链接',
     },
     children: [
       {
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 07e8696..a3142c2 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { NResult, NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const { replace } = useRouter()
+</script>
+
 <template>
-  <h1>404</h1>
+  <div class="page-404">
+    <n-result status="404" description="抱歉，您访问的页面不存在。">
+      <template #icon>
+        <img src="@/assets/imgs/404/404.png" width="500" />
+      </template>
+      <template #footer>
+        <n-button @click="replace('/')">返回首页</n-button>
+      </template>
+    </n-result>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.page-404 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>