diff --git a/src/apis/login.js b/src/apis/login.js
index b55a6a8..caa28e8 100644
--- a/src/apis/login.js
+++ b/src/apis/login.js
@@ -8,3 +8,12 @@ export const login = (data) => {
         data,
     });
 };
+
+export const logout = () => {
+    return request(
+        {
+            url: 'logout',
+            method: 'get'
+        }
+    )
+}
\ No newline at end of file
diff --git a/src/i18n/language/en.js b/src/i18n/language/en.js
index 7d5b0bc..22fedb7 100644
--- a/src/i18n/language/en.js
+++ b/src/i18n/language/en.js
@@ -3,6 +3,8 @@ export default {
     personnalCenter: "Personal Center",
     login: "Login",
     logout: "Exit",
+    tips404: "Sorry, Page Not Found!",
+    backHome: "Back to HomePage",
     form: {
         username: "Username",
         usernameHolder: "Please enter your username.",
diff --git a/src/i18n/language/zh-cn.js b/src/i18n/language/zh-cn.js
index 637f1df..156b4e3 100644
--- a/src/i18n/language/zh-cn.js
+++ b/src/i18n/language/zh-cn.js
@@ -3,6 +3,8 @@ export default {
     personalCenter: "个人中心",
     login: "登录",
     logout: "退出",
+    tips404: "对不起！页面找不到了......",
+    backHome: "返回首页",
     form:{
         username: "用户名",
         usernameHolder: "请输入用户名",
diff --git a/src/layout/components/PageHeader.vue b/src/layout/components/PageHeader.vue
index 57778b7..3151bb2 100644
--- a/src/layout/components/PageHeader.vue
+++ b/src/layout/components/PageHeader.vue
@@ -55,9 +55,11 @@
 import {Message} from '@element-plus/icons-vue'
 import {useI18n} from "vue-i18n";
 import {ref} from 'vue';
+import {computed} from 'vue'
 import {useRouter} from "vue-router";
 import router from "@/router/index.js";
 import store from "@/store/index.js";
+import {logout} from "@/apis/login.js";
 import user from "@/store/modules/user.js";
 // import {useStore} from "vuex";
 
@@ -83,6 +85,13 @@ const commands = {
   },
   toLogout: () => {
     console.log('退出')
+    logout().then(res => {
+      if (res.code == 200) {
+        store.commit('user/clearToken')
+        store.commit('user/clearUserInfo')
+        router.push('/login')
+      }
+    })
   }
 }
 
diff --git a/src/views/404.vue b/src/views/404.vue
index 5343365..eea6b1c 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -1,11 +1,28 @@
+<template>
+  <div class="font-lg">404</div>
+  <div class="font-sm">{{ t('tips404') }}</div>
+  <p class="txt-c">
+    <el-button type="text" @click="$router.push('/')">{{ t('backHome') }}</el-button>
+  </p>
+</template>
+
 <script setup>
+import {useI18n} from "vue-i18n";
 
-</script>
+const {t} = useI18n();
 
-<template>
-  <h1>这是404页面</h1>
-</template>
+</script>
 
 <style scoped>
-
+.font-lg {
+  margin-top: 40px;
+  font-size: 150px;
+  font-weight: bold;
+  text-align: center;
+  color: var(--el-color-primary);
+}
+.font-sm {
+  font-size: 26px;
+  text-align: center;
+}
 </style>