diff --git a/web/src/app.css b/web/src/app.css
index 7a547d3504..1127b60624 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -15,7 +15,7 @@
 
     /* dark */
     --immich-dark-primary: 172 203 250;
-    --immich-dark-bg: 0 0 0;
+    --immich-dark-bg: 10 10 10;
     --immich-dark-fg: 229 231 235;
     --immich-dark-gray: 33 33 33;
     --immich-dark-error: 211 47 47;
diff --git a/web/src/lib/components/layouts/AuthPageLayout.svelte b/web/src/lib/components/layouts/AuthPageLayout.svelte
index f4532902c2..51186f83b2 100644
--- a/web/src/lib/components/layouts/AuthPageLayout.svelte
+++ b/web/src/lib/components/layouts/AuthPageLayout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Card, CardBody, CardHeader, Heading, Logo, VStack } from '@immich/ui';
   import type { Snippet } from 'svelte';
-
+  import { immichLogo } from '@immich/ui';
   interface Props {
     title: string;
     children?: Snippet;
@@ -12,8 +12,8 @@
 
 <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="/immich-logo-no-bg.svg" class="w-[750px] mb-2 antialiased -z-10" alt="Immich logo" />
-    <div class="w-full h-[99%] absolute left-0 top-0 backdrop-blur-3xl bg-immich-bg/80 dark:bg-immich-dark-bg/20"></div>
+    <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>
 
   <Card color="secondary" class="w-full max-w-lg border m-2">