diff --git a/frontend/src/assets/DataEase-color.png b/frontend/src/assets/DataEase-color.png
index 3fafa755eb..c3c0ccd022 100644
Binary files a/frontend/src/assets/DataEase-color.png and b/frontend/src/assets/DataEase-color.png differ
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 6401799c43..80d6bba935 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="top-nav" :style="{'background-color': theme}">
+  <div class="top-nav" :style="{'background-color': '#f1f3f8'}">
     <div class="log">
-      <img v-if="!logoUrl" src="@/assets/DataEase-white.png" width="160" alt="" style="padding-top: 8px;">
+      <img v-if="!logoUrl" src="@/assets/DataEase-color.png" width="160" alt="" style="padding-top: 8px;">
       <img v-else :src="logoUrl" width="160" alt="" style="padding-top: 8px;">
     </div>
     <el-menu
       :active-text-color="variables.topMenuActiveText"
       :default-active="activeMenu"
       mode="horizontal"
-      :style="{'background-color': theme}"
+      :style="{'background-color': '#f1f3f8'}"
       @select="handleSelect"
     >
       <div v-for="item in permission_routes" :key="item.path" class="nav-item">
@@ -229,7 +229,7 @@ export default {
 <style lang="scss" scoped>
   .el-dropdown-link {
     cursor: pointer;
-    color: #ffffff;
+    color: #1e212a;
   }
   .el-icon-arrow-down {
     font-size: 12px;
@@ -240,7 +240,7 @@ export default {
     padding: 10px 8px;
     height: 100%;
     font-size: 16px;
-    color: rgba(255,255,255,.87);
+    color: #1e212a;
     vertical-align: text-bottom;
     margin-right: 10px;
   }
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index b0661ad2fa..e452bce881 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -191,7 +191,7 @@ div:focus {
 .ds-icon-scene{
   width: 14px;
   height: 14px;
-  color: #faaa39;
+  color: #0a7be0;
 }
 .ds-icon-db{
   width: 14px;
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index 7667eed2de..c52d51d01d 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -8,6 +8,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    border-bottom: 1px solid #DCDFE6;
 
     .log {
       padding: 0 16px;
@@ -29,7 +30,7 @@
         display: inline-block;
         .el-menu-item {
           // color: rgb(191, 203, 217);
-          color: rgba(255,255,255,0.87);
+          color: $menuText;
           &:hover {
             background-color: $subMenuHover !important;
             color: $subMenuActiveText !important;
@@ -65,7 +66,7 @@
         height: 100%;
         font-size: 18px;
         // color: #5a5e66;
-        color: $menuText;
+        color: #606266;
         vertical-align: text-bottom;
 
         &.hover-effect {
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 017776b1ff..43c3745282 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -4,7 +4,7 @@
 **/
 
 /* theme color */
-$--color-primary: #f1a826;
+$--color-primary: #0a7be0;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
@@ -26,8 +26,8 @@ $--font-path: "~element-ui/lib/theme-chalk/fonts";
 @import "~fit2cloud-ui/src/styles/common/variables";
 
 // sidebar
-$menuText:rgba(255,255,255,0.87);
-$menuActiveText:#f18126;
+$menuText:#1e212a;
+$menuActiveText:#0a7be0;
 $topMenuActiveText:#f4f4f5;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
@@ -38,7 +38,7 @@ $menuHover: rgba(158, 158, 158, 0.2);
 
 $subMenuBg:#1f2d3d;
 // $subMenuHover:#001528;
-$subMenuHover:#f18126;
+$subMenuHover:#0a7be0;
 
 $sideBarWidth: 210px;
 $topBarHeight: 56px;
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index e57c39578d..65f18563cc 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -817,9 +817,9 @@ export default {
   }
 
   .item:hover {
-    color: #f1a826;
-    background: #fffcef;
-    border-color: #f3c13c;
+    color: #1890ff;
+    background: #e8f4ff;
+    border-color: #a3d3ff;
     cursor: pointer;
   }