diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index 1a0f593..fca6561 100755
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/package.json b/frontend/package.json
index fee689c..fe206ce 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -41,7 +41,7 @@
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "^0.29.0",
     "he": "^1.2.0",
-    "lucide-svelte": "^0.292.0",
+    "lucide-svelte": "^0.356.0",
     "mode-watcher": "^0.1.2",
     "nanoid": "^5.0.3",
     "node-html-parser": "^6.1.12",
diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index 2d5d959..5b114b3 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores'
-	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 { cn } from '$lib/utils'
 
-	export let email: string = ''
 	let className: string | undefined = undefined
 	export { className as class }
 
@@ -25,14 +20,6 @@
 		className,
 	)}>
 	<div>
-		<div class="flex h-20 items-center justify-between p-4">
-			<div class="flex items-center justify-start gap-4">
-				<UserIcon {email} />
-				{email}
-			</div>
-			<ThemeToggle />
-		</div>
-
 		<div class="flex flex-col gap-4 p-4">
 			{#each routes as route}
 				<Button
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 0000000..8364908
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements'
+	import { MoreHorizontal } from 'lucide-svelte'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn('flex h-9 w-9 items-center justify-center', className)}
+	{...$$restProps}>
+	<MoreHorizontal class="h-4 w-4" />
+	<span class="sr-only">More</span>
+</span>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 0000000..8e8b187
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 0000000..98ac8e4
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLAnchorElement
+		asChild?: boolean
+	}
+
+	export let href: $$Props['href'] = undefined
+	export let el: $$Props['el'] = undefined
+	export let asChild: $$Props['asChild'] = false
+	let className: $$Props['class'] = undefined
+	export { className as class }
+
+	let attrs: Record<string, unknown>
+
+	$: attrs = {
+		class: cn(
+			'transition-colors hover:text-foreground hover:cursor-pointer',
+			className,
+		),
+		href,
+		...$$restProps,
+	}
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 0000000..7f36141
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLOlAttributes & {
+		el?: HTMLOListElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn(
+		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</ol>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 0000000..c153c21
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLSpanElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	export let className: $$Props['class'] = undefined
+	export let href: $$Props['href'] = undefined
+	export { className as class }
+</script>
+
+<a
+	bind:this={el}
+	aria-disabled="true"
+	aria-current="page"
+	{href}
+	class={cn(
+		'font-normal text-foreground hover:cursor-pointer',
+		className,
+	)}
+	{...$$restProps}>
+	<slot />
+</a>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 0000000..2f8986a
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements'
+	import { ChevronRight } from 'lucide-svelte'
+	import { cn } from '$lib/utils.js'
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement
+	}
+
+	export let el: $$Props['el'] = undefined
+	let className: $$Props['class'] = undefined
+	export { className as class }
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn('[&>svg]:size-3.5', className)}
+	bind:this={el}
+	{...$$restProps}>
+	<slot>
+		<ChevronRight size={16} />
+	</slot>
+</li>
diff --git a/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte b/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 0000000..104f8b0
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLElement> & {
+		el?: HTMLElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>
diff --git a/frontend/src/lib/components/ui/breadcrumb/index.ts b/frontend/src/lib/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..dc914ec
--- /dev/null
+++ b/frontend/src/lib/components/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};
diff --git a/frontend/src/routes/(app)/+layout.server.ts b/frontend/src/routes/(app)/+layout.server.ts
index 8baca9b..b788825 100644
--- a/frontend/src/routes/(app)/+layout.server.ts
+++ b/frontend/src/routes/(app)/+layout.server.ts
@@ -3,9 +3,12 @@ import type { LayoutServerLoad } from './$types'
 export const load = (async (event) => {
 	const user = event.locals.userObject
 
+	const breadcrumbs = [{ name: 'Home', path: '/' }]
+
 	return {
 		shortener_url:
 			process.env.PUBLIC_SHORTENER_URL ?? '3000.tzgyn.com',
 		user: user,
+		breadcrumbs,
 	}
 }) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
