diff --git a/topology/web/src/views/ClusterView.vue b/topology/web/src/views/ClusterView.vue
index a677d2fa48528583c62015ba41f0c37762259313..0699554a4249b7b6fb439851d179ad96f62fc7e0 100644
--- a/topology/web/src/views/ClusterView.vue
+++ b/topology/web/src/views/ClusterView.vue
@@ -1,5 +1,8 @@
 <template>
-  <h1 class="h1">集群拓扑图演示页面</h1>
+  <div class="title">
+    <h1 class="h1">集群拓扑图演示页面</h1>
+    <el-button class="button" @click="switch_single_node">单机拓扑</el-button>
+  </div>
   <div id="topo-container" class="container"></div>
   <el-drawer class="drawer" v-model="drawer" :title="title" direction="rtl" :before-close="handleClose">
     <el-table :data="table_data" stripe style="width: 100%">
@@ -12,6 +15,7 @@
 <script setup lang="ts">
 import G6 from '@antv/g6';
 import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { topo } from '../request/api';
 import server_logo from "@/assets/icon/server.png";
 
@@ -19,10 +23,16 @@ let drawer = ref(false)
 let title = ref("")
 let table_data = reactive<any>([])
 
+const router = useRouter()
+
 function handleClose() {
   drawer.value = false
 }
 
+function switch_single_node() {
+  router.push("/node")
+}
+
 onMounted(async () => {
   try {
     const data = await topo.multi_host_topo();
@@ -128,11 +138,27 @@ function updateDrawer(node: any) {
 </script>
 
 <style scoped>
+.title {
+  position: relative;
+}
+
 .h1 {
   width: 100%;
   text-align: center;
 }
 
+.button {
+  font-size: 120%;
+  position: absolute;
+  background-color: white;
+  right: 0;
+  bottom: 0;
+
+  margin-bottom: 3px;
+  margin-right: 10px;
+  padding-left: 10px;
+}
+
 .container {
   width: 100%;
   height: 100%;
diff --git a/topology/web/src/views/NodeView.vue b/topology/web/src/views/NodeView.vue
index d7d957e03476a5eaad69a3e5ae4a401c93a6f475..8310a82befc0c6d35cf5ab20b119a44e740ff378 100644
--- a/topology/web/src/views/NodeView.vue
+++ b/topology/web/src/views/NodeView.vue
@@ -14,6 +14,7 @@
         </el-dropdown-menu>
       </template>
     </el-dropdown>
+    <el-button class="button" @click="switch_cluster">集群拓扑</el-button>
   </div>
 
   <div id="topo-container" class="container"></div>
@@ -28,9 +29,12 @@
 <script setup lang="ts">
 import G6 from '@antv/g6';
 import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { topo } from '../request/api';
 import server_logo from "@/assets/icon/server.png";
 
+const router = useRouter()
+
 const node_list = reactive<any>([])
 let graph = ref()
 
@@ -42,6 +46,10 @@ function handleClose() {
   drawer.value = false
 }
 
+function switch_cluster() {
+  router.push("/cluster")
+}
+
 onMounted(async () => {
   try {
     updateNodeList()
@@ -164,13 +172,25 @@ function updateDrawer(node: any) {
 }
 
 .dropdown {
+  font-size: 120%;
+  position: absolute;
+  background-color: white;
+  right: 120px;
+  bottom: 5px;
+
+  margin-bottom: 3px;
+  margin-right: 10px;
+  padding-left: 10px;
+}
+
+.button {
   font-size: 120%;
   position: absolute;
   background-color: white;
   right: 0;
   bottom: 0;
 
-  margin-bottom: 3px;
+  margin-bottom: 0px;
   margin-right: 10px;
   padding-left: 10px;
 }