diff --git a/src/app.html b/src/app.html
index 568fab0..080e671 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="/svelte-calendar/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="https://fonts.googleapis.com/css?family=Rajdhani:400,700" rel="stylesheet">
 		%svelte.head%
diff --git a/src/lib/docs/examples/CustomTheme.svelte b/src/lib/docs/examples/CustomTheme.svelte
index 77eef66..60243ad 100644
--- a/src/lib/docs/examples/CustomTheme.svelte
+++ b/src/lib/docs/examples/CustomTheme.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { InlineCalendar } from '../../../../index';
+	import { base } from '$app/paths';
 
 	const theme = {
 		calendar: {
@@ -16,5 +17,5 @@
 
 <!-- Example Notes -->
 <p>
-	See <a href="/docs/theme-editor/light">theme-editor page</a> to design your own theme.
+	See <a href="{base}/docs/theme-editor/light">theme-editor page</a> to design your own theme.
 </p>
diff --git a/src/lib/docs/examples/DarkTheme.svelte b/src/lib/docs/examples/DarkTheme.svelte
index dc39ec5..4166519 100644
--- a/src/lib/docs/examples/DarkTheme.svelte
+++ b/src/lib/docs/examples/DarkTheme.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { base } from '$app/paths';
 	import { InlineCalendar, themes } from '../../../../index';
 	const { dark: theme } = themes;
 </script>
@@ -6,4 +7,4 @@
 <InlineCalendar {theme} />
 
 <!-- Example Notes -->
-<p>Not your cup of tea? <a href="/docs/theme-editor/light">Design your own theme.</a></p>
+<p>Not your cup of tea? <a href="{base}/docs/theme-editor/light">Design your own theme.</a></p>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index efaf0e1..d864eee 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,7 +1,6 @@
 <script>
-	import { page, navigating } from '$app/stores';
-
-	import Swappable from '$lib/components/generic/Swappable.svelte';
+	import { navigating } from '$app/stores';
+	import { base } from '$app/paths';
 
 	import Theme from '$lib/components/generic/Theme.svelte';
 	import ToggleSwitch from '$lib/components/generic/ToggleSwitch.svelte';
@@ -11,13 +10,13 @@
 	import { spring } from 'svelte/motion';
 
 	const links = [
-		{ href: '/', text: 'Home' },
-		{ href: '/docs/quick-start', text: 'Quick-Start' },
-		{ href: '/docs/props', text: 'Props' },
-		{ href: '/docs/examples', text: 'Examples' },
+		{ href: `${base}/`, text: 'Home' },
+		{ href: `${base}/docs/quick-start`, text: 'Quick-Start' },
+		{ href: `${base}/docs/props`, text: 'Props' },
+		{ href: `${base}/docs/examples`, text: 'Examples' },
 		{
-			href: '/docs/theme-editor/light',
-			isActive: (p) => p.startsWith('/docs/theme-editor'),
+			href: `${base}/docs/theme-editor/light`,
+			isActive: (p) => p.startsWith(`${base}/docs/theme-editor`),
 			text: 'Theme Editor'
 		}
 	];
@@ -39,7 +38,7 @@
 	<div {style} class="container">
 		<div class="header">
 			<div class="stage">
-				<img src="/logo.png" alt="6eDesign" style="transform: rotate({$rotation}deg);" />
+				<img src="{base}/logo.png" alt="6eDesign" style="transform: rotate({$rotation}deg);" />
 			</div>
 			<h1>svelte-calendar</h1>
 			<div class="header-right">
diff --git a/src/routes/docs/props.svelte b/src/routes/docs/props.svelte
index 8625fe2..a43cffc 100644
--- a/src/routes/docs/props.svelte
+++ b/src/routes/docs/props.svelte
@@ -5,6 +5,7 @@
 <script>
 	import Code from '$lib/docs/Code.svelte';
 	import DocPage from '$lib/docs/DocPage.svelte';
+	import { base } from '$app/paths';
 
 	const props = [
 		{
@@ -42,8 +43,7 @@
 		{
 			name: 'theme',
 			defaultVal: '{}',
-			description:
-				'An object containing theme/style overrides for the component.  See <a href="/docs/theme-editor/light">theme-editor documentation</a>'
+			description: `An object containing theme/style overrides for the component.  See <a href="${base}/docs/theme-editor/light">theme-editor documentation</a>`
 		}
 	];
 </script>
diff --git a/src/routes/docs/quick-start.svelte b/src/routes/docs/quick-start.svelte
index aa8c0a3..bd72d7d 100644
--- a/src/routes/docs/quick-start.svelte
+++ b/src/routes/docs/quick-start.svelte
@@ -5,6 +5,7 @@
 <script>
 	import Code from '$lib/docs/Code.svelte';
 	import DocPage from '$lib/docs/DocPage.svelte';
+	import { base } from '$app/paths';
 
 	// @example(quickStart, QuickStart.svelte)
 
@@ -24,7 +25,8 @@
 		</li>
 		<li>
 			<h3>
-				See <a href="/docs/props">props</a> &amp; <a href="/docs/examples">examples</a> for more information
+				See <a href="{base}/docs/props">props</a> &amp; <a href="{base}/docs/examples">examples</a> for
+				more information
 			</h3>
 		</li>
 	</ol>
diff --git a/src/routes/docs/theme-editor/[slug].svelte b/src/routes/docs/theme-editor/[slug].svelte
index 8c7cd3d..9ab6933 100644
--- a/src/routes/docs/theme-editor/[slug].svelte
+++ b/src/routes/docs/theme-editor/[slug].svelte
@@ -10,6 +10,7 @@
 	import NavBarItem from '$lib/docs/NavBarItem.svelte';
 	import { setContext } from 'svelte';
 	import { writable } from 'svelte/store';
+	import { base } from '$app/paths';
 
 	const focused = writable(false);
 
@@ -50,8 +51,8 @@
 		>
 			<JsonEditor bind:json={theme} bind:this={jsonEditor} />
 			<NavBar>
-				<NavBarItem href="/docs/theme-editor/light">Light</NavBarItem>
-				<NavBarItem href="/docs/theme-editor/dark">Dark</NavBarItem>
+				<NavBarItem href="{base}/docs/theme-editor/light">Light</NavBarItem>
+				<NavBarItem href="{base}/docs/theme-editor/dark">Dark</NavBarItem>
 			</NavBar>
 		</div>
 		<div class="results-panel">
diff --git a/svelte.config.js b/svelte.config.js
index 8831aeb..d5239e5 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -13,7 +13,8 @@ const config = {
 		paths: !process.env.DEPLOY
 			? {}
 			: {
-					base: '/svelte-calendar'
+					base: '/svelte-calendar',
+					assets: '/svelte-calendar'
 			  },
 		appDir: 'internal',
 		adapter: static_adapter({
