diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 881189bc..4e2c7403 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -1,18 +1,19 @@
 <script>
   import {serialPort} from "$lib/serial/connection.js"
   import {browser} from "$app/environment"
+  import {base} from "$app/paths"
 </script>
 
 <nav>
   <h1>dot i/o</h1>
 
   <div class="steps">
-    <a href="/" title="CPM - characters per minute" class="icon train cpm">music_note</a>
-    <a href="/" title="ChM - chords mastered" class="icon train chords">piano</a>
-    <a href="/" title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
-    <a href="/" title="StM - sentences mastered" class="icon train sentences">lyrics</a>
-    <a href="/" title="tWPM - top words per minute" class="icon test top">speed</a>
-    <a href="/" title="CM - concepts mastered" class="icon train concepts">cognition</a>
+    <a href={base} title="CPM - characters per minute" class="icon train cpm">music_note</a>
+    <a href={base} title="ChM - chords mastered" class="icon train chords">piano</a>
+    <a href={base} title="aWPM - average words per minute" class="icon test avg">avg_pace</a>
+    <a href={base} title="StM - sentences mastered" class="icon train sentences">lyrics</a>
+    <a href={base} title="tWPM - top words per minute" class="icon test top">speed</a>
+    <a href={base} title="CM - concepts mastered" class="icon train concepts">cognition</a>
   </div>
 
   <div class="actions">
@@ -25,12 +26,12 @@
       </abbr>
     {/if}
     <a
-      href="/device-manager"
+      href="{base}/device-manager"
       title="Device Manager"
       class="icon connect"
       class:error={$serialPort === undefined}>cable</a
     >
-    <a href="/" title="Statistics" class="icon account">person</a>
+    <a href={base} title="Statistics" class="icon account">person</a>
   </div>
 </nav>
 
diff --git a/svelte.config.js b/svelte.config.js
index 49944fab..72450556 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,10 +1,15 @@
 import adapter from "@sveltejs/adapter-static"
 import preprocess from "svelte-preprocess"
 
+const dev = process.argv.includes("dev")
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   preprocess: [preprocess()],
   kit: {
+    paths: {
+      base: dev ? "" : "/dotio",
+    },
     adapter: adapter(),
   },
 }