diff --git a/web/src/lib/components/layouts/AuthPageLayout.svelte b/web/src/lib/components/layouts/AuthPageLayout.svelte
index 51186f83b2..19108956ff 100644
--- a/web/src/lib/components/layouts/AuthPageLayout.svelte
+++ b/web/src/lib/components/layouts/AuthPageLayout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { Card, CardBody, CardHeader, Heading, Logo, VStack } from '@immich/ui';
+  import { Card, CardBody, CardHeader, Heading, immichLogo, Logo, VStack } from '@immich/ui';
   import type { Snippet } from 'svelte';
-  import { immichLogo } from '@immich/ui';
   interface Props {
     title: string;
     children?: Snippet;
@@ -11,9 +10,11 @@
 </script>
 
 <section class="min-w-screen flex min-h-dvh items-center justify-center relative">
-  <div class="absolute -z-10 w-[99%] h-[99%] flex place-items-center place-content-center">
-    <img src={immichLogo} class="w-[700px] mb-2 antialiased -z-10" alt="Immich logo" />
-    <div class="w-full h-[99%] absolute left-0 top-0 backdrop-blur-3xl bg-transparent dark:bg-immich-dark-bg/20"></div>
+  <div class="absolute -z-10 w-full h-full flex place-items-center place-content-center">
+    <img src={immichLogo} class="max-w-screen-md mx-auto h-full mb-2 antialiased -z-10" alt="Immich logo" />
+    <div
+      class="w-full h-[99%] absolute left-0 top-0 backdrop-blur-[200px] bg-transparent dark:bg-immich-dark-bg/20"
+    ></div>
   </div>
 
   <Card color="secondary" class="w-full max-w-lg border m-2">