diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index a0155fd7a..32842f96c 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -146,7 +146,7 @@
   text-transform: capitalize;
 }
 .personal-dropdown {
-  border-bottom: 1px solid #E7EAED;
+  border-bottom: 1px solid $--border-color-light;
   padding: 0 20px;
   .personal-dropdown__username {
     max-width: 109px;
@@ -234,3 +234,97 @@ td .nz-icon-gear:before{
     opacity: 1 !important;
   }
 }
+.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
+  padding:4px 6px;
+  background: $--background-color-copy;
+  border-radius: $--border-radius-small;
+  border: 1px solid $--span-nz-icon-border-color;
+  cursor: pointer;
+  .nz-icon-plus {
+    color: $--nz-icon-color;
+  }
+}
+.el-time-panel {
+  background-color: $--background-color-empty;
+  .el-time-panel__footer {
+    border: 1px solid $--border-color-light;
+  }
+}
+.el-scrollbar {
+  background-color: $--background-color-empty;
+}
+/* el-picker 下拉时间选择器 */
+.el-picker-panel__footer {
+  border-top: 1px solid $--border-color-light !important;
+  span {
+    color: $--color-text-regular !important;
+  }
+  .el-button--text {
+    span {
+      color: $--color-primary !important;
+    }
+  }
+  .el-button--default {
+    margin-left: 10px;
+    color: $--button-primary-color !important;
+    background: $--picker-page-background-color !important;
+    border: 1px solid $--border-color-light !important;
+  }
+  .el-button.is-plain:hover {
+    background-color: $--picker-page-background-color !important;
+    border-color: $--picker-page-btn-border-color !important;
+    span {
+      color: $--picker-page-btn-color !important;
+    }
+  }
+}
+.el-date-range-picker__time-header {
+  border-bottom: 1px solid $--border-color-light;
+}
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid $--border-color-light;
+}
+.el-date-table th {
+  border-bottom: 1px solid $--border-color-light !important;
+}
+.el-date-picker__time-header {
+  border-bottom: 1px solid $--picker-page-border-color !important;
+}
+.el-input-group.el-input-group--prepend,.query-input-inactive.el-input {
+  .el-input-group__prepend {
+    background-color: $--background-color-empty;
+    border: 1px solid $--border-color-light;
+    .el-input__inner:focus {
+      border-color: $--border-color-light-hover;
+    }
+  }
+  .el-input__inner:hover {
+    border-color: $--border-color-light-hover;
+  }
+}
+.sub-box.detail-view-sub-box {
+  .top-tools.top-tools--sub {
+    padding: 0 15px 0 0;
+    margin-right: 15px;
+    margin-left: 20px;
+    border: none;
+    border-bottom: 1px solid $--border-color-light;
+  }
+}
+//.editor-core {
+//  p {
+//    color: $--color-text-regular;
+//  }
+//}
+//.ql-toolbar.ql-snow,.ql-container.ql-snow {
+//  border: 1px solid $--border-color-light;
+//  .ql-header {
+//    color: $--color-text-primary;
+//  }
+//  .ql-stroke {
+//    stroke: $--color-text-primary;
+//  }
+//  .ql-picker-options {
+//    background-color: $--background-color-empty;
+//  }
+//}
diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index a3d50de95..982c1d4d0 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -16,6 +16,9 @@
       padding-left: 32px;
     }
   }
+  .el-form-item__label {
+    line-height: 16px !important;
+  }
 }
 
 .right-box__header {
@@ -119,13 +122,6 @@
 
     .el-form-item {
       margin-bottom: 16px;
-      .el-form-item__label{
-        padding-bottom: 6px;
-        font-size: 14px;
-        line-height: 16px;
-        color: #666;
-      }
-
       .el-input__inner:hover {
         border-color: $--border-color-light-hover;
       }
@@ -167,7 +163,7 @@
           justify-content: space-between;
           .form__labels-label__span {
             i {
-              color: $--asset-label-btn-icon-color;
+              color: $--nz-icon-color;
             }
           }
         }
@@ -182,7 +178,7 @@
       background-color: $--asset-label-btn-background-color;
 
       i {
-        color: $--asset-label-btn-icon-color;
+        color: $--nz-icon-color;
       }
     }
     .form__flex-container {
@@ -358,3 +354,9 @@
     }
   }
 }
