diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 9d0d8f5..6788f85 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -3,21 +3,12 @@
     Application shell with providers and page wrapper
 -->
 <script lang="ts">
-/**
- * Layout Component
- *
- * Root layout wrapper that provides the application shell structure. Handles favicon,
- * toolbar provider initialization, and renders child routes with consistent structure.
- *
- * Layout structure:
- * - Header area (currently empty, reserved for future use)
- *
- * - Footer area (currently empty, reserved for future use)
- */
 import { themeManager } from '$features/ChangeAppTheme';
 import G from '$shared/assets/G.svg';
 import { ResponsiveProvider } from '$shared/lib';
+import { Footer } from '$widgets/Footer';
 import clsx from 'clsx';
+
 import {
     type Snippet,
     onDestroy,
@@ -83,13 +74,14 @@ onDestroy(() => themeManager.destroy());
     <div
         id="app-root"
         class={clsx(
-            'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg',
+            'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg relative',
             theme === 'dark' ? 'dark' : '',
         )}
     >
         {#if fontsReady}
             {@render children?.()}
         {/if}
-        <footer></footer>
+
+        <Footer />
     </div>
 </ResponsiveProvider>