diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
index de6bdedd..3a7ad7b6 100644
--- a/ui/src/components/yaml/styles.module.less
+++ b/ui/src/components/yaml/styles.module.less
@@ -220,9 +220,11 @@
       justify-content: space-between;
       align-items: center;
       padding: 12px;
-      background: linear-gradient(135deg,
-          rgba(147, 112, 219, 0.15) 0%,
-          rgba(43, 29, 60, 0.95) 100%);
+      background: linear-gradient(
+        135deg,
+        rgba(147, 112, 219, 0.15) 0%,
+        rgba(43, 29, 60, 0.95) 100%
+      );
       border-bottom: 1px solid rgba(147, 112, 219, 0.2);
       border-radius: 12px 12px 0 0;
       color: #e6e6fa;
@@ -364,8 +366,6 @@
         box-sizing: border-box;
         word-wrap: break-word;
 
-
-
         .yaml_content_diagnosisLoading {
           height: 100%;
           display: flex;
@@ -608,10 +608,12 @@
             hr {
               border: none;
               height: 1px;
-              background: linear-gradient(to right,
-                  rgba(147, 112, 219, 0.1),
-                  rgba(147, 112, 219, 0.4),
-                  rgba(147, 112, 219, 0.1));
+              background: linear-gradient(
+                to right,
+                rgba(147, 112, 219, 0.1),
+                rgba(147, 112, 219, 0.4),
+                rgba(147, 112, 219, 0.1)
+              );
               margin: 24px 0;
             }
           }
@@ -710,7 +712,6 @@
 }
 
 @keyframes sparkle {
-
   0%,
   100% {
     filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.4));
diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
index b5802c17..5b7f5fc8 100644
--- a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
+++ b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -247,18 +247,26 @@
       flex-direction: column;
       backdrop-filter: blur(8px);
       z-index: 10;
