diff --git a/src/App.svelte b/src/App.svelte
deleted file mode 100644
index b712e42..0000000
--- a/src/App.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-import favicon from '$shared/assets/favicon.svg';
-import './app.css';
-import Page from './routes/Page.svelte';
-</script>
-
-<svelte:head>
-    <link rel="icon" href={favicon} />
-</svelte:head>
-
-<div id="app-root">
-    <Page />
-</div>
-
-<style>
-#app-root {
-    width: 100%;
-    height: 100vh;
-}
-</style>
diff --git a/src/app/App.svelte b/src/app/App.svelte
new file mode 100644
index 0000000..92b6e0e
--- /dev/null
+++ b/src/app/App.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import Page from '$routes/Page.svelte';
+import Layout from './ui/Layout.svelte';
+</script>
+
+<Layout>
+    <Page />
+</Layout>
diff --git a/src/app.css b/src/app/styles/app.css
similarity index 100%
rename from src/app.css
rename to src/app/styles/app.css
diff --git a/src/ambient.d.ts b/src/app/types/ambient.d.ts
similarity index 100%
rename from src/ambient.d.ts
rename to src/app/types/ambient.d.ts
diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
new file mode 100644
index 0000000..531d7ac
--- /dev/null
+++ b/src/app/ui/Layout.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+import favicon from '$shared/assets/favicon.svg';
+import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
+import { AppSidebar } from '$widgets/AppSidebar';
+
+let { children } = $props();
+</script>
+
+<svelte:head>
+    <link rel="icon" href={favicon} />
+</svelte:head>
+
+<div class="app">
+    <header></header>
+
+    <Sidebar.Provider>
+        <AppSidebar />
+        <main>
+            <Sidebar.Trigger />
+            {@render children?.()}
+        </main>
+    </Sidebar.Provider>
+
+    <footer></footer>
+</div>
+
+<style>
+#app-root {
+    width: 100%;
+    height: 100vh;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 631bd81..c353493 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
+import App from '$app/App.svelte';
 import { mount } from 'svelte';
-import App from './App.svelte';
+import '$app/styles/app.css';
 
 mount(App, {
     target: document.getElementById('app')!,
diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index 0a02023..d8dbc14 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -1,10 +1,7 @@
 <script>
-import CategoryFilter from '$features/CategoryFilter/ui/CategoryFilter.svelte';
-import Button from '$shared/shadcn/ui/button/button.svelte';
 </script>
 
 <h1>Welcome to Svelte + Vite</h1>
 <p>
     Visit <a href="https://svelte.dev/docs">svelte.dev/docs</a> to read the documentation
 </p>
-<CategoryFilter />