diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte
index 66eae1280b..52b96f7b7a 100644
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -26,6 +26,7 @@
     mdiServerOutline,
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
+  import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
@@ -36,7 +37,6 @@
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-  import { onMount } from 'svelte';
 
   interface Props {
     sessions?: SessionResponseDto[];
@@ -48,7 +48,7 @@
 
   onMount(async () => {
     keys = await getApiKeys();
-  })
+  });
 
   let oauthOpen =
     oauth.isCallback(globalThis.location) ||
diff --git a/web/src/routes/(user)/user-settings/+layout.svelte b/web/src/routes/(user)/user-settings/+layout.svelte
index 096047a885..e1a9776d36 100644
--- a/web/src/routes/(user)/user-settings/+layout.svelte
+++ b/web/src/routes/(user)/user-settings/+layout.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
   import { getKeyboardActions } from '$lib/services/keyboard.service';
   import { Container } from '@immich/ui';
+  import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import type { Snippet } from 'svelte';
 
   type Props = {
     children?: Snippet;
@@ -19,8 +18,6 @@
 
 <UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
   <Container size="medium" center>
-    <UserSettingsList sessions={data.sessions} />
-
     {@render children?.()}
   </Container>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/user-settings/+layout.ts b/web/src/routes/(user)/user-settings/+layout.ts
index 5731277f9d..0a9855d982 100644
--- a/web/src/routes/(user)/user-settings/+layout.ts
+++ b/web/src/routes/(user)/user-settings/+layout.ts
@@ -1,16 +1,13 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getSessions } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url);
 
-  const sessions = await getSessions();
   const $t = await getFormatter();
 
   return {
-    sessions,
     meta: {
       title: $t('settings'),
     },
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index e69de29bb2..4bbfeedf7c 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  let { data }: Props = $props();
+</script>
+
+<UserSettingsList sessions={data.sessions} />
diff --git a/web/src/routes/(user)/user-settings/+page.ts b/web/src/routes/(user)/user-settings/+page.ts
new file mode 100644
index 0000000000..14beb0295e
--- /dev/null
+++ b/web/src/routes/(user)/user-settings/+page.ts
@@ -0,0 +1,13 @@
+import { authenticate } from '$lib/utils/auth';
+import { getSessions } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url);
+
+  const sessions = await getSessions();
+
+  return {
+    sessions,
+  };
+}) satisfies PageLoad;