index db573eb..38d1a68 100644
--- a/frontend/src/routes/(app)/+layout.svelte
+++ b/frontend/src/routes/(app)/+layout.svelte
@@ -6,6 +6,9 @@
 	import { Menu } from 'lucide-svelte'
 	import UserIcon from '$lib/components/UserIcon.svelte'
 	import { Separator } from '$lib/components/ui/separator'
+	import ThemeToggle from '$lib/components/theme-toggle.svelte'
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb'
+	import { page } from '$app/stores'
 
 	export let data: PageData
 
@@ -16,55 +19,96 @@
 	}
 </script>
 
-<div class="flex h-screen w-full">
-	<Sidebar email={data.user.email} class="hidden lg:flex" />
-	<div
-		class="flex h-full max-h-screen w-full flex-col overflow-hidden">
+<div class="flex h-screen w-full flex-col">
+	<div class="flex border-b">
 		<div
-			class="bg-background 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="/"
-							class="justify-start text-base">Home</Button>
-						<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}
-									onClick={closeSheet} />
+			class="flex h-20 w-full items-center justify-between gap-6 p-4">
+			<UserIcon email={data.user.email} />
+
+			<div class="w-full">
+				<Breadcrumb.Root>
+					<Breadcrumb.List>
+						{#if $page.data.breadcrumbs}
+							{#each $page.data.breadcrumbs as breadcrumb, index}
+								{#if index == $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Item>
+										<Breadcrumb.Page href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Page>
+									</Breadcrumb.Item>
+								{:else}
+									<Breadcrumb.Item>
+										<Breadcrumb.Link href={breadcrumb.path}>
+											{breadcrumb.name}
+										</Breadcrumb.Link>
+									</Breadcrumb.Item>
+								{/if}
+								{#if index != $page.data.breadcrumbs.length - 1}
+									<Breadcrumb.Separator />
+								{/if}
+							{/each}
+						{:else}
+							<Breadcrumb.Item>
+								<Breadcrumb.Link href={'/'}>Home</Breadcrumb.Link>
+							</Breadcrumb.Item>
+						{/if}
+					</Breadcrumb.List>
+				</Breadcrumb.Root>
+			</div>
+			<ThemeToggle />
+		</div>
+	</div>
+
+	<div class="flex h-full">
+		<Sidebar class="hidden lg:flex" />
+		<div
+			class="flex h-full max-h-screen w-full flex-col overflow-hidden">
+			<div
+				class="block w-full border-b bg-background 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="/"
+								class="justify-start text-base">Home</Button>
+							<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}
+										onClick={closeSheet} />
+								</div>
 							</div>
 						</div>
-					</div>
-				</Sheet.Content>
-			</Sheet.Root>
-		</div>
-		<div class="flex h-full w-full flex-col overflow-hidden">
-			<slot />
+					</Sheet.Content>
+				</Sheet.Root>
+			</div>
+			<div class="flex h-full w-full flex-col overflow-hidden">
+				<slot />
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/links/+layout.server.ts b/frontend/src/routes/(app)/links/+layout.server.ts
new file mode 100644
index 0000000..73ffb5c
--- /dev/null
+++ b/frontend/src/routes/(app)/links/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Links', path: '/links' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/projects/+layout.server.ts b/frontend/src/routes/(app)/projects/+layout.server.ts
new file mode 100644
index 0000000..9557ecb
--- /dev/null
+++ b/frontend/src/routes/(app)/projects/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Projects', path: '/projects' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad
diff --git a/frontend/src/routes/(app)/settings/+layout.server.ts b/frontend/src/routes/(app)/settings/+layout.server.ts
new file mode 100644
index 0000000..63d98cf
--- /dev/null
+++ b/frontend/src/routes/(app)/settings/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { LayoutServerLoad } from './$types'
+
+export const load = (async (event) => {
+	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+	const breadcrumbs = [
+		...parentBreadcrumbs,
+		{ name: 'Settings', path: '/settings' },
+	]
+	return { breadcrumbs }
+}) satisfies LayoutServerLoad