diff --git a/front/index.html b/front/index.html
index 4ef5f0e..96bc0ba 100644
--- a/front/index.html
+++ b/front/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TastyBites</title>
   </head>
diff --git a/front/package-lock.json b/front/package-lock.json
index 1aef12f..76c5907 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "front",
       "version": "0.0.0",
+      "dependencies": {
+        "svelte-spa-router": "^4.0.1"
+      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^3.0.2",
         "svelte": "^4.2.12",
@@ -958,6 +961,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.14.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
@@ -1039,6 +1050,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.2.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
diff --git a/front/package.json b/front/package.json
index e3c18db..7cff966 100644
--- a/front/package.json
+++ b/front/package.json
@@ -12,5 +12,8 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "svelte": "^4.2.12",
     "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "svelte-spa-router": "^4.0.1"
   }
 }
diff --git a/front/src/App.svelte b/front/src/App.svelte
index 404843a..7e86e3b 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -1,9 +1,45 @@
 <script>
+    import Router from 'svelte-spa-router';
+    import { replace, link, location } from 'svelte-spa-router';
+    import active from 'svelte-spa-router/active'
+    import routes from './routes';
+
+    let oldLocation = undefined;
+    let showNavBar = false;
+
+    function routeLoading(event) {
+        if (event.detail.location === oldLocation) {
+            return; // not an actual change
+        }
+        showNavBar = event.detail.userData.showNavBar;
+        oldLocation = event.detail.location;
+    }
+
+    function conditionFailure(event) {
+        replace("/");
+    }
 </script>
 
-<main>
-    <h1>TastyBites</h1>
-</main>
+{#if showNavBar }
+    <nav>
+        <p>TastyBites</p>
+        <ul>
+            <li><a href="/" use:link use:active>Home</a></li>
+            <li><a href="/contact" use:link use:active>Contact Us</a></li>
+            <li><a href="/cart" use:link use:active>Shopping Cart</a></li>
+        </ul>
+        <p>Location: {$location}</p>
+    </nav>
+{/if}
+<Router
+    {routes}
+    restoreScrollState={true}
+    on:routeLoading={routeLoading}
+    on:conditionsFailed={conditionFailure}
+/>
+<footer>
+    <p>TastyBites is a fake restaurant</p>
+</footer>
 
 <style>
 </style>
diff --git a/front/src/routes.js b/front/src/routes.js
new file mode 100644
index 0000000..e1b171b
--- /dev/null
+++ b/front/src/routes.js
@@ -0,0 +1,25 @@
+import { wrap } from "svelte-spa-router/wrap";
+import PageLoading from "./routes/PageLoading.svelte";
+
+const routes = {
+    "/": wrap({
+        asyncComponent: () => import("./routes/PageIndex.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+    "/contact": wrap({
+        asyncComponent: () => import("./routes/PageContact.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+    "/cart": wrap({
+        asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+}
+
+export default routes;
diff --git a/front/src/routes/PageContact.svelte b/front/src/routes/PageContact.svelte
new file mode 100644
index 0000000..a802415
--- /dev/null
+++ b/front/src/routes/PageContact.svelte
@@ -0,0 +1,2 @@
+<h1>Contact us</h1>
+<p>Nuh uh</p>
diff --git a/front/src/routes/PageIndex.svelte b/front/src/routes/PageIndex.svelte
new file mode 100644
index 0000000..bdccd54
--- /dev/null
+++ b/front/src/routes/PageIndex.svelte
@@ -0,0 +1,2 @@
+<h1>TastyBites reeeee</h1>
+<p>aurgh</p>
diff --git a/front/src/routes/PageLoading.svelte b/front/src/routes/PageLoading.svelte
new file mode 100644
index 0000000..1e72995
--- /dev/null
+++ b/front/src/routes/PageLoading.svelte
@@ -0,0 +1 @@
+<p>Loading</p>
\ No newline at end of file
diff --git a/front/src/routes/PageShoppingCart.svelte b/front/src/routes/PageShoppingCart.svelte
new file mode 100644
index 0000000..c5e412b
--- /dev/null
+++ b/front/src/routes/PageShoppingCart.svelte
@@ -0,0 +1,2 @@
+<h1>Shopping Cart</h1>
+<p>Empty....</p>
