diff --git a/package-lock.json b/package-lock.json
index 3dee44e..b560618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "debates2024",
       "version": "0.0.0",
       "dependencies": {
-        "hls.js": "^1.5.3"
+        "hls.js": "^1.5.3",
+        "svelte-spa-router": "^4.0.1"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.1",
@@ -927,6 +928,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.9.6",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
@@ -1005,6 +1014,17 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
+      "integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
+      "dependencies": {
+        "regexparam": "2.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/vite": {
       "version": "5.0.12",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
diff --git a/package.json b/package.json
index 8b0fca7..38d8c42 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "vite": "^5.0.8"
   },
   "dependencies": {
-    "hls.js": "^1.5.3"
+    "hls.js": "^1.5.3",
+    "svelte-spa-router": "^4.0.1"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 7aff68c..9da7ed3 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,30 +1,13 @@
 <script>
-  // Import the debates data from the JSON file
-  import debates from './debates.json';
-</script>
+  import { Router, Route } from 'svelte-spa-router'
+  import HomePage from './HomePage.svelte'; // Your homepage component
+  import Debate from './Debate.svelte'; // The debate component
 
-<style>
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 16px;
-    padding: 20px;
-  }
-  .debate {
-    cursor: pointer;
-  }
-  img {
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-  }
-</style>
+  // Define your routes
+  const routes = {
+    '/': HomePage,
+    '/debate/:slug': Debate
+  };
+</script>
 
-<div class="grid">
-  {#each debates as { title, thumbnail, slug }}
-    <div class="debate" on:click={() => (window.location.href = `/${slug}`)}>
-      <img src={thumbnail} alt={title} />
-      <p>{title}</p>
-    </div>
-  {/each}
-</div>
+<Router {routes} />
diff --git a/src/HomePage.svelte b/src/HomePage.svelte
new file mode 100644
index 0000000..8eb145d
--- /dev/null
+++ b/src/HomePage.svelte
@@ -0,0 +1,30 @@
+<script>
+  // Import the debates data from the JSON file
+  import debates from './debates.json';
+</script>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+    padding: 20px;
+  }
+  .debate {
+    cursor: pointer;
+  }
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+</style>
+
+<div class="grid">
+  {#each debates as { title, thumbnail, slug }}
+    <div class="debate" on:click={() => (window.location.href = `/debate/${slug}`)}>
+      <img src={thumbnail} alt={title} />
+      <p>{title}</p>
+    </div>
+  {/each}
+</div>