diff --git a/apps/web/src/app.d.ts b/apps/web/src/app.d.ts
index 09e8ff8..3ba5e57 100644
--- a/apps/web/src/app.d.ts
+++ b/apps/web/src/app.d.ts
@@ -5,7 +5,6 @@ declare global {
 	namespace App {
 		interface Locals {
 			pocketBase: PocketBase;
-			user: object;
 		}
 		// interface Error {}
 		// interface PageData {}
diff --git a/apps/web/src/app.html b/apps/web/src/app.html
index 50bf0af..8e74737 100644
--- a/apps/web/src/app.html
+++ b/apps/web/src/app.html
@@ -21,4 +21,4 @@
 			%sveltekit.body%
 		</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/apps/web/src/app.pcss b/apps/web/src/app.pcss
index 671c1fb..d6dcc30 100644
--- a/apps/web/src/app.pcss
+++ b/apps/web/src/app.pcss
@@ -3,49 +3,49 @@
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 72.2% 50.6%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 72.2% 50.6%;
-  }
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+		--primary: 0 72.2% 50.6%;
+		--primary-foreground: 0 85.7% 97.3%;
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+		--ring: 0 72.2% 50.6%;
+		--radius: 0.5rem;
+	}
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 72.2% 50.6%;
+		--primary-foreground: 0 85.7% 97.3%;
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+		--ring: 0 72.2% 50.6%;
+	}
 }
 
 @layer base {
diff --git a/apps/web/src/hooks.server.ts b/apps/web/src/hooks.server.ts
index 5d8ff7c..df29cc2 100644
--- a/apps/web/src/hooks.server.ts
+++ b/apps/web/src/hooks.server.ts
@@ -1,4 +1,4 @@
-import { redirect, type Handle } from '@sveltejs/kit';
+import { type Handle } from '@sveltejs/kit';
 import PocketBase from 'pocketbase';
 import { pb } from '$lib/pocketbase';
 import { PUBLIC_CLIENT_PB } from '$env/static/public';
@@ -10,18 +10,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	pb.set(event.locals.pocketBase);
 
 	event.locals.pocketBase.authStore.loadFromCookie(event.request.headers.get('cookie') ?? '');
-	// try {
-	// 	//refresh the auth if it is valid
-	// 	if (!event.locals.pocketBase.authStore.isValid)
-	// 		await event.locals.pocketBase
-	// 			.collection('users')
-	// 			.authRefresh<{ id: string; email: string }>();
-	// 	//spread the model to locals.user to be available in all pages
-	// 	event.locals.user = { ...event.locals.pocketBase.authStore.model };
-	// } catch (err) {
-	// 	console.log(err, 'error in hooks');
-	// 	event.locals.pocketBase.authStore.clear();
-	// }
+
 	const response = await resolve(event);
 
 	response.headers.set(
diff --git a/apps/web/src/lib/components/site/data-indicator.svelte b/apps/web/src/lib/components/site/data-indicator.svelte
new file mode 100644
index 0000000..7e9deb1
--- /dev/null
+++ b/apps/web/src/lib/components/site/data-indicator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
+
+	export let data: object;
+</script>
+
+<Popover.Root>
+	<Popover.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="ghost" size="icon" class="block">
+			{'{}'}
+		</Button>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto">
+		<SuperDebug label="$layout data" status={false} {data} />
+	</Popover.Content>
+</Popover.Root>
diff --git a/apps/web/src/lib/components/site/icons/index.ts b/apps/web/src/lib/components/site/icons/index.ts
index 7f5bb39..23c24ab 100644
--- a/apps/web/src/lib/components/site/icons/index.ts
+++ b/apps/web/src/lib/components/site/icons/index.ts
@@ -15,5 +15,5 @@ export const Icons = {
 	vercel: VercelLogo,
 	linkedIn: LinkedinLogo,
 	spinner: Loader2,
-	arrowRight: ArrowRight,
+	arrowRight: ArrowRight
 };
diff --git a/apps/web/src/lib/components/site/icons/logo.svelte b/apps/web/src/lib/components/site/icons/logo.svelte
index 4e83575..f977313 100644
--- a/apps/web/src/lib/components/site/icons/logo.svelte
+++ b/apps/web/src/lib/components/site/icons/logo.svelte
@@ -1,7 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-   stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <rect width="7" height="9" x="3" y="3" rx="1" stroke="#FF6C22" />
-  <rect width="7" height="5" x="14" y="3" rx="1" stroke="#FF9209" />
-  <rect width="7" height="9" x="14" y="12" rx="1" stroke="#2B3499" />
-  <rect width="7" height="5" x="3" y="16" rx="1" stroke="#FFD099" />
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<rect width="7" height="9" x="3" y="3" rx="1" stroke="#FF6C22" />
+	<rect width="7" height="5" x="14" y="3" rx="1" stroke="#FF9209" />
+	<rect width="7" height="9" x="14" y="12" rx="1" stroke="#2B3499" />
+	<rect width="7" height="5" x="3" y="16" rx="1" stroke="#FFD099" />
 </svg>
diff --git a/apps/web/src/lib/components/site/index.ts b/apps/web/src/lib/components/site/index.ts
index a91975c..3c1fc16 100644
--- a/apps/web/src/lib/components/site/index.ts
+++ b/apps/web/src/lib/components/site/index.ts
@@ -2,7 +2,8 @@ export { default as Metadata } from './metadata.svelte';
 export { default as SiteFooter } from './site-footer.svelte';
 export { default as SiteNavBar } from './site-navbar.svelte';
 export { default as TailwindIndicator } from './tailwind-indicator.svelte';
-export { default as ModeToggle } from './mode-toggle.svelte';;
+export { default as ModeToggle } from './mode-toggle.svelte';
+export { default as Particles } from './particles.svelte';
 
 export * from './icons';
 export * from './nav';
diff --git a/apps/web/src/lib/components/site/nav/main-nav.svelte b/apps/web/src/lib/components/site/nav/main-nav.svelte
index c9035d6..6d71287 100644
--- a/apps/web/src/lib/components/site/nav/main-nav.svelte
+++ b/apps/web/src/lib/components/site/nav/main-nav.svelte
@@ -13,7 +13,7 @@
 				<a
 					href={navItem.href}
 					class={cn(
-						'hover:text-foreground/80 transition-colors',
+						'transition-colors hover:text-foreground/80',
 						$page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
 					)}
 				>
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 f27db17..66029dc 100644
--- a/apps/web/src/lib/components/site/nav/user-nav.svelte
+++ b/apps/web/src/lib/components/site/nav/user-nav.svelte
@@ -4,9 +4,15 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import type { BaseAuthStore } from 'pocketbase';
 
-	const fullNameToInitials = (fullName: string) => fullName.split(" ").map(word => word[0].toUpperCase()).slice(0, 2).join("");
+	const fullNameToInitials = (fullName: string) =>
+		fullName
+			.split(' ')
+			.map((word) => word[0].toUpperCase())
+			.slice(0, 2)
+			.join('');
+
 	export let authenticated = false;
-	export let user: BaseAuthStore["model"];
+	export let user: BaseAuthStore['model'];
 </script>
 
 {#if authenticated}
@@ -14,7 +20,7 @@
 		<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?.avatar} alt="@shadcn" />
+					<Avatar.Image src={user?.avatarUrl} alt={user?.name} />
 					<Avatar.Fallback>{fullNameToInitials(user?.name)}</Avatar.Fallback>
 				</Avatar.Root>
 			</Button>
@@ -23,7 +29,7 @@
 			<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-muted-foreground text-xs leading-none">{user?.email}</p>
+					<p class="text-xs leading-none text-muted-foreground">{user?.email}</p>
 				</div>
 			</DropdownMenu.Label>
 			<DropdownMenu.Separator />
diff --git a/apps/web/src/lib/components/site/particles.svelte b/apps/web/src/lib/components/site/particles.svelte
new file mode 100644
index 0000000..eb0c75a
--- /dev/null
+++ b/apps/web/src/lib/components/site/particles.svelte
@@ -0,0 +1,244 @@
+<script>
+	import { mode } from 'mode-watcher';
+	import { onMount, beforeUpdate, onDestroy } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const mousePositionStore = writable({ x: 0, y: 0 });
+
+	let x = 0;
+	let y = 0;
+
+	const handleMouseMove = (/** @type {{ clientX: number; clientY: number; }} */ event) => {
+		x = event.clientX;
+		y = event.clientY;
+		mousePositionStore.set({ x, y });
+	};
+
+	export let className = 'h-full';
+	export let quantity = 30;
+	export let staticity = 50;
+	export let ease = 50;
+	export let vx = 0;
+	export let vy = 0;
+
+	export let color = $mode === 'dark' ? '#ffffff' : '#000000';
+
+	/**
+	 * @type {HTMLCanvasElement}
+	 */
+	let canvasRef;
+	/**
+	 * @type {HTMLDivElement}
+	 */
+	let canvasContainerRef;
+	/**
+	 * @type {CanvasRenderingContext2D | null}
+	 */
+	let context;
+	/**
+	 * @type {any[]}
+	 */
+	let circles = [];
+	let mousePosition = mousePositionStore;
+	let mouse = { x: 0, y: 0 };
+	let canvasSize = { w: 0, h: 0 };
+	let dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+
+	/**
+	 * @param {string} hex
+	 */
+	function hexToRgb(hex) {
+		hex = hex.replace('#', '');
+		const hexInt = parseInt(hex, 16);
+		const red = (hexInt >> 16) & 255;
+		const green = (hexInt >> 8) & 255;
+		const blue = hexInt & 255;
+		return [red, green, blue];
+	}
+
+	function initCanvas() {
+		resizeCanvas();
+		drawParticles();
+	}
+
+	function onMouseMove() {
+		if (canvasRef) {
+			const rect = canvasRef.getBoundingClientRect();
+			const { w, h } = canvasSize;
+			const x = $mousePosition.x - rect.left - w / 2;
+			const y = $mousePosition.y - rect.top - h / 2;
+			const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+			if (inside) {
+				mouse.x = x;
+				mouse.y = y;
+			}
+		}
+	}
+
+	function resizeCanvas() {
+		if (canvasContainerRef && canvasRef && context) {
+			circles = [];
+			canvasSize.w = canvasContainerRef.offsetWidth;
+			canvasSize.h = canvasContainerRef.offsetHeight;
+			canvasRef.width = canvasSize.w * dpr;
+			canvasRef.height = canvasSize.h * dpr;
+			canvasRef.style.width = `${canvasSize.w}px`;
+			canvasRef.style.height = `${canvasSize.h}px`;
+			context.scale(dpr, dpr);
+		}
+	}
+
+	function circleParams() {
+		const x = Math.floor(Math.random() * canvasSize.w);
+		const y = Math.floor(Math.random() * canvasSize.h);
+		const translateX = 0;
+		const translateY = 0;
+		const size = Math.floor(Math.random() * 2) + 1;
+		const alpha = 0;
+		const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+		const dx = (Math.random() - 0.5) * 0.2;
+		const dy = (Math.random() - 0.5) * 0.2;
+		const magnetism = 0.1 + Math.random() * 4;
+		return {
+			x,
+			y,
+			translateX,
+			translateY,
+			size,
+			alpha,
+			targetAlpha,
+			dx,
+			dy,
+			magnetism
+		};
+	}
+
+	const rgb = hexToRgb(color);
+
+	/**
+	 * @param {{ x: any; y: any; translateX: any; translateY: any; size: any; alpha: any; targetAlpha?: number; dx?: number; dy?: number; magnetism?: number; }} circle
+	 */
+	function drawCircle(circle, update = false) {
+		if (context) {
+			const { x, y, translateX, translateY, size, alpha } = circle;
+			context.translate(translateX, translateY);
+			context.beginPath();
+			context.arc(x, y, size, 0, 2 * Math.PI);
+			context.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`;
+			context.fill();
+			context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+			if (!update) {
+				circles.push(circle);
+			}
+		}
+	}
+
+	function clearContext() {
+		if (context) {
+			context.clearRect(0, 0, canvasSize.w, canvasSize.h);
+		}
+	}
+
+	function drawParticles() {
+		clearContext();
+		const particleCount = quantity;
+		for (let i = 0; i < particleCount; i++) {
+			const circle = circleParams();
+			drawCircle(circle);
+		}
+	}
+
+	/**
+	 * @param {number} value
+	 * @param {number} start1
+	 * @param {number} end1
+	 * @param {number} start2
+	 * @param {number} end2
+	 */
+	function remapValue(value, start1, end1, start2, end2) {
+		const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+		return remapped > 0 ? remapped : 0;
+	}
+
+	function animate() {
+		clearContext();
+		circles.forEach((circle, i) => {
+			const edge = [
+				circle.x + circle.translateX - circle.size,
+				canvasSize.w - circle.x - circle.translateX - circle.size,
+				circle.y + circle.translateY - circle.size,
+				canvasSize.h - circle.y - circle.translateY - circle.size
+			];
+			const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+			const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2));
+			if (remapClosestEdge > 1) {
+				circle.alpha += 0.02;
+				if (circle.alpha > circle.targetAlpha) {
+					circle.alpha = circle.targetAlpha;
+				}
+			} else {
+				circle.alpha = circle.targetAlpha * remapClosestEdge;
+			}
+			circle.x += circle.dx + vx;
+			circle.y += circle.dy + vy;
+			circle.translateX += (mouse.x / (staticity / circle.magnetism) - circle.translateX) / ease;
+			circle.translateY += (mouse.y / (staticity / circle.magnetism) - circle.translateY) / ease;
+			if (
+				circle.x < -circle.size ||
+				circle.x > canvasSize.w + circle.size ||
+				circle.y < -circle.size ||
+				circle.y > canvasSize.h + circle.size
+			) {
+				circles.splice(i, 1);
+				const newCircle = circleParams();
+				drawCircle(newCircle);
+			} else {
+				drawCircle(
+					{
+						...circle,
+						x: circle.x,
+						y: circle.y,
+						translateX: circle.translateX,
+						translateY: circle.translateY,
+						alpha: circle.alpha
+					},
+					true
+				);
+			}
+		});
+		setTimeout(() => {
+			requestAnimationFrame(animate);
+		}, 1000 / 60); // Limit the frame rate to 60 FPS
+	}
+
+	onMount(() => {
+		window.addEventListener('mousemove', handleMouseMove);
+
+		if (canvasRef) {
+			context = canvasRef?.getContext('2d');
+		}
+		initCanvas();
+		animate();
+		window.addEventListener('resize', initCanvas);
+
+		return () => {
+			window.removeEventListener('resize', initCanvas);
+			window.removeEventListener('mousemove', handleMouseMove);
+		};
+	});
+
+	beforeUpdate(() => {
+		onMouseMove();
+	});
+
+	onDestroy(() => {
+		if (canvasRef) {
+			window.removeEventListener('resize', initCanvas);
+		}
+	});
+</script>
+
+<div class={className} bind:this={canvasContainerRef} aria-hidden="true">
+	<canvas bind:this={canvasRef}></canvas>
+</div>
diff --git a/apps/web/src/lib/components/site/site-footer.svelte b/apps/web/src/lib/components/site/site-footer.svelte
index 27493e4..742db1c 100644
--- a/apps/web/src/lib/components/site/site-footer.svelte
+++ b/apps/web/src/lib/components/site/site-footer.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { Blocks, Cloud } from 'lucide-svelte';
 	import { siteConfig } from '$lib/config/site';
-	import { Code } from 'radix-icons-svelte';
 </script>
 
 <footer class="container py-6">
 	<div class="space-y-1">
 		<p class="text-center text-sm text-muted-foreground">
-			&copy; {new Date().getFullYear()} &mdash; {siteConfig.name} by {siteConfig.author}. Licensed under GPL-3.0.
+			&copy; {new Date().getFullYear()} &mdash; {siteConfig.name} by {siteConfig.author}. Licensed
+			under GPL-3.0.
 		</p>
 	</div>
 </footer>
diff --git a/apps/web/src/lib/components/site/site-navbar.svelte b/apps/web/src/lib/components/site/site-navbar.svelte
index 889a270..6d0300e 100644
--- a/apps/web/src/lib/components/site/site-navbar.svelte
+++ b/apps/web/src/lib/components/site/site-navbar.svelte
@@ -4,11 +4,11 @@
 	import UserNav from './nav/user-nav.svelte';
 
 	export let authenticated = false;
-	export let user: null | {} = null;
+	export let user: object | null = null;
 </script>
 
 <header
-	class="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b shadow-sm backdrop-blur"
+	class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
 	<div class="container flex h-14 items-center">
 		<a href="/" class="mr-6 flex items-center space-x-2">
@@ -22,7 +22,7 @@
 				<ModeToggle />
 			</nav>
 			<MobileNav {authenticated} />
-			<UserNav {authenticated} {user}/>
+			<UserNav {authenticated} {user} />
 		</div>
 	</div>
 </header>
diff --git a/apps/web/src/lib/components/site/tailwind-indicator.svelte b/apps/web/src/lib/components/site/tailwind-indicator.svelte
index 52e1770..61f136d 100644
--- a/apps/web/src/lib/components/site/tailwind-indicator.svelte
+++ b/apps/web/src/lib/components/site/tailwind-indicator.svelte
@@ -1,14 +1,14 @@
 <script>
-	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import { Button } from '$lib/components/ui/button';
 </script>
 
-<div class="fixed bottom-1 left-1 z-50 flex font-mono uppercase">
-	<Badge variant="outline" class="block sm:hidden">xs</Badge>
-	<Badge variant="outline" class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"
-		>sm</Badge
-	>
-	<Badge variant="outline" class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</Badge>
-	<Badge variant="outline" class="hidden lg:block xl:hidden 2xl:hidden">lg</Badge>
-	<Badge variant="outline" class="hidden xl:block 2xl:hidden">xl</Badge>
-	<Badge variant="outline" class="hidden 2xl:block">2xl</Badge>
-</div>
+<Button variant="ghost" size="icon" class="block sm:hidden">xs</Button>
+<Button variant="ghost" size="icon" class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden"
+	>sm</Button
+>
+<Button variant="ghost" size="icon" class="hidden md:block lg:hidden xl:hidden 2xl:hidden"
+	>md</Button
+>
+<Button variant="ghost" size="icon" class="hidden lg:block xl:hidden 2xl:hidden">lg</Button>
+<Button variant="ghost" size="icon" class="hidden xl:block 2xl:hidden">xl</Button>
+<Button variant="ghost" size="icon" class="hidden 2xl:block">2xl</Button>
diff --git a/apps/web/src/lib/components/ui/alert/alert-description.svelte b/apps/web/src/lib/components/ui/alert/alert-description.svelte
index 42a9133..1f45185 100644
--- a/apps/web/src/lib/components/ui/alert/alert-description.svelte
+++ b/apps/web/src/lib/components/ui/alert/alert-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/apps/web/src/lib/components/ui/alert/alert-title.svelte b/apps/web/src/lib/components/ui/alert/alert-title.svelte
index 72d0138..03c6112 100644
--- a/apps/web/src/lib/components/ui/alert/alert-title.svelte
+++ b/apps/web/src/lib/components/ui/alert/alert-title.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from ".";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from '.';
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		level?: HeadingLevel;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h5";
+	let className: $$Props['class'] = undefined;
+	export let level: $$Props['level'] = 'h5';
 	export { className as class };
 </script>
 
 <svelte:element
 	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/alert/alert.svelte b/apps/web/src/lib/components/ui/alert/alert.svelte
index 8c6790f..c97ce68 100644
--- a/apps/web/src/lib/components/ui/alert/alert.svelte
+++ b/apps/web/src/lib/components/ui/alert/alert.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { alertVariants, type Variant } from ".";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { alertVariants, type Variant } from '.';
 
 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		variant?: Variant;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
 	export { className as class };
 </script>
 
diff --git a/apps/web/src/lib/components/ui/alert/index.ts b/apps/web/src/lib/components/ui/alert/index.ts
index 2ece0cd..6a2deb0 100644
--- a/apps/web/src/lib/components/ui/alert/index.ts
+++ b/apps/web/src/lib/components/ui/alert/index.ts
@@ -1,25 +1,25 @@
-import { tv, type VariantProps } from "tailwind-variants";
+import { tv, type VariantProps } from 'tailwind-variants';
 
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
 
 export const alertVariants = tv({
-	base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+	base: 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
 	variants: {
 		variant: {
-			default: "bg-background text-foreground",
+			default: 'bg-background text-foreground',
 			destructive:
-				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+				'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
 		}
 	},
 	defaultVariants: {
-		variant: "default"
+		variant: 'default'
 	}
 });
 
-export type Variant = VariantProps<typeof alertVariants>["variant"];
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte b/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
index a1ca69f..8939822 100644
--- a/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/apps/web/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = AvatarPrimitive.FallbackProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/avatar/avatar-image.svelte b/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
index 27b0e7d..d1bc205 100644
--- a/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
+++ b/apps/web/src/lib/components/ui/avatar/avatar-image.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = AvatarPrimitive.ImageProps;
 
-	let className: $$Props["class"] = undefined;
-	export let src: $$Props["src"] = undefined;
-	export let alt: $$Props["alt"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let src: $$Props['src'] = undefined;
+	export let alt: $$Props['alt'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Image
 	{src}
 	{alt}
-	class={cn("aspect-square h-full w-full", className)}
+	class={cn('aspect-square h-full w-full', className)}
 	{...$$restProps}
 />
diff --git a/apps/web/src/lib/components/ui/avatar/avatar.svelte b/apps/web/src/lib/components/ui/avatar/avatar.svelte
index 99ae927..1610a75 100644
--- a/apps/web/src/lib/components/ui/avatar/avatar.svelte
+++ b/apps/web/src/lib/components/ui/avatar/avatar.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = AvatarPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let delayMs: $$Props['delayMs'] = undefined;
 	export { className as class };
 </script>
 
 <AvatarPrimitive.Root
 	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+	class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/avatar/index.ts b/apps/web/src/lib/components/ui/avatar/index.ts
index b08c780..9585f8a 100644
--- a/apps/web/src/lib/components/ui/avatar/index.ts
+++ b/apps/web/src/lib/components/ui/avatar/index.ts
@@ -1,6 +1,6 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/badge/badge.svelte b/apps/web/src/lib/components/ui/badge/badge.svelte
index 58ec3b0..836c73b 100644
--- a/apps/web/src/lib/components/ui/badge/badge.svelte
+++ b/apps/web/src/lib/components/ui/badge/badge.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { badgeVariants, type Variant } from ".";
+	import { cn } from '$lib/utils';
+	import { badgeVariants, type Variant } from '.';
 
 	let className: string | undefined | null = undefined;
 	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
+	export let variant: Variant = 'default';
 	export { className as class };
 </script>
 
 <svelte:element
-	this={href ? "a" : "span"}
+	this={href ? 'a' : 'span'}
 	{href}
 	class={cn(badgeVariants({ variant, className }))}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/badge/index.ts b/apps/web/src/lib/components/ui/badge/index.ts
index 2fa5bf2..863efc4 100644
--- a/apps/web/src/lib/components/ui/badge/index.ts
+++ b/apps/web/src/lib/components/ui/badge/index.ts
@@ -1,22 +1,20 @@
-import { tv, type VariantProps } from "tailwind-variants";
+import { tv, type VariantProps } from 'tailwind-variants';
 
-export { default as Badge } from "./badge.svelte";
+export { default as Badge } from './badge.svelte';
 export const badgeVariants = tv({
-	base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none",
+	base: 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none',
 	variants: {
 		variant: {
-			default:
-				"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-			secondary:
-				"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+			secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
 			destructive:
-				"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-			outline: "text-foreground"
+				'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+			outline: 'text-foreground'
 		}
 	},
 	defaultVariants: {
-		variant: "default"
+		variant: 'default'
 	}
 });
 
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export type Variant = VariantProps<typeof badgeVariants>['variant'];
diff --git a/apps/web/src/lib/components/ui/checkbox/checkbox.svelte b/apps/web/src/lib/components/ui/checkbox/checkbox.svelte
index d824610..c892194 100644
--- a/apps/web/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/apps/web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { Check, Minus } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { Check, Minus } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = false;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = false;
 	export { className as class };
 </script>
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
 		className
 	)}
 	bind:checked
@@ -21,14 +21,14 @@
 	{...$$restProps}
 >
 	<CheckboxPrimitive.Indicator
-		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		class={cn('flex h-4 w-4 items-center justify-center text-current')}
 		let:isChecked
 		let:isIndeterminate
 	>
 		{#if isIndeterminate}
 			<Minus class="h-3.5 w-3.5" />
 		{:else}
-			<Check class={cn("h-3.5 w-3.5", !isChecked && "text-transparent")} />
+			<Check class={cn('h-3.5 w-3.5', !isChecked && 'text-transparent')} />
 		{/if}
 	</CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>
diff --git a/apps/web/src/lib/components/ui/checkbox/index.ts b/apps/web/src/lib/components/ui/checkbox/index.ts
index 5fba5a4..5c27671 100644
--- a/apps/web/src/lib/components/ui/checkbox/index.ts
+++ b/apps/web/src/lib/components/ui/checkbox/index.ts
@@ -1,4 +1,4 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//
diff --git a/apps/web/src/lib/components/ui/command/command-dialog.svelte b/apps/web/src/lib/components/ui/command/command-dialog.svelte
index 4e71dfd..9fdddf3 100644
--- a/apps/web/src/lib/components/ui/command/command-dialog.svelte
+++ b/apps/web/src/lib/components/ui/command/command-dialog.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import Command from "./command.svelte";
-	import * as Dialog from "$lib/components/ui/dialog";
-	import type { Dialog as DialogPrimitive } from "bits-ui";
-	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import Command from './command.svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
 
 	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
 
-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <Dialog.Root bind:open {...$$restProps}>
diff --git a/apps/web/src/lib/components/ui/command/command-empty.svelte b/apps/web/src/lib/components/ui/command/command-empty.svelte
index dc74bf5..aa18469 100644
--- a/apps/web/src/lib/components/ui/command/command-empty.svelte
+++ b/apps/web/src/lib/components/ui/command/command-empty.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.EmptyProps;
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
 	<slot />
 </CommandPrimitive.Empty>
diff --git a/apps/web/src/lib/components/ui/command/command-group.svelte b/apps/web/src/lib/components/ui/command/command-group.svelte
index 198a3df..a7a5dba 100644
--- a/apps/web/src/lib/components/ui/command/command-group.svelte
+++ b/apps/web/src/lib/components/ui/command/command-group.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 	type $$Props = CommandPrimitive.GroupProps;
 
 	let className: string | undefined | null = undefined;
@@ -9,7 +9,7 @@
 
 <CommandPrimitive.Group
 	class={cn(
-		"overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground",
+		'overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/command/command-input.svelte b/apps/web/src/lib/components/ui/command/command-input.svelte
index 4752823..3380773 100644
--- a/apps/web/src/lib/components/ui/command/command-input.svelte
+++ b/apps/web/src/lib/components/ui/command/command-input.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { MagnifyingGlass } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { MagnifyingGlass } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.InputProps;
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let value: string = "";
+	export let value: string = '';
 </script>
 
 <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
 	<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/command/command-item.svelte b/apps/web/src/lib/components/ui/command/command-item.svelte
index 89a9e97..daacb32 100644
--- a/apps/web/src/lib/components/ui/command/command-item.svelte
+++ b/apps/web/src/lib/components/ui/command/command-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.ItemProps;
 
@@ -10,7 +10,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/command/command-list.svelte b/apps/web/src/lib/components/ui/command/command-list.svelte
index 6b1c915..b8fd56a 100644
--- a/apps/web/src/lib/components/ui/command/command-list.svelte
+++ b/apps/web/src/lib/components/ui/command/command-list.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.ListProps;
 	let className: string | undefined | null = undefined;
@@ -8,7 +8,7 @@
 </script>
 
 <CommandPrimitive.List
-	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/command/command-separator.svelte b/apps/web/src/lib/components/ui/command/command-separator.svelte
index 51aa2da..3fe5d37 100644
--- a/apps/web/src/lib/components/ui/command/command-separator.svelte
+++ b/apps/web/src/lib/components/ui/command/command-separator.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.SeparatorProps;
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
 
-<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />
+<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-border', className)} {...$$restProps} />
diff --git a/apps/web/src/lib/components/ui/command/command-shortcut.svelte b/apps/web/src/lib/components/ui/command/command-shortcut.svelte
index 517e9e9..132fb77 100644
--- a/apps/web/src/lib/components/ui/command/command-shortcut.svelte
+++ b/apps/web/src/lib/components/ui/command/command-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
@@ -9,7 +9,7 @@
 </script>
 
 <span
-	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/command/command.svelte b/apps/web/src/lib/components/ui/command/command.svelte
index 2806759..5961d8c 100644
--- a/apps/web/src/lib/components/ui/command/command.svelte
+++ b/apps/web/src/lib/components/ui/command/command.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Command as CommandPrimitive } from "cmdk-sv";
-	import { cn } from "$lib/utils";
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
 
 	type $$Props = CommandPrimitive.CommandProps;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
@@ -12,7 +12,7 @@
 
 <CommandPrimitive.Root
 	class={cn(
-		"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+		'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
 		className
 	)}
 	bind:value
diff --git a/apps/web/src/lib/components/ui/command/index.ts b/apps/web/src/lib/components/ui/command/index.ts
index 6fdefa6..03922d5 100644
--- a/apps/web/src/lib/components/ui/command/index.ts
+++ b/apps/web/src/lib/components/ui/command/index.ts
@@ -1,14 +1,14 @@
-import { Command as CommandPrimitive } from "cmdk-sv";
+import { Command as CommandPrimitive } from 'cmdk-sv';
 
-import Root from "./command.svelte";
-import Dialog from "./command-dialog.svelte";
-import Empty from "./command-empty.svelte";
-import Group from "./command-group.svelte";
-import Item from "./command-item.svelte";
-import Input from "./command-input.svelte";
-import List from "./command-list.svelte";
-import Separator from "./command-separator.svelte";
-import Shortcut from "./command-shortcut.svelte";
+import Root from './command.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
 
 const Loading = CommandPrimitive.Loading;
 
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-content.svelte b/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
index 9f78e8a..7eff526 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import * as Dialog from ".";
-	import { cn, flyAndScale } from "$lib/utils";
-	import { Cross2 } from "radix-icons-svelte";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import * as Dialog from '.';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { Cross2 } from 'radix-icons-svelte';
 
 	type $$Props = DialogPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 200
 	};
 	export { className as class };
@@ -20,7 +20,7 @@
 		{transition}
 		{transitionConfig}
 		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
 			className
 		)}
 		{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-description.svelte b/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
index 7250e09..84d4e5f 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DialogPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte b/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
index 3c41773..da4f517 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	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)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-header.svelte b/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
index 180244f..e4b3608 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte b/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
index ffec38c..22c6488 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { fade } from "svelte/transition";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { fade } from 'svelte/transition';
 
 	type $$Props = DialogPrimitive.OverlayProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 150
 	};
 	export { className as class };
@@ -16,6 +16,6 @@
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
 	{...$$restProps}
 />
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte b/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
index 400e62b..a0ba1f1 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
 
 	type $$Props = DialogPrimitive.PortalProps;
 </script>
diff --git a/apps/web/src/lib/components/ui/dialog/dialog-title.svelte b/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
index fb863c9..c133166 100644
--- a/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/apps/web/src/lib/components/ui/dialog/dialog-title.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DialogPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DialogPrimitive.Title
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/dialog/index.ts b/apps/web/src/lib/components/ui/dialog/index.ts
index c05c48e..2a1a048 100644
--- a/apps/web/src/lib/components/ui/dialog/index.ts
+++ b/apps/web/src/lib/components/ui/dialog/index.ts
@@ -1,15 +1,15 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog as DialogPrimitive } from 'bits-ui';
 
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
 
-import Title from "./dialog-title.svelte";
-import Portal from "./dialog-portal.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 727dbd5..d813949 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { Check } from "radix-icons-svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { Check } from 'radix-icons-svelte';
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 3d09fe9..c153606 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
 
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
 </script>
 
@@ -16,7 +16,7 @@
 	{transitionConfig}
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index aaf9d71..7d0faad 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
+		inset && 'pl-8',
 		className
 	)}
 	on:click
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index a7fb3c4..f3ce65f 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 		inset?: boolean;
 	};
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index 1c74ae1..dd67d44 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
 	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
 
-	export let value: $$Props["value"] = undefined;
+	export let value: $$Props['value'] = undefined;
 </script>
 
 <DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index e518364..3fbe11a 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { DotFilled } from "radix-icons-svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { DotFilled } from 'radix-icons-svelte';
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: DropdownMenuPrimitive.RadioItemProps['value'];
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{value}
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 775f8fe..180fe79 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	class={cn('-mx-1 my-1 h-px bg-muted', className)}
 	{...$$restProps}
 />
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 696d3bd..257a0e2 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+<span class={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...$$restProps}>
 	<slot />
 </span>
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index eec9bfa..d86f063 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
 
 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		x: -10,
 		y: 0
 	};
@@ -17,7 +17,7 @@
 	{transition}
 	{transitionConfig}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 0ffc09b..77cddb5 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/apps/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { ChevronRight } from "radix-icons-svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { ChevronRight } from 'radix-icons-svelte';
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
 	};
 	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let inset: $$Props['inset'] = undefined;
 	export { className as class };
 </script>
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
-		inset && "pl-8",
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
+		inset && 'pl-8',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/dropdown-menu/index.ts b/apps/web/src/lib/components/ui/dropdown-menu/index.ts
index 313213a..52c1f3c 100644
--- a/apps/web/src/lib/components/ui/dropdown-menu/index.ts
+++ b/apps/web/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,14 +1,14 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
 
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
diff --git a/apps/web/src/lib/components/ui/form/form-button.svelte b/apps/web/src/lib/components/ui/form/form-button.svelte
index 024f9dc..a6638e4 100644
--- a/apps/web/src/lib/components/ui/form/form-button.svelte
+++ b/apps/web/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from "$lib/components/ui/button";
+	import * as Button from '$lib/components/ui/button';
 	type $$Props = Button.Props;
 	type $$Events = Button.Events;
 </script>
diff --git a/apps/web/src/lib/components/ui/form/form-checkbox.svelte b/apps/web/src/lib/components/ui/form/form-checkbox.svelte
index 46b9151..d667441 100644
--- a/apps/web/src/lib/components/ui/form/form-checkbox.svelte
+++ b/apps/web/src/lib/components/ui/form/form-checkbox.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { Checkbox } from "$lib/components/ui/checkbox";
+	import { getFormField } from 'formsnap';
+	import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import { Checkbox } from '$lib/components/ui/checkbox';
 	type $$Props = CheckboxPrimitive.Props;
 	type $$Events = CheckboxPrimitive.Events;
 
-	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
 
 	const { name, setValue, attrStore, value } = getFormField();
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -14,7 +14,7 @@
 
 <Checkbox
 	{...rest}
-	checked={typeof $value === "boolean" ? $value : false}
+	checked={typeof $value === 'boolean' ? $value : false}
 	onCheckedChange={(v) => {
 		onCheckedChange?.(v);
 		setValue(v);
diff --git a/apps/web/src/lib/components/ui/form/form-description.svelte b/apps/web/src/lib/components/ui/form/form-description.svelte
index 9f45008..0ba02ca 100644
--- a/apps/web/src/lib/components/ui/form/form-description.svelte
+++ b/apps/web/src/lib/components/ui/form/form-description.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from "formsnap";
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 	let className: string | undefined | null = undefined;
@@ -9,7 +9,7 @@
 </script>
 
 <FormPrimitive.Description
-	class={cn("text-[0.8rem] text-muted-foreground", className)}
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/form/form-input.svelte b/apps/web/src/lib/components/ui/form/form-input.svelte
index 224f44a..5575015 100644
--- a/apps/web/src/lib/components/ui/form/form-input.svelte
+++ b/apps/web/src/lib/components/ui/form/form-input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { Input, type InputEvents } from "$lib/components/ui/input";
+	import { getFormField } from 'formsnap';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Input, type InputEvents } from '$lib/components/ui/input';
 
 	type $$Props = HTMLInputAttributes;
 	type $$Events = InputEvents;
diff --git a/apps/web/src/lib/components/ui/form/form-item.svelte b/apps/web/src/lib/components/ui/form/form-item.svelte
index 0e5daa4..11b9079 100644
--- a/apps/web/src/lib/components/ui/form/form-item.svelte
+++ b/apps/web/src/lib/components/ui/form/form-item.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 	let className: string | undefined | null = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("space-y-2", className)} {...$$restProps}>
+<div class={cn('space-y-2', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/apps/web/src/lib/components/ui/form/form-label.svelte b/apps/web/src/lib/components/ui/form/form-label.svelte
index 2a4ead6..8608970 100644
--- a/apps/web/src/lib/components/ui/form/form-label.svelte
+++ b/apps/web/src/lib/components/ui/form/form-label.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from "bits-ui";
-	import { getFormField } from "formsnap";
-	import { cn } from "$lib/utils";
-	import { Label } from "$lib/components/ui/label";
+	import type { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import { Label } from '$lib/components/ui/label';
 
 	type $$Props = LabelPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 
 	const { errors, ids } = getFormField();
 </script>
 
-<Label for={$ids.input} class={cn($errors && "text-destructive", className)} {...$$restProps}>
+<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
 	<slot />
 </Label>
diff --git a/apps/web/src/lib/components/ui/form/form-native-select.svelte b/apps/web/src/lib/components/ui/form/form-native-select.svelte
index d046bb3..2e04aa7 100644
--- a/apps/web/src/lib/components/ui/form/form-native-select.svelte
+++ b/apps/web/src/lib/components/ui/form/form-native-select.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from "formsnap";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
-	import { CaretSort } from "radix-icons-svelte";
-	import type { HTMLSelectAttributes } from "svelte/elements";
+	import { Form as FormPrimitive } from 'formsnap';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import { CaretSort } from 'radix-icons-svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLSelectAttributes;
 
@@ -14,8 +14,8 @@
 <div class="relative">
 	<FormPrimitive.Select
 		class={cn(
-			buttonVariants({ variant: "outline" }),
-			"appearance-none bg-transparent font-normal",
+			buttonVariants({ variant: 'outline' }),
+			'appearance-none bg-transparent font-normal',
 			className
 		)}
 		{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/form/form-radio-group.svelte b/apps/web/src/lib/components/ui/form/form-radio-group.svelte
index 91f6b80..c3f70bc 100644
--- a/apps/web/src/lib/components/ui/form/form-radio-group.svelte
+++ b/apps/web/src/lib/components/ui/form/form-radio-group.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
+	import { getFormField } from 'formsnap';
+	import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
 
 	type $$Props = RadioGroupPrimitive.Props;
 	const { attrStore, setValue, name, value } = getFormField();
 
-	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let onValueChange: $$Props['onValueChange'] = undefined;
 </script>
 
 <RadioGroup.Root
diff --git a/apps/web/src/lib/components/ui/form/form-select-trigger.svelte b/apps/web/src/lib/components/ui/form/form-select-trigger.svelte
index 27990d6..f389a02 100644
--- a/apps/web/src/lib/components/ui/form/form-select-trigger.svelte
+++ b/apps/web/src/lib/components/ui/form/form-select-trigger.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import * as Select from "$lib/components/ui/select";
-	import type { Select as SelectPrimitive } from "bits-ui";
-	import { getFormField } from "formsnap";
+	import * as Select from '$lib/components/ui/select';
+	import type { Select as SelectPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
 
 	type $$Props = SelectPrimitive.TriggerProps & {
 		placeholder?: string;
 	};
 	type $$Events = SelectPrimitive.TriggerEvents;
 	const { attrStore, value } = getFormField();
-	export let placeholder = "";
+	export let placeholder = '';
 </script>
 
 <Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
diff --git a/apps/web/src/lib/components/ui/form/form-select.svelte b/apps/web/src/lib/components/ui/form/form-select.svelte
index ff022bb..b884f92 100644
--- a/apps/web/src/lib/components/ui/form/form-select.svelte
+++ b/apps/web/src/lib/components/ui/form/form-select.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import * as Select from "$lib/components/ui/select";
-	import { getFormField } from "formsnap";
-	import type { Select as SelectPrimitive } from "bits-ui";
+	import * as Select from '$lib/components/ui/select';
+	import { getFormField } from 'formsnap';
+	import type { Select as SelectPrimitive } from 'bits-ui';
 
 	type $$Props = SelectPrimitive.Props<unknown>;
 	const { setValue, name, value } = getFormField();
-	export let onSelectedChange: $$Props["onSelectedChange"] = undefined;
+	export let onSelectedChange: $$Props['onSelectedChange'] = undefined;
 </script>
 
 <Select.Root
diff --git a/apps/web/src/lib/components/ui/form/form-switch.svelte b/apps/web/src/lib/components/ui/form/form-switch.svelte
index 8b909dc..ff9d0a6 100644
--- a/apps/web/src/lib/components/ui/form/form-switch.svelte
+++ b/apps/web/src/lib/components/ui/form/form-switch.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { Switch as SwitchPrimitive } from "bits-ui";
-	import { Switch } from "$lib/components/ui/switch";
+	import { getFormField } from 'formsnap';
+	import type { Switch as SwitchPrimitive } from 'bits-ui';
+	import { Switch } from '$lib/components/ui/switch';
 	type $$Props = SwitchPrimitive.Props;
 	type $$Events = SwitchPrimitive.Events;
 
-	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+	export let onCheckedChange: $$Props['onCheckedChange'] = undefined;
 
 	const { name, setValue, attrStore, value } = getFormField();
 </script>
 
 <Switch
 	{...$attrStore}
-	checked={typeof $value === "boolean" ? $value : false}
+	checked={typeof $value === 'boolean' ? $value : false}
 	onCheckedChange={(v) => {
 		onCheckedChange?.(v);
 		setValue(v);
diff --git a/apps/web/src/lib/components/ui/form/form-textarea.svelte b/apps/web/src/lib/components/ui/form/form-textarea.svelte
index edc553d..5d34734 100644
--- a/apps/web/src/lib/components/ui/form/form-textarea.svelte
+++ b/apps/web/src/lib/components/ui/form/form-textarea.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { getFormField } from "formsnap";
-	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import type { TextareaGetFormField } from ".";
-	import { Textarea, type TextareaEvents } from "$lib/components/ui/textarea";
+	import { getFormField } from 'formsnap';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import type { TextareaGetFormField } from '.';
+	import { Textarea, type TextareaEvents } from '$lib/components/ui/textarea';
 
 	type $$Props = HTMLTextareaAttributes;
 	type $$Events = TextareaEvents;
diff --git a/apps/web/src/lib/components/ui/form/form-validation.svelte b/apps/web/src/lib/components/ui/form/form-validation.svelte
index 56657d9..43db1cc 100644
--- a/apps/web/src/lib/components/ui/form/form-validation.svelte
+++ b/apps/web/src/lib/components/ui/form/form-validation.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from "formsnap";
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 	let className: string | undefined | null = undefined;
@@ -9,6 +9,6 @@
 </script>
 
 <FormPrimitive.Validation
-	class={cn("text-[0.8rem] font-medium text-destructive", className)}
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
 	{...$$restProps}
 />
diff --git a/apps/web/src/lib/components/ui/form/index.ts b/apps/web/src/lib/components/ui/form/index.ts
index 7c8a4bc..d154c72 100644
--- a/apps/web/src/lib/components/ui/form/index.ts
+++ b/apps/web/src/lib/components/ui/form/index.ts
@@ -1,20 +1,20 @@
-import { Form as FormPrimitive, getFormField } from "formsnap";
-import type { Writable } from "svelte/store";
-import * as RadioGroupComp from "$lib/components/ui/radio-group";
-import * as SelectComp from "$lib/components/ui/select";
-import Item from "./form-item.svelte";
-import Input from "./form-input.svelte";
-import Textarea from "./form-textarea.svelte";
-import Description from "./form-description.svelte";
-import Label from "./form-label.svelte";
-import Validation from "./form-validation.svelte";
-import Checkbox from "./form-checkbox.svelte";
-import Switch from "./form-switch.svelte";
-import NativeSelect from "./form-native-select.svelte";
-import RadioGroup from "./form-radio-group.svelte";
-import Select from "./form-select.svelte";
-import SelectTrigger from "./form-select-trigger.svelte";
-import Button from "./form-button.svelte";
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import type { Writable } from 'svelte/store';
+import * as RadioGroupComp from '$lib/components/ui/radio-group';
+import * as SelectComp from '$lib/components/ui/select';
+import Item from './form-item.svelte';
+import Input from './form-input.svelte';
+import Textarea from './form-textarea.svelte';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import Validation from './form-validation.svelte';
+import Checkbox from './form-checkbox.svelte';
+import Switch from './form-switch.svelte';
+import NativeSelect from './form-native-select.svelte';
+import RadioGroup from './form-radio-group.svelte';
+import Select from './form-select.svelte';
+import SelectTrigger from './form-select-trigger.svelte';
+import Button from './form-button.svelte';
 
 const Root = FormPrimitive.Root;
 const Field = FormPrimitive.Field;
@@ -27,7 +27,7 @@ const SelectGroup = SelectComp.Group;
 const SelectItem = SelectComp.Item;
 const SelectSeparator = SelectComp.Separator;
 
-export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, "value"> & {
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
 	value: Writable<string>;
 };
 
diff --git a/apps/web/src/lib/components/ui/popover/index.ts b/apps/web/src/lib/components/ui/popover/index.ts
index 66063f5..c524e47 100644
--- a/apps/web/src/lib/components/ui/popover/index.ts
+++ b/apps/web/src/lib/components/ui/popover/index.ts
@@ -1,5 +1,5 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
-import Content from "./popover-content.svelte";
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
 const Root = PopoverPrimitive.Root;
 const Trigger = PopoverPrimitive.Trigger;
 
diff --git a/apps/web/src/lib/components/ui/popover/popover-content.svelte b/apps/web/src/lib/components/ui/popover/popover-content.svelte
index db19f36..dd0f937 100644
--- a/apps/web/src/lib/components/ui/popover/popover-content.svelte
+++ b/apps/web/src/lib/components/ui/popover/popover-content.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
 
 	type $$Props = PopoverPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 4;
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export let align: $$Props['align'] = 'center';
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export { className as class };
 </script>
 
@@ -19,7 +19,7 @@
 	{sideOffset}
 	{...$$restProps}
 	class={cn(
-		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 		className
 	)}
 >
diff --git a/apps/web/src/lib/components/ui/radio-group/index.ts b/apps/web/src/lib/components/ui/radio-group/index.ts
index b39aed3..7d71e24 100644
--- a/apps/web/src/lib/components/ui/radio-group/index.ts
+++ b/apps/web/src/lib/components/ui/radio-group/index.ts
@@ -1,7 +1,7 @@
-import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
 
-import Root from "./radio-group.svelte";
-import Item from "./radio-group-item.svelte";
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
 const Input = RadioGroupPrimitive.Input;
 
 export {
diff --git a/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte b/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte
index bde5c38..b33cae9 100644
--- a/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/apps/web/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { Check } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { Check } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
 
 	type $$Props = RadioGroupPrimitive.ItemProps & {
 		value: string;
 	};
 	type $$Events = RadioGroupPrimitive.ItemEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <RadioGroupPrimitive.Item
 	{value}
 	class={cn(
-		"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/radio-group/radio-group.svelte b/apps/web/src/lib/components/ui/radio-group/radio-group.svelte
index 3fc2159..f4ec346 100644
--- a/apps/web/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/apps/web/src/lib/components/ui/radio-group/radio-group.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = RadioGroupPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
 	export { className as class };
 </script>
 
-<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+<RadioGroupPrimitive.Root bind:value class={cn('grid gap-2', className)} {...$$restProps}>
 	<slot />
 </RadioGroupPrimitive.Root>
diff --git a/apps/web/src/lib/components/ui/select/index.ts b/apps/web/src/lib/components/ui/select/index.ts
index a682496..5a9dd87 100644
--- a/apps/web/src/lib/components/ui/select/index.ts
+++ b/apps/web/src/lib/components/ui/select/index.ts
@@ -1,10 +1,10 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import { Select as SelectPrimitive } from 'bits-ui';
 
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
 
 const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
diff --git a/apps/web/src/lib/components/ui/select/select-content.svelte b/apps/web/src/lib/components/ui/select/select-content.svelte
index 72afc71..8162b00 100644
--- a/apps/web/src/lib/components/ui/select/select-content.svelte
+++ b/apps/web/src/lib/components/ui/select/select-content.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils";
-	import { scale } from "svelte/transition";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { scale } from 'svelte/transition';
 
 	type $$Props = SelectPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let inTransition: $$Props["inTransition"] = flyAndScale;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = scale;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let inTransition: $$Props['inTransition'] = flyAndScale;
+	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
+	export let outTransition: $$Props['outTransition'] = scale;
+	export let outTransitionConfig: $$Props['outTransitionConfig'] = {
 		start: 0.95,
 		opacity: 0,
 		duration: 50
@@ -25,7 +25,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none",
+		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/select/select-item.svelte b/apps/web/src/lib/components/ui/select/select-item.svelte
index cd583a1..beb5b09 100644
--- a/apps/web/src/lib/components/ui/select/select-item.svelte
+++ b/apps/web/src/lib/components/ui/select/select-item.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { Check } from "radix-icons-svelte";
+	import { cn } from '$lib/utils';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { Check } from 'radix-icons-svelte';
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = Required<SelectPrimitive.ItemEvents>;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'];
+	export let label: $$Props['label'] = undefined;
+	export let disabled: $$Props['disabled'] = undefined;
 	export { className as class };
 </script>
 
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/select/select-label.svelte b/apps/web/src/lib/components/ui/select/select-label.svelte
index 6da8f9a..176d2a0 100644
--- a/apps/web/src/lib/components/ui/select/select-label.svelte
+++ b/apps/web/src/lib/components/ui/select/select-label.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SelectPrimitive.LabelProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<SelectPrimitive.Label class={cn("px-2 py-1.5 text-sm font-semibold", className)} {...$$restProps}>
+<SelectPrimitive.Label class={cn('px-2 py-1.5 text-sm font-semibold', className)} {...$$restProps}>
 	<slot />
 </SelectPrimitive.Label>
diff --git a/apps/web/src/lib/components/ui/select/select-separator.svelte b/apps/web/src/lib/components/ui/select/select-separator.svelte
index 42e312c..49a211e 100644
--- a/apps/web/src/lib/components/ui/select/select-separator.svelte
+++ b/apps/web/src/lib/components/ui/select/select-separator.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SelectPrimitive.SeparatorProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/apps/web/src/lib/components/ui/select/select-trigger.svelte b/apps/web/src/lib/components/ui/select/select-trigger.svelte
index 5d8e857..5a9390b 100644
--- a/apps/web/src/lib/components/ui/select/select-trigger.svelte
+++ b/apps/web/src/lib/components/ui/select/select-trigger.svelte
@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+		'line-clamp-1 flex h-9 w-full items-center justify-between truncate rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/separator/index.ts b/apps/web/src/lib/components/ui/separator/index.ts
index dbfb139..768efac 100644
--- a/apps/web/src/lib/components/ui/separator/index.ts
+++ b/apps/web/src/lib/components/ui/separator/index.ts
@@ -1,4 +1,4 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/separator/separator.svelte b/apps/web/src/lib/components/ui/separator/separator.svelte
index bf9127a..499bf67 100644
--- a/apps/web/src/lib/components/ui/separator/separator.svelte
+++ b/apps/web/src/lib/components/ui/separator/separator.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SeparatorPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
 	export { className as class };
 </script>
 
 <SeparatorPrimitive.Root
 	class={cn(
-		"shrink-0 bg-border",
-		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
 		className
 	)}
 	{orientation}
diff --git a/apps/web/src/lib/components/ui/sheet/index.ts b/apps/web/src/lib/components/ui/sheet/index.ts
index b77b56b..957940c 100644
--- a/apps/web/src/lib/components/ui/sheet/index.ts
+++ b/apps/web/src/lib/components/ui/sheet/index.ts
@@ -1,13 +1,13 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
-import { tv, type VariantProps } from "tailwind-variants";
+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";
+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;
@@ -38,69 +38,69 @@ export {
 };
 
 export const sheetVariants = tv({
-	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	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"
+			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"
+		side: 'right'
 	}
 });
 
 export const sheetTransitions = {
 	top: {
 		in: {
-			y: "-100%",
+			y: '-100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			y: "-100%",
+			y: '-100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	bottom: {
 		in: {
-			y: "100%",
+			y: '100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			y: "100%",
+			y: '100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	left: {
 		in: {
-			x: "-100%",
+			x: '-100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			x: "-100%",
+			x: '-100%',
 			duration: 300,
 			opacity: 1
 		}
 	},
 	right: {
 		in: {
-			x: "100%",
+			x: '100%',
 			duration: 500,
 			opacity: 1
 		},
 		out: {
-			x: "100%",
+			x: '100%',
 			duration: 300,
 			opacity: 1
 		}
 	}
 };
 
-export type Side = VariantProps<typeof sheetVariants>["side"];
+export type Side = VariantProps<typeof sheetVariants>['side'];
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-content.svelte b/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
index 47d5f9e..0aa9460 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from ".";
-	import { Cross2 } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
-	import { fly } from "svelte/transition";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from '.';
+	import { Cross2 } from 'radix-icons-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";
+	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"];
+	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>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-description.svelte b/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
index 6b348a5..5b5d4bb 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SheetPrimitive.DescriptionProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </SheetPrimitive.Description>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte b/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
index 3c41773..da4f517 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	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)}
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-header.svelte b/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
index b83aaad..40dfb92 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
+	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}>
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
 	<slot />
 </div>
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte b/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
index 416468d..77e4cf1 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
-	import { fade } from "svelte/transition";
+	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;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
-	export let transition: $$Props["transition"] = fade;
-	export let transitionConfig: $$Props["transitionConfig"] = {
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
 		duration: 150
 	};
 </script>
@@ -16,6 +16,6 @@
 <SheetPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
 	{...$$restProps}
 />
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte b/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
index df9e1b9..e7865dc 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SheetPrimitive.PortalProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
diff --git a/apps/web/src/lib/components/ui/sheet/sheet-title.svelte b/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
index b50ea5f..932b059 100644
--- a/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/apps/web/src/lib/components/ui/sheet/sheet-title.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SheetPrimitive.TitleProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <SheetPrimitive.Title
-	class={cn("text-lg font-semibold text-foreground", className)}
+	class={cn('text-lg font-semibold text-foreground', className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/apps/web/src/lib/components/ui/switch/index.ts b/apps/web/src/lib/components/ui/switch/index.ts
index f0e5fb7..129f8f5 100644
--- a/apps/web/src/lib/components/ui/switch/index.ts
+++ b/apps/web/src/lib/components/ui/switch/index.ts
@@ -1,4 +1,4 @@
-import Root from "./switch.svelte";
+import Root from './switch.svelte';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/switch/switch.svelte b/apps/web/src/lib/components/ui/switch/switch.svelte
index 2affdc2..98ddabc 100644
--- a/apps/web/src/lib/components/ui/switch/switch.svelte
+++ b/apps/web/src/lib/components/ui/switch/switch.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils";
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
 
 	type $$Props = SwitchPrimitive.Props;
 	type $$Events = SwitchPrimitive.Events;
 
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
 	export { className as class };
 </script>
 
 <SwitchPrimitive.Root
 	bind:checked
 	class={cn(
-		"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
 		className
 	)}
 	{...$$restProps}
@@ -22,7 +22,7 @@
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+			'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>
diff --git a/apps/web/src/lib/components/ui/table/index.ts b/apps/web/src/lib/components/ui/table/index.ts
index 450c9b3..99239ae 100644
--- a/apps/web/src/lib/components/ui/table/index.ts
+++ b/apps/web/src/lib/components/ui/table/index.ts
@@ -1,11 +1,11 @@
-import Root from "./table.svelte";
-import Body from "./table-body.svelte";
-import Caption from "./table-caption.svelte";
-import Cell from "./table-cell.svelte";
-import Footer from "./table-footer.svelte";
-import Head from "./table-head.svelte";
-import Header from "./table-header.svelte";
-import Row from "./table-row.svelte";
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
 
 export {
 	Root,
diff --git a/apps/web/src/lib/components/ui/table/table-body.svelte b/apps/web/src/lib/components/ui/table/table-body.svelte
index 310d74d..14be6d6 100644
--- a/apps/web/src/lib/components/ui/table/table-body.svelte
+++ b/apps/web/src/lib/components/ui/table/table-body.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<tbody class={cn("[&_tr:last-child]:border-0", className)} {...$$restProps}>
+<tbody class={cn('[&_tr:last-child]:border-0', className)} {...$$restProps}>
 	<slot />
 </tbody>
diff --git a/apps/web/src/lib/components/ui/table/table-caption.svelte b/apps/web/src/lib/components/ui/table/table-caption.svelte
index ef78745..fa76b07 100644
--- a/apps/web/src/lib/components/ui/table/table-caption.svelte
+++ b/apps/web/src/lib/components/ui/table/table-caption.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableCaptionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
+<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
 	<slot />
 </caption>
diff --git a/apps/web/src/lib/components/ui/table/table-cell.svelte b/apps/web/src/lib/components/ui/table/table-cell.svelte
index f2b50d1..bb24cf6 100644
--- a/apps/web/src/lib/components/ui/table/table-cell.svelte
+++ b/apps/web/src/lib/components/ui/table/table-cell.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLTdAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLTdAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLTdAttributes;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <td
 	class={cn(
-		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/table/table-footer.svelte b/apps/web/src/lib/components/ui/table/table-footer.svelte
index b0f063a..97e65f5 100644
--- a/apps/web/src/lib/components/ui/table/table-footer.svelte
+++ b/apps/web/src/lib/components/ui/table/table-footer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
-<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
+<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
 	<slot />
 </tfoot>
diff --git a/apps/web/src/lib/components/ui/table/table-head.svelte b/apps/web/src/lib/components/ui/table/table-head.svelte
index fbdae24..dd444dc 100644
--- a/apps/web/src/lib/components/ui/table/table-head.svelte
+++ b/apps/web/src/lib/components/ui/table/table-head.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLThAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLThAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLThAttributes;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <th
 	class={cn(
-		"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/table/table-header.svelte b/apps/web/src/lib/components/ui/table/table-header.svelte
index 9afb7ab..0d275af 100644
--- a/apps/web/src/lib/components/ui/table/table-header.svelte
+++ b/apps/web/src/lib/components/ui/table/table-header.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableSectionElement>;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<thead class={cn("[&_tr]:border-b", className)} {...$$restProps} on:click on:keydown>
+<thead class={cn('[&_tr]:border-b', className)} {...$$restProps} on:click on:keydown>
 	<slot />
 </thead>
diff --git a/apps/web/src/lib/components/ui/table/table-row.svelte b/apps/web/src/lib/components/ui/table/table-row.svelte
index f3c2de3..16d498b 100644
--- a/apps/web/src/lib/components/ui/table/table-row.svelte
+++ b/apps/web/src/lib/components/ui/table/table-row.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLAttributes<HTMLTableRowElement> & {
-		"data-state"?: unknown;
+		'data-state'?: unknown;
 	};
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <tr
 	class={cn(
-		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
 		className
 	)}
 	{...$$restProps}
diff --git a/apps/web/src/lib/components/ui/table/table.svelte b/apps/web/src/lib/components/ui/table/table.svelte
index 2cc798c..4419e49 100644
--- a/apps/web/src/lib/components/ui/table/table.svelte
+++ b/apps/web/src/lib/components/ui/table/table.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLTableAttributes } from 'svelte/elements';
 
 	type $$Props = HTMLTableAttributes;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <div class="w-full overflow-auto">
-	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
+	<table class={cn('w-full caption-bottom text-sm', className)} {...$$restProps}>
 		<slot />
 	</table>
 </div>
diff --git a/apps/web/src/lib/components/ui/textarea/index.ts b/apps/web/src/lib/components/ui/textarea/index.ts
index eb0f7be..eac4cc5 100644
--- a/apps/web/src/lib/components/ui/textarea/index.ts
+++ b/apps/web/src/lib/components/ui/textarea/index.ts
@@ -1,4 +1,4 @@
-import Root from "./textarea.svelte";
+import Root from './textarea.svelte';
 
 type FormTextareaEvent<T extends Event = Event> = T & {
 	currentTarget: EventTarget & HTMLTextAreaElement;
diff --git a/apps/web/src/lib/components/ui/textarea/textarea.svelte b/apps/web/src/lib/components/ui/textarea/textarea.svelte
index 833f745..3b99573 100644
--- a/apps/web/src/lib/components/ui/textarea/textarea.svelte
+++ b/apps/web/src/lib/components/ui/textarea/textarea.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils";
-	import type { TextareaEvents } from ".";
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils';
+	import type { TextareaEvents } from '.';
 
 	type $$Props = HTMLTextareaAttributes;
 	type $$Events = TextareaEvents;
 
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let value: $$Props['value'] = undefined;
 	export { className as class };
 </script>
 
 <textarea
 	class={cn(
-		"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:value
diff --git a/apps/web/src/lib/config/nav.ts b/apps/web/src/lib/config/nav.ts
index 04d1472..4867ff9 100644
--- a/apps/web/src/lib/config/nav.ts
+++ b/apps/web/src/lib/config/nav.ts
@@ -16,7 +16,7 @@ export const navConfig: NavConfig = {
 			title: 'Dashboard',
 			href: '/dashboard',
 			auth: true
-		},
+		}
 	],
 	sidebarNav: []
 };
diff --git a/apps/web/src/lib/config/site.ts b/apps/web/src/lib/config/site.ts
index 8e8bd23..3f4385a 100644
--- a/apps/web/src/lib/config/site.ts
+++ b/apps/web/src/lib/config/site.ts
@@ -9,9 +9,9 @@ export const siteConfig = {
 	ogImage: `https://${SITE_URL}/og.png`,
 	links: {
 		gitHubProfile: 'https://github.com/bartvdbraak',
-		gitHubProject: 'https://github.com/bartvdbraak/omnidash',
+		gitHubProject: 'https://github.com/bartvdbraak/omnidash'
 	},
-	keywords: `Ticket,Dashboard,Self-hosted,${SITE_URL},Bart van der Braak,Omnidash`,
+	keywords: `Ticket,Dashboard,Self-hosted,${SITE_URL},Bart van der Braak,Omnidash`
 };
 
 export type SiteConfig = typeof siteConfig;
diff --git a/apps/web/src/lib/pocketbase.ts b/apps/web/src/lib/pocketbase.ts
index a916695..8cc73e7 100644
--- a/apps/web/src/lib/pocketbase.ts
+++ b/apps/web/src/lib/pocketbase.ts
@@ -26,4 +26,4 @@ export const pb = writable<PocketBase | undefined>(undefined, (set) => {
 //   if (typeof model.avatar !== 'string' || !model.avatar) return undefined;
 
 //   return pocketbase.getFileUrl(model, model.avatar);
-// }
\ 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
index dbbe1ad..9b99930 100644
--- a/apps/web/src/routes/(auth)/login/+page.server.ts
+++ b/apps/web/src/routes/(auth)/login/+page.server.ts
@@ -4,7 +4,7 @@ import type { Actions } from './$types';
 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();
 			const password = body.password.toString();
@@ -21,7 +21,7 @@ export const actions = {
 		}
 
 		throw redirect(303, '/');
-	},
+	}
 	// TODO: Implement MS Auth
 	// msauth: async ({ request, cookies }) => {
 	// 	const form = await request.formData();
diff --git a/apps/web/src/routes/(auth)/login/+page.svelte b/apps/web/src/routes/(auth)/login/+page.svelte
index 1aa2b61..11a77e7 100644
--- a/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/web/src/routes/(auth)/login/+page.svelte
@@ -31,12 +31,17 @@
 	<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">
+			<p class="text-sm text-muted-foreground">
 				Enter your email and password below to log into your account
 			</p>
 		</div>
 		<div class={cn('grid gap-6')} {...$$restProps}>
-			<form method="POST" use:enhance={() => { isLoading = true; }}>
+			<form
+				method="POST"
+				use:enhance={() => {
+					isLoading = true;
+				}}
+			>
 				<div class="grid gap-2">
 					<div class="grid gap-1">
 						<Label class="sr-only" for="email">Email</Label>
@@ -80,7 +85,7 @@
 					<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"> Or continue with </span>
+					<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
 				</div>
 			</div>
 			<form action="/?msauth" method="POST">
@@ -95,7 +100,7 @@
 				</Button>
 			</form>
 		</div>
-		<p class="text-muted-foreground px-8 text-center text-sm">
+		<p class="px-8 text-center text-sm text-muted-foreground">
 			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>
diff --git a/apps/web/src/routes/(auth)/logout/+server.ts b/apps/web/src/routes/(auth)/logout/+server.ts
index bb4dc0e..44953cc 100644
--- a/apps/web/src/routes/(auth)/logout/+server.ts
+++ b/apps/web/src/routes/(auth)/logout/+server.ts
@@ -1,6 +1,6 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect } from '@sveltejs/kit';
 
-export const GET = ({locals}: {locals: App.Locals}) => {
-  locals.pocketBase.authStore.clear();
-  throw redirect(303, '/login');
-}
\ No newline at end of file
+export const GET = ({ locals }: { locals: App.Locals }) => {
+	locals.pocketBase.authStore.clear();
+	throw redirect(303, '/login');
+};
diff --git a/apps/web/src/routes/(auth)/register/+page.svelte b/apps/web/src/routes/(auth)/register/+page.svelte
index 2bc6e1f..1974745 100644
--- a/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps/web/src/routes/(auth)/register/+page.svelte
@@ -13,22 +13,19 @@
 	<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-muted-foreground text-sm">
-				Enter your details below to create a new account
-			</p>
+			<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; }}>
+			<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}
-						/>
+						<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>
@@ -45,13 +42,25 @@
 					</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" />
