diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index e266436e53..7493770340 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,21 +1,13 @@
 <script lang="ts">
+  import { Theme } from '$lib/constants';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { IconButton } from '@immich/ui';
-  import { mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  let icon = $derived(themeManager.isDark ? mdiWhiteBalanceSunny : mdiWeatherNight);
+  import { ThemeSwitcher } from '@immich/ui';
 </script>
 
 {#if !themeManager.theme.system}
-  <IconButton
-    aria-label={$t('toggle_theme')}
-    {icon}
-    role="switch"
-    aria-checked={themeManager.isDark ? 'true' : 'false'}
-    onclick={() => themeManager.toggleTheme()}
+  <ThemeSwitcher
+    size="medium"
     color="secondary"
-    variant="ghost"
-    shape="round"
+    onChange={(theme) => themeManager.setTheme(theme == 'dark' ? Theme.DARK : Theme.LIGHT)}
   />
 {/if}