diff --git a/public/css/iconfont.css b/public/css/iconfont.css
index 4498c693a..faec9e742 100644
--- a/public/css/iconfont.css
+++ b/public/css/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2340181 */
-  src: url('iconfont.woff2?t=1630632852475') format('woff2'),
-       url('iconfont.woff?t=1630632852475') format('woff'),
-       url('iconfont.ttf?t=1630632852475') format('truetype');
+  src: url('iconfont.woff2?t=1630894072659') format('woff2'),
+       url('iconfont.woff?t=1630894072659') format('woff'),
+       url('iconfont.ttf?t=1630894072659') format('truetype');
 }
 
 .iconfont {
diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js
index be36d6dbd..912b8b4ee 100644
--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import AccountProfile from "../../modules/user/AccountProfile";
 import { getImageUrl } from 'educoder'
 import axios from 'axios';
-import { Input , notification , Dropdown , Menu } from 'antd';
+import { Input , notification , Dropdown , Menu,Badge, Button } from 'antd';
 import { Link } from 'react-router-dom';
 
 import LoginDialog from '../../modules/login/LoginDialog';
@@ -255,6 +255,26 @@ class NewHeader extends Component {
       </div>
     )
   }
+
+  messageList=()=>{
+    return(
+      <div className="messageHoverDiv">
+        <Menu mode="horizontal">
+          <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
+          <Menu.Item key="1"><Badge count={10}>私信</Badge></Menu.Item>
+          <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
+        </Menu>
+        <div className="content">
+          aaa
+        </div>
+        <div className = "buttom">
+          <a>全部消息</a>
+          <a>标记为已读</a>
+        </div>
+      </div>
+    )
+  }
+
   renderMenu=(personal)=>{
     const { current_user } = this.props;
     return(
@@ -435,14 +455,17 @@ class NewHeader extends Component {
               </Dropdown>:""
             }
             
-            {this.props.user && this.props.user.login && notice_url ?
+            {/* {this.props.user && this.props.user.login && notice_url ? */}
+            {this.props.user && this.props.user.login ?
               <div className="ml30 edu-menu-panel">
                 {user && user.login &&
-                  <a href={`${notice_url}`} style={{ position: 'relative' }}>
-                    <i className="iconfont icon-xiaoxilingdang color-grey-6"></i>
-                    <span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
-                    </span>
-                  </a>
+                  <Dropdown placement={`bottomRight`} overlay={this.messageList(settings && settings.personal)}>
+                    <a href={`/settings/notice/myNotice`} style={{ position: 'relative' }}>
+                      <i className="iconfont icon-xiaoxilingdang color-grey-6"></i>
+                      <span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
+                      </span>
+                    </a>
+                  </Dropdown>
                 }
               </div>:""
             }
diff --git a/src/forge/Head/header.scss b/src/forge/Head/header.scss
index fc8ca9d62..12aa417af 100644
--- a/src/forge/Head/header.scss
+++ b/src/forge/Head/header.scss
@@ -26,6 +26,22 @@
   border-radius: 50%;
   margin-left: 30px;
 }
+
+.messageHoverDiv{
+  padding: 20px 17px 13px; 
+  width: 386px;
+  min-height: 294px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 8px 2px rgba(212,212,212,0.5);
+  border-radius: 4px;
+  border: 1px solid red;
+
+  .buttom{
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
 .currentMenu{
   width: 120px;
   text-align: center;
diff --git a/src/forge/SecuritySetting/Index.jsx b/src/forge/SecuritySetting/Index.jsx
index d9d4e49c2..edbd763f3 100644
--- a/src/forge/SecuritySetting/Index.jsx
+++ b/src/forge/SecuritySetting/Index.jsx
@@ -14,6 +14,16 @@ import { Link } from 'react-router-dom';
 
 import './Index.scss';
 
+const MyNoticeIndex = Loadable({
+  loader: () => import("./notice/myNotice/Index"),
+  loading: Loading,
+});
+
+const NoticeManager = Loadable({
+  loader: () => import("./notice/manager/Index"),
+  loading: Loading,
+});
+
 const SSHNew = Loadable({
   loader: () => import("./sub/New"),
   loading: Loading,
@@ -39,18 +49,35 @@ function Index(props){
               <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
               <span>{current_user && current_user.username}</span>
             </div>
+            <ul className="securityUl" style={{'border-bottom':'1px solid rgba(153, 153, 153, 0.22)','padding-bottom':'5px'}}>
+              <li>消息通知</li>
+              <li className={pathname.indexOf("/settings/notice/myNotice")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
+              <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
+            </ul>
             <ul className="securityUl">
               <li>个人信息</li>
               <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i>基本资料</Link></li>
             </ul>
             <ul className="securityUl">
               <li>安全设置</li>
-              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i>SSH密钥</Link></li>
+              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span>SSH密钥</span></Link></li>
             </ul>
           </div>
           <LongWidth>
             <Gap>
               <Switch>
+                <Route
+                  path="/settings/notice/myNotice"
+                  render={(p) => (
+                    <MyNoticeIndex {...props} {...p}/>
+                  )}
+                ></Route>
+                <Route
+                  path="/settings/notice/noticeManager"
+                  render={(p) => (
+                    <NoticeManager {...props} {...p}/>
+                  )}
+                ></Route>
                 <Route
                   path="/settings/SSH/new"
                   render={(p) => (
diff --git a/src/forge/SecuritySetting/Index.scss b/src/forge/SecuritySetting/Index.scss
index f533f0530..06dadb4d8 100644
--- a/src/forge/SecuritySetting/Index.scss
+++ b/src/forge/SecuritySetting/Index.scss
@@ -8,42 +8,44 @@
       width: 198px;
       border: 1px solid rgba(153, 153, 153, 0.22);
       border-radius: 4px;
-      min-height: 400px;
+      // min-height: 400px;
       margin-bottom: 30px;
       .userDetail{
         background: rgba(153, 153, 153, 0.05);
         border-radius: 4px 4px 0px 0px;
         padding:20px 25px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
+        text-align: center;
+        height: 105px;
         img{
           height: 48px;
           width: 48px;
           border-radius: 50%;
-          margin-right: 12px;
         }
         span{
           font-size: 16px;
           color: #333;
-          max-width: 90px;
           display: block;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          font-weight: 500;
         }
       }
       .securityUl{
-        padding:20px 16px;
+        padding-left: 17px;
         color: #333;
         margin-bottom: 0px;
         padding-bottom: 0px;
         li{
-          margin-bottom: 10px;
+          font-size: 14px;
+          margin-top: 8px;
+          margin-bottom: 8px;
           height: 27px;
           line-height: 27px;
           position: relative;
           cursor: pointer;
+          // border: 1px solid;
+         
           a{
             color: #666;
             &:hover{
@@ -52,30 +54,38 @@
           }
           &.active a{
             color: #333;
-          }
-          &:first-child{
-            font-size: 16px;
+            span{
+              font-weight: 600;
+            }
           }
           &.active::before{
             position: absolute;
-            left: -16px;
-            top:0px;
-            height: 100%;
-            width: 2px;
+            left: -18px;
+            top:6px;
+            height: 15px;
+            width: 3px;
+            border-radius: 2px;
             content: "";
             background-color: #2A61FF;
           }
+
+          i{
+            font-size: 14px !important;
+            margin-right: 8px;
+          }
         }
       }
     }
     .sshHead{
       display: flex;
       align-items: center;
-      padding:15px 20px;
+      padding:6px 0px;
+      margin-bottom: 15px;
       justify-content: space-between;
       border-bottom: 1px solid #EEEEEE;
       &>span{
         font-size: 18px;
+        font-weight: 600;
       }
     }
     .ant-list-item{