diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
new file mode 100644
index 00000000..29ff27db
--- /dev/null
+++ b/src/components/sidebar/index.ts
@@ -0,0 +1,9 @@
+import Sidebar from './sidebar.svelte'
+
+export type NavigationElement = {
+	name: string
+	icon: ConstructorOfATypedSvelteComponent
+	route: string
+}
+
+export { Sidebar }
diff --git a/src/components/sidebar/sidebar.svelte b/src/components/sidebar/sidebar.svelte
new file mode 100644
index 00000000..09ce2786
--- /dev/null
+++ b/src/components/sidebar/sidebar.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { NavigationElement } from '.'
+	import { page } from '$app/stores'
+	import { ThemeSelector } from '$components/ui/theme-selector'
+
+	import ChevronLeft from 'lucide-svelte/icons/chevron-left'
+	import ChevronRight from 'lucide-svelte/icons/chevron-right'
+	import { localStorageWritable } from '$lib/utils/localstorage-writable'
+
+	export let sidebarElements: NavigationElement[] = []
+
+	const collapsedSidebar = localStorageWritable('collapsedSidebar', false)
+</script>
+
+<div
+	class:collapsedSidebar={$collapsedSidebar}
+	class="duration-400 flex h-full w-80 flex-none flex-col bg-secondary text-secondary-foreground transition-all ease-in-out"
+>
+	<!-- Top Section -->
+	<div class="m-8 mb-6 mr-0 flex items-center text-2xl">
+		<div>⌘</div>
+		<div class="ml-2 overflow-hidden whitespace-nowrap" class:collapsedElement={$collapsedSidebar}>
+			Tiny-TMS
+		</div>
+		<button
+			on:click={() => ($collapsedSidebar = !$collapsedSidebar)}
+			class="ml-auto mr-2 cursor-pointer rounded-full hover:bg-primary-foreground"
+		>
+			{#if $collapsedSidebar}
+				<ChevronRight />
+			{:else}
+				<ChevronLeft />
+			{/if}
+		</button>
+	</div>
+
+	<div class="mx-4 flex-grow">
+		{#each sidebarElements as element}
+			<a
+				href={element.route}
+				class="flex cursor-pointer rounded-lg border border-transparent p-4 hover:border-primary"
+				class:selected={$page.url.pathname.endsWith(element.route)}
+			>
+				<svelte:component this={element.icon} class="min-h-6 min-w-6"></svelte:component>
+				<div
+					class="ml-2 overflow-hidden whitespace-nowrap"
+					class:collapsedElement={$collapsedSidebar}
+				>
+					{element.name}
+				</div>
+			</a>
+		{/each}
+	</div>
+
+	<div class="m-4 mt-auto flex items-center justify-between">
+		<a class="flex items-center" href="/profile">
+			<div class="ml-4 mr-2.5 min-h-8 min-w-8 rounded-full bg-yellow-300"></div>
+			<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden whitespace-nowrap">
+				My Account
+			</div>
+		</a>
+		<div class:collapsedElement={$collapsedSidebar} class="overflow-hidden">
+			<ThemeSelector />
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.collapsedElement {
+		display: none;
+	}
+
+	.collapsedSidebar {
+		@apply w-[90px];
+	}
+	.selected {
+		@apply bg-primary-foreground;
+	}
+</style>
diff --git a/src/components/ui/theme-selector/theme-selector.svelte b/src/components/ui/theme-selector/theme-selector.svelte
index 0e79ce85..5f1d04c4 100644
--- a/src/components/ui/theme-selector/theme-selector.svelte
+++ b/src/components/ui/theme-selector/theme-selector.svelte
@@ -51,7 +51,7 @@
 	</label>
 </div>
 
-<style lang="css">
+<style lang="postcss">
 	input[type='radio']:checked + label {
 		@apply border border-primary;
 	}
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index 27927f05..52167afb 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -48,5 +48,7 @@
 		</div>
 	</div>
 
-	<div class="my-auto w-1/2"><slot></slot></div>
+	<div class="my-auto w-1/2">
+		<slot />
+	</div>
 </div>
diff --git a/src/routes/(auth)/login/+page.server.ts b/src/routes/(auth)/login/+page.server.ts
index e0d0b76b..6b96a5f2 100644
--- a/src/routes/(auth)/login/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@@ -9,7 +9,7 @@ import { dev } from '$app/environment'
 
 export const load: PageServerLoad = async ({ locals: { user } }) => {
 	if (user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {
diff --git a/src/routes/(auth)/login/login-form.svelte b/src/routes/(auth)/login/login-form.svelte
index c6ab5caf..cf3641c4 100644
--- a/src/routes/(auth)/login/login-form.svelte
+++ b/src/routes/(auth)/login/login-form.svelte
@@ -14,13 +14,13 @@
 
 	const form = superForm(data, {
 		validators: zodClient(loginSchema),
-		async onUpdated({ form }) {
+		async onUpdate({ form }) {
 			if (form.message) {
 				if ($page.status >= 400) {
 					toast.error(form.message)
 				} else {
 					toast.success(form.message)
-					await goto('/guarded')
+					await goto('/projects')
 				}
 			}
 		}
diff --git a/src/routes/(auth)/signup/+page.server.ts b/src/routes/(auth)/signup/+page.server.ts
index 6044d738..02792565 100644
--- a/src/routes/(auth)/signup/+page.server.ts
+++ b/src/routes/(auth)/signup/+page.server.ts
@@ -7,7 +7,7 @@ import { redirect } from '@sveltejs/kit'
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.user) {
-		throw redirect(302, '/')
+		throw redirect(302, '/projects')
 	}
 
 	return {
diff --git a/src/routes/(authenticated)/+layout.svelte b/src/routes/(authenticated)/+layout.svelte
new file mode 100644
index 00000000..5ec61eb2
--- /dev/null
+++ b/src/routes/(authenticated)/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Sidebar } from '$components/sidebar'
+	import { page } from '$app/stores'
+</script>
+
+<div class="flex h-full">
+	<Sidebar sidebarElements={$page.data.sidebarElements} />
+	<slot />
+</div>
diff --git a/src/routes/(authenticated)/+layout.ts b/src/routes/(authenticated)/+layout.ts
new file mode 100644
index 00000000..06ddd5c1
--- /dev/null
+++ b/src/routes/(authenticated)/+layout.ts
@@ -0,0 +1,16 @@
+import List from 'lucide-svelte/icons/list'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: List
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}
diff --git a/src/routes/(authenticated)/profile/+page.svelte b/src/routes/(authenticated)/profile/+page.svelte
new file mode 100644
index 00000000..99455ed3
--- /dev/null
+++ b/src/routes/(authenticated)/profile/+page.svelte
@@ -0,0 +1 @@
+Profile
diff --git a/src/routes/(authenticated)/projects/+page.svelte b/src/routes/(authenticated)/projects/+page.svelte
new file mode 100644
index 00000000..c07db15a
--- /dev/null
+++ b/src/routes/(authenticated)/projects/+page.svelte
@@ -0,0 +1 @@
+Projects
diff --git a/src/routes/(authenticated)/projects/[id]/+layout.ts b/src/routes/(authenticated)/projects/[id]/+layout.ts
new file mode 100644
index 00000000..8c2e6c5b
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/+layout.ts
@@ -0,0 +1,40 @@
+import ArrowBigLeft from 'lucide-svelte/icons/arrow-big-left'
+import ClipboardType from 'lucide-svelte/icons/clipboard-type'
+import FileKey from 'lucide-svelte/icons/file-key'
+import Languages from 'lucide-svelte/icons/languages'
+import Settings from 'lucide-svelte/icons/settings'
+import type { LayoutLoad } from './$types'
+
+export const load: LayoutLoad = () => {
+	const sidebarElements = [
+		{
+			name: 'My Projects',
+			route: '/projects',
+			icon: ArrowBigLeft
+		},
+		{
+			name: 'Translations',
+			route: 'translations',
+			icon: ClipboardType
+		},
+		{
+			name: 'Keys',
+			route: 'keys',
+			icon: FileKey
+		},
+		{
+			name: 'Languages',
+			route: 'languages',
+			icon: Languages
+		},
+		{
+			name: 'Settings',
+			route: 'settings',
+			icon: Settings
+		}
+	]
+
+	return {
+		sidebarElements
+	}
+}
diff --git a/src/routes/(authenticated)/projects/[id]/keys/+page.svelte b/src/routes/(authenticated)/projects/[id]/keys/+page.svelte
new file mode 100644
index 00000000..0bdfd492
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/keys/+page.svelte
@@ -0,0 +1 @@
+keys
diff --git a/src/routes/(authenticated)/projects/[id]/languages/+page.svelte b/src/routes/(authenticated)/projects/[id]/languages/+page.svelte
new file mode 100644
index 00000000..eab42fea
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/languages/+page.svelte
@@ -0,0 +1 @@
+languages
diff --git a/src/routes/(authenticated)/projects/[id]/settings/+page.svelte b/src/routes/(authenticated)/projects/[id]/settings/+page.svelte
new file mode 100644
index 00000000..a01c11a4
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/settings/+page.svelte
@@ -0,0 +1 @@
+settings
diff --git a/src/routes/(authenticated)/projects/[id]/translations/+page.svelte b/src/routes/(authenticated)/projects/[id]/translations/+page.svelte
new file mode 100644
index 00000000..a9d988f7
--- /dev/null
+++ b/src/routes/(authenticated)/projects/[id]/translations/+page.svelte
@@ -0,0 +1 @@
+Translation
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 443f5841..ef0555e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <main class="h-screen w-screen">
-	<slot></slot>
+	<slot />
 
 	<Toaster />
 </main>
diff --git a/src/routes/guarded/+page.svelte b/src/routes/guarded/+page.svelte
deleted file mode 100644
index e16ce2db..00000000
--- a/src/routes/guarded/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-Hello Guarded Page