diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 2702d0a..af3a0a5 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -3,17 +3,15 @@
  * Layout Component
  *
  * Root layout wrapper that provides the application shell structure. Handles favicon,
- * sidebar provider initialization, and renders child routes with consistent structure.
+ * toolbar provider initialization, and renders child routes with consistent structure.
  *
  * Layout structure:
  * - Header area (currently empty, reserved for future use)
- * - Collapsible sidebar with main content area
- * - Footer area (currently empty, reserved for future use)
  *
- * Uses Sidebar.Provider to enable mobile-responsive collapsible sidebar behavior
- * throughout the application.
+ * - Footer area (currently empty, reserved for future use)
  */
 import favicon from '$shared/assets/favicon.svg';
+import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
 import { TypographyMenu } from '$widgets/TypographySettings';
 import type { Snippet } from 'svelte';
@@ -42,11 +40,13 @@ let { children }: Props = $props();
 <div id="app-root" class="min-h-screen flex flex-col bg-background">
     <header></header>
 
-    <main class="flex-1 w-full max-w-5xl mx-auto px-4 py-6 md:px-8 lg:py-10">
-        <TooltipProvider>
-            <TypographyMenu />
-            {@render children?.()}
-        </TooltipProvider>
-    </main>
+    <ScrollArea class="h-screen w-screen">
+        <main class="flex-1 w-full max-w-5xl mx-auto px-4 py-6 md:px-8 lg:py-10 relative">
+            <TooltipProvider>
+                <TypographyMenu />
+                {@render children?.()}
+            </TooltipProvider>
+        </main>
+    </ScrollArea>
     <footer></footer>
 </div>
diff --git a/src/shared/shadcn/ui/scroll-area/index.ts b/src/shared/shadcn/ui/scroll-area/index.ts
new file mode 100644
index 0000000..2d8d691
--- /dev/null
+++ b/src/shared/shadcn/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+    Root,
+    // ,
+    Root as ScrollArea,
+    Scrollbar,
+    Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/src/shared/shadcn/ui/scroll-area/scroll-area-scrollbar.svelte b/src/shared/shadcn/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..6dc1737
--- /dev/null
+++ b/src/shared/shadcn/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    children,
+    ...restProps
+}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+    bind:ref
+    data-slot="scroll-area-scrollbar"
+    {orientation}
+    class={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        className,
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        class="bg-border relative flex-1 rounded-full"
+    />
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/src/shared/shadcn/ui/scroll-area/scroll-area.svelte b/src/shared/shadcn/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..45f86c4
--- /dev/null
+++ b/src/shared/shadcn/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+import {
+    type WithoutChild,
+    cn,
+} from '$shared/shadcn/utils/shadcn-utils.js';
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+import { Scrollbar } from './index.js';
+
+let {
+    ref = $bindable(null),
+    viewportRef = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    scrollbarXClasses = '',
+    scrollbarYClasses = '',
+    children,
+    ...restProps
+}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+    bind:ref
+    data-slot="scroll-area"
+    class={cn('relative', className)}
+    {...restProps}
+>
+    <ScrollAreaPrimitive.Viewport
+        bind:ref={viewportRef}
+        data-slot="scroll-area-viewport"
+        class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+    >
+        {@render children?.()}
+    </ScrollAreaPrimitive.Viewport>
+    {#if orientation === 'vertical' || orientation === 'both'}
+        <Scrollbar orientation="vertical" class={scrollbarYClasses} />
+    {/if}
+    {#if orientation === 'horizontal' || orientation === 'both'}
+        <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+    {/if}
+    <ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>