diff --git a/src/pages/HomeView.tsx b/src/pages/HomeView.tsx
index 25cedd4..55e5278 100644
--- a/src/pages/HomeView.tsx
+++ b/src/pages/HomeView.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import {UploadOutlined, UserOutlined, BellOutlined} from '@ant-design/icons';
-import {Layout, Menu, theme, Typography, Button, Dropdown, MenuProps} from 'antd';
+import {Layout, Menu, theme, Typography, Button, Dropdown, MenuProps, Popover} from 'antd';
 import {useAppDispatch, useAppSelector} from "../models/hooks";
 import {getStaff, getToken, setStaff, setToken, store} from "../models/store";
 import {Link, Outlet, useLocation, useNavigate} from "react-router-dom";
@@ -8,6 +8,7 @@ import Icon from '@ant-design/icons';
 import {Logo} from "../assets/icons";
 import axiosInstance from "../utils/axiosInstance";
 import {Department, Staff, Token} from "../models/Staff";
+import MessageList from "./MessageList";
 
 const {Title} = Typography;
 const {Header, Content, Footer, Sider} = Layout;
@@ -29,13 +30,6 @@ function HeaderBar(props: any) {
             case 'password':
                 break
             case 'logout':
-                dispatch(setToken({
-                    staffId: '',
-                    accessToken: '',
-                    refreshToken: '',
-                    clientSecret: ''
-                }))
-
                 axiosInstance({
                     url: 'logout',
                     method: 'post',
@@ -44,11 +38,16 @@ function HeaderBar(props: any) {
                     }
                 }).then(response => {
                     console.log(response.data)
-                    navigate("/login")
                 }).catch(function (error) {
                     console.log(error)
                 })
-
+                dispatch(setToken({
+                    staffId: '',
+                    accessToken: '',
+                    refreshToken: '',
+                    clientSecret: ''
+                }))
+                navigate("/login")
 
                 break
         }
@@ -97,9 +96,7 @@ function HeaderBar(props: any) {
                 flexDirection: 'row',
                 alignItems: 'center',
             }}>
-                <Button type="text" shape="circle">
-                    <BellOutlined/>
-                </Button>
+                <MessageList/>
                 <Dropdown overlayStyle={{minWidth: '150px'}} menu={{items, onClick}} placement="bottomRight" arrow>
                     <Button type="text" style={{
                         marginRight: '12px', height: '100%',
diff --git a/src/pages/MessageList.tsx b/src/pages/MessageList.tsx
new file mode 100644
index 0000000..25157c6
--- /dev/null
+++ b/src/pages/MessageList.tsx
@@ -0,0 +1,33 @@
+import {Button, List, Popover} from "antd";
+import {BellOutlined} from "@ant-design/icons";
+import React, {useState} from "react";
+
+function MessageList() {
+    const [list, setList] = useState<any[]>([]);
+
+    return (
+        <Popover content={
+            <List
+                itemLayout="horizontal"
+                dataSource={list}
+                renderItem={(item) => (
+                    <List.Item
+                        actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
+                    >
+                        <List.Item.Meta
+                            title={<a href="https://ant.design">{item.name?.last}</a>}
+                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+                        />
+                        <div>content</div>
+                    </List.Item>
+                )}
+            />
+        } title="我的消息">
+            <Button type="text" shape="circle">
+                <BellOutlined/>
+            </Button>
+        </Popover>
+    )
+}
+
+export default MessageList
\ No newline at end of file