+						<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" />
+						<Input
+							id="password"
+							name="passwordConfirm"
+							type="password"
+							disabled={isLoading}
+							placeholder="Confirm password"
+						/>
 					</div>
-					<Button type="submit" disabled={isLoading} on:click={() => isLoading = true}>
+					<Button type="submit" disabled={isLoading} on:click={() => (isLoading = true)}>
 						{#if isLoading}
 							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
 						{/if}
@@ -64,7 +73,7 @@
 					<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"> Or continue with </span>
+					<span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
 				</div>
 			</div>
 			<Button variant="outline" type="button" disabled={true}>
@@ -77,8 +86,9 @@
 				Microsoft
 			</Button>
 		</div>
-		<p class="text-muted-foreground px-8 text-center text-sm">
-			Or <a class="text-primary underline" href="/login">sign in</a> if you already have an account.<br />
+		<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>
diff --git a/apps/web/src/routes/(auth)/reset-password/+page.server.ts b/apps/web/src/routes/(auth)/reset-password/+page.server.ts
index b581ae6..949e62b 100644
--- a/apps/web/src/routes/(auth)/reset-password/+page.server.ts
+++ b/apps/web/src/routes/(auth)/reset-password/+page.server.ts
@@ -15,4 +15,4 @@ export const actions = {
 			throw error(500, 'Something went wrong');
 		}
 	}