-      background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+      background-image: radial-gradient(
+          ellipse 489px 674px at 6px 0px,
           #fcf8ff 0%,
-          #ebd7ff 100%),
-        radial-gradient(ellipse 587px 672px at 433px 513px,
+          #ebd7ff 100%
+        ),
+        radial-gradient(
+          ellipse 587px 672px at 433px 513px,
           #dae4ffa1 0%,
-          #e1d2e704 100%),
-        radial-gradient(ellipse 346px 396px at 15px 506px,
+          #e1d2e704 100%
+        ),
+        radial-gradient(
+          ellipse 346px 396px at 15px 506px,
           #dae4ffa3 0%,
-          #e1d2e704 100%),
-        radial-gradient(ellipse 583px 668px at 436px 8px,
+          #e1d2e704 100%
+        ),
+        radial-gradient(
+          ellipse 583px 668px at 436px 8px,
           #f8f5ff 0%,
-          #f3e7f904 100%);
+          #f3e7f904 100%
+        );
       animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       .events_content_diagnosisHeader {
@@ -482,7 +490,6 @@
             }
           }
 
-
           .events_content_diagnosisLoading {
             display: flex;
             flex-direction: column;
@@ -642,10 +649,12 @@
               hr {
                 border: none;
                 height: 1px;
-                background: linear-gradient(to right,
-                    rgba(147, 112, 219, 0.1),
-                    rgba(147, 112, 219, 0.4),
-                    rgba(147, 112, 219, 0.1));
+                background: linear-gradient(
+                  to right,
+                  rgba(147, 112, 219, 0.1),
+                  rgba(147, 112, 219, 0.4),
+                  rgba(147, 112, 219, 0.1)
+                );
                 margin: 24px 0;
               }
             }
@@ -738,10 +747,12 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(120deg,
-        transparent,
-        rgba(255, 255, 255, 0.6),
-        transparent);
+    background: linear-gradient(
+      120deg,
+      transparent,
+      rgba(255, 255, 255, 0.6),
+      transparent
+    );
     transform: translateX(-100%);
   }
 
@@ -767,7 +778,7 @@
     .ant-table {
       background: transparent;
 
-      .ant-table-thead>tr>th {
+      .ant-table-thead > tr > th {
         background: #fafafa;
         font-weight: 500;
         border-bottom: 1px solid #f0f0f0;
@@ -775,7 +786,7 @@
       }
 
       .ant-table-tbody {
-        >tr {
+        > tr {
           transition: all 0.2s ease;
 
           &:hover {
@@ -784,7 +795,7 @@
             z-index: 1;
           }
 
-          >td {
+          > td {
             transition: background-color 0.2s ease;
           }
         }
@@ -831,11 +842,13 @@
       .ant-skeleton-paragraph {
         margin-bottom: 0;
 
-        >li {
-          background: linear-gradient(90deg,
-              #f5f5f5 25%,
-              #e8e8e8 37%,
-              #f5f5f5 63%);
+        > li {
+          background: linear-gradient(
+            90deg,
+            #f5f5f5 25%,
+            #e8e8e8 37%,
+            #f5f5f5 63%
+          );
           background-size: 400% 100%;
           animation: ant-skeleton-loading 1.4s ease infinite;
         }
diff --git a/ui/src/pages/insightDetail/components/exceptionList/index.tsx b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
index ae4beef8..40578802 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/index.tsx
+++ b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
@@ -7,6 +7,7 @@ import {
   DownOutlined,
   PoweroffOutlined,
   CloseOutlined,
+  RedoOutlined,
 } from '@ant-design/icons'
 import Loading from '@/components/loading'
 import { SEVERITY_MAP } from '@/utils/constants'
@@ -79,8 +80,6 @@ const ExceptionList = ({
   function handleClick() {
     setIsShowList(!isShowList)
   }
-  const iconStyle = { marginLeft: 5, color: '#646566' }
-
   const debouncedInterpret = useCallback(
     debounce(async () => {
       try {
@@ -364,20 +363,28 @@ const ExceptionList = ({
                 />
               </Tooltip>
             )}
-            <Button onClick={rescan}>{t('ExceptionList.Rescan')}</Button>
-            <div className={styles.header_right_action} onClick={handleClick}>
-              {isShowList ? (
-                <span>
-                  {t('ExceptionList.Collapse')}
-                  <UpOutlined style={iconStyle} />
-                </span>
-              ) : (
-                <span>
-                  {t('ExceptionList.Expand')}
-                  <DownOutlined style={iconStyle} />
-                </span>
-              )}
-            </div>
+            <Tooltip title={t('ExceptionList.Rescan')}>
+              <Button
+                className={styles.header_right_action}
+                icon={<RedoOutlined />}
+                onClick={rescan}
+                type="text"
+              />
+            </Tooltip>
+            <Tooltip
+              title={
+                isShowList
+                  ? t('ExceptionList.Collapse')
+                  : t('ExceptionList.Expand')
+              }
+            >
+              <Button
+                className={styles.header_right_action}
+                icon={isShowList ? <UpOutlined /> : <DownOutlined />}
+                onClick={handleClick}
+                type="text"
+              />
+            </Tooltip>
           </div>
         </div>
         {isShowList && (
diff --git a/ui/src/pages/insightDetail/components/exceptionList/style.module.less b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
index 37d56006..7e5a3984 100644
--- a/ui/src/pages/insightDetail/components/exceptionList/style.module.less
+++ b/ui/src/pages/insightDetail/components/exceptionList/style.module.less
@@ -42,12 +42,79 @@
       .header_right {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 12px;
 
         .header_right_action {
-          margin-left: 10px;
-          color: #646566;
-          cursor: pointer;
+          height: 28px;
+          width: 28px;
+          padding: 0;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          border-radius: 6px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          color: rgba(0, 0, 0, 0.65);
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(
+              circle,
+              rgba(0, 0, 0, 0.06) 0%,
+              transparent 70%
+            );
+            transform: translate(-50%, -50%) scale(0);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            pointer-events: none;
+          }
+
+          &:not(:disabled) {
+            &:hover {
+              background: rgba(0, 0, 0, 0.04);
+              transform: scale(1.05);
+
+              &::before {
+                transform: translate(-50%, -50%) scale(2);
+              }
+
+              :global(.anticon) {
+                color: rgba(0, 0, 0, 0.88);
+              }
+            }
+
+            &:active {
+              background: rgba(0, 0, 0, 0.08);
+              transform: scale(0.95);
+
+              &::before {
+                transform: translate(-50%, -50%) scale(1.5);
+              }
+
+              :global(.anticon) {
+                transform: rotate(-10deg) scale(0.95);
+                color: rgba(0, 0, 0, 0.88);
+              }
+            }
+          }
+
+          &[disabled] {
+            color: rgba(0, 0, 0, 0.25);
+            background: transparent;
+            cursor: not-allowed;
+          }
+
+          :global(.anticon) {
+            font-size: 16px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1;
+          }
         }
 
         &_ai_button {
@@ -170,6 +237,7 @@
             0 9px 28px 8px rgb(0 0 0 / 5%);
 
           &::before {
+            content: '';
             position: absolute;
             bottom: 0;
             left: 30px;
@@ -299,27 +367,55 @@
   .interpret_panel {
     width: 400px;
     border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 8px 24px rgba(149, 128, 247, 0.08),
+      0 2px 4px rgba(149, 128, 247, 0.12);
+    border: 1px solid rgba(149, 128, 247, 0.15);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
-        #fcf8ff 0%,
-        #ebd7ff 100%),
-      radial-gradient(ellipse 587px 672px at 433px 513px,
-        #dae4ffa1 0%,
-        #e1d2e704 100%),
-      radial-gradient(ellipse 346px 396px at 15px 506px,
-        #dae4ffa3 0%,
-        #e1d2e704 100%),
-      radial-gradient(ellipse 583px 668px at 436px 8px,
-        #f8f5ff 0%,
-        #f3e7f904 100%);
+    background-image: radial-gradient(
+        ellipse 489px 674px at 6px 0px,
+        #ffffff 0%,
+        #f3efff 100%
+      ),
+      radial-gradient(
+        ellipse 587px 672px at 433px 513px,
+        #ece6ff95 0%,
+        #f0e9ff30 100%
+      ),
+      radial-gradient(
+        ellipse 346px 396px at 15px 506px,
+        #e9e3ff90 0%,
+        #f0e9ff30 100%
+      ),
+      radial-gradient(
+        ellipse 583px 668px at 436px 8px,
+        #ffffff 0%,
+        #f5f0ff30 100%
+      );
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(
+        circle at center,
+        rgba(149, 128, 247, 0.03) 0%,
+        transparent 70%
+      );
+      animation: rotate 60s linear infinite;
+      pointer-events: none;
+    }
 
     .interpret_header {
-      padding: 12px;
-      border-bottom: 1px solid rgba(147, 112, 219, 0.2);
+      padding: 12px 16px;
+      border-bottom: 1px solid rgba(149, 128, 247, 0.15);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -328,11 +424,18 @@
       font-size: 16px;
       font-weight: 500;
       color: #000;
-      backdrop-filter: blur(4px);
+      backdrop-filter: blur(8px);
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.95),
+        rgba(243, 239, 255, 0.95)
+      );
 
       .interpret_title {
         font-weight: 500;
-        color: #000;
+        background: linear-gradient(90deg, #7c66ff, #6b4fff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
         display: flex;
         align-items: center;
         gap: 8px;
@@ -724,10 +827,12 @@
             hr {
               border: none;
               height: 1px;
-              background: linear-gradient(to right,
-                  rgba(147, 112, 219, 0.1),
-                  rgba(147, 112, 219, 0.4),
-                  rgba(147, 112, 219, 0.1));
+              background: linear-gradient(
+                to right,
+                rgba(147, 112, 219, 0.1),
+                rgba(147, 112, 219, 0.4),
+                rgba(147, 112, 219, 0.1)
+              );
               margin: 24px 0;
             }
           }
@@ -781,3 +886,13 @@
     opacity: 0.3;
   }
 }
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/ui/src/pages/insightDetail/components/exceptionStat/style.module.less b/ui/src/pages/insightDetail/components/exceptionStat/style.module.less
index 25ddd47e..8a1c738f 100644
--- a/ui/src/pages/insightDetail/components/exceptionStat/style.module.less
+++ b/ui/src/pages/insightDetail/components/exceptionStat/style.module.less
@@ -3,26 +3,52 @@
   font-weight: 400;
   color: rgb(0 0 0 / 65%);
   align-items: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
+    sans-serif;
 
   .title {
     display: flex;
-    margin-right: 20px;
+    margin-right: 24px;
     cursor: pointer;
     align-items: center;
+    font-size: 14px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: rgb(0 0 0 / 88%);
+
+      .num {
+        background: rgb(0 0 0 / 06%);
+        transform: scale(1);
+      }
+    }
 
     &.active {
-      padding: 10px;
-      background: rgb(22 119 255 / 10%);
+      padding: 8px 12px;
+      background: rgb(22 119 255 / 8%);
       border-radius: 8px;
+      color: rgb(22 119 255);
+      font-weight: 500;
+
+      .num {
+        background: rgb(22 119 255 / 12%);
+        color: rgb(22 119 255);
+        transform: scale(1);
+      }
     }
   }
 
   .num {
-    padding: 2px 10px;
-    margin-left: 5px;
-    font-size: 12px;
-    background-color: rgb(0 0 0 / 3%);
-    border-radius: 10px;
-    transform: scale(0.8);
+    padding: 2px 12px;
+    margin-left: 8px;
+    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono',
+      'Segoe UI Mono', 'Liberation Mono', Menlo, Monaco, Consolas, monospace;
+    font-size: 13px;
+    font-weight: 500;
+    background: rgb(0 0 0 / 04%);
+    border-radius: 12px;
+    transform: scale(0.95);
+    transition: all 0.2s ease;
+    letter-spacing: -0.2px;
   }
 }
diff --git a/ui/src/pages/insightDetail/components/podLogs/styles.module.less b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
index 1a6a259a..49f9d490 100644
--- a/ui/src/pages/insightDetail/components/podLogs/styles.module.less
+++ b/ui/src/pages/insightDetail/components/podLogs/styles.module.less
@@ -339,9 +339,11 @@
           justify-content: space-between;
           align-items: center;
           padding: 12px;
-          background: linear-gradient(135deg,
-              rgba(147, 112, 219, 0.15) 0%,
-              rgba(43, 29, 60, 0.95) 100%);
+          background: linear-gradient(
+            135deg,
+            rgba(147, 112, 219, 0.15) 0%,
+            rgba(43, 29, 60, 0.95) 100%
+          );
           border-bottom: 1px solid rgba(147, 112, 219, 0.2);
           border-radius: 12px 12px 0 0;
           color: #e6e6fa;
@@ -476,8 +478,6 @@
             box-sizing: border-box;
             word-wrap: break-word;
 
-
-
             .diagnosisLoading,
             .diagnosisError {
               display: flex;
@@ -722,10 +722,12 @@
                 hr {
                   border: none;
                   height: 1px;
-                  background: linear-gradient(to right,
-                      rgba(147, 112, 219, 0.1),
-                      rgba(147, 112, 219, 0.4),
-                      rgba(147, 112, 219, 0.1));
+                  background: linear-gradient(
+                    to right,
+                    rgba(147, 112, 219, 0.1),
+                    rgba(147, 112, 219, 0.4),
+                    rgba(147, 112, 219, 0.1)
+                  );
                   margin: 24px 0;
                 }
               }
@@ -780,9 +782,11 @@
       }
 
       .ant-drawer-header {
-        background: linear-gradient(135deg,
-            rgba(147, 112, 219, 0.15) 0%,
-            rgba(43, 29, 60, 0.95) 100%);
+        background: linear-gradient(
+          135deg,
+          rgba(147, 112, 219, 0.15) 0%,
+          rgba(43, 29, 60, 0.95) 100%
+        );
         border-bottom: 1px solid rgba(147, 112, 219, 0.2);
         padding: 16px 24px;
 
diff --git a/ui/src/pages/insightDetail/components/summaryCard/index.tsx b/ui/src/pages/insightDetail/components/summaryCard/index.tsx
index 50a63db2..43dff861 100644
--- a/ui/src/pages/insightDetail/components/summaryCard/index.tsx
+++ b/ui/src/pages/insightDetail/components/summaryCard/index.tsx
@@ -306,6 +306,12 @@ const SummaryCard = ({ auditStat, summary }: SummaryCardProps) => {
     convertUnits.bytesToGB,
   )
 
+  const getLatencyLevel = (latency: number) => {
+    if (latency <= 100) return 'normal'
+    if (latency <= 500) return 'warning'
+    return 'error'
+  }
+
   return (
     <div className={styles.summary_card}>
       <Progress
@@ -489,17 +495,22 @@ const SummaryCard = ({ auditStat, summary }: SummaryCardProps) => {
 
             <div className={styles.item}>
               <div className={styles.label}>Metrics Server</div>
-              <div className={styles.value}>
-                <MetricTooltip
-                  value={
-                    summary?.metricsEnabled === undefined
-                      ? '--'
-                      : summary?.metricsEnabled
-                        ? t('Enabled')
-                        : t('Disabled')
-                  }
-                  tooltipKey="MetricsServer"
-                />
+              <div
+                className={`${styles.value} ${styles['metrics-server']} ${
+                  summary?.metricsEnabled ? styles.enabled : styles.disabled
+                }`}
+              >
+                {summary?.metricsEnabled ? (
+                  <span>
+                    <i className="anticon anticon-check" />
+                    Enabled
+                  </span>
+                ) : (
+                  <span>
+                    <i className="anticon anticon-close" />
+                    Disabled
+                  </span>
+                )}
               </div>
             </div>
           </div>
@@ -535,7 +546,11 @@ const SummaryCard = ({ auditStat, summary }: SummaryCardProps) => {
           {summary?.latency && (
             <div className={styles.item}>
               <div className={styles.label}>Latency</div>
-              <div className={styles.value}>{summary?.latency}ms</div>
+              <div
+                className={`${styles.value} ${styles.latency} ${styles[getLatencyLevel(summary.latency)]}`}
+              >
+                {summary.latency}ms
+              </div>
             </div>
           )}
         </div>
diff --git a/ui/src/pages/insightDetail/components/summaryCard/styles.module.less b/ui/src/pages/insightDetail/components/summaryCard/styles.module.less
index e6837373..839e5e17 100644
--- a/ui/src/pages/insightDetail/components/summaryCard/styles.module.less
+++ b/ui/src/pages/insightDetail/components/summaryCard/styles.module.less
@@ -18,6 +18,9 @@
       color: #1890ff;
       font-weight: 600;
       font-size: 20px;
+      font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono',
+        monospace;
+      letter-spacing: -0.5px;
     }
   }
 }
@@ -79,7 +82,16 @@
       }
 
       &.namespaceStat {
-        font-weight: 600;
+        font-weight: 500;
+
+        .value {
+          font-size: 16px;
+          letter-spacing: -0.4px;
+          background: linear-gradient(45deg, #1890ff, #69c0ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          text-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
+        }
       }
 
       &.with_trend {
@@ -89,18 +101,21 @@
       .label {
         color: rgba(0, 0, 0, 0.45);
         font-size: 13px;
-        font-weight: 500;
-        margin-bottom: 4px;
+        font-weight: 450;
+        margin-bottom: 6px;
         white-space: nowrap;
         display: flex;
         align-items: center;
         min-height: 20px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
+          Roboto, sans-serif;
+        letter-spacing: -0.1px;
       }
 
       .value {
         overflow: hidden;
-        font-size: 15px;
-        color: rgba(0, 0, 0, 0.85);
+        font-size: 13px;
+        color: rgba(0, 0, 0, 0.88);
         text-overflow: ellipsis;
         white-space: nowrap;
         font-weight: 500;
@@ -111,6 +126,92 @@
         align-items: center;
         flex: 1;
 
+        &.latency {
+          font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Mono',
+            monospace;
+          letter-spacing: 0;
+
+          &.normal {
+            color: #52c41a;
+            &:hover {
+              background: linear-gradient(45deg, #237804, #52c41a);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+
+          &.warning {
+            color: #faad14;
+            &:hover {
+              background: linear-gradient(45deg, #d48806, #faad14);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+
+          &.error {
+            color: #ff4d4f;
+            &:hover {
+              background: linear-gradient(45deg, #cf1322, #ff4d4f);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+        }
+
+        &.metrics-server {
+          font-size: 12px;
+          padding: 2px 8px;
+          border-radius: 12px;
+          font-weight: 500;
+          letter-spacing: 0.2px;
+          transition: all 0.3s ease;
+          cursor: default;
+          height: 22px;
+
+          &.enabled {
+            background: rgba(82, 196, 26, 0.1);
+            color: #52c41a;
+            border: 1px solid rgba(82, 196, 26, 0.2);
+
+            &::before {
+              content: '';
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background: #52c41a;
+              margin-right: 6px;
+              box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
+            }
+
+            &:hover {
+              background: rgba(82, 196, 26, 0.15);
+              border-color: rgba(82, 196, 26, 0.3);
+            }
+          }
+
+          &.disabled {
+            background: rgba(0, 0, 0, 0.04);
+            color: rgba(0, 0, 0, 0.45);
+            border: 1px solid rgba(0, 0, 0, 0.1);
+
+            &::before {
+              content: '';
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              background: rgba(0, 0, 0, 0.25);
+              margin-right: 6px;
+              box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+            }
+
+            &:hover {
+              background: rgba(0, 0, 0, 0.06);
+              border-color: rgba(0, 0, 0, 0.15);
+            }
+          }
+        }
+
         &:hover {
           color: #1890ff;
         }