diff --git a/web/src/api/api.ts b/web/src/api/api.ts
index 998895748f..0bd8b76fcc 100644
--- a/web/src/api/api.ts
+++ b/web/src/api/api.ts
@@ -1,11 +1,10 @@
-import { browser } from '$app/environment';
-import { env } from '$env/dynamic/public';
 import {
 	AlbumApi,
 	APIKeyApi,
 	AssetApi,
 	AuthenticationApi,
 	Configuration,
+	ConfigurationParameters,
 	DeviceInfoApi,
 	JobApi,
 	OAuthApi,
@@ -15,7 +14,7 @@ import {
 	UserApi
 } from './open-api';
 
-class ImmichApi {
+export class ImmichApi {
 	public userApi: UserApi;
 	public albumApi: AlbumApi;
 	public assetApi: AssetApi;
@@ -28,9 +27,11 @@ class ImmichApi {
 	public systemConfigApi: SystemConfigApi;
 	public shareApi: ShareApi;
 
-	private config = new Configuration({ basePath: '/api' });
+	private config: Configuration;
+
+	constructor(params: ConfigurationParameters) {
+		this.config = new Configuration(params);
 
-	constructor() {
 		this.userApi = new UserApi(this.config);
 		this.albumApi = new AlbumApi(this.config);
 		this.assetApi = new AssetApi(this.config);
@@ -57,11 +58,4 @@ class ImmichApi {
 	}
 }
 
-const api = new ImmichApi();
-
-if (!browser) {
-	const serverUrl = env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001';
-	api.setBaseUrl(serverUrl);
-}
-
-export { api };
+export const api = new ImmichApi({ basePath: '/api' });
diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index 46398aad3c..0738858993 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -5,6 +5,7 @@
 declare namespace App {
 	interface Locals {
 		user?: import('@api').UserResponseDto;
+		api: import('@api').ImmichApi;
 	}
 
 	// interface Platform {}
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index e50560cc36..532e1ca813 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -1,7 +1,14 @@
 import type { Handle, HandleServerError } from '@sveltejs/kit';
 import { AxiosError } from 'axios';
+import { env } from '$env/dynamic/public';
+import { ImmichApi } from './api/api';
+
+export const handle = (async ({ event, resolve }) => {
+	event.locals.api = new ImmichApi({
+		basePath: env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001',
+		accessToken: event.cookies.get('immich_access_token')
+	});
 
-export const handle: Handle = async ({ event, resolve }) => {
 	const res = await resolve(event);
 
 	// The link header can grow quite big and has caused issues with our nginx
@@ -9,7 +16,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	res.headers.delete('Link');
 
 	return res;
-};
+}) satisfies Handle;
 
 export const handleError: HandleServerError = async ({ error }) => {
 	const httpError = error as AxiosError;
diff --git a/web/src/routes/+layout.server.ts b/web/src/routes/+layout.server.ts
index 899a435c06..cb7b4006f3 100644
--- a/web/src/routes/+layout.server.ts
+++ b/web/src/routes/+layout.server.ts
@@ -1,14 +1,7 @@
-import { api } from '@api';
 import type { LayoutServerLoad } from './$types';
 
-export const load = (async ({ cookies }) => {
+export const load = (async ({ locals: { api } }) => {
 	try {
-		const accessToken = cookies.get('immich_access_token');
-		if (!accessToken) {
-			return { user: undefined };
-		}
-
-		api.setAccessToken(accessToken);
 		const { data: user } = await api.userApi.getMyUserInfo();
 
 		return { user };
diff --git a/web/src/routes/+page.server.ts b/web/src/routes/+page.server.ts
index db3cef11f9..7f9e9ce9dc 100644
--- a/web/src/routes/+page.server.ts
+++ b/web/src/routes/+page.server.ts
@@ -1,9 +1,9 @@
 export const prerender = false;
-import { api } from '@api';
+
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 	if (user) {
 		throw redirect(302, '/photos');
@@ -22,4 +22,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			description: 'Immich Web Interface'
 		}
 	};
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/server-status/+page.server.ts b/web/src/routes/admin/server-status/+page.server.ts
index d1f5189e6b..e688a8a11b 100644
--- a/web/src/routes/admin/server-status/+page.server.ts
+++ b/web/src/routes/admin/server-status/+page.server.ts
@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-import { api } from '@api';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -19,4 +18,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'Server Status'
 		}
 	};
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/user-management/+page.server.ts b/web/src/routes/admin/user-management/+page.server.ts
index ad80a108bc..3e5f29ffef 100644
--- a/web/src/routes/admin/user-management/+page.server.ts
+++ b/web/src/routes/admin/user-management/+page.server.ts
@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-import { api } from '@api';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -20,4 +19,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'User Management'
 		}
 	};
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/albums/+page.server.ts b/web/src/routes/albums/+page.server.ts
index f5d99068ea..eb3b6f9b13 100644
--- a/web/src/routes/albums/+page.server.ts
+++ b/web/src/routes/albums/+page.server.ts
@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	try {
 		const { user } = await parent();
 
@@ -22,4 +21,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/albums/[albumId]/+page.server.ts b/web/src/routes/albums/[albumId]/+page.server.ts
index 6b5d7f6850..4ab870f1a2 100644
--- a/web/src/routes/albums/[albumId]/+page.server.ts
+++ b/web/src/routes/albums/[albumId]/+page.server.ts
@@ -1,9 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async ({ parent, params }) => {
+export const load = (async ({ parent, params, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -23,4 +21,4 @@ export const load: PageServerLoad = async ({ parent, params }) => {
 	} catch (e) {
 		throw redirect(302, '/albums');
 	}
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/change-password/+page.ts b/web/src/routes/auth/change-password/+page.server.ts
similarity index 74%
rename from web/src/routes/auth/change-password/+page.ts
rename to web/src/routes/auth/change-password/+page.server.ts
index 853710cf9c..c23726ada0 100644
--- a/web/src/routes/auth/change-password/+page.ts
+++ b/web/src/routes/auth/change-password/+page.server.ts
@@ -1,10 +1,9 @@
-import { api } from '@api';
-import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
-export const load: PageLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	try {
 		const { data: userInfo } = await api.userApi.getMyUserInfo();
 
@@ -21,4 +20,4 @@ export const load: PageLoad = async () => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/login/+page.server.ts b/web/src/routes/auth/login/+page.server.ts
index ca4ccab9bf..03549e03c9 100644
--- a/web/src/routes/auth/login/+page.server.ts
+++ b/web/src/routes/auth/login/+page.server.ts
@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	const { data } = await api.userApi.getUserCount(true);
 	if (data.userCount === 0) {
 		// Admin not registered
@@ -14,4 +13,4 @@ export const load: PageServerLoad = async () => {
 			title: 'Login'
 		}
 	};
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/auth/register/+page.server.ts b/web/src/routes/auth/register/+page.server.ts
index 72ad0abf1b..bf62570726 100644
--- a/web/src/routes/auth/register/+page.server.ts
+++ b/web/src/routes/auth/register/+page.server.ts
@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	const { data } = await api.userApi.getUserCount(true);
 	if (data.userCount != 0) {
 		// Admin has been registered, redirect to login
@@ -14,4 +13,4 @@ export const load: PageServerLoad = async () => {
 			title: 'Admin Registration'
 		}
 	};
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/share/[key]/photos/[assetId]/+page.server.ts b/web/src/routes/share/[key]/photos/[assetId]/+page.server.ts
index 5e17efb180..3ba60ed169 100644
--- a/web/src/routes/share/[key]/photos/[assetId]/+page.server.ts
+++ b/web/src/routes/share/[key]/photos/[assetId]/+page.server.ts
@@ -1,10 +1,9 @@
 export const prerender = false;
-import { error } from '@sveltejs/kit';
 
-import { api } from '@api';
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load = (async ({ params, locals: { api } }) => {
 	try {
 		const { key, assetId } = params;
 		const { data: asset } = await api.assetApi.getAssetById(assetId, key);
@@ -16,4 +15,4 @@ export const load: PageServerLoad = async ({ params }) => {
 	} catch (e) {
 		console.log('Error', e);
 	}
-};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/sharing/+page.server.ts b/web/src/routes/sharing/+page.server.ts
index cdc519dd67..837a39f550 100644
--- a/web/src/routes/sharing/+page.server.ts
+++ b/web/src/routes/sharing/+page.server.ts
@@ -1,10 +1,9 @@
-import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import { api } from '@api';
+import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	try {
 		const { user } = await parent();
 		if (!user) {
@@ -23,4 +22,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;