diff --git a/src/utils/color.ts b/src/utils/color.ts
index a7deb13f..f4e36bcb 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -64,7 +64,7 @@ function generateHash(str: string) {
 }
 
 export function getServiceColor(serviceName: string): string {
-  if (!serviceName) return "#eee";
+  if (!serviceName) return "var(--el-color-primary)";
   const hash = generateHash(serviceName);
   return ServicePalette[hash % ServicePalette.length];
 }
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index c21666c2..ed4e0403 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -49,14 +49,16 @@ limitations under the License. -->
       </span>
     </div>
     <h5 class="mb-10" v-if="currentSpan.tags && currentSpan.tags.length"> {{ t("tags") }}. </h5>
-    <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
-      <span class="g-sm-4 grey">{{ i.key }}:</span>
-      <span class="g-sm-8 wba">
-        {{ i.value }}
-        <span v-if="i.key === 'db.statement' && i.value" class="grey link-hover cp ml-5" @click="copy(i.value)">
-          <Icon size="middle" iconName="review-list" />
+    <div class="scroll_bar_style" style="max-height: 200px; overflow: auto">
+      <div class="mb-10 clear item" v-for="i in currentSpan.tags" :key="i.key">
+        <span class="g-sm-4 grey">{{ i.key }}:</span>
+        <span class="g-sm-8 wba">
+          {{ i.value }}
+          <span v-if="i.key === 'db.statement' && i.value" class="grey link-hover cp ml-5" @click="copy(i.value)">
+            <Icon size="middle" iconName="review-list" />
+          </span>
         </span>
-      </span>
+      </div>
     </div>
     <h5 class="mb-10" v-if="currentSpan.logs" v-show="currentSpan.logs.length"> {{ t("logs") }}. </h5>
     <div v-for="(i, index) in currentSpan.logs" :key="index">
@@ -234,14 +236,11 @@ limitations under the License. -->
       });
 
     tree.value = new ListGraph({ el: eventGraph.value, handleSelectSpan: selectEvent });
-    tree.value.init(
-      {
-        children: events,
-        label: "",
-      },
-      events,
-      0,
-    );
+    tree.value.init({
+      data: { children: events, label: "" },
+      row: events,
+      fixSpansSize: 0,
+    });
     tree.value.draw();
   }
 
@@ -282,8 +281,9 @@ limitations under the License. -->
   .attach-events {
     width: 100%;
     margin: 0 5px 5px 0;
-    height: 400px;
-    overflow: auto;
+    height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .popup-btn {