diff --git a/package.json b/package.json
index ba51e014..a097b797 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,8 @@
       "@typescript-eslint/explicit-function-return-type": "off",
       "no-use-before-define": "off",
       "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/no-non-null-assertion": "off"
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-this-alias": "off"
     },
     "overrides": [
       {
diff --git a/src/assets/icons/issue-open-m.svg b/src/assets/icons/issue-open-m.svg
new file mode 100755
index 00000000..dcbf2051
--- /dev/null
+++ b/src/assets/icons/issue-open-m.svg
@@ -0,0 +1,16 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/issue-open-m</title><path d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 2A7 7 0 1 1 8 1a7 7 0 0 1 0 14z" id="a"/></svg>
\ No newline at end of file
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index 0371c003..bbacaeb1 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -11,92 +11,96 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div
-    class="trace-detail-wrapper clear"
-    v-if="traceStore.currentTrace.endpointNames"
-  >
-    <h5 class="mb-5 mt-0">
-      <Icon
-        icon="clear"
-        v-if="traceStore.currentTrace.isError"
-        class="red mr-5 sm"
-      />
-      <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
-      <!-- <div class="trace-log-btn bg-blue r mr-10" @click="searchTraceLogs">
+  <div class="trace-detail">
+    <div
+      class="trace-detail-wrapper clear"
+      v-if="traceStore.currentTrace.endpointNames"
+    >
+      <h5 class="mb-5 mt-0">
+        <Icon
+          icon="clear"
+          v-if="traceStore.currentTrace.isError"
+          class="red mr-5 sm"
+        />
+        <span class="vm">{{ traceStore.currentTrace.endpointNames[0] }}</span>
+        <!-- <div class="trace-log-btn bg-blue r mr-10" @click="searchTraceLogs">
         {{ t("viewLogs") }}
       </div> -->
-    </h5>
-    <div class="mb-5 blue sm">
-      <Selector
-        size="small"
-        :value="
-          traceStore.currentTrace.traceIds &&
-          traceStore.currentTrace.traceIds[0] &&
-          traceStore.currentTrace.traceIds[0].value
-        "
-        :options="traceStore.currentTrace.traceIds"
-        @change="changeTraceId"
-        class="trace-detail-ids"
-      />
-      <Icon
-        size="sm"
-        class="icon grey link-hover cp ml-5"
-        iconName="review-list"
-        @click="handleClick"
-      />
-    </div>
-    <div class="flex-h item">
-      <div>
-        <div class="tag mr-5">{{ t("start") }}</div>
-        <span class="mr-15 sm">
-          {{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
-        </span>
-        <div class="tag mr-5">{{ t("duration") }}</div>
-        <span class="mr-15 sm">{{ traceStore.currentTrace.duration }} ms</span>
-        <div class="tag mr-5">{{ t("spans") }}</div>
-        <span class="sm">{{ traceStore.traceSpans.length }}</span>
+      </h5>
+      <div class="mb-5 blue sm">
+        <Selector
+          size="small"
+          :value="
+            traceStore.currentTrace.traceIds &&
+            traceStore.currentTrace.traceIds[0] &&
+            traceStore.currentTrace.traceIds[0].value
+          "
+          :options="traceStore.currentTrace.traceIds"
+          @change="changeTraceId"
+          class="trace-detail-ids"
+        />
+        <Icon
+          size="sm"
+          class="icon grey link-hover cp ml-5"
+          iconName="review-list"
+          @click="handleClick"
+        />
       </div>
-      <div>
-        <el-button
-          class="grey"
-          :class="{ ghost: displayMode !== 'list' }"
-          @click="displayMode = 'list'"
-        >
-          <Icon class="mr-5" size="sm" iconName="list-bulleted" />
-          {{ t("list") }}
-        </el-button>
-        <el-button
-          class="grey"
-          :class="{ ghost: displayMode !== 'tree' }"
-          @click="displayMode = 'tree'"
-        >
-          <Icon class="mr-5" size="sm" iconName="issue-child" />
-          {{ t("tree") }}
-        </el-button>
-        <el-button
-          class="grey"
-          :class="{ ghost: displayMode !== 'table' }"
-          @click="displayMode = 'table'"
-        >
-          <Icon class="mr-5" size="sm" iconName="table" />
-          {{ t("table") }}
-        </el-button>
-        <el-button
-          class="grey"
-          :class="{ ghost: displayMode !== 'statistics' }"
-          @click="displayMode = 'statistics'"
-        >
-          <Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
-          {{ t("statistics") }}
-        </el-button>
+      <div class="flex-h item">
+        <div>
+          <div class="tag mr-5">{{ t("start") }}</div>
+          <span class="mr-15 sm">
+            {{ dateFormat(parseInt(traceStore.currentTrace.start)) }}
+          </span>
+          <div class="tag mr-5">{{ t("duration") }}</div>
+          <span class="mr-15 sm"
+            >{{ traceStore.currentTrace.duration }} ms</span
+          >
+          <div class="tag mr-5">{{ t("spans") }}</div>
+          <span class="sm">{{ traceStore.traceSpans.length }}</span>
+        </div>
+        <div>
+          <el-button
+            class="grey"
+            :class="{ ghost: displayMode !== 'list' }"
+            @click="displayMode = 'list'"
+          >
+            <Icon class="mr-5" size="sm" iconName="list-bulleted" />
+            {{ t("list") }}
+          </el-button>
+          <el-button
+            class="grey"
+            :class="{ ghost: displayMode !== 'tree' }"
+            @click="displayMode = 'tree'"
+          >
+            <Icon class="mr-5" size="sm" iconName="issue-child" />
+            {{ t("tree") }}
+          </el-button>
+          <el-button
+            class="grey"
+            :class="{ ghost: displayMode !== 'table' }"
+            @click="displayMode = 'table'"
+          >
+            <Icon class="mr-5" size="sm" iconName="table" />
+            {{ t("table") }}
+          </el-button>
+          <el-button
+            class="grey"
+            :class="{ ghost: displayMode !== 'statistics' }"
+            @click="displayMode = 'statistics'"
+          >
+            <Icon class="mr-5" size="sm" iconName="statistics-bulleted" />
+            {{ t("statistics") }}
+          </el-button>
+        </div>
       </div>
     </div>
+    <List
+      v-if="displayMode == 'list' && traceStore.currentTrace.endpointNames"
+      :data="traceStore.traceSpans"
+      :traceId="traceStore.currentTrace.traceIds[0].value"
+    />
   </div>
-  <List
-    v-if="displayMode == 'list' && traceStore.currentTrace.endpointNames"
-    :data="traceStore.traceSpans"
-    :traceId="traceStore.currentTrace.traceIds[0].value"
-  />
 </template>
 <script lang="ts" setup>
 import dayjs from "dayjs";
@@ -141,6 +145,11 @@ function changeTraceId(opt: Option[]) {
 //     }
 </script>
 <style lang="scss" scoped>
+.trace-detail {
+  height: 100%;
+  width: 100%;
+}
+
 .trace-detail-wrapper {
   font-size: 12px;
   padding: 5px 10px;
diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue
index dd2660c4..44ffde00 100644
--- a/src/views/dashboard/related/trace/components/List.vue
+++ b/src/views/dashboard/related/trace/components/List.vue
@@ -11,24 +11,24 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="time-charts scroll_hide">
+  <div class="time-charts">
     <div class="trace-t-loading" v-show="loading">
       <Icon iconName="spinner" size="sm" />
     </div>
-    <transition-group name="fade" tag="a" class="mb-5">
+    <div class="service-code">
       <span
-        class="time-charts-item mr-10"
-        v-for="(i, index) in data"
+        class="time-charts-item mr-5"
+        v-for="(i, index) in list"
         :key="index"
         :style="`color:${computedScale(index)}`"
       >
-        <svg class="icon vm mr-5 sm">
-          <use xlink:href="#issue-open-m"></use>
-        </svg>
+        <Icon iconName="issue-open-m" class="mr-5" size="sm" />
         <span>{{ i }}</span>
       </span>
-    </transition-group>
-    <a class="rk-btn r vm tc" @click="downloadTrace">{{ t("exportImage") }}</a>
+      <el-button class="btn" type="primary" @click="downloadTrace">
+        {{ t("exportImage") }}
+      </el-button>
+    </div>
     <div class="trace-list">
       <div ref="traceList"></div>
     </div>
@@ -41,9 +41,8 @@ import _ from "lodash";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import ListGraph from "./utils/d3-trace";
-import copy from "@/utils/copy";
-import { Span, Trace } from "@/types/trace";
-import { Option } from "@/types/app";
+import { Span } from "@/types/trace";
+
 /* global defineProps, Nullable*/
 const props = defineProps({
   data: { type: Array as PropType<Span[]>, default: () => [] },
@@ -55,7 +54,7 @@ const showDetail = ref<boolean>(false);
 const fixSpansSize = ref<number>(0);
 const segmentId = ref<any>([]);
 const currentSpan = ref<Array<Span>>([]);
-const list = ref<any>([]);
+const list = ref<string[]>([]);
 const tree = ref<any>(null);
 const traceList = ref<Nullable<HTMLDivElement>>(null);
 
@@ -141,7 +140,7 @@ function changeTree() {
   if (props.data.length === 0) {
     return [];
   }
-  list.value = Array.from(new Set(props.data.map((i: any) => i.serviceCode)));
+  list.value = Array.from(new Set(props.data.map((i: Span) => i.serviceCode)));
   segmentId.value = [];
   const segmentGroup: any = {};
   const segmentIdGroup: any = [];
@@ -335,9 +334,10 @@ watch(
 <style lang="scss" scoped>
 .time-charts {
   overflow: auto;
-  padding: 10px 30px;
+  padding: 10px;
   position: relative;
-  min-height: 150px;
+  height: calc(100% - 95px);
+  width: 100%;
 }
 
 .trace-node .group {
@@ -387,4 +387,8 @@ watch(
   overflow: auto;
   font-family: monospace;
 }
+
+.btn {
+  float: right;
+}
 </style>
diff --git a/src/views/dashboard/related/trace/components/utils/d3-trace.ts b/src/views/dashboard/related/trace/components/utils/d3-trace.ts
index 253b1909..bdd224e3 100644
--- a/src/views/dashboard/related/trace/components/utils/d3-trace.ts
+++ b/src/views/dashboard/related/trace/components/utils/d3-trace.ts
@@ -18,6 +18,7 @@
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { Span, Trace } from "@/types/trace";
+import { func } from "vue-types";
 
 const type = {
   MQ: "#bf99f8",
@@ -49,7 +50,7 @@ export default class ListGraph {
   constructor(el: HTMLDivElement, handleSelectSpan: (i: Trace) => void) {
     this.handleSelectSpan = handleSelectSpan;
     this.el = el;
-    this.width = el.clientWidth;
+    this.width = el.clientWidth - 20;
     this.height = el.clientHeight;
     this.svg = d3
       .select(this.el)
@@ -61,23 +62,23 @@ export default class ListGraph {
     this.tip = (d3tip as any)()
       .attr("class", "d3-tip")
       .offset([-8, 0])
-      .html(
-        (d: any) => `
-      <div class="mb-5">${d.data.label}</div>
-      ${
-        d.data.dur
-          ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>"
-          : ""
-      }
-      ${
-        d.data.endTime - d.data.startTime
-          ? '<div class="sm">TotalDuration: ' +
-            (d.data.endTime - d.data.startTime) +
-            "ms</div>"
-          : ""
-      }
-      `
-      );
+      .html((d: any) => {
+        return `
+          <div class="mb-5">${d.data.label}</div>
+          ${
+            d.data.dur
+              ? '<div class="sm">SelfDuration: ' + d.data.dur + "ms</div>"
+              : ""
+          }
+          ${
+            d.data.endTime - d.data.startTime
+              ? '<div class="sm">TotalDuration: ' +
+                (d.data.endTime - d.data.startTime) +
+                "ms</div>"
+              : ""
+          }
+          `;
+      });
     this.svg.call(this.tip);
   }
   diagonal(d: any) {
@@ -135,6 +136,7 @@ export default class ListGraph {
     scope.update(d);
   }
   update(source: any, callback: any) {
+    const t = this;
     const nodes = this.root.descendants();
     let index = -1;
     this.root.eachBefore((n: any) => {
@@ -150,11 +152,11 @@ export default class ListGraph {
       .attr("transform", `translate(${source.y0},${source.x0})`)
       .attr("class", "trace-node")
       .style("opacity", 0)
-      .on("mouseover", (d: Trace) => {
-        this.tip.show(d, this);
+      .on("mouseover", function (event: any, d: Trace) {
+        t.tip.show(d, this);
       })
-      .on("mouseout", (d: Trace) => {
-        this.tip.hide(d, this);
+      .on("mouseout", function (event: any, d: Trace) {
+        t.tip.hide(d, this);
       })
       .on("click", (d: Trace) => {
         if (this.handleSelectSpan) {