diff --git a/package.json b/package.json
index 639b765..7f168e4 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8de702a..ef1803a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   vue:
     specifier: ^3.4.15
     version: 3.4.15(typescript@5.3.3)
+  vue-router:
+    specifier: ^4.2.5
+    version: 4.2.5(vue@3.4.15)
 
 devDependencies:
   '@playwright/test':
@@ -857,6 +860,10 @@ packages:
       '@vue/compiler-dom': 3.4.15
       '@vue/shared': 3.4.15
 
+  /@vue/devtools-api@6.5.1:
+    resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
+    dev: false
+
   /@vue/eslint-config-prettier@9.0.0(eslint@8.56.0)(prettier@3.2.4):
     resolution: {integrity: sha512-z1ZIAAUS9pKzo/ANEfd2sO+v2IUalz7cM/cTLOZ7vRFOPk5/xuRKQteOu1DErFLAh/lYGXMVZ0IfYKlyInuDVg==}
     peerDependencies:
@@ -2351,6 +2358,15 @@ packages:
       - supports-color
     dev: true
 
+  /vue-router@4.2.5(vue@3.4.15):
+    resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.1
+      vue: 3.4.15(typescript@5.3.3)
+    dev: false
+
   /vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index ffa16bd..9c61724 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { RouterView } from "vue-router";
 
 let world = ref("World");
 </script>
@@ -8,6 +9,7 @@ let world = ref("World");
   <div>
     <h1><div class="world" /></h1>
     <h2>Hello {{ world }}</h2>
+    <RouterView />
   </div>
 </template>
 
diff --git a/src/main.ts b/src/main.ts
index 3c9bfeb..f2fe54b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,8 @@
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
+import router from "./router";
 
-createApp(App).mount("#app");
+const app = createApp(App);
+app.use(router);
+app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..2e56ead
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import HomeView from "../views/HomeView.vue";
+import CreateProposalView from "../views/CreateProposalView.vue";
+import ProposalsView from "../views/ProposalsView.vue";
+import ProposalView from "../views/ProposalView.vue";
+
+const routerHistory = createWebHistory();
+const routes = [
+  { path: "/", component: HomeView },
+  { path: "/proposals", component: ProposalsView },
+  { path: "/create", component: CreateProposalView },
+  { path: "/proposals/:id", component: ProposalView },
+];
+
+const router = createRouter({
+  history: routerHistory,
+  routes,
+});
+
+export default router;
diff --git a/src/views/CreateProposalView.vue b/src/views/CreateProposalView.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/views/CreateProposalView.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/views/ProposalView.vue b/src/views/ProposalView.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/views/ProposalView.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/views/ProposalsView.vue b/src/views/ProposalsView.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/views/ProposalsView.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..4af4bfd 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}