diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 58b8c43..2e36e48 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -9,53 +9,55 @@
 		Settings,
 		TvIcon
 	} from 'lucide-svelte';
+	import { base } from '$app/paths';
+
 	import { PUBLIC_VERSION } from '$env/static/public';
 
 	const data = {
 		navMain: [
 			{
 				title: 'Dashboard',
-				url: '/dashboard',
+				url: base+'/dashboard',
 				icon: Home,
 				isActive: true
 			},
 			{
 				title: 'TV',
-				url: '/dashboard/tv',
+				url: base+'/dashboard/tv',
 				icon: TvIcon,
 				isActive: true,
 				items: [
 					{
 						title: 'Add a show',
-						url: '/dashboard/tv/add-show'
+						url: base+'/dashboard/tv/add-show'
 					},
 					{
 						title: 'Torrents',
-						url: '/dashboard/tv/torrents'
+						url: base+'/dashboard/tv/torrents'
 					},
 					{
 						title: 'Requests',
-						url: '/dashboard/tv/requests'
+						url: base+'/dashboard/tv/requests'
 					}
 				]
 			},
 			{
 				title: 'Movies',
-				url: '/dashboard/movies',
+				url: base+'/dashboard/movies',
 				icon: Clapperboard,
 				isActive: true,
 				items: [
 					{
 						title: 'Add a movie',
-						url: '/dashboard/movies/add-movie'
+						url: base+'/dashboard/movies/add-movie'
 					},
 					{
 						title: 'Torrents',
-						url: '/dashboard/movies/torrents'
+						url: base+'/dashboard/movies/torrents'
 					},
 					{
 						title: 'Requests',
-						url: '/dashboard/movies/requests'
+						url: base+'/dashboard/movies/requests'
 					}
 				]
 			}
@@ -63,12 +65,12 @@
 		navSecondary: [
 			{
 				title: 'Notifications',
-				url: '/dashboard/notifications',
+				url: base+'/dashboard/notifications',
 				icon: Bell
 			},
 			{
 				title: 'Settings',
-				url: '/dashboard/settings',
+				url: base+'/dashboard/settings',
 				icon: Settings
 			},
 			{
@@ -83,7 +85,7 @@
 			},
 			{
 				title: 'About',
-				url: '/dashboard/about',
+				url: base+'/dashboard/about',
 				icon: Info
 			}
 		]
@@ -97,7 +99,6 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import type { ComponentProps } from 'svelte';
 	import logo from '$lib/images/logo.svg';
-	import { base } from '$app/paths';
 
 	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 </script>
diff --git a/web/src/lib/components/login-form.svelte b/web/src/lib/components/login-form.svelte
index 194cb70..8e20576 100644
--- a/web/src/lib/components/login-form.svelte
+++ b/web/src/lib/components/login-form.svelte
@@ -8,6 +8,7 @@
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import { toast } from 'svelte-sonner';
 	import LoadingBar from '$lib/components/loading-bar.svelte';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 
@@ -44,7 +45,7 @@
 				console.log('Received User Data: ', response);
 				errorMessage = 'Login successful! Redirecting...';
 				toast.success(errorMessage);
-				goto('/dashboard');
+				goto(base + '/dashboard');
 			} else {
 				let errorText = await response.text();
 				try {
@@ -184,7 +185,7 @@
 					<div class="grid gap-2">
 						<div class="flex items-center">
 							<Label for="password">Password</Label>
-							<a class="ml-auto inline-block text-sm underline" href="/login/forgot-password">
+							<a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
 								Forgot your password?
 							</a>
 						</div>
diff --git a/web/src/lib/components/recommended-media-carousel.svelte b/web/src/lib/components/recommended-media-carousel.svelte
index abfb03e..304381b 100644
--- a/web/src/lib/components/recommended-media-carousel.svelte
+++ b/web/src/lib/components/recommended-media-carousel.svelte
@@ -4,6 +4,7 @@
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import { Button } from '$lib/components/ui/button';
 	import { ChevronRight } from 'lucide-svelte';
+	import { base } from '$app/paths';
 
 	let {
 		media,
@@ -30,12 +31,12 @@
 		{/each}
 	{/if}
 	{#if isShow}
-		<Button class="md:col-start-2" variant="secondary" href="/dashboard/tv/add-show">
+		<Button class="md:col-start-2" variant="secondary" href="{base}/dashboard/tv/add-show">
 			More recommendations
 			<ChevronRight />
 		</Button>
 	{:else}
-		<Button class="md:col-start-2" variant="secondary" href="/dashboard/movies/add-movie">
+		<Button class="md:col-start-2" variant="secondary" href="{base}/dashboard/movies/add-movie">
 			More recommendations
 			<ChevronRight />
 		</Button>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 322fa43..1bd4674 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
+	import { base } from '$app/paths';
 
 	let { children } = $props();
 </script>
@@ -9,7 +10,7 @@
 <svelte:head>
 	<title>MediaManager</title>
 	<meta content="Smart PVR for movies and TV shows" name="description" />
-	<link href="/logo.svg" rel="icon" type="image/svg" />
+	<link href="{base}/logo.svg" rel="icon" type="image/svg" />
 </svelte:head>
 
 <ModeWatcher />
diff --git a/web/src/routes/dashboard/about/+page.svelte b/web/src/routes/dashboard/about/+page.svelte
index 1520452..39ffaaa 100644
--- a/web/src/routes/dashboard/about/+page.svelte
+++ b/web/src/routes/dashboard/about/+page.svelte
@@ -5,6 +5,7 @@
 	import { base } from '$app/paths';
 	import logo from '$lib/images/logo.svg';
 	import { PUBLIC_VERSION } from '$env/static/public';
+
 </script>
 
 <svelte:head>
diff --git a/web/src/routes/dashboard/movies/+page.svelte b/web/src/routes/dashboard/movies/+page.svelte
index fbf2216..90eaf20 100644
--- a/web/src/routes/dashboard/movies/+page.svelte
+++ b/web/src/routes/dashboard/movies/+page.svelte
@@ -10,6 +10,7 @@
 	import { env } from '$env/dynamic/public';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { PublicMovie } from '$lib/types';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let movies: PublicMovie[] = [];
@@ -45,11 +46,11 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -81,7 +82,7 @@
 			{@render loadingbar()}
 		{:else}
 			{#each movies as movie}
-				<a href={'/dashboard/movies/' + movie.id}>
+				<a href={base+'/dashboard/movies/' + movie.id}>
 					<Card.Root class="col-span-full max-w-[90vw] ">
 						<Card.Header>
 							<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>
diff --git a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
index 5d4c05b..e811ac2 100644
--- a/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/movies/[movieId=uuid]/+page.svelte
@@ -13,6 +13,7 @@
 	import RequestMovieDialog from '$lib/components/request-movie-dialog.svelte';
 	import LibraryCombobox from '$lib/components/library-combobox.svelte';
 	import { Label } from '$lib/components/ui/label';
+	import { base } from '$app/paths';
 
 	let movie: PublicMovie = page.data.movie;
 	let user: () => User = getContext('user');
@@ -36,15 +37,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/movies">Movies</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/movies/add-movie/+page.svelte b/web/src/routes/dashboard/movies/add-movie/+page.svelte
index a1ca223..a9afe58 100644
--- a/web/src/routes/dashboard/movies/add-movie/+page.svelte
+++ b/web/src/routes/dashboard/movies/add-movie/+page.svelte
@@ -13,6 +13,7 @@
 	import AddMediaCard from '$lib/components/add-media-card.svelte';
 	import { toast } from 'svelte-sonner';
 	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let searchTerm: string = $state('');
@@ -73,15 +74,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/movies">Movies</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/movies/requests/+page.svelte b/web/src/routes/dashboard/movies/requests/+page.svelte
index 0972fba..5cda119 100644
--- a/web/src/routes/dashboard/movies/requests/+page.svelte
+++ b/web/src/routes/dashboard/movies/requests/+page.svelte
@@ -4,6 +4,7 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import RequestsTable from '$lib/components/season-requests-table.svelte';
+	import { base } from '$app/paths';
 
 	let requests = $state(page.data.requestsData);
 </script>
@@ -20,15 +21,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/movies">Movies</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/movies">Movies</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/movies/torrents/+page.svelte b/web/src/routes/dashboard/movies/torrents/+page.svelte
index 239f7a3..d806ea9 100644
--- a/web/src/routes/dashboard/movies/torrents/+page.svelte
+++ b/web/src/routes/dashboard/movies/torrents/+page.svelte
@@ -10,6 +10,7 @@
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import { toast } from 'svelte-sonner';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let torrents: RichMovieTorrent[] = [];
@@ -39,15 +40,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/notifications/+page.svelte b/web/src/routes/dashboard/notifications/+page.svelte
index c9574a7..ac9570d 100644
--- a/web/src/routes/dashboard/notifications/+page.svelte
+++ b/web/src/routes/dashboard/notifications/+page.svelte
@@ -7,6 +7,7 @@
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 
 	const apiUrl = env.PUBLIC_API_URL;
+	import { base } from '$app/paths';
 
 	interface NotificationResponse {
 		id: string;
@@ -167,11 +168,11 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index f188ebb..42ec0c3 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -7,6 +7,7 @@
 	import { getFullyQualifiedMediaName } from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton';
+	import { base } from '$app/paths';
 
 	let tvShowsPromise = page.data.tvShows;
 </script>
@@ -23,11 +24,11 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -64,7 +65,7 @@
 				{@render loadingbar()}
 			{:then tvShows}
 				{#each tvShows as show}
-					<a href={'/dashboard/tv/' + show.id}>
+					<a href={base+'/dashboard/tv/' + show.id}>
 						<Card.Root class="col-span-full max-w-[90vw] ">
 							<Card.Header>
 								<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
index a3b58f6..28e7f9a 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte
@@ -23,6 +23,7 @@
 	let show: () => PublicShow = getContext('show');
 	let user: () => User = getContext('user');
 	let torrents: RichShowTorrent = page.data.torrentsData;
+	import { base } from '$app/paths';
 
 	async function toggle_continuous_download() {
 		let url = new URL(apiUrl + '/tv/shows/' + show().id + '/continuousDownload');
@@ -64,15 +65,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -148,7 +149,7 @@
 						{#each show().seasons as season (season.id)}
 							<Table.Row
 								link={true}
-								onclick={() => goto('/dashboard/tv/' + show().id + '/' + season.id)}
+								onclick={() => goto(base+'/dashboard/tv/' + show().id + '/' + season.id)}
 							>
 								<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
 								<Table.Cell class="min-w-[10px] font-medium">
diff --git a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
index c1bf7b3..78282af 100644
--- a/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
+++ b/web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte
@@ -9,6 +9,7 @@
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
 	import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
+	import { base } from '$app/paths';
 
 	let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
 	let season: Season = $state(page.data.season);
@@ -34,19 +35,19 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv/{show().id}">
+					<Breadcrumb.Link href="{base}/dashboard/tv/{show().id}">
 						{show().name}
 						{show().year == null ? '' : '(' + show().year + ')'}
 					</Breadcrumb.Link>
diff --git a/web/src/routes/dashboard/tv/add-show/+page.svelte b/web/src/routes/dashboard/tv/add-show/+page.svelte
index 2772386..de3ed6b 100644
--- a/web/src/routes/dashboard/tv/add-show/+page.svelte
+++ b/web/src/routes/dashboard/tv/add-show/+page.svelte
@@ -18,6 +18,7 @@
 	let searchTerm: string = $state('');
 	let metadataProvider: string = $state('tmdb');
 	let results: MetaDataProviderSearchResult[] | null = $state(null);
+	import { base } from '$app/paths';
 
 	onMount(() => {
 		search('');
@@ -73,15 +74,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/tv/requests/+page.svelte b/web/src/routes/dashboard/tv/requests/+page.svelte
index c459161..801a067 100644
--- a/web/src/routes/dashboard/tv/requests/+page.svelte
+++ b/web/src/routes/dashboard/tv/requests/+page.svelte
@@ -5,6 +5,7 @@
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import type { SeasonRequest } from '$lib/types';
 	import RequestsTable from '$lib/components/season-requests-table.svelte';
+	import { base } from '$app/paths';
 
 	let requests: SeasonRequest[] = $state(page.data.requestsData);
 </script>
@@ -21,15 +22,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/dashboard/tv/torrents/+page.svelte b/web/src/routes/dashboard/tv/torrents/+page.svelte
index 3278f6c..8bd8c86 100644
--- a/web/src/routes/dashboard/tv/torrents/+page.svelte
+++ b/web/src/routes/dashboard/tv/torrents/+page.svelte
@@ -8,6 +8,7 @@
 	import * as Accordion from '$lib/components/ui/accordion/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import TorrentTable from '$lib/components/torrent-table.svelte';
+	import { base } from '$app/paths';
 
 	let showsPromise: Promise<RichShowTorrent[]> = $state(page.data.shows);
 </script>
@@ -24,15 +25,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
diff --git a/web/src/routes/login/forgot-password/+page.svelte b/web/src/routes/login/forgot-password/+page.svelte
index 32f8f7f..0720992 100644
--- a/web/src/routes/login/forgot-password/+page.svelte
+++ b/web/src/routes/login/forgot-password/+page.svelte
@@ -13,6 +13,7 @@
 	} from '$lib/components/ui/card';
 	import { toast } from 'svelte-sonner';
 	import { env } from '$env/dynamic/public';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let email = $state('');
@@ -69,7 +70,7 @@
 <div class="grid min-h-svh lg:grid-cols-2">
 	<div class="flex flex-col gap-4 p-6 md:p-10">
 		<div class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2 font-medium" href="/login">
+			<a class="flex items-center gap-2 font-medium" href="{base}/login">
 				<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
 					<img alt="MediaManager Logo" class="size-12" src={logo} />
 				</div>
@@ -136,7 +137,7 @@
 							</form>
 						{/if}
 						<div class="mt-4 text-center text-sm">
-							<a href="/login" class="font-semibold text-primary hover:underline">
+							<a href="{base}/login" class="font-semibold text-primary hover:underline">
 								Back to Login
 							</a>
 						</div>
diff --git a/web/src/routes/login/reset-password/+page.svelte b/web/src/routes/login/reset-password/+page.svelte
index 58e9fd7..12e51a7 100644
--- a/web/src/routes/login/reset-password/+page.svelte
+++ b/web/src/routes/login/reset-password/+page.svelte
@@ -16,6 +16,7 @@
 	import { goto } from '$app/navigation';
 	import { env } from '$env/dynamic/public';
 	import { onMount } from 'svelte';
+	import { base } from '$app/paths';
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let newPassword = $state('');
@@ -26,7 +27,7 @@
 	onMount(() => {
 		if (!resetToken) {
 			toast.error('Invalid or missing reset token.');
-			goto('/login');
+			goto(base+'/login');
 		}
 	});
 
@@ -55,7 +56,7 @@
 
 			if (response.ok) {
 				toast.success('Password reset successfully! You can now log in with your new password.');
-				goto('/login');
+				goto(base+'/login');
 			} else {
 				const errorText = await response.text();
 				toast.error(`Failed to reset password: ${errorText}`);
@@ -83,7 +84,7 @@
 <div class="grid min-h-svh lg:grid-cols-2">
 	<div class="flex flex-col gap-4 p-6 md:p-10">
 		<div class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2 font-medium" href="/login">
+			<a class="flex items-center gap-2 font-medium" href="{base}/login">
 				<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
 					<img alt="MediaManager Logo" class="size-12" src={logo} />
 				</div>
@@ -136,11 +137,11 @@
 							</Button>
 						</form>
 						<div class="mt-4 text-center text-sm">
-							<a href="/login" class="font-semibold text-primary hover:underline">
+							<a href="{base}/login" class="font-semibold text-primary hover:underline">
 								Back to Login
 							</a>
 							<span class="mx-2 text-muted-foreground">•</span>
-							<a href="/login/forgot-password" class="text-primary hover:underline">
+							<a href="{base}/login/forgot-password" class="text-primary hover:underline">
 								Request New Reset Link
 							</a>
 						</div>
diff --git a/web/src/routes/login/verify/+page.svelte b/web/src/routes/login/verify/+page.svelte
index 7f0328c..760dc1f 100644
--- a/web/src/routes/login/verify/+page.svelte
+++ b/web/src/routes/login/verify/+page.svelte
@@ -3,6 +3,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import Logo from '$lib/components/logo-side-by-side.svelte';
 	import { handleLogout } from '$lib/utils.ts';
+	import { base } from '$app/paths';
 </script>
 
 <svelte:head>
@@ -30,7 +31,7 @@
 			Your account has been successfully created, but activation by an administrator is required.
 		</p>
 		<div class="mt-8">
-			<Button href="/dashboard">Go to Dashboard</Button>
+			<Button href="{base}/dashboard">Go to Dashboard</Button>
 		</div>
 		<p class="mt-10 text-sm text-muted-foreground">
 			The above button will only work once your account is verified.