diff --git a/bun.lockb b/bun.lockb
index 286acb2..ac4a2ac 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2f881c0..33c31d9 100644
--- a/package.json
+++ b/package.json
@@ -1,49 +1,49 @@
 {
-	"name": "link-shortener-svelte",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-node": "^1.3.1",
-		"@sveltejs/kit": "^1.20.4",
-		"autoprefixer": "^10.4.14",
-		"bun-types": "^1.0.11",
-		"drizzle-kit": "^0.20.1",
-		"postcss": "^8.4.24",
-		"postcss-load-config": "^4.0.1",
-		"prettier": "^3.1.0",
-		"prettier-plugin-svelte": "^3.1.0",
-		"prettier-plugin-tailwindcss": "^0.5.7",
-		"svelte": "^4.0.5",
-		"svelte-adapter-bun": "^0.5.1",
-		"svelte-check": "^3.4.3",
-		"tailwindcss": "^3.3.2",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"argon2": "^0.31.2",
-		"bits-ui": "^0.9.8",
-		"clsx": "^2.0.0",
-		"drizzle-orm": "^0.29.0",
-		"formsnap": "^0.4.1",
-		"lucide-svelte": "^0.292.0",
-		"mode-watcher": "^0.0.7",
-		"nanoid": "^5.0.3",
-		"postgres": "^3.4.3",
-		"sveltekit-superforms": "^1.10.1",
-		"tailwind-merge": "^2.0.0",
-		"tailwind-variants": "^0.1.18",
-		"zod": "^3.22.4"
-	}
+  "name": "link-shortener-svelte",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-node": "^1.3.1",
+    "@sveltejs/kit": "^1.20.4",
+    "autoprefixer": "^10.4.14",
+    "bun-types": "^1.0.11",
+    "drizzle-kit": "^0.20.1",
+    "postcss": "^8.4.24",
+    "postcss-load-config": "^4.0.1",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
+    "svelte": "^4.0.5",
+    "svelte-adapter-bun": "^0.5.1",
+    "svelte-check": "^3.4.3",
+    "tailwindcss": "^3.3.2",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "argon2": "^0.31.2",
+    "bits-ui": "^0.9.8",
+    "clsx": "^2.0.0",
+    "drizzle-orm": "^0.29.0",
+    "formsnap": "^0.4.1",
+    "lucide-svelte": "^0.292.0",
+    "mode-watcher": "^0.0.7",
+    "nanoid": "^5.0.3",
+    "postgres": "^3.4.3",
+    "sveltekit-superforms": "^1.10.1",
+    "tailwind-merge": "^2.0.0",
+    "tailwind-variants": "^0.1.18",
+    "zod": "^3.22.4"
+  }
 }
