diff --git a/apps/web/src/app.d.ts b/apps/web/src/app.d.ts
index 3ba5e57..180fa66 100644
--- a/apps/web/src/app.d.ts
+++ b/apps/web/src/app.d.ts
@@ -4,7 +4,9 @@ import PocketBase from 'pocketbase';
 declare global {
 	namespace App {
 		interface Locals {
-			pocketBase: PocketBase;
+			pb: PocketBase;
+			id: string;
+			email: string;
 		}
 		// interface Error {}
 		// interface PageData {}
diff --git a/apps/web/src/hooks.server.ts b/apps/web/src/hooks.server.ts
index df29cc2..5932e62 100644
--- a/apps/web/src/hooks.server.ts
+++ b/apps/web/src/hooks.server.ts
@@ -1,22 +1,42 @@
-import { type Handle } from '@sveltejs/kit';
+import { redirect, type Handle } from '@sveltejs/kit';
 import PocketBase from 'pocketbase';
-import { pb } from '$lib/pocketbase';
-import { PUBLIC_CLIENT_PB } from '$env/static/public';
+import { building } from '$app/environment';
+import { SERVER_PB } from '$env/static/private';
 
-/** @type {import('@sveltejs/kit').Handle} */
 export const handle: Handle = async ({ event, resolve }) => {
-	event.locals.pocketBase = new PocketBase(PUBLIC_CLIENT_PB);
+	event.locals.id = '';
+	event.locals.email = '';
+	event.locals.pb = new PocketBase(SERVER_PB);
 
-	pb.set(event.locals.pocketBase);
+	const isAuth: boolean = event.url.pathname === '/auth';
+	if (isAuth || building) {
+		event.cookies.set('pb_auth', '', { path: '/' });
+		return await resolve(event);
+	}
 
-	event.locals.pocketBase.authStore.loadFromCookie(event.request.headers.get('cookie') ?? '');
+	const pb_auth = event.request.headers.get('cookie') ?? '';
+	event.locals.pb.authStore.loadFromCookie(pb_auth);
+
+	if (!event.locals.pb.authStore.isValid) {
+		console.log('Session expired');
+		throw redirect(303, '/auth');
+	}
+	try {
+		const auth = await event.locals.pb
+			.collection('users')
+			.authRefresh<{ id: string; email: string }>();
+		event.locals.id = auth.record.id;
+		event.locals.email = auth.record.email;
+	} catch (_) {
+		throw redirect(303, '/auth');
+	}
+
+	if (!event.locals.id) {
+		throw redirect(303, '/auth');
+	}
 
 	const response = await resolve(event);
-
-	response.headers.set(
-		'set-cookie',
-		event.locals.pocketBase.authStore.exportToCookie({ secure: false })
-	);
-
+	const cookie = event.locals.pb.authStore.exportToCookie({ sameSite: 'lax' });
+	response.headers.append('set-cookie', cookie);
 	return response;
-};
+};
\ No newline at end of file
diff --git a/apps/web/src/lib/components/site/data-indicator.svelte b/apps/web/src/lib/components/site/data-indicator.svelte
index 7e9deb1..6fdf8d1 100644
--- a/apps/web/src/lib/components/site/data-indicator.svelte
+++ b/apps/web/src/lib/components/site/data-indicator.svelte
@@ -12,7 +12,7 @@
 			{'{}'}
 		</Button>
 	</Popover.Trigger>
-	<Popover.Content class="w-auto">
-		<SuperDebug label="$layout data" status={false} {data} />
+	<Popover.Content class="max-h-full max-w-auth overflow-x-scroll overflow-y-scroll text-xs">
+		<SuperDebug status={false} {data} />
 	</Popover.Content>
 </Popover.Root>
diff --git a/apps/web/src/lib/components/site/icons/logo.svelte b/apps/web/src/lib/components/site/icons/logo.svelte
index 60e545a..e595539 100644
--- a/apps/web/src/lib/components/site/icons/logo.svelte
+++ b/apps/web/src/lib/components/site/icons/logo.svelte
@@ -1,9 +1,9 @@
 <script>
 	export let colours = {
-		topleft: '#FF6C22',
-		topright: '#FF9209',
-		bottomleft: '#2B3499',
-		bottomright: '#FFD099'
+		topLeft: '#FF6C22',
+		topRight: '#FF9209',
+		bottomLeft: '#FFD099',
+		bottomRight: '#2B3499',
 	};
 </script>
 
@@ -17,8 +17,8 @@
 	stroke-linecap="round"
 	stroke-linejoin="round"
 >
-	<rect width="7" height="9" x="3" y="3" rx="1" stroke={colours.topleft} />
-	<rect width="7" height="5" x="14" y="3" rx="1" stroke={colours.topright} />
-	<rect width="7" height="9" x="14" y="12" rx="1" stroke={colours.bottomleft} />
-	<rect width="7" height="5" x="3" y="16" rx="1" stroke={colours.bottomright} />
+	<rect width="7" height="9" x="3" y="3" rx="1" stroke={colours.topLeft} />
+	<rect width="7" height="5" x="14" y="3" rx="1" stroke={colours.topRight} />
+	<rect width="7" height="5" x="3" y="16" rx="1" stroke={colours.bottomLeft} />
+	<rect width="7" height="9" x="14" y="12" rx="1" stroke={colours.bottomRight} />
 </svg>
diff --git a/apps/web/src/lib/components/site/nav/user-nav.svelte b/apps/web/src/lib/components/site/nav/user-nav.svelte
index 864e252..604ca3d 100644
--- a/apps/web/src/lib/components/site/nav/user-nav.svelte
+++ b/apps/web/src/lib/components/site/nav/user-nav.svelte
@@ -13,15 +13,15 @@
 		<DropdownMenu.Trigger asChild let:builder>
 			<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
 				<Avatar.Root class="h-9 w-9">
-					<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
-					<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
+						<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
+						<Avatar.Fallback>{user?.initials}</Avatar.Fallback>
 				</Avatar.Root>
 			</Button>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content class="w-56" align="end">
 			<DropdownMenu.Label class="font-normal">
 				<div class="flex flex-col space-y-1">
-					<p class="text-sm font-medium leading-none">{user?.name}</p>
+					<p class="text-sm font-medium leading-none">{user?.name || user?.username}</p>
 					<p class="text-xs leading-none text-muted-foreground">{user?.email}</p>
 				</div>
 			</DropdownMenu.Label>
diff --git a/apps/web/src/lib/config/nav.ts b/apps/web/src/lib/config/nav.ts
index 4867ff9..188a4ea 100644
--- a/apps/web/src/lib/config/nav.ts
+++ b/apps/web/src/lib/config/nav.ts
@@ -7,11 +7,6 @@ interface NavConfig {
 
 export const navConfig: NavConfig = {
 	mainNav: [
-		{
-			title: 'Home',
-			href: '/',
-			always: true
-		},
 		{
 			title: 'Dashboard',
 			href: '/dashboard',
diff --git a/apps/web/src/routes/(auth)/+layout.server.ts b/apps/web/src/routes/(auth)/+layout.server.ts
index 359b4bc..cfa5e18 100644
--- a/apps/web/src/routes/(auth)/+layout.server.ts
+++ b/apps/web/src/routes/(auth)/+layout.server.ts
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
 export const load = (async ({ locals }) => {
-	if (locals.pocketBase.authStore.isValid) {
+	if (locals.pb.authStore.isValid) {
 		throw redirect(303, '/');
 	}
 
diff --git a/apps/web/src/routes/(auth)/auth/+page.server.ts b/apps/web/src/routes/(auth)/auth/+page.server.ts
new file mode 100644
index 0000000..cf2133a
--- /dev/null
+++ b/apps/web/src/routes/(auth)/auth/+page.server.ts
@@ -0,0 +1,14 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+export const actions = {
+	default: async ({ request, cookies }) => {
+		const form = await request.formData();
+		const token = form.get('token');
+		if (!token || typeof token !== 'string') {
+			throw redirect(303, '/auth');
+		}
+		cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
+		throw redirect(303, '/');
+	}
+} satisfies Actions;
\ No newline at end of file
diff --git a/apps/web/src/routes/(auth)/auth/+page.svelte b/apps/web/src/routes/(auth)/auth/+page.svelte
new file mode 100644
index 0000000..3cd065e
--- /dev/null
+++ b/apps/web/src/routes/(auth)/auth/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { PUBLIC_CLIENT_PB } from '$env/static/public';
+	import PocketBase from 'pocketbase';
+
+	const pb = new PocketBase(PUBLIC_CLIENT_PB);
+
+	let form: HTMLFormElement;
+	async function login() {
+		try {
+			await pb.collection('users').authWithOAuth2({ provider: 'microsoft' });
+			const input = document.createElement('input');
+			input.type = 'hidden';
+			input.name = 'token';
+			input.value = pb.authStore.token;
+			form.appendChild(input);
+			form.submit();
+		} catch (err) {
+			console.error(err);
+		}
+	}
+</script>
+
+<form method="post" bind:this={form} />
+<button
+    on:click={login}
+	class="border rounded p-2 mt-10 bg-gray-800 text-white hover:bg-gray-700"
+>
+	Login using Microsoft
+</button>
\ No newline at end of file
diff --git a/apps/web/src/routes/(auth)/login/+page.server.ts b/apps/web/src/routes/(auth)/login/+page.server.ts
deleted file mode 100644
index e09d7c9..0000000
--- a/apps/web/src/routes/(auth)/login/+page.server.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { error, redirect } from '@sveltejs/kit';
-import type { Actions } from './$types';
-
-export const actions: Actions = {
-	login: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const body = Object.fromEntries(await request.formData());
-
-		try {
-			const email = body.email.toString();
-			const password = body.password.toString();
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
-			if (!locals.pocketBase?.authStore?.model?.verified) {
-				locals.pocketBase.authStore.clear();
-				return {
-					notVerified: true
-				};
-			}
-		} catch (err) {
-			console.log('Error: ', err);
-			throw error(500, 'Something went wrong logging in');
-		}
-
-		throw redirect(303, '/');
-	},
-	// TODO: Implement Oauth2 Auth
-	oauth2: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const body = Object.fromEntries(await request.formData());
-		const provider = body.provider.toString();
-		await locals.pocketBase.collection('users').authWithOAuth2({ provider: provider });
-	}
-};
diff --git a/apps/web/src/routes/(auth)/login/+page.svelte b/apps/web/src/routes/(auth)/login/+page.svelte
deleted file mode 100644
index 42a480b..0000000
--- a/apps/web/src/routes/(auth)/login/+page.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import * as Alert from '$lib/components/ui/alert';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { cn } from '$lib/utils';
-	import { ChevronDown } from 'radix-icons-svelte';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
-	import type { PageData } from './$types';
-	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-
-	let isLoading = false;
-	export let form;
-	export let data: PageData;
-	const { providers } = data;
-	const providersWithIcons = providers.map((provider) => ({
-		...provider,
-		/* eslint-disable  @typescript-eslint/no-explicit-any */
-		icon: (Icons as { [key: string]: any })[provider.name] || undefined
-	}));
-	let currentProvider = providersWithIcons[0];
-</script>
-
-<div class="lg:p-8">
-	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-		<div class="flex flex-col space-y-2 text-center">
-			<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
-			<p class="text-muted-foreground text-sm">
-				Enter your email and password below to log into your account
-			</p>
-		</div>
-		<div class={cn('grid gap-6')} {...$$restProps}>
-			<form
-				method="POST"
-				action="?/login"
-				use:enhance={() => {
-					isLoading = true;
-				}}
-			>
-				<div class="grid gap-2">
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="name@example.com"
-							type="email"
-							autocapitalize="none"
-							autocomplete="email"
-							autocorrect="off"
-							disabled={isLoading}
-						/>
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="password">Password</Label>
-						<Input
-							id="password"
-							name="password"
-							type="password"
-							disabled={isLoading}
-							placeholder="Password"
-						/>
-					</div>
-					<Button type="submit" disabled={isLoading}>
-						{#if isLoading}
-							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-						{/if}
-						Sign In
-					</Button>
-				</div>
-				{#if form?.notVerified}
-					<Alert.Root>
-						<Alert.Title></Alert.Title>
-						<Alert.Description>You must verify your email before you can login.</Alert.Description>
-					</Alert.Root>
-				{/if}
-			</form>
-			<form
-				method="POST"
-				action="?/oauth2"
-				use:enhance={() => {
-					isLoading = true;
-				}}
-			>
-				{#if providers.length}
-					<div class="relative">
-						<div class="absolute inset-0 flex items-center">
-							<span class="w-full border-t" />
-						</div>
-						<div class="relative flex justify-center text-xs uppercase">
-							<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
-						</div>
-					</div>
-					<div
-						class="focus-visible:ring-ring border-input hover:bg-accent hover:text-accent-foreground flex items-center justify-between whitespace-nowrap rounded-md border bg-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
-					>
-						<input type="hidden" name="provider" bind:value={currentProvider.name} />
-						<div class="flex w-full items-center justify-center space-x-2">
-							<Button
-								type="submit"
-								name={currentProvider.name}
-								variant="ghost"
-								class="w-full"
-								disabled={isLoading}
-							>
-								{#if isLoading}
-									<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-								{:else if currentProvider.icon === undefined}
-									<img
-										src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${currentProvider.name}.svg`}
-										alt={currentProvider.name}
-										class="mr-2 h-4 w-4"
-									/>
-								{:else}
-									<svelte:component this={currentProvider.icon} class="mr-2 h-4 w-4" />
-								{/if}
-								{currentProvider.displayName}
-							</Button>
-						</div>
-						{#if providers.length > 1}
-							<div class="flex items-center space-x-2">
-								<Separator orientation="vertical" class="bg-secondary h-[20px]" />
-								<div class="flex items-center space-x-2">
-									<DropdownMenu.Root>
-										<DropdownMenu.Trigger asChild let:builder>
-											<Button builders={[builder]} variant="ghost" class="px-2 shadow-none">
-												<ChevronDown class="h-4 w-4" />
-											</Button>
-										</DropdownMenu.Trigger>
-										<DropdownMenu.Content class="" align="center">
-											<DropdownMenu.Label class="sr-only">Login Providers</DropdownMenu.Label>
-											{#each providersWithIcons as provider}
-												{#if provider.name !== currentProvider.name}
-													<DropdownMenu.Item
-														class="flex justify-center"
-														on:click={() => (currentProvider = provider)}
-													>
-														{#if provider.icon === undefined}
-															<img
-																src={`${PUBLIC_CLIENT_PB}/_/images/oauth2/${provider.name}.svg`}
-																alt={provider.name}
-																class="mr-2 h-4 w-4"
-															/>
-														{:else}
-															<svelte:component this={provider.icon} class="mr-2 h-4 w-4" />
-														{/if}
-														{provider.displayName}
-													</DropdownMenu.Item>
-												{/if}
-											{/each}
-										</DropdownMenu.Content>
-									</DropdownMenu.Root>
-								</div>
-							</div>
-						{/if}
-					</div>
-				{/if}
-			</form>
-		</div>
-		<p class="text-muted-foreground px-8 text-center text-sm">
-			Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
-			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
-		</p>
-	</div>
-</div>
diff --git a/apps/web/src/routes/(auth)/logout/+server.ts b/apps/web/src/routes/(auth)/logout/+server.ts
index 44953cc..35e2806 100644
--- a/apps/web/src/routes/(auth)/logout/+server.ts
+++ b/apps/web/src/routes/(auth)/logout/+server.ts
@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 
 export const GET = ({ locals }: { locals: App.Locals }) => {
 	locals.pocketBase.authStore.clear();
-	throw redirect(303, '/login');
+	throw redirect(303, '/');
 };
diff --git a/apps/web/src/routes/(auth)/register/+page.server.ts b/apps/web/src/routes/(auth)/register/+page.server.ts
deleted file mode 100644
index dc1dbdd..0000000
--- a/apps/web/src/routes/(auth)/register/+page.server.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export const actions = {
-	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		if (locals.pocketBase.authStore.isValid) {
-			return;
-		}
-
-		const formData = await request.formData();
-
-		const name = formData.get('name');
-		const email = formData.get('email');
-		const password = formData.get('password');
-
-		try {
-			if (typeof name !== 'string') {
-				throw new Error('Name must be a string');
-			}
-
-			if (name.length === 0) {
-				throw new Error('Please enter a valid name');
-			}
-
-			if (typeof email !== 'string') {
-				throw new Error('Email must be a string');
-			}
-
-			if (email.length < 5) {
-				throw new Error('Please enter a valid e-mail address');
-			}
-
-			if (typeof password !== 'string') {
-				throw new Error('Password must be a string');
-			}
-
-			if (password.length < 8) {
-				throw new Error('Password must be at least 8 characters in length');
-			}
-
-			if (password !== formData.get('passwordConfirm')) {
-				throw new Error('Passwords do not match');
-			}
-
-			await locals.pocketBase.collection('users').create({
-				email,
-				password,
-				name,
-				passwordConfirm: password
-			});
-
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
-		} catch (error) {
-			console.error(error);
-
-			if (!(error instanceof Error)) {
-				return {
-					name,
-					email,
-					password,
-					error: 'Unknown error occured when signing up user'
-				};
-			}
-
-			return { error: error.message, name, email, password };
-		}
-
-		throw redirect(303, '/');
-	}
-};
diff --git a/apps/web/src/routes/(auth)/register/+page.svelte b/apps/web/src/routes/(auth)/register/+page.svelte
deleted file mode 100644
index 98750f1..0000000
--- a/apps/web/src/routes/(auth)/register/+page.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { cn } from '$lib/utils';
-
-	let isLoading = false;
-</script>
-
-<div class="lg:p-8">
-	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-		<div class="flex flex-col space-y-2 text-center">
-			<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
-			<p class="text-sm text-muted-foreground">Enter your details below to create a new account</p>
-		</div>
-		<div class={cn('grid gap-6')} {...$$restProps}>
-			<form
-				method="POST"
-				use:enhance={() => {
-					isLoading = true;
-				}}
-			>
-				<div class="grid gap-2">
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Name</Label>
-						<Input id="name" name="name" placeholder="Name" type="name" disabled={isLoading} />
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="name@example.com"
-							type="email"
-							autocapitalize="none"
-							autocomplete="email"
-							autocorrect="off"
-							disabled={isLoading}
-						/>
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="password">Password</Label>
-						<Input
-							id="password"
-							name="password"
-							type="password"
-							disabled={isLoading}
-							placeholder="Password"
-						/>
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="password">Confirm Password</Label>
-						<Input
-							id="password"
-							name="passwordConfirm"
-							type="password"
-							disabled={isLoading}
-							placeholder="Confirm password"
-						/>
-					</div>
-					<Button type="submit" disabled={isLoading} on:click={() => (isLoading = true)}>
-						{#if isLoading}
-							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-						{/if}
-						Sign In
-					</Button>
-				</div>
-			</form>
-			<div class="relative">
-				<div class="absolute inset-0 flex items-center">
-					<span class="w-full border-t" />
-				</div>
-				<div class="relative flex justify-center text-xs uppercase">
-					<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
-				</div>
-			</div>
-			<Button variant="outline" type="button" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{:else}
-					<Icons.microsoft class="mr-2 h-4 w-4" />
-				{/if}
-				{' '}
-				Microsoft
-			</Button>
-		</div>
-		<p class="px-8 text-center text-sm text-muted-foreground">
-			Or <a class="text-primary underline" href="/login">sign in</a> if you already have an account.<br
-			/>
-			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
-		</p>
-	</div>
-</div>
diff --git a/apps/web/src/routes/(auth)/reset-password/+page.server.ts b/apps/web/src/routes/(auth)/reset-password/+page.server.ts
deleted file mode 100644
index 949e62b..0000000
--- a/apps/web/src/routes/(auth)/reset-password/+page.server.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { error } from '@sveltejs/kit';
-
-export const actions = {
-	default: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		const body = Object.fromEntries(await request.formData());
-
-		try {
-			const email = body.email.toString();
-			await locals.pocketBase.collection('users').requestPasswordReset(email);
-			return {
-				success: true
-			};
-		} catch (err) {
-			console.log('Error: ', err);
-			throw error(500, 'Something went wrong');
-		}
-	}
-};
diff --git a/apps/web/src/routes/(auth)/reset-password/+page.svelte b/apps/web/src/routes/(auth)/reset-password/+page.svelte
deleted file mode 100644
index f81d318..0000000
--- a/apps/web/src/routes/(auth)/reset-password/+page.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { cn } from '$lib/utils';
-	import { CheckCircled } from 'radix-icons-svelte';
-	import * as Alert from '$lib/components/ui/alert';
-
-	let isLoading = false;
-	export let form;
-</script>
-
-<div class="lg:p-8">
-	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-		<div class="flex flex-col space-y-2 text-center">
-			<h1 class="text-2xl font-semibold tracking-tight">Reset password</h1>
-			<p class="text-sm text-muted-foreground">
-				We'll send you an email with a link to reset your password.
-			</p>
-		</div>
-		<div class={cn('grid gap-6')} {...$$restProps}>
-			<form
-				method="POST"
-				use:enhance={() => {
-					isLoading = true;
-					return async ({ update }) => {
-						isLoading = false;
-						update();
-					};
-				}}
-			>
-				<div class="grid gap-2">
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="name@example.com"
-							type="email"
-							autocapitalize="none"
-							autocomplete="email"
-							autocorrect="off"
-							disabled={isLoading}
-						/>
-					</div>
-					<Button type="submit" disabled={isLoading}>
-						{#if isLoading}
-							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-						{/if}
-						Sign In
-					</Button>
-				</div>
-				{#if form?.success}
-					<Alert.Root variant="default" class="mt-2">
-						<CheckCircled class="h-4 w-4" />
-						<Alert.Description>An email has been sent to reset your password.</Alert.Description>
-					</Alert.Root>
-				{/if}
-			</form>
-		</div>
-	</div>
-</div>
diff --git a/apps/web/src/routes/(dashboard)/+layout.server.ts b/apps/web/src/routes/(dashboard)/+layout.server.ts
index ec58979..f1d817e 100644
--- a/apps/web/src/routes/(dashboard)/+layout.server.ts
+++ b/apps/web/src/routes/(dashboard)/+layout.server.ts
@@ -1,7 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 
 export const load = async ({ locals }: { locals: App.Locals }) => {
-	if (!locals.pocketBase.authStore.isValid) {
+	if (!locals.pb.authStore.isValid) {
 		throw redirect(303, '/register');
 	}
 
diff --git a/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte b/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
index 3432e6e..59fe75d 100644
--- a/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
@@ -2,12 +2,6 @@
 	import { z } from 'zod';
 
 	export const accountFormSchema = z.object({
-		name: z
-			.string({
-				required_error: 'Required.'
-			})
-			.min(2, 'Name must be at least 2 characters.')
-			.max(30, 'Name must not be longer than 30 characters')
 	});
 
 	export type AccountFormSchema = typeof accountFormSchema;
@@ -31,15 +25,5 @@
 	form={data}
 	debug={dev ? true : false}
 >
-	<Form.Item>
-		<Form.Field name="name" {config}>
-			<Form.Label>Name</Form.Label>
-			<Form.Input placeholder={user?.name} />
-			<Form.Description>
-				This is the name that will be displayed on your profile and in emails.
-			</Form.Description>
-			<Form.Validation />
-		</Form.Field>
-	</Form.Item>
 	<Form.Button>Update account</Form.Button>
 </Form.Root>
diff --git a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
index d7ac350..688850a 100644
--- a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
@@ -1,6 +1,12 @@
 <script lang="ts" context="module">
 	import { z } from 'zod';
 	export const profileFormSchema = z.object({
+		name: z
+			.string({
+				required_error: 'Required.'
+			})
+			.min(2, 'Name must be at least 2 characters.')
+			.max(30, 'Name must not be longer than 30 characters'),
 		username: z
 			.string()
 			.min(2, 'Username must be at least 2 characters.')
@@ -30,8 +36,18 @@
 	class="space-y-8"
 	debug={dev ? true : false}
 >
-	<div class="grid grid-cols-[1fr,16rem] gap-4">
+	<div class="grid grid-cols-[1fr,12rem] gap-4">
 		<div>
+			<Form.Item>
+				<Form.Field name="name" {config}>
+					<Form.Label>Name</Form.Label>
+					<Form.Input placeholder={user?.name} />
+					<Form.Description>
+						This is the name that will be displayed on your profile and in emails.
+					</Form.Description>
+					<Form.Validation />
+				</Form.Field>
+			</Form.Item>
 			<Form.Item>
 				<Form.Field {config} name="username">
 					<Form.Label>Username</Form.Label>
diff --git a/apps/web/src/routes/+layout.server.ts b/apps/web/src/routes/+layout.server.ts
index acffcc6..dfe1607 100644
--- a/apps/web/src/routes/+layout.server.ts
+++ b/apps/web/src/routes/+layout.server.ts
@@ -1,22 +1,24 @@
 import type { LayoutServerLoad } from './$types';
 
-const fullNameToInitials = (fullName: string) =>
-	fullName
-		.split(' ')
-		.map((word) => word[0].toUpperCase())
-		.slice(0, 2)
-		.join('');
+const fullNameToInitials = (fullName: string) => (
+  fullName
+    .split(' ')
+    .filter(word => word)
+    .map(word => word[0].toUpperCase())
+    .slice(0, 2)
+    .join('')
+);
 
 export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals }) => {
-	const user = locals.pocketBase.authStore.model;
+	const user = locals.pb.authStore.model;
 	if (user) {
-		user.avatarUrl = locals.pocketBase.getFileUrl(user, user.avatar);
-		user.initials = fullNameToInitials(user.name);
+		user.avatarUrl = locals.pb.getFileUrl(user, user.avatar);
+		user.initials = fullNameToInitials(user.name || user.username);
 	}
 
 	return {
-		authenticated: locals.pocketBase.authStore.isValid,
+		authenticated: locals.pb.authStore.isValid,
 		user,
-		providers: (await locals.pocketBase.collection('users').listAuthMethods()).authProviders
+		authMethods: (await locals.pb.collection('users').listAuthMethods())
 	};
 };