diff --git a/src/dump.ts b/src/dump.ts
index 41c9303..66dc353 100644
--- a/src/dump.ts
+++ b/src/dump.ts
@@ -1,7 +1,8 @@
 import { copyFile, readFile, writeFile } from 'fs/promises';
-import type { BigCraftable, Boots, Clothing, ClothingType, Furniture, FurnitureType, Hat, MeleeWeapon, MeleeWeaponType, ObjectInformation, ObjectType, RangedWeapon, Tool } from './types/items';
+import type { BigCraftable, Boots, Clothing, ClothingType, Furniture, FurnitureType, Hat, MeleeWeapon, MeleeWeaponType, ObjectInformation, RangedWeapon, Tool } from './types/items';
 // @ts-expect-error
 import { GetSprite } from './lib/Spritesheet.ts';
+import type { TypeEnum } from '$types/save/1.5';
 
 const objects = JSON.parse(await readFile('./content/Data/ObjectInformation.json', 'utf-8')) as Record<string, string>;
 const objectsArray = Object.entries(objects).map(([key, value]) => {
@@ -16,7 +17,7 @@ const objectsArray = Object.entries(objects).map(([key, value]) => {
         name: props[0],
         price: Number(props[1]),
         edibility: Number(props[2]),
-        type: type as ObjectType,
+        type: type as TypeEnum,
         category: Number(category),
         displayName: props[4],
         description: props[5],
@@ -42,7 +43,7 @@ const bigCraftablesArray = Object.entries(bigCraftables).map(([key, value]) => {
         name: props[0],
         price: Number(props[1]),
         edibility: Number(props[2]),
-        type: props[3].split(' ')[0] as ObjectType,
+        type: props[3].split(' ')[0] as TypeEnum,
         category: -9,
         description: props[4],
         outdoors: props[5] === 'true',
diff --git a/src/routes/(backups)/backups/+layout.svelte b/src/routes/(backups)/backups/+layout.svelte
index df2c9bf..1ec69aa 100644
--- a/src/routes/(backups)/backups/+layout.svelte
+++ b/src/routes/(backups)/backups/+layout.svelte
@@ -6,16 +6,17 @@
     import SidebarButton from '../../SidebarButton.svelte';
     import { tooltip } from '$lib/Tooltip';
     import { browser } from '$app/environment';
+    import { base } from '$app/paths';
 
     // https://github.com/sveltejs/kit/issues/5434
-    page.subscribe((p) => browser && p.url.pathname === '/' && get(SaveGame) && goto('/inventory'));
+    page.subscribe((p) => browser && p.url.pathname === '/' && get(SaveGame) && goto(base + '/inventory'));
 </script>
 
 <div class="wrapper">
     <slot />
 
     <nav>
-        <a href="/" aria-label="Cancel" use:tooltip>
+        <a href={`${base}/`} aria-label="Cancel" use:tooltip>
             <SidebarButton>❌</SidebarButton>
         </a>
     </nav>
diff --git a/src/routes/(edit)/(list)/cooking/+page.ts b/src/routes/(edit)/(list)/cooking/+page.ts
index 6dd2994..c453f4d 100644
--- a/src/routes/(edit)/(list)/cooking/+page.ts
+++ b/src/routes/(edit)/(list)/cooking/+page.ts
@@ -1,7 +1,8 @@
+import { base } from '$app/paths';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ fetch }) => {
-    const data = await fetch('/cookingrecipes.json');
+    const data = await fetch(base + '/cookingrecipes.json');
     const recipes = await data.json() as Array<string>;
 
     return {
diff --git a/src/routes/(edit)/(list)/crafting/+page.ts b/src/routes/(edit)/(list)/crafting/+page.ts
index 9e91d12..7926e1c 100644
--- a/src/routes/(edit)/(list)/crafting/+page.ts
+++ b/src/routes/(edit)/(list)/crafting/+page.ts
@@ -1,7 +1,8 @@
+import { base } from '$app/paths';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ fetch }) => {
-    const data = await fetch('/craftingrecipes.json');
+    const data = await fetch(base + '/craftingrecipes.json');
     const recipes = await data.json() as Array<string>;
 
     return {
diff --git a/src/routes/(edit)/+layout.svelte b/src/routes/(edit)/+layout.svelte
index 94c913c..5e799f0 100644
--- a/src/routes/(edit)/+layout.svelte
+++ b/src/routes/(edit)/+layout.svelte
@@ -9,11 +9,12 @@
     import Router from './Router.svelte';
     import { tooltip } from '$lib/Tooltip';
     import { browser } from '$app/environment';
+    import { base } from '$app/paths';
 
     export let data: LayoutData;
 
     // If the save changes for whatever reason, go back to the main screen
-    const unsub = page.subscribe(() => browser && get(SaveGame) == undefined && goto('/'));
+    const unsub = page.subscribe(() => browser && get(SaveGame) == undefined && goto(base + '/'));
     onDestroy(() => unsub());
 
     // Set the context for the item data for components to use
@@ -24,7 +25,7 @@
     const cancel = () => {
         SaveGame.set(undefined);
         FileName.set(undefined);
-        goto('/');
+        goto(base + '/');
     };
 
     // Download the save file
diff --git a/src/routes/(edit)/+layout.ts b/src/routes/(edit)/+layout.ts
index c94b24e..e75bf48 100644
--- a/src/routes/(edit)/+layout.ts
+++ b/src/routes/(edit)/+layout.ts
@@ -1,8 +1,9 @@
+import { base } from "$app/paths";
 import type { ItemInformation } from "$types/items";
 
 // Prefetch dumped data
 export const load = async ({ fetch }) => {
-    const data = await fetch('/iteminfo.json');
+    const data = await fetch(base + '/iteminfo.json');
 
     const Items = new Map<string, ItemInformation>(await data.json() as any);
     return {
diff --git a/src/routes/(edit)/Router.svelte b/src/routes/(edit)/Router.svelte
index 78b7a58..0da8381 100644
--- a/src/routes/(edit)/Router.svelte
+++ b/src/routes/(edit)/Router.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { tooltip } from '$lib/Tooltip';
     import SidebarButton from '../SidebarButton.svelte';
 </script>
 
 <nav>
-    <a href="/inventory" aria-label="Inventory" use:tooltip><SidebarButton>🎒</SidebarButton></a>
-    <a href="/character" aria-label="Character" use:tooltip><SidebarButton>🙋</SidebarButton></a>
-    <a href="/appearance" aria-label="Appearance" use:tooltip><SidebarButton>🪞</SidebarButton></a>
-    <a href="/relationships" aria-label="Relationships" use:tooltip><SidebarButton>💖</SidebarButton></a>
-    <a href="/crafting" aria-label="Crafting" use:tooltip><SidebarButton>🔨</SidebarButton></a>
-    <a href="/cooking" aria-label="Cooking" use:tooltip><SidebarButton>🍫</SidebarButton></a>
-    <a href="/bundles" aria-label="Community Center bundles" use:tooltip><SidebarButton>🎁</SidebarButton></a>
+    <a href={`${base}/inventory`} aria-label="Inventory" use:tooltip><SidebarButton>🎒</SidebarButton></a>
+    <a href={`${base}/character`} aria-label="Character" use:tooltip><SidebarButton>🙋</SidebarButton></a>
+    <a href={`${base}/appearance`} aria-label="Appearance" use:tooltip><SidebarButton>🪞</SidebarButton></a>
+    <a href={`${base}/relationships`} aria-label="Relationships" use:tooltip><SidebarButton>💖</SidebarButton></a>
+    <a href={`${base}/crafting`} aria-label="Crafting" use:tooltip><SidebarButton>🔨</SidebarButton></a>
+    <a href={`${base}/cooking`} aria-label="Cooking" use:tooltip><SidebarButton>🍫</SidebarButton></a>
+    <a href={`${base}/bundles`} aria-label="Community Center bundles" use:tooltip><SidebarButton>🎁</SidebarButton></a>
 </nav>
 
 <style>
diff --git a/src/routes/(edit)/appearance/Preview.svelte b/src/routes/(edit)/appearance/Preview.svelte
index e42a1de..a7246da 100644
--- a/src/routes/(edit)/appearance/Preview.svelte
+++ b/src/routes/(edit)/appearance/Preview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { AccessoryIsTinted } from '$lib/CharacterColors';
     import { Character } from '$lib/SaveFile';
     import { GetPlayerSpriteForPants, IndexToSprite } from '$lib/Spritesheet';
@@ -45,15 +46,15 @@
     export let pants: number | undefined = undefined;
     export let acc: number | undefined = undefined;
 
-    let baseSheet = '/assets/male_farmer.png';
-    let otherSheet = '/assets/male_farmer_other.png';
-    let hairSheet = '/assets/hairstyles.png';
-    let armsSheet = '/assets/male_farmer_arms.png';
-    let bootsSheet = '/assets/farmer_boots.png';
-    const pantsSheet = '/assets/pants.png';
-    const shirtSheet = '/assets/shirts.png';
-    const accessoriesSheet = '/assets/accessories.png';
-    const hatSheet = '/assets/hats.png';
+    let baseSheet = 'male_farmer.png';
+    let otherSheet = 'male_farmer_other.png';
+    let hairSheet = 'hairstyles.png';
+    let armsSheet = 'male_farmer_arms.png';
+    let bootsSheet = 'farmer_boots.png';
+    const pantsSheet = 'pants.png';
+    const shirtSheet = 'shirts.png';
+    const accessoriesSheet = 'accessories.png';
+    const hatSheet = 'hats.png';
 
     type pos = { x: number; y: number };
     let pantsPosition: pos = { x: 0, y: 0 };
@@ -84,16 +85,16 @@
             await loaded;
             if (character) {
                 if (character.isMale) {
-                    baseSheet = '/assets/male_farmer.png';
-                    armsSheet = '/assets/male_farmer_arms.png';
+                    baseSheet = 'male_farmer.png';
+                    armsSheet = 'male_farmer_arms.png';
                 } else {
-                    baseSheet = '/assets/female_farmer.png';
-                    armsSheet = '/assets/female_farmer_arms.png';
+                    baseSheet = 'female_farmer.png';
+                    armsSheet = 'female_farmer_arms.png';
                 }
 
                 isMale = character.isMale;
-                otherSheet = character.isMale ? '/assets/male_farmer_other.png' : '/assets/female_farmer_other.png';
-                bootsSheet = character.isMale ? '/assets/male_farmer_boots.png' : '/assets/female_farmer_boots.png';
+                otherSheet = character.isMale ? 'male_farmer_other.png' : 'female_farmer_other.png';
+                bootsSheet = character.isMale ? 'male_farmer_boots.png' : 'female_farmer_boots.png';
 
                 baseTint[0] = PrimarySkinColors[character.skinColor];
                 baseTint[1] = SecondarySkinColors[character.skinColor];
@@ -161,32 +162,32 @@
 <div class="appearance" class:female={isMale === false}>
     {#await loaded then}
         <!-- START LAYERED TINT -->
-        <div class="base" style:--spritesheet={`url(${baseSheet})`} style:--tint={`rgba(${baseTint[2].R},${baseTint[2].G},${baseTint[2].B},${baseTint[2].A})`} style:--x={'16px'} style:--y={'0'} />
-        <div class="base" style:--spritesheet={`url(${baseSheet})`} style:--tint={`rgba(${baseTint[1].R},${baseTint[1].G},${baseTint[1].B},${baseTint[1].A})`} style:--x={'32px'} style:--y={'0'} />
-        <div class="base" style:--spritesheet={`url(${baseSheet})`} style:--tint={`rgba(${baseTint[0].R},${baseTint[0].G},${baseTint[0].B},${baseTint[0].A})`} style:--x={'48px'} style:--y={'0'} />
+        <div class="base" style:--spritesheet={`url(${base}/assets/${baseSheet})`} style:--tint={`rgba(${baseTint[2].R},${baseTint[2].G},${baseTint[2].B},${baseTint[2].A})`} style:--x={'16px'} style:--y={'0'} />
+        <div class="base" style:--spritesheet={`url(${base}/assets/${baseSheet})`} style:--tint={`rgba(${baseTint[1].R},${baseTint[1].G},${baseTint[1].B},${baseTint[1].A})`} style:--x={'32px'} style:--y={'0'} />
+        <div class="base" style:--spritesheet={`url(${base}/assets/${baseSheet})`} style:--tint={`rgba(${baseTint[0].R},${baseTint[0].G},${baseTint[0].B},${baseTint[0].A})`} style:--x={'48px'} style:--y={'0'} />
         <!-- END LAYERED TINT -->
 
-        <div class="eyes" style:--spritesheet={`url(${otherSheet})`} />
+        <div class="eyes" style:--spritesheet={`url(${base}/assets/${otherSheet})`} />
 
         <!-- START LAYERED TINT -->
-        <div class="iris" style:--spritesheet={`url(${otherSheet})`} style:--tint={`rgba(${eyeTint.R},${eyeTint.G},${eyeTint.B},${eyeTint.A})`} style:--x={'32px'} style:--y={'0'} />
+        <div class="iris" style:--spritesheet={`url(${base}/assets/${otherSheet})`} style:--tint={`rgba(${eyeTint.R},${eyeTint.G},${eyeTint.B},${eyeTint.A})`} style:--x={'32px'} style:--y={'0'} />
         <!-- END LAYERED TINT -->
 
         <!-- START LAYERED TINT -->
-        <div class="boots" style:--spritesheet={`url(${bootsSheet})`} style:--x={'48px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[0].R},${bootsTint[0].G},${bootsTint[0].B},${bootsTint[0].A})`} />
-        <div class="boots" style:--spritesheet={`url(${bootsSheet})`} style:--x={'32px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[1].R},${bootsTint[1].G},${bootsTint[1].B},${bootsTint[1].A})`} />
-        <div class="boots" style:--spritesheet={`url(${bootsSheet})`} style:--x={'0px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[2].R},${bootsTint[2].G},${bootsTint[2].B},${bootsTint[2].A})`} />
-        <div class="boots" style:--spritesheet={`url(${bootsSheet})`} style:--x={'16px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[3].R},${bootsTint[3].G},${bootsTint[3].B},${bootsTint[3].A})`} />
+        <div class="boots" style:--spritesheet={`url(${base}/assets/${bootsSheet})`} style:--x={'48px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[0].R},${bootsTint[0].G},${bootsTint[0].B},${bootsTint[0].A})`} />
+        <div class="boots" style:--spritesheet={`url(${base}/assets/${bootsSheet})`} style:--x={'32px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[1].R},${bootsTint[1].G},${bootsTint[1].B},${bootsTint[1].A})`} />
+        <div class="boots" style:--spritesheet={`url(${base}/assets/${bootsSheet})`} style:--x={'0px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[2].R},${bootsTint[2].G},${bootsTint[2].B},${bootsTint[2].A})`} />
+        <div class="boots" style:--spritesheet={`url(${base}/assets/${bootsSheet})`} style:--x={'16px'} style:--y={'0'} style:--tint={`rgba(${bootsTint[3].R},${bootsTint[3].G},${bootsTint[3].B},${bootsTint[3].A})`} />
         <!-- END LAYERED TINT -->
 
-        <div class="pants" style:--spritesheet={`url(${pantsSheet})`} style:--x={`${pantsPosition.x}px`} style:--y={`${pantsPosition.y}px`} style:--tint={`rgba(${pantsTint.R},${pantsTint.G},${pantsTint.B},${pantsTint.A})`} />
-        <div class="shirt" style:--spritesheet={`url(${shirtSheet})`} style:--x={`${shirtPosition.x}px`} style:--y={`${shirtPosition.y}px`} style:--tint={`rgba(${shirtTint.R},${shirtTint.G},${shirtTint.B},${shirtTint.A})`} />
+        <div class="pants" style:--spritesheet={`url(${base}/assets/${pantsSheet})`} style:--x={`${pantsPosition.x}px`} style:--y={`${pantsPosition.y}px`} style:--tint={`rgba(${pantsTint.R},${pantsTint.G},${pantsTint.B},${pantsTint.A})`} />
+        <div class="shirt" style:--spritesheet={`url(${base}/assets/${shirtSheet})`} style:--x={`${shirtPosition.x}px`} style:--y={`${shirtPosition.y}px`} style:--tint={`rgba(${shirtTint.R},${shirtTint.G},${shirtTint.B},${shirtTint.A})`} />
 
         {#if character?.accessory !== -1}
             <!-- START LAYERED TINT -->
             <div
                 class="accessory"
-                style:--spritesheet={`url(${accessoriesSheet})`}
+                style:--spritesheet={`url(${base}/assets/${accessoriesSheet})`}
                 style:--tint={character?.accessory !== undefined && AccessoryIsTinted(character?.accessory) ? `rgba(${hairTint.R},${hairTint.G},${hairTint.B},${hairTint.A})` : ''}
                 style:--x={`${accessoryPosition.x}px`}
                 style:--y={`${accessoryPosition.y}px`} />
@@ -194,17 +195,17 @@
         {/if}
 
         {#if showHair}
-            <div class="hair" style:--spritesheet={`url(${hairSheet})`} style:--x={`${hairPosition.x}px`} style:--y={`${hairPosition.y}px`} style:--tint={`rgba(${hairTint.R},${hairTint.G},${hairTint.B},${hairTint.A})`} />
+            <div class="hair" style:--spritesheet={`url(${base}/assets/${hairSheet})`} style:--x={`${hairPosition.x}px`} style:--y={`${hairPosition.y}px`} style:--tint={`rgba(${hairTint.R},${hairTint.G},${hairTint.B},${hairTint.A})`} />
         {/if}
 
         {#if character?.hat}
-            <div class="hat" style:--spritesheet={`url(${hatSheet})`} style:--x={`${hatPosition.x}px`} style:--y={`${hatPosition.y}px`} />
+            <div class="hat" style:--spritesheet={`url(${base}/assets/${hatSheet})`} style:--x={`${hatPosition.x}px`} style:--y={`${hatPosition.y}px`} />
         {/if}
 
         <!-- START LAYERED TINT -->
-        <div class="arms" style:--spritesheet={`url(${armsSheet})`} style:--tint={`rgba(${baseTint[2].R},${baseTint[2].G},${baseTint[2].B},${baseTint[2].A})`} style:--x={'16px'} style:--y={'0'} />
-        <div class="arms" style:--spritesheet={`url(${armsSheet})`} style:--tint={`rgba(${baseTint[1].R},${baseTint[1].G},${baseTint[1].B},${baseTint[1].A})`} style:--x={'32px'} style:--y={'0'} />
-        <div class="arms" style:--spritesheet={`url(${armsSheet})`} style:--tint={`rgba(${baseTint[0].R},${baseTint[0].G},${baseTint[0].B},${baseTint[0].A})`} style:--x={'48px'} style:--y={'0'} />
+        <div class="arms" style:--spritesheet={`url(${base}/assets/${armsSheet})`} style:--tint={`rgba(${baseTint[2].R},${baseTint[2].G},${baseTint[2].B},${baseTint[2].A})`} style:--x={'16px'} style:--y={'0'} />
+        <div class="arms" style:--spritesheet={`url(${base}/assets/${armsSheet})`} style:--tint={`rgba(${baseTint[1].R},${baseTint[1].G},${baseTint[1].B},${baseTint[1].A})`} style:--x={'32px'} style:--y={'0'} />
+        <div class="arms" style:--spritesheet={`url(${base}/assets/${armsSheet})`} style:--tint={`rgba(${baseTint[0].R},${baseTint[0].G},${baseTint[0].B},${baseTint[0].A})`} style:--x={'48px'} style:--y={'0'} />
         <!-- END LAYERED TINT -->
     {/await}
 </div>
diff --git a/src/routes/(edit)/inventory/BigItem.svelte b/src/routes/(edit)/inventory/BigItem.svelte
index 04d0d0f..88fdfdf 100644
--- a/src/routes/(edit)/inventory/BigItem.svelte
+++ b/src/routes/(edit)/inventory/BigItem.svelte
@@ -5,6 +5,7 @@
     import type { Item } from '$types/save/1.5';
     import { getContext } from 'svelte';
     import './Item.css';
+    import { base } from '$app/paths';
 
     let spritesheet: string | undefined;
     let lookupItem: ObjectInformation | BigCraftable | Boots | Clothing | Furniture | Hat | Weapon | Tool | undefined;
@@ -103,7 +104,7 @@
         style:--z={`${32 / Math.max(w, h, 16)}`}
         style:--x={spritesheet && lookupItem && `${lookupItem?.sprite.x}px`}
         style:--y={spritesheet && lookupItem && `${lookupItem?.sprite.y}px`}
-        style:--sprite={spritesheet && lookupItem && `url(/assets/${spritesheet})`}
+        style:--sprite={spritesheet && lookupItem && `url(${base}/assets/${spritesheet})`}
         style:--tint={`rgb(${item?.clothesColor?.R ?? 0},${item?.clothesColor?.G ?? 0},${item?.clothesColor?.B ?? 0})`}
         class:dyeable={lookupItem?._type === 'Clothing' && lookupItem.dyeable}
         class:shirt={lookupItem?._type === 'Clothing' && lookupItem.type === 'Shirt'}
diff --git a/src/routes/(edit)/inventory/SmallItem.svelte b/src/routes/(edit)/inventory/SmallItem.svelte
index f5aa2b7..734fdd7 100644
--- a/src/routes/(edit)/inventory/SmallItem.svelte
+++ b/src/routes/(edit)/inventory/SmallItem.svelte
@@ -6,6 +6,7 @@
     import type { Item } from '$types/save/1.5';
     import { getContext } from 'svelte';
     import './Item.css';
+    import { base } from '$app/paths';
 
     let spritesheet: string | undefined;
     let lookupItem: ItemInformation | undefined;
@@ -110,7 +111,7 @@
         style:--z={`${32 / Math.max(w, h, 16)}`}
         style:--x={spritesheet && lookupItem && `${lookupItem?.sprite.x}px`}
         style:--y={spritesheet && lookupItem && `${lookupItem?.sprite.y}px`}
-        style:--sprite={spritesheet && lookupItem && `url(/assets/${spritesheet})`}
+        style:--sprite={spritesheet && lookupItem && `url(${base}/assets/${spritesheet})`}
         style:--tint={`rgb(${item?.clothesColor?.R ?? 0},${item?.clothesColor?.G ?? 0},${item?.clothesColor?.B ?? 0})`}
         class:dyeable={lookupItem?._type === 'Clothing' && lookupItem.dyeable} />
 </div>
diff --git a/src/routes/(edit)/relationships/HeartBar.svelte b/src/routes/(edit)/relationships/HeartBar.svelte
index fb0b91d..3560e92 100644
--- a/src/routes/(edit)/relationships/HeartBar.svelte
+++ b/src/routes/(edit)/relationships/HeartBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { DateableCharacters } from '$lib/NPCs';
     import type { FriendshipDataItem } from '$types/save/1.5';
 
@@ -19,7 +20,7 @@
 
 <div class="row">
     <div class="portrait-wrapper">
-        <div class="portrait" style:background-image={`url('/assets/portraits/${name}.png')`} />
+        <div class="portrait" style:background-image={`url('${base}/assets/portraits/${name}.png')`} />
     </div>
     <div class="right">
         <div class="hearts">
diff --git a/src/routes/(upload)/+layout.svelte b/src/routes/(upload)/+layout.svelte
index 5e57bde..47fbc4d 100644
--- a/src/routes/(upload)/+layout.svelte
+++ b/src/routes/(upload)/+layout.svelte
@@ -6,16 +6,17 @@
     import SidebarButton from '../SidebarButton.svelte';
     import { tooltip } from '$lib/Tooltip';
     import { browser } from '$app/environment';
+    import { base } from '$app/paths';
 
     // https://github.com/sveltejs/kit/issues/5434
-    page.subscribe((p) => browser && p.url.pathname === '/' && get(SaveGame) && goto('/inventory'));
+    page.subscribe((p) => browser && p.url.pathname === '/' && get(SaveGame) && goto(base + '/inventory'));
 </script>
 
 <div class="wrapper">
     <slot />
 
     <nav>
-        <a href="/backups" aria-label="Backups" use:tooltip>
+        <a href={`${base}/backups`} aria-label="Backups" use:tooltip>
             <SidebarButton>💿</SidebarButton>
         </a>
     </nav>
diff --git a/src/routes/(upload)/+page.svelte b/src/routes/(upload)/+page.svelte
index fcd3c8d..d7da890 100644
--- a/src/routes/(upload)/+page.svelte
+++ b/src/routes/(upload)/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     import { FileName, SaveConverter, SaveGame } from '$lib/SaveFile';
     import Container from '../Container.svelte';
 
@@ -25,7 +26,7 @@
 
         SaveGame.set(json);
         FileName.set(file.name);
-        goto('/inventory');
+        goto(base + '/inventory');
     };
 </script>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 28da089..8bd03b5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+</script>
+
 <svelte:head>
     <link rel="icon" type="image/png" href="https://stardewcommunitywiki.com/mediawiki/images/3/33/Stardew_Checkup_Icon.png" />
     <title>Stardew Valley Save Editor</title>
@@ -5,7 +9,7 @@
 
     <meta property="og:title" content="Stardew Valley Save Editor" />
     <meta property="og:description" content="A save editor for Stardew Valley" />
-    <meta property="og:image" content="/wallpaper.jpg" />
+    <meta property="og:image" content={`${base}/wallpaper.jpg`} />
 </svelte:head>
 
 <!-- GITHUB LOGO -->
diff --git a/svelte.config.js b/svelte.config.js
index ee0511c..758d4a3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -14,7 +14,11 @@ const config = {
 		adapter: adapter(),
 		alias: {
 			$types: './src/types',
-		}
+		},
+		paths: {
+			base: process.env.NODE_ENV === "production" ? "/stardew-save-editor" : "",
+		},
+
 	},
 	vitePlugin: { inspector: true },
 };