diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index bd3ef075..12e139e6 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
         placeholder="Select a language"
         @change="setLang"
         size="small"
-        style="font-size: 14px"
+        style="font-size: 14px; width: 180px"
       />
     </div>
     <div class="flex-h item">
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 0c15d55b..9a5a576d 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -731,7 +731,7 @@ limitations under the License. -->
 
   .hierarchy-btn {
     display: inline-block;
-    padding: 0 2px 2px;
+    padding: 0 3px;
     border: 1px solid #666;
     border-radius: 4px;
     text-align: center;
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index 40c9ed58..726ae130 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -190,7 +190,7 @@ limitations under the License. -->
 
   .profile-t-tool {
     padding: 10px 5px 10px 10px;
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
+    border-right: 1px solid rgb(0 0 0 / 7%);
     background-color: var(--sw-table-header);
     width: 100%;
     font-weight: bold;
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 5a2c6f48..38f18008 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5"> {{ t("instance") }}: </span>
       <Selector
         size="small"
@@ -25,7 +25,7 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
-    <div class="mr-5 mb-5" v-if="state.container">
+    <div class="mr-10 mb-5" v-if="state.container">
       <span class="grey mr-5">{{ t("container") }}:</span>
       <Selector
         size="small"
@@ -36,18 +36,7 @@ limitations under the License. -->
         class="selectors"
       />
     </div>
-    <!-- <div class="mr-5">
-      <span class="grey mr-5">{{ t("limit") }}:</span>
-      <el-input-number
-        v-model="limit"
-        :min="1"
-        :max="1000"
-        size="small"
-        controls-position="right"
-        @change="changeField('limit', $event)"
-      />
-    </div> -->
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("duration") }}:</span>
       <Selector
         size="small"
@@ -58,18 +47,19 @@ limitations under the License. -->
         class="duration-range"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("interval") }}:</span>
       <Selector
         size="small"
         :value="state.interval.value"
         :options="IntervalOpts"
         @change="changeField('interval', $event)"
+        class="selectors"
       />
     </div>
   </div>
   <div class="flex-h row">
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
       <span class="log-tags">
         <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
@@ -85,7 +75,7 @@ limitations under the License. -->
         @change="addLabels('keywordsOfContent')"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
       <span class="log-tags">
         <span
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 29aaeb83..9f256e80 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
+      <span class="grey mr-5 label">{{ t("service") }}:</span>
       <Selector
         size="small"
         :value="state.service.value"
@@ -24,8 +24,8 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5"> {{ isBrowser ? t("version") : t("instance") }}: </span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5 label"> {{ isBrowser ? t("version") : t("instance") }}: </span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -34,8 +34,8 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
+      <span class="grey mr-5 label"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -46,8 +46,8 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5" v-if="isBrowser">
-      <span class="grey mr-5"> {{ t("category") }}: </span>
+    <div class="mr-10 flex-h" v-if="isBrowser">
+      <span class="grey mr-5 label"> {{ t("category") }}: </span>
       <Selector
         size="small"
         :value="state.category.value"
@@ -61,8 +61,8 @@ limitations under the License. -->
     </el-button>
   </div>
   <div class="flex-h row" v-show="!isBrowser">
-    <div class="mr-5 traceId">
-      <span class="grey mr-5">{{ t("traceID") }}:</span>
+    <div class="mr-10 traceId">
+      <span class="grey mr-5 label">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="inputs-max" size="small" />
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
@@ -78,8 +78,8 @@ limitations under the License. -->
     </div>
     <div v-show="logStore.supportQueryLogsByKeywords">
       <div class="flex-h">
-        <div class="mr-5">
-          <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+        <div class="mr-10">
+          <span class="mr-5 grey label">{{ t("keywordsOfContent") }}:</span>
           <span class="log-tags">
             <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
               <span>{{ item }}</span>
@@ -94,8 +94,8 @@ limitations under the License. -->
             @change="addLabels('keywordsOfContent')"
           />
         </div>
-        <div class="mr-5">
-          <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+        <div class="mr-10">
+          <span class="grey mr-5 label"> {{ t("excludingKeywordsOfContent") }}: </span>
           <span class="log-tags">
             <span
               class="selected"
@@ -437,4 +437,8 @@ limitations under the License. -->
     margin-left: 3px;
     cursor: pointer;
   }
+
+  .label {
+    line-height: 24px;
+  }
 </style>
diff --git a/src/views/dashboard/related/profile/components/SpanTree.vue b/src/views/dashboard/related/profile/components/SpanTree.vue
index e69f86a6..0d7479d5 100644
--- a/src/views/dashboard/related/profile/components/SpanTree.vue
+++ b/src/views/dashboard/related/profile/components/SpanTree.vue
@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="profile-trace-dashboard" v-if="profileStore.currentSegment">
-    <div class="profile-trace-detail-wrapper">
-      <label>Trace ID</label>
-      <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
+    <div class="flex-h profile-trace-detail-wrapper">
+      <div>
+        <label>Trace ID</label>
+        <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
+      </div>
       <Selector
         size="small"
         :value="dataMode"
         :options="ProfileDataMode"
         placeholder="Please select a profile data mode"
         @change="spanModeChange"
-        class="mr-10"
+        class="mr-10 fliter"
       />
       <Selector
         size="small"
@@ -31,7 +33,7 @@ limitations under the License. -->
         :options="ProfileDisplayMode"
         placeholder="Please select a profile display mode"
         @change="selectDisplayMode"
-        class="mr-10"
+        class="mr-10 fliter"
       />
       <el-button type="primary" size="small" :disabled="!profileStore.currentSpan.profiled" @click="analyzeProfile()">
         {{ t("analyze") }}
@@ -183,4 +185,8 @@ limitations under the License. -->
   .input {
     width: 250px;
   }
+
+  .fliter {
+    width: 140px;
+  }
 </style>
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index a5092214..b09e2339 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
-      <span class="grey mr-5">{{ t("service") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
+      <span class="grey mr-5 label">{{ t("service") }}:</span>
       <Selector
         size="small"
         :value="state.service.value"
@@ -24,8 +24,8 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5">{{ t("instance") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5 label">{{ t("instance") }}:</span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -34,8 +34,8 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5">{{ t("endpoint") }}:</span>
+    <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
+      <span class="grey mr-5 label">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -46,8 +46,8 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-10">
-      <span class="grey mr-5">{{ t("status") }}:</span>
+    <div class="mr-10 flex-h">
+      <span class="grey mr-5 label">{{ t("status") }}:</span>
       <Selector
         size="small"
         :value="state.status.value"
@@ -325,4 +325,8 @@ limitations under the License. -->
     top: 0;
     right: 10px;
   }
+
+  .label {
+    line-height: 24px;
+  }
 </style>