diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index f3cf9d7f10..fc5e35ce6d 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -81,6 +81,7 @@ export default [
       'unicorn/prevent-abbreviations': 'off',
       'unicorn/no-nested-ternary': 'off',
       'unicorn/consistent-function-scoping': 'off',
+      'unicorn/filename-case': 'off',
       'unicorn/prefer-top-level-await': 'off',
       'unicorn/import-style': 'off',
       'svelte/button-has-type': 'error',
diff --git a/web/src/app.html b/web/src/app.html
index 6fd02dc9f8..c0ac3cfe6c 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -101,6 +101,12 @@
     <link rel="stylesheet" href="/custom.css" />
   </head>
 
+  <noscript
+    class="absolute z-[1000] flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  >
+    To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
+  </noscript>
+
   <body class="bg-immich-bg dark:bg-immich-dark-bg">
     <div id="stencil">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte
deleted file mode 100644
index b4ecd56283..0000000000
--- a/web/src/lib/components/forms/admin-registration-form.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
-  import { signUpAdmin } from '@immich/sdk';
-  import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
-  import PasswordField from '../shared-components/password-field.svelte';
-  import { t } from 'svelte-i18n';
-  import { retrieveServerConfig } from '$lib/stores/server-config.store';
-
-  let email = $state('');
-  let password = $state('');
-  let confirmPassword = $state('');
-  let name = $state('');
-
-  let errorMessage: string = $state('');
-  let canRegister = $state(false);
-
-  $effect(() => {
-    if (password !== confirmPassword && confirmPassword.length > 0) {
-      errorMessage = $t('password_does_not_match');
-      canRegister = false;
-    } else {
-      errorMessage = '';
-      canRegister = true;
-    }
-  });
-
-  async function registerAdmin() {
-    if (canRegister) {
-      errorMessage = '';
-
-      try {
-        await signUpAdmin({ signUpDto: { email, password, name } });
-        await retrieveServerConfig();
-        await goto(AppRoute.AUTH_LOGIN);
-      } catch (error) {
-        handleError(error, $t('errors.unable_to_create_admin_account'));
-        errorMessage = $t('errors.unable_to_create_admin_account');
-      }
-    }
-  }
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await registerAdmin();
-  };
-</script>
-
-<form {onsubmit} method="post" class="mt-5 flex flex-col gap-5">
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="email">{$t('admin_email')}</label>
-    <input class="immich-form-input" id="email" bind:value={email} type="email" autocomplete="email" required />
-  </div>
-
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="password">{$t('admin_password')}</label>
-    <PasswordField id="password" bind:password autocomplete="new-password" />
-  </div>
-
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="confirmPassword">{$t('confirm_admin_password')}</label>
-    <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
-  </div>
-
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="name">{$t('name')}</label>
-    <input class="immich-form-input" id="name" bind:value={name} type="text" autocomplete="name" required />
-  </div>
-
-  {#if errorMessage}
-    <p class="text-red-400">{errorMessage}</p>
-  {/if}
-
-  <div class="my-5 flex w-full">
-    <Button type="submit" size="lg" fullwidth>{$t('sign_up')}</Button>
-  </div>
-</form>
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte
deleted file mode 100644
index 6f16781d9a..0000000000
--- a/web/src/lib/components/forms/change-password-form.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-  import Button from '../elements/buttons/button.svelte';
-  import PasswordField from '../shared-components/password-field.svelte';
-  import { updateMyUser } from '@immich/sdk';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    onSuccess: () => void;
-  }
-
-  let { onSuccess }: Props = $props();
-
-  let errorMessage: string = $state('');
-
-  let password = $state('');
-  let passwordConfirm = $state('');
-
-  let valid = $state(false);
-
-  $effect(() => {
-    if (password !== passwordConfirm && passwordConfirm.length > 0) {
-      errorMessage = $t('password_does_not_match');
-      valid = false;
-    } else {
-      errorMessage = '';
-      valid = true;
-    }
-  });
-
-  async function changePassword() {
-    if (valid) {
-      errorMessage = '';
-
-      await updateMyUser({ userUpdateMeDto: { password: String(password) } });
-
-      onSuccess();
-    }
-  }
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await changePassword();
-  };
-</script>
-
-<form {onsubmit} method="post" class="mt-5 flex flex-col gap-5">
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="password">{$t('new_password')}</label>
-    <PasswordField id="password" bind:password autocomplete="new-password" />
-  </div>
-
-  <div class="flex flex-col gap-2">
-    <label class="immich-form-label" for="confirmPassword">{$t('confirm_password')}</label>
-    <PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
-  </div>
-
-  {#if errorMessage}
-    <p class="text-sm text-red-400">{errorMessage}</p>
-  {/if}
-
-  <div class="my-5 flex w-full">
-    <Button type="submit" size="lg" fullwidth>{$t('to_change_password')}</Button>
-  </div>
-</form>
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
deleted file mode 100644
index 6c1dcecba3..0000000000
--- a/web/src/lib/components/forms/login-form.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
-  import { oauth } from '$lib/utils';
-  import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
-  import { login } from '@immich/sdk';
-  import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
-  import PasswordField from '../shared-components/password-field.svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    onSuccess: () => unknown | Promise<unknown>;
-    onFirstLogin: () => unknown | Promise<unknown>;
-    onOnboarding: () => unknown | Promise<unknown>;
-  }
-
-  let { onSuccess, onFirstLogin, onOnboarding }: Props = $props();
-
-  let errorMessage: string = $state('');
-  let email = $state('');
-  let password = $state('');
-  let oauthError = $state('');
-  let loading = $state(false);
-  let oauthLoading = $state(true);
-
-  onMount(async () => {
-    if (!$featureFlags.oauth) {
-      oauthLoading = false;
-      return;
-    }
-
-    if (oauth.isCallback(globalThis.location)) {
-      try {
-        await oauth.login(globalThis.location);
-        await onSuccess();
-        return;
-      } catch (error) {
-        console.error('Error [login-form] [oauth.callback]', error);
-        oauthError = getServerErrorMessage(error) || $t('errors.unable_to_complete_oauth_login');
-        oauthLoading = false;
-      }
-    }
-
-    try {
-      if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) {
-        await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
-        await oauth.authorize(globalThis.location);
-        return;
-      }
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_connect'));
-    }
-
-    oauthLoading = false;
-  });
-
-  const handleLogin = async () => {
-    try {
-      errorMessage = '';
-      loading = true;
-      const user = await login({ loginCredentialDto: { email, password } });
-
-      if (user.isAdmin && !$serverConfig.isOnboarded) {
-        await onOnboarding();
-        return;
-      }
-
-      if (!user.isAdmin && user.shouldChangePassword) {
-        await onFirstLogin();
-        return;
-      }
-      await onSuccess();
-      return;
-    } catch (error) {
-      errorMessage = getServerErrorMessage(error) || $t('errors.incorrect_email_or_password');
-      loading = false;
-      return;
-    }
-  };
-
-  const handleOAuthLogin = async () => {
-    oauthLoading = true;
-    oauthError = '';
-    const success = await oauth.authorize(globalThis.location);
-    if (!success) {
-      oauthLoading = false;
-      oauthError = $t('errors.unable_to_login_with_oauth');
-    }
-  };
-
-  const onsubmit = async (event: Event) => {
-    event.preventDefault();
-    await handleLogin();
-  };
-</script>
-
-{#if !oauthLoading && $featureFlags.passwordLogin}
-  <form {onsubmit} class="mt-5 flex flex-col gap-5">
-    {#if errorMessage}
-      <p class="text-red-400" transition:fade>
-        {errorMessage}
-      </p>
-    {/if}
-
-    <div class="flex flex-col gap-2">
-      <label class="immich-form-label" for="email">{$t('email')}</label>
-      <input
-        class="immich-form-input"
-        id="email"
-        name="email"
-        type="email"
-        autocomplete="email"
-        bind:value={email}
-        required
-      />
-    </div>
-
-    <div class="flex flex-col gap-2">
-      <label class="immich-form-label" for="password">{$t('password')}</label>
-      <PasswordField id="password" bind:password autocomplete="current-password" />
-    </div>
-
-    <div class="my-5 flex w-full">
-      <Button type="submit" size="lg" fullwidth disabled={loading}>
-        {#if loading}
-          <span class="h-6">
-            <LoadingSpinner />
-          </span>
-        {:else}
-          {$t('to_login')}
-        {/if}
-      </Button>
-    </div>
-  </form>
-{/if}
-
-{#if $featureFlags.oauth}
-  {#if $featureFlags.passwordLogin}
-    <div class="inline-flex w-full items-center justify-center">
-      <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
-      <span
-        class="absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-immich-dark-gray dark:text-white"
-      >
-        {$t('or')}
-      </span>
-    </div>
-  {/if}
-  <div class="my-5 flex flex-col gap-5">
-    {#if oauthError}
-      <p class="text-center text-red-400" transition:fade>{oauthError}</p>
-    {/if}
-    <Button
-      type="button"
-      disabled={loading || oauthLoading}
-      size="lg"
-      fullwidth
-      color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
-      onclick={handleOAuthLogin}
-    >
-      {#if oauthLoading}
-        <span class="h-6">
-          <LoadingSpinner />
-        </span>
-      {:else}
-        {$serverConfig.oauthButtonText}
-      {/if}
-    </Button>
-  </div>
-{/if}
-
-{#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
-  <p class="p-4 text-center dark:text-immich-dark-fg">{$t('login_has_been_disabled')}</p>
-{/if}
diff --git a/web/src/lib/components/shared-components/fullscreen-container.svelte b/web/src/lib/components/layouts/AuthPageLayout.svelte
similarity index 93%
rename from web/src/lib/components/shared-components/fullscreen-container.svelte
rename to web/src/lib/components/layouts/AuthPageLayout.svelte
index 64ee41a225..c470f809a6 100644
--- a/web/src/lib/components/shared-components/fullscreen-container.svelte
+++ b/web/src/lib/components/layouts/AuthPageLayout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
   import type { Snippet } from 'svelte';
-  import ImmichLogo from './immich-logo.svelte';
 
   interface Props {
     title: string;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 9fdf1b5ec0..fa1351ab20 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,30 +1,26 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
+  import { shortcut } from '$lib/actions/shortcut';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
+  import Error from '$lib/components/error.svelte';
   import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
-  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
   import { Theme } from '$lib/constants';
   import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
-
   import { serverConfig } from '$lib/stores/server-config.store';
-
   import { user } from '$lib/stores/user.store';
   import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
   import { copyToClipboard, setKey } from '$lib/utils';
-  import { onDestroy, onMount, type Snippet } from 'svelte';
-  import '../app.css';
   import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
-  import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
-  import { t } from 'svelte-i18n';
-  import Error from '$lib/components/error.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
+  import { run } from 'svelte/legacy';
+  import '../app.css';
+
   interface Props {
     children?: Snippet;
   }
@@ -127,14 +123,6 @@
   {/if}
 </svelte:head>
 
-<noscript
-  class="absolute z-[1000] flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
->
-  <FullscreenContainer title={$t('welcome_to_immich')}>
-    To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
-  </FullscreenContainer>
-</noscript>
-
 <svelte:window
   use:shortcut={{
     shortcut: { ctrl: true, shift: true, key: 'm' },
diff --git a/web/src/routes/auth/change-password/+page.svelte b/web/src/routes/auth/change-password/+page.svelte
index 21226b9387..ea340ff600 100644
--- a/web/src/routes/auth/change-password/+page.svelte
+++ b/web/src/routes/auth/change-password/+page.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
-  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
   import { AppRoute } from '$lib/constants';
   import { resetSavedUser, user } from '$lib/stores/user.store';
-  import { logout } from '@immich/sdk';
-  import type { PageData } from './$types';
+  import { logout, updateMyUser } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -14,14 +15,26 @@
 
   let { data }: Props = $props();
 
-  const onSuccess = async () => {
+  let password = $state('');
+  let passwordConfirm = $state('');
+  const valid = $derived(password === passwordConfirm && passwordConfirm.length > 0);
+  const errorMessage = $derived(passwordConfirm.length === 0 || valid ? '' : $t('password_does_not_match'));
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    if (!valid) {
+      return;
+    }
+
+    await updateMyUser({ userUpdateMeDto: { password: String(password) } });
     await goto(AppRoute.AUTH_LOGIN);
     resetSavedUser();
     await logout();
   };
 </script>
 
-<FullscreenContainer title={data.meta.title}>
+<AuthPageLayout title={data.meta.title}>
   {#snippet message()}
     <p>
       {$t('hi_user', { values: { name: $user.name, email: $user.email } })}
@@ -31,5 +44,23 @@
     </p>
   {/snippet}
 
-  <ChangePasswordForm {onSuccess} />
-</FullscreenContainer>
+  <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="password">{$t('new_password')}</label>
+      <PasswordField id="password" bind:password autocomplete="new-password" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="confirmPassword">{$t('confirm_password')}</label>
+      <PasswordField id="confirmPassword" bind:password={passwordConfirm} autocomplete="new-password" />
+    </div>
+
+    {#if errorMessage}
+      <p class="text-sm text-red-400">{errorMessage}</p>
+    {/if}
+
+    <div class="my-5 flex w-full">
+      <Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('to_change_password')}</Button>
+    </div>
+  </form>
+</AuthPageLayout>
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index 0ab506f5e3..63346a6abf 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import LoginForm from '$lib/components/forms/login-form.svelte';
-  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
   import { AppRoute } from '$lib/constants';
   import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { oauth } from '$lib/utils';
+  import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
+  import { login } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
   import type { PageData } from './$types';
 
   interface Props {
@@ -11,10 +19,91 @@
   }
 
   let { data }: Props = $props();
+
+  let errorMessage: string = $state('');
+  let email = $state('');
+  let password = $state('');
+  let oauthError = $state('');
+  let loading = $state(false);
+  let oauthLoading = $state(true);
+
+  const onSuccess = async () => await goto(AppRoute.PHOTOS, { invalidateAll: true });
+  const onFirstLogin = async () => await goto(AppRoute.AUTH_CHANGE_PASSWORD);
+  const onOnboarding = async () => await goto(AppRoute.AUTH_ONBOARDING);
+
+  onMount(async () => {
+    if (!$featureFlags.oauth) {
+      oauthLoading = false;
+      return;
+    }
+
+    if (oauth.isCallback(globalThis.location)) {
+      try {
+        await oauth.login(globalThis.location);
+        await onSuccess();
+        return;
+      } catch (error) {
+        console.error('Error [login-form] [oauth.callback]', error);
+        oauthError = getServerErrorMessage(error) || $t('errors.unable_to_complete_oauth_login');
+        oauthLoading = false;
+      }
+    }
+
+    try {
+      if ($featureFlags.oauthAutoLaunch && !oauth.isAutoLaunchDisabled(globalThis.location)) {
+        await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
+        await oauth.authorize(globalThis.location);
+        return;
+      }
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_connect'));
+    }
+
+    oauthLoading = false;
+  });
+
+  const handleLogin = async () => {
+    try {
+      errorMessage = '';
+      loading = true;
+      const user = await login({ loginCredentialDto: { email, password } });
+
+      if (user.isAdmin && !$serverConfig.isOnboarded) {
+        await onOnboarding();
+        return;
+      }
+
+      if (!user.isAdmin && user.shouldChangePassword) {
+        await onFirstLogin();
+        return;
+      }
+      await onSuccess();
+      return;
+    } catch (error) {
+      errorMessage = getServerErrorMessage(error) || $t('errors.incorrect_email_or_password');
+      loading = false;
+      return;
+    }
+  };
+
+  const handleOAuthLogin = async () => {
+    oauthLoading = true;
+    oauthError = '';
+    const success = await oauth.authorize(globalThis.location);
+    if (!success) {
+      oauthLoading = false;
+      oauthError = $t('errors.unable_to_login_with_oauth');
+    }
+  };
+
+  const onsubmit = async (event: Event) => {
+    event.preventDefault();
+    await handleLogin();
+  };
 </script>
 
 {#if $featureFlags.loaded}
-  <FullscreenContainer title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
+  <AuthPageLayout title={data.meta.title} showMessage={!!$serverConfig.loginPageMessage}>
     {#snippet message()}
       <p>
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -22,10 +111,82 @@
       </p>
     {/snippet}
 
-    <LoginForm
-      onSuccess={async () => await goto(AppRoute.PHOTOS, { invalidateAll: true })}
-      onFirstLogin={async () => await goto(AppRoute.AUTH_CHANGE_PASSWORD)}
-      onOnboarding={async () => await goto(AppRoute.AUTH_ONBOARDING)}
-    />
-  </FullscreenContainer>
+    {#if !oauthLoading && $featureFlags.passwordLogin}
+      <form {onsubmit} class="mt-5 flex flex-col gap-5">
+        {#if errorMessage}
+          <p class="text-red-400" transition:fade>
+            {errorMessage}
+          </p>
+        {/if}
+
+        <div class="flex flex-col gap-2">
+          <label class="immich-form-label" for="email">{$t('email')}</label>
+          <input
+            class="immich-form-input"
+            id="email"
+            name="email"
+            type="email"
+            autocomplete="email"
+            bind:value={email}
+            required
+          />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label class="immich-form-label" for="password">{$t('password')}</label>
+          <PasswordField id="password" bind:password autocomplete="current-password" />
+        </div>
+
+        <div class="my-5 flex w-full">
+          <Button type="submit" size="lg" fullwidth disabled={loading}>
+            {#if loading}
+              <span class="h-6">
+                <LoadingSpinner />
+              </span>
+            {:else}
+              {$t('to_login')}
+            {/if}
+          </Button>
+        </div>
+      </form>
+    {/if}
+
+    {#if $featureFlags.oauth}
+      {#if $featureFlags.passwordLogin}
+        <div class="inline-flex w-full items-center justify-center">
+          <hr class="my-4 h-px w-3/4 border-0 bg-gray-200 dark:bg-gray-600" />
+          <span
+            class="absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-immich-dark-gray dark:text-white"
+          >
+            {$t('or')}
+          </span>
+        </div>
+      {/if}
+      <div class="my-5 flex flex-col gap-5">
+        {#if oauthError}
+          <p class="text-center text-red-400" transition:fade>{oauthError}</p>
+        {/if}
+        <Button
+          type="button"
+          disabled={loading || oauthLoading}
+          size="lg"
+          fullwidth
+          color={$featureFlags.passwordLogin ? 'secondary' : 'primary'}
+          onclick={handleOAuthLogin}
+        >
+          {#if oauthLoading}
+            <span class="h-6">
+              <LoadingSpinner />
+            </span>
+          {:else}
+            {$serverConfig.oauthButtonText}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+
+    {#if !$featureFlags.passwordLogin && !$featureFlags.oauth}
+      <p class="p-4 text-center dark:text-immich-dark-fg">{$t('login_has_been_disabled')}</p>
+    {/if}
+  </AuthPageLayout>
 {/if}
diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte
index 2e55ba7435..43e28d5964 100644
--- a/web/src/routes/auth/register/+page.svelte
+++ b/web/src/routes/auth/register/+page.svelte
@@ -1,22 +1,86 @@
 <script lang="ts">
-  import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
-  import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
-  import type { PageData } from './$types';
+  import { goto } from '$app/navigation';
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  import PasswordField from '$lib/components/shared-components/password-field.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { retrieveServerConfig } from '$lib/stores/server-config.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import { signUpAdmin } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  let email = $state('');
+  let password = $state('');
+  let confirmPassword = $state('');
+  let name = $state('');
+  let errorMessage = $state('');
+  let valid = $derived(password === confirmPassword && confirmPassword.length > 0);
 
   interface Props {
     data: PageData;
   }
 
   let { data }: Props = $props();
+
+  $effect(() => {
+    errorMessage = password === confirmPassword || confirmPassword.length === 0 ? '' : $t('password_does_not_match');
+  });
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    if (!valid) {
+      return;
+    }
+
+    errorMessage = '';
+
+    try {
+      await signUpAdmin({ signUpDto: { email, password, name } });
+      await retrieveServerConfig();
+      await goto(AppRoute.AUTH_LOGIN);
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_create_admin_account'));
+      errorMessage = $t('errors.unable_to_create_admin_account');
+    }
+  };
 </script>
 
-<FullscreenContainer title={data.meta.title}>
+<AuthPageLayout title={data.meta.title}>
   {#snippet message()}
     <p>
       {$t('admin.registration_description')}
     </p>
   {/snippet}
 
-  <AdminRegistrationForm />
-</FullscreenContainer>
+  <form onsubmit={onSubmit} method="post" class="mt-5 flex flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="email">{$t('admin_email')}</label>
+      <input class="immich-form-input" id="email" bind:value={email} type="email" autocomplete="email" required />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="password">{$t('admin_password')}</label>
+      <PasswordField id="password" bind:password autocomplete="new-password" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="confirmPassword">{$t('confirm_admin_password')}</label>
+      <PasswordField id="confirmPassword" bind:password={confirmPassword} autocomplete="new-password" />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="immich-form-label" for="name">{$t('name')}</label>
+      <input class="immich-form-input" id="name" bind:value={name} type="text" autocomplete="name" required />
+    </div>
+
+    {#if errorMessage}
+      <p class="text-red-400">{errorMessage}</p>
+    {/if}
+
+    <div class="my-5 flex w-full">
+      <Button type="submit" size="lg" fullwidth disabled={!valid}>{$t('sign_up')}</Button>
+    </div>
+  </form>
+</AuthPageLayout>
