diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 8b4b1a694..9fb5202bf 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -171,6 +171,34 @@
   text-transform: capitalize;
 }
 
+.personal-dropdown {
+  border-bottom: 1px solid $--border-color-light;
+  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: $--color-text-primary;
+    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: $--color-text-secondary;
+    font-weight: 400;
+    padding-bottom: 10px;
+  }
+}
+
 .personal-dropdown-menu{
   margin-top: 14px !important;
   width: 240px;
@@ -183,9 +211,9 @@
     font-size: 14px;
     color: $--color-text-regular;
   }
-  .personal-dropdown {
+  .personal-nameBox {
     padding: 8px 12px;
-    .personal-dropdown__username {
+    .personal-name {
       max-width: 216px;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -197,7 +225,7 @@
       font-weight: bold;
       line-height: 20px;
     }
-    .personal-dropdown__name {
+    .personal-username {
       max-width: 216px;
       text-overflow: ellipsis;
       overflow: hidden;
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 636d5a5ee..06cfdec18 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -52,9 +52,9 @@
       <el-dropdown trigger="click">
         <div class="personal-avatar"><span>{{name ? name.substr(0, 1) : ''}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
         <el-dropdown-menu slot="dropdown" class="personal-dropdown-menu right-public-box-select-top right-public-box-dropdown-top">
-          <div class="personal-dropdown">
-            <div class="personal-dropdown__username" :title="name">{{name}}</div>
-            <div class="personal-dropdown__name" :title="username">@{{username}}</div>
+          <div class="personal-nameBox">
+            <div class="personal-name" :title="name">{{name}}</div>
+            <div class="personal-username" :title="username">@{{username}}</div>
           </div>
           <div class="item-divide"></div>
           <el-dropdown-item>