diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 81434b220b..28e07527de 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="top-nav">
+  <div class="top-nav" :style="{'background-color': theme}">
     <div class="log">DATA_EASE</div>
     <el-menu
-      :active-text-color="variables.menuActiveText"
+      :active-text-color="variables.topMenuActiveText"
       :default-active="activeMenu"
       mode="horizontal"
+      :style="{'background-color': theme}"
       @select="handleSelect"
     >
       <div v-for="item in permission_routes" :key="item.path" class="nav-item">
@@ -80,6 +81,9 @@ export default {
     }
   },
   computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index 69a9f72523..3f9c3568e9 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -2,7 +2,7 @@
     // margin-left: $sideBarWidth;
     width: 100%;
     // background-color: #304156;
-    background-color: $--color-primary;
+    // background-color: $--color-primary;
     position: fixed;
     top: 0;
     left: 0;
@@ -22,7 +22,7 @@
       float: left;
       border: none!important;
       // background-color: #304156;
-      background-color: $--color-primary;
+    //   background-color: $--color-primary;
 
       .nav-item {
         display: inline-block;
@@ -31,11 +31,17 @@
           color: rgba(255,255,255,0.87);
           &:hover {
             background-color: $subMenuHover !important;
+            color: $subMenuActiveText !important;
           }
           &:focus {
             background-color: $subMenuHover !important;
-            // color: $subMenuActiveText !important;
+            color: $subMenuActiveText !important;
           }
+          
+        }
+        .is-active {
+            background-color: $subMenuHover !important;
+            color: $subMenuActiveText !important;
         }
       }
     }
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 406748fe62..e884d2bd6e 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -28,6 +28,7 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 // sidebar
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
+$topMenuActiveText:#f4f4f5;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
 // $menuBg:#304156;
@@ -36,7 +37,8 @@ $menuBg:#ffffff;
 $menuHover: rgba(158, 158, 158, 0.2);
 
 $subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+// $subMenuHover:#001528;
+$subMenuHover:#1682e6;
 
 $sideBarWidth: 210px;
 $topBarHeight: 56px;
@@ -48,6 +50,7 @@ $contentHeight: calc(100vh - 56px);
   theme: $--color-primary;
   menuText: $menuText;
   menuActiveText: $menuActiveText;
+  topMenuActiveText: $topMenuActiveText;
   subMenuActiveText: $subMenuActiveText;
   menuBg: $menuBg;
   menuHover: $menuHover;