diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 110da6d2..a04e2280 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -16,10 +16,13 @@ limitations under the License. -->
   </div>
   <div ref="traceGraph" class="d3-graph"></div>
   <div id="trace-action-box">
-    <div @click="showDetail = true">Span Details</div>
-    <div v-for="span in parentSpans" :key="span.parentSegmentId" @click="viewParentSpan(span)">{{
-      `Parent Span: ${span.endpointName} -> Start Time: ${visDate(span.startTime)}`
-    }}</div>
+    <div @click="showDetail = true">Span details</div>
+    <div v-for="span in parentSpans" :key="span.segmentId" @click="viewParentSpan(span)">
+      {{ `Parent span: ${span.endpointName} -> Start time: ${visDate(span.startTime)}` }}
+    </div>
+    <div v-for="span in refParentSpans" :key="span.segmentId" @click="viewParentSpan(span)">
+      {{ `Ref to span: ${span.endpointName} -> Start time: ${visDate(span.startTime)}` }}
+    </div>
   </div>
   <el-dialog
     v-model="showDetail"
@@ -62,6 +65,7 @@ limitations under the License. -->
   const tree = ref<Nullable<any>>(null);
   const traceGraph = ref<Nullable<HTMLDivElement>>(null);
   const parentSpans = ref<Array<Span>>([]);
+  const refParentSpans = ref<Array<Span>>([]);
   const debounceFunc = debounce(draw, 500);
   const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss:SSS") => dayjs(date).format(pattern);
 
@@ -110,13 +114,15 @@ limitations under the License. -->
   }
   function handleSelectSpan(i: Recordable) {
     const spans = [];
+    const refSpans = [];
     parentSpans.value = [];
+    refParentSpans.value = [];
     currentSpan.value = i.data;
     if (!currentSpan.value) {
       return;
     }
     for (const ref of currentSpan.value.refs || []) {
-      spans.push(ref);
+      refSpans.push(ref);
     }
     if (currentSpan.value.parentSpanId > -1) {
       spans.push({
@@ -125,6 +131,12 @@ limitations under the License. -->
         traceId: currentSpan.value.traceId,
       });
     }
+    for (const span of refSpans) {
+      const item = props.data.find(
+        (d) => d.segmentId === span.parentSegmentId && d.spanId === span.parentSpanId && d.traceId === span.traceId,
+      );
+      item && refParentSpans.value.push(item);
+    }
     for (const span of spans) {
       const item = props.data.find(
         (d) => d.segmentId === span.parentSegmentId && d.spanId === span.parentSpanId && d.traceId === span.traceId,
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index 977429c1..5b44857c 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -172,7 +172,7 @@ export default class ListGraph {
         d3.select("#trace-action-box")
           .style("display", "block")
           .style("left", `${offsetX + 30}px`)
-          .style("top", `${offsetY + 30}px`);
+          .style("top", `${offsetY + 40}px`);
         t.selectedNode = d3.select(this);
         if (t.handleSelectSpan) {
           t.handleSelectSpan(d);