diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index e8fb5f4fe..66ede2f66 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -135,3 +135,30 @@
 .data-column__span:first-letter,.el-tabs__item:first-letter,.header__title:first-letter,.operation-dropdown-text:first-letter{
   text-transform: capitalize;
 }
+.personal-dropdown {
+  border-bottom: 1px solid #E7EAED;
+  padding: 0 20px;
+  .personal-dropdown__username {
+    max-width: 109px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    font-family: Roboto-Regular;
+    font-size: 15px;
+    color: #333333;
+    font-weight: 400;
+  }
+  .personal-dropdown__name {
+    max-width: 109px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+    color: #999999;
+    font-weight: 400;
+    padding-bottom: 10px;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index c381ad648..97d38dd2d 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -365,14 +365,14 @@
 }
 .profile {
   .main-list {
-    height: calc(100% + 7px);
+    height: calc(100% + 13px);
   }
   .top-tools {
     padding: 0 20px 14px 20px;
   }
   .list-page .nz-table2 .el-table:not(.chart-table) .gutter {
     position: fixed;
-    right: 21px;
+    right: 31px;
     height: 42px;
     border-bottom: 1px solid #E7EAED;
     background-color: white;
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 886643e1f..1061714a6 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1766,7 +1766,7 @@ const cn = {
     email: 'Email',
     mobile: '手机',
     source: '来源',
-    twoFactorAuthentication: '双重身份验证'
+    twoFactorAuthentication: '双因子认证'
   },
   ...zhLocale
 }
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 60a12e8ee..a4e8ddd76 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -167,6 +167,15 @@ export default {
             // 登录成功，记录用户名、token和lang
             this.authToken = res.data.authToken
             sessionStorage.setItem('nz-token', res.data.authToken)
+            this.$get('/sys/user/profile').then(response => {
+              if (response.code === 200) {
+                const userList = response.user
+                console.log(userList)
+                // 保存当前用户的 userId
+                localStorage.setItem('nz-user-id', userList.id)
+                localStorage.setItem('nz-user-name', userList.name)
+              }
+            })
             if (res.data.authFlag === 1) {
               if (res.data.authBind === 0) {
                 this.verifyShow = true
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 755d754e6..0fe532552 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -44,13 +44,17 @@
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown>
-        <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
-        <el-dropdown-menu slot="dropdown">
+        <div class="personal-avatar"><span>{{username.substr(0, 1)}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
+        <el-dropdown-menu  style="width: 142px" slot="dropdown">
+          <div class="personal-dropdown">
+            <div class="personal-dropdown__username">{{username}}</div>
+            <div class="personal-dropdown__name">@{{name}}</div>
+          </div>
           <el-dropdown-item>
-            <div id="header-to-changepin" @click="showPinDialog">{{$t('overall.personalCenter')}}</div>
+            <div id="header-to-profile" @click="showPinDialog"><i class="nz-icon nz-icon-user"></i>{{$t('overall.personalCenter')}}</div>
           </el-dropdown-item>
           <el-dropdown-item>
-            <div id="header-to-logout" @click="logout">{{$t('overall.signOut')}}</div>
+            <div id="header-to-logout" @click="logout"><i class="nz-icon nz-icon-exit"></i>{{$t('overall.signOut')}}</div>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -74,8 +78,8 @@ export default {
   data () {
     return {
       username: sessionStorage.getItem('nz-username'),
+      name: localStorage.getItem('nz-user-name'),
       language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
-
       // 顶部菜单相关
       createMenu: [ // 新增按钮内容
         {
@@ -260,7 +264,22 @@ export default {
 .header {
   display: flex;
   height: 50px;
-
+  .personal-avatar {
+    span {
+      width: 32px;
+      height: 32px;
+      display: inline-block;
+      line-height: 32px;
+      background: rgba(60,146,241,0.10);
+      font-family: PingFangSC-Medium;
+      font-size: 14px;
+      color: #3C92F1;
+      letter-spacing: 0;
+      font-weight: 500;
+      text-transform: capitalize;
+      border-radius: 100%;
+    }
+  }
   .header-menu {
     display: flex;
     justify-content: flex-end;
diff --git a/nezha-fronted/src/components/page/config/operationRecord.vue b/nezha-fronted/src/components/page/config/operationRecord.vue
index c44b174a8..f0834edc9 100644
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/nezha-fronted/src/components/page/config/operationRecord.vue
@@ -8,7 +8,7 @@
       @search="search"
       :search-msg="searchMsg">
       <template v-slot:top-tool-left>
-        <div class="profile-right__tabs-title" style="margin-left: -20px">
+        <div class="profile-right__tabs-title">
           <div class="profile-right__tabs-active" :class="{'is-active': profileShow}" @click="tabsActive">{{$t('profile.operationRecord')}}</div>
           <div class="profile-right__tabs-active" :class="{'is-active': !profileShow}" @click="tabsActiveTow">{{$t('profile.changePassword')}}</div>
         </div>
@@ -111,9 +111,10 @@ export default {
       this.profileShow = false
       this.layout = []
     },
-    getTableData (params) {
+    getTableData () {
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      // 获取 userId 作为过滤条件传给后台
       this.$set(this.searchLabel, 'userId', localStorage.getItem('nz-user-id'))
       this.tools.loading = true
       this.$get(this.url, { ...this.searchLabel }).then(response => {
@@ -132,7 +133,7 @@ export default {
           }
         }
       })
-    },
+    }
   }
 }
 </script>
@@ -140,12 +141,11 @@ export default {
 .top-tool-left {
   .profile-right__tabs-title {
     display: flex;
-    justify-content: flex-start;
-    position: relative;
+    justify-content: space-around;
+    align-items: flex-start;
+    padding-top: 19px;
     .profile-right__tabs-active {
-      margin-right: 30px;
-      margin-left: -2px;
-      padding-top: 25px;
+      padding:0 10px;
       font-size: 14px;
       height: 30px;
       color: #666666;
@@ -153,7 +153,6 @@ export default {
       font-weight: 400;
       cursor: pointer;
       opacity: .6;
-      transform: translateX(20%);
     }
     .is-active {
       border-bottom: 2px solid  #FA901C;
@@ -167,9 +166,9 @@ export default {
   }
   .profile-hr {
     position: absolute;
-    top: 55px;
+    top: 50px;
     width: calc(100% - 40px);
-    height: 2px;
+    height: 1px;
     background-color: #eceef0;
   }
 }
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index 44e77697b..a4d61bb0f 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -2,7 +2,7 @@
   <div class="profile">
     <div class="profile-left">
       <div class="profile-left__header">
-        <div class="profile-left__header-img">
+        <div class="profile-left__header-avatar">
           <span>{{username.substr(0, 1)}}</span>
         </div>
         <div class="profile-left__header-username">
@@ -16,7 +16,17 @@
               </span>
               <span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span></div>
           </el-popover>
-          <div>@{{userList.name}}</div>
+          <el-popover
+            placement="right-start"
+            style="line-height: .1;"
+            trigger="hover"
+            :content="'@'+userList.name">
+            <div slot="reference">
+              <span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
+                @{{userList.name}}
+              </span>
+            </div>
+          </el-popover>
         </div>
       </div>
       <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
@@ -34,15 +44,6 @@
        </div>
      </div>
       <div class="profile-left__button table-operation-items">
-<!--        <el-button v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? true : false" size="small" class="profile-left__button-footer__btn footer__btns">-->
-<!--          <span>{{$t('profile.enable')}}</span>-->
-<!--        </el-button>-->
-<!--        <el-button @click="profileDisable" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" :disabled="this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable == 1" class="profile-left__button-footer__btn footer__btns table-operation-item">-->
-<!--          <span>{{$t('profile.close')}}</span>-->
-<!--        </el-button>-->
-<!--        <el-button @click="profileMfaLevel" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" class="profile-left__button-footer__btn footer__btn table-operation-item">-->
-<!--          <span>{{$t('profile.update')}}</span>-->
-<!--        </el-button>-->
         <el-button @click="profileEnable" size="small" class="profile-left__button-footer__btn footer__btn table-operation-item"  v-if="mfaEnable != '1' && mfaLevel == 0">
           <span>{{$t('profile.enable')}}</span>
         </el-button>
@@ -65,7 +66,9 @@
         </div>
       </div>
     </div>
-    <operation-record />
+    <div style="width: calc(100% - 370px);">
+      <operation-record />
+    </div>
     <el-dialog :visible.sync="authBindShow" :title="$t('login.verifyDialogTitle')" :modal-append-to-body='false'
                :show-close="true" width="620px" class="nz-dialog" @closed="closeDialog">
 
@@ -207,7 +210,6 @@ export default {
             this.tableProfile[1].prop = this.userList.email
             this.tableProfile[2].prop = this.userList.mobile
             this.tableProfile[3].prop = this.userList.source
-            localStorage.setItem('nz-user-id', this.userList.id)
           }
           resolve()
         })
@@ -349,7 +351,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      .profile-left__header-img {
+      .profile-left__header-avatar {
         height: 80px;
         width: 80px;
         line-height: 80px;
@@ -379,6 +381,7 @@ export default {
           overflow: hidden;
           white-space: nowrap;
           vertical-align: middle;
+          padding-top: 4px;
         }
         .MfaName{
           display: inline-block;
@@ -387,6 +390,7 @@ export default {
           overflow: hidden;
           white-space: nowrap;
           vertical-align: middle;
+          padding-top: 4px;
         }
         div:nth-of-type(1) {
           font-family: Roboto-Medium;
@@ -396,7 +400,7 @@ export default {
           letter-spacing: 0;
           line-height: 22px;
           font-weight: 500;
-          padding: 8px 0 8px 0;
+          padding: 9px 0 0 0;
         }
         div:nth-of-type(2) {
           font-family: Roboto-Regular;
diff --git a/nezha-fronted/src/components/page/config/profileChangePin.vue b/nezha-fronted/src/components/page/config/profileChangePin.vue
index 1ee94bbd3..41282fe39 100644
--- a/nezha-fronted/src/components/page/config/profileChangePin.vue
+++ b/nezha-fronted/src/components/page/config/profileChangePin.vue
@@ -2,18 +2,6 @@
   <div class="profile-change__Pin">
     <div class="profile-change__Pin-from">
       <el-form :model="user" label-position = "top" label-width="150px" :rules="rules" ref="changePinForm">
-        <!--      <el-form-item :label="$t('config.user.account')" prop="username" v-show="curUser != sysUser">-->
-        <!--        <el-input type="text" autocomplete="false" v-model="user.username" disabled id="change-pin-username"></el-input>-->
-        <!--      </el-form-item>-->
-        <!--      <el-form-item :label="$t('config.user.oldPin')" prop="pin">-->
-        <!--        <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pin" maxlength="20" :placeholder="$t('config.user.inputOldPin')" id="change-pin-pin"></el-input>-->
-        <!--      </el-form-item>-->
-        <!--      <el-form-item :label="$t('config.user.newPin')" prop="newPin">-->
-        <!--        <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPin" maxlength="20" :placeholder="$t('config.user.inputNewPin')" id="change-pin-newPin"></el-input>-->
-        <!--      </el-form-item>-->
-        <!--      <el-form-item :label="$t('config.user.confirmPin')" prop="confirmPin">-->
-        <!--        <el-input type="password" autocomplete="false"  :show-password="true" v-model="user.confirmPin" maxlength="20" :placeholder="$t('config.user.inputConfirmPin')" id="change-pin-confirmPin"></el-input>-->
-        <!--      </el-form-item>-->
           <el-form-item class="profile-change__Pin-input" :label="$t('profile.oldPassword')" prop="pin">
             <el-input v-model="user.pin" type="password" size="small"/>
           </el-form-item>
@@ -103,6 +91,9 @@ export default {
           this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
             if (response && response.code == 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.user.pin = ''
+              this.user.newPin = ''
+              this.user.confirmPin = ''
               this.close()
             } else {
               this.$message.error(response.msg)