diff --git a/src/routes/(protected)/admin/+page.svelte b/src/lib/api.ts
similarity index 100%
rename from src/routes/(protected)/admin/+page.svelte
rename to src/lib/api.ts
diff --git a/src/lib/components/header/index.svelte b/src/lib/components/header/index.svelte
index 38a1e88..3d56e5c 100644
--- a/src/lib/components/header/index.svelte
+++ b/src/lib/components/header/index.svelte
@@ -2,7 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { LogOut } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Toggle } from "$lib/components/ui/toggle";
+	// import { Toggle } from "$lib/components/ui/toggle"; -- TODO: Add light/dark toggle
 	import * as Avatar from "$lib/components/ui/avatar";
 	import * as Sheet from "$lib/components/ui/sheet";
 	import Logo from '$components/logo.svelte';
@@ -34,9 +34,6 @@
 				<Sheet.Content side="right">
 					<Sheet.Header>
 						<Sheet.Title>Menu</Sheet.Title>
-						<Toggle aria-label="toggle bold">
-
-						</Toggle>
 					</Sheet.Header>
 					<div class="menu">
 						<Sheet.Close asChild let:builder>
@@ -61,10 +58,12 @@
 								action="/logout"
 								method="POST"
 							>
-								<Button type="submit">
-									<LogOut class="mr-2 h-4 w-4"/>
-									Sign out
-								</Button>
+								<Sheet.Close asChild let:builder>
+									<Button builders={[builder]} type="submit">
+										<LogOut class="mr-2 h-4 w-4"/>
+										Sign out
+									</Button>
+								</Sheet.Close>
 							</form>
 						</div>
 					</div>
diff --git a/src/lib/components/ui/input/Input.svelte b/src/lib/components/ui/input/Input.svelte
deleted file mode 100644
index 40b1ac9..0000000
--- a/src/lib/components/ui/input/Input.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils";
-
-	let className: string | undefined | null = undefined;
-
-	export let value: HTMLInputAttributes["value"] = undefined;
-	export { className as class };
-</script>
-
-<input
-	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
-/>
diff --git a/src/lib/components/ui/label/Label.svelte b/src/lib/components/ui/label/Label.svelte
deleted file mode 100644
index f1f17a4..0000000
--- a/src/lib/components/ui/label/Label.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cva } from "class-variance-authority";
-	import { Label as LabelPrimitive } from "radix-svelte";
-	import { cn } from "$lib/utils";
-
-	const labelVariants = cva(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-	);
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-</script>
-
-<LabelPrimitive.Root class={cn(labelVariants(), className)} {...$$restProps}>
-	<slot />
-</LabelPrimitive.Root>
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
index 5a8bf39..2c3128c 100644
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@@ -1 +1,7 @@
-export { default as Label } from "./Label.svelte";
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..264c8fd
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/src/app.postcss b/src/lib/styles/app.postcss
similarity index 100%
rename from src/app.postcss
rename to src/lib/styles/app.postcss
diff --git a/src/routes/(protected)/admin/+layout.server.ts b/src/routes/(app)/(protected)/admin/+layout.server.ts
similarity index 100%
rename from src/routes/(protected)/admin/+layout.server.ts
rename to src/routes/(app)/(protected)/admin/+layout.server.ts
diff --git a/src/routes/(protected)/admin/+layout.svelte b/src/routes/(app)/(protected)/admin/+layout.svelte
similarity index 100%
rename from src/routes/(protected)/admin/+layout.svelte
rename to src/routes/(app)/(protected)/admin/+layout.svelte
diff --git a/src/routes/(app)/(protected)/admin/+page.svelte b/src/routes/(app)/(protected)/admin/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/(protected)/collection/+page.server.ts b/src/routes/(app)/(protected)/collection/+page.server.ts
similarity index 100%
rename from src/routes/(protected)/collection/+page.server.ts
rename to src/routes/(app)/(protected)/collection/+page.server.ts
diff --git a/src/routes/(protected)/collection/+page.svelte b/src/routes/(app)/(protected)/collection/+page.svelte
similarity index 100%
rename from src/routes/(protected)/collection/+page.svelte
rename to src/routes/(app)/(protected)/collection/+page.svelte
diff --git a/src/routes/(protected)/list/+layout.server.ts b/src/routes/(app)/(protected)/list/+layout.server.ts
similarity index 100%
rename from src/routes/(protected)/list/+layout.server.ts
rename to src/routes/(app)/(protected)/list/+layout.server.ts
diff --git a/src/routes/(protected)/list/+layout.svelte b/src/routes/(app)/(protected)/list/+layout.svelte
similarity index 100%
rename from src/routes/(protected)/list/+layout.svelte
rename to src/routes/(app)/(protected)/list/+layout.svelte
diff --git a/src/routes/(protected)/list/[id]/+page.server.ts b/src/routes/(app)/(protected)/list/[id]/+page.server.ts
similarity index 100%
rename from src/routes/(protected)/list/[id]/+page.server.ts
rename to src/routes/(app)/(protected)/list/[id]/+page.server.ts
diff --git a/src/routes/(protected)/list/[id]/+page.svelte b/src/routes/(app)/(protected)/list/[id]/+page.svelte
similarity index 100%
rename from src/routes/(protected)/list/[id]/+page.svelte
rename to src/routes/(app)/(protected)/list/[id]/+page.svelte
diff --git a/src/routes/(protected)/profile/+page.server.ts b/src/routes/(app)/(protected)/profile/+page.server.ts
similarity index 100%
rename from src/routes/(protected)/profile/+page.server.ts
rename to src/routes/(app)/(protected)/profile/+page.server.ts
diff --git a/src/routes/(protected)/profile/+page.svelte b/src/routes/(app)/(protected)/profile/+page.svelte
similarity index 95%
rename from src/routes/(protected)/profile/+page.svelte
rename to src/routes/(app)/(protected)/profile/+page.svelte
index c6ffc48..4696a1e 100644
--- a/src/routes/(protected)/profile/+page.svelte
+++ b/src/routes/(app)/(protected)/profile/+page.svelte
@@ -3,8 +3,8 @@
 	//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import { userSchema } from '$lib/config/zod-schemas';
 	import { AlertTriangle } from 'lucide-svelte';
