diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 80c1aca2c..09621e172 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -1,6 +1,6 @@
 /*列表table通用样式*/
 .list-page {
-  height: 100%;
+  height: calc(100%);
   width: 100%;
   box-sizing: border-box;
   background-color: #f6f6f6;
@@ -365,7 +365,10 @@
 }
 .profile {
   .main-list {
-    height: calc(100% - 14px);
+    height: calc(100% + 7ncpx);
+  }
+  .top-tools {
+    padding: 0 20px 14px 20px;
   }
 }
 .operation-dropdown-text {
diff --git a/nezha-fronted/src/assets/css/font/iconfont.ttf b/nezha-fronted/src/assets/css/font/iconfont.ttf
index 6f46265ea..e4398c0d6 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.ttf and b/nezha-fronted/src/assets/css/font/iconfont.ttf differ
diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff b/nezha-fronted/src/assets/css/font/iconfont.woff
index e49ce5577..8e1ea6270 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.woff and b/nezha-fronted/src/assets/css/font/iconfont.woff differ
diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff2 b/nezha-fronted/src/assets/css/font/iconfont.woff2
index e63d9c8ed..1b3977150 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.woff2 and b/nezha-fronted/src/assets/css/font/iconfont.woff2 differ
diff --git a/nezha-fronted/src/assets/css/nzIcon.css b/nezha-fronted/src/assets/css/nzIcon.css
index b2694c711..79c9e1409 100644
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1629166963964') format('woff2'),
-  url('./font/iconfont.woff?t=1629166963964') format('woff'),
-  url('./font/iconfont.ttf?t=1629166963964') format('truetype');
+  src: url('./font/iconfont.woff2?t=1629339873183') format('woff2'),
+  url('./font/iconfont.woff?t=1629339873183') format('woff'),
+  url('./font/iconfont.ttf?t=1629339873183') format('truetype');
 }
 
 .nz-icon {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index a1d1057ad..e29bcdcf8 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -1751,6 +1751,7 @@ const cn = {
   profile: {
     profile: '个人中心',
     close: '关闭',
+    enable: '启用',
     update: '更新',
     operationRecord: '操作记录',
     changePassword: '修改密码',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 94d796f85..3b7791e47 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -1632,6 +1632,7 @@ const en = {
   profile: {
     profile: 'Profile',
     close: 'Close',
+    enable: 'Enable',
     update: 'Update',
     operationRecord: 'Operation record',
     changePassword: 'Change password',
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index e5c69932c..fbc7fa391 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -120,6 +120,7 @@
 <script>
 import { mapActions } from 'vuex'
 import QRCode from 'qrcodejs2'
+import bus from '@/libs/bus.js'
 export default {
   name: 'login',
   data () {
@@ -324,6 +325,12 @@ export default {
       const creatDom = document.getElementById('creatDom')
       creatDom.parentNode.removeChild(creatDom)
       this.$message.success(this.$t('overall.copySuccess'))
+    },
+    initEvent () {
+      bus.$on('profile-dialog', () => {
+        this.authBindShow = true
+        console.log(1)
+      })
     }
   },
   watch: {
@@ -345,6 +352,7 @@ export default {
     // }
     document.getElementById('usernameInput').focus()
     this.licenseStat()
+    this.initEvent()
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index ebb35cc94..098e5ebfd 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -213,7 +213,7 @@ export default {
             i18n: 'profile.profile',
             icon: '',
             id: 2,
-            name: 'profile',
+            name: 'Personal center',
             orderNum: 1,
             parentId: 1,
             perms: '',
diff --git a/nezha-fronted/src/components/page/config/operationRecord.vue b/nezha-fronted/src/components/page/config/operationRecord.vue
index e19e63c99..77bccf339 100644
--- a/nezha-fronted/src/components/page/config/operationRecord.vue
+++ b/nezha-fronted/src/components/page/config/operationRecord.vue
@@ -126,10 +126,10 @@ export default {
     position: relative;
     .profile-right__tabs-active {
       margin-right: 40px;
-      margin-top: 26px;
       margin-left: -2px;
-      height: 35px;
+      padding-top: 25px;
       font-size: 14px;
+      height: 30px;
       color: #666666;
       letter-spacing: 0;
       font-weight: 400;
@@ -148,10 +148,10 @@ export default {
   }
   .profile-hr {
     position: absolute;
-    top: 75px;
+    top: 55px;
     width: calc(100% - 40px);
     height: 2px;
-    background-color: #E7EAED;
+    background-color: #eceef0;
   }
 }
 </style>
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index 8bdb11282..79e2d0683 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -7,14 +7,15 @@
         </div>
         <div class="profile-left__header-username">
           <div>{{userList.username}}<span class="profile-left__header-username__span">2FA</span></div>
-          <div>{{userList.name}}</div>
+          <div>@{{userList.name}}</div>
         </div>
       </div>
       <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
         <span style="margin:0 18px 0 0"><i :class="item.icon"></i></span>
         <div class="profile-left__center-title">
           <div>{{item.label}}</div>
-          <div>{{item.prop}}</div>
+          <div v-if="item.prop">{{item.prop}}</div>
+          <div v-if="item.prop === null || ''">-</div>
         </div>
       </div>
      <div class="profile-left__center">
@@ -24,10 +25,22 @@
        </div>
      </div>
       <div class="profile-left__button table-operation-items">
-        <el-button @click="profileDisable" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item--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">
+<!--        <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__btns">
+          <span>{{$t('profile.enable')}}</span>
+        </el-button>
+        <el-button @click="profileDisable" size="small" 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--disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" class="profile-left__button-footer__btn footer__btn table-operation-item">
+        <el-button @click="profileMfaLevel" size="small" class="profile-left__button-footer__btn footer__btn table-operation-item">
           <span>{{$t('profile.update')}}</span>
         </el-button>
       </div>
@@ -49,6 +62,7 @@
 
 <script>
 import operationRecord from './operationRecord'
+import bus from '@/libs/bus.js'
 
 export default {
   name: 'profile',
@@ -64,25 +78,25 @@ export default {
           id: 1,
           label: this.$t('profile.role'),
           prop: '',
-          icon: 'nz-icon nz-icon-overview-alert'
+          icon: 'nz-icon nz-icon-role profile-role'
         },
         {
           id: 2,
           label: this.$t('profile.email'),
           prop: '',
-          icon: 'nz-icon nz-icon-overview-alert'
+          icon: 'nz-icon nz-icon-email profile-email'
         },
         {
           id: 3,
           label: this.$t('profile.mobile'),
           prop: '',
-          icon: 'nz-icon nz-icon-overview-alert'
+          icon: 'nz-icon nz-icon-mobile profile-mobile'
         },
         {
           id: 4,
           label: this.$t('profile.source'),
           prop: '',
-          icon: 'nz-icon nz-icon-overview-alert'
+          icon: 'nz-icon nz-icon-laiyuan profile-laiyuan'
         }
       ],
       // 后台数据
@@ -113,21 +127,32 @@ export default {
             this.tableProfile[0].prop = this.userList.roles[0].i18n
             this.tableProfile[1].prop = this.userList.email
             this.tableProfile[2].prop = this.userList.mobile
+            console.log(this.tableProfile[2].prop)
             this.tableProfile[3].prop = this.userList.source
-            console.log(this.userList)
           }
           resolve()
         })
       })
     },
     profileMfaLevel () {
+      return new Promise(resolve => {
+        this.$post('/mfa/genkey').then(response => {
+          if (response.code === 200) {
+            console.log(bus.$emit('profile-dialog'))
+          }
+          resolve()
+        })
+      })
+    },
+    profileEnable () {
       return new Promise(resolve => {
         const mfaLevelList = {
           mfaLevel: 1
         }
-        this.$post('/mfa/genKey', mfaLevelList).then(response => {
+        this.$post('/mfa/genkey', mfaLevelList).then(response => {
           if (response.code === 200) {
-            console.log(response)
+            bus.$emit('profile-dialog')
+            console.log(bus.$emit('profile-dialog'))
           }
           resolve()
         })
@@ -165,12 +190,13 @@ export default {
       margin: 10px 0;
       text-align: center;
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
       .profile-left__header-img {
         height: 80px;
         width: 80px;
         line-height: 80px;
+        margin-left: 20px;
         span {
           display: inline-block;
           background: rgba(60,146,241,0.10);
@@ -196,11 +222,11 @@ export default {
           letter-spacing: 0;
           line-height: 22px;
           font-weight: 500;
-          padding: 15px 0 13px 0;
+          padding: 12px 0 10px 0;
         }
         div:nth-of-type(2) {
           font-family: Roboto-Regular;
-          font-size: 14px;
+          font-size: 18px;
           color: #666666;
           letter-spacing: 0;
           line-height: 22px;
@@ -212,12 +238,12 @@ export default {
           width: 42px;
           height: 24px;
           margin-left: 10px;
-          background: #ECF5FE;
-          border: 1px solid rgba(135,192,255,0.56);
-          border-radius: 2px;
+          background-color: #ecf5ff;
+          border-color: #d9ecff;
+          border-radius: 10px;
           font-family: Roboto-Regular;
           font-size: 14px;
-          color: #3C92F1;
+          color: #409EFF;
           letter-spacing: 0;
           font-weight: 400;
         }
@@ -231,8 +257,21 @@ export default {
       /*border: 1px solid red;*/
       display: flex;
       justify-content: flex-start;
+      .profile-role {
+        color: #00C398;
+      }
+      .profile-email {
+        color: #0093F8;
+      }
+      .profile-mobile {
+        color: #EC7F66;
+      }
+      .profile-laiyuan {
+        color: #8871DB;
+      }
       .profile-left__center-title {
         margin-left: 8px;
+        margin-top: 1px;
         div:nth-of-type(1) {
           padding-bottom: 5px;
           ont-family: Roboto-Regular;