diff --git a/PoinCloudWeb.Web/package-lock.json b/PoinCloudWeb.Web/package-lock.json
index ef6394d..d51d5e7 100644
--- a/PoinCloudWeb.Web/package-lock.json
+++ b/PoinCloudWeb.Web/package-lock.json
@@ -1924,6 +1924,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.15",
+      "resolved": "https://registry.nlark.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.15.tgz",
+      "integrity": "sha1-rXyzhOBi8WW8+cg3MhJb/7wq2D0="
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.nlark.com/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz",
@@ -11331,9 +11336,12 @@
       }
     },
     "vue-router": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
-      "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
+      "version": "4.0.10",
+      "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz",
+      "integrity": "sha1-7I/aAylJsqMdMnMXD483bobrUqw=",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.14"
+      }
     },
     "vue-style-loader": {
       "version": "4.1.3",
diff --git a/PoinCloudWeb.Web/package.json b/PoinCloudWeb.Web/package.json
index 2e9933c..25bcc3e 100644
--- a/PoinCloudWeb.Web/package.json
+++ b/PoinCloudWeb.Web/package.json
@@ -10,11 +10,12 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^3.5.2"
+    "vue-router": "^4.0.0-0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.13",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
diff --git a/PoinCloudWeb.Web/src/App.vue b/PoinCloudWeb.Web/src/App.vue
index 96c70fc..bd310b0 100644
--- a/PoinCloudWeb.Web/src/App.vue
+++ b/PoinCloudWeb.Web/src/App.vue
@@ -1,21 +1,11 @@
 <template>
-  <div>
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+    <router-view />
   </div>
 </template>
 
-<script>
-import HelloWorld from "./components/HelloWorld.vue";
-
-export default {
-  name: "App",
-  components: {
-    HelloWorld,
-  },
-};
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -23,6 +13,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>
diff --git a/PoinCloudWeb.Web/src/main.js b/PoinCloudWeb.Web/src/main.js
index 01433bc..3e79677 100644
--- a/PoinCloudWeb.Web/src/main.js
+++ b/PoinCloudWeb.Web/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
diff --git a/PoinCloudWeb.Web/src/router/index.js b/PoinCloudWeb.Web/src/router/index.js
new file mode 100644
index 0000000..15988df
--- /dev/null
+++ b/PoinCloudWeb.Web/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/PoinCloudWeb.Web/src/views/About.vue b/PoinCloudWeb.Web/src/views/About.vue
new file mode 100644
index 0000000..3fa2807
--- /dev/null
+++ b/PoinCloudWeb.Web/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/PoinCloudWeb.Web/src/views/Home.vue b/PoinCloudWeb.Web/src/views/Home.vue
new file mode 100644
index 0000000..8bd6c57
--- /dev/null
+++ b/PoinCloudWeb.Web/src/views/Home.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  }
+}
+</script>