+.right-box-sub-title {
+  background: $--right-box-sub-title-background-color !important;
+}
+.meta-option-box {
+  color: $--color-text-regular;
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 97fd50c31..97bb2963f 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -40,15 +40,6 @@
     justify-content: space-between;
     padding: 14px 20px;
 
-    &.top-tools--sub {
-      align-items: center;
-      padding: 0 70px 0 15px;
-      height: 44px;
-      background-color: $--background-color-empty;
-      border: 1px solid $--border-color-light;
-      box-sizing: border-box;
-    }
-
     .top-tool-right {
       display: flex;
       flex-shrink: 0;
@@ -130,7 +121,7 @@
       width: 200px;
       line-height: 40px;
       font-size: 16px;
-      color: #202F3F;
+      color: $--color-text-regular;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -275,19 +266,19 @@
           outline: none;
           transition:all .2s;
         }
-        .el-dropdown {
-          border: 1px solid $--border-color-light;
-        }
         .table-operation-item.table-operation-item--disable{
-          border: 1px solid $--border-color-base;
-          background-color: $--border-color-base;
+          border: 1px solid $--button-light-border-color;
+          background-color: $--background-color-disabled;
           opacity: 0.6;
           outline: none;
           i {
             font-size: 14px;
-            color: $--background-color-empty;
+            color: $--color-text-disabled;
           }
         }
+        .table-operation-item.table-operation-item--disable:hover {
+          background-color: $--background-color-disabled;
+        }
         &>.table-operation-item {
           justify-content: center;
           align-items: center;
@@ -310,7 +301,7 @@
         .table-operation-item.table-operation-item--more {
           justify-content: center;
           align-items: center;
-          border: 1px solid $--border-color-base;
+          border: 1px solid $--button-icon-border-color;
           width: 30px;
           i {
             color: $--color-text-secondary;
@@ -324,6 +315,7 @@
   .el-table__body-wrapper {
     overflow: auto;
     background-color: $--table-body-background-color;
+    height: 100% !important;
   }
   .el-table__fixed-body-wrapper {
     top: 42px !important;
@@ -528,3 +520,7 @@
 ::-webkit-scrollbar-corner {
   background-color: $--background-color-empty;
 }
+.full-width-height{
+  width: 100%;
+  height: 100%;
+}
diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 30d056d6c..198e1b49b 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -35,6 +35,9 @@
   line-height: 18px;
   position: absolute;
   padding-bottom:3px;
+  .legend-container__span,.legend-option-cell {
+    color: $--color-text-regular;
+  }
 }
 .legend-container .option-th{
   color:#33a2e5;
@@ -498,7 +501,7 @@
           overflow: hidden;
           white-space: nowrap;
           border-left: 1px solid $--border-color-light;
-          color: #1a1a1a;
+          color: $--color-text-regular;
           width: 65%;
           height: 99%;
         }
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/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index c21903c8e..713317ae2 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -22,7 +22,6 @@
   }
 }
 .bottom-data-list .sub-container {
-  padding: 10px;
   height: calc(100% - 64px);
   background-color: $--background-color-base;
   overflow-y: auto;
@@ -32,6 +31,15 @@
   &>.nz-table2 {
     height: 100%;
     padding-top: 20px !important;
+    .table-list {
+      background-color: $--background-color-empty;
+      .list-width {
+        width: 100%;
+        padding: 0 10px 5px;
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+    }
   }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{
@@ -46,9 +54,23 @@
 .has-sub-popper {
   color: $--color-danger;
 }
-.sub-box {
+.sub-box.detail-view-sub-box {
+  padding: 0 !important;
+  height: 100%;
+  .sub-list__tabs {
+    height: calc(100% - 12px);
+    border: 1px solid $--border-color-light;
+  }
+}
+.sub-box.bottom-box {
   height: 50%;
   position: relative;
+  padding: 0;
+  .bottom-data-list {
+    .sub-container {
+      padding: 10px;
+    }
+  }
 }
 .sub-list {
   height: calc(100% - 9px);
@@ -74,6 +96,7 @@
       .nz-table2 {
         box-sizing: border-box;
         padding: 0;
+        height: 100%;
       }
     }
   }
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
index 0f0c00641..c140911c5 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailView.scss
@@ -26,6 +26,9 @@
       flex: 1;
       height: calc(100% - 100px);
     }
+    .detail-row.selected {
+      background-color: $--detail-left-background-color;
+    }
     .nz-detail-view-pagination {
       height: 30px;
       text-align: center;
@@ -68,17 +71,15 @@
     color: $--color-text-regular;
     vertical-align: middle;
   }
-  /deep/ .bottom-log {
+.bottom-log {
     height: 100%;
     overflow-y: auto;
     padding-top: 15px;
   }
 }
-.detail-view {
-  .list-page div.main-container{
+.list-page div.main-container{
     height: calc(100% - 20px);
     width: calc(100% - 20px);
-  }
 }
 .nz-detail-view-no-data {
   border-top: 1px solid $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
index ac5a916a2..ba26178c0 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss
@@ -6,7 +6,7 @@
     border-radius: 2px;
   }
   .search-detail-box:hover{
-    background: #F9F9F9;
+    background: $--background-color-base;
   }
   .search-detail-box.select-dropdown{
     background: #F9F9F9;
@@ -51,6 +51,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    display: flex;
     .el-checkbox{
       width: calc(100% - 20px);
       height: 36px;
@@ -79,7 +80,7 @@
   }
   .el-dropdown-menu__item:not(.is-disabled):hover{
     color: $--color-text-secondary;
-    background: $--background-color-empty !important;
+    background: $--background-color-base !important;
   }
 }
 .clear-all-select{
diff --git a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
index 129ecf20d..f5c081a7e 100644
--- a/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
+++ b/nezha-fronted/src/assets/css/components/common/detailView/view/detailViewRight.scss
@@ -1,74 +1,62 @@
-.detail-view-sub-box {
-  .detail-view-right-top {
-    height: 60px;
-    background: $--background-color-empty;
-    border: 1px solid $--border-color-light;
-    margin-bottom: 10px
-  }
-
-  .sub-box {
-    height: 100%;
-    flex-direction: column;
-  }
-
-  .sub-list__tabs {
-    flex: 1;
-    background-color: $--background-color-empty;
-    height: calc(100% - 12px);
-    border: 1px solid $--border-color-light;
-
-    & > div {
+.detail-view.asset {
+  .nz-detail-view-right {
+    .sub-box {
       height: 100%;
+      flex-direction: column;
+    }
 
-      & > .nz-table2 {
-        height: calc(100% - 92px);
-        padding: 20px 20px 0;
+    .sub-box {
+      padding: 0;
+    }
+
+    .sub-box .sub-list__tabs .chart-list .nz-table2 {
+      padding: 20px;
+      height: 100%;
+    }
+
+    .sub-box .table-list {
+      padding: 0;
+      height: 100%;
+      background-color: $--background-color-empty;
+    }
+
+    .sub-box .pagination-bottom {
+      bottom: -3px;
+    }
+
+    .sub-box .sub-list-tab {
+      cursor: pointer;
+    }
+    .sub-list__tabs {
+      flex: 1;
+      background-color: $--background-color-empty;
+      height: calc(100% - 12px);
+      border: 1px solid $--border-color-light;
+
+      & > div {
+        height: 100%;
+
+        & > .nz-table2 {
+          height: calc(100% - 92px);
+          padding: 20px 20px 0;
+        }
+      }
+
+      .chart-list {
+        .nz-table2 {
+          box-sizing: border-box;
+          padding: 0;
+        }
       }
     }
 
-    .chart-list {
-      .nz-table2 {
-        box-sizing: border-box;
-        padding: 0;
-      }
+    .bottom-data-list .sub-container {
+      height: calc(100% - 45px);
+      position: relative;
+      padding: 0;
+      background-color: $--background-color-empty;
+      overflow-y: hidden;
     }
   }
-
-  .bottom-data-list .sub-container {
-    height: calc(100% - 45px);
-    position: relative;
-    padding: 0;
-    background-color: $--background-color-empty;
-    overflow-y: hidden;
-  }
-
-  .sub-box .top-tools.top-tools--sub {
-    border: none;
-    padding: 0 15px 0 0;
-    margin-right: 15px;
-    margin-left: 20px;
-    border-bottom: 1px solid $--border-color-light;
-  }
-
-  .sub-box .list-width {
-    padding: 0;
-  }
-
-  .sub-box .nz-table2 {
-    padding: 20px;
-    height: 100%;
-  }
-
-  .sub-box .table-list {
-    padding: 0;
-    height: 100%;
-  }
-
-  .sub-box .pagination-bottom {
-    bottom: -3px;
-  }
-
-  .sub-box .sub-list-tab {
-    cursor: pointer;
-  }
 }
+
diff --git a/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
index 182dabcb4..59f0d3e5c 100644
--- a/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
+++ b/nezha-fronted/src/assets/css/components/common/labelFilter/clickSearch.scss
@@ -114,3 +114,8 @@
 .search-content-box {
   border-bottom: 1px solid $--click-search-items-border-bottom-color !important;
 }
+.el-skeleton {
+  .el-skeleton__item.el-skeleton__p.is-first {
+    background-color: $--background-color-base;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss b/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss
new file mode 100644
index 000000000..26b92c863
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/paramBpx/paramBox.scss
@@ -0,0 +1,40 @@
+/* start--param*/
+.param-box, .tag-edit-box {
+  border: 1px solid #DCDFE6;
+  border-radius: 2px;
+}
+.param-box-endpoint {
+  height: 325px;
+}
+.param-box-module, .tag-edit-box {
+  height: 140px;
+}
+.param-box-row {
+  padding: 0;
+  position: relative;
+}
+.param-box-row>div {
+  display: inline-block;
+}
+.param-box-row-key, .param-box-row-value {
+  display: inline-block;
+  width: 43%;
+}
+.param-box-row-eq {
+  display: inline-block;
+  width: 22px;
+  text-align: center;
+  height: 32px;
+  line-height: 32px;
+  color: #c4c7cF;
+}
+.param-box-row-symbol {
+  display: inline-block;
+  padding-left: 3px;
+  font-size: 12px;
+  color: $--color-text-regular;
+  cursor: pointer;
+}
+.param-box .param-box-row .is-error {
+  padding-bottom: 10px;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
index e874011a1..9b8b8865a 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/guide.scss
@@ -38,7 +38,7 @@
         top: -1px;
         left: 0;
         transition: all linear .3s;
-        border-bottom: 3px solid #101B27;
+        border-bottom: 3px solid $--guide-border-color;
         background-color: $--background-color-base;
       }
 
@@ -52,7 +52,7 @@
         left: calc(50% - 6px);
         bottom: -9px;
         border-width: 6px 6px 0;
-        border-color: #424242 transparent transparent transparent;
+        border-color: $--guide-border-color transparent transparent transparent;
       }
 
       .guide-item {
@@ -62,8 +62,8 @@
         &:not(:nth-of-type(2)):before {
           top: 100px;
           width: 50%;
-          height: 2px;
-          background-color: #d8d8d8;
+          height: 1px;
+          background-color: $--select-page-focus-color;
           position: absolute;
           left: 0;
           content: "";
@@ -71,8 +71,8 @@
         &:not(:last-of-type):after {
           top: 100px;
           width: 50%;
-          height: 2px;
-          background-color: #d8d8d8;
+          height: 1px;
+          background-color: $--select-page-focus-color;
           position: absolute;
           right: 0;
           content: "";
@@ -80,15 +80,15 @@
 
         &.guide-item--active{
           .item__title {
-            color: #101B27;
+            color: $--color-text-regular;
             font-weight: bold;
           }
           .item__icon {
-            border-color: #ABABAB;
-            background-color: $--background-color-empty;
+            border-color: $--guide-icon-border-color;
+            background-color: $--background-color-base;
             cursor: pointer;
             i {
-              color: #ABABAB;
+              color: $--guide-icon-color;
             }
           }
           .item__icon.item__icon--disabled {
@@ -114,7 +114,7 @@
           border: 1px solid $--border-color-light;
           border-radius: 50%;
           box-sizing: border-box;
-          background-color: $--background-color-base;
+          background-color: $--background-color-empty;
           transition: all linear .3s;
           z-index: 1;
 
@@ -137,7 +137,7 @@
       height: 200px;
       padding-bottom: 32px;
       box-sizing: border-box;
-      border: 1px solid $--color-text-secondary;
+      border: 1px solid $--border-color-light;
 
       .desc-text {
         flex: auto;
@@ -145,7 +145,7 @@
 
         display: flex;
         align-items: center;
-        color: #101B27;
+        color: $--color-text-regular;
         font-size: 18px;
         word-break: keep-all;
       }
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
index 632461712..e7440279d 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
@@ -58,3 +58,6 @@
 .panel-dropdown-btn-delete:hover {
   color: #D96D7A;
 }
+.el-popover__reference {
+  color: $--color-text-regular;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
index 448e65ac9..d45f7b479 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertRuleBox.scss
@@ -17,6 +17,11 @@
       width: 100%;
     }
   }
+  .alert-box-duration.half-form-item {
+    .el-form-item__content {
+      line-height: 31px !important;
+    }
+  }
   .right-box-alert-rule .right-box__container .el-form-item__content .el-input-group--prepend{
     width: 100%;
   }
@@ -25,6 +30,8 @@
   }
   .el-input-group__prepend{
     position: relative;
+    background: $--border-color-light;
+    border: $--border-color-light;
     .hide-icon{
       width: 38px;
       .el-input__inner{
@@ -33,6 +40,10 @@
       }
     }
   }
+  .el-input-group__append {
+    background: $--border-color-light;
+    border: $--border-color-light;
+  }
   .alert-rule-split-title{
     background: $--background-color-base;
     font-size: 14px;
@@ -44,21 +55,22 @@
     margin-bottom: 10px;
     height: 24px;
   }
-  .el-form-item__content .el-input-group{
+  .el-form-item__content .el-input-group.el-input-group--prepend {
     vertical-align: middle;
-  }
-  .severity-item{
-    color: $--color-text-secondary;
-    font-size: 12px;
-    max-width: 120px;
-    overflow: hidden;
-  }
-  .text-ellipsis{
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap
+    width: 100%;
   }
   .query-row .metric-selector-input-box {
     width: calc(100% - 120px);
   }
 }
+.severity-item{
+  color: $--color-text-secondary;
+  font-size: 12px;
+  max-width: 120px;
+  overflow: hidden;
+}
+.text-ellipsis{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
index dde785655..91617cbcb 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/alertSilenceBox.scss
@@ -1,13 +1,22 @@
 .range-time {
-  /deep/ .el-radio-button--small .el-radio-button__inner, /deep/ .el-radio-group {
-    width: 100%
+  .el-radio-button--small .el-radio-button__inner,.el-radio-group {
+    width: 100%;
   }
-
-  /deep/ .el-radio-button {
+  .el-radio-group {
+    border-left: 1px solid $--border-color-light;
+  }
+  .el-radio-button__inner {
+    border: 1px solid  $--border-color-light;
+    border-left: 0;
+    background-color: $--background-color-empty;
+  }
+  .el-button.is-plain {
+    background-color: $--background-color-empty;
+  }
+  .el-radio-button {
     width: 14.2%
   }
-
-  /deep/ .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
+  .el-date-editor.el-range-editor.el-input__inner.el-date-editor--datetimerange.el-range-editor--mini {
     width: 100%;
   }
 
@@ -19,14 +28,15 @@
       width: 48%;
       flex: 1;
       position: relative;
-      /deep/ .el-date-editor.el-input, /deep/ .el-date-editor.el-input__inner{
+      .el-date-editor.el-input,.el-date-editor.el-input__inner{
         width: 100%;
       }
-      /deep/ .el-input__inner{
+      .el-input__inner{
         text-align: center;
       }
       .datepicker-title{
         position: absolute;
+        color: $--color-text-regular;
         left: 15px;
         z-index: 1;
       }
@@ -34,10 +44,10 @@
   }
 }
 .matchers{
-  /deep/ .el-input__prefix{
+  .el-input__prefix{
     left: 0;
   }
-  /deep/ .el-form-item__error{
+  .el-form-item__error{
     left: 126px;
     padding-top: 5px;
   }
@@ -55,7 +65,7 @@
       font-weight: 400;
       text-align: center;
     }
-    /deep/ .matchers-type-title.el-select--small .el-input__inner{
+    .matchers-type-title.el-select--small .el-input__inner{
       background:$--border-color-light;
       font-family: ArialMT;
       font-size: 14px;
@@ -70,19 +80,19 @@
     }
   }
 }
-/deep/ .silence-matchers-value{
+.silence-matchers-value{
   width: calc(100% - 100px);
 }
-/deep/ .silence-matchers-key{
+.silence-matchers-key{
   width: 100%;
 }
 .silence-matchers-regex{
   margin-left: 10px;
 }
-/deep/ .param-box-row-key{
+.param-box-row-key{
   width: 36%;
 }
-/deep/ .param-box-row-value{
+.param-box-row-value{
   width: 50%;
 }
 .module-add-label{
@@ -96,3 +106,8 @@
   line-height: 18px;
   margin-right: 80px;
 }
+.right-box-form-add.module-add-label {
+  .nz-icon-create-square {
+    color: $--nz-icon-color;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
index 2937f2758..ab7b6debc 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/editEndpointBoxNew.scss
@@ -53,8 +53,8 @@
     padding-left: 0;
   }
   .el-tabs__item{
-    width: 90px;
-    padding: 0;
+    min-width: 90px;
+    padding: 0 10px;
     text-align: center;
   }
   .el-tabs__item.is-active{
@@ -96,13 +96,17 @@
     border-radius: 2px;
     height: 140px;
     position: relative;
-    margin-top: 10px;
-    padding: 10px 0 10px 15px;
+    margin: 10px 0 16px 0;
+    padding: 10px 0px 10px 0;
     width:100%;
-    margin-left: 0;
-    pre{
-      max-height: 300px;
-      min-height: 100px;
+  }
+  .configs-copy-value {
+    pre {
+      color: $--color-text-primary;
+      padding: 15px;
+    }
+    i {
+      color: $--color-text-regular;
     }
   }
   .configs-copy-value .copy-value-content{
@@ -136,9 +140,10 @@
     position: absolute;
     right: 20px;
     top: 15px;
-    background: rgba(236,127,102,0.1);
+    background: $--background-color-copy;
     padding: 2px 6px;
-    color: #EC7F66;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   .endpoint-title{
     border: 1px solid $--border-color-light;
@@ -167,13 +172,13 @@
     }
   }
   .value-mapping-add {
-    background: rgba(250,144,28,0.1);
-    border: 1px solid #FFE0BD;
     margin-bottom: 10px;
     height: 24px;
-    line-height: 24px;
-    color: $--color-primary;
+    line-height: 23px;
     box-sizing: border-box;
+    background: $--background-color-copy;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   #module-box-relabel .vue-tags-input{
     max-width: unset;
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
index 062f8fcd8..dee3763a3 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -53,7 +53,7 @@
     padding-left: 0;
   }
   .el-tabs__item{
-    width: 90px;
+    min-width: 90px;
     padding: 0 10px;
     text-align: center;
   }
@@ -98,13 +98,17 @@
     border-radius: 2px;
     height: 140px;
     position: relative;
-    margin-top: 10px;
-    padding: 10px 0px 10px 15px;
+    margin: 10px 0 16px 0;
+    padding: 10px 0px 10px 0;
     width:100%;
-    margin-left: 0px;
-    pre{
-      max-height: 300px;
-      min-height: 100px;
+  }
+  .configs-copy-value {
+    pre {
+      color: $--color-text-primary;
+      padding: 15px;
+    }
+    i {
+      color: $--color-text-regular;
     }
   }
   .configs-copy-value .copy-value-content{
@@ -138,9 +142,10 @@
     position: absolute;
     right: 20px;
     top: 15px;
-    background: rgba(236,127,102,0.1);
+    background: $--background-color-copy;
     padding: 2px 6px;
-    color: #EC7F66;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   .endpoint-title{
     border: 1px solid $--border-color-light;
@@ -169,13 +174,13 @@
     }
   }
   .value-mapping-add {
-    background: rgba(250,144,28,0.1);
-    border: 1px solid #FFE0BD;
     margin-bottom: 10px;
     height: 24px;
-    line-height: 24px;
-    color: $--color-primary;
+    line-height: 23px;
     box-sizing: border-box;
+    background: $--background-color-copy;
+    border: 1px solid $--span-nz-icon-border-color;
+    color: $--nz-icon-color;
   }
   #module-box-relabel .vue-tags-input{
     max-width: unset;
@@ -227,7 +232,7 @@
   border: none!important;
 }
 .param-box-row-symbol {
-  color: $--color-text-regular;
+  color: $--color-text-regular !important;
 }
 .module-form__label {
   padding-bottom: 6px;
@@ -235,3 +240,22 @@
   line-height: 16px;
   color: $--color-text-regular;
 }
+.el-tooltip__popper.prevent-clickoutside {
+  background-color: $--background-color-empty;
+}
+.vue-tags-input,.ti-new-tag-input {
+  background-color: $--value-input-background-color !important;
+  .ti-input {
+    border: 1px solid $--border-color-light;
+    .ti-tag.ti-valid {
+      background-color: $--value-background-color;
+      color: $--value-color;
+    }
+    .ti-new-tag-input {
+      color: $--color-text-regular !important;
+    }
+  }
+  .ti-input:hover {
+    border: 1px solid $--border-color-light-hover;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/common/searchInput.scss b/nezha-fronted/src/assets/css/components/common/searchInput.scss
index 5b230d706..433a82a94 100644
--- a/nezha-fronted/src/assets/css/components/common/searchInput.scss
+++ b/nezha-fronted/src/assets/css/components/common/searchInput.scss
@@ -4,7 +4,7 @@
   border: none;
   outline: none;
   cursor: pointer;
-  border-left: 1px solid $--border-color-base;
+  border-left: 1px solid $--border-color-light;
   background-color: lighten($--background-color-base, 10%);
 
   i {
@@ -32,7 +32,7 @@
   position: relative;
   line-height: 25px;
   border-radius: 2px;
-  border: 1px solid $--border-color-base;
+  border: 1px solid $--border-color-light;
 }
 .new-search .search-input-all{
   width: 226px !important;
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 b465bc6e9..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
@@ -1,15 +1,17 @@
-.pointer{
-  background: $--color-primary;
-  border-radius: 2px;
-  border: none;
-  width: 40px;
-  height: 22px;
-  box-sizing: border-box;
-  text-align:center;
-  color: #fff;
-  font-size: 12px;
-  margin-right: 20px;
-}
+//.alert-message-list {
+//  .pointer{
+//    background: $--color-primary;
+//    border-radius: 2px;
+//    border: none;
+//    width: 40px;
+//    height: 22px;
+//    box-sizing: border-box;
+//    text-align:center;
+//    color: #fff;
+//    font-size: 12px;
+//    margin-right: 20px;
+//  }
+//}
 .alertLabelInfo{
   border: 1px solid $--border-color-light;
   border-bottom: none;
@@ -94,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/common/table/special/endpointQuery.scss b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
index 00b368316..e8b10b9dd 100644
--- a/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/special/endpointQuery.scss
@@ -22,4 +22,13 @@
     margin-right: -5px;
     padding: 0 5px;
   }
+  .full-width-height{
+    width: 100%;
+    height: 100%;
+  }
+  .control-icon-unchecked {
+    color: #bcbec2;
+    cursor: not-allowed;
+    background-color: #f4f4f5;
+  }
 }
diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index af5001291..0b4b28b69 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -19,9 +19,12 @@
     line-height: 30px;
   }
 }
+.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
+  color: $--color-primary !important;
+}
 .nz-dashboard-dropdown-bg {
   background: $--color-primary;
-  color: #fff !important;
+  color: $--time-picker-hover-color !important;
 }
 .calendar-dropdown-title {
   white-space: nowrap;
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index eca051def..e8e45396a 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,8 +1,11 @@
-.el-picker-panel,.sp-base.sp-inputs,.sp-search,.sp-result-area,.sp-pagination{
-  background: $--background-color-empty !important;
+.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
+  background: $--input-background-color !important;
 }
-.el-date-table td.today span {
-  color: $--button-primary-color !important;
+.sp-search,.sp-result-area,.sp-pagination {
+  background-color: $--background-color-empty !important;
+}
+.el-date-table td.today.available span {
+  color: $--select-page-color !important;
 }
 .sp-table {
   th {
@@ -17,9 +20,15 @@
 }
 .sp-selected-tag {
   color: $--color-text-regular !important;
-  background-color: $--background-color-base !important;
+  background-color: $--select-page-tag-background-color !important;
   i {
-    color: #aaa !important;
+    color: $--color-text-regular !important;
+  }
+}
+.sp-selected-tag:hover {
+  background-color: $--background-color-empty !important;
+  i:hover {
+    color: $--color-text-primary !important;
   }
 }
 .sp-search-input {
@@ -27,10 +36,10 @@
   border: 1px solid $--border-color-light !important;
   color: $--color-text-regular !important;
 }
-.sp-base.sp-inputs {
+.sp-base.sp-inputs,.sp-base.sp-input {
   border: 1px solid $--border-color-light !important;
 }
-.sp-base.sp-inputs:hover,.sp-base.sp-inputs:focus {
+.sp-base.sp-inputs:hover,.sp-base.sp-input:hover,.sp-base.sp-inputs:focus,.sp-base.sp-input:focus {
   border: 1px solid $--border-color-light-hover !important;
 }
 .v-dropdown-container.v-dropdown-no-border {
@@ -45,3 +54,24 @@ div.sp-result-area table.sp-table tbody tr.sp-selected td {
   color: $--select-page-focus-color !important;
   cursor: default;
 }
+div.sp-pagination ul li a:hover {
+  color: $--color-text-regular !important;
+}
+div.v-selectpage div.sp-input-container div.sp-input {
+  color: $--color-text-regular !important;
+}
+div.v-selectpage div.sp-input-container.sp-open div.sp-input {
+  border: 1px solid #aaa !important;
+  border-radius: 2px;
+  color: $--color-text-regular !important;
+}
+.sp-button {
+  .sp-caret {
+    color: $--color-text-regular !important;
+  }
+}
+.sp-button.open {
+  .sp-caret {
+    color: $--color-text-regular !important;
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index a3565306e..e557e7927 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -88,3 +88,5 @@
 @import './page/monitor/project/project.scss';
 
 @import 'common/v-selectpagenew/selectpage.scss';
+
+@import "common/paramBpx/paramBox";
diff --git a/nezha-fronted/src/assets/css/components/layout/header.scss b/nezha-fronted/src/assets/css/components/layout/header.scss
index 59f64d781..3dbb48dc0 100644
--- a/nezha-fronted/src/assets/css/components/layout/header.scss
+++ b/nezha-fronted/src/assets/css/components/layout/header.scss
@@ -9,9 +9,9 @@
       height: 32px;
       display: inline-block;
       line-height: 32px;
-      background: rgba(60,146,241,0.10);
+      background: $--profile-span-background-color;
       font-size: 14px;
-      color: #3C92F1;
+      color: $--profile-span-color;
       letter-spacing: 0;
       font-weight: 500;
       text-transform: capitalize;
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/config/about.scss b/nezha-fronted/src/assets/css/components/page/config/about.scss
index e7cc37cfd..4008ce183 100644
--- a/nezha-fronted/src/assets/css/components/page/config/about.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/about.scss
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  background-color: white;
+  background-color: $--background-color-empty;
   border: 10px solid $--background-color-base;
   box-sizing: border-box;
 
diff --git a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
index bb68b0915..e8849a5ca 100644
--- a/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/mibBrowser.scss
@@ -21,7 +21,7 @@
   }
   #browser-advanced {
     border-radius: 0;
-    border-right: 1px solid $--border-color-base-focus;
+    border-right: 1px solid $--border-color-light;
   }
   .mib-browser-btn-group {
     position: relative;
@@ -60,7 +60,7 @@
     display: flex;
     height: calc(100% - 55px);
     width: 100%;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     border-radius: 4px;
     box-sizing: border-box;
   }
@@ -90,14 +90,14 @@
     width: 100%;
     background-color: $--background-color-base;
     cursor: ns-resize;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     border-left: none;
     border-right: none;
   }
   .mib-browser-detail-row {
     line-height: 25px;
     background-color: $--background-color-empty;
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     font-size: 14px;
     display: flex;
   }
@@ -122,11 +122,11 @@
   /*第一列宽75%*/
   .mib-browser-detail-row>div:last-of-type {
     width: 75%;
-    border-left: 1px solid $--border-color-base;
+    border-left: 1px solid $--border-color-light;
     word-break: break-all;
   }
   .mib-browser-detail-row:not(:last-of-type) {
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     height: 25px;
   }
   .mib-browser-detail-row:last-of-type {
@@ -144,7 +144,7 @@
   }
   .left-right-resize {
     width: 2px;
-    border: 1px solid $--border-color-base;
+    border: 1px solid $--border-color-light;
     background-color: $--background-color-base;
     cursor: ew-resize;
     height: 100%;
@@ -163,6 +163,9 @@
       .el-table {
         height: calc(100% - 20px) !important;
         width: calc(100% - 20px) !important;
+        .el-table__header-wrapper th {
+          background-color: $--background-color-base;
+        }
       }
       .el-table__body-wrapper td {
         padding: 2px 0 !important;
@@ -174,7 +177,7 @@
     line-height: 30px;
     color: $--color-text-primary;
     font-size: 16px;
-    border-bottom: 1px solid $--border-color-base;
+    border-bottom: 1px solid $--border-color-light;
     padding: 0 5px 0 8px;
     display: flex;
     justify-content: space-between;
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 c250edb0e..4550cef0e 100644
--- a/nezha-fronted/src/assets/css/components/page/config/profile.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/profile.scss
@@ -25,12 +25,12 @@
         margin-left: 20px;
         span {
           display: inline-block;
-          background: rgba(60,146,241,0.10);
+          background: $--profile-span-background-color;
           text-transform: capitalize;
           width: 100%;
           height: 100%;
           font-size: 30px;
-          color: #3C92F1;
+          color: $--profile-span-color;
           letter-spacing: 0;
           font-weight: 500;
           border-radius: 100%;
@@ -74,18 +74,18 @@
           line-height: 22px;
           font-weight: 400;
         }
-        .profile-left__header-username__span {
+        .profile-left__header-username-span {
           display: inline-block;
           text-align: center;
           width: 42px;
           height: 24px;
           line-height: 25px;
           margin-left: 10px;
-          background-color: #ecf5ff;
-          border-color: #d9ecff;
-          border-radius: 10px;
+          background-color: $--profile-2FA-background-color;
+          border: 1px solid $--profile-span-border-color;
+          border-radius: 25px;
           font-size: 14px;
-          color: #409EFF;
+          color: $--profile-2FA-color;
           letter-spacing: 0;
           font-weight: 400;
         }
@@ -173,7 +173,7 @@
     }
     .profile-left__button {
       margin-left: 50px;
-      .profile-left__button-footer__btn {
+      .profile-left__button-footer-btn {
         margin: 0 10px;
         height: 30px;
         min-width: 74px;
diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss
index 8a25c6df1..06fa6a237 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -2,6 +2,13 @@
   height: 100%;
   position: relative;
   margin-top: 10px;
+  .el-tag.el-tag--info {
+    background-color: $--chart-title-hover-background-color;
+    border: 1px solid $--border-color-light;
+    i {
+      background-color: $--background-color-base;
+    }
+  }
 }
 .system-config-form{
   width: 61.8% !important;
@@ -96,19 +103,19 @@
   cursor: pointer;
   color: $--color-text-primary;
 }
-/deep/ .el-form-item--small .el-form-item__error{
+.el-form-item--small .el-form-item__error{
   padding-top: 0;
 }
 .linkUrlTip{
   width: 430px;
 }
-.system-config-form.terminal  /deep/ .el-input-number--small{
+.system-config-form.terminal .el-input-number--small{
   width: 512px;
 }
-.system-config-form.basicForm  /deep/ .el-input-number--small{
+.system-config-form.basicForm .el-input-number--small{
   width: 512px;
 }
-.system-config-form  /deep/ .el-input input{
+.system-config-form .el-input input{
   text-align: left;
 }
 .utc-item {
@@ -195,6 +202,39 @@
   .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(:first-child) {
     margin-left: 5px;
   }
+  .el-input-group__prepend {
+    background-color: $--right-box-sub-title-background-color;
+    border: 1px solid $--border-color-light;
+    border-right: none;
+  }
+  .el-input-group__append {
+    background-color: $--right-box-sub-title-background-color;
+    border: 1px solid $--border-color-light;
+    border-left: none;
+  }
+  .el-input-number__decrease,.el-input-number__increase,.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled {
+    background-color: $--popover-background-color;
+  }
+  .el-input-number__decrease {
+    border-left: 1px solid $--border-color-light !important;
+  }
+  .el-input-number__increase {
+    border-left: 1px solid $--border-color-light;
+    border-bottom: 1px solid $--border-color-light !important;
+  }
+  .el-input-number__decrease.is-disabled {
+    border-left: 1px solid $--border-color-light;
+  }
+  .el-input-number__increase.is-disabled {
+    border-left: 1px solid $--border-color-light;
+    border-bottom: 1px solid $--border-color-light;
+  }
+  .el-input__inner:hover {
+    border-color: $--border-color-light-hover;
+  }
+  .el-input__inner:focus {
+    border-color: $--color-primary;
+  }
 }
 .system-config-form .el-form-item__content{
   width: 512px;
@@ -210,12 +250,13 @@
   border-top: unset;
   height: 100%;
 }
-.system-tabs .el-tabs--border-card{
+.system-tabs.el-tabs--border-card{
   box-shadow: unset !important;
   height: 100%;
   width: 100%;
   border-bottom: unset;
   border-left: unset;
+  background-color: $--background-color-empty;
 }
 .reset-form .el-checkbox-group{
   margin-left: -28px !important;
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
index bff01217d..f87c11add 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
@@ -3,6 +3,19 @@
   padding: 10px 0 10px 10px;
   background-color: $--background-color-base;
   box-sizing: border-box;
+  pre {
+    border: 1px solid $--border-color-base;
+    border-left: 4px solid #e6522c;
+    border-radius: 0;
+    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+    padding: 15px;
+  }
+
+  pre code {
+    white-space: pre;
+  }
 
   .el-table--border::after, .el-table--group::after, .el-table::before {
     height: 0;
@@ -280,20 +293,6 @@
   background-color: transparent;
 }
 
-pre {
-  border: 1px solid $--border-color-base;
-  border-left: 4px solid #e6522c;
-  border-radius: 0;
-  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-  background-color: $--background-color-empty;
-  color: $--color-text-primary;
-  padding: 15px;
-}
-
-pre code {
-  white-space: pre;
-}
-
 code {
   color: $--color-text-primary;
 }
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
index 46058dcb5..a62d24ef4 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
@@ -4,6 +4,9 @@
   display: flex;
   .no-resize{
     background: rgba(255,255,255,0);
+    .el-textarea__inner {
+      border: 1px solid $--border-color-light;
+    }
   }
 
   .query-row {
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/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index 934eab9f7..648167351 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -6,6 +6,11 @@
   display: flex;
   flex-direction:column;
 }
+.panel.list-page {
+  .table-list {
+    height: calc(100% - 58px);
+  }
+}
 
 .panel .el-table {
   border-radius: 5px;
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 9128c7878..f19cef107 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -1,32 +1,60 @@
-.main-list--project {
-  .main-list{
+.main-list--project.main-list {
     height: 100%;
     width: 100%;
     display: flex;
     background-color: $--background-color-base;
     overflow-x: auto;
-    .projectList{
-      flex: 1;
-      width: calc(50% - 10px);
-      margin-right: 10px;
-      min-width: 745px;
+  .projectList{
+    flex: 1;
+    width: calc(50% - 10px);
+    margin-right: 10px;
+    min-width: 745px;
+  }
+  .projectTopo{
+    flex: 1;
+    width: calc(50% - 10px);
+    margin-right: 10px;
+    min-width: 435px;
+    div.page {
+      textarea {
+        display: none;
+      }
     }
-    .projectTopo{
-      flex: 1;
-      width: calc(50% - 10px);
-      margin-right: 10px;
-      min-width: 435px;
-
-    }
-    .hide{
-      display: none;
-    }
-    .ml10{
-      margin-left: 10px;
+    .project-box.list-page {
+      width: 100%;
+      height: calc(100% - 8px)!important;
+      position: relative;
+      border-radius: 2px;
+      .main-list {
+        height: 100% !important;
+        overflow: visible;
+        .top-tools div:nth-of-type(1) {
+          color: $--color-text-primary;
+        }
+        //.nz-table2 {
+        //  padding: 0 !important;
+        //  border: 1px solid $--border-color-base !important;
+        //}
+        .right-bottom-zoom {
+          .zoom-option {
+            color: $--color-text-regular !important;
+          }
+          .zoom-option:hover {
+            color: $--color-text-regular !important;
+          }
+        }
+      }
     }
   }
+  .hide{
+    display: none;
+  }
+  .ml10{
+    margin-left: 10px;
+  }
   .main-container{
     padding-right: 0 !important;
+    width: calc(100% - 10px);
   }
 }
 .project-calendar .el-input__inner {
@@ -61,7 +89,7 @@
     }
   }
   .pagination-bottom{
-    width: calc(100% - 30px);
-    bottom: 18px;
+    width: calc(100% - 30px) !important;
+    bottom: 18px !important;
   }
 }
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 2f2f84bdf..522c7f547 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -14,6 +14,8 @@ $--background-color-1: #444440;
 $--background-color-2: #000;
 // 背景色 copy
 $--background-color-copy: #454545;
+// 禁用背景色
+$--background-color-disabled: #222329;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: #2D2E35;
@@ -33,6 +35,8 @@ $--color-text-regular: #BEBEBE;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #505050;
 
 /* 4.边框色 */
 // 普通边框色
@@ -127,7 +131,6 @@ $--button-icon-hover-border-color: $--button-icon-border-color; // hover边框
 $--button-icon-active-border-color: $--color-text-primary; // focus边框色
 
 /* Asset */
-$--asset-label-btn-icon-color: $--button-primary-color; //icon
 $--asset-label-btn-border-color: $--border-color-light; // border
 $--asset-label-btn-background-color: #222329; // background
 
@@ -136,10 +139,66 @@ $--click-search-items-border-color: $--background-color-copy; // border
 $--click-search-items-border-bottom-color: #2E2E2E; // border-BOTTOM
 $--click-search-items-color: $--color-text-regular; // color
 
-// selectPage
+// 第三方插件 下拉多选搜索 selectPage 主题颜色
 $--select-page-background-color: $--background-color-empty;
 $--select-page-hover-background-color: $--button-light-hover-background-color;
 $--select-page-focus-color: #666666;
+$--select-page-color: $--button-primary-color;
+$--select-page-tag-background-color: $--background-color-empty;
+$--select-page-border-color: $--border-color-light;
+
+/* el-picker 下拉时间选择器 */
+$--picker-page-background-color: $--select-page-tag-background-color;
+$--picker-page-border-color: $--select-page-border-color;
+$--picker-page-btn-color: mix(#FFF, $--color-primary, 15%);
+$--picker-page-btn-border-color:  mix(#FFF, $--color-primary, 15%);
+$--picker-page-btn-background-color: $--background-color-base;
+
+// icon字色
+$--nz-icon-color: $--button-primary-color;
+$--span-nz-icon-border-color: $--border-color-light-hover;
+
+// value
+$--value-background-color: $--background-color-empty;
+$--value-input-background-color: $--background-color-base;
+$--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;
+
+/* system */
+$--system-input-background-color: #C0C4CC;
+
+/* profile */
+$--profile-span-color: $--time-picker-hover-color;
+$--profile-span-border-color: #87C0FF;
+$--profile-span-background-color: $--overview-asset-icon-background-color;
+$--profile-2FA-background-color: $--background-color-empty;
+$--profile-2FA-color: #3C92F1;
+
+/* guide */
+$--guide-border-color: $--select-page-focus-color;
+$--guide-icon-border-color: $--time-picker-hover-color;
+$--guide-icon-color: $--time-picker-hover-color;
+
+/* detail */
+$--detail-left-background-color: $--background-color-base;
 
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 19e75c623..7f649081a 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -14,6 +14,8 @@ $--background-color-1: #EFEFEF;
 $--background-color-2: #F9F9F9;
 // 背景色 copy
 $--background-color-copy: #fdf5e0;
+// 禁用背景色
+$--background-color-disabled: #DEDEDE;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: #202F3F;
@@ -33,6 +35,8 @@ $--color-text-regular: #666665;
 $--color-text-secondary: #999998;
 // 链接字色
 $--color-text-link: #3C92F1;
+// 禁用字色
+$--color-text-disabled: #FFFFFF;
 
 /* 4.边框色 */
 // 普通边框色(覆盖element-ui内置变量)
@@ -125,7 +129,6 @@ $--button-icon-hover-border-color: $--border-color-base; // hover边框色
 $--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
 
 /* Asset */
-$--asset-label-btn-icon-color: $--color-primary; //icon
 $--asset-label-btn-border-color: mix(#FFF, $--color-primary, 60%); // border
 $--asset-label-btn-background-color: #FFF4E8; // background
 
@@ -135,9 +138,65 @@ $--click-search-items-border-bottom-color: $--border-color-base; // border
 $--click-search-items-color: $--color-primary; // color
 
 // selectPage
-$--select-page-background-color: $--background-color-empty;
+$--select-page-background-color: $--background-color-base;
 $--select-page-hover-background-color: #f6f8fa;
 $--select-page-focus-color: #CCCCCC;
+$--select-page-color: #232F3E;
+$--select-page-tag-background-color: #e4eaee;
+$--select-page-border-color: $--border-color-base-focus;
+
+/* el-picker 下拉时间选择器 */
+$--picker-page-background-color: $--background-color-empty;
+$--picker-page-border-color: $--select-page-border-color;
+$--picker-page-btn-color: $--color-primary;
+$--picker-page-btn-border-color: $--color-primary;
+$--picker-page-btn-background-color: $--color-text-disabled;
+
+
+// icon 字色
+$--nz-icon-color: $--color-primary; //icon
+$--span-nz-icon-border-color: $--asset-label-btn-border-color;
+
+// value
+$--value-background-color: #5C6BC0;
+$--value-color: $--color-text-disabled;
+$--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;
+
+/* system */
+$--system-input-background-color: $--background-color-empty;
+
+/* profile */
+$--profile-span-color: $--color-text-link;
+$--profile-span-border-color: $--color-text-link;
+$--profile-span-background-color: mix(#FFF, $--color-text-link, 90%);
+$--profile-2FA-background-color: $--profile-span-background-color;
+$--profile-2FA-color: $--color-text-link;
+
+/* guide */
+$--guide-border-color: #18171D;
+$--guide-icon-border-color: #666666;
+$--guide-icon-color: $--guide-icon-border-color;
+
+/* detail */
+$--detail-left-background-color: $--table-row-hover-background-color;
 
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 651cea591..40633dcd2 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -707,46 +707,6 @@ li {
 .right-box-form-btns button {
   margin-left: 10px;
 }
-/* start--param*/
-.param-box, .tag-edit-box {
-  border: 1px solid #DCDFE6;
-  border-radius: 2px;
-}
-.param-box-endpoint {
-  height: 325px;
-}
-.param-box-module, .tag-edit-box {
-  height: 140px;
-}
-.param-box-row {
-  padding: 0;
-  position: relative;
-}
-.param-box-row>div {
-  display: inline-block;
-}
-.param-box-row-key, .param-box-row-value {
-  display: inline-block;
-  width: 43%;
-}
-.param-box-row-eq {
-  display: inline-block;
-  width: 22px;
-  text-align: center;
-  height: 32px;
-  line-height: 32px;
-  color: #c4c7cF;
-}
-.param-box-row-symbol {
-  display: inline-block;
-  padding-left: 3px;
-  font-size: 12px;
-  color: #DCDFE6;
-  cursor: pointer;
-}
-.param-box .param-box-row .is-error {
-  padding-bottom: 10px;
-}
 /* end--param*/
 .right-box-form-content .el-select {
   width: 100%;
@@ -1424,24 +1384,6 @@ li {
   width: calc(50% - 30px);
   margin-left: 0;
 }
-.right-box .right-box-form-add,.right-box  .right-box-form-minus-box{
-  background: rgba(250,144,28,.1);
-  padding:4px 6px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-.right-box .right-box-form-add .nz-icon-create-square{
-  color: $--color-primary;
-  cursor: pointer;
-}
-.right-box .right-box-form-add .nz-icon-plus{
-  color: $--color-primary;
-  cursor: pointer;
-}
-.right-box  .right-box-form-minus-box .nz-icon-minus{
-  color: $--color-primary;
-  cursor: pointer;
-}
 .nz-icon-caret-right{
   font-size: 12px;
 }
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index 086c73014..c192a41fc 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 867556d1d..40d8e42eb 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 31bef095c..e7afb3083 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -60,7 +60,7 @@
           <template v-if="!hasLegendOptions">
             <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -79,7 +79,7 @@
                 <tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index a90a4fa79..210c8bf3c 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -78,7 +78,7 @@
         <template v-if="!hasLegendOptions">
           <div class='legend-container' ref="legendArea" v-show="firstShow">
             <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
             </div>
           </div>
         </template>
@@ -96,7 +96,7 @@
               <tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
                 <td>
                   <div :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
-                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                   </div>
                 </td>
                 <template v-for="(legendOption, i) in legendOptions">
@@ -158,7 +158,7 @@
           <template v-if="!hasLegendOptions">
             <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -177,7 +177,7 @@
                 <tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 7f81fa529..9bc8e27f6 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -814,7 +814,7 @@ export default {
         // data = JSON.parse(localStorage.getItem('topoData'))
         if (!res.data.topo || !data.pens) {
           data = {
-            bkColor: '#FFFFFF',
+            bkColor: '#FFFFFF00',
             gridSize: 10,
             gridColor: '#ededed',
             lineWidth: 1,
@@ -893,6 +893,9 @@ export default {
             if (!data.bkImage) {
               data.bkImage = undefined
             }
+            if (data.bkColor === '#FFFFFF') {
+              data.bkColor = '#FFFFFF00'
+            }
             resolve(data)
           }, 100)
         }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 30d9f33e0..46c3df5a7 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -220,14 +220,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .full-width-height{
-    width: 100%;
-    height: 100%;
-  }
-  .control-icon-unchecked {
-    color: #bcbec2;
-    cursor: not-allowed;
-    background-color: #f4f4f5;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 0649bb244..72d68c252 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -21,7 +21,7 @@
       <el-row v-if="!single" class="color-tab">
         <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
       </el-row>
-      <sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
+      <sketch v-model="colors" :disableAlpha="disableAlpha" @input="updateValue" :presetColors="presetColors"/>
     </div>
   </span>
 </template>
@@ -67,6 +67,10 @@ export default {
           '#7C2EA3', '#8F3BB8', '#B877D9'
         ]
       }
+    },
+    disableAlpha: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {},
@@ -89,7 +93,12 @@ export default {
   methods: {
     updateValue (color) {
       this.colors = color.hex
-      this.$emit('colorChange', color.hex, this.keyName)
+      if (!this.disableAlpha) {
+        this.colors = color.hex8
+        this.$emit('colorChange', color.hex8, this.keyName)
+      } else {
+        this.$emit('colorChange', color.hex, this.keyName)
+      }
     },
     changeColor () {
       this.showColorPicker = !this.showColorPicker
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index e224034d0..8a7d093a6 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1709,7 +1709,7 @@ export default {
         return ''
       }
       ;
-      if (color.length <= 7) {
+      if (color.indexOf('#') === 0) {
         return color
       }
       const rgb = color.split(',')
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 4e7834e2e..bd08cf041 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -152,7 +152,7 @@
             </div>
           </div>
           <div :class="['page',fromOverView?'overview-page':'']" :style="{
-            border: fromOverView ? 'none' :`1px solid ${theme.borderColorLight}`
+            border: fromOverView ? 'none' :`1px solid $--color-text-regular`
           }">
             <!--画布部分-->
             <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
@@ -805,7 +805,7 @@ export default {
           // data = JSON.parse(localStorage.getItem('topoData'))
           if (!res.data.topo || !data.pens) {
             data = {
-              bkColor: '#FFFFFF',
+              bkColor: '#FFFFFF00',
               gridSize: 10,
               gridColor: '#ededed',
               lineWidth: 1,
@@ -886,6 +886,9 @@ export default {
               if (!data.bkImage) {
                 data.bkImage = undefined
               }
+              if (data.bkColor === '#FFFFFF') {
+                data.bkColor = '#FFFFFF00'
+              }
               Promise.all(promiseArr).then(res => {
                 res.forEach((response, index) => {
                   const item = data.pens[index]
diff --git a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
index 3bd619992..98e049c4d 100644
--- a/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
@@ -87,7 +87,7 @@
           <el-form-item
             v-if="showSnmpTrap"
             :label="$t('alert.config.threshold')"
-            prop="threshold" class="half-form-item"
+            prop="threshold" class="half-form-item alert-box-threshold"
             style="display: inline-block;"
             :rules="[
               { required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' },
@@ -115,7 +115,7 @@
             <el-input id="alert-box-input-inr" v-model.number="editAlertRule.inr" :placeholder="$t('alert.config.inrPlaceholder')" size="small" type="text" :disabled="!showSnmpTrap"></el-input>
           </el-form-item>
           <!--last-->
-          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last"  class="half-form-item" :rules=" [
+          <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.for')" prop="last"  class="half-form-item alert-box-duration" :rules=" [
           { required: showSnmpTrap, message: this.$t('validate.required'), trigger: 'change' },
         ]">
             <el-input id="alert-box-input-last" :controls="false" v-model.number="editAlertRule.last" placeholder="" size="small" :disabled="!showSnmpTrap" type="text">
diff --git a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
index d2dbb6c9b..1ee6a1472 100644
--- a/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
@@ -81,7 +81,7 @@
                 <el-input v-model="item.value" class="silence-matchers-value" placeholder="value"  size="mini"></el-input>
                 <el-checkbox v-model="item.regex" :false-label="0" :true-label="1" class="silence-matchers-regex" >Regex</el-checkbox>
               </el-form-item>
-              <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
+              <span :id="'moduel-remove-label-'+index" class="param-box-row-symbol" @click="removematchers(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
             </div>
             <div class="" style="text-align: center;">
                <span id="module-add-label" type="button" @click="addmatchers" class="right-box-form-add module-add-label right-box-form-minus-box module-add-label" style="">
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index 359e41b68..8d302252a 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -561,9 +561,9 @@
             {{$t('overall.preview')}}
           </div>
           <div class="right-box-line"></div>
-          <div class="configs-copy-value">
+          <div class="configs-copy-value" style="overflow: auto">
             <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-            <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+            <pre>{{configsCopyValue}}</pre>
           </div>
         </el-form>
       </div>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 1764a4398..5b9378a7a 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -427,7 +427,7 @@
                         >
                           <el-input v-model="item2.expressions[eindex].key" placeholder="key" size="mini" ></el-input>
                         </el-form-item>
-                        =
+                        <span class="param-box-row-eq">=</span>
                         <el-form-item
                           :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.expressions.'+eindex+'.value'"
                           :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
@@ -542,7 +542,7 @@
           <div class="right-box-line"></div>
           <div id="module-box-preview" ref="previewBoxScrollbar"  class="configs-copy-value"  style="overflow: auto;">
             <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue"></i></span>
-            <pre style="overflow-y: auto;height:100%">{{configsCopyValue}}</pre>
+            <pre>{{configsCopyValue}}</pre>
           </div>
         </el-form>
       </div>
diff --git a/nezha-fronted/src/components/page/config/profile.vue b/nezha-fronted/src/components/page/config/profile.vue
index de3a66332..c59324b47 100644
--- a/nezha-fronted/src/components/page/config/profile.vue
+++ b/nezha-fronted/src/components/page/config/profile.vue
@@ -15,7 +15,7 @@
               <span :class="(mfaEnable == '1' || mfaLevel > 0)?'MfaName':'name'">
                 {{userList.name}}
               </span>
-              <span class="profile-left__header-username__span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
+              <span class="profile-left__header-username-span" v-show="mfaEnable == '1' || mfaLevel > 0">2FA</span>
             </div>
           </el-popover>
           <el-popover
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">