diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index a4f7cc177..6d45b72e6 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { DropList, DropListItem, DropListLink } from '$lib/components';
 	import { app } from '$lib/stores/app';
@@ -10,7 +11,7 @@
 
 	const onChange = async (event: Event) => {
 		const target = event.target as HTMLSelectElement;
-		await goto(`/console/${target.value}`);
+		await goto(`${base}/console/${target.value}`);
 	};
 	const toggleTheme = () => {
 		$app.theme = $app.theme === 'light' ? 'dark' : 'light';
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 1d9071d82..d5dad22fa 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
-	$: path = `/console/${project}`;
+	$: path = `${base}/console/${project}`;
 </script>
 
 <div class="side-nav">
 	<div class="side-nav-top">
-		<a class="side-nav-logo" href="/console">
+		<a class="side-nav-logo" href={`${base}/console`}>
 			<img
-				src="/appwrite-nav.svg"
+				src={`${base}/appwrite-nav.svg`}
 				loading="lazy"
 				alt="Appwrite Logo"
 				class="side-nav-logo-image"
@@ -19,11 +21,7 @@
 	</div>
 	{#if project}
 		<div class="side-nav-main">
-			<a
-				class="side-nav-link"
-				class:is-selected={$page.url.pathname === path}
-				href={`/console/${project}`}
-			>
+			<a class="side-nav-link" class:is-selected={$page.url.pathname === path} href={path}>
 				<span class="icon-home" aria-hidden="true" />
 				<span class="text">Home</span>
 			</a>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 640b20d54..f43a6ce67 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -9,6 +9,7 @@
 	import { user } from '$lib/stores/user';
 	import { onMount } from 'svelte';
 	import Notifications from '$lib/layout/notifications.svelte';
+	import { base } from '$app/paths';
 
 	onMount(async () => {
 		try {
@@ -17,7 +18,7 @@
 			}
 
 			if (!$page.url.pathname.startsWith('/console')) {
-				await goto('/console');
+				await goto(`${base}/console`);
 			}
 		} catch (error) {
 			console.error(error);
diff --git a/src/routes/console/@me.svelte b/src/routes/console/@me.svelte
index e81a25fc5..bd5c57146 100644
--- a/src/routes/console/@me.svelte
+++ b/src/routes/console/@me.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 
 	import { Button } from '$lib/elements/forms';
 	import { app } from '$lib/stores/app';
@@ -7,7 +8,7 @@
 
 	const logout = async () => {
 		await sdkForConsole.account.deleteSession('current');
-		await goto('/login');
+		await goto(`${base}/login`);
 	};
 	const toggleTheme = () => {
 		$app.theme = $app.theme === 'light' ? 'dark' : 'light';
diff --git a/src/routes/console/[project]/database/__layout.svelte b/src/routes/console/[project]/database/__layout.svelte
index b237fe53b..0cf096d7f 100644
--- a/src/routes/console/[project]/database/__layout.svelte
+++ b/src/routes/console/[project]/database/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -11,10 +13,10 @@
 	<title>Appwrite - Database</title>
 </svelte:head>
 
-{#if !$page.url.pathname.startsWith(`/console/${project}/database/collection`)}
+{#if !$page.url.pathname.startsWith(`${base}/console/${project}/database/collection`)}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}`}>Home</Back>
+			<Back href={`${base}/console/${project}`}>Home</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">Database</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/database/_tabs.svelte b/src/routes/console/[project]/database/_tabs.svelte
index 1ac7a44a1..b701661f4 100644
--- a/src/routes/console/[project]/database/_tabs.svelte
+++ b/src/routes/console/[project]/database/_tabs.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
@@ -8,7 +10,7 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button is-selected"
-			href={`/console/${project}/database`}
+			href={`${base}/console/${project}/database`}
 			class:is-selected={$page.url.pathname === `/console/${project}/database`}
 		>
 			<span class="text">Collections</span>
@@ -17,7 +19,7 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button is-selected"
-			href={`/console/${project}/database/usage`}
+			href={`${base}/console/${project}/database/usage`}
 			class:is-selected={$page.url.pathname === `/console/${project}/database/usage`}
 		>
 			<span class="text">Usage</span>
diff --git a/src/routes/console/[project]/database/collection/[collection]/__layout.svelte b/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
index 0e131b135..52a652ad2 100644
--- a/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -24,7 +25,7 @@
 	{#if !$page.url.pathname.startsWith(`/console/${project}/database/collection/${collectionId}/document`)}
 		<Cover>
 			<svelte:fragment slot="breadcrumbs">
-				<Back href={`/console/${project}/database`}>Database</Back>
+				<Back href={`${base}/console/${project}/database`}>Database</Back>
 			</svelte:fragment>
 			<svelte:fragment slot="title">{$collection.name}</svelte:fragment>
 			<Tabs />
diff --git a/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte b/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte
index 7a7ab53c3..fd130781e 100644
--- a/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte
@@ -1,9 +1,11 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
 	$: collectionId = $page.params.collection;
-	$: path = `/console/${project}/database/collection/${collectionId}`;
+	$: path = `${base}/console/${project}/database/collection/${collectionId}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/@create.svelte b/src/routes/console/[project]/database/collection/[collection]/document/@create.svelte
index ae780592e..40764c754 100644
--- a/src/routes/console/[project]/database/collection/[collection]/document/@create.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/document/@create.svelte
@@ -11,6 +11,7 @@
 	import { goto } from '$app/navigation';
 	import InputCustomId from '$lib/elements/forms/inputCustomId.svelte';
 	import { Container, Cover } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	$: projectId = $page.params.project;
 
@@ -40,7 +41,7 @@
 				type: 'success'
 			});
 			await goto(
-				`/console/${projectId}/database/collection/${created.$collection}/document/${created.$id}`
+				`${base}/console/${projectId}/database/collection/${created.$collection}/document/${created.$id}`
 			);
 		} catch (error) {
 			addNotification({
@@ -56,7 +57,7 @@
 </svelte:head>
 {#if $doc && $collection}
 	<Cover>
-		<Back href={`/console/${projectId}/database/collection/${$collection.$id}`}>
+		<Back href={`${base}/console/${projectId}/database/collection/${$collection.$id}`}>
 			Collection - {$collection.name}
 		</Back>
 		<h1>Create Document</h1>
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
index 3e014bdbb..593c6e9fa 100644
--- a/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Container, Cover } from '$lib/layout';
@@ -24,7 +25,7 @@
 
 {#if $doc && $collection}
 	<Cover>
-		<Back href={`/console/${project}/database/collection/${collectionId}`}>
+		<Back href={`${base}/console/${project}/database/collection/${collectionId}`}>
 			Collection - {$collection.name}
 		</Back>
 		<h1>{$doc.$id}</h1>
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte b/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte
index b7d86564d..903a26020 100644
--- a/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte
@@ -1,10 +1,12 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
 	$: collectionId = $page.params.collection;
 	$: documentId = $page.params.document;
-	$: path = `/console/${project}/database/collection/${collectionId}/document/${documentId}`;
+	$: path = `${base}/console/${project}/database/collection/${collectionId}/document/${documentId}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/database/collection/[collection]/index.svelte b/src/routes/console/[project]/database/collection/[collection]/index.svelte
index c6c9fafbf..da84f1887 100644
--- a/src/routes/console/[project]/database/collection/[collection]/index.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/index.svelte
@@ -13,6 +13,7 @@
 	import { collection } from './store';
 	import { Container } from '$lib/layout';
 	import { Button } from '$lib/elements/forms';
+	import { base } from '$app/paths';
 
 	let offset = 0;
 
@@ -46,7 +47,7 @@
 						<TableRow>
 							{#each columns as column}
 								<TableCellLink
-									href={`/console/${project}/database/collection/${$collection.$id}/document/${document.$id}`}
+									href={`${base}/console/${project}/database/collection/${$collection.$id}/document/${document.$id}`}
 									title={column.title}
 								>
 									{document[column.key] ?? 'n/a'}
@@ -64,8 +65,10 @@
 				Add your first document to get started.
 			</Empty>
 		{/if}
-		<Button href={`/console/${project}/database/collection/${$collection.$id}/document/@create`}
-			>Create Document</Button
+		<Button
+			href={`${base}/console/${project}/database/collection/${$collection.$id}/document/@create`}
 		>
+			Create Document
+		</Button>
 	{/await}
 </Container>
diff --git a/src/routes/console/[project]/database/index.svelte b/src/routes/console/[project]/database/index.svelte
index 9e864eec5..2aff0e443 100644
--- a/src/routes/console/[project]/database/index.svelte
+++ b/src/routes/console/[project]/database/index.svelte
@@ -7,6 +7,7 @@
 	import { goto } from '$app/navigation';
 	import type { Models } from 'src/sdk';
 	import { Container } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -15,7 +16,7 @@
 	const limit = 25;
 	const project = $page.params.project;
 	const collectionCreated = async (event: CustomEvent<Models.Collection>) => {
-		await goto(`/console/${project}/database/collection/${event.detail.$id}`);
+		await goto(`${base}/console/${project}/database/collection/${event.detail.$id}`);
 	};
 
 	$: request = sdkForProject.database.listCollections(search, limit, offset);
@@ -35,7 +36,7 @@
 			<Tiles>
 				{#each response.collections as collection}
 					<Tile
-						href={`/console/${project}/database/collection/${collection.$id}`}
+						href={`${base}/console/${project}/database/collection/${collection.$id}`}
 						title={collection.name}
 					/>
 				{/each}
diff --git a/src/routes/console/[project]/functions/__layout.svelte b/src/routes/console/[project]/functions/__layout.svelte
index c88b9d7d4..e362515c3 100644
--- a/src/routes/console/[project]/functions/__layout.svelte
+++ b/src/routes/console/[project]/functions/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -13,7 +15,7 @@
 {#if !$page.url.pathname.startsWith(`/console/${project}/functions/function`)}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}`}>Home</Back>
+			<Back href={`${base}/console/${project}`}>Home</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">Functions</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/functions/_tabs.svelte b/src/routes/console/[project]/functions/_tabs.svelte
index 7c4a2fdd4..4f9c835b7 100644
--- a/src/routes/console/[project]/functions/_tabs.svelte
+++ b/src/routes/console/[project]/functions/_tabs.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
@@ -8,7 +10,7 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button"
-			href={`/console/${project}/functions`}
+			href={`${base}/console/${project}/functions`}
 			class:is-selected={$page.url.pathname === `/console/${project}/functions`}
 		>
 			<span class="text">Functions</span>
diff --git a/src/routes/console/[project]/functions/function/[function]/__layout.svelte b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
index d1cafb5a4..7f3518968 100644
--- a/src/routes/console/[project]/functions/function/[function]/__layout.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -19,7 +20,7 @@
 {#if $func}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}/functions`}>Functions</Back>
+			<Back href={`${base}/console/${project}/functions`}>Functions</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">{$func.name}</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/functions/function/[function]/_tabs.svelte b/src/routes/console/[project]/functions/function/[function]/_tabs.svelte
index 27c0c48b8..be31567e0 100644
--- a/src/routes/console/[project]/functions/function/[function]/_tabs.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/_tabs.svelte
@@ -1,9 +1,11 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
 	$: functionId = $page.params.function;
-	$: path = `/console/${project}/functions/function/${functionId}`;
+	$: path = `${base}/console/${project}/functions/function/${functionId}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/functions/function/[function]/index.svelte b/src/routes/console/[project]/functions/function/[function]/index.svelte
index be255b786..5190996e8 100644
--- a/src/routes/console/[project]/functions/function/[function]/index.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/index.svelte
@@ -15,6 +15,7 @@
 	import { func } from './store';
 	import { Container } from '$lib/layout';
 	import Create from './_create.svelte';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -57,7 +58,7 @@
 					<TableRow>
 						<TableCellLink
 							title="ID"
-							href={`/console/${project}/storage/bucket/${functionId}/${deployment.$id}`}
+							href={`${base}/console/${project}/storage/bucket/${functionId}/${deployment.$id}`}
 						>
 							{deployment.$id}
 						</TableCellLink>
diff --git a/src/routes/console/[project]/functions/index.svelte b/src/routes/console/[project]/functions/index.svelte
index 2d4253983..44e97c191 100644
--- a/src/routes/console/[project]/functions/index.svelte
+++ b/src/routes/console/[project]/functions/index.svelte
@@ -5,6 +5,7 @@
 	import { Card, Empty, Pagination, Tile, Tiles } from '$lib/components';
 	import Create from './_create.svelte';
 	import { Container } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -29,7 +30,10 @@
 		{#if response.total}
 			<Tiles>
 				{#each response.functions as func}
-					<Tile href={`/console/${project}/functions/function/${func.$id}`} title={func.name} />
+					<Tile
+						href={`${base}/console/${project}/functions/function/${func.$id}`}
+						title={func.name}
+					/>
 				{/each}
 			</Tiles>
 
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/[project]/index.svelte
index 1aabf3d68..cdb4a3b88 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/[project]/index.svelte
@@ -8,6 +8,7 @@
 	import { Line } from '$lib/charts';
 	import { page } from '$app/stores';
 	import { toLocaleDate } from '$lib/helpers/date';
+	import { base } from '$app/paths';
 
 	let addPlatform = false;
 	let range: '24h' | '30d' | '90d' = '30d';
@@ -24,19 +25,19 @@
 		<svelte:fragment slot="title">{$project.name}</svelte:fragment>
 		<ul class="links-nav">
 			<li class="links-nav-item">
-				<a class="link" href={`/console/${$project.$id}/settings`}>
+				<a class="link" href={`${base}/console/${$project.$id}/settings`}>
 					<span class="icon-search" aria-hidden="true" />
 					<span class="text">Settings</span>
 				</a>
 			</li>
 			<li class="links-nav-item">
-				<a class="link" href={`/console/${$project.$id}/keys`}>
+				<a class="link" href={`${base}/console/${$project.$id}/keys`}>
 					<span class="icon-search" aria-hidden="true" />
 					<span class="text">API Keys</span>
 				</a>
 			</li>
 			<li class="links-nav-item">
-				<a class="link" href={`/console/${$project.$id}/webhooks`}>
+				<a class="link" href={`${base}/console/${$project.$id}/webhooks`}>
 					<span class="icon-search" aria-hidden="true" />
 					<span class="text">Webhooks</span>
 				</a>
diff --git a/src/routes/console/[project]/keys/__layout.svelte b/src/routes/console/[project]/keys/__layout.svelte
index 1a6a90e9f..40f241b04 100644
--- a/src/routes/console/[project]/keys/__layout.svelte
+++ b/src/routes/console/[project]/keys/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	import { Back } from '$lib/components';
@@ -8,7 +10,7 @@
 
 <Cover>
 	<svelte:fragment slot="breadcrumbs">
-		<Back href={`/console/${projectId}`}>Home</Back>
+		<Back href={`${base}/console/${projectId}`}>Home</Back>
 	</svelte:fragment>
 	<svelte:fragment slot="title">API Keys</svelte:fragment>
 </Cover>
diff --git a/src/routes/console/[project]/keys/index.svelte b/src/routes/console/[project]/keys/index.svelte
index 0984e6c3c..25b2365b7 100644
--- a/src/routes/console/[project]/keys/index.svelte
+++ b/src/routes/console/[project]/keys/index.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Empty } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
@@ -34,7 +36,7 @@
 				<TableBody>
 					{#each $project.keys as key}
 						<TableRow>
-							<TableCellLink href={`/console/${projectId}/keys/key/${key.$id}`} title="Name">
+							<TableCellLink href={`${base}/console/${projectId}/keys/key/${key.$id}`} title="Name">
 								{key.name}
 							</TableCellLink>
 							<TableCellText title="Scopes">{key.scopes.length}</TableCellText>
diff --git a/src/routes/console/[project]/keys/key/[key]/index.svelte b/src/routes/console/[project]/keys/key/[key]/index.svelte
index 675f27eb0..853991d6a 100644
--- a/src/routes/console/[project]/keys/key/[key]/index.svelte
+++ b/src/routes/console/[project]/keys/key/[key]/index.svelte
@@ -7,6 +7,7 @@
 	import { Button } from '$lib/elements/forms';
 	import { addNotification } from '$lib/stores/notifications';
 	import { project } from '../../../store';
+	import { base } from '$app/paths';
 
 	const projectId = $page.params.project;
 	const keyId = $page.params.key;
@@ -18,7 +19,7 @@
 			type: 'success'
 		});
 		project.load(projectId);
-		await goto(`/console/${projectId}/keys`);
+		await goto(`${base}/console/${projectId}/keys`);
 	};
 </script>
 
diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/[project]/settings/__layout.svelte
index 2a1b81658..ea26026c8 100644
--- a/src/routes/console/[project]/settings/__layout.svelte
+++ b/src/routes/console/[project]/settings/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -13,7 +15,7 @@
 
 <Cover>
 	<svelte:fragment slot="breadcrumbs">
-		<Back href={`/console/${project}`}>Home</Back>
+		<Back href={`${base}/console/${project}`}>Home</Back>
 	</svelte:fragment>
 	<svelte:fragment slot="title">Settings</svelte:fragment>
 	<Tabs />
diff --git a/src/routes/console/[project]/settings/_tabs.svelte b/src/routes/console/[project]/settings/_tabs.svelte
index c25b9573f..9d4594ba1 100644
--- a/src/routes/console/[project]/settings/_tabs.svelte
+++ b/src/routes/console/[project]/settings/_tabs.svelte
@@ -1,7 +1,9 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
-	$: path = `/console/${$page.params.project}/settings`;
+	$: path = `${base}/console/${$page.params.project}/settings`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/storage/__layout.svelte b/src/routes/console/[project]/storage/__layout.svelte
index 7c4b8a9b0..6dc82d10b 100644
--- a/src/routes/console/[project]/storage/__layout.svelte
+++ b/src/routes/console/[project]/storage/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -10,10 +12,10 @@
 <svelte:head>
 	<title>Appwrite - Storage</title>
 </svelte:head>
-{#if !$page.url.pathname.startsWith(`/console/${project}/storage/bucket`)}
+{#if !$page.url.pathname.startsWith(`${base}/console/${project}/storage/bucket`)}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}`}>Home</Back>
+			<Back href={`${base}/console/${project}`}>Home</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">Storage</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/storage/_tabs.svelte b/src/routes/console/[project]/storage/_tabs.svelte
index 4e8c6f0c5..d3a944e89 100644
--- a/src/routes/console/[project]/storage/_tabs.svelte
+++ b/src/routes/console/[project]/storage/_tabs.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
@@ -8,8 +10,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button is-selected"
-			href={`/console/${project}/storage`}
-			class:is-selected={$page.url.pathname === `/console/${project}/storage`}
+			href={`${base}/console/${project}/storage`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/storage`}
 		>
 			<span class="text">Buckets</span>
 		</a>
@@ -17,8 +19,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button is-selected"
-			href={`/console/${project}/storage/usage`}
-			class:is-selected={$page.url.pathname === `/console/${project}/storage/usage`}
+			href={`${base}/console/${project}/storage/usage`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/storage/usage`}
 		>
 			<span class="text">Usage</span>
 		</a>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
index 0577710ff..0d7df23e6 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -22,7 +23,7 @@
 {#if $bucket}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}/storage`}>Storage</Back>
+			<Back href={`${base}/console/${project}/storage`}>Storage</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">{$bucket.name}</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte
index c94e76837..a82420de9 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte
@@ -1,9 +1,11 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
 	$: bucketId = $page.params.bucket;
-	$: path = `/console/${project}/storage/bucket/${bucketId}`;
+	$: path = `${base}/console/${project}/storage/bucket/${bucketId}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/storage/index.svelte b/src/routes/console/[project]/storage/index.svelte
index 0591680aa..82d1c4055 100644
--- a/src/routes/console/[project]/storage/index.svelte
+++ b/src/routes/console/[project]/storage/index.svelte
@@ -7,6 +7,7 @@
 	import type { Models } from 'src/sdk';
 	import Create from './_create.svelte';
 	import { Container } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -16,7 +17,7 @@
 	const project = $page.params.project;
 	const bucketCreated = async (event: CustomEvent<Models.Bucket>) => {
 		showCreate = false;
-		await goto(`/console/${project}/storage/bucket/${event.detail.$id}`);
+		await goto(`${base}/console/${project}/storage/bucket/${event.detail.$id}`);
 	};
 
 	$: request = sdkForProject.storage.listBuckets(search, limit, offset);
@@ -35,7 +36,10 @@
 		{#if response.total}
 			<Tiles>
 				{#each response.buckets as bucket}
-					<Tile href={`/console/${project}/storage/bucket/${bucket.$id}`} title={bucket.name} />
+					<Tile
+						href={`${base}/console/${project}/storage/bucket/${bucket.$id}`}
+						title={bucket.name}
+					/>
 				{/each}
 			</Tiles>
 
diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/users/__layout.svelte
index c9761af4a..85c4ae711 100644
--- a/src/routes/console/[project]/users/__layout.svelte
+++ b/src/routes/console/[project]/users/__layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -13,7 +15,7 @@
 {#if $page.url.pathname.endsWith(`/users`) || $page.url.pathname.endsWith(`/users/teams`) || $page.url.pathname.endsWith(`/users/usage`) || $page.url.pathname.endsWith(`/users/settings`)}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}`}>Home</Back>
+			<Back href={`${base}/console/${project}`}>Home</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">Users</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/users/_tabs.svelte b/src/routes/console/[project]/users/_tabs.svelte
index 2808c2235..d020b806c 100644
--- a/src/routes/console/[project]/users/_tabs.svelte
+++ b/src/routes/console/[project]/users/_tabs.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	$: project = $page.params.project;
@@ -8,8 +10,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button"
-			href={`/console/${project}/users`}
-			class:is-selected={$page.url.pathname === `/console/${project}/users`}
+			href={`${base}/console/${project}/users`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/users`}
 		>
 			<span class="text">Users</span>
 		</a>
@@ -17,8 +19,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button"
-			href={`/console/${project}/users/teams`}
-			class:is-selected={$page.url.pathname === `/console/${project}/users/teams`}
+			href={`${base}/console/${project}/users/teams`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/users/teams`}
 		>
 			<span class="text">Teams</span>
 		</a>
@@ -26,8 +28,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button"
-			href={`/console/${project}/users/usage`}
-			class:is-selected={$page.url.pathname === `/console/${project}/users/usage`}
+			href={`${base}/console/${project}/users/usage`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/users/usage`}
 		>
 			<span class="text">Usage</span>
 		</a>
@@ -35,8 +37,8 @@
 	<li class="tabs-item">
 		<a
 			class="tabs-button"
-			href={`/console/${project}/users/settings`}
-			class:is-selected={$page.url.pathname === `/console/${project}/users/settings`}
+			href={`${base}/console/${project}/users/settings`}
+			class:is-selected={$page.url.pathname === `${base}/console/${project}/users/settings`}
 		>
 			<span class="text">Settings</span>
 		</a>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index f8f2e7fc6..89cbdc2c7 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -19,6 +19,7 @@
 	import { Pill } from '$lib/elements';
 	import { toLocaleDate } from '$lib/helpers/date';
 	import { Container } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -28,7 +29,7 @@
 	const project = $page.params.project;
 	const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 30, 30).toString();
 	const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
-		await goto(`/console/${project}/users/user/${event.detail.$id}`);
+		await goto(`${base}/console/${project}/users/user/${event.detail.$id}`);
 	};
 	$: request = sdkForProject.users.list(search, limit, offset, undefined, undefined, 'DESC');
 	$: if (search) offset = 0;
@@ -65,7 +66,10 @@
 									/>
 								</div>
 							</TableCell>
-							<TableCellLink href={`/console/${project}/users/user/${user.$id}`} title="Name">
+							<TableCellLink
+								href={`${base}/console/${project}/users/user/${user.$id}`}
+								title="Name"
+							>
 								{user.name ? user.name : 'n/a'}
 							</TableCellLink>
 							<TableCellText title="E-Mail">{user.email}</TableCellText>
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte
index 42db66a1f..bebe132d4 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/users/teams.svelte
@@ -18,6 +18,7 @@
 	import type { Models } from 'src/sdk';
 	import { toLocaleDate } from '$lib/helpers/date';
 	import { Container } from '$lib/layout';
+	import { base } from '$app/paths';
 
 	let search = '';
 	let showCreate = false;
@@ -27,7 +28,7 @@
 	const project = $page.params.project;
 	const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 30, 30).toString();
 	const teamCreated = async (event: CustomEvent<Models.Team>) => {
-		await goto(`/console/${project}/users/team/${event.detail.$id}`);
+		await goto(`${base}/console/${project}/users/team/${event.detail.$id}`);
 	};
 	$: request = sdkForProject.teams.list(search, limit, offset);
 	$: if (search) offset = 0;
@@ -64,7 +65,10 @@
 									/>
 								</div>
 							</TableCell>
-							<TableCellLink title="ID" href={`/console/${project}/users/teams/team/${team.$id}`}>
+							<TableCellLink
+								title="ID"
+								href={`${base}/console/${project}/users/teams/team/${team.$id}`}
+							>
 								{team.name}
 							</TableCellLink>
 							<TableCellText title="Members">{team.total}</TableCellText>
diff --git a/src/routes/console/[project]/users/teams/[team]/__layout.svelte b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
index a0578bfe1..513cff2b8 100644
--- a/src/routes/console/[project]/users/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
 	import { Back } from '$lib/components';
@@ -12,7 +14,7 @@
 </svelte:head>
 <Cover>
 	<svelte:fragment slot="breadcrumbs">
-		<Back href={`/console/${project}/users`}>Users</Back>
+		<Back href={`${base}/console/${project}/users`}>Users</Back>
 	</svelte:fragment>
 	<svelte:fragment slot="title" />
 </Cover>
diff --git a/src/routes/console/[project]/users/teams/[team]/_tabs.svelte b/src/routes/console/[project]/users/teams/[team]/_tabs.svelte
index ab05e3595..a840cb859 100644
--- a/src/routes/console/[project]/users/teams/[team]/_tabs.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/_tabs.svelte
@@ -1,7 +1,9 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
-	$: path = `/console/${$page.params.project}/users/team/${$page.params.team}`;
+	$: path = `${base}/console/${$page.params.project}/users/team/${$page.params.team}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/users/teams/[team]/index.svelte b/src/routes/console/[project]/users/teams/[team]/index.svelte
index dfa16cdb3..a7a0010cf 100644
--- a/src/routes/console/[project]/users/teams/[team]/index.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Card } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
@@ -14,7 +15,7 @@
 		try {
 			if (!confirm('Are you sure you want to delete that team?')) return;
 			await sdkForProject.teams.delete(id);
-			await goto(`/console/${$page.params.project}/teams`);
+			await goto(`${base}/console/${$page.params.project}/teams`);
 		} catch (error) {
 			console.error(error);
 		}
diff --git a/src/routes/console/[project]/users/user/[user]/__layout.svelte b/src/routes/console/[project]/users/user/[user]/__layout.svelte
index 65cc8686d..7415ebdf0 100644
--- a/src/routes/console/[project]/users/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/users/user/[user]/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { browser } from '$app/env';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -23,7 +24,7 @@
 {#if $user}
 	<Cover>
 		<svelte:fragment slot="breadcrumbs">
-			<Back href={`/console/${project}/users`}>Users</Back>
+			<Back href={`${base}/console/${project}/users`}>Users</Back>
 		</svelte:fragment>
 		<svelte:fragment slot="title">{$user.name}</svelte:fragment>
 		<Tabs />
diff --git a/src/routes/console/[project]/users/user/[user]/_tabs.svelte b/src/routes/console/[project]/users/user/[user]/_tabs.svelte
index 9b8098638..10cf26bcd 100644
--- a/src/routes/console/[project]/users/user/[user]/_tabs.svelte
+++ b/src/routes/console/[project]/users/user/[user]/_tabs.svelte
@@ -1,7 +1,9 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 
-	$: path = `/console/${$page.params.project}/users/user/${$page.params.user}`;
+	$: path = `${base}/console/${$page.params.project}/users/user/${$page.params.user}`;
 </script>
 
 <ul class="tabs">
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index ce01a3498..7f6164314 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Card, Copy } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
@@ -12,7 +13,7 @@
 		try {
 			if (!confirm('Are you sure you want to delete that user?')) return;
 			await sdkForProject.users.delete(id);
-			await goto(`/console/${$page.params.project}/users`);
+			await goto(`${base}/console/${$page.params.project}/users`);
 		} catch (error) {
 			console.error(error);
 		}
diff --git a/src/routes/console/[project]/webhooks/__layout.svelte b/src/routes/console/[project]/webhooks/__layout.svelte
index abda3147e..e83dbfc1d 100644
--- a/src/routes/console/[project]/webhooks/__layout.svelte
+++ b/src/routes/console/[project]/webhooks/__layout.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Back } from '$lib/components';
 	import { Cover } from '$lib/layout';
@@ -7,7 +9,7 @@
 
 <Cover>
 	<svelte:fragment slot="breadcrumbs">
-		<Back href={`/console/${projectId}`}>Home</Back>
+		<Back href={`${base}/console/${projectId}`}>Home</Back>
 	</svelte:fragment>
 	<svelte:fragment slot="title">Webhooks</svelte:fragment>
 </Cover>
diff --git a/src/routes/console/[project]/webhooks/index.svelte b/src/routes/console/[project]/webhooks/index.svelte
index f49ef2a49..4601afc03 100644
--- a/src/routes/console/[project]/webhooks/index.svelte
+++ b/src/routes/console/[project]/webhooks/index.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { base } from '$app/paths';
+
 	import { page } from '$app/stores';
 	import { Empty } from '$lib/components';
 	import {
@@ -34,7 +36,7 @@
 					{#each response.webhooks as webhook}
 						<TableCellLink
 							title="Name"
-							href={`/console/${projectId}/webhooks/webhook/${webhook.$id}`}
+							href={`${base}/console/${projectId}/webhooks/webhook/${webhook.$id}`}
 						>
 							{webhook.name}
 						</TableCellLink>
diff --git a/src/routes/console/__layout.reset.svelte b/src/routes/console/__layout.reset.svelte
index f02de1bd7..d2f2969a7 100644
--- a/src/routes/console/__layout.reset.svelte
+++ b/src/routes/console/__layout.reset.svelte
@@ -10,6 +10,7 @@
 	import { browser } from '$app/env';
 	import { app } from '$lib/stores/app';
 	import Footer from '$lib/layout/footer.svelte';
+	import { base } from '$app/paths';
 
 	onMount(async () => {
 		try {
@@ -17,7 +18,7 @@
 				user.set(await sdkForConsole.account.get());
 			}
 		} catch (error) {
-			await goto('/login');
+			await goto(`${base}/login`);
 		}
 	});
 
diff --git a/src/routes/console/index.svelte b/src/routes/console/index.svelte
index 016b9603f..d0e4d96f9 100644
--- a/src/routes/console/index.svelte
+++ b/src/routes/console/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { Tiles, Tile } from '$lib/components';
 	import { Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
@@ -32,7 +33,7 @@
 		addProject = true;
 	};
 	const projectCreated = async (event: CustomEvent<Models.Project>) => {
-		await goto(`/console/${event.detail.$id}`);
+		await goto(`${base}/console/${event.detail.$id}`);
 	};
 </script>
 
@@ -49,7 +50,7 @@
 		<h1>{organization.name}</h1>
 		<Tiles>
 			{#each organization.projects as project}
-				<Tile href={`/console/${project.$id}`} title={project.name} />
+				<Tile href={`${base}/console/${project.$id}`} title={project.name} />
 			{/each}
 		</Tiles>
 		<Button on:click={() => createProject(organization.$id)}>Create Project</Button>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index e26fcf953..5b73cb6b6 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,8 @@
 <script context="module">
+	import { base } from '$app/paths';
+
 	export const load = async () => ({
 		status: 302,
-		redirect: '/login'
+		redirect: `${base}/login`
 	});
 </script>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 42393c537..75078ea56 100644
--- a/src/routes/login.svelte
+++ b/src/routes/login.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import { Button, Form, FormItem, InputEmail, InputPassword } from '$lib/elements/forms';
 	import { addNotification } from '$lib/stores/notifications';
 	import { sdkForConsole } from '$lib/stores/sdk';
@@ -13,7 +14,7 @@
 				type: 'success',
 				message: 'Successfully logged in.'
 			});
-			await goto('/console');
+			await goto(`${base}/console`);
 		} catch (error) {
 			addNotification({
 				type: 'error',
@@ -51,4 +52,4 @@
 	</FormItem>
 </Form>
 
-<a href="/register">Create an Account</a>
+<a href={`${base}/register`}>Create an Account</a>
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
index 7995ff6c6..0a8f0692e 100644
--- a/src/routes/register.svelte
+++ b/src/routes/register.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import {
 		Button,
 		Form,
@@ -17,7 +18,7 @@
 		try {
 			await sdkForConsole.account.create('unique()', mail, pass, name ?? '');
 			await sdkForConsole.account.createSession(mail, pass);
-			await goto('/console');
+			await goto(`${base}/console`);
 		} catch (error) {
 			addNotification({
 				type: 'error',
@@ -53,4 +54,4 @@
 	<FormItem><Button submit>Register</Button></FormItem>
 </Form>
 
-<a href="/login">Login</a>
+<a href={`${base}/login`}>Login</a>
diff --git a/svelte.config.js b/svelte.config.js
index ea143014f..279bc8b97 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,9 @@ const config = {
 	preprocess: preprocess(),
 	kit: {
 		adapter: adapter(),
+		paths: {
+			base: ''
+		},
 		prerender: {
 			default: true
 		}