diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
index 112c9d910..ed0064154 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertLabel.scss
@@ -10,6 +10,12 @@
     border-bottom: none;
     font-size: 13px;
     line-height: 26px;
+    .active {
+      color: $--color-primary;
+      border-bottom: none;
+      cursor: default;
+      font-weight: bold;
+    }
   }
   .alert-label-box{
     display: flex;
diff --git a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
index 2970fbc3d..a49b5b7bd 100644
--- a/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
+++ b/nezha-fronted/src/assets/css/components/common/alert/alertRuleInfo.scss
@@ -68,19 +68,17 @@
 .alert-rule-box{
   display: flex;
   justify-content:space-between;
-  border-bottom: 1px solid $--border-color-light;
 }
 .alert-rule-title{
   text-align: left;
   width: 110px;
-  border-right: 1px solid $--border-color-light;
   color: $--color-text-regular;
   padding: 0 3px 0 13px;
 }
 .alert-rule-value{
   text-align: left;
   width: 150px;
-  color: #1a1a1a;
+  color: $--color-text-regular;
   padding: 0 3px 0 13px;
   word-wrap: break-word;
   white-space: normal;
diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
index 58736892c..ca6739c0a 100644
--- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss
@@ -96,7 +96,6 @@
 }
 .red,.green{
   color: white;
-  padding: 2px 5px;
   border-radius: 4px;
 }
 /deep/ .nz-message .el-textarea textarea{
diff --git a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
index 397e3d5eb..b0f19c489 100644
--- a/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
+++ b/nezha-fronted/src/assets/css/components/page/alert/nzAlertTag.scss
@@ -32,44 +32,44 @@
     word-break: break-all;
     display: inline-block;
   }
-  .nz-alert-tag_normal {
-    border-color: $--color-text-link;
-    .nz-alert-tag__label {
-      border-right: 1px solid $--color-text-link;
-      background-color: $--color-text-link;
-      color: white;
-    }
-  }
-  .nz-alert-tag_success {
-    border-color: #50d050;
-    .nz-alert-tag__label {
-      border-right: 1px solid #50d050;
-      background-color: #50d050;
-      color: white;
-    }
-  }
-  .nz-alert-tag_info {
-    border-color: $--color-text-secondary;
-    .nz-alert-tag__label {
-      border-right: 1px solid $--color-text-secondary;
-      background-color: $--color-text-secondary;
-      color: white;
-    }
-  }
-  .nz-alert-tag_danger {
-    border-color: #d64f40;
-    .nz-alert-tag__label {
-      border-right: 1px solid #d64f40;
-      background-color: #d64f40;
-      color: white;
-    }
-  }
-  .nz-alert-tag_warning {
-    border-color: #e6a23c;
-    .nz-alert-tag__label {
-      border-right: 1px solid #e6a23c;
-      background-color: #e6a23c;
-      color: white;
-    }
+}
+.nz-alert-tag_normal {
+  border-color: $--color-text-link;
+  .nz-alert-tag__label {
+    border-right: 1px solid $--color-text-link;
+    background-color: $--color-text-link;
+    color: white;
+  }
+}
+.nz-alert-tag_success {
+  border-color: #50d050;
+  .nz-alert-tag__label {
+    border-right: 1px solid #50d050;
+    background-color: #50d050;
+    color: white;
+  }
+}
+.nz-alert-tag_info {
+  border-color: $--color-text-secondary;
+  .nz-alert-tag__label {
+    border-right: 1px solid $--color-text-secondary;
+    background-color: $--color-text-secondary;
+    color: white;
+  }
+}
+.nz-alert-tag_danger {
+  border-color: #d64f40;
+  .nz-alert-tag__label {
+    border-right: 1px solid #d64f40;
+    background-color: #d64f40;
+    color: white;
+  }
+}
+.nz-alert-tag_warning {
+  border-color: #e6a23c;
+  .nz-alert-tag__label {
+    border-right: 1px solid #e6a23c;
+    background-color: #e6a23c;
+    color: white;
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
index a0cf34b77..73fa138d4 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
@@ -14,6 +14,7 @@
     margin: 0;
     position: absolute;
     z-index: 1;
+    color: $--color-text-primary;
   }
   .el-carousel__indicator--horizontal .el-carousel__button{
     background-color: #C0C4CC;
@@ -25,6 +26,9 @@
   .el-carousel__indicator--horizontal.is-active .el-carousel__button{
     opacity: 1;
   }
+  .nz-table2 {
+    height: 100% !important;
+  }
 }
 .overview-content-header{
   display: flex;
@@ -282,12 +286,27 @@
   font-size: 0.7rem;
   font-style: italic;
 }
+.overview-to-alert__background {
+  background-color: $--overview-alert-icon-background-color;
+}
+.overview-to-asset__background {
+  background-color: $--overview-asset-icon-background-color;
+}
+.overview-to-project__background {
+  background-color: $--overview-project-icon-background-color;
+}
+.overview-to-module__background {
+  background-color: $--overview-module-icon-background-color;
+}
+.overview-to-endpoint__background {
+  background-color: $--overview-endpoint-icon-background-color;
+}
 .content-col-content-icon {
   height: 3.75rem;
   width: 3.75rem;
   border-radius: 50%;
   box-sizing: border-box;
-  border: 1px solid #e5eaef;
+  border: 1px solid $--overview-border-color;
   position: relative;
   .nz-icon {
     font-size: 1.75rem !important;
@@ -297,21 +316,21 @@
     transform: translate(-50%, -50%);
   }
   .nz-icon-overview-project {
-    color: #80A7F4;
+    color: $--overview-asset-icon-color;
   }
   .nz-icon-project {
     font-size: 1.75rem !important;
-    color: #F6B275;
+    color: $--overview-project-icon-color;
   }
   .nz-icon-overview-module {
-    color: #7AD0BC;
+    color: $--overview-module-icon-color;
   }
   .nz-icon-overview-endpoint {
-    color: #969DEA;
+    color: $--overview-endpoint-icon-color;
   }
   .nz-icon-overview-alert {
     font-size: 1.75rem !important;
-    color: #EE9A87;
+    color: $--overview-alert-icon-color;
   }
 }
 .content-num-box {
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 0311a2b65..dd50475f4 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -153,6 +153,22 @@ $--value-color: $--table-header-font-color;
 // time picker
 $--time-picker-hover-color: #FFFFFF;
 
+/* overview */
+// color
+$--overview-asset-icon-color: $--time-picker-hover-color;
+$--overview-project-icon-color: $--time-picker-hover-color;
+$--overview-module-icon-color: $--time-picker-hover-color;
+$--overview-endpoint-icon-color: $--time-picker-hover-color;
+$--overview-alert-icon-color: $--time-picker-hover-color;
+// background
+$--overview-module-icon-background-color: #5F80D5;
+$--overview-endpoint-icon-background-color: #7F87EA;
+$--overview-alert-icon-background-color: #EFA25D;
+$--overview-asset-icon-background-color: #568FFF;
+$--overview-project-icon-background-color: #4DB4FF;
+// border
+$--overview-border-color: $--background-color-empty;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 401ec793c..84aae22fc 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -151,6 +151,21 @@ $--value-input-background-color: $--value-color;
 // time picker
 $--time-picker-hover-color: $--value-color;
 
+/* overview */
+$--overview-asset-icon-color: #80A7F4;
+$--overview-project-icon-color: #F6B275;
+$--overview-module-icon-color: #7AD0BC;
+$--overview-endpoint-icon-color: #969DEA;
+$--overview-alert-icon-color: #EE9A87;
+// background
+$--overview-module-icon-background-color: $--value-color;
+$--overview-endpoint-icon-background-color: $--value-color;
+$--overview-alert-icon-background-color: $--value-color;
+$--overview-asset-icon-background-color: $--value-color;
+$--overview-project-icon-background-color: $--value-color;
+// border
+$--overview-border-color: #E5EAEF;
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index 3009a14ba..82cfc10a6 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -24,7 +24,7 @@
       <div class="content-row-box">
         <div class="content-col-box">
           <div id="overview-to-asset" v-loading="assetLoading" class="content-col-content clickable" @click="jumpTo('asset')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
+            <div class="content-col-content-icon overview-to-asset__background"><i class="nz-icon nz-icon-overview-project"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${assetData}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -40,7 +40,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="projectLoading" class="content-col-content clickable" @click="jumpTo('project')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-project"></i></div>
+            <div class="content-col-content-icon overview-to-project__background"><i class="nz-icon nz-icon-project"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${projectData.total}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -55,7 +55,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="moduleLoading" class="content-col-content clickable" @click="jumpTo('module')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
+            <div class="content-col-content-icon overview-to-module__background"><i class="nz-icon nz-icon-overview-module"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${moduleData.total}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -70,7 +70,7 @@
         </div>
         <div class="content-col-box">
           <div v-loading="endpointLoading" class="content-col-content clickable" @click="jumpTo('endpoint')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
+            <div class="content-col-content-icon overview-to-endpoint__background"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${endpointData.num}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">
@@ -85,7 +85,7 @@
         </div>
         <div class="content-col-box">
           <div id="overview-to-alertlist" v-loading="alertMessageLoading" class="content-col-content clickable" @click="jumpTo('alertList')">
-            <div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
+            <div class="content-col-content-icon overview-to-alert__background"><i class="nz-icon nz-icon-overview-alert"></i></div>
             <div class="content-num-box">
               <el-tooltip :content="`${alertMessageData.num}`" class="item" effect="light" placement="top">
                 <div class="content-col-content-num">