diff --git a/src/lib/components/UserIcon.svelte b/src/lib/components/UserIcon.svelte
new file mode 100644
index 0000000..af1e72e
--- /dev/null
+++ b/src/lib/components/UserIcon.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button'
+	import * as Avatar from '$lib/components/ui/avatar'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
+	import * as AlertDialog from '$lib/components/ui/alert-dialog'
+
+	import { Loader2, User } from 'lucide-svelte'
+	import { goto } from '$app/navigation'
+
+	export let email: string = ''
+
+	let dialogOpen = false
+	let isLoading = false
+	const logout = async () => {
+		isLoading = true
+
+		await fetch('/api/logout', { method: 'post' })
+
+		isLoading = false
+		dialogOpen = false
+		goto('/login')
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		<Avatar.Root>
+			<Avatar.Image src="" alt="@shadcn" />
+			<Avatar.Fallback><User /></Avatar.Fallback>
+		</Avatar.Root>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>{email}</DropdownMenu.Label>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item on:click={() => goto('/profile')}>
+				Profile
+			</DropdownMenu.Item>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Item
+				on:click={() => (dialogOpen = true)}
+				class="text-destructive data-[highlighted]:bg-destructive">
+				Log Out
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+<AlertDialog.Root bind:open={dialogOpen}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+			<AlertDialog.Description>
+				You are about to log out of this account.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={isLoading}
+				>Cancel</AlertDialog.Cancel>
+			<Button
+				on:click={logout}
+				class="flex gap-2"
+				disabled={isLoading}>
+				{#if isLoading}
+					<Loader2 class="animate-spin" />
+				{/if}
+				Log Out
+			</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 8f31b93..79b3d83 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -1,31 +1,21 @@
 <script lang="ts">
+	import UserIcon from './UserIcon.svelte'
+
 	import { Separator } from '$lib/components/ui/separator'
 	import ThemeToggle from './theme-toggle.svelte'
 	import { Button } from '$lib/components/ui/button'
-	import * as Avatar from '$lib/components/ui/avatar'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
-	import * as AlertDialog from '$lib/components/ui/alert-dialog'
-
-	import { Loader2, User } from 'lucide-svelte'
-	import { goto } from '$app/navigation'
+	import { cn } from '$lib/utils'
 
 	export let email: string = ''
-
-	let dialogOpen = false
-	let isLoading = false
-	const logout = async () => {
-		isLoading = true
-
-		await fetch('/api/logout', { method: 'post' })
-
-		isLoading = false
-		dialogOpen = false
-		goto('/login')
-	}
+	let className: string | undefined = undefined
+	export { className as class }
 </script>
 
 <div
-	class="flex h-full min-w-[350px] flex-col justify-between border-r p-4">
+	class={cn(
+		'flex h-full min-w-[350px] flex-col justify-between border-r p-4',
+		className,
+	)}>
 	<div>
 		<div class="flex items-center justify-between pb-16">
 			<div class="text-xl font-bold">
@@ -49,55 +39,7 @@
 	<div class="flex flex-col gap-4">
 		<Separator />
 		<div class="flex items-center justify-between">
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					<Avatar.Root>
-						<Avatar.Image src="" alt="@shadcn" />
-						<Avatar.Fallback><User /></Avatar.Fallback>
-					</Avatar.Root>
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Group>
-						<DropdownMenu.Label>{email}</DropdownMenu.Label>
-						<DropdownMenu.Separator />
-						<DropdownMenu.Item on:click={() => goto('/profile')}>
-							Profile
-						</DropdownMenu.Item>
-						<DropdownMenu.Separator />
-						<DropdownMenu.Item
-							on:click={() => (dialogOpen = true)}
-							class="text-destructive data-[highlighted]:bg-destructive">
-							Log Out
-						</DropdownMenu.Item>
-					</DropdownMenu.Group>
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-			<div>
-				<AlertDialog.Root bind:open={dialogOpen}>
-					<AlertDialog.Content>
-						<AlertDialog.Header>
-							<AlertDialog.Title
-								>Are you absolutely sure?</AlertDialog.Title>
-							<AlertDialog.Description>
-								You are about to log out of this account.
-							</AlertDialog.Description>
-						</AlertDialog.Header>
-						<AlertDialog.Footer>
-							<AlertDialog.Cancel disabled={isLoading}
-								>Cancel</AlertDialog.Cancel>
-							<Button
-								on:click={logout}
-								class="flex gap-2"
-								disabled={isLoading}>
-								{#if isLoading}
-									<Loader2 class="animate-spin" />
-								{/if}
-								Log Out
-							</Button>
-						</AlertDialog.Footer>
-					</AlertDialog.Content>
-				</AlertDialog.Root>
-			</div>
+			<UserIcon {email} />
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..a156219
--- /dev/null
+++ b/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,106 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};
+
+export const sheetVariants = tv({
+	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	variants: {
+		side: {
+			top: "inset-x-0 top-0 border-b",
+			bottom: "inset-x-0 bottom-0 border-t",
+			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm"
+		}
+	},
+	defaultVariants: {
+		side: "right"
+	}
+});
+
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: "-100%",
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: "-100%",
+			duration: 300,
+			opacity: 1
+		}
+	},
+	bottom: {
+		in: {
+			y: "100%",
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			y: "100%",
+			duration: 300,
+			opacity: 1
+		}
+	},
+	left: {
+		in: {
+			x: "-100%",
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: "-100%",
+			duration: 300,
+			opacity: 1
+		}
+	},
+	right: {
+		in: {
+			x: "100%",
+			duration: 500,
+			opacity: 1
+		},
+		out: {
+			x: "100%",
+			duration: 300,
+			opacity: 1
+		}
+	}
+};
+
+export type Side = VariantProps<typeof sheetVariants>["side"];
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..4e51692
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import {
+		SheetOverlay,
+		SheetPortal,
+		sheetTransitions,
+		sheetVariants,
+		type Side
+	} from ".";
+	import { X } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+	import { fly } from "svelte/transition";
+
+	type $$Props = SheetPrimitive.ContentProps & {
+		side?: Side;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let side: $$Props["side"] = "right";
+	export { className as class };
+	export let inTransition: $$Props["inTransition"] = fly;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] =
+		sheetTransitions[side ? side : "right"]["in"];
+	export let outTransition: $$Props["outTransition"] = fly;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] =
+		sheetTransitions[side ? side : "right"]["out"];
+</script>
+
+<SheetPortal>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		{inTransition}
+		{inTransitionConfig}
+		{outTransition}
+		{outTransitionConfig}
+		class={cn(sheetVariants({ side }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..1e1a23a
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SheetPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Description>
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..36c0cca
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..b2d63db
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..054307a
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { fade } from "svelte/transition";
+
+	type $$Props = SheetPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
+		className
+	)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-portal.svelte b/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..df9e1b9
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SheetPrimitive.PortalProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..b50ea5f
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SheetPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn("text-lg font-semibold text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 67254cd..8b8820f 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,13 +1,61 @@
 <script lang="ts">
 	import Sidebar from '$lib/components/sidebar.svelte'
 	import type { PageData } from './$types'
+	import * as Sheet from '$lib/components/ui/sheet'
+	import { Button } from '$lib/components/ui/button'
+	import { Menu } from 'lucide-svelte'
+	import UserIcon from '$lib/components/UserIcon.svelte'
+	import { Separator } from '$lib/components/ui/separator'
 
 	export let data: PageData
+
+	let sheetOpen = false
+
+	const closeSheet = () => {
+		sheetOpen = false
+	}
 </script>
 
 <div class="flex h-screen w-full">
-	<Sidebar email={data.user.email} />
-	<div class="w-full p-4">
-		<slot />
+	<Sidebar email={data.user.email} class="hidden lg:flex" />
+	<div class="h-full w-full">
+		<div class="block w-full border-b px-4 py-2 lg:hidden">
+			<Sheet.Root bind:open={sheetOpen}>
+				<Sheet.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" class="p-2">
+						<Menu />
+					</Button>
+				</Sheet.Trigger>
+				<Sheet.Content side="left" class="flex flex-col">
+					<Sheet.Header class="pb-16">
+						<Sheet.Title>Shortener</Sheet.Title>
+					</Sheet.Header>
+					<div class="flex grow flex-col gap-4">
+						<Button
+							on:click={closeSheet}
+							variant="ghost"
+							href="/links"
+							class="justify-start text-base">Links</Button>
+						<Button
+							on:click={closeSheet}
+							variant="ghost"
+							href="/projects"
+							class="justify-start text-base ">Projects</Button>
+					</div>
+					<div class="flex flex-col justify-between">
+						<div></div>
+						<div class="flex flex-col gap-4">
+							<Separator />
+							<div class="flex items-center justify-between">
+								<UserIcon email={data.user.email} />
+							</div>
+						</div>
+					</div>
+				</Sheet.Content>
+			</Sheet.Root>
+		</div>
+		<div class="h-full w-full p-4">
+			<slot />
+		</div>
 	</div>
 </div>