diff --git a/src/assets/icons/device_hub.svg b/src/assets/icons/device_hub.svg
new file mode 100644
index 00000000..db4932c4
--- /dev/null
+++ b/src/assets/icons/device_hub.svg
@@ -0,0 +1,18 @@
+<!-- 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 version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>device_hub</title>
+<path d="M17.016 15.984h3.984v5.016h-5.016v-3.047l-3.984-4.219-3.984 4.219v3.047h-5.016v-5.016h3.984l4.031-3.984v-3.188q-0.891-0.328-1.453-1.078t-0.563-1.734q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109q0 0.984-0.563 1.734t-1.453 1.078v3.188z"></path>
+</svg>
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 88264c2e..236bc2ee 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -34,6 +34,7 @@ interface DashboardState {
   activedGridItem: string;
   durationTime: Duration;
   selectorStore: any;
+  showTopology: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -47,6 +48,7 @@ export const dashboardStore = defineStore({
     activedGridItem: "",
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
+    showTopology: false,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -160,6 +162,9 @@ export const dashboardStore = defineStore({
         this.layout = [ConfigData];
       }
     },
+    setTopology(show: boolean) {
+      this.showTopology = show;
+    },
     setConfigs(param: { [key: string]: unknown }) {
       const actived = this.activedGridItem.split("-");
       const index = this.layout.findIndex(
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index a96732a7..10cb8759 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -25,6 +25,14 @@ limitations under the License. -->
     >
       <config-edit />
     </el-dialog>
+    <el-dialog
+      v-model="dashboardStore.showTopology"
+      :title="t('topology')"
+      :destroy-on-close="true"
+      @closed="dashboardStore.setTopology(false)"
+    >
+      topology
+    </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 50d0e3e7..cc3a2b37 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -168,5 +168,6 @@ export const ToolIcons = [
   { name: "save_alt", content: "Export", id: "export" },
   { name: "folder_open", content: "Import", id: "import" },
   { name: "settings", content: "Settings", id: "settings" },
-  { name: "save", content: "Apply", id: "applay" },
+  { name: "device_hub", content: "Topology", id: "topology" },
+  { name: "save", content: "Apply", id: "apply" },
 ];
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 1f8584e8..2c0c0078 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -199,6 +199,9 @@ function clickIcons(t: { id: string; content: string; name: string }) {
     case "addImage":
       dashboardStore.addControl("Image");
       break;
+    case "topology":
+      dashboardStore.setTopology(true);
+      break;
     case "settings":
       dashboardStore.setConfigPanel(true);
       break;
diff --git a/src/views/dashboard/related/Topology.vue b/src/views/dashboard/related/Topology.vue
new file mode 100644
index 00000000..cc94a7f9
--- /dev/null
+++ b/src/views/dashboard/related/Topology.vue
@@ -0,0 +1,17 @@
+<!-- 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. -->
+<template>
+  <div class="topology">topology</div>
+</template>
diff --git a/src/views/dashboard/related/service/ServiceTopology.vue b/src/views/dashboard/related/service/ServiceTopology.vue
new file mode 100644
index 00000000..e69de29b