diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index d3f08d0..d78706b 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -24,7 +24,7 @@
     </el-menu>
 
     <div class="right-menu" style="color: var(--TopTextColor)">
-      <template>
+      <template v-if="false">
 
         <notification class="right-menu-item hover-effect" />
         <lang-select class="right-menu-item hover-effect" />
@@ -35,12 +35,14 @@
         </div>
       </template>
 
-      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;" trigger="click">
-        <div class="el-dropdown-link" style="display: flex;color: var(--TopTextColor);font-size: 14px; width:100%;">
-
+      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:200px;" trigger="click">
+        <div class="el-dropdown-link" style="display: flex;color: #f7f7f4;font-size: 14px; width:100%;">
+          <el-avatar></el-avatar>
+        <div style="display: flex; align-items: center; margin-left: 10px">
           <span style="max-width:80px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ name }}</span>
           <span><i class="el-icon-arrow-down el-icon--right" /></span>
         </div>
+        </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/person-info/index">
             <el-dropdown-item>{{ $t('commons.personal_info') }}</el-dropdown-item>
@@ -293,7 +295,7 @@ export default {
 <style lang="scss" scoped>
   .el-dropdown-link {
     cursor: pointer;
-    color: #1e212a;
+    color: #f7f7f4;
   }
   .el-icon-arrow-down {
     font-size: 12px;
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index 964fd87..6b7d667 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -5,14 +5,15 @@
   left: 0;
   z-index: 1001;
   overflow: hidden;
+  color: #f7f7f4 !important;
   border-bottom: 1px solid var(--TopBG, #E6E6E6);
-  background-color: var(--TopBG, #f1f3f8); 
+  background-color: var(--TopBG, #484198); 
   .log {
     padding: 0 16px;
     line-height: 56px;
     height: 56px;
     font-size: 24px;
-    font-weight: bold;
+    background-color: var(--MenuActiveBG, $--color-primary) ;
 
     float: left;
 
@@ -25,13 +26,12 @@
   .el-menu {
     float: left;
     border: none !important;
-    background-color: var(--TopBG, #f1f3f8) !important;
+    background-color: var(--TopBG, #484198) !important;
     .nav-item {
       display: inline-block;
 
       .el-menu-item:not(.is-active) {
-        color: var(--TopTextColor, #1e212a);
-        opacity: 0.65;
+        color: var(--TopTextColor, #f7f7f4);
         &:hover {
           background-color: var(--MenuHovorBG, rgba(158,158,158,.2)) !important;
           opacity: 1;
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index ed03271..13f44e9 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -12,7 +12,7 @@ $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C; */
 // $--color-info: #1E1E1E;
-$--color-primary: #3A4197;
+$--color-primary: #887dd3;
 $--button-font-weight: 400;
 
 $--border-color-light: #dfe4ed;
@@ -24,10 +24,10 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "~element-ui/packages/theme-chalk/src/index";
 // topBar
-$topBarBg: #f1f3f8;
+$topBarBg: #484198;
 $topBarMenuHovor: rgba(158,158,158,.2);
 $topBarMenuActive: $--color-primary;
-$topBarMenuText: #1e212a;
+$topBarMenuText: #f7f7f4;
 $topBarMenuTextActive: #f4f4f5;
 // sidebar
 $leftMenuBg: #ffffff;
@@ -39,8 +39,8 @@ $leftMenuTextActive: $--color-primary;
 
 $colorBg: rgba(10, 123, 224, .1); 
 $sideBarWidth: 210px;
-$topBarHeight: 56px;
-$contentHeight: calc(100vh - 56px);
+$topBarHeight: 64px;
+$contentHeight: calc(100vh - 64px);
 
 
 :export {