diff --git a/web/src/App.vue b/web/src/App.vue
new file mode 100644
index 0000000..dec8c0d
--- /dev/null
+++ b/web/src/App.vue
@@ -0,0 +1,5 @@
+<template>
+	<router-view />
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 5136b72..5281c38 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -5,15 +5,22 @@
 		</div>
 		<nav class="flex justify-center">
 			<ul class="flex space-x-4">
-				<li><router-link to="/">Home</router-link></li>
+				<!-- <li><router-link to="/">Home</router-link></li>
 				<li><router-link to="/about">About</router-link></li>
-				<li><router-link to="/contact">Contact</router-link></li>
+				<li><router-link to="/contact">Contact</router-link></li> -->
+				<li v-for="route in routes" :key="route.path">
+					<router-link :to="route.path">{{ route.name }}</router-link>
+				</li>
 			</ul>
 		</nav>
 		<ColorMode />
 	</div>
 </template>
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import ColorMode from './util/ColorMode.vue';
+const router = useRouter();
+
+const routes = router.getRoutes();
 
 </script>
\ No newline at end of file
diff --git a/web/src/entry-client.ts b/web/src/entry-client.ts
index 0f15acf..62d7b29 100644
--- a/web/src/entry-client.ts
+++ b/web/src/entry-client.ts
@@ -1,7 +1,8 @@
 import './assets/index.css'
 import { createApp } from './main'
+import { router } from './router'
 
 
 const { app } = createApp()
-
+app.use(router)
 app.mount('#app')
diff --git a/web/src/main.ts b/web/src/main.ts
index 6d792d5..43bd42e 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,6 +1,6 @@
 import { createSSRApp } from 'vue'
-import App from './pages/Index.vue'
-import { router } from './router'
+import App from './App.vue'
+
 
 
 // SSR requires a fresh app instance per request, therefore we export a function
@@ -8,6 +8,5 @@ import { router } from './router'
 // fresh store here.
 export function createApp() {
 	const app = createSSRApp(App)
-	app.use(router)
 	return { app }
 }
diff --git a/web/src/router.ts b/web/src/router.ts
index 297bd6a..0c981dd 100644
--- a/web/src/router.ts
+++ b/web/src/router.ts
@@ -1,12 +1,20 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Index from '@/pages/Index.vue'
 
 const routes = [
-	{ path: '', component: Index },
-	{ path: '/utilitydust', component: () => import('@/pages/UtilityDust.vue') },
+	{
+		path: '/',
+		component: Index,
+		name: 'Index'
+	},
+	{
+		path: '/utilitydust',
+		component: () => import('@/pages/UtilityDust.vue'),
+		name: 'utilitydust'
+	},
 ]
 
 export const router = createRouter({
-	history: createMemoryHistory(),
+	history: createWebHistory('/'),
 	routes,
 })
\ No newline at end of file