diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 416b5f91..822ac88d 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -479,7 +479,7 @@ limitations under the License. -->
 
   .calendar-head .calendar-year-select,
   .calendar-head .calendar-month-select {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 2px;
     position: relative;
   }
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index fc11c879..2ad0b48f 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -232,7 +232,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .no-data {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     box-sizing: border-box;
     display: -webkit-box;
diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index 64a07288..1ff98576 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -89,7 +89,7 @@ limitations under the License. -->
     background: $theme-background;
     border-radius: 3px;
     color: #000;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 24px;
 
     .selected {
@@ -126,7 +126,7 @@ limitations under the License. -->
     position: absolute;
     right: 5px;
     top: 0;
-    font-size: 14px;
+    font-size: $font-size-normal;
     display: none;
     color: #aaa;
     cursor: pointer;
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 44304c9a..b7d71b3e 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -408,7 +408,7 @@ limitations under the License. -->
     transition: all 200ms ease;
     opacity: 1;
     transform: scaleY(1);
-    font-size: 12px;
+    font-size: $font-size-smaller;
     background: $theme-background;
     box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     margin-top: 2px;
@@ -456,7 +456,7 @@ limitations under the License. -->
       border: 0;
       background-color: transparent;
       line-height: 34px;
-      font-size: 12px;
+      font-size: $font-size-smaller;
       color: #666;
       text-align: left;
       outline: none;
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 7615294e..f5576306 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -108,7 +108,7 @@ limitations under the License. -->
     background-color: #fafbfc;
     border-bottom: 1px solid #dfe4e8;
     color: #222;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .nav-bar.dark {
@@ -118,7 +118,7 @@ limitations under the License. -->
   }
 
   .title {
-    font-size: 14px;
+    font-size: $font-size-normal;
     font-weight: 500;
     height: 28px;
     line-height: 28px;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 0ad4655a..b88476ae 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -132,12 +132,12 @@ limitations under the License. -->
 
   .el-menu-vertical:not(.el-menu--collapse) {
     width: 220px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .logo-icon-collapse {
     width: 65px;
-    margin: 5px 0 10px 0;
+    margin: 5px 0 10px;
     text-align: center;
   }
 
@@ -169,7 +169,7 @@ limitations under the License. -->
 
   .version {
     color: #eee;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     cursor: pointer;
     padding-left: 23px;
     margin-bottom: 10px;
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index fe989fcf..7ca6a229 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -220,7 +220,7 @@
   padding: 8px;
   color: #eee;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: $font-size-smaller;
 }
 .d3-tip {
   background: #252a2f;
diff --git a/src/styles/light.scss b/src/styles/light.scss
index 5ccbbe54..ef6be368 100644
--- a/src/styles/light.scss
+++ b/src/styles/light.scss
@@ -21,3 +21,5 @@ $disabled-color: #ccc;
 $active-color: #409eff;
 $theme-background: #fff;
 $active-background: #409eff;
+$font-size-smaller: 12px;
+$font-size-normal: 14px;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 1144d04f..c447ec45 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -18,7 +18,7 @@
 body {
   margin: 0;
   line-height: 1.5;
-  font-size: 14px;
+  font-size: $font-size-normal;
   color: $font-color;
   font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
   text-rendering: optimizelegibility;
@@ -81,7 +81,7 @@ h4 {
 }
 
 h5 {
-  font-size: 14px;
+  font-size: $font-size-normal;
 }
 
 h6 {
@@ -153,7 +153,7 @@ pre {
 }
 
 .el-switch__label * {
-  font-size: 12px;
+  font-size: $font-size-smaller;
 }
 
 .el-drawer__header {
@@ -175,7 +175,7 @@ div.vis-tooltip {
   overflow: hidden;
   background-color: $theme-background !important;
   white-space: normal !important;
-  font-size: 12px !important;
+  font-size: $font-size-smaller !important;
 }
 
 .vis-item {
diff --git a/src/views/Alarm.vue b/src/views/Alarm.vue
index 9fe35454..236e7e18 100644
--- a/src/views/Alarm.vue
+++ b/src/views/Alarm.vue
@@ -30,6 +30,6 @@ limitations under the License. -->
   .alarm {
     flex-grow: 1;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 </style>
diff --git a/src/views/Event.vue b/src/views/Event.vue
index c26b90a3..5fcd39df 100644
--- a/src/views/Event.vue
+++ b/src/views/Event.vue
@@ -31,6 +31,6 @@ limitations under the License. -->
   .event {
     flex-grow: 1;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 </style>
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index a107a399..90bf50ee 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -142,12 +142,12 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "../components/style.scss";
+  @import url("../components/style.scss");
 
   .tips {
     width: 100%;
     margin: 20px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 </style>
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 8c006914..8704c876 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -98,7 +98,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .alarm-tool {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #c1c5ca41;
     background-color: #f0f2f5;
     padding: 10px;
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 83893b13..f62629c2 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -221,7 +221,7 @@ limitations under the License. -->
     border-radius: 3px;
     overflow: hidden;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 3px 2px 0;
   }
 
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 9c151c1a..0b8acaf8 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -198,7 +198,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     text-align: center;
     line-height: 400px;
   }
@@ -208,7 +208,7 @@ limitations under the License. -->
     line-height: 25px;
     text-align: center;
     background-color: aliceblue;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index 4cbc0e24..6a6b6c85 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -160,7 +160,7 @@ limitations under the License. -->
 
   .link-content {
     height: 300px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     overflow: auto;
     padding-bottom: 50px;
   }
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 2f4f1261..0c9dc4c5 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -210,7 +210,7 @@ limitations under the License. -->
     line-height: 25px;
     text-align: center;
     background-color: aliceblue;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -240,7 +240,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     text-align: center;
     line-height: 400px;
   }
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index 9ff2dc6f..4c340eb9 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -125,7 +125,7 @@ limitations under the License. -->
   }
 
   .title {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     display: inline-flex;
     height: 32px;
     line-height: 34px;
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 4e7ad7ec..5b88699b 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -187,7 +187,7 @@ limitations under the License. -->
   .label {
     width: 150px;
     display: inline-block;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .close {
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index ed4e7144..a6e4e752 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -74,7 +74,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index 31aba005..b6d30aec 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .log-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -68,7 +68,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 848439d7..69398329 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -67,7 +67,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index 2db06542..4cec0cde 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -65,7 +65,7 @@ limitations under the License. -->
   .event-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -79,7 +79,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index d71993b5..0f966c2e 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .log-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -76,7 +76,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index 70a3fc8c..c144f8ac 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -66,7 +66,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index fdf277a4..50871f5c 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -67,7 +67,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 7089f015..5574cd94 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -380,7 +380,7 @@ limitations under the License. -->
   .no-data-tips {
     width: 100%;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
     padding-top: 30px;
     color: #888;
   }
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 0ed92307..9a4be4c3 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
   .content-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -66,7 +66,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index db32b1ed..c66e68bf 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -78,7 +78,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .text {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 514f726b..5eac036c 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .text {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
@@ -108,7 +108,7 @@ limitations under the License. -->
   }
 
   .tips {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index aefd36e4..ccdea213 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .time-range {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index d1b202a4..ff2553f5 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
     // background-color: #333840;
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -87,7 +87,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 15db5c7b..48efd5d8 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .trace-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -75,7 +75,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1200px;
   }
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 3a4dfb77..72b8d870 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -269,7 +269,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .widget {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
   }
 
@@ -305,7 +305,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index b9670cd4..197dcb44 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -73,7 +73,7 @@ limitations under the License. -->
     color: #666;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .unit {
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 02fd7aab..336c0892 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -140,7 +140,7 @@ limitations under the License. -->
   }
 
   .progress-bar {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     color: #333;
   }
 
@@ -159,7 +159,7 @@ limitations under the License. -->
   }
 
   .calls {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 5px;
     display: inline-block;
     background-color: #40454e;
@@ -197,7 +197,7 @@ limitations under the License. -->
     cursor: pointer;
     position: relative;
     text-align: center;
-    font-size: 12px;
+    font-size: $font-size-smaller;
 
     &:hover {
       color: $active-color;
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index da4ae83f..268c1b28 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   table {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     white-space: nowrap;
     margin: 0;
     border: none;
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 45e9d285..c349bdea 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -97,7 +97,7 @@ limitations under the License. -->
   .no-data-tips {
     width: 100%;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
     padding-top: 30px;
     color: #888;
   }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 5a6c42f1..ea3d29fb 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -750,7 +750,7 @@ limitations under the License. -->
   }
 
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     display: inline-block;
     padding: 4px 2px;
   }
@@ -774,7 +774,7 @@ limitations under the License. -->
     cursor: pointer;
     background-color: #eee;
     color: #666;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .selectors {
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index b6dc90b7..fc70ed4d 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -137,7 +137,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .title {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     font-weight: bold;
   }
 
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index a6eb275f..386989cb 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -227,6 +227,6 @@ limitations under the License. -->
 
   .item-title {
     margin-bottom: 5px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 </style>
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 710ac948..5a2c6f48 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -373,7 +373,7 @@ limitations under the License. -->
     overflow: hidden;
     color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 989feb7f..289d1c89 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -89,7 +89,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .header {
     padding: 5px 20px 5px 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     justify-content: space-between;
   }
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index aa667ebb..87b87705 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -140,12 +140,12 @@ limitations under the License. -->
   }
 
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 096a7236..7e50238f 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -133,7 +133,7 @@ limitations under the License. -->
     color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     float: right;
   }
 </style>
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
index 80e82c53..702fb1ec 100644
--- a/src/views/dashboard/related/event/Header.vue
+++ b/src/views/dashboard/related/event/Header.vue
@@ -228,7 +228,7 @@ limitations under the License. -->
     overflow: hidden;
     color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 </style>
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index fe816de4..8afc0a1b 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -417,7 +417,7 @@ limitations under the License. -->
     overflow: hidden;
     color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index 144c2eef..266b119e 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -72,7 +72,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .log {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     border-bottom: 1px solid #eee;
     width: 100%;
@@ -84,7 +84,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgb(0 0 0 / 10%);
 
     .traceId {
       width: 390px;
diff --git a/src/views/dashboard/related/network-profiling/components/NewConditions.vue b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
index 9c9b71b4..d4b08e75 100644
--- a/src/views/dashboard/related/network-profiling/components/NewConditions.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
@@ -66,12 +66,12 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index fcfa56cd..a16a3f81 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -66,7 +66,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin-top: 10px;
   }
 
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 53c72970..1ea18eae 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/related/profile/components/NewTask.vue b/src/views/dashboard/related/profile/components/NewTask.vue
index 94b780d7..fdcf8ea4 100644
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@@ -163,12 +163,12 @@ limitations under the License. -->
   }
 
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 2aae1a8c..1addee6a 100644
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -139,7 +139,7 @@ limitations under the License. -->
       color: $font-color;
       padding: 1px 3px;
       border-radius: 2px;
-      font-size: 12px;
+      font-size: $font-size-smaller;
     }
   }
 
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index 01c0005d..e510eddd 100644
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -82,11 +82,11 @@ limitations under the License. -->
   }
 
   .profile {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
 
     .profile-set-btn {
-      font-size: 12px;
+      font-size: $font-size-smaller;
       border: 1px solid $disabled-color;
       border-radius: 3px;
       text-align: center;
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index ae857b17..7ebe29b8 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -220,7 +220,7 @@ limitations under the License. -->
     color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     float: right;
   }
 </style>
diff --git a/src/views/dashboard/related/topology/components/Metrics.vue b/src/views/dashboard/related/topology/components/Metrics.vue
index a1775057..3296e13e 100644
--- a/src/views/dashboard/related/topology/components/Metrics.vue
+++ b/src/views/dashboard/related/topology/components/Metrics.vue
@@ -149,7 +149,7 @@ limitations under the License. -->
   .label {
     width: 150px;
     display: inline-block;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .close {
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index e0c9d4c1..95d47668 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -458,7 +458,7 @@ limitations under the License. -->
   }
 
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin-top: 10px;
   }
 
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 4c3dec28..d85b5b40 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -171,7 +171,7 @@ limitations under the License. -->
   }
 
   .trace-detail-wrapper {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 5px 10px;
     border-bottom: 1px solid #eee;
     width: 100%;
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 0d2e31c2..8f211f9b 100644
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@@ -43,14 +43,14 @@ limitations under the License. -->
   .trace-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1200px;
   }
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index b3688a3f..b396de92 100644
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -147,10 +147,10 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "./table.scss";
+  @import url("./table.scss");
 
   .trace {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     overflow: auto;
     width: 100%;
@@ -165,7 +165,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgb(0 0 0 / 10%);
   }
 
   .trace-header div {