diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 3e28eded3..65c6bef06 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -9,6 +9,16 @@
   display: none;
   background-color: $--background-color-empty;
 }
+.el-dropdown-menu__item {
+  list-style: none;
+  line-height: 36px;
+  padding: 0 20px;
+  margin: 0;
+  font-size: 14px;
+  color: $--color-text-regular;
+  cursor: pointer;
+  outline: 0;
+}
 .el-loading-mask .el-loading-spinner{
   background: url(~@/assets/img/loading.gif) no-repeat;
   background-size: 48px 48px;
diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index a27609d40..740d0f017 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -209,39 +209,46 @@
   justify-content: center;
   height: 70px;
   box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
-
-  .footer__btn {
-    margin: 0 15px;
-    height: 30px;
-    min-width: 74px;
-    padding: 0 15px;
-    color: white;
-    background-color: $--color-primary;
-    border: none;
-    border-radius: 4px;
-    outline: none;
-    box-sizing: border-box;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background-color linear .2s, color linear .1s;
-  }
-  .footer__btn:hover:not(.footer__btn--disabled) {
-    background-color: $--color-primary-light-2;
-  }
-  .footer__btn--light {
-    background-color: $--background-color-empty;
-    border: 1px solid $--border-color-base;
-    color: $--color-text-primary;
-  }
-  .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-    background-color: $--background-color-empty;
-    border-color: $--color-primary-light-5;
-    color: $--color-primary;
-  }
-  .footer__btn--disabled {
-    opacity: .6;
-    cursor: default;
-  }
+}
+.footer__btn {
+  margin: 0 15px;
+  height: 30px;
+  min-width: 74px;
+  padding: 0 15px;
+  color: $--button-primary-color;
+  background-color: $--button-primary-background-color;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  box-sizing: border-box;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color linear .2s, color linear .1s;
+}
+.footer__btn:hover:not(.footer__btn--disabled) {
+  background-color: $--button-primary-hover-background-color;
+}
+.footer__btn:focus:not(.footer__btn--disabled) {
+  background-color: $--button-primary-active-background-color;
+}
+.footer__btn--light {
+  background-color: $--button-gray-background-color;
+  border: 1px solid $--button-gray-border-color;
+  color: $--button-gray-color;
+}
+.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+  background-color: $--button-gray-hover-background-color;
+  border: 1px solid $--button-gray-hover-border-color;
+  color: $--button-gray-hover-color;
+}
+.footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
+  background-color: $--button-gray-active-background-color;
+  border: 1px solid $--button-gray-active-border-color;
+  color: $--button-gray-active-color;
+}
+.footer__btn--disabled {
+  opacity: .6;
+  cursor: default;
 }
 /* 隐藏label新增按钮处级联选择器的input */
 .hide-casc-input {
diff --git a/nezha-fronted/src/assets/css/components/layout/header.scss b/nezha-fronted/src/assets/css/components/layout/header.scss
index 05241076b..59f64d781 100644
--- a/nezha-fronted/src/assets/css/components/layout/header.scss
+++ b/nezha-fronted/src/assets/css/components/layout/header.scss
@@ -142,11 +142,3 @@
   color: $--color-text-secondary;
   padding: 20px;
 }
-#header-to-profile, #header-to-logout {
-  padding: 0 20px;
-  font-size: 14px;
-  color: $--color-text-regular;
-  &:hover {
-    color: $--color-primary-light-2;
-  }
-}
diff --git a/nezha-fronted/src/assets/css/components/page/config/profile.scss b/nezha-fronted/src/assets/css/components/page/config/profile.scss
index 3dd65573b..d0a995b26 100644
--- a/nezha-fronted/src/assets/css/components/page/config/profile.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss
@@ -163,11 +163,6 @@
         padding: 0 15px;
         border-radius: 4px;
       }
-      .footer__btn {
-        background-color: $--color-primary;
-        color: white;
-        border: 1px solid transparent;
-      }
       .footer__btns {
         background-color: $--background-color-empty;
         color: $--color-text-primary;
@@ -175,8 +170,8 @@
       }
       .footer__btns:hover {
         opacity: .6;
-        color: $--color-primary;
-        border: 1px solid $--color-primary;
+        color: $--button-primary-hover-background-color;
+        border: 1px solid $--button-primary-hover-background-color;
       }
       .footer__btn:hover {
         opacity: .6;
@@ -302,40 +297,6 @@
   background: #CECECE;
   margin-right: 10px;
 }
-.footer {
-  .footer__btn {
-    margin: 0 15px;
-    height: 30px;
-    min-width: 74px;
-    padding: 0 15px;
-    color: white;
-    background-color: $--color-primary;
-    border: none;
-    border-radius: 4px;
-    outline: none;
-    box-sizing: border-box;
-    font-size: 14px;
-    cursor: pointer;
-    transition: background-color linear .2s, color linear .1s;
-  }
-  .footer__btn:hover:not(.footer__btn--disabled) {
-    background-color: $--color-primary-light-2;
-  }
-  .footer__btn--light {
-    background-color: $--background-color-empty;
-    border: 1px solid $--border-color-base;
-    color: $--color-text-primary;
-  }
-  .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-    background-color: $--background-color-empty;
-    border-color: $--color-primary-light-5;
-    color: $--color-primary;
-  }
-  .footer__btn--disabled {
-    opacity: .6;
-    cursor: default;
-  }
-}
 .profile-hr {
   height: 1px;
   background-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 279a7b487..ef5a232c3 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -94,12 +94,12 @@ $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
 // 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
 // button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
 $--button-gray-color: $--color-text-secondary; // 灰色按钮字色
-$--button-gray-hover-color: mix(#FFF, $--color-primary, 10%); // 灰色按钮hover字色
-$--button-gray-active-color: mix(#000, $--color-primary, 10%); // 灰色按钮focus字色
+$--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色
+$--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色
 $--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
 $--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
 $--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色
-$--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
+$--button-gray-border-color: #454545; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
 
@@ -109,7 +109,7 @@ $--button-light-gray-active-color: $--button-gray-active-color; // 灰色按钮f
 $--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色
 $--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
 $--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色
-$--button-light-gray-border-color: $--background-color-empty; // 灰色按钮边框色
+$--button-light-gray-border-color: #454545; // 灰色按钮边框色
 $--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色
 $--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色
 
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 1ca45b6eb..8f660f98d 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -4,11 +4,11 @@
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
     <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
-      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake">
+      <button :id="id+'-refresh'" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--text" @click="antiShake">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
         <span><slot name="added-text"></slot></span>
       </button>
-      <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
+      <button id="browser-go" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
         <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
@@ -67,7 +67,8 @@ export default {
     },
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
-    id: String
+    id: String,
+    btnTheme: String
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index d0a6cc1c2..9e76a9196 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -13,7 +13,7 @@
             <div class="week">{{sysWeek}}</div>
             <div class="sys-date">{{sysDate}}</div>
           </div>
-          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5"></pick-time>
+          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" btn-theme="light-gray" class="float-right pickTime margin-l-5"></pick-time>
           <div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div>
         </div>
       </div>