diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts
index a4390aa3..b14e09fd 100644
--- a/src/store/modules/topology.ts
+++ b/src/store/modules/topology.ts
@@ -600,12 +600,16 @@ export const topologyStore = defineStore({
       return res.data;
     },
     async getHierarchyServiceTopology() {
-      if (!(this.node.id && this.node.layer)) {
+      const dashboardStore = useDashboardStore();
+      const { currentService } = useSelectorStore();
+      const id = this.node ? this.node.id : (currentService || {}).id;
+      const layer = this.node ? this.node.layer : dashboardStore.layerId;
+      if (!(id && layer)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql
         .query("getHierarchyServiceTopology")
-        .params({ serviceId: this.node.id, layer: this.node.layer });
+        .params({ serviceId: id, layer: layer });
       if (res.data.errors) {
         return res.data;
       }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 45a6139a..16dab18d 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -26,6 +26,9 @@ limitations under the License. -->
             @change="changeService"
             class="selectors"
           />
+          <span class="ml-5 cp hierarchy-btn" v-if="dashboardStore.entity === 'Service'" @click="viewTopology">
+            <Icon size="small" iconName="hierarchy_topology" />
+          </span>
         </div>
         <div class="selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
           <span class="label">
@@ -135,7 +138,8 @@ limitations under the License. -->
   </div>
   <el-dialog v-model="showHierarchy" :destroy-on-close="true" @closed="showHierarchy = false" width="640px">
     <div class="hierarchy-related">
-      <instance-map />
+      <instance-map v-if="dashboardStore.entity === 'ServiceInstance'" />
+      <hierarchy-map v-else />
     </div>
   </el-dialog>
 </template>
@@ -159,13 +163,16 @@ limitations under the License. -->
     WidgetType,
   } from "@/views/dashboard/data";
   import { useSelectorStore } from "@/store/modules/selectors";
+  import { useTopologyStore } from "@/store/modules/topology";
   import { ElMessage } from "element-plus";
   import type { Option } from "@/types/app";
   import InstanceMap from "@/views/dashboard/related/topology/pod/InstanceMap.vue";
+  import HierarchyMap from "@/views/dashboard/related/topology/service/HierarchyMap.vue";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const selectorStore = useSelectorStore();
+  const topologyStore = useTopologyStore();
   const appStore = useAppStoreWithOut();
   const params = useRoute().params;
   const toolIcons = ref<{ name: string; content: string; id: WidgetType }[]>(AllTools);
@@ -651,6 +658,10 @@ limitations under the License. -->
     };
     fetchPods(EntityType[6].value, selectorStore.currentDestService.id, false, param);
   }
+  function viewTopology() {
+    showHierarchy.value = true;
+    topologyStore.setNode(null);
+  }
   watch(
     () => dashboardStore.entity,
     (newVal, oldVal) => {
@@ -730,7 +741,7 @@ limitations under the License. -->
   }
 
   .hierarchy-related {
-    height: 400px;
+    height: 600px;
     width: 600px;
     overflow: auto;
   }