-	import Label from '$components/ui/label/Label.svelte';
-	import Input from '$components/ui/input/Input.svelte';
+	import { Label } from '$components/ui/label';
+	import { Input } from '$components/ui/input';
 	import { Button } from '$components/ui/button';
 	export let data;
 
diff --git a/src/routes/(protected)/wishlist/+page.server.ts b/src/routes/(app)/(protected)/wishlist/+page.server.ts
similarity index 100%
rename from src/routes/(protected)/wishlist/+page.server.ts
rename to src/routes/(app)/(protected)/wishlist/+page.server.ts
diff --git a/src/routes/(protected)/wishlist/+page.svelte b/src/routes/(app)/(protected)/wishlist/+page.svelte
similarity index 100%
rename from src/routes/(protected)/wishlist/+page.svelte
rename to src/routes/(app)/(protected)/wishlist/+page.svelte
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..d0bd6df
--- /dev/null
+++ b/src/routes/(app)/+layout.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+	import 'iconify-icon';
+	import Transition from '$lib/components/transition/index.svelte';
+	import Header from '$lib/components/header/index.svelte';
+	import Footer from '$lib/components/footer.svelte';
+
+	// $: {
+	// 	if ($navigating) {
+	// 		debounce(() => {
+	// 			boredState.update((n) => ({ ...n, loading: true }));
+	// 		}, 250);
+	// 	}
+	// 	if (!$navigating) {
+	// 		boredState.update((n) => ({ ...n, loading: false }));
+	// 	}
+	// }
+
+	// $: isOpen = $boredState?.dialog?.isOpen;
+
+	// if (browser) {
+	// 	const collator = new Intl.Collator('en');
+
+	// 	let collectionEmpty = $collectionStore.length === 0 || false;
+	// 	let wishlistEmpty = $wishlistStore.length === 0 || false;
+	// 	if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
+	// 		const wishlist: SavedGameType[] = JSON.parse(localStorage.wishlist);
+	// 		if (wishlist?.length !== 0) {
+	// 			wishlist.sort((a, b) => collator.compare(a.name, b.name));
+	// 			for (const item of wishlist) {
+	// 				if (!item?.searchTerms) {
+	// 					item.searchTerms = `${item?.name?.toLowerCase()}`;
+	// 				}
+	// 				if (!item?.includeInRandom) {
+	// 					item.includeInRandom = false;
+	// 				}
+	// 			}
+	// 			wishlistStore.addAll(wishlist);
+	// 		}
+	// 	}
+	// 	if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
+	// 		const collection: SavedGameType[] = JSON.parse(localStorage.collection);
+	// 		if (collection?.length !== 0) {
+	// 			collection.sort((a, b) => collator.compare(a.name, b.name));
+	// 			for (const item of collection) {
+	// 				if (!item?.searchTerms) {
+	// 					item.searchTerms = `${item?.name?.toLowerCase()}`;
+	// 				}
+	// 			}
+	// 			collectionStore.addAll(collection);
+	// 		}
+	// 	}
+	// }
+
+	// const dev = process.env.NODE_ENV !== 'production';
+
+	export let data;
+	// $: ({ user } = data);
+
+	// const flash = getFlash(page, {
+	// 	clearAfterMs: 6000
+	// });
+	// let flashType;
+	// let flashMessage;
+	// $: flashType = $flash?.type;
+	// $: flashMessage = $flash?.message;
+
+	// if ($flash && flashType && flashMessage) {
+	// 	switch (flashType) {
+	// 		case 'success':
+	// 			toast.success(flashMessage);
+	// 			break;
+	// 		case 'error':
+	// 			toast.error(flashMessage);
+	// 			break;
+	// 		default:
+	// 			toast.error(flashMessage);
+	// 	}
+	// }
+
+	// onMount(() => {
+	// 	// set the theme to the user's active theme
+	// 	$theme = user?.theme || 'system';
+	// 	document.querySelector('html')?.setAttribute('data-theme', $theme);
+	// });
+
+	// flash.subscribe(($flash) => {
+	// 	if (!$flash) return;
+
+	// 	if ($flash.type == 'success') {
+	// 		toast.success($flash.message);
+	// 	} else {
+	// 		toast.error($flash.message, {
+	// 			duration: 5000
+	// 		});
+	// 	}
+
+	// 	// Clearing the flash message could sometimes
+	// 	// be required here to avoid double-toasting.
+	// 	flash.set(undefined);
+	// });
+</script>
+
+<!-- {#if !dev}
+	<Analytics />
+{/if} -->
+
+<!-- <div class="wrapper"> -->
+	<Header user={data.user} />
+
+	<main>
+		<Transition url={data.url} transition={{ type: 'page' }}>
+			<slot />
+		</Transition>
+	</main>
+
+	<Footer />
+<!-- </div> -->
+
+<!-- <Toaster /> -->
+
+<!-- {#if $boredState?.loading}
+	<Portal>
+			<div class="loading">
+				<Loading></Loading>
+				<h3>Loading...</h3>
+			</div>
+		<div class="background"></div>
+	</Portal>
+{/if}
+{#if isOpen}
+	<div class="container">
+		<svelte:component this={$boredState?.dialog?.content}></svelte:component>
+	</div>
+{/if} -->
+
+<style lang="postcss">
+	/* .flash {
+		display: inline-block;
+		position: absolute;
+		place-items: center;
+		padding: 0.5rem;
+		border-radius: 2px;
+	} */
+
+	.loading {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		display: grid;
+		place-items: center;
+		gap: 1rem;
+
+		& h3 {
+			color: white;
+		}
+	}
+
+	.background {
+		background: black;
+		opacity: 0.8;
+		cursor: none;
+		inset: 0;
+		position: fixed;
+		z-index: 100;
+	}
+
+	/* .wrapper {
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		min-height: 100vh;
+	} */
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		max-width: 850px;
+		margin: 0 auto;
+		padding: 2rem 0rem;
+		max-width: 80vw;
+
+		@media (min-width: 1600px) {
+			max-width: 70vw;
+		}
+
+		box-sizing: border-box;
+	}
+
+	:global(.dialog-overlay) {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		background-color: rgb(0 0 0);
+		opacity: 0.8;
+	}
+</style>
diff --git a/src/routes/+page.server.ts b/src/routes/(app)/+page.server.ts
similarity index 100%
rename from src/routes/+page.server.ts
rename to src/routes/(app)/+page.server.ts
diff --git a/src/routes/+page.svelte b/src/routes/(app)/+page.svelte
similarity index 100%
rename from src/routes/+page.svelte
rename to src/routes/(app)/+page.svelte
diff --git a/src/routes/about/+page.svelte b/src/routes/(app)/about/+page.svelte
similarity index 100%
rename from src/routes/about/+page.svelte
rename to src/routes/(app)/about/+page.svelte
diff --git a/src/routes/about/+page.ts b/src/routes/(app)/about/+page.ts
similarity index 100%
rename from src/routes/about/+page.ts
rename to src/routes/(app)/about/+page.ts
diff --git a/src/routes/game/[id]/+error.svelte b/src/routes/(app)/game/[id]/+error.svelte
similarity index 100%
rename from src/routes/game/[id]/+error.svelte
rename to src/routes/(app)/game/[id]/+error.svelte
diff --git a/src/routes/game/[id]/+page.server.ts b/src/routes/(app)/game/[id]/+page.server.ts
similarity index 96%
rename from src/routes/game/[id]/+page.server.ts
rename to src/routes/(app)/game/[id]/+page.server.ts
index ae61aea..2af373e 100644
--- a/src/routes/game/[id]/+page.server.ts
+++ b/src/routes/(app)/game/[id]/+page.server.ts
@@ -1,6 +1,5 @@
 import { error } from '@sveltejs/kit';
 import prisma from '$lib/prisma.js';
-import { boardGameApi } from '../../api';
 
 export const load = async ({ params, setHeaders, locals }) => {
 	try {
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/(app)/game/[id]/+page.svelte
similarity index 100%
rename from src/routes/game/[id]/+page.svelte
rename to src/routes/(app)/game/[id]/+page.svelte
diff --git a/src/routes/search/+error.svelte b/src/routes/(app)/search/+error.svelte
similarity index 100%
rename from src/routes/search/+error.svelte
rename to src/routes/(app)/search/+error.svelte
diff --git a/src/routes/search/+page.server.ts b/src/routes/(app)/search/+page.server.ts
similarity index 100%
rename from src/routes/search/+page.server.ts
rename to src/routes/(app)/search/+page.server.ts
diff --git a/src/routes/search/+page.svelte b/src/routes/(app)/search/+page.svelte
similarity index 100%
rename from src/routes/search/+page.svelte
rename to src/routes/(app)/search/+page.svelte
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
new file mode 100644
index 0000000..8686d03
--- /dev/null
+++ b/src/routes/(auth)/+layout.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { Button } from "$lib/components/ui/button";
+	import Logo from "$lib/components/logo.svelte";
+
+	$: link = {
+		label: $page.url.pathname === "/sign-up" ? "Login" : "Sign up",
+		href: $page.url.pathname === "/sign-up" ? "/login" : "/sign-up"
+	};
+
+	$: console.log($page.url.pathname);
+</script>
+
+<div class="container">
+	<Button
+		href={$page.url.pathname === "/sign-up" ? "/login" : "/sign-up"}
+		variant="ghost"
+		class="auth-button"
+	>
+		{#if $page.url.pathname === "/sign-up"}
+			Login
+		{:else}
+			Sign up
+		{/if}
+	</Button>
+	<div class="auth-marketing">
+		<div
+			class="image"
+			style="
+				background-image:
+					url(https://images.unsplash.com/photo-1588591795084-1770cb3be374?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+		/>
+		<a href="/" class="logo">
+			<div class="logo-image">
+				<Logo />
+			</div>
+			Bored Game
+		</a>
+		<div class="quote-wrapper">
+			<blockquote class="quote">
+				<p>
+					"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sounds like you then Bored Game is your new best friend."
+				</p>
+				<footer>Bradley</footer>
+			</blockquote>
+		</div>
+	</div>
+
+	<div class="auth-form">
+		<slot />
+	</div>
+</div>
+
+<style lang="postcss">
+	.container {
+		/* display: none;
+		position: relative; */
+		display: flex;
+		align-content: center;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		min-height: 100vh;
+
+		@media (min-width: 768px) {
+			display: grid
+		}
+		@media (min-width: 1024px) {
+			padding-left: 0;
+			padding-right: 0;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			max-width: none;
+		}
+
+		.auth-marketing {
+			display: none;
+			position: relative;
+			padding: 2.5rem;
+			flex-direction: column;
+			height: 100%;
+			color: #ffffff;
+
+			@media (min-width: 1024px) {
+				display: flex;
+			}
+
+			.image {
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				background-size: cover;
+			}
+
+			.logo {
+				display: flex;
+				position: relative;
+				z-index: 20;
+				gap: 0.5rem;
+				align-items: center;
+				font-size: 1.125rem;
+				line-height: 1.75rem;
+				font-weight: 500;
+				transition-property: color, background-color, border-color,text-decoration-color, fill, stroke;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+				transition-duration: 300ms;
+
+				&:hover {
+					color: hsl(var(--muted-foreground));
+				}
+
+				.logo-image {
+					width: 2rem;
+					height: 2rem;
+				}
+			}
+
+			.quote-wrapper {
+				position: relative;
+				z-index: 20;
+				margin-top: auto;
+
+				.quote {
+					margin-top: 0.5rem;
+
+					p {
+						font-size: 1.125rem;
+						line-height: 1.75rem;
+					}
+				}
+
+				footer {
+					font-size: 0.875rem;
+					line-height: 1.25rem;
+				}
+			}
+		}
+
+		.auth-form {
+			@media (min-width: 1024px) {
+				padding: 2rem;
+			}
+		}
+	}
+
+	:global(.auth-button) {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		@media (min-width: 768px) {
+			top: 2rem;
+			right: 2rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index eb9e50f..f86cafe 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -46,18 +46,16 @@
 
 <div class="login">
 	<form method="POST" use:enhance>
-		<div class="grid w-full max-w-sm items-center gap-2">
-			<h2
-				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-			>
-				Log into your account
-			</h2>
-			<Label for="username">Username</Label>
-			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} required />
-			<Label for="password">Password</Label>
-			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} required />
-			<Button type="submit">Sign In</Button>
-		</div>
+		<h2
+			class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+		>
+			Log into your account
+		</h2>
+		<Label for="username">Username</Label>
+		<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} required />
+		<Label for="password">Password</Label>
+		<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} required />
+		<Button type="submit">Login</Button>
 	</form>
 	{#if $errors._errors}
 		<Alert.Root variant="destructive">
@@ -68,11 +66,36 @@
 			</Alert.Description>
 		</Alert.Root>
 	{/if}
+	<p class="px-8 text-center text-sm text-muted-foreground">
+		By clicking continue, you agree to our
+		<a href="/terms-of-service" class="underline underline-offset-4 hover:text-primary">
+			Terms of Service
+		</a>
+		and
+		<a href="/privacy" class="underline underline-offset-4 hover:text-primary"> Privacy Policy </a>
+		.
+	</p>
 </div>
 
 <style lang="postcss">
 	.login {
-		display: grid;
-		gap: 2rem;
+		display: flex;
+		margin-top: 1.5rem;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+		margin-right: auto;
+		margin-left: auto;
+
+		@media (min-width: 640px) {
+			width: 350px;
+		}
+
+		form {
+			display: grid;
+			gap: 0.5rem;
+			align-items: center;
+			max-width: 24rem;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/routes/(auth)/sign-up/+page.svelte b/src/routes/(auth)/sign-up/+page.svelte
index 0dc6874..9f79a1d 100644
--- a/src/routes/(auth)/sign-up/+page.svelte
+++ b/src/routes/(auth)/sign-up/+page.svelte
@@ -5,8 +5,8 @@
 	import toast from 'svelte-french-toast';
 	import { ChevronsUpDown } from "lucide-svelte";
 	import { Button } from '$components/ui/button';
-  import { Input } from '$components/ui/input';
-	import Label from '$components/ui/label/Label.svelte';
+	import { Label } from '$components/ui/label';
+	import { Input } from '$components/ui/input';
 	import { signUpSchema } from '$lib/config/zod-schemas.js';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as Alert from '$lib/components/ui/alert';
@@ -43,82 +43,113 @@
 	<title>Bored Game | Sign Up</title>
 </svelte:head>
 
-<div class="page">
+<div class="sign-up">
 	<form method="POST" action="/sign-up" use:enhance>
-		<div class="grid w-full max-w-sm items-center gap-2.5">
-			<h2
-				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-			>
-				Signup for an account
-			</h2>
-			<Label for="username">Username</Label>
-			<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
-			{#if $errors.username}
-				<p class="text-sm text-destructive">{$errors.username}</p>
-			{/if}
-			<Label for="password">Password</Label>
-			<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
-			{#if $errors.password}
-				<p class="text-sm text-destructive">{$errors.password}</p>
-			{/if}
-			<Label for="confirm_password">Confirm Password</Label>
-			<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
-			{#if $errors.confirm_password}
-				<p class="text-sm text-destructive">{$errors.confirm_password}</p>
-			{/if}
-			<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
-				<div>
-					Optional Fields:
-					<Collapsible.Trigger asChild let:builder>
-						<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
-							<ChevronsUpDown class="h-4 w-4" />
-							<span class="sr-only">Toggle</span>
-						</Button>
-					</Collapsible.Trigger>
-				</div>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="email">Email</Label>
-					<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
-					{#if $errors.email}
-						<p class="text-sm text-destructive">{$errors.email}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="firstName">First Name</Label>
-					<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-					{#if $errors.firstName}
-						<p class="text-sm text-destructive">{$errors.firstName}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="firstName">Last Name</Label>
-					<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-					{#if $errors.lastName}
-						<p class="text-sm text-destructive">{$errors.lastName}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-			</Collapsible.Root>
-			<div class="grid grid-cols-2">
-				<Button type="submit">Signup</Button>
-				<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
+		<h2>Signup for an account</h2>
+		<Label for="username">Username</Label>
+		<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
+		{#if $errors.username}
+			<p class="text-sm text-destructive">{$errors.username}</p>
+		{/if}
+		<Label for="password">Password</Label>
+		<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
+		{#if $errors.password}
+			<p class="text-sm text-destructive">{$errors.password}</p>
+		{/if}
+		<Label for="confirm_password">Confirm Password</Label>
+		<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
+		{#if $errors.confirm_password}
+			<p class="text-sm text-destructive">{$errors.confirm_password}</p>
+		{/if}
+		<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
+			<div>
+				Optional Fields:
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
+						<ChevronsUpDown class="h-4 w-4" />
+						<span class="sr-only">Toggle</span>
+					</Button>
+				</Collapsible.Trigger>
 			</div>
-			{#if !$form.email}
-				<Alert.Root>
-					<Alert.Title level="h3">Heads up!</Alert.Title>
-					<Alert.Description>
-						Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
-					</Alert.Description>
-				</Alert.Root>
-			{/if}
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="email">Email</Label>
+				<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
+				{#if $errors.email}
+					<p class="text-sm text-destructive">{$errors.email}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="firstName">First Name</Label>
+				<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
+				{#if $errors.firstName}
+					<p class="text-sm text-destructive">{$errors.firstName}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="firstName">Last Name</Label>
+				<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
+				{#if $errors.lastName}
+					<p class="text-sm text-destructive">{$errors.lastName}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+		</Collapsible.Root>
+		<div class="grid grid-cols-2">
+			<Button type="submit">Signup</Button>
+			<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
 		</div>
+		{#if !$form.email}
+			<Alert.Root>
+				<Alert.Title level="h3">Heads up!</Alert.Title>
+				<Alert.Description>
+					Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
+				</Alert.Description>
+			</Alert.Root>
+		{/if}
   </form>
 </div>
 
-<style scoped>
+<style lang="postcss">
+	.sign-up {
+		display: flex;
+		margin-top: 1.5rem;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+		margin-right: auto;
+		margin-left: auto;
+
+		@media (min-width: 640px) {
+			width: 350px;
+		}
+
+		form {
+			display: grid;
+			gap: 0.5rem;
+			align-items: center;
+			max-width: 24rem;
+
+			h2:first-child {
+				margin-top: 0;
+			}
+
+			h2 {
+				padding-bottom: 0.5rem;
+				border-bottom-width: 1px;
+				font-size: 1.875rem;
+				line-height: 2.25rem;
+				font-weight: 600;
+				letter-spacing: -0.025em;
+				transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+				transition-duration: 300ms;
+				scroll-margin: 5rem;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4ec91ac..ee669eb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,70 +1,14 @@
 <script lang="ts">
-	import "../app.postcss";
+	import "$lib/styles/app.postcss";
 	import { onMount } from "svelte";
 	import { getFlash } from 'sveltekit-flash-message/client';
 	import toast, { Toaster } from 'svelte-french-toast';
   import { navigating, page } from '$app/stores';
-	import { browser } from '$app/environment';
 	import debounce from 'just-debounce-it';
 	import 'iconify-icon';
-	import Transition from '$lib/components/transition/index.svelte';
 	import Analytics from '$lib/components/analytics.svelte';
-	import Header from '$lib/components/header/index.svelte';
-	import Footer from '$lib/components/footer.svelte';
-	import Loading from '$lib/components/loading.svelte';
-	import Portal from '$lib/Portal.svelte';
 	import { boredState } from '$lib/stores/boredState';
-	import { collectionStore } from '$lib/stores/collectionStore';
-	import { wishlistStore } from '$lib/stores/wishlistStore';
 	import { theme } from '$state/theme';
-	import type { SavedGameType } from '$lib/types';
-
-	$: {
-		if ($navigating) {
-			debounce(() => {
-				boredState.update((n) => ({ ...n, loading: true }));
-			}, 250);
-		}
-		if (!$navigating) {
-			boredState.update((n) => ({ ...n, loading: false }));
-		}
-	}
-
-	$: isOpen = $boredState?.dialog?.isOpen;
-
-	if (browser) {
-	const collator = new Intl.Collator('en');
-
-	let collectionEmpty = $collectionStore.length === 0 || false;
-	let wishlistEmpty = $wishlistStore.length === 0 || false;
-	if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
-		const wishlist: SavedGameType[] = JSON.parse(localStorage.wishlist);
-		if (wishlist?.length !== 0) {
-			wishlist.sort((a, b) => collator.compare(a.name, b.name));
-			for (const item of wishlist) {
-				if (!item?.searchTerms) {
-					item.searchTerms = `${item?.name?.toLowerCase()}`;
-				}
-				if (!item?.includeInRandom) {
-					item.includeInRandom = false;
-				}
-			}
-			wishlistStore.addAll(wishlist);
-		}
-	}
-	if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
-		const collection: SavedGameType[] = JSON.parse(localStorage.collection);
-		if (collection?.length !== 0) {
-			collection.sort((a, b) => collator.compare(a.name, b.name));
-			for (const item of collection) {
-				if (!item?.searchTerms) {
-					item.searchTerms = `${item?.name?.toLowerCase()}`;
-				}
-			}
-			collectionStore.addAll(collection);
-		}
-	}
-}
 
 	const dev = process.env.NODE_ENV !== 'production';
 
@@ -79,18 +23,18 @@
 	$: flashType = $flash?.type;
 	$: flashMessage = $flash?.message;
 
-	// if ($flash && flashType && flashMessage) {
-	// 	switch (flashType) {
-	// 		case 'success':
-	// 			toast.success(flashMessage);
-	// 			break;
-	// 		case 'error':
-	// 			toast.error(flashMessage);
-	// 			break;
-	// 		default:
-	// 			toast.error(flashMessage);
-	// 	}
-	// }
+	$: {
+		if ($navigating) {
+			debounce(() => {
+				boredState.update((n) => ({ ...n, loading: true }));
+			}, 250);
+		}
+		if (!$navigating) {
+			boredState.update((n) => ({ ...n, loading: false }));
+		}
+	}
+
+	$: isOpen = $boredState?.dialog?.isOpen;
 
 	onMount(() => {
 		// set the theme to the user's active theme
@@ -119,95 +63,17 @@
 	<Analytics />
 {/if}
 
-<div class="wrapper">
-	<Header user={data.user} />
-
-	<main>
-		<Transition url={data.url} transition={{ type: 'page' }}>
-			<slot />
-		</Transition>
-	</main>
-
-	<Footer />
+<div class="layout">
+	<slot />
 </div>
 
 <Toaster />
 
-{#if $boredState?.loading}
-	<Portal>
-			<div class="loading">
-				<Loading></Loading>
-				<h3>Loading...</h3>
-			</div>
-		<div class="background"></div>
-	</Portal>
-{/if}
-{#if isOpen}
-	<div class="container">
-		<svelte:component this={$boredState?.dialog?.content}></svelte:component>
-	</div>
-{/if}
-
 <style lang="postcss">
-	.flash {
-		display: inline-block;
-		position: absolute;
-		place-items: center;
-		padding: 0.5rem;
-		border-radius: 2px;
-	}
-
-	.loading {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 101;
-		display: grid;
-		place-items: center;
-		gap: 1rem;
-
-		& h3 {
-			color: white;
-		}
-	}
-
-	.background {
-		background: black;
-		opacity: 0.8;
-		cursor: none;
-		inset: 0;
-		position: fixed;
-		z-index: 100;
-	}
-
-	.wrapper {
-		display: grid;
-		grid-template-rows: auto 1fr auto;
+	.layout {
+		display: flex;
+		position: relative;
+		flex-direction: column;
 		min-height: 100vh;
 	}
-
-	main {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		max-width: 850px;
-		margin: 0 auto;
-		padding: 2rem 0rem;
-		max-width: 80vw;
-
-		@media (min-width: 1600px) {
-			max-width: 70vw;
-		}
-
-		box-sizing: border-box;
-	}
-
-	:global(.dialog-overlay) {
-		position: fixed;
-		inset: 0;
-		z-index: 100;
-		background-color: rgb(0 0 0);
-		opacity: 0.8;
-	}
-</style>
+</style>
\ No newline at end of file
diff --git a/src/routes/api.ts b/src/routes/api.ts
deleted file mode 100644
index d4aa024..0000000
--- a/src/routes/api.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
-import { URLSearchParams } from 'url';
-
-const base = 'https://api.boardgameatlas.com/api';
-
-export function boardGameApi(
-	method: string,
-	resource: string,
-	queryParams: Record<string, string>,
-	data?: Record<string, unknown>
-) {
-	// console.log('queryParams', queryParams);
-	queryParams.client_id = BOARD_GAME_ATLAS_CLIENT_ID;
-	const urlQueryParams = new URLSearchParams(queryParams);
-	const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
-	return fetch(url, {
-		method,
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		body: data && JSON.stringify(data)
-	});
-}