-};
\ No newline at end of file
+};
diff --git a/apps/web/src/routes/(auth)/reset-password/+page.svelte b/apps/web/src/routes/(auth)/reset-password/+page.svelte
index b6d80b4..f81d318 100644
--- a/apps/web/src/routes/(auth)/reset-password/+page.svelte
+++ b/apps/web/src/routes/(auth)/reset-password/+page.svelte
@@ -5,8 +5,8 @@
 	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";
+	import { CheckCircled } from 'radix-icons-svelte';
+	import * as Alert from '$lib/components/ui/alert';
 
 	let isLoading = false;
 	export let form;
@@ -16,16 +16,21 @@
 	<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-muted-foreground text-sm">
+			<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();
-				}; }}>
+			<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>
@@ -50,9 +55,7 @@
 				{#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.Description>An email has been sent to reset your password.</Alert.Description>
 					</Alert.Root>
 				{/if}
 			</form>
diff --git a/apps/web/src/routes/(dashboard)/+layout.server.ts b/apps/web/src/routes/(dashboard)/+layout.server.ts
index 99b7112..ec58979 100644
--- a/apps/web/src/routes/(dashboard)/+layout.server.ts
+++ b/apps/web/src/routes/(dashboard)/+layout.server.ts
@@ -1,9 +1,9 @@
 import { redirect } from '@sveltejs/kit';
 
-export const load = (async ({ locals }: { locals: App.Locals }) => {
+export const load = async ({ locals }: { locals: App.Locals }) => {
 	if (!locals.pocketBase.authStore.isValid) {
 		throw redirect(303, '/register');
 	}
 
 	return {};
-})
\ No newline at end of file
+};
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte
index ed949e3..85e7c9f 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-checkbox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Checkbox } from "$lib/components/ui/checkbox";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-	import type { Writable } from "svelte/store";
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { Writable } from 'svelte/store';
 
 	type $$Props = HTMLButtonAttributes & {
 		checked: Writable<boolean>;
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte
index 55edb0c..dcc06f9 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-column-header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { ArrowDown, ArrowUp, CaretSort } from "radix-icons-svelte";
-	import { cn } from "$lib/utils";
-	import { Button } from "$lib/components/ui/button";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+	import { ArrowDown, ArrowUp, CaretSort } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
 	export let props: {
 		select: never;
 		sort: {
-			order: "desc" | "asc" | undefined;
+			order: 'desc' | 'asc' | undefined;
 			toggle: (event: Event) => void;
 			clear: () => void;
 			disabled: boolean;
@@ -18,14 +18,14 @@
 	};
 
 	function handleAscSort(e: Event) {
-		if (props.sort.order === "asc") {
+		if (props.sort.order === 'asc') {
 			return;
 		}
 		props.sort.toggle(e);
 	}
 
 	function handleDescSort(e: Event) {
-		if (props.sort.order === "desc") {
+		if (props.sort.order === 'desc') {
 			return;
 		}
 		props.sort.toggle(e);
@@ -33,18 +33,14 @@
 </script>
 
 {#if !props.sort.disabled}
-	<div class={cn("flex items-center", className)}>
+	<div class={cn('flex items-center', className)}>
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
-				<Button
-					variant="ghost"
-					builders={[builder]}
-					class="-ml-3 h-8 data-[state=open]:bg-accent"
-				>
+				<Button variant="ghost" builders={[builder]} class="-ml-3 h-8 data-[state=open]:bg-accent">
 					<slot />
-					{#if props.sort.order === "desc"}
+					{#if props.sort.order === 'desc'}
 						<ArrowDown class="ml-2 h-4 w-4" />
-					{:else if props.sort.order === "asc"}
+					{:else if props.sort.order === 'asc'}
 						<ArrowUp class="ml-2 h-4 w-4" />
 					{:else}
 						<CaretSort class="ml-2 h-4 w-4" />
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte
index d5e64f0..a558a3c 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-faceted-filter.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { PlusCircled, Check } from "radix-icons-svelte";
-	import * as Command from "$lib/components/ui/command";
-	import * as Popover from "$lib/components/ui/popover";
-	import { Button } from "$lib/components/ui/button";
-	import { cn } from "$lib/utils";
-	import Separator from "$lib/components/ui/separator/separator.svelte";
-	import Badge from "$lib/components/ui/badge/badge.svelte";
-	import type { statuses } from "../(data)/data";
+	import { PlusCircled, Check } from 'radix-icons-svelte';
+	import * as Command from '$lib/components/ui/command';
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import type { statuses } from '../(data)/data';
 
 	export let filterValues: string[] = [];
 	export let title: string;
@@ -65,13 +65,13 @@
 						>
 							<div
 								class={cn(
-									"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+									'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
 									filterValues.includes(option.value)
-										? "bg-primary text-primary-foreground"
-										: "opacity-50 [&_svg]:invisible"
+										? 'bg-primary text-primary-foreground'
+										: 'opacity-50 [&_svg]:invisible'
 								)}
 							>
-								<Check className={cn("h-4 w-4")} />
+								<Check className={cn('h-4 w-4')} />
 							</div>
 							<span>
 								{option.label}
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte
index 282a47d..591d197 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-pagination.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button";
-	import {
-		ChevronRight,
-		ChevronLeft,
-		DoubleArrowRight,
-		DoubleArrowLeft
-	} from "radix-icons-svelte";
-	import * as Select from "$lib/components/ui/select";
-	import type { Ticket } from "../(data)/schemas";
-	import type { AnyPlugins } from "svelte-headless-table/plugins";
-	import type { TableViewModel } from "svelte-headless-table";
+	import { Button } from '$lib/components/ui/button';
+	import { ChevronRight, ChevronLeft, DoubleArrowRight, DoubleArrowLeft } from 'radix-icons-svelte';
+	import * as Select from '$lib/components/ui/select';
+	import type { Ticket } from '../(data)/schemas';
+	import type { AnyPlugins } from 'svelte-headless-table/plugins';
+	import type { TableViewModel } from 'svelte-headless-table';
+	import { defaultPageSize } from '.';
 
 	export let tableModel: TableViewModel<Ticket, AnyPlugins>;
 
@@ -22,7 +18,7 @@
 
 <div class="flex items-center justify-between px-2">
 	<div class="flex-1 text-sm text-muted-foreground">
-		{Object.keys($selectedDataIds).length} of{" "}
+		{Object.keys($selectedDataIds).length} of{' '}
 		{$rows.length} row(s) selected.
 	</div>
 	<div class="flex items-center space-x-6 lg:space-x-8">
@@ -30,7 +26,7 @@
 			<p class="text-sm font-medium">Rows per page</p>
 			<Select.Root
 				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
-				selected={{ value: 10, label: "10" }}
+				selected={{ value: defaultPageSize, label: defaultPageSize.toString() }}
 			>
 				<Select.Trigger class="w-[180px]">
 					<Select.Value placeholder="Select page size" />
@@ -41,6 +37,7 @@
 					<Select.Item value="30">30</Select.Item>
 					<Select.Item value="40">40</Select.Item>
 					<Select.Item value="50">50</Select.Item>
+					<Select.Item value="100">100</Select.Item>
 				</Select.Content>
 			</Select.Root>
 		</div>
@@ -59,7 +56,7 @@
 			</Button>
 			<Button
 				variant="outline"
-				class="p-0 w-8 h-8"
+				class="h-8 w-8 p-0"
 				on:click={() => ($pageIndex = $pageIndex - 1)}
 				disabled={!$hasPreviousPage}
 			>
@@ -68,9 +65,9 @@
 			</Button>
 			<Button
 				variant="outline"
-				class="p-0 w-8 h-8"
-				disabled={!$hasNextPage}
+				class="h-8 w-8 p-0"
 				on:click={() => ($pageIndex = $pageIndex + 1)}
+				disabled={!$hasNextPage}
 			>
 				<span class="sr-only">Go to next page</span>
 				<ChevronRight size={15} />
@@ -78,8 +75,8 @@
 			<Button
 				variant="outline"
 				class="hidden h-8 w-8 p-0 lg:flex"
-				disabled={!$hasNextPage}
 				on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
+				disabled={!$hasNextPage}
 			>
 				<span class="sr-only">Go to last page</span>
 				<DoubleArrowRight size={15} />
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte
index 771512c..3aa1248 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-priority-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { priorities } from "../(data)/data";
+	import { priorities } from '../(data)/data';
 	export let value: string;
 	const priority = priorities.find((priority) => priority.value === value);
 	const Icon = priority?.icon;
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte
index 1b8b501..65084bc 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-row-actions.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { DotsHorizontal } from "radix-icons-svelte";
-	import { Button } from "$lib/components/ui/button";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-	import { labels } from "../(data)/data";
-	import { ticketSchema, type Ticket } from "../(data)/schemas";
+	import { DotsHorizontal } from 'radix-icons-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { labels } from '../(data)/data';
+	import { ticketSchema, type Ticket } from '../(data)/schemas';
 
 	export let row: Ticket;
-	const task = ticketSchema.parse(row);
+	const ticket = ticketSchema.parse(row);
 </script>
 
 <DropdownMenu.Root>
@@ -28,7 +28,7 @@
 		<DropdownMenu.Sub>
 			<DropdownMenu.SubTrigger>Labels</DropdownMenu.SubTrigger>
 			<DropdownMenu.SubContent>
-				<DropdownMenu.RadioGroup value={task.label}>
+				<DropdownMenu.RadioGroup value={ticket.label}>
 					{#each labels as label}
 						<DropdownMenu.RadioItem value={label.value}>
 							{label.label}
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte
index 4457f64..0780d8d 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-status-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { statuses } from "../(data)/data";
+	import { statuses } from '../(data)/data';
 
 	export let value: string;
 	const status = statuses.find((status) => status.value === value);
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte
index 6e4fc5d..f2c0bef 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-title-cell.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Badge } from "$lib/components/ui/badge";
-	import { labels } from "../(data)/data";
+	import { Badge } from '$lib/components/ui/badge';
+	import { labels } from '../(data)/data';
 
 	export let value: string;
 	export let labelValue: string;
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte
index cdda69f..33e3ba1 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-toolbar.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { Input } from "$lib/components/ui/input";
-	import { DataTableFacetedFilter, DataTableViewOptions } from ".";
-	import type { Ticket } from "../(data)/schemas";
-	import Button from "$lib/components/ui/button/button.svelte";
-	import { Cross2 } from "radix-icons-svelte";
-	import { statuses, priorities } from "../(data)/data";
-	import type { Writable } from "svelte/store";
-	import type { TableViewModel } from "svelte-headless-table";
-	import type { AnyPlugins } from "svelte-headless-table/plugins";
+	import { Input } from '$lib/components/ui/input';
+	import { DataTableFacetedFilter, DataTableViewOptions } from '.';
+	import type { Ticket } from '../(data)/schemas';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { Cross2 } from 'radix-icons-svelte';
+	import { statuses, priorities } from '../(data)/data';
+	import type { Writable } from 'svelte/store';
+	import type { TableViewModel } from 'svelte-headless-table';
+	import type { AnyPlugins } from 'svelte-headless-table/plugins';
 
 	export let tableModel: TableViewModel<Ticket, AnyPlugins>;
 
@@ -33,7 +33,7 @@
 <div class="flex items-center justify-between">
 	<div class="flex flex-1 items-center space-x-2">
 		<Input
-			placeholder="Filter tasks..."
+			placeholder="Filter tickets..."
 			class="h-8 w-[150px] lg:w-[250px]"
 			type="search"
 			bind:value={$filterValue}
@@ -52,7 +52,7 @@
 		{#if showReset}
 			<Button
 				on:click={() => {
-					$filterValue = "";
+					$filterValue = '';
 					$filterValues.status = [];
 					$filterValues.priority = [];
 				}}
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte
index 361b6f9..023f4bc 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table-view-options.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { MixerHorizontal } from "radix-icons-svelte";
-	import { Button } from "$lib/components/ui/button";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-	import type { Ticket } from "../(data)/schemas";
-	import type { TableViewModel } from "svelte-headless-table";
-	import type { AnyPlugins } from "svelte-headless-table/plugins";
+	import { MixerHorizontal } from 'radix-icons-svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import type { Ticket } from '../(data)/schemas';
+	import type { TableViewModel } from 'svelte-headless-table';
+	import type { AnyPlugins } from 'svelte-headless-table/plugins';
 
 	export let tableModel: TableViewModel<Ticket, AnyPlugins>;
 	const { pluginStates, flatColumns } = tableModel;
@@ -18,7 +18,7 @@
 		.filter(([, hide]) => !hide)
 		.map(([id]) => id);
 
-	const hidableCols = ["title", "status", "priority"];
+	const hidableCols = ['title', 'status', 'priority'];
 </script>
 
 <DropdownMenu.Root>
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table.svelte b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table.svelte
index 27cc0c9..679782a 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/data-table.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { get, readable } from "svelte/store";
-	import { Render, Subscribe, createRender, createTable } from "svelte-headless-table";
-	import * as Table from "$lib/components/ui/table";
+	import { get, readable } from 'svelte/store';
+	import { Render, Subscribe, createRender, createTable } from 'svelte-headless-table';
+	import * as Table from '$lib/components/ui/table';
 	import {
 		addColumnFilters,
 		addHiddenColumns,
@@ -9,7 +9,7 @@
 		addSelectedRows,
 		addSortBy,
 		addTableFilter
-	} from "svelte-headless-table/plugins";
+	} from 'svelte-headless-table/plugins';
 	import {
 		DataTableCheckbox,
 		DataTableTitleCell,
@@ -18,19 +18,20 @@
 		DataTablePriorityCell,
 		DataTableColumnHeader,
 		DataTableToolbar,
-		DataTablePagination
-	} from ".";
+		DataTablePagination,
+		defaultPageSize
+	} from '.';
 
-	import type { Ticket } from "../(data)/schemas";
+	import type { Ticket } from '../(data)/schemas';
 
 	export let data: Ticket[];
 
 	const table = createTable(readable(data), {
 		select: addSelectedRows(),
 		sort: addSortBy({
-			toggleOrder: ["asc", "desc"]
+			toggleOrder: ['asc', 'desc']
 		}),
-		page: addPagination(),
+		page: addPagination({ initialPageSize: defaultPageSize }),
 		filter: addTableFilter({
 			fn: ({ filterValue, value }) => {
 				return value.toLowerCase().includes(filterValue.toLowerCase());
@@ -42,12 +43,12 @@
 
 	const columns = table.createColumns([
 		table.display({
-			id: "select",
+			id: 'select',
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected,
-					"aria-label": "Select all"
+					'aria-label': 'Select all'
 				});
 			},
 			cell: ({ row }, { pluginStates }) => {
@@ -55,8 +56,8 @@
 				const { isSelected } = getRowState(row);
 				return createRender(DataTableCheckbox, {
 					checked: isSelected,
-					"aria-label": "Select row",
-					class: "translate-y-[2px]"
+					'aria-label': 'Select row',
+					class: 'translate-y-[2px]'
 				});
 			},
 			plugins: {
@@ -66,11 +67,11 @@
 			}
 		}),
 		table.column({
-			accessor: "id",
+			accessor: 'id',
 			header: () => {
-				return "Task";
+				return 'Ticket ID';
 			},
-			id: "task",
+			id: 'ticket',
 			plugins: {
 				sort: {
 					disable: true
@@ -78,9 +79,9 @@
 			}
 		}),
 		table.column({
-			accessor: "title",
-			header: "Title",
-			id: "title",
+			accessor: 'title',
+			header: 'Title',
+			id: 'title',
 			cell: ({ value, row }) => {
 				if (row.isData()) {
 					return createRender(DataTableTitleCell, {
@@ -92,9 +93,9 @@
 			}
 		}),
 		table.column({
-			accessor: "status",
-			header: "Status",
-			id: "status",
+			accessor: 'status',
+			header: 'Status',
+			id: 'status',
 			cell: ({ value }) => {
 				return createRender(DataTableStatusCell, {
 					value
@@ -104,7 +105,7 @@
 				colFilter: {
 					fn: ({ filterValue, value }) => {
 						if (filterValue.length === 0) return true;
-						if (!Array.isArray(filterValue) || typeof value !== "string") return true;
+						if (!Array.isArray(filterValue) || typeof value !== 'string') return true;
 						return filterValue.some((filter) => {
 							return value.includes(filter);
 						});
@@ -117,9 +118,9 @@
 			}
 		}),
 		table.column({
-			accessor: "priority",
-			id: "priority",
-			header: "Priority",
+			accessor: 'priority',
+			id: 'priority',
+			header: 'Priority',
 			cell: ({ value }) => {
 				return createRender(DataTablePriorityCell, {
 					value
@@ -129,7 +130,7 @@
 				colFilter: {
 					fn: ({ filterValue, value }) => {
 						if (filterValue.length === 0) return true;
-						if (!Array.isArray(filterValue) || typeof value !== "string") return true;
+						if (!Array.isArray(filterValue) || typeof value !== 'string') return true;
 
 						return filterValue.some((filter) => {
 							return value.includes(filter);
@@ -143,9 +144,9 @@
 			}
 		}),
 		table.display({
-			id: "actions",
+			id: 'actions',
 			header: () => {
-				return "";
+				return '';
 			},
 			cell: ({ row }) => {
 				if (row.isData() && row.original) {
@@ -153,7 +154,7 @@
 						row: row.original
 					});
 				}
-				return "";
+				return '';
 			}
 		})
 	]);
@@ -172,18 +173,11 @@
 					<Subscribe rowAttrs={headerRow.attrs()}>
 						<Table.Row>
 							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe
-									attrs={cell.attrs()}
-									let:attrs
-									props={cell.props()}
-									let:props
-								>
+								<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
 									<Table.Head {...attrs}>
-										{#if cell.id !== "select" && cell.id !== "actions"}
+										{#if cell.id !== 'select' && cell.id !== 'actions'}
 											<DataTableColumnHeader {props}
-												><Render
-													of={cell.render()}
-												/></DataTableColumnHeader
+												><Render of={cell.render()} /></DataTableColumnHeader
 											>
 										{:else}
 											<Render of={cell.render()} />
@@ -202,7 +196,7 @@
 							{#each row.cells as cell (cell.id)}
 								<Subscribe attrs={cell.attrs()} let:attrs>
 									<Table.Cell {...attrs}>
-										{#if cell.id === "task"}
+										{#if cell.id === 'ticket'}
 											<div class="w-[80px]">
 												<Render of={cell.render()} />
 											</div>
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(components)/index.ts b/apps/web/src/routes/(dashboard)/dashboard/(components)/index.ts
index f502101..27456d1 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(components)/index.ts
+++ b/apps/web/src/routes/(dashboard)/dashboard/(components)/index.ts
@@ -1,10 +1,12 @@
-export { default as DataTableCheckbox } from "./data-table-checkbox.svelte";
-export { default as DataTableTitleCell } from "./data-table-title-cell.svelte";
-export { default as DataTableStatusCell } from "./data-table-status-cell.svelte";
-export { default as DataTableRowActions } from "./data-table-row-actions.svelte";
-export { default as DataTablePriorityCell } from "./data-table-priority-cell.svelte";
-export { default as DataTableColumnHeader } from "./data-table-column-header.svelte";
-export { default as DataTableToolbar } from "./data-table-toolbar.svelte";
-export { default as DataTablePagination } from "./data-table-pagination.svelte";
-export { default as DataTableViewOptions } from "./data-table-view-options.svelte";
-export { default as DataTableFacetedFilter } from "./data-table-faceted-filter.svelte";
+export { default as DataTableCheckbox } from './data-table-checkbox.svelte';
+export { default as DataTableTitleCell } from './data-table-title-cell.svelte';
+export { default as DataTableStatusCell } from './data-table-status-cell.svelte';
+export { default as DataTableRowActions } from './data-table-row-actions.svelte';
+export { default as DataTablePriorityCell } from './data-table-priority-cell.svelte';
+export { default as DataTableColumnHeader } from './data-table-column-header.svelte';
+export { default as DataTableToolbar } from './data-table-toolbar.svelte';
+export { default as DataTablePagination } from './data-table-pagination.svelte';
+export { default as DataTableViewOptions } from './data-table-view-options.svelte';
+export { default as DataTableFacetedFilter } from './data-table-faceted-filter.svelte';
+
+export const defaultPageSize = 15;
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(data)/data.ts b/apps/web/src/routes/(dashboard)/dashboard/(data)/data.ts
index 3a8bccd..07096b8 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(data)/data.ts
+++ b/apps/web/src/routes/(dashboard)/dashboard/(data)/data.ts
@@ -7,65 +7,65 @@ import {
 	CrossCircled,
 	QuestionMarkCircled,
 	Stopwatch
-} from "radix-icons-svelte";
+} from 'radix-icons-svelte';
 
 export const labels = [
 	{
-		value: "bug",
-		label: "Incident"
+		value: 'bug',
+		label: 'Incident'
 	},
 	{
-		value: "feature",
-		label: "Change"
+		value: 'feature',
+		label: 'Change'
 	},
 	{
-		value: "documentation",
-		label: "Information"
+		value: 'documentation',
+		label: 'Information'
 	}
 ];
 
 export const statuses = [
 	{
-		value: "backlog",
-		label: "Backlog",
+		value: 'backlog',
+		label: 'Backlog',
 		icon: QuestionMarkCircled
 	},
 	{
-		value: "todo",
-		label: "Todo",
+		value: 'todo',
+		label: 'Todo',
 		icon: Circle
 	},
 	{
-		value: "in progress",
-		label: "In Progress",
+		value: 'in progress',
+		label: 'In Progress',
 		icon: Stopwatch
 	},
 	{
-		value: "done",
-		label: "Done",
+		value: 'done',
+		label: 'Done',
 		icon: CheckCircled
 	},
 	{
-		value: "canceled",
-		label: "Canceled",
+		value: 'canceled',
+		label: 'Canceled',
 		icon: CrossCircled
 	}
 ];
 
 export const priorities = [
 	{
-		label: "Low",
-		value: "low",
+		label: 'Low',
+		value: 'low',
 		icon: ArrowDown
 	},
 	{
-		label: "Medium",
-		value: "medium",
+		label: 'Medium',
+		value: 'medium',
 		icon: ArrowRight
 	},
 	{
-		label: "High",
-		value: "high",
+		label: 'High',
+		value: 'high',
 		icon: ArrowUp
 	}
 ];
diff --git a/apps/web/src/routes/(dashboard)/dashboard/(data)/schemas.ts b/apps/web/src/routes/(dashboard)/dashboard/(data)/schemas.ts
index 9ebdc68..35be58b 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/(data)/schemas.ts
+++ b/apps/web/src/routes/(dashboard)/dashboard/(data)/schemas.ts
@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 // We're keeping a simple non-relational schema here.
 // IRL, you will have a schema for your data models.
@@ -10,7 +10,7 @@ export const ticketSchema = z.object({
 	label: z.string(),
 	// createdAt: z.date(),
 	// updatedAt: z.date(),
-	priority: z.string(), // z.number().min(0).max(4),
+	priority: z.string() // z.number().min(0).max(4),
 	// source: z.number(),
 	// assignee: z.string(),
 });
diff --git a/apps/web/src/routes/(dashboard)/dashboard/+layout.svelte b/apps/web/src/routes/(dashboard)/dashboard/+layout.svelte
new file mode 100644
index 0000000..35dd0d7
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/dashboard/+layout.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Separator from '$lib/components/ui/separator/separator.svelte';
+</script>
+
+<div class="space-y-6 p-10 pb-16 md:block">
+	<div class="space-y-0.5">
+		<h2 class="text-2xl font-bold tracking-tight">Dashboard</h2>
+		<p class="text-muted-foreground">
+			Utilize the filtering options and actions to manage your tickets.
+		</p>
+	</div>
+	<Separator class="my-6" />
+	<slot />
+</div>
diff --git a/apps/web/src/routes/(dashboard)/dashboard/+page.svelte b/apps/web/src/routes/(dashboard)/dashboard/+page.svelte
index 730459b..4d7cd18 100644
--- a/apps/web/src/routes/(dashboard)/dashboard/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/dashboard/+page.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-	import DataTable from "./(components)/data-table.svelte";
-	import ticketData from "./(data)/tickets.json";
+	import DataTable from './(components)/data-table.svelte';
+	import ticketData from './(data)/tickets.json';
 </script>
 
-<div class="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
-	<div class="flex items-center justify-between space-y-2">
-		<div>
-			<h2 class="text-2xl font-bold tracking-tight">Dashboard</h2>
-		</div>
-	</div>
+<div class="space-y-6">
 	<DataTable data={ticketData} />
 </div>
diff --git a/apps/web/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte b/apps/web/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte
index 97448cc..8ad6beb 100644
--- a/apps/web/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/(components)/sidebar-nav.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import { page } from "$app/stores";
-	import { Button } from "$lib/components/ui/button";
-	import { cubicInOut } from "svelte/easing";
-	import { crossfade } from "svelte/transition";
+	import { cn } from '$lib/utils';
+	import { page } from '$app/stores';
+	import { Button } from '$lib/components/ui/button';
+	import { cubicInOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
 
 	let className: string | undefined | null = undefined;
 	export let items: { href: string; title: string }[];
@@ -15,24 +15,21 @@
 	});
 </script>
 
-<nav class={cn("flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1", className)}>
+<nav class={cn('flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1', className)}>
 	{#each items as item}
 		{@const isActive = $page.url.pathname === item.href}
 
 		<Button
 			href={item.href}
 			variant="ghost"
-			class={cn(
-				!isActive && "hover:underline",
-				"relative justify-start hover:bg-transparent"
-			)}
+			class={cn(!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent')}
 			data-sveltekit-noscroll
 		>
 			{#if isActive}
 				<div
 					class="absolute inset-0 rounded-md bg-muted"
-					in:send={{ key: "active-sidebar-tab" }}
-					out:receive={{ key: "active-sidebar-tab" }}
+					in:send={{ key: 'active-sidebar-tab' }}
+					out:receive={{ key: 'active-sidebar-tab' }}
 				/>
 			{/if}
 			<div class="relative">
diff --git a/apps/web/src/routes/(dashboard)/settings/+layout.svelte b/apps/web/src/routes/(dashboard)/settings/+layout.svelte
index 00a7eb0..d3d623d 100644
--- a/apps/web/src/routes/(dashboard)/settings/+layout.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/+layout.svelte
@@ -1,33 +1,31 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import SidebarNav from "./(components)/sidebar-nav.svelte";
+	import { Separator } from '$lib/components/ui/separator';
+	import SidebarNav from './(components)/sidebar-nav.svelte';
 
 	const sidebarNavItems = [
 		{
-			title: "Profile",
-			href: "/settings"
+			title: 'Profile',
+			href: '/settings'
 		},
 		{
-			title: "Account",
-			href: "/settings/account"
+			title: 'Account',
+			href: '/settings/account'
 		},
 		{
-			title: "Appearance",
-			href: "/settings/appearance"
+			title: 'Appearance',
+			href: '/settings/appearance'
 		},
 		{
-			title: "Notifications",
-			href: "/settings/notifications"
+			title: 'Notifications',
+			href: '/settings/notifications'
 		}
 	];
 </script>
 
-<div class="hidden space-y-6 p-10 pb-16 md:block">
+<div class="space-y-6 p-10 pb-16 md:block">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
-		<p class="text-muted-foreground">
-			Manage your account settings and set e-mail preferences.
-		</p>
+		<p class="text-muted-foreground">Manage your account settings and set e-mail preferences.</p>
 	</div>
 	<Separator class="my-6" />
 	<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
diff --git a/apps/web/src/routes/(dashboard)/settings/+page.server.ts b/apps/web/src/routes/(dashboard)/settings/+page.server.ts
index 03c6563..7307867 100644
--- a/apps/web/src/routes/(dashboard)/settings/+page.server.ts
+++ b/apps/web/src/routes/(dashboard)/settings/+page.server.ts
@@ -1,7 +1,7 @@
-import type { PageServerLoad } from "./$types";
-import { superValidate } from "sveltekit-superforms/server";
-import { profileFormSchema } from "./profile-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms/server';
+import { profileFormSchema } from './profile-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
diff --git a/apps/web/src/routes/(dashboard)/settings/+page.svelte b/apps/web/src/routes/(dashboard)/settings/+page.svelte
index f85eb89..3f0786c 100644
--- a/apps/web/src/routes/(dashboard)/settings/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { PageData } from "./$types";
-	import ProfileForm from "./profile-form.svelte";
-	import { Separator } from "$lib/components/ui/separator";
+	import type { PageData } from './$types';
+	import ProfileForm from './profile-form.svelte';
+	import { Separator } from '$lib/components/ui/separator';
 	export let data: PageData;
 </script>
 
diff --git a/apps/web/src/routes/(dashboard)/settings/account/+page.server.ts b/apps/web/src/routes/(dashboard)/settings/account/+page.server.ts
index ae61752..4366743 100644
--- a/apps/web/src/routes/(dashboard)/settings/account/+page.server.ts
+++ b/apps/web/src/routes/(dashboard)/settings/account/+page.server.ts
@@ -1,7 +1,7 @@
-import { superValidate } from "sveltekit-superforms/server";
-import type { PageServerLoad } from "./$types";
-import { accountFormSchema } from "./account-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import { superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from './$types';
+import { accountFormSchema } from './account-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
diff --git a/apps/web/src/routes/(dashboard)/settings/account/+page.svelte b/apps/web/src/routes/(dashboard)/settings/account/+page.svelte
index db3e9b4..2aeebc4 100644
--- a/apps/web/src/routes/(dashboard)/settings/account/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/account/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import AccountForm from "./account-form.svelte";
-	import type { PageData } from "./$types";
+	import { Separator } from '$lib/components/ui/separator';
+	import AccountForm from './account-form.svelte';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
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 ab2ca91..6fc56d9 100644
--- a/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
@@ -1,16 +1,16 @@
 <script lang="ts" context="module">
-	import { z } from "zod";
+	import { z } from 'zod';
 
 	const languages = {
-		en: "English",
-		fr: "French",
-		de: "German",
-		es: "Spanish",
-		pt: "Portuguese",
-		ru: "Russian",
-		ja: "Japanese",
-		ko: "Korean",
-		zh: "Chinese"
+		en: 'English',
+		fr: 'French',
+		de: 'German',
+		es: 'Spanish',
+		pt: 'Portuguese',
+		ru: 'Russian',
+		ja: 'Japanese',
+		ko: 'Korean',
+		zh: 'Chinese'
 	} as const;
 
 	type Language = keyof typeof languages;
@@ -18,10 +18,10 @@
 	export const accountFormSchema = z.object({
 		name: z
 			.string({
-				required_error: "Required."
+				required_error: 'Required.'
 			})
-			.min(2, "Name must be at least 2 characters.")
-			.max(30, "Name must not be longer than 30 characters"),
+			.min(2, 'Name must be at least 2 characters.')
+			.max(30, 'Name must not be longer than 30 characters'),
 		// Hack: https://github.com/colinhacks/zod/issues/2280
 		language: z.enum(Object.keys(languages) as [Language, ...Language[]])
 	});
@@ -30,9 +30,9 @@
 </script>
 
 <script lang="ts">
-	import * as Form from "$lib/components/ui/form";
-	import type { SuperValidated } from "sveltekit-superforms";
-	import { cn } from "$lib/utils";
+	import * as Form from '$lib/components/ui/form';
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import { cn } from '$lib/utils';
 
 	export let data: SuperValidated<AccountFormSchema>;
 </script>
@@ -62,10 +62,7 @@
 			<Form.Select selected={{ value, label: languages[value] }}>
 				<Form.SelectTrigger
 					placeholder="Select language"
-					class={cn(
-						"w-[200px] justify-between",
-						!attrs.input.value && "text-muted-foreground"
-					)}
+					class={cn('w-[200px] justify-between', !attrs.input.value && 'text-muted-foreground')}
 				/>
 				<Form.SelectContent class="h-52 overflow-y-auto">
 					{#each Object.entries(languages) as [value, lang]}
@@ -75,9 +72,7 @@
 					{/each}
 				</Form.SelectContent>
 			</Form.Select>
-			<Form.Description>
-				This is the language that will be used in the dashboard.
-			</Form.Description>
+			<Form.Description>This is the language that will be used in the dashboard.</Form.Description>
 			<Form.Validation />
 		</Form.Field>
 	</Form.Item>
diff --git a/apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts b/apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts
index 18979b0..053a244 100644
--- a/apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts
+++ b/apps/web/src/routes/(dashboard)/settings/appearance/+page.server.ts
@@ -1,7 +1,7 @@
-import { superValidate } from "sveltekit-superforms/server";
-import type { PageServerLoad } from "../$types";
-import { appearanceFormSchema } from "./appearance-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import { superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from '../$types';
+import { appearanceFormSchema } from './appearance-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
diff --git a/apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte b/apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte
index 4512b07..39e7231 100644
--- a/apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/appearance/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import type { PageData } from "./$types";
-	import AppearanceForm from "./appearance-form.svelte";
+	import { Separator } from '$lib/components/ui/separator';
+	import type { PageData } from './$types';
+	import AppearanceForm from './appearance-form.svelte';
 
 	export let data: PageData;
 </script>
diff --git a/apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte b/apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
index 84cce16..86675ac 100644
--- a/apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
@@ -1,14 +1,14 @@
 <script lang="ts" context="module">
-	import type { SuperValidated } from "sveltekit-superforms";
-	import { z } from "zod";
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import { z } from 'zod';
 
 	export const appearanceFormSchema = z.object({
-		theme: z.enum(["light", "dark"], {
-			required_error: "Please select a theme."
+		theme: z.enum(['light', 'dark'], {
+			required_error: 'Please select a theme.'
 		}),
-		font: z.enum(["inter", "manrope", "system"], {
-			invalid_type_error: "Select a font",
-			required_error: "Please select a font."
+		font: z.enum(['inter', 'manrope', 'system'], {
+			invalid_type_error: 'Select a font',
+			required_error: 'Please select a font.'
 		})
 	});
 
@@ -16,8 +16,8 @@
 </script>
 
 <script lang="ts">
-	import * as Form from "$lib/components/ui/form";
-	import Label from "$lib/components/ui/label/label.svelte";
+	import * as Form from '$lib/components/ui/form';
+	import Label from '$lib/components/ui/label/label.svelte';
 	export let data: SuperValidated<AppearanceFormSchema>;
 </script>
 
@@ -51,23 +51,17 @@
 			<Form.RadioGroup class="grid max-w-md grid-cols-2 gap-8 pt-2" orientation="horizontal">
 				<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
 					<Form.RadioItem id="light" value="light" class="sr-only" />
-					<div
-						class="items-center rounded-md border-2 border-muted p-1 hover:border-accent"
-					>
+					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
 						<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
 							<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
 								<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
 								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
 								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
 								<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
 							</div>
@@ -85,15 +79,11 @@
 								<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
 								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-slate-400" />
 								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
 							</div>
-							<div
-								class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm"
-							>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
 								<div class="h-4 w-4 rounded-full bg-slate-400" />
 								<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
 							</div>
diff --git a/apps/web/src/routes/(dashboard)/settings/notifications/+page.server.ts b/apps/web/src/routes/(dashboard)/settings/notifications/+page.server.ts
index 961c44a..0c90c08 100644
--- a/apps/web/src/routes/(dashboard)/settings/notifications/+page.server.ts
+++ b/apps/web/src/routes/(dashboard)/settings/notifications/+page.server.ts
@@ -1,7 +1,7 @@
-import { superValidate } from "sveltekit-superforms/server";
-import type { PageServerLoad } from "../$types";
-import { notificationsFormSchema } from "./notifications-form.svelte";
-import { fail, type Actions } from "@sveltejs/kit";
+import { superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from '../$types';
+import { notificationsFormSchema } from './notifications-form.svelte';
+import { fail, type Actions } from '@sveltejs/kit';
 
 export const load: PageServerLoad = async () => {
 	return {
diff --git a/apps/web/src/routes/(dashboard)/settings/notifications/+page.svelte b/apps/web/src/routes/(dashboard)/settings/notifications/+page.svelte
index cf72042..84c8983 100644
--- a/apps/web/src/routes/(dashboard)/settings/notifications/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/notifications/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Separator } from "$lib/components/ui/separator";
-	import NotificationsForm from "./notifications-form.svelte";
-	import type { PageData } from "./$types";
+	import { Separator } from '$lib/components/ui/separator';
+	import NotificationsForm from './notifications-form.svelte';
+	import type { PageData } from './$types';
 
 	export let data: PageData;
 </script>
diff --git a/apps/web/src/routes/(dashboard)/settings/notifications/notifications-form.svelte b/apps/web/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
index 3ebf675..962472c 100644
--- a/apps/web/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
@@ -1,8 +1,8 @@
 <script lang="ts" context="module">
-	import { z } from "zod";
+	import { z } from 'zod';
 	export const notificationsFormSchema = z.object({
-		type: z.enum(["all", "mentions", "none"], {
-			required_error: "You need to select a notification type."
+		type: z.enum(['all', 'mentions', 'none'], {
+			required_error: 'You need to select a notification type.'
 		}),
 		mobile: z.boolean().default(false).optional(),
 		communication_emails: z.boolean().default(false).optional(),
@@ -14,9 +14,9 @@
 </script>
 
 <script lang="ts">
-	import type { SuperValidated } from "sveltekit-superforms";
-	import * as Form from "$lib/components/ui/form";
-	import { Label } from "$lib/components/ui/label";
+	import type { SuperValidated } from 'sveltekit-superforms';
+	import * as Form from '$lib/components/ui/form';
+	import { Label } from '$lib/components/ui/label';
 	export let data: SuperValidated<NotificationFormSchema>;
 </script>
 
@@ -54,9 +54,7 @@
 				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
 					<div class="space-y-0.5">
 						<Form.Label class="text-base">Communication emails</Form.Label>
-						<Form.Description>
-							Receive emails about your account activity.
-						</Form.Description>
+						<Form.Description>Receive emails about your account activity.</Form.Description>
 					</div>
 					<Form.Switch />
 				</Form.Item>
@@ -102,8 +100,7 @@
 			<div class="space-y-1 leading-none">
 				<Form.Label>Use different settings for my mobile devices</Form.Label>
 				<Form.Description>
-					You can manage your mobile notifications in the{" "}<a href="/settings"
-						>mobile settings</a
+					You can manage your mobile notifications in the{' '}<a href="/settings">mobile settings</a
 					> page.
 				</Form.Description>
 			</div>
diff --git a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
index b12d11f..7a6f314 100644
--- a/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
+++ b/apps/web/src/routes/(dashboard)/settings/profile-form.svelte
@@ -1,23 +1,23 @@
 <script lang="ts" context="module">
-	import { z } from "zod";
+	import { z } from 'zod';
 	export const profileFormSchema = z.object({
 		username: z
 			.string()
-			.min(2, "Username must be at least 2 characters.")
-			.max(30, "Username must not be longer than 30 characters"),
-		email: z.string({ required_error: "Please select an email to display" }).email(),
-		bio: z.string().min(4).max(160).default("I own a computer."),
+			.min(2, 'Username must be at least 2 characters.')
+			.max(30, 'Username must not be longer than 30 characters'),
+		email: z.string({ required_error: 'Please select an email to display' }).email(),
+		bio: z.string().min(4).max(160).default('I own a computer.'),
 		website: z
 			.string()
-			.url({ message: "Please enter a valid URL." })
-			.default("https://shadcn-svelte.com")
+			.url({ message: 'Please enter a valid URL.' })
+			.default('https://shadcn-svelte.com')
 	});
 	export type ProfileFormSchema = typeof profileFormSchema;
 </script>
 
 <script lang="ts">
-	import * as Form from "$lib/components/ui/form";
-	import type { SuperValidated } from "sveltekit-superforms";
+	import * as Form from '$lib/components/ui/form';
+	import type { SuperValidated } from 'sveltekit-superforms';
 
 	export let data: SuperValidated<ProfileFormSchema>;
 </script>
@@ -35,8 +35,8 @@
 			<Form.Label>Username</Form.Label>
 			<Form.Input placeholder="@shadcn" />
 			<Form.Description>
-				This is your public display name. It can be your real name or a pseudonym. You can
-				only change this once every 30 days.
+				This is your public display name. It can be your real name or a pseudonym. You can only
+				change this once every 30 days.
 			</Form.Description>
 			<Form.Validation />
 		</Form.Field>
@@ -50,17 +50,14 @@
 					<Form.SelectItem value="m@example.com" label="m@example.com"
 						>m@example.com
 					</Form.SelectItem>
-					<Form.SelectItem value="m@google.com" label="m@google.com"
-						>m@google.com
-					</Form.SelectItem>
+					<Form.SelectItem value="m@google.com" label="m@google.com">m@google.com</Form.SelectItem>
 					<Form.SelectItem value="m@support.com" label="m@support.com"
 						>m@support.com
 					</Form.SelectItem>
 				</Form.SelectContent>
 			</Form.Select>
 			<Form.Description>
-				You can manage verified email addresses in your <a href="/examples/forms"
-					>email settings</a
+				You can manage verified email addresses in your <a href="/examples/forms">email settings</a
 				>.
 			</Form.Description>
 			<Form.Validation />
diff --git a/apps/web/src/routes/+layout.server.ts b/apps/web/src/routes/+layout.server.ts
index 52b809c..f11efcd 100644
--- a/apps/web/src/routes/+layout.server.ts
+++ b/apps/web/src/routes/+layout.server.ts
@@ -1,8 +1,11 @@
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async ({ locals }: { locals: App.Locals }) => {
+	const user = locals.pocketBase.authStore.model;
+	if (user) user.avatarUrl = locals.pocketBase.getFileUrl(user, user.avatar);
+
 	return {
 		authenticated: locals.pocketBase.authStore.isValid,
-		user: locals.pocketBase.authStore.model,
+		user
 	};
 };
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index b262eca..001ca10 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import '../app.pcss';
 	import { fade } from 'svelte/transition';
 	import type { LayoutData } from './$types';
+	import DataIndicator from '$lib/components/site/data-indicator.svelte';
 
 	export let data: LayoutData;
 </script>
@@ -15,14 +16,16 @@
 
 <div class="relative flex min-h-screen flex-col" id="page">
 	<SiteNavBar authenticated={data.authenticated} user={data.user} />
-	<main class="container relative mb-4 mt-12 flex-1">
+	<main class="container relative flex-1">
 		<div in:fade={{ duration: 200, delay: 100 }} out:fade={{ duration: 100 }}>
 			<slot />
 		</div>
 	</main>
 	<SiteFooter />
 	{#if dev}
-		<!-- <pre>{JSON.stringify(data, null, 2)}</pre> -->
-		<TailwindIndicator />
+		<div class="fixed bottom-1 left-1 z-50 flex font-mono uppercase">
+			<DataIndicator {data} />
+			<TailwindIndicator />
+		</div>
 	{/if}
 </div>
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 29c2723..79e7b01 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,31 +1,37 @@
 <script lang="ts">
 	import { Icons } from '$lib/components/site';
+	import Particles from '$lib/components/site/particles.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import { siteConfig } from '$lib/config/site';
 </script>
 
+<div class="absolute inset-0 -z-10">
+	<Particles />
+</div>
 <div class="pb-16 pt-32 md:pb-32 md:pt-52">
 	<div class="container mx-auto text-center">
 		<h1
-			class="bg-gradient-to-r from-zinc-200/60 via-zinc-200 to-zinc-200/60 bg-clip-text pb-4 text-6xl font-extrabold tracking-tight text-transparent lg:text-7xl"
+			class="bg-gradient-to-r from-zinc-800 via-zinc-800/60 to-zinc-800 bg-clip-text pb-4 text-6xl font-extrabold tracking-tight text-transparent dark:from-zinc-200/60 dark:via-zinc-200 dark:to-zinc-200/60 lg:text-7xl"
 		>
-			<span class="inline-block align-top decoration-inherit text-balance">One Dashboard, Countless Solutions</span
+			<span class="inline-block text-balance align-top decoration-inherit"
+				>One Dashboard, Countless Solutions</span
 			>
 		</h1>
-		<p class="mb-8 text-lg text-zinc-300">
+		<p class="mb-8 text-lg text-zinc-800 dark:text-zinc-300">
 			Tame ticket overload and keep your operations teams sane
 		</p>
 		<div
 			class="mx-auto flex max-w-xs flex-col items-center gap-4 sm:inline-flex sm:max-w-none sm:flex-row sm:justify-center"
 		>
-
-			<Button href="/dashboard" class="group flex w-full items-center transition duration-150 ease-in-out">
-				Get Started <Icons.arrowRight class="text-primary-500 ml-1 h-3 w-3 tracking-normal transition-transform duration-150 ease-in-out group-hover:translate-x-0.5"/>
-			</Button>
-			<Button href={siteConfig.links.gitHubProject} variant="outline">
-				Star on GitHub
+			<Button
+				href="/dashboard"
+				class="group flex w-full items-center transition duration-150 ease-in-out"
+			>
+				Get Started <Icons.arrowRight
+					class="text-primary-500 ml-1 h-3 w-3 tracking-normal transition-transform duration-150 ease-in-out group-hover:translate-x-0.5"
+				/>
 			</Button>
+			<Button href={siteConfig.links.gitHubProject} variant="outline">Star on GitHub</Button>
 		</div>
 	</div>
 </div>
diff --git a/apps/web/static/site.webmanifest b/apps/web/static/site.webmanifest
index b20abb7..9591150 100644
--- a/apps/web/static/site.webmanifest
+++ b/apps/web/static/site.webmanifest
@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
 }