diff --git a/http/dashboard.go b/http/dashboard.go
index 8e13108..f752b10 100644
--- a/http/dashboard.go
+++ b/http/dashboard.go
@@ -18,7 +18,7 @@ func (h *Handler) dashboard(c *gin.Context) {
 	d := DashboardData{
 		Budgets: budgets,
 	}
-	c.HTML(http.StatusOK, "dashboard.html", d)
+	c.JSON(http.StatusOK, d)
 }
 
 type DashboardData struct {
diff --git a/web/package.json b/web/package.json
index 21e4c63..1d9b41d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vue": "^3.2.25",
-    "vue-router": "^3.5.3"
+    "vue-router": "4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",
diff --git a/web/src/App.vue b/web/src/App.vue
index 7422330..61d3df4 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,12 +1,12 @@
 <script setup>
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <router-link to="/uiae">Go to Bar</router-link>
+  <router-view></router-view>
 </template>
 
 <style>
diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue
index 48a5ca9..b2ef30e 100644
--- a/web/src/components/HelloWorld.vue
+++ b/web/src/components/HelloWorld.vue
@@ -18,14 +18,6 @@ const count = ref(0)
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
 
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
-
   <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
diff --git a/web/src/main.js b/web/src/main.js
index 01433bc..87c76be 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router/index.js'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router).mount('#app')
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
new file mode 100644
index 0000000..a785adb
--- /dev/null
+++ b/web/src/pages/Dashboard.vue
@@ -0,0 +1,34 @@
+<script setup>
+let dashboard;
+fetch("/dashboard")
+    .then(x => x.json())
+    .then(x => console.log(x))
+    .then(x => dashboard = x);
+</script>
+
+<!--
+{{define "title"}}
+    Budgets
+{{end}}
+
+{{define "new"}}
+    {{template "budget-new"}}
+{{end}}
+
+{{define "sidebar"}}
+    Please select a budget.
+{{end}}
+
+{{template "base" .}}
+-->
+
+<template>
+    <div v-if="dashboard != nil" v-for="budget in dashboard.Budgets" class="budget-item">
+        <a href="budget/{{budget.ID}}">{{budget.Name}}</a>
+        <span class="time"></span>
+    </div>
+    <div class="budget-item">
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newbudgetmodal">New Budget</button>
+        <span class="time"></span>
+    </div>
+</template>
\ No newline at end of file
diff --git a/web/src/router/index.js b/web/src/router/index.js
new file mode 100644
index 0000000..363c213
--- /dev/null
+++ b/web/src/router/index.js
@@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import HelloWorld from '../components/HelloWorld.vue';
+import Dashboard from '../pages/Dashboard.vue';
+
+const routes = [
+  { path: '/', name: 'Index', component: Dashboard },
+  { path: '/uiae',  name: 'Home', component: HelloWorld },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export default router
\ No newline at end of file
diff --git a/web/yarn.lock b/web/yarn.lock
index 6e0d547..4f77c09 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -54,6 +54,11 @@
     "@vue/compiler-dom" "3.2.27"
     "@vue/shared" "3.2.27"
 
+"@vue/devtools-api@^6.0.0-beta.18":
+  version "6.0.0-beta.21.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
+  integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
+
 "@vue/reactivity-transform@3.2.27":
   version "3.2.27"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.27.tgz#610b6df174cdceba6de1376f3218736c3b0e753d"
@@ -323,10 +328,12 @@ vite@^2.7.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vue-router@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
-  integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
+vue-router@4:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.18"
 
 vue@^3.2.25:
   version "3.2.27"