diff --git a/app/src/lib/components/menu/Menu.svelte b/app/src/lib/components/menu/Menu.svelte
index 357e316..ade0a9f 100644
--- a/app/src/lib/components/menu/Menu.svelte
+++ b/app/src/lib/components/menu/Menu.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { page } from '$app/state';
-  import { useFeatureFlags } from '$lib/stores/featureFlags';
-  import GithubButton from '../menu/GithubButton.svelte';
-  import LogoButton from '../menu/LogoButton.svelte';
-  import MenuList from '../menu/MenuList.svelte';
+  import { page } from '$app/state'
+  import { base } from '$app/paths'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import GithubButton from '../menu/GithubButton.svelte'
+  import LogoButton from '../menu/LogoButton.svelte'
+  import MenuList from '../menu/MenuList.svelte'
   import {
     Connection,
     Settings,
@@ -20,42 +21,46 @@
     AP,
     Copyright,
     Metrics,
-    DNS,
-  } from '$lib/components/icons';
-  import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
+    DNS
+  } from '$lib/components/icons'
+  import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-  const features = useFeatureFlags();
+  const features = useFeatureFlags()
 
-  const appName = page.data.app_name;
+  const appName = page.data.app_name
 
-  const copyright = page.data.copyright;
+  const copyright = page.data.copyright
 
-  const github = { href: 'https://github.com/' + page.data.github, active: true };
+  const github = { href: 'https://github.com/' + page.data.github, active: true }
 
   type menuItem = {
-    title: string;
-    icon: ConstructorOfATypedSvelteComponent;
-    href?: string;
-    feature: boolean;
-    active?: boolean;
-    submenu?: menuItem[];
-  };
+    title: string
+    icon: ConstructorOfATypedSvelteComponent
+    href?: string
+    feature: boolean
+    active?: boolean
+    submenu?: menuItem[]
+  }
 
-  let menuItems = $state<menuItem[]>([]);
+  function withBase(path: string) {
+    return `${base}${path.startsWith('/') ? path : '/' + path}`
+  }
+
+  let menuItems = $state<menuItem[]>([])
 
   $effect(() => {
     menuItems = [
       {
         title: 'Connection',
         icon: WiFi,
-        href: '/connection',
-        feature: !PUBLIC_VITE_USE_HOST_NAME,
+        href: withBase('/connection'),
+        feature: !PUBLIC_VITE_USE_HOST_NAME
       },
       {
         title: 'Controller',
         icon: MdiController,
-        href: '/controller',
-        feature: true,
+        href: withBase('/controller'),
+        feature: true
       },
       {
         title: 'Peripherals',
@@ -65,28 +70,28 @@
           {
             title: 'I2C',
             icon: Connection,
-            href: '/peripherals/i2c',
-            feature: true,
+            href: withBase('/peripherals/i2c'),
+            feature: true
           },
           {
             title: 'Camera',
             icon: Camera,
-            href: '/peripherals/camera',
-            feature: $features.camera,
+            href: withBase('/peripherals/camera'),
+            feature: $features.camera
           },
           {
             title: 'Servo',
             icon: MotorOutline,
-            href: '/peripherals/servo',
-            feature: true,
+            href: withBase('/peripherals/servo'),
+            feature: true
           },
           {
             title: 'IMU',
             icon: Rotate3d,
-            href: '/peripherals/imu',
-            feature: $features.imu || $features.mag || $features.bmp,
-          },
-        ],
+            href: withBase('/peripherals/imu'),
+            feature: $features.imu || $features.mag || $features.bmp
+          }
+        ]
       },
       {
         title: 'WiFi',
@@ -96,22 +101,22 @@
           {
             title: 'WiFi Station',
             icon: Router,
-            href: '/wifi/sta',
-            feature: true,
+            href: withBase('/wifi/sta'),
+            feature: true
           },
           {
             title: 'Access Point',
             icon: AP,
-            href: '/wifi/ap',
-            feature: true,
+            href: withBase('/wifi/ap'),
+            feature: true
           },
           {
             title: 'mDNS',
             icon: DNS,
-            href: '/wifi/mdns',
-            feature: true,
-          },
-        ],
+            href: withBase('/wifi/mdns'),
+            feature: true
+          }
+        ]
       },
       {
         title: 'System',
@@ -121,52 +126,52 @@
           {
             title: 'System Status',
             icon: Health,
-            href: '/system/status',
-            feature: true,
+            href: withBase('/system/status'),
+            feature: true
           },
           {
             title: 'File System',
             icon: Folder,
-            href: '/system/filesystem',
-            feature: true,
+            href: withBase('/system/filesystem'),
+            feature: true
           },
           {
             title: 'System Metrics',
             icon: Metrics,
-            href: '/system/metrics',
-            feature: true,
+            href: withBase('/system/metrics'),
+            feature: true
           },
           {
             title: 'Firmware Update',
             icon: Update,
-            href: '/system/update',
-            feature: $features.ota || $features.upload_firmware || $features.download_firmware,
-          },
-        ],
-      },
-    ] as menuItem[];
-  });
+            href: withBase('/system/update'),
+            feature: $features.ota || $features.upload_firmware || $features.download_firmware
+          }
+        ]
+      }
+    ] as menuItem[]
+  })
 
-  const { menuClicked } = $props();
+  const { menuClicked } = $props()
 
   function setActiveMenuItem(targetTitle: string) {
     menuItems.forEach(item => {
-      item.active = item.title === targetTitle;
+      item.active = item.title === targetTitle
       item.submenu?.forEach(subItem => {
-        subItem.active = subItem.title === targetTitle;
-      });
-    });
-    menuItems = menuItems;
-    menuClicked();
+        subItem.active = subItem.title === targetTitle
+      })
+    })
+    menuItems = menuItems
+    menuClicked()
   }
 
   $effect(() => {
-    setActiveMenuItem(page.data.title);
-  });
+    setActiveMenuItem(page.data.title)
+  })
 
   const updateMenu = (event: any) => {
-    setActiveMenuItem(event.details);
-  };
+    setActiveMenuItem(event.details)
+  }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
diff --git a/app/src/lib/stores/featureFlags.ts b/app/src/lib/stores/featureFlags.ts
index 826860d..c0cfcc5 100644
--- a/app/src/lib/stores/featureFlags.ts
+++ b/app/src/lib/stores/featureFlags.ts
@@ -3,6 +3,7 @@ import { notifications } from '$lib/components/toasts/notifications'
 import Kinematic from '$lib/kinematic'
 import { persistentStore } from '$lib/utilities'
 import { derived, type Writable } from 'svelte/store'
+import { base } from '$app/paths'
 
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
@@ -23,8 +24,8 @@ export function useFeatureFlags() {
 
 export const variants = {
   SPOTMICRO_ESP32: {
-    model: '/spot_micro.urdf.xacro',
-    stl: '/stl.zip',
+    model: `${base}/spot_micro.urdf.xacro`,
+    stl: `${base}/stl.zip`,
     kinematics: {
       l1: 60.5 / 100,
       l2: 10 / 100,
@@ -35,8 +36,8 @@ export const variants = {
     }
   },
   SPOTMICRO_YERTLE: {
-    model: '/yertle.URDF',
-    stl: '/URDF.zip',
+    model: `${base}/yertle.URDF`,
+    stl: `${base}/URDF.zip`,
     kinematics: {
       l1: 35 / 100,
       l2: 0 / 100,