diff --git a/package.json b/package.json
index 19937fb..3b0e042 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "axios": "^1.7.2",
     "element-plus": "^2.7.3",
     "pinia": "^2.1.7",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",
diff --git a/src/App.vue b/src/App.vue
index 2a2e9a1..258eb8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,5 @@
-<script lang="ts" setup>
-import Index from "@/pages/Home/index.vue";
-</script>
+<script lang="ts" setup></script>
 
 <template>
-  <Index />
+  <RouterView />
 </template>
diff --git a/src/G6/nodeConfig.ts b/src/G6/nodeConfig.ts
index d1dab60..40f3704 100644
--- a/src/G6/nodeConfig.ts
+++ b/src/G6/nodeConfig.ts
@@ -117,14 +117,14 @@ export const breakdownNode: ShapeOptions = {
     if (name === "hover") {
       if (value) {
         rectShape.attr({
-          stroke: "green",
+          fill: "green",
         });
         textShape.attr({
           fill: "green",
         });
       } else {
         rectShape.attr({
-          stroke: "#5A77C1",
+          fill: "#D7DCF1",
         });
         textShape.attr({
           fill: "#000",
@@ -155,7 +155,7 @@ export const breakdownNode: ShapeOptions = {
         // y: -r / 2,
         textAlign: "left",
         textBaseline: "middle",
-        // cursor: "pointer",
+        cursor: "pointer",
       },
       name: "breakdown-text-shape",
     });
@@ -176,14 +176,14 @@ export const workflowNode: ShapeOptions = {
     if (name === "hover") {
       if (value) {
         rectShape.attr({
-          stroke: "green",
+          fill: "green",
         });
         textShape.attr({
           fill: "green",
         });
       } else {
         rectShape.attr({
-          stroke: "#5A77C1",
+          fill: "#D7DCF1",
         });
         textShape.attr({
           fill: "#000",
diff --git a/src/main.ts b/src/main.ts
index b679838..2a806ab 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,12 +6,14 @@ import "element-plus/dist/index.css";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import pinia from "./store";
 import { G6Register } from "@/G6";
+import router from "@/router";
 
 // G6 registration
 G6Register();
 
 const app = createApp(App);
 
+app.use(router);
 app.use(pinia);
 app.use(ElementPlus);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
diff --git a/src/pages/Chat/index.vue b/src/pages/Chat/index.vue
new file mode 100644
index 0000000..f129f58
--- /dev/null
+++ b/src/pages/Chat/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const go = () => {
+  router.push({ path: "/workflow", replace: true });
+};
+</script>
+
+<template>
+  <div id="container">
+    <div class="title">Building...</div>
+    <el-button class="button" @click="go">Build Workflow</el-button>
+  </div>
+</template>
+
+<style scoped lang="less">
+#container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .title {
+    font-size: 100px;
+    text-align: center;
+    background: linear-gradient(135deg, #c850c0, #4158d0);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: AppleSystemUIFont, serif;
+  }
+
+  .button {
+    font-size: 25px;
+    margin: 20px;
+    height: 100px;
+    width: 200px;
+    font-family: AppleSystemUIFont, serif;
+    color: #ffffff;
+    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
+  }
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
new file mode 100644
index 0000000..fcd1178
--- /dev/null
+++ b/src/pages/Home.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+</script>
+
+<template>
+  <div id="container">
+    <div class="title">Welcome</div>
+    <el-button
+      class="button"
+      @click="
+        () => {
+          router.push('/workflow');
+        }
+      "
+      >Build Workflow</el-button
+    >
+    <el-button
+      class="button"
+      @click="
+        () => {
+          router.push('/chat');
+        }
+      "
+      >Go Chat</el-button
+    >
+  </div>
+</template>
+
+<style scoped lang="less">
+#container {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .title {
+    font-size: 100px;
+    text-align: center;
+    background: linear-gradient(135deg, #c850c0, #4158d0);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: AppleSystemUIFont, serif;
+  }
+
+  .button {
+    font-size: 25px;
+    margin: 20px;
+    height: 100px;
+    width: 200px;
+    font-family: AppleSystemUIFont, serif;
+    color: #ffffff;
+    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
+  }
+}
+</style>
diff --git a/src/pages/Home/components/LeftBox.vue b/src/pages/Workflow/components/LeftBox.vue
similarity index 100%
rename from src/pages/Home/components/LeftBox.vue
rename to src/pages/Workflow/components/LeftBox.vue
diff --git a/src/pages/Home/components/RightBox.vue b/src/pages/Workflow/components/RightBox.vue
similarity index 100%
rename from src/pages/Home/components/RightBox.vue
rename to src/pages/Workflow/components/RightBox.vue
diff --git a/src/pages/Home/components/TopBox.vue b/src/pages/Workflow/components/TopBox.vue
similarity index 70%
rename from src/pages/Home/components/TopBox.vue
rename to src/pages/Workflow/components/TopBox.vue
index 7402cc8..d8a8ce6 100644
--- a/src/pages/Home/components/TopBox.vue
+++ b/src/pages/Workflow/components/TopBox.vue
@@ -2,6 +2,13 @@
 // function handleClick() {
 //   console.log("click");
 // }
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const go = () => {
+  router.push({ path: "/chat", replace: true });
+};
 </script>
 
 <template>
@@ -10,6 +17,9 @@
     <!--    <el-button style="position: absolute; right: 20px" @click="handleClick"-->
     <!--      >Upload</el-button-->
     <!--    >-->
+    <el-button @click="go" style="position: absolute; left: 10px"
+      >Go Chat</el-button
+    >
   </div>
 </template>
 
diff --git a/src/pages/Home/index.less b/src/pages/Workflow/index.less
similarity index 100%
rename from src/pages/Home/index.less
rename to src/pages/Workflow/index.less
diff --git a/src/pages/Home/index.vue b/src/pages/Workflow/index.vue
similarity index 100%
rename from src/pages/Home/index.vue
rename to src/pages/Workflow/index.vue
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..5b57cfe
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { default as WorkflowIndex } from "@/pages/Workflow/index.vue";
+import { default as ChatIndex } from "@/pages/Chat/index.vue";
+import Home from "@/pages/Home.vue";
+
+const routes: RouteRecordRaw[] = [
+  { path: "/", component: Home },
+  { path: "/workflow", component: WorkflowIndex },
+  { path: "/chat", component: ChatIndex },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/store/session.ts b/src/store/session.ts
index 88b8b6b..1e1bef4 100644
--- a/src/store/session.ts
+++ b/src/store/session.ts
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { reactive, ref } from "vue";
 import { generateId } from "@/utils/graphUtil";
 import { useJobStore } from "@/store/job.ts";
+import { useRouter } from "vue-router";
 
 type Session = {
   sessionId: string;
@@ -11,6 +12,7 @@ type Session = {
 
 export const useSessionStore = defineStore("session", () => {
   const jobStore = useJobStore();
+  const router = useRouter();
 
   const session = reactive<Session>({
     sessionId: generateId(),
@@ -25,6 +27,7 @@ export const useSessionStore = defineStore("session", () => {
   async function chatted() {
     loading.value = true;
     await jobStore.updateData(session.question);
+    await router.push("/workflow");
     graphShow.value = true;
     questionShow.value = false;
     loading.value = false;
diff --git a/yarn.lock b/yarn.lock
index 786973d..9333666 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1260,6 +1260,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
   integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
 
+"@vue/devtools-api@^6.5.1":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
+
 "@vue/language-core@2.0.17":
   version "2.0.17"
   resolved "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz"
@@ -3662,6 +3667,13 @@ vue-demi@*, vue-demi@>=0.14.5:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
 
+vue-router@4:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.0.tgz#128e3fc0c84421035a9bd26027245e6bd68f69ab"
+  integrity sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==
+  dependencies:
+    "@vue/devtools-api" "^6.5.1"
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"