diff --git a/bun.lockb b/bun.lockb
index 85d62b4..17d64a1 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 7024883..c97f325 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -17,6 +17,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 			throw redirect(303, '/login')
 		}
 	}
+
 	const response = await resolve(event)
 
 	return response
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
new file mode 100644
index 0000000..244ad94
--- /dev/null
+++ b/src/lib/components/sidebar.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { Separator } from '$lib/components/ui/separator'
+	import ThemeToggle from './theme-toggle.svelte'
+	import { Button } from '$lib/components/ui/button'
+</script>
+
+<div class="w-[400px] p-4 border-r h-full flex flex-col justify-between">
+	<div>
+		<div class="flex justify-between pb-16 items-center">
+			<div class="text-xl font-bold">Shortener</div>
+			<ThemeToggle />
+		</div>
+
+		<div class="pb-4">Projects</div>
+		<Separator />
+	</div>
+	<div class="flex justify-between items-center">
+		<form method="post" action="?/signout">
+			<Button variant="destructive" type="submit">Sign Out</Button>
+		</form>
+	</div>
+</div>
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..dbfb139
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..bf9127a
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index cea80d4..ff6c9f1 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	import ThemeToggle from '$lib/components/theme-toggle.svelte'
+	import Sidebar from '$lib/components/sidebar.svelte'
 </script>
 
-<ThemeToggle />
-<slot />
+<div class="w-full flex h-screen">
+	<Sidebar />
+	<div class="w-full p-4">
+		<slot />
+	</div>
+</div>
diff --git a/src/routes/(app)/+page.server.ts b/src/routes/(app)/+page.server.ts
new file mode 100644
index 0000000..719ee4c
--- /dev/null
+++ b/src/routes/(app)/+page.server.ts
@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageServerLoad, Actions } from './$types'
+
+export const load = (async () => {
+	return {}
+}) satisfies PageServerLoad
+
+export const actions = {
+	signout: async (event) => {
+		console.log('signout')
+		event.cookies.delete('token')
+		throw redirect(303, '/login')
+	},
+} satisfies Actions