diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 3879640f56..bdf7044e0f 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -527,12 +527,15 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
 
   &.dark {
     color: #a6a6a6;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
     &.active {
       color: var(--ed-color-primary);
       background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
-    }
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      &:hover {
+        background-color: #3370ff33;
+      }
     }
   }
 
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index 07e40270fe..a3ec1a6d1f 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -40,7 +40,7 @@
             >{{ t('visualization.apply_this_template') }}</el-button
           >
           <el-divider class="custom-divider-line" direction="vertical" />
-          <el-icon class="custom-market-icon hover-icon" @click="close"><Close /></el-icon>
+          <el-icon class="custom-market-icon hover-icon_custom" @click="close"><Close /></el-icon>
         </el-row>
       </el-row>
       <el-row class="template-area">
@@ -91,7 +91,7 @@
           </el-select>
           <template v-if="['branchCreate', 'create'].includes(state.curPosition)">
             <el-divider class="custom-divider-line" direction="vertical" />
-            <el-icon class="custom-market-icon hover-icon" @click="close"><Close /></el-icon>
+            <el-icon class="custom-market-icon hover-icon_custom" @click="close"><Close /></el-icon>
           </template>
         </el-row>
       </el-row>
@@ -697,13 +697,32 @@ defineExpose({
 
 .custom-divider-line {
   height: 16px;
-  margin-top: 6px;
+  margin: 8px 14px 0 16px !important;
 }
 
 .custom-market-icon {
   font-size: 20px;
   margin-top: 4px;
+  height: 24px !important;
+  width: 24px !important;
   cursor: pointer;
+
+  &.hover-icon_custom {
+    border-radius: 4px;
+    color: #646a73;
+
+    &[aria-expanded='true'] {
+      background: rgba(31, 35, 41, 0.1);
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+    }
+
+    &:active {
+      background: rgba(31, 35, 41, 0.2);
+    }
+  }
 }
 
 .custom-back-icon {