diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index a267d56..1bfbcac 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -11,12 +11,18 @@
  * - Footer area (currently empty, reserved for future use)
  */
 import { BreadcrumbHeader } from '$entities/Breadcrumb';
+import {
+    ThemeSwitch,
+    themeManager,
+} from '$features/ChangeAppTheme';
 import GD from '$shared/assets/GD.svg';
 import { ResponsiveProvider } from '$shared/lib';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     type Snippet,
+    onDestroy,
     onMount,
 } from 'svelte';
 
@@ -26,6 +32,7 @@ interface Props {
 
 let { children }: Props = $props();
 let fontsReady = $state(false);
+const theme = $derived(themeManager.value);
 
 /**
  * Sets fontsReady flag to true when font for the page logo is loaded.
@@ -49,6 +56,9 @@ onMount(async () => {
     }
     fontsReady = true;
 });
+
+onMount(() => themeManager.init());
+onDestroy(() => themeManager.destroy());
 </script>
 
 <svelte:head>
@@ -88,9 +98,16 @@ onMount(async () => {
 </svelte:head>
 
 <ResponsiveProvider>
-    <div id="app-root" class="min-h-screen flex flex-col bg-background">
+    <div
+        id="app-root"
+        class={cn(
+            'min-h-screen flex flex-col bg-surface dark:bg-dark-bg',
+            theme === 'dark' ? 'dark' : '',
+        )}
+    >
         <header>
             <BreadcrumbHeader />
+            <ThemeSwitch />
         </header>
 
         <!-- <ScrollArea class="h-screen w-screen"> -->