diff --git a/web/package-lock.json b/web/package-lock.json
index d9d457f0f0..fa989233e7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -87,7 +87,7 @@
         "@oazapfts/runtime": "^1.0.2"
       },
       "devDependencies": {
-        "@types/node": "^22.13.5",
+        "@types/node": "^22.13.9",
         "typescript": "^5.3.3"
       }
     },
diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index 446668256f..3f7a94c6f3 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,29 +1,13 @@
 <script lang="ts">
-  import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { Theme } from '$lib/constants';
-  import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
-  import { t } from 'svelte-i18n';
+  import { colorTheme } from '$lib/stores/preferences.store';
+  import { ThemeSwitcher, Theme as ImmichTheme } from '@immich/ui';
 
-  let icon = $derived($colorTheme.value === Theme.LIGHT ? moonPath : sunPath);
-  let viewBox = $derived($colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox);
-  let isDark = $derived($colorTheme.value === Theme.DARK);
-
-  interface Props {
-    padding?: Padding;
-  }
-
-  let { padding = '3' }: Props = $props();
+  const onThemeToggle = (theme: ImmichTheme) => {
+    $colorTheme.value = theme === ImmichTheme.Light ? Theme.LIGHT : Theme.DARK;
+  };
 </script>
 
 {#if !$colorTheme.system}
-  <CircleIconButton
-    title={$t('toggle_theme')}
-    {icon}
-    {viewBox}
-    role="switch"
-    aria-checked={isDark ? 'true' : 'false'}
-    onclick={handleToggleTheme}
-    {padding}
-  />
+  <ThemeSwitcher onChange={onThemeToggle} size="large" color="secondary" />
 {/if}