From c9b6269ce92227103dc3d07ad0e4cdb7278ba09d Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Sat, 9 Nov 2024 11:05:28 -0800
Subject: [PATCH] Cleanup code, fix IntelliJ removing star imports, move
 sessions to Redis.

---
 package.json                                  |   8 +-
 pnpm-lock.yaml                                |  32 +--
 src/app.d.ts                                  |  10 +-
 src/app.html                                  |  22 +-
 src/hooks.server.ts                           |  43 ++--
 src/lib/LocalStorage.svelte                   | 114 ++++-----
 src/lib/components/Game.svelte                |  17 +-
 src/lib/components/Header.svelte              |  10 +-
 src/lib/components/pin-input.svelte           |  25 +-
 .../components/search/GameSearchForm.svelte   |  21 +-
 .../ui/alert/alert-description.svelte         |   4 +-
 .../components/ui/alert/alert-title.svelte    |   6 +-
 src/lib/components/ui/alert/alert.svelte      |  12 +-
 src/lib/components/ui/alert/index.ts          |  14 +-
 src/lib/components/ui/button/button.svelte    |   5 +-
 src/lib/components/ui/button/index.ts         |   4 +-
 .../components/ui/card/card-content.svelte    |   4 +-
 .../ui/card/card-description.svelte           |   4 +-
 src/lib/components/ui/card/card-footer.svelte |   4 +-
 src/lib/components/ui/card/card-header.svelte |   4 +-
 src/lib/components/ui/card/card-title.svelte  |   6 +-
 src/lib/components/ui/card/card.svelte        |   4 +-
 .../dropdown-menu-checkbox-item.svelte        |   8 +-
 .../dropdown-menu-content.svelte              |   6 +-
 .../dropdown-menu/dropdown-menu-item.svelte   |   6 +-
 .../dropdown-menu/dropdown-menu-label.svelte  |   4 +-
 .../dropdown-menu-radio-group.svelte          |   2 +-
 .../dropdown-menu-radio-item.svelte           |   8 +-
 .../dropdown-menu-separator.svelte            |   6 +-
 .../dropdown-menu-shortcut.svelte             |   4 +-
 .../dropdown-menu-sub-content.svelte          |   6 +-
 .../dropdown-menu-sub-trigger.svelte          |   8 +-
 src/lib/components/ui/dropdown-menu/index.ts  |   2 +-
 src/lib/components/ui/form/form-button.svelte |   2 +-
 .../ui/form/form-description.svelte           |   5 +-
 .../ui/form/form-element-field.svelte         |   5 +-
 .../ui/form/form-field-errors.svelte          |   4 +-
 src/lib/components/ui/form/form-field.svelte  |   5 +-
 .../components/ui/form/form-fieldset.svelte   |   5 +-
 src/lib/components/ui/form/form-label.svelte  |   8 +-
 src/lib/components/ui/form/form-legend.svelte |   4 +-
 src/lib/components/ui/label/label.svelte      |   4 +-
 .../ui/pagination/pagination-content.svelte   |   4 +-
 .../ui/pagination/pagination-ellipsis.svelte  |   6 +-
 .../ui/pagination/pagination-item.svelte      |   4 +-
 .../ui/pagination/pagination-link.svelte      |   6 +-
 .../pagination/pagination-next-button.svelte  |   8 +-
 .../pagination/pagination-prev-button.svelte  |   8 +-
 .../ui/pagination/pagination.svelte           |   5 +-
 src/lib/components/ui/select/index.ts         |   2 +-
 .../ui/select/select-content.svelte           |   8 +-
 .../components/ui/select/select-item.svelte   |   8 +-
 .../components/ui/select/select-label.svelte  |   4 +-
 .../ui/select/select-separator.svelte         |   6 +-
 .../ui/select/select-trigger.svelte           |   8 +-
 src/lib/components/ui/sonner/sonner.svelte    |   4 +-
 src/lib/page_loading_indicator.svelte         |  46 ++--
 .../server/api/services/sessions.service.ts   |  99 ++++++--
 src/lib/zodValidation.ts                      |  86 +++----
 .../(app)/(protected)/admin/+layout.server.ts |   1 -
 .../(app)/(protected)/admin/+layout.svelte    |  32 ++-
 .../(protected)/admin/users/+page.server.ts   |  16 +-
 .../(protected)/admin/users/+page.svelte      |   5 +-
 .../(protected)/admin/users/[id]/+page.svelte |  12 +-
 .../admin/users/[id]/add-roles-form.svelte    |  22 +-
 .../admin/users/user-table-actions.svelte     |   9 +-
 .../admin/users/user-table-checkbox.svelte    |   6 +-
 .../(protected)/admin/users/user-table.svelte | 217 ++++++++----------
 .../(protected)/collections/+page.svelte      |   7 +-
 .../collections/[cuid]/+error.svelte          |   4 +-
 .../collections/[cuid]/+page.svelte           |  14 +-
 .../collections/add/+page.server.ts           |  13 +-
 .../(protected)/collections/add/+page.svelte  |   4 +-
 .../collections/add/bgg/+page.server.ts       |  25 +-
 .../collections/add/bgg/+page.svelte          |   6 +-
 .../(app)/(protected)/list/+layout.svelte     |   6 +-
 .../(protected)/list/[id]/+page.server.ts     |   1 -
 .../(app)/(protected)/list/[id]/+page.svelte  |  10 +-
 .../(app)/(protected)/settings/+layout.svelte |   8 +-
 .../(protected)/settings/+page.server.ts      |   8 +-
 .../settings/security/+page.server.ts         |  18 +-
 .../settings/security/+page.svelte            |   8 +-
 .../security/change/password/+page.server.ts  |  68 +++---
 .../security/change/password/+page.svelte     |  34 +--
 .../security/change/password/schemas.ts       |  64 +++---
 .../settings/security/mfa/+page.server.ts     |  24 +-
 .../settings/security/mfa/+page.svelte        |  12 +-
 .../mfa/recovery-codes/+page.server.ts        |  26 +--
 .../security/mfa/security-keys/+page.svelte   |   5 +
 .../security/mfa/totp/+page.server.ts         | 122 +++++-----
 .../settings/security/mfa/totp/+page.svelte   |  30 ++-
 .../settings/security/mfa/totp/schemas.ts     |  10 +-
 .../(app)/(protected)/wishlists/+page.svelte  |   7 +-
 .../wishlists/[cuid]/+page.server.ts          |   3 +-
 .../(protected)/wishlists/[cuid]/+page.svelte |   6 +-
 src/routes/(app)/+layout.server.ts            |  12 +-
 src/routes/(app)/+layout.svelte               |   8 +-
 src/routes/(app)/+page.server.ts              |  32 +--
 src/routes/(app)/game/[id]/+page.svelte       |  17 +-
 src/routes/(app)/search/+page.server.ts       | 150 ++++++------
 src/routes/(app)/search/+page.svelte          |  42 ++--
 src/routes/(auth)/+layout.server.ts           |   4 +-
 src/routes/(auth)/+layout.svelte              |   9 +-
 .../(auth)/auth/callback/github/+server.ts    |  22 +-
 .../(auth)/auth/callback/google/+server.ts    |  22 +-
 src/routes/(auth)/login/+page.server.ts       |  56 ++---
 src/routes/(auth)/login/+page.svelte          |  31 ++-
 src/routes/(auth)/login/github/+server.ts     |  17 +-
 src/routes/(auth)/login/google/+server.ts     |  21 +-
 src/routes/(auth)/login/spotify/+server.ts    |  17 +-
 src/routes/(auth)/login/tidal/+server.ts      |  17 +-
 src/routes/(auth)/logout/+page.server.ts      |  10 +-
 .../(auth)/password/reset/+page.server.ts     |  50 ++--
 src/routes/(auth)/password/reset/+page.svelte |  54 +++--
 src/routes/(auth)/signup/+page.server.ts      |  50 ++--
 src/routes/(auth)/signup/+page.svelte         |  41 ++--
 src/routes/(auth)/totp/+page.svelte           |  48 ++--
 src/routes/+error.svelte                      |   4 +-
 src/search/actions.ts                         |  41 ++--
 src/server/roles.ts                           |   2 +-
 src/server/users.ts                           |   4 +-
 src/state/theme.ts                            |   4 +-
 src/styles/reset.pcss                         |  34 +--
 src/styles/theme.pcss                         | 216 ++++++++---------
 124 files changed, 1343 insertions(+), 1342 deletions(-)
 create mode 100644 src/routes/(app)/(protected)/settings/security/mfa/security-keys/+page.svelte

diff --git a/package.json b/package.json
index fde1d1b..14627ed 100644
--- a/package.json
+++ b/package.json
@@ -40,14 +40,17 @@
 		"@typescript-eslint/parser": "^7.18.0",
 		"arctic": "^1.9.2",
 		"autoprefixer": "^10.4.20",
+		"bits-ui": "^0.21.16",
 		"drizzle-kit": "^0.27.2",
 		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "2.36.0-next.13",
+		"formsnap": "^1.0.1",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
 		"lucia": "3.2.0",
 		"lucide-svelte": "^0.408.0",
+		"mode-watcher": "^0.4.1",
 		"nodemailer": "^6.9.16",
 		"postcss": "^8.4.47",
 		"postcss-import": "^16.1.0",
@@ -61,6 +64,7 @@
 		"svelte-meta-tags": "^3.1.4",
 		"svelte-preprocess": "^6.0.3",
 		"svelte-sequential-preprocessor": "^2.0.2",
+		"svelte-sonner": "^0.3.28",
 		"sveltekit-flash-message": "^2.4.4",
 		"sveltekit-superforms": "^2.20.0",
 		"tailwindcss": "^3.4.14",
@@ -97,7 +101,6 @@
 		"@sveltejs/adapter-node": "^5.2.9",
 		"@sveltejs/adapter-vercel": "^5.4.7",
 		"@types/feather-icons": "^4.29.4",
-		"bits-ui": "^0.21.16",
 		"boardgamegeekclient": "^1.9.1",
 		"bullmq": "^5.25.3",
 		"class-variance-authority": "^0.7.0",
@@ -108,7 +111,6 @@
 		"drizzle-orm": "^0.36.1",
 		"drizzle-zod": "^0.5.1",
 		"feather-icons": "^4.29.2",
-		"formsnap": "^1.0.1",
 		"handlebars": "^4.7.8",
 		"hono": "^4.6.9",
 		"hono-pino": "^0.3.0",
@@ -120,7 +122,6 @@
 		"just-capitalize": "^3.2.0",
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
-		"mode-watcher": "^0.4.1",
 		"open-props": "^1.7.7",
 		"oslo": "^1.2.1",
 		"pg": "^8.13.1",
@@ -133,7 +134,6 @@
 		"reflect-metadata": "^0.2.2",
 		"stoker": "^1.3.0",
 		"svelte-lazy-loader": "^1.0.0",
-		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss-animate": "^1.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e86c86d..50b7cc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,9 +77,6 @@ importers:
       '@types/feather-icons':
         specifier: ^4.29.4
         version: 4.29.4
-      bits-ui:
-        specifier: ^0.21.16
-        version: 0.21.16(svelte@5.0.0-next.175)
       boardgamegeekclient:
         specifier: ^1.9.1
         version: 1.9.1
@@ -110,9 +107,6 @@ importers:
       feather-icons:
         specifier: ^4.29.2
         version: 4.29.2
-      formsnap:
-        specifier: ^1.0.1
-        version: 1.0.1(svelte@5.0.0-next.175)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.7(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(@types/json-schema@7.0.15)(svelte@5.0.0-next.175)(typescript@5.6.3))
       handlebars:
         specifier: ^4.7.8
         version: 4.7.8
@@ -146,9 +140,6 @@ importers:
       loader:
         specifier: ^2.1.1
         version: 2.1.1
-      mode-watcher:
-        specifier: ^0.4.1
-        version: 0.4.1(svelte@5.0.0-next.175)
       open-props:
         specifier: ^1.7.7
         version: 1.7.7
@@ -185,9 +176,6 @@ importers:
       svelte-lazy-loader:
         specifier: ^1.0.0
         version: 1.0.0
-      svelte-sonner:
-        specifier: ^0.3.28
-        version: 0.3.28(svelte@5.0.0-next.175)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
@@ -255,6 +243,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
+      bits-ui:
+        specifier: ^0.21.16
+        version: 0.21.16(svelte@5.0.0-next.175)
       drizzle-kit:
         specifier: ^0.27.2
         version: 0.27.2
@@ -267,6 +258,9 @@ importers:
       eslint-plugin-svelte:
         specifier: 2.36.0-next.13
         version: 2.36.0-next.13(eslint@8.57.1)(svelte@5.0.0-next.175)(ts-node@10.9.2(@types/node@20.17.6)(typescript@5.6.3))
+      formsnap:
+        specifier: ^1.0.1
+        version: 1.0.1(svelte@5.0.0-next.175)(sveltekit-superforms@2.20.0(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.7(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(@types/json-schema@7.0.15)(svelte@5.0.0-next.175)(typescript@5.6.3))
       just-clone:
         specifier: ^6.2.0
         version: 6.2.0
@@ -279,6 +273,9 @@ importers:
       lucide-svelte:
         specifier: ^0.408.0
         version: 0.408.0(svelte@5.0.0-next.175)
+      mode-watcher:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.0.0-next.175)
       nodemailer:
         specifier: ^6.9.16
         version: 6.9.16
@@ -318,6 +315,9 @@ importers:
       svelte-sequential-preprocessor:
         specifier: ^2.0.2
         version: 2.0.2
+      svelte-sonner:
+        specifier: ^0.3.28
+        version: 0.3.28(svelte@5.0.0-next.175)
       sveltekit-flash-message:
         specifier: ^2.4.4
         version: 2.4.4(@sveltejs/kit@2.8.0(@sveltejs/vite-plugin-svelte@4.0.0-next.7(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(svelte@5.0.0-next.175)(vite@5.4.10(@types/node@20.17.6)))(svelte@5.0.0-next.175)
@@ -3834,8 +3834,8 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  object-inspect@1.13.2:
-    resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
+  object-inspect@1.13.3:
+    resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
 
   obuf@1.1.2:
@@ -8339,7 +8339,7 @@ snapshots:
 
   object-hash@3.0.0: {}
 
-  object-inspect@1.13.2: {}
+  object-inspect@1.13.3: {}
 
   obuf@1.1.2: {}
 
@@ -9122,7 +9122,7 @@ snapshots:
       call-bind: 1.0.7
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      object-inspect: 1.13.2
+      object-inspect: 1.13.3
 
   siginfo@2.0.0: {}
 
diff --git a/src/app.d.ts b/src/app.d.ts
index 609d7c7..f800ef8 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,6 +1,6 @@
-import type { User } from 'lucia';
 import type { ApiClient } from '$lib/server/api';
 import type { parseApiResponse } from '$lib/utils/api';
+import type { User } from 'lucia';
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
@@ -24,9 +24,9 @@ declare global {
 		}
 		namespace Superforms {
 			type Message = {
-				type: 'error' | 'success' | 'info',
-				text: string
-			}
+				type: 'error' | 'success' | 'info';
+				text: string;
+			};
 		}
 		interface Error {
 			code?: string;
@@ -37,7 +37,7 @@ declare global {
 	interface Document {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-				startViewTransition: (callback: never) => void; // Add your custom property/method here
+		startViewTransition: (callback: never) => void; // Add your custom property/method here
 	}
 }
 
diff --git a/src/app.html b/src/app.html
index 11bbdb5..d9ea2a7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta name="robots" content="noindex, nofollow" />
-		<meta charset="utf-8" />
-		<meta name="description" content="Bored? Find a game! Bored Game!" />
-		<link rel="icon" href="%sveltekit.assets%/favicon-bored-game.svg" />
-		<meta name="viewport" content="width=device-width" />
+<head>
+	<meta name="robots" content="noindex, nofollow"/>
+	<meta charset="utf-8"/>
+	<meta name="description" content="Bored? Find a game! Bored Game!"/>
+	<link rel="icon" href="%sveltekit.assets%/favicon-bored-game.svg"/>
+	<meta name="viewport" content="width=device-width"/>
 
-		%sveltekit.head%
-	</head>
+	%sveltekit.head%
+</head>
 
-	<body>
-		<div id="svelte">%sveltekit.body%</div>
-	</body>
+<body>
+<div id="svelte">%sveltekit.body%</div>
+</body>
 </html>
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 6b9521d..f628343 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,10 +1,10 @@
-import 'reflect-metadata'
-import { StatusCodes } from '$lib/constants/status-codes'
-import type { ApiRoutes } from '$lib/server/api'
-import { parseApiResponse } from '$lib/utils/api'
-import { type Handle, redirect } from '@sveltejs/kit'
-import { sequence } from '@sveltejs/kit/hooks'
-import { hc } from 'hono/client'
+import 'reflect-metadata';
+import { StatusCodes } from '$lib/constants/status-codes';
+import type { ApiRoutes } from '$lib/server/api';
+import { parseApiResponse } from '$lib/utils/api';
+import { type Handle, redirect } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
+import { hc } from 'hono/client';
 
 const apiClient: Handle = async ({ event, resolve }) => {
 	/* ------------------------------ Register api ------------------------------ */
@@ -14,29 +14,30 @@ const apiClient: Handle = async ({ event, resolve }) => {
 			'x-forwarded-for': event.url.host.includes('sveltekit-prerender') ? '127.0.0.1' : event.getClientAddress(),
 			host: event.request.headers.get('host') || '',
 		},
-	})
+	});
 
 	/* ----------------------------- Auth functions ----------------------------- */
 	async function getAuthedUser() {
-		const { data } = await api.user.$get().then(parseApiResponse)
-		return data?.user
+		const { data } = await api.user.$get().then(parseApiResponse);
+		return data?.user;
 	}
 
 	async function getAuthedUserOrThrow() {
-		const { data } = await api.user.$get().then(parseApiResponse)
-		if (!data || !data.user) throw redirect(StatusCodes.TEMPORARY_REDIRECT, '/')
-		return data?.user
+		const { data } = await api.user.$get().then(parseApiResponse);
+		if (!data || !data.user) {
+			throw redirect(StatusCodes.TEMPORARY_REDIRECT, '/');
+		}
+		return data?.user;
 	}
 
 	/* ------------------------------ Set contexts ------------------------------ */
-	event.locals.api = api
-	event.locals.parseApiResponse = parseApiResponse
-	event.locals.getAuthedUser = getAuthedUser
-	event.locals.getAuthedUserOrThrow = getAuthedUserOrThrow
+	event.locals.api = api;
+	event.locals.parseApiResponse = parseApiResponse;
+	event.locals.getAuthedUser = getAuthedUser;
+	event.locals.getAuthedUserOrThrow = getAuthedUserOrThrow;
 
 	/* ----------------------------- Return response ---------------------------- */
-	const response = await resolve(event)
-	return response
-}
+	return await resolve(event);
+};
 
-export const handle: Handle = sequence(apiClient)
+export const handle: Handle = sequence(apiClient);
diff --git a/src/lib/LocalStorage.svelte b/src/lib/LocalStorage.svelte
index 820a308..4ca1362 100644
--- a/src/lib/LocalStorage.svelte
+++ b/src/lib/LocalStorage.svelte
@@ -1,71 +1,71 @@
 <script>
-  /**
-   * @event {null} save
-   * @event {{ prevValue: any; value: any; }} update
-   */
+/**
+ * @event {null} save
+ * @event {{ prevValue: any; value: any; }} update
+ */
 
-  /**
-   * Specify the local storage key
-   */
-  export let key = 'local-storage-key';
+/**
+ * Specify the local storage key
+ */
+export let key = 'local-storage-key';
 
-  /**
-   * Provide a value to persist
-   * @type {any}
-   */
-  export let value = '';
+/**
+ * Provide a value to persist
+ * @type {any}
+ */
+export let value = '';
 
-  /**
-   * Remove the persisted key value from the browser's local storage
-   * @type {() => void}
-   */
-  export function clearItem() {
-    localStorage.removeItem(key);
-  }
+/**
+ * Remove the persisted key value from the browser's local storage
+ * @type {() => void}
+ */
+export function clearItem() {
+	localStorage.removeItem(key);
+}
 
-  /**
-   * Clear all key values from the browser's local storage
-   * @type {() => void}
-   */
-  export function clearAll() {
-    localStorage.clear();
-  }
+/**
+ * Clear all key values from the browser's local storage
+ * @type {() => void}
+ */
+export function clearAll() {
+	localStorage.clear();
+}
 
-  import { onMount, afterUpdate, createEventDispatcher } from 'svelte';
+import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
 
-  const dispatch = createEventDispatcher();
+const dispatch = createEventDispatcher();
 
-  let prevValue = value;
+let prevValue = value;
 
-  function setItem() {
-    if (typeof value === 'object') {
-      localStorage.setItem(key, JSON.stringify(value));
-    } else {
-      localStorage.setItem(key, value);
-    }
-  }
+function setItem() {
+	if (typeof value === 'object') {
+		localStorage.setItem(key, JSON.stringify(value));
+	} else {
+		localStorage.setItem(key, value);
+	}
+}
 
-  onMount(() => {
-    const item = localStorage.getItem(key);
+onMount(() => {
+	const item = localStorage.getItem(key);
 
-    if (item != null) {
-      try {
-        value = JSON.parse(item);
-      } catch (e) {
-        value = item;
-      }
-    } else {
-      setItem(value);
-      dispatch('save');
-    }
-  });
+	if (item != null) {
+		try {
+			value = JSON.parse(item);
+		} catch (e) {
+			value = item;
+		}
+	} else {
+		setItem(value);
+		dispatch('save');
+	}
+});
 
-  afterUpdate(() => {
-    if (prevValue !== value) {
-      setItem(value);
-      dispatch('update', { prevValue, value });
-    }
+afterUpdate(() => {
+	if (prevValue !== value) {
+		setItem(value);
+		dispatch('update', { prevValue, value });
+	}
 
-    prevValue = value;
-  });
+	prevValue = value;
+});
 </script>
diff --git a/src/lib/components/Game.svelte b/src/lib/components/Game.svelte
index 1c019bb..2b04d4f 100644
--- a/src/lib/components/Game.svelte
+++ b/src/lib/components/Game.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-	import type { GameType, SavedGameType } from '$lib/types';
-	import type { CollectionItems } from '$db/schema';
+import type { CollectionItems } from '$db/schema';
+import * as Card from '$lib/components/ui/card';
+import type { GameType, SavedGameType } from '$lib/types';
 
-	export let game: GameType | CollectionItems;
-	export let variant: 'default' | 'compact' = 'default';
+export let game: GameType | CollectionItems;
+export let variant: 'default' | 'compact' = 'default';
 
-	// Naive and assumes description is only on our GameType at the moment
-	function isGameType(game: GameType | SavedGameType): game is GameType {
-		return (game as GameType).description !== undefined;
-	}
+// Naive and assumes description is only on our GameType at the moment
+function isGameType(game: GameType | SavedGameType): game is GameType {
+	return (game as GameType).description !== undefined;
+}
 </script>
 
 <article class="grid grid-template-cols-2 gap-4">
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index fd33c0a..22a7f48 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import Logo from '$components/logo.svelte';
-	import { ListChecks, ListTodo, LogOut, Settings } from 'lucide-svelte';
+import Logo from '$components/logo.svelte';
+import * as Avatar from '$lib/components/ui/avatar';
+import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+import { ListChecks, ListTodo, LogOut, Settings } from 'lucide-svelte';
 
-	let { user = null } = $props();
+let { user = null } = $props();
 
-	let avatar: string = $derived(user?.username?.slice(0, 1).toUpperCase() || ':)');
+let avatar: string = $derived(user?.username?.slice(0, 1).toUpperCase() || ':)');
 </script>
 
 <header>
diff --git a/src/lib/components/pin-input.svelte b/src/lib/components/pin-input.svelte
index a89bd2d..0ea52f5 100644
--- a/src/lib/components/pin-input.svelte
+++ b/src/lib/components/pin-input.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/ui';
-	import { type PinInputProps } from 'bits-ui';
+import { cn } from '$lib/utils/ui';
+import { PinInput } from 'bits-ui';
+import { type PinInputProps } from 'bits-ui';
 
-	interface Props extends Omit<PinInputProps, 'value'> {
-		value: string;
-		inputCount?: number;
-	}
+interface Props extends Omit<PinInputProps, 'value'> {
+	value: string;
+	inputCount?: number;
+}
 
-	let { value = $bindable(), inputCount = 6, ...rest }: Props = $props();
-	let pin = $state<string[] | undefined>(value?.split('') ?? []);
-	let inputs = $derived(Array(inputCount).fill(null));
+let { value = $bindable(), inputCount = 6, ...rest }: Props = $props();
+let pin = $state<string[] | undefined>(value?.split('') ?? []);
+let inputs = $derived(Array(inputCount).fill(null));
 
-	$effect(() => {
-		value = pin?.join('') ?? '';
-	});
+$effect(() => {
+	value = pin?.join('') ?? '';
+});
 </script>
 
 <PinInput.Root
diff --git a/src/lib/components/search/GameSearchForm.svelte b/src/lib/components/search/GameSearchForm.svelte
index 587931a..c42587d 100644
--- a/src/lib/components/search/GameSearchForm.svelte
+++ b/src/lib/components/search/GameSearchForm.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { type Infer, superForm, type SuperValidated } from 'sveltekit-superforms';
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import { search_schema, type SearchSchema } from '$lib/zodValidation';
-	import Input from '$components/ui/input/input.svelte';
-	import Checkbox from '$components/ui/checkbox/checkbox.svelte';
+import Checkbox from '$components/ui/checkbox/checkbox.svelte';
+import * as Form from '$components/ui/form';
+import Input from '$components/ui/input/input.svelte';
+import { type SearchSchema, search_schema } from '$lib/zodValidation';
+import { type Infer, type SuperValidated, superForm } from 'sveltekit-superforms';
+import { zodClient } from 'sveltekit-superforms/adapters';
 
-	export let data: SuperValidated<Infer<SearchSchema>>;
+export let data: SuperValidated<Infer<SearchSchema>>;
 
-	const form = superForm(data, {
-		validators: zodClient(search_schema),
-	});
+const form = superForm(data, {
+	validators: zodClient(search_schema),
+});
 
-	const { form: formData } = form;
+const { form: formData } = form;
 </script>
 
 <search>
diff --git a/src/lib/components/ui/alert/alert-description.svelte b/src/lib/components/ui/alert/alert-description.svelte
index 4a8eea0..aa9ed03 100644
--- a/src/lib/components/ui/alert/alert-description.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
index d85fccd..1482e6e 100644
--- a/src/lib/components/ui/alert/alert-title.svelte
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from '.';
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		level?: HeadingLevel;
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
index 6a20c1d..b4c9536 100644
--- a/src/lib/components/ui/alert/alert.svelte
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { alertVariants, type Variant } from '.';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement> & {
 		variant?: Variant;
@@ -12,10 +12,6 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn(alertVariants({ variant }), className)}
-	{...$$restProps}
-	role="alert"
->
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
 	<slot />
 </div>
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index a184639..296f9e1 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,22 +1,22 @@
-import {tv, type VariantProps} from "tailwind-variants";
+import { type VariantProps, tv } from "tailwind-variants";
 
 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 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+	base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
 
 	variants: {
 		variant: {
 			default: "bg-background text-foreground",
 			destructive:
-				"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
-		}
+				"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+		},
 	},
 	defaultVariants: {
-		variant: "default"
-	}
+		variant: "default",
+	},
 });
 
 export type Variant = VariantProps<typeof alertVariants>["variant"];
@@ -29,5 +29,5 @@ export {
 	//
 	Root as Alert,
 	Description as AlertDescription,
-	Title as AlertTitle
+	Title as AlertTitle,
 };
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 27eedab..1938536 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { buttonVariants, type Events, type Props } from './index.js';
-	import { cn } from '$lib/utils.js';
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = Props;
 	type $$Events = Events;
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 09863f9..af1e188 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,5 +1,5 @@
-import {tv, type VariantProps} from "tailwind-variants";
-import type {Button as ButtonPrimitive} from "bits-ui";
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
 import Root from "./button.svelte";
 
 const buttonVariants = tv({
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
index a573a0c..6de3e61 100644
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 8b68b6b..272ff5b 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
index 73bcfb2..674538e 100644
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
index d537f16..0e2e942 100644
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
index 64bfd0a..fbc2224 100644
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { HeadingLevel } from './index.js';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 48921d9..0ea332c 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/ui.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 4773b68..643257e 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import Check from 'lucide-svelte/icons/check';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
 	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
@@ -14,7 +14,7 @@
 <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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 559c689..8d8c34b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 	type $$Events = DropdownMenuPrimitive.ContentEvents;
@@ -17,7 +17,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",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index e6d3d90..f5cf681 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"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",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index 67ba5ee..512692b 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.LabelProps & {
 		inset?: boolean;
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
index c4ced88..1c74ae1 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
 	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
 
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index cbbb36f..130e16c 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import Circle from 'lucide-svelte/icons/circle';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import Circle from "lucide-svelte/icons/circle";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
 	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
@@ -13,7 +13,7 @@
 
 <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-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground 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-[disabled]:opacity-50",
 		className
 	)}
 	{value}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 427337b..c5dafc1 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.SeparatorProps;
 
@@ -9,6 +9,6 @@
 </script>
 
 <DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	class={cn("bg-muted -mx-1 my-1 h-px", className)}
 	{...$$restProps}
 />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 975c34d..55945e8 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 41baf78..0910304 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.SubContentProps;
 	type $$Events = DropdownMenuPrimitive.SubContentEvents;
@@ -18,7 +18,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",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 97b7de5..6b1a07c 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
 		inset?: boolean;
@@ -15,7 +15,7 @@
 
 <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",
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/lib/components/ui/dropdown-menu/index.ts b/src/lib/components/ui/dropdown-menu/index.ts
index afb4355..c1749e9 100644
--- a/src/lib/components/ui/dropdown-menu/index.ts
+++ b/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,4 +1,4 @@
-import {DropdownMenu as DropdownMenuPrimitive} from "bits-ui";
+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";
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
index 8a14884..087c839 100644
--- a/src/lib/components/ui/form/form-button.svelte
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Button from '$lib/components/ui/button/index.js';
+	import * as Button from "$lib/components/ui/button/index.js";
 
 	type $$Props = Button.Props;
 	type $$Events = Button.Events;
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index 314752d..4300805 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils.js';
+	import * as FormPrimitive from "formsnap";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 	let className: string | undefined | null = undefined;
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
index 4b6acde..bf5dd43 100644
--- a/src/lib/components/ui/form/form-element-field.svelte
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
-	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
-
+	import type { FormPathLeaves, SuperForm } from "sveltekit-superforms";
 	type T = Record<string, unknown>;
 	type U = FormPathLeaves<T>;
 </script>
@@ -8,7 +7,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
 	import type { HTMLAttributes } from "svelte/elements";
 	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLElement>;
 
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
index 831099e..6f2c2b8 100644
--- a/src/lib/components/ui/form/form-field-errors.svelte
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { cn } from '$lib/utils.js';
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = FormPrimitive.FieldErrorsProps & {
 		errorClasses?: string | undefined | null;
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
index 17beb76..c58b1f7 100644
--- a/src/lib/components/ui/form/form-field.svelte
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
-	import type { FormPath, SuperForm } from 'sveltekit-superforms';
-
+	import type { FormPath, SuperForm } from "sveltekit-superforms";
 	type T = Record<string, unknown>;
 	type U = FormPath<T>;
 </script>
@@ -8,7 +7,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import type { HTMLAttributes } from "svelte/elements";
 	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
 
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
index 262f9af..71993b4 100644
--- a/src/lib/components/ui/form/form-fieldset.svelte
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -1,13 +1,12 @@
 <script lang="ts" context="module">
-	import type { FormPath, SuperForm } from 'sveltekit-superforms';
-
+	import type { FormPath, SuperForm } from "sveltekit-superforms";
 	type T = Record<string, unknown>;
 	type U = FormPath<T>;
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from "formsnap";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = FormPrimitive.FieldsetProps<T, U>;
 
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
index e651d84..e72a8db 100644
--- a/src/lib/components/ui/form/form-label.svelte
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from 'bits-ui';
-	import { getFormControl } from 'formsnap';
-	import { cn } from '$lib/utils.js';
-	import { Label } from '$lib/components/ui/label/index.js';
+	import type { Label as LabelPrimitive } from "bits-ui";
+	import { getFormControl } from "formsnap";
+	import { cn } from "$lib/utils/ui.js";
+	import { Label } from "$lib/components/ui/label/index.js";
 
 	type $$Props = LabelPrimitive.Props;
 
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
index cfdbfff..bb304aa 100644
--- a/src/lib/components/ui/form/form-legend.svelte
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as FormPrimitive from 'formsnap';
-	import { cn } from '$lib/utils.js';
+	import * as FormPrimitive from "formsnap";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = FormPrimitive.LegendProps;
 
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
index a60f8c1..2da3aa1 100644
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = LabelPrimitive.Props;
 	type $$Events = LabelPrimitive.Events;
diff --git a/src/lib/components/ui/pagination/pagination-content.svelte b/src/lib/components/ui/pagination/pagination-content.svelte
index 749e3eb..2cf3100 100644
--- a/src/lib/components/ui/pagination/pagination-content.svelte
+++ b/src/lib/components/ui/pagination/pagination-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLUListElement>;
 
diff --git a/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index 8fb5dd0..418f7f5 100644
--- a/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Ellipsis from 'lucide-svelte/icons/ellipsis';
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLSpanElement>;
 
diff --git a/src/lib/components/ui/pagination/pagination-item.svelte b/src/lib/components/ui/pagination/pagination-item.svelte
index 99a12d9..ab603c6 100644
--- a/src/lib/components/ui/pagination/pagination-item.svelte
+++ b/src/lib/components/ui/pagination/pagination-item.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLLIElement>;
 	let className: $$Props["class"] = undefined;
diff --git a/src/lib/components/ui/pagination/pagination-link.svelte b/src/lib/components/ui/pagination/pagination-link.svelte
index d3e9639..6482403 100644
--- a/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/src/lib/components/ui/pagination/pagination-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
-	import { buttonVariants, type Props } from '$lib/components/ui/button/index.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
+	import { type Props, buttonVariants } from "$lib/components/ui/button/index.js";
 
 	type $$Props = PaginationPrimitive.PageProps &
 		Props & {
diff --git a/src/lib/components/ui/pagination/pagination-next-button.svelte b/src/lib/components/ui/pagination/pagination-next-button.svelte
index 3ae6537..f087956 100644
--- a/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = PaginationPrimitive.NextButtonProps;
 	type $$Events = PaginationPrimitive.NextButtonEvents;
diff --git a/src/lib/components/ui/pagination/pagination-prev-button.svelte b/src/lib/components/ui/pagination/pagination-prev-button.svelte
index b6a7388..1101b21 100644
--- a/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
-	import ChevronLeft from 'lucide-svelte/icons/chevron-left';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils.js';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = PaginationPrimitive.PrevButtonProps;
 	type $$Events = PaginationPrimitive.PrevButtonEvents;
diff --git a/src/lib/components/ui/pagination/pagination.svelte b/src/lib/components/ui/pagination/pagination.svelte
index fbbd6ab..46033d5 100644
--- a/src/lib/components/ui/pagination/pagination.svelte
+++ b/src/lib/components/ui/pagination/pagination.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { Pagination as PaginationPrimitive } from "bits-ui";
 
-	import { cn } from '$lib/utils.js';
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = PaginationPrimitive.Props;
 	type $$Events = PaginationPrimitive.Events;
@@ -11,7 +11,6 @@
 	export let perPage: $$Props["perPage"] = 10;
 	export let page: $$Props["page"] = 1;
 	export let siblingCount: $$Props["siblingCount"] = 1;
-
 	export { className as class };
 
 	$: currentPage = page;
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
index f9097c1..327541c 100644
--- a/src/lib/components/ui/select/index.ts
+++ b/src/lib/components/ui/select/index.ts
@@ -1,4 +1,4 @@
-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";
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
index 31bf729..0a17229 100644
--- a/src/lib/components/ui/select/select-content.svelte
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { scale } from 'svelte/transition';
-	import { cn, flyAndScale } from '$lib/utils.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils/ui.js";
 
 	type $$Props = SelectPrimitive.ContentProps;
 	type $$Events = SelectPrimitive.ContentEvents;
@@ -27,7 +27,7 @@
 	{outTransitionConfig}
 	{sideOffset}
 	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
index 18c2e3d..29f9e17 100644
--- a/src/lib/components/ui/select/select-item.svelte
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Check from 'lucide-svelte/icons/check';
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = SelectPrimitive.ItemProps;
 	type $$Events = SelectPrimitive.ItemEvents;
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full 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",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full 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-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
index cb51de4..6ae46f1 100644
--- a/src/lib/components/ui/select/select-label.svelte
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = SelectPrimitive.LabelProps;
 
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
index b835018..e49a9ae 100644
--- a/src/lib/components/ui/select/select-separator.svelte
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = SelectPrimitive.SeparatorProps;
 
@@ -8,4 +8,4 @@
 	export { className as class };
 </script>
 
-<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
index f35ae5e..250da86 100644
--- a/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-	import ChevronDown from 'lucide-svelte/icons/chevron-down';
-	import { cn } from '$lib/utils.js';
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = SelectPrimitive.TriggerProps;
 	type $$Events = SelectPrimitive.TriggerEvents;
@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 62ae198..7d5b2f1 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
-	import { mode } from 'mode-watcher';
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
 
 	type $$Props = SonnerProps;
 </script>
diff --git a/src/lib/page_loading_indicator.svelte b/src/lib/page_loading_indicator.svelte
index 6c88146..e3e99dd 100644
--- a/src/lib/page_loading_indicator.svelte
+++ b/src/lib/page_loading_indicator.svelte
@@ -1,37 +1,37 @@
 <script lang="ts">
-import { onNavigate } from '$app/navigation'
-import { navigating } from '$app/stores'
+import { onNavigate } from '$app/navigation';
+import { navigating } from '$app/stores';
 
-let visible = false
-let progress = 0
-let load_durations: number[] = []
-$: average_load = load_durations.reduce((a, b) => a + b, 0) / load_durations.length
-const increment = 1
+let visible = false;
+let progress = 0;
+let load_durations: number[] = [];
+$: average_load = load_durations.reduce((a, b) => a + b, 0) / load_durations.length;
+const increment = 1;
 onNavigate((navigation) => {
-	const typical_load_time = average_load || 200 //ms
-	const frequency = typical_load_time / 100
-	let start = performance.now()
+	const typical_load_time = average_load || 200; //ms
+	const frequency = typical_load_time / 100;
+	let start = performance.now();
 	// Start the progress bar
-	visible = true
-	progress = 0
+	visible = true;
+	progress = 0;
 	const interval = setInterval(() => {
 		// Increment the progress bar
-		progress += increment
-	}, frequency)
+		progress += increment;
+	}, frequency);
 	// Resolve the promise when the page is done loading
 	$navigating?.complete.then(() => {
-		progress = 100 // Fill out the progress bar
-		clearInterval(interval)
+		progress = 100; // Fill out the progress bar
+		clearInterval(interval);
 		// after 100 ms hide the progress bar
 		setTimeout(() => {
-			visible = false
-		}, 500)
+			visible = false;
+		}, 500);
 		// Log how long that one took
-		const end = performance.now()
-		const duration = end - start
-		load_durations = [...load_durations, duration]
-	})
-})
+		const end = performance.now();
+		const duration = end - start;
+		load_durations = [...load_durations, duration];
+	});
+});
 </script>
 
 <div class="progress" class:visible style:--progress={progress}>
diff --git a/src/lib/server/api/services/sessions.service.ts b/src/lib/server/api/services/sessions.service.ts
index 9c4052a..7f2dbbc 100644
--- a/src/lib/server/api/services/sessions.service.ts
+++ b/src/lib/server/api/services/sessions.service.ts
@@ -1,19 +1,39 @@
-import {
-	cookieExpiresAt,
-	cookieExpiresMilliseconds,
-	halfCookieExpiresMilliseconds
-} from '$lib/server/api/common/utils/cookies';
-import {SessionsRepository} from '$lib/server/api/repositories/sessions.repository';
-import {sha256} from '@oslojs/crypto/sha2';
-import {encodeBase32LowerCaseNoPadding, encodeHexLowerCase} from '@oslojs/encoding';
-import {inject, injectable} from 'tsyringe';
-import type {Sessions, Users} from '../databases/postgres/tables';
+import { cookieExpiresAt, cookieExpiresMilliseconds, halfCookieExpiresMilliseconds } from '$lib/server/api/common/utils/cookies';
+import { UsersRepository } from '$lib/server/api/repositories/users.repository';
+import { RedisService } from '$lib/server/api/services/redis.service';
+import { sha256 } from '@oslojs/crypto/sha2';
+import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
+import { inject, injectable } from 'tsyringe';
+import type { Users } from '../databases/postgres/tables';
 
-export type SessionValidationResult = { session: Sessions; user: Users } | { session: null; user: null };
+export type RedisSession = {
+	id: string;
+	user_id: string;
+	expires_at: number;
+	ip_country: string;
+	ip_address: string;
+	two_factor_auth_enabled: boolean;
+	is_two_factor_authenticated: boolean;
+};
+
+export type Session = {
+	id: string;
+	userId: string;
+	expiresAt: Date;
+	ipCountry: string;
+	ipAddress: string;
+	twoFactorAuthEnabled: boolean;
+	isTwoFactorAuthenticated: boolean;
+};
+
+export type SessionValidationResult = { session: Session; user: Users } | { session: null; user: null } | { session: Session; user: undefined };
 
 @injectable()
 export class SessionsService {
-	constructor(@inject(SessionsRepository) private readonly sessionsRepository: SessionsRepository) {}
+	constructor(
+		@inject(RedisService) private readonly redisService: RedisService,
+		@inject(UsersRepository) private readonly usersRepository: UsersRepository,
+	) {}
 
 	generateSessionToken() {
 		const bytes = new Uint8Array(20);
@@ -30,7 +50,7 @@ export class SessionsService {
 		isTwoFactorAuthenticated: boolean,
 	) {
 		const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
-		const session: Sessions = {
+		const session = {
 			id: sessionId,
 			userId,
 			expiresAt: cookieExpiresAt,
@@ -39,23 +59,49 @@ export class SessionsService {
 			twoFactorAuthEnabled,
 			isTwoFactorAuthenticated,
 		};
-		await this.sessionsRepository.create(session);
+		await this.redisService.client.set(
+			`session:${sessionId}`,
+			JSON.stringify({
+				id: session.id,
+				user_id: session.userId,
+				expires_at: session.expiresAt,
+				ip_country: session.ipCountry,
+				ip_address: session.ipAddress,
+				two_factor_auth_enabled: session.twoFactorAuthEnabled,
+				is_two_factor_authenticated: session.isTwoFactorAuthenticated,
+			}),
+			'EXAT',
+			Math.floor(session.expiresAt.getTime() / 1000),
+		);
 		return session;
 	}
 
 	async validateSessionToken(token: string): Promise<SessionValidationResult> {
 		// TODO: Why was this needed in the docs? https://lucia-next.pages.dev/sessions/basic-api/drizzle-orm
 		// const sessionId = encodeHexLowerCase(sha256(new TextEncoder().encode(token)));
-		const sessions = await this.sessionsRepository.findBySessionId(token);
-		if (sessions.length < 1) {
+		const item = await this.redisService.client.get(`session:${token}`);
+		if (item === null) {
 			return {
 				session: null,
 				user: null,
 			};
 		}
-		const { user, session } = sessions[0];
+		const result: RedisSession = JSON.parse(item);
+		const session: Session = {
+			id: result.id,
+			userId: result.user_id,
+			expiresAt: new Date(result.expires_at * 1000),
+			ipCountry: result.ip_country,
+			ipAddress: result.ip_address,
+			twoFactorAuthEnabled: result.two_factor_auth_enabled,
+			isTwoFactorAuthenticated: result.is_two_factor_authenticated,
+		};
+		let user: Users | undefined = undefined;
+		if (session.userId) {
+			user = await this.usersRepository.findOneById(session.userId);
+		}
 		if (Date.now() >= session.expiresAt.getTime()) {
-			await this.sessionsRepository.deleteBySessionId(token);
+			await this.redisService.client.del(`session:${token}`);
 			return {
 				session: null,
 				user: null,
@@ -64,13 +110,26 @@ export class SessionsService {
 
 		if (Date.now() >= session.expiresAt.getTime() - cookieExpiresMilliseconds) {
 			session.expiresAt = new Date(Date.now() + halfCookieExpiresMilliseconds);
-			await this.sessionsRepository.updateSessionExpiresAt(token, session.expiresAt);
+			await this.redisService.client.set(
+				`session:${token}`,
+				JSON.stringify({
+					id: session.id,
+					user_id: session.userId,
+					expires_at: Math.floor(session.expiresAt.getTime() / 1000),
+					ip_country: session.ipCountry,
+					ip_address: session.ipAddress,
+					two_factor_auth_enabled: session.twoFactorAuthEnabled,
+					is_two_factor_authenticated: session.isTwoFactorAuthenticated,
+				}),
+				'EXAT',
+				Math.floor(session.expiresAt.getTime() / 1000),
+			);
 		}
 
 		return { session, user };
 	}
 
 	async invalidateSession(sessionId: string) {
-		await this.sessionsRepository.deleteBySessionId(sessionId);
+		await this.redisService.client.del(`session:${sessionId}`);
 	}
 }
diff --git a/src/lib/zodValidation.ts b/src/lib/zodValidation.ts
index 3a5fe0d..6c671ff 100644
--- a/src/lib/zodValidation.ts
+++ b/src/lib/zodValidation.ts
@@ -1,4 +1,4 @@
-import { z, ZodNumber, ZodOptional } from 'zod';
+import { ZodNumber, ZodOptional, z } from 'zod';
 // import zodToJsonSchema from 'zod-to-json-schema';
 
 export const BoardGameSearch = z.object({
@@ -25,15 +25,7 @@ export type ListGameSchema = typeof list_game_request_schema;
 
 // https://github.com/colinhacks/zod/discussions/330
 export function IntegerString<schema extends ZodNumber | ZodOptional<ZodNumber>>(schema: schema) {
-	return z.preprocess(
-		(value) =>
-			typeof value === 'string'
-				? Number.parseInt(value, 10)
-				: typeof value === 'number'
-					? value
-					: undefined,
-		schema,
-	);
+	return z.preprocess((value) => (typeof value === 'string' ? Number.parseInt(value, 10) : typeof value === 'number' ? value : undefined), schema);
 }
 
 const Search = z.object({
@@ -73,47 +65,45 @@ export const search_schema = z
 		limit: z.number().min(10).max(100).default(10),
 		skip: z.number().min(0).default(0),
 	})
-	.superRefine(
-		({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
-			console.log({ minPlayers, maxPlayers });
-			if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
-				ctx.addIssue({
-					code: 'custom',
-					message: 'Min Players must be smaller than Max Players',
-					path: ['minPlayers'],
-				});
-				ctx.addIssue({
-					code: 'custom',
-					message: 'Min Players must be smaller than Max Players',
-					path: ['maxPlayers'],
-				});
-			}
+	.superRefine(({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
+		console.log({ minPlayers, maxPlayers });
+		if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
+			ctx.addIssue({
+				code: 'custom',
+				message: 'Min Players must be smaller than Max Players',
+				path: ['minPlayers'],
+			});
+			ctx.addIssue({
+				code: 'custom',
+				message: 'Min Players must be smaller than Max Players',
+				path: ['maxPlayers'],
+			});
+		}
 
-			if (exactMinAge && !minAge) {
-				ctx.addIssue({
-					code: 'custom',
-					message: 'Min Age required when searching for exact min age',
-					path: ['minAge'],
-				});
-			}
+		if (exactMinAge && !minAge) {
+			ctx.addIssue({
+				code: 'custom',
+				message: 'Min Age required when searching for exact min age',
+				path: ['minAge'],
+			});
+		}
 
-			if (exactMinPlayers && !minPlayers) {
-				ctx.addIssue({
-					code: 'custom',
-					message: 'Min Players required when searching for exact min players',
-					path: ['minPlayers'],
-				});
-			}
+		if (exactMinPlayers && !minPlayers) {
+			ctx.addIssue({
+				code: 'custom',
+				message: 'Min Players required when searching for exact min players',
+				path: ['minPlayers'],
+			});
+		}
 
-			if (exactMaxPlayers && !maxPlayers) {
-				ctx.addIssue({
-					code: 'custom',
-					message: 'Max Players required when searching for exact max players',
-					path: ['maxPlayers'],
-				});
-			}
-		},
-	);
+		if (exactMaxPlayers && !maxPlayers) {
+			ctx.addIssue({
+				code: 'custom',
+				message: 'Max Players required when searching for exact max players',
+				path: ['maxPlayers'],
+			});
+		}
+	});
 
 export type SearchSchema = typeof search_schema;
 
diff --git a/src/routes/(app)/(protected)/admin/+layout.server.ts b/src/routes/(app)/(protected)/admin/+layout.server.ts
index 2517426..5fafe52 100644
--- a/src/routes/(app)/(protected)/admin/+layout.server.ts
+++ b/src/routes/(app)/(protected)/admin/+layout.server.ts
@@ -1,6 +1,5 @@
 import { forbiddenMessage, notSignedInMessage } from '$lib/flashMessages';
 import { db } from '$lib/server/api/packages/drizzle';
-import { errorMessage } from '$lib/utils/superforms';
 import { eq } from 'drizzle-orm';
 import { loadFlash, redirect } from 'sveltekit-flash-message/server';
 import { user_roles } from '../../../../lib/server/api/databases/postgres/tables';
diff --git a/src/routes/(app)/(protected)/admin/+layout.svelte b/src/routes/(app)/(protected)/admin/+layout.svelte
index 085b9d5..13edff9 100644
--- a/src/routes/(app)/(protected)/admin/+layout.svelte
+++ b/src/routes/(app)/(protected)/admin/+layout.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
-	import { getFlash } from 'sveltekit-flash-message';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	import { theme } from '$state/theme';
-	import { toastMessage } from '$lib/utils/superforms.js';
+import { page } from '$app/stores';
+import { theme } from '$state/theme';
+import { getFlash } from 'sveltekit-flash-message';
 
-	const { data } = $props();
-	const { user } = data;
+const { data } = $props();
+const { user } = data;
 
-	const flash = getFlash(page, {
-		clearOnNavigate: true,
-		clearAfterMs: 3000,
-		clearArray: true
-	});
+const flash = getFlash(page, {
+	clearOnNavigate: true,
+	clearAfterMs: 3000,
+	clearArray: true,
+});
 
-	$effect(() => {
-		// set the theme to the user's active theme
-		$theme = user?.theme || 'system';
-		document.querySelector('html')?.setAttribute('data-theme', $theme);
-	});
+$effect(() => {
+	// set the theme to the user's active theme
+	$theme = user?.theme || 'system';
+	document.querySelector('html')?.setAttribute('data-theme', $theme);
+});
 </script>
 
 <h1>Do the admin stuff</h1>
diff --git a/src/routes/(app)/(protected)/admin/users/+page.server.ts b/src/routes/(app)/(protected)/admin/users/+page.server.ts
index 065f749..43c2a37 100644
--- a/src/routes/(app)/(protected)/admin/users/+page.server.ts
+++ b/src/routes/(app)/(protected)/admin/users/+page.server.ts
@@ -1,13 +1,13 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { redirect } from 'sveltekit-flash-message/server'
-import type { PageServerLoad } from './$types'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { redirect } from 'sveltekit-flash-message/server';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
 	// const users = await db.query.users.findMany({
@@ -17,5 +17,5 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		// users,
-	}
-}
+	};
+};
diff --git a/src/routes/(app)/(protected)/admin/users/+page.svelte b/src/routes/(app)/(protected)/admin/users/+page.svelte
index c53666c..df13dba 100644
--- a/src/routes/(app)/(protected)/admin/users/+page.svelte
+++ b/src/routes/(app)/(protected)/admin/users/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-	import DataTable from './user-table.svelte';
-	const { data } = $props();
+import DataTable from './user-table.svelte';
+
+const { data } = $props();
 </script>
 
 <h1>Users</h1>
diff --git a/src/routes/(app)/(protected)/admin/users/[id]/+page.svelte b/src/routes/(app)/(protected)/admin/users/[id]/+page.svelte
index 1c9fdf1..815d178 100644
--- a/src/routes/(app)/(protected)/admin/users/[id]/+page.svelte
+++ b/src/routes/(app)/(protected)/admin/users/[id]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-import { enhance } from '$app/forms'
-import { Button } from '$lib/components/ui/button'
-import capitalize from 'just-capitalize'
+import { enhance } from '$app/forms';
+import { Button } from '$lib/components/ui/button';
+import capitalize from 'just-capitalize';
 // import AddRolesForm from './add-rolesTable-form.svelte';
 
-const { data } = $props()
+const { data } = $props();
 
-const { user, availableRoles } = data
-const { user_roles }: { user_roles: { role: { name: string; cuid: string } }[] } = user
+const { user, availableRoles } = data;
+const { user_roles }: { user_roles: { role: { name: string; cuid: string } }[] } = user;
 </script>
 
 <h1>User Details</h1>
diff --git a/src/routes/(app)/(protected)/admin/users/[id]/add-roles-form.svelte b/src/routes/(app)/(protected)/admin/users/[id]/add-roles-form.svelte
index 27b7fc4..88306f1 100644
--- a/src/routes/(app)/(protected)/admin/users/[id]/add-roles-form.svelte
+++ b/src/routes/(app)/(protected)/admin/users/[id]/add-roles-form.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-import { Checkbox } from '$lib/components/ui/checkbox/index.js'
-import * as Form from '$lib/components/ui/form'
-import { Input } from '$lib/components/ui/input'
-import { type AddRoleSchema, addRoleSchema } from '$lib/validations/account'
-import { type Infer, type SuperValidated, superForm } from 'sveltekit-superforms'
-import { zodClient } from 'sveltekit-superforms/adapters'
+import { Checkbox } from '$lib/components/ui/checkbox/index.js';
+import { type AddRoleSchema, addRoleSchema } from '$lib/validations/account';
+import { type Infer, type SuperValidated, superForm } from 'sveltekit-superforms';
+import { zodClient } from 'sveltekit-superforms/adapters';
 
-export let availableRoles: { name: string; cuid: string }[] = []
-const data: SuperValidated<Infer<AddRoleSchema>> = availableRoles
+export let availableRoles: { name: string; cuid: string }[] = [];
+const data: SuperValidated<Infer<AddRoleSchema>> = availableRoles;
 
 const form = superForm(data, {
 	validators: zodClient(addRoleSchema),
@@ -18,16 +16,16 @@ const form = superForm(data, {
 	// 		toast.error("Please fix the errors in the form.");
 	// 	}
 	// }
-})
+});
 
-const { form: formData, enhance } = form
+const { form: formData, enhance } = form;
 
 function addRole(id: string) {
-	$formData.roles = [...$formData.roles, id]
+	$formData.roles = [...$formData.roles, id];
 }
 
 function removeRole(id: string) {
-	$formData.roles = $formData.roles.filter((i) => i !== id)
+	$formData.roles = $formData.roles.filter((i) => i !== id);
 }
 </script>
 
diff --git a/src/routes/(app)/(protected)/admin/users/user-table-actions.svelte b/src/routes/(app)/(protected)/admin/users/user-table-actions.svelte
index 20ea5a9..0cbdb54 100644
--- a/src/routes/(app)/(protected)/admin/users/user-table-actions.svelte
+++ b/src/routes/(app)/(protected)/admin/users/user-table-actions.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import Ellipsis from 'lucide-svelte/icons/ellipsis';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { Button } from '$lib/components/ui/button';
-	import { User } from 'lucide-svelte';
+import { Button } from '$lib/components/ui/button';
+import { User } from 'lucide-svelte';
+import Ellipsis from 'lucide-svelte/icons/ellipsis';
 
-	export let cuid: string;
+export let cuid: string;
 </script>
 
 <DropdownMenu.Root>
diff --git a/src/routes/(app)/(protected)/admin/users/user-table-checkbox.svelte b/src/routes/(app)/(protected)/admin/users/user-table-checkbox.svelte
index c34a979..5f4adf7 100644
--- a/src/routes/(app)/(protected)/admin/users/user-table-checkbox.svelte
+++ b/src/routes/(app)/(protected)/admin/users/user-table-checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Checkbox } from '$lib/components/ui/checkbox';
-	import type { Writable } from 'svelte/store';
+import { Checkbox } from '$lib/components/ui/checkbox';
+import type { Writable } from 'svelte/store';
 
-	export let checked: Writable<boolean>;
+export let checked: Writable<boolean>;
 </script>
 
 <Checkbox bind:checked={$checked} />
\ No newline at end of file
diff --git a/src/routes/(app)/(protected)/admin/users/user-table.svelte b/src/routes/(app)/(protected)/admin/users/user-table.svelte
index e7cfb98..c04bc68 100644
--- a/src/routes/(app)/(protected)/admin/users/user-table.svelte
+++ b/src/routes/(app)/(protected)/admin/users/user-table.svelte
@@ -1,135 +1,114 @@
 <script lang="ts">
-  import {
-    createTable,
-    Render,
-    Subscribe,
-    createRender,
-  } from "svelte-headless-table";
-  import {
-    addPagination,
-    addSortBy,
-    addTableFilter,
-    addHiddenColumns,
-    addSelectedRows,
-  } from "svelte-headless-table/plugins";
-  import { readable } from "svelte/store";
-  import ArrowUpDown from "lucide-svelte/icons/arrow-up-down";
-  import ChevronDown from "lucide-svelte/icons/chevron-down";
-  import * as Table from "$lib/components/ui/table";
-  import DataTableActions from "./user-table-actions.svelte";
-  import { Button } from "$lib/components/ui/button";
-  import { Input } from "$lib/components/ui/input";
-  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-  import DataTableCheckbox from "./user-table-checkbox.svelte";
-	import type { Users } from '$db/schema';
+import type { Users } from '$db/schema';
+import { Button } from '$lib/components/ui/button';
+import { Input } from '$lib/components/ui/input';
+import ArrowUpDown from 'lucide-svelte/icons/arrow-up-down';
+import ChevronDown from 'lucide-svelte/icons/chevron-down';
+import { Render, Subscribe, createRender, createTable } from 'svelte-headless-table';
+import { addHiddenColumns, addPagination, addSelectedRows, addSortBy, addTableFilter } from 'svelte-headless-table/plugins';
+import { readable } from 'svelte/store';
+import DataTableActions from './user-table-actions.svelte';
+import DataTableCheckbox from './user-table-checkbox.svelte';
 
-	export let users: Users[] = [];
+export let users: Users[] = [];
 
-  const table = createTable(readable(users), {
-    page: addPagination(),
-    sort: addSortBy({ disableMultiSort: true }),
-    filter: addTableFilter({
-      fn: ({ filterValue, value }) => value.includes(filterValue),
-    }),
-    hide: addHiddenColumns(),
-    select: addSelectedRows(),
-  });
+const table = createTable(readable(users), {
+	page: addPagination(),
+	sort: addSortBy({ disableMultiSort: true }),
+	filter: addTableFilter({
+		fn: ({ filterValue, value }) => value.includes(filterValue),
+	}),
+	hide: addHiddenColumns(),
+	select: addSelectedRows(),
+});
 
-  const columns = table.createColumns([
-    table.column({
-      accessor: "cuid",
-      header: (_, { pluginStates }) => {
-        const { allPageRowsSelected } = pluginStates.select;
-        return createRender(DataTableCheckbox, {
-          checked: allPageRowsSelected,
-        });
-      },
-      cell: ({ row }, { pluginStates }) => {
-        const { getRowState } = pluginStates.select;
-        const { isSelected } = getRowState(row);
+const columns = table.createColumns([
+	table.column({
+		accessor: 'cuid',
+		header: (_, { pluginStates }) => {
+			const { allPageRowsSelected } = pluginStates.select;
+			return createRender(DataTableCheckbox, {
+				checked: allPageRowsSelected,
+			});
+		},
+		cell: ({ row }, { pluginStates }) => {
+			const { getRowState } = pluginStates.select;
+			const { isSelected } = getRowState(row);
 
-        return createRender(DataTableCheckbox, {
-          checked: isSelected,
-        });
-      },
-      plugins: {
-        filter: {
-          exclude: true,
-        },
-      },
-    }),
-    table.column({
-      accessor: "username",
-      header: "Username",
-    }),
-    table.column({
-      accessor: "email",
-      header: "Email",
-			cell: ({ value }) => {
-				return value ?? "N/A";
-			}
-    }),
-    table.column({
-      accessor: "first_name",
-      header: "First Name",
-			cell: ({ value }) => {
-				return value && value.length > 0 ? value : "N/A";
+			return createRender(DataTableCheckbox, {
+				checked: isSelected,
+			});
+		},
+		plugins: {
+			filter: {
+				exclude: true,
 			},
-      plugins: {
-        filter: {
-          exclude: true,
-        },
-      },
-    }),
-		table.column({
-			accessor: "last_name",
-			header: "Last Name",
-			cell: ({ value }) => {
-				return value && value.length > 0 ? value : "N/A";
+		},
+	}),
+	table.column({
+		accessor: 'username',
+		header: 'Username',
+	}),
+	table.column({
+		accessor: 'email',
+		header: 'Email',
+		cell: ({ value }) => {
+			return value ?? 'N/A';
+		},
+	}),
+	table.column({
+		accessor: 'first_name',
+		header: 'First Name',
+		cell: ({ value }) => {
+			return value && value.length > 0 ? value : 'N/A';
+		},
+		plugins: {
+			filter: {
+				exclude: true,
 			},
-			plugins: {
-				filter: {
-					exclude: true,
-				},
+		},
+	}),
+	table.column({
+		accessor: 'last_name',
+		header: 'Last Name',
+		cell: ({ value }) => {
+			return value && value.length > 0 ? value : 'N/A';
+		},
+		plugins: {
+			filter: {
+				exclude: true,
 			},
-		}),
-    table.column({
-      accessor: ({ cuid }) => cuid,
-      header: "",
-      cell: ({ value }) => {
-        return createRender(DataTableActions, { cuid: value });
-      },
-      plugins: {
-        sort: {
-          disable: true,
-        },
-      },
-    }),
-  ]);
+		},
+	}),
+	table.column({
+		accessor: ({ cuid }) => cuid,
+		header: '',
+		cell: ({ value }) => {
+			return createRender(DataTableActions, { cuid: value });
+		},
+		plugins: {
+			sort: {
+				disable: true,
+			},
+		},
+	}),
+]);
 
-  const {
-    headerRows,
-    pageRows,
-    tableAttrs,
-    tableBodyAttrs,
-    pluginStates,
-    flatColumns,
-    rows,
-  } = table.createViewModel(columns);
+const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, flatColumns, rows } = table.createViewModel(columns);
 
-  const { pageIndex, hasNextPage, hasPreviousPage } = pluginStates.page;
-  const { filterValue } = pluginStates.filter;
-  const { hiddenColumnIds } = pluginStates.hide;
-  const { selectedDataIds } = pluginStates.select;
+const { pageIndex, hasNextPage, hasPreviousPage } = pluginStates.page;
+const { filterValue } = pluginStates.filter;
+const { hiddenColumnIds } = pluginStates.hide;
+const { selectedDataIds } = pluginStates.select;
 
-  const ids = flatColumns.map((col) => col.id);
-  let hideForId = Object.fromEntries(ids.map((id) => [id, true]));
+const ids = flatColumns.map((col) => col.id);
+let hideForId = Object.fromEntries(ids.map((id) => [id, true]));
 
-  $: $hiddenColumnIds = Object.entries(hideForId)
-    .filter(([, hide]) => !hide)
-    .map(([id]) => id);
+$: $hiddenColumnIds = Object.entries(hideForId)
+	.filter(([, hide]) => !hide)
+	.map(([id]) => id);
 
-  const columnsToHide: string[] = [];
+const columnsToHide: string[] = [];
 </script>
 
 <div>
diff --git a/src/routes/(app)/(protected)/collections/+page.svelte b/src/routes/(app)/(protected)/collections/+page.svelte
index 63f8d7d..c9c2f1d 100644
--- a/src/routes/(app)/(protected)/collections/+page.svelte
+++ b/src/routes/(app)/(protected)/collections/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-import * as Card from '$components/ui/card'
-
-const { data } = $props()
-let collections = data?.collections || []
+import * as Card from '$components/ui/card';
+const { data } = $props();
+let collections = data?.collections || [];
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/(protected)/collections/[cuid]/+error.svelte b/src/routes/(app)/(protected)/collections/[cuid]/+error.svelte
index d480a67..fdfc7cd 100644
--- a/src/routes/(app)/(protected)/collections/[cuid]/+error.svelte
+++ b/src/routes/(app)/(protected)/collections/[cuid]/+error.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+import { page } from '$app/stores';
 </script>
 
 <div class="error">
 	{#if $page.status === 404}
-		<h1>The page you requested doesn't exist! 🤷‍♂️</h1>
+		<h1>The page you requested doesn't exist! 🤷</h1>
 		<h3 class="mt-6"><a href="/">Go Home</a></h3>
 	{:else}
 		<h1 class="h1">Unexpected Error</h1>
diff --git a/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte b/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte
index 70a1054..ea29041 100644
--- a/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte
+++ b/src/routes/(app)/(protected)/collections/[cuid]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 // import { tick, onDestroy } from 'svelte';
-import Game from '$components/Game.svelte'
-import type { UICollection } from '$lib/types'
+import Game from '$components/Game.svelte';
+import type { UICollection } from '$lib/types';
 
-const { data } = $props()
-const { items = [] } = data
-console.log(`Page data: ${JSON.stringify(data)}`)
-let collection: UICollection = data?.collection ?? {}
-console.log('items', items)
+const { data } = $props();
+const { items = [] } = data;
+console.log(`Page data: ${JSON.stringify(data)}`);
+let collection: UICollection = data?.collection ?? {};
+console.log('items', items);
 
 // async function handleNextPageEvent(event: CustomEvent) {
 // 	if (+event?.detail?.page === page + 1) {
diff --git a/src/routes/(app)/(protected)/collections/add/+page.server.ts b/src/routes/(app)/(protected)/collections/add/+page.server.ts
index 76af777..f8c9180 100644
--- a/src/routes/(app)/(protected)/collections/add/+page.server.ts
+++ b/src/routes/(app)/(protected)/collections/add/+page.server.ts
@@ -1,14 +1,13 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { userNotAuthenticated } from '$lib/server/auth-utils'
-import { redirect } from 'sveltekit-flash-message/server'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { redirect } from 'sveltekit-flash-message/server';
 
 export async function load(event) {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
-	return {}
+	return {};
 }
diff --git a/src/routes/(app)/(protected)/collections/add/+page.svelte b/src/routes/(app)/(protected)/collections/add/+page.svelte
index 201b843..50fd390 100644
--- a/src/routes/(app)/(protected)/collections/add/+page.svelte
+++ b/src/routes/(app)/(protected)/collections/add/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import GameSearchForm from "$components/search/GameSearchForm.svelte";
+import GameSearchForm from '$components/search/GameSearchForm.svelte';
 
-	export let data;
+export let data;
 </script>
 <h1>Add a game to your collection</h1>
 
diff --git a/src/routes/(app)/(protected)/collections/add/bgg/+page.server.ts b/src/routes/(app)/(protected)/collections/add/bgg/+page.server.ts
index e4c350f..63c659a 100644
--- a/src/routes/(app)/(protected)/collections/add/bgg/+page.server.ts
+++ b/src/routes/(app)/(protected)/collections/add/bgg/+page.server.ts
@@ -1,20 +1,19 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { userNotAuthenticated } from '$lib/server/auth-utils'
-import { BggForm } from '$lib/zodValidation'
-import { redirect } from '@sveltejs/kit'
-import { zod } from 'sveltekit-superforms/adapters'
-import { superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from '../$types'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { BggForm } from '$lib/zodValidation';
+import { redirect } from '@sveltejs/kit';
+import { zod } from 'sveltekit-superforms/adapters';
+import { superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from '../$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
-	const form = await superValidate({}, zod(BggForm))
+	const form = await superValidate({}, zod(BggForm));
 
-	return { form }
-}
+	return { form };
+};
diff --git a/src/routes/(app)/(protected)/collections/add/bgg/+page.svelte b/src/routes/(app)/(protected)/collections/add/bgg/+page.svelte
index ef1d361..fcf0490 100644
--- a/src/routes/(app)/(protected)/collections/add/bgg/+page.svelte
+++ b/src/routes/(app)/(protected)/collections/add/bgg/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Input from "$components/ui/input/input.svelte";
-	import Label from "$components/ui/label/label.svelte";
+import Input from '$components/ui/input/input.svelte';
+import Label from '$components/ui/label/label.svelte';
 
-	export let data;
+export let data;
 </script>
 <h1>Add a game to your collection</h1>
 
diff --git a/src/routes/(app)/(protected)/list/+layout.svelte b/src/routes/(app)/(protected)/list/+layout.svelte
index 21bc4cf..1ab989b 100644
--- a/src/routes/(app)/(protected)/list/+layout.svelte
+++ b/src/routes/(app)/(protected)/list/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import Transition from '$components/transition.svelte'
+import Transition from '$components/transition.svelte';
 
-export let data
-const wishlistsTable = data.wishlists || []
+export let data;
+const wishlistsTable = data.wishlists || [];
 </script>
 
 <aside class="wishlists">
diff --git a/src/routes/(app)/(protected)/list/[id]/+page.server.ts b/src/routes/(app)/(protected)/list/[id]/+page.server.ts
index a5febe2..2e233f8 100644
--- a/src/routes/(app)/(protected)/list/[id]/+page.server.ts
+++ b/src/routes/(app)/(protected)/list/[id]/+page.server.ts
@@ -1,6 +1,5 @@
 import { notSignedInMessage } from '$lib/flashMessages';
 import { db } from '$lib/server/api/packages/drizzle';
-import { userNotAuthenticated } from '$lib/server/auth-utils';
 import { modifyListGameSchema } from '$lib/validations/zod-schemas';
 import { type Actions, fail } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
diff --git a/src/routes/(app)/(protected)/list/[id]/+page.svelte b/src/routes/(app)/(protected)/list/[id]/+page.svelte
index 134e942..6909f30 100644
--- a/src/routes/(app)/(protected)/list/[id]/+page.svelte
+++ b/src/routes/(app)/(protected)/list/[id]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Game from '$components/Game.svelte'
+import Game from '$components/Game.svelte';
 
-export let data
-console.log('data', data)
-const wishlist = data.wishlist
-const gamesItems = wishlist?.items
+export let data;
+console.log('data', data);
+const wishlist = data.wishlist;
+const gamesItems = wishlist?.items;
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/(protected)/settings/+layout.svelte b/src/routes/(app)/(protected)/settings/+layout.svelte
index 4f4c6f4..ca47f57 100644
--- a/src/routes/(app)/(protected)/settings/+layout.svelte
+++ b/src/routes/(app)/(protected)/settings/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-import { page } from '$app/stores'
-import type { Route } from '$lib/types'
+import { page } from '$app/stores';
+import type { Route } from '$lib/types';
 
 const routes: Route[] = [
 	{ href: '/settings/profile', label: 'Profile' },
 	{ href: '/settings/security', label: 'Security' },
-]
+];
 
-let { children } = $props()
+let { children } = $props();
 </script>
 
 <div class="security-nav">
diff --git a/src/routes/(app)/(protected)/settings/+page.server.ts b/src/routes/(app)/(protected)/settings/+page.server.ts
index 38077bd..e485e59 100644
--- a/src/routes/(app)/(protected)/settings/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/+page.server.ts
@@ -1,8 +1,8 @@
 // +page.server.ts
-import { redirect } from '@sveltejs/kit'
-import type { PageServerLoad } from './$types'
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
 	// Redirect to a different page
-	throw redirect(307, '/settings/profile')
-}
+	throw redirect(307, '/settings/profile');
+};
diff --git a/src/routes/(app)/(protected)/settings/security/+page.server.ts b/src/routes/(app)/(protected)/settings/security/+page.server.ts
index 0470814..cb97aa1 100644
--- a/src/routes/(app)/(protected)/settings/security/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/security/+page.server.ts
@@ -1,18 +1,18 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { redirect } from 'sveltekit-flash-message/server'
-import type { PageServerLoad } from './$types'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { redirect } from 'sveltekit-flash-message/server';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
 	return {
 		hasSetupTwoFactor: authedUser.mfa_enabled,
-	}
-}
+	};
+};
 
-export const actions = {}
+export const actions = {};
diff --git a/src/routes/(app)/(protected)/settings/security/+page.svelte b/src/routes/(app)/(protected)/settings/security/+page.svelte
index 60c5b85..84e6b80 100644
--- a/src/routes/(app)/(protected)/settings/security/+page.svelte
+++ b/src/routes/(app)/(protected)/settings/security/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-import { Button } from '$components/ui/button/index'
-import { KeyRound } from 'lucide-svelte'
+import { Button } from '$components/ui/button/index';
+import { KeyRound } from 'lucide-svelte';
 
-const { data } = $props()
+const { data } = $props();
 
-const hasSetupTwoFactor = data.hasSetupTwoFactor
+const hasSetupTwoFactor = data.hasSetupTwoFactor;
 </script>
 
 <div class="mt-6">
diff --git a/src/routes/(app)/(protected)/settings/security/change/password/+page.server.ts b/src/routes/(app)/(protected)/settings/security/change/password/+page.server.ts
index 30bd840..d6d13ec 100644
--- a/src/routes/(app)/(protected)/settings/security/change/password/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/security/change/password/+page.server.ts
@@ -1,81 +1,81 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { type Actions, fail } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
-import { zod } from 'sveltekit-superforms/adapters'
-import { setError, superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from './$types'
-import { changeUserPasswordSchema } from './schemas'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { type Actions, fail } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
+import { zod } from 'sveltekit-superforms/adapters';
+import { setError, superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from './$types';
+import { changeUserPasswordSchema } from './schemas';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
-	const form = await superValidate(event, zod(changeUserPasswordSchema))
+	const form = await superValidate(event, zod(changeUserPasswordSchema));
 
 	form.data = {
 		current_password: '',
 		password: '',
 		confirm_password: '',
-	}
+	};
 	return {
 		form,
-	}
-}
+	};
+};
 
 export const actions: Actions = {
 	default: async (event) => {
-		const { locals } = event
+		const { locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 		if (!authedUser) {
-			throw redirect(302, '/login', notSignedInMessage, event)
+			throw redirect(302, '/login', notSignedInMessage, event);
 		}
 
-		const form = await superValidate(event, zod(changeUserPasswordSchema))
+		const form = await superValidate(event, zod(changeUserPasswordSchema));
 
 		if (!form.valid) {
 			return fail(400, {
 				form,
-			})
+			});
 		}
 
 		const { error: verifyPasswordError } = await locals.api.me.verify.password
 			.$post({
 				json: { password: form.data.current_password },
 			})
-			.then(locals.parseApiResponse)
+			.then(locals.parseApiResponse);
 
-		console.log('verifyPasswordError', verifyPasswordError)
+		console.log('verifyPasswordError', verifyPasswordError);
 
 		if (verifyPasswordError) {
-			console.error(verifyPasswordError)
-			return setError(form, 'current_password', 'Your password is incorrect')
+			console.error(verifyPasswordError);
+			return setError(form, 'current_password', 'Your password is incorrect');
 		}
 		if (authedUser?.username) {
 			try {
 				if (form.data.password !== form.data.confirm_password) {
-					return setError(form, 'Password and confirm password do not match')
+					return setError(form, 'Password and confirm password do not match');
 				}
 				await locals.api.me.update.password.$put({
 					json: { password: form.data.password, confirm_password: form.data.confirm_password },
-				})
+				});
 			} catch (e) {
-				console.error(e)
-				form.data.password = ''
-				form.data.confirm_password = ''
-				form.data.current_password = ''
-				return setError(form, 'current_password', 'Your password is incorrect.')
+				console.error(e);
+				form.data.password = '';
+				form.data.confirm_password = '';
+				form.data.current_password = '';
+				return setError(form, 'current_password', 'Your password is incorrect.');
 			}
 			const message = {
 				type: 'success',
 				message: 'Password Updated. Please sign in.',
-			} as const
-			redirect(302, '/login', message, event)
+			} as const;
+			redirect(302, '/login', message, event);
 		}
-		return setError(form, 'Error occurred. Please try again or contact support if you need further help.')
+		return setError(form, 'Error occurred. Please try again or contact support if you need further help.');
 	},
-}
+};
diff --git a/src/routes/(app)/(protected)/settings/security/change/password/+page.svelte b/src/routes/(app)/(protected)/settings/security/change/password/+page.svelte
index e2f8c0f..673718a 100644
--- a/src/routes/(app)/(protected)/settings/security/change/password/+page.svelte
+++ b/src/routes/(app)/(protected)/settings/security/change/password/+page.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
-import * as Alert from '$components/ui/alert'
-import * as Form from '$components/ui/form'
-import { Input } from '$components/ui/input'
-import { Toggle } from '$components/ui/toggle'
-import { AlertTriangle, EyeIcon, EyeOff } from 'lucide-svelte'
-import { zodClient } from 'sveltekit-superforms/adapters'
-import { superForm } from 'sveltekit-superforms/client'
-import { changeUserPasswordSchema } from './schemas'
+import * as Alert from '$components/ui/alert';
+import * as Form from '$components/ui/form';
+import { Input } from '$components/ui/input';
+import { Toggle } from '$components/ui/toggle';
+import { AlertTriangle, EyeIcon, EyeOff } from 'lucide-svelte';
+import { zodClient } from 'sveltekit-superforms/adapters';
+import { superForm } from 'sveltekit-superforms/client';
+import { changeUserPasswordSchema } from './schemas';
 
-const { data } = $props()
+const { data } = $props();
 
 const form = superForm(data.form, {
 	taintedMessage: null,
 	validators: zodClient(changeUserPasswordSchema),
 	delayMs: 500,
 	multipleSubmits: 'prevent',
-})
+});
 
-let hiddenCurrentPassword = $state(true)
-let hiddenPassword = $state(true)
-let hiddenConfirmPassword = $state(true)
-let currentPasswordInput = $derived(hiddenCurrentPassword ? 'password' : 'text')
-let passwordInput = $derived(hiddenPassword ? 'password' : 'text')
-let confirmPasswordInput = $derived(hiddenConfirmPassword ? 'password' : 'text')
+let hiddenCurrentPassword = $state(true);
+let hiddenPassword = $state(true);
+let hiddenConfirmPassword = $state(true);
+let currentPasswordInput = $derived(hiddenCurrentPassword ? 'password' : 'text');
+let passwordInput = $derived(hiddenPassword ? 'password' : 'text');
+let confirmPasswordInput = $derived(hiddenConfirmPassword ? 'password' : 'text');
 
 // $inspect(hiddenCurrentPassword, hiddenPassword, hiddenConfirmPassword)
 
-const { form: formData, enhance } = form
+const { form: formData, enhance } = form;
 </script>
 
 <form method="POST" use:enhance>
diff --git a/src/routes/(app)/(protected)/settings/security/change/password/schemas.ts b/src/routes/(app)/(protected)/settings/security/change/password/schemas.ts
index a6f3adb..35cd627 100644
--- a/src/routes/(app)/(protected)/settings/security/change/password/schemas.ts
+++ b/src/routes/(app)/(protected)/settings/security/change/password/schemas.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
 export const changeUserPasswordSchema = z
 	.object({
@@ -7,15 +7,15 @@ export const changeUserPasswordSchema = z
 		confirm_password: z.string({ required_error: 'Confirm Password is required' }).trim(),
 	})
 	.superRefine(({ confirm_password, password }, ctx) => {
-		refinePasswords(confirm_password, password, ctx)
-	})
+		refinePasswords(confirm_password, password, ctx);
+	});
 
-export type ChangeUserPasswordSchema = typeof changeUserPasswordSchema
+export type ChangeUserPasswordSchema = typeof changeUserPasswordSchema;
 
 const refinePasswords = async (confirm_password: string, password: string, ctx: z.RefinementCtx) => {
-	await comparePasswords(confirm_password, password, ctx)
-	await checkPasswordStrength(password, ctx)
-}
+	await comparePasswords(confirm_password, password, ctx);
+	await checkPasswordStrength(password, ctx);
+};
 
 const comparePasswords = async (confirm_password: string, password: string, ctx: z.RefinementCtx) => {
 	if (confirm_password !== password) {
@@ -23,52 +23,52 @@ const comparePasswords = async (confirm_password: string, password: string, ctx:
 			code: 'custom',
 			message: 'Password and Confirm Password must match',
 			path: ['confirm_password'],
-		})
+		});
 	}
-}
+};
 
 const checkPasswordStrength = async (password: string, ctx: z.RefinementCtx) => {
-	const minimumLength = password.length < 8
-	const maximumLength = password.length > 128
-	const containsUppercase = (ch: string) => /[A-Z]/.test(ch)
-	const containsLowercase = (ch: string) => /[a-z]/.test(ch)
-	const containsSpecialChar = (ch: string) => /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/.test(ch)
-	let countOfUpperCase = 0
-	let countOfLowerCase = 0
-	let countOfNumbers = 0
-	let countOfSpecialChar = 0
+	const minimumLength = password.length < 8;
+	const maximumLength = password.length > 128;
+	const containsUppercase = (ch: string) => /[A-Z]/.test(ch);
+	const containsLowercase = (ch: string) => /[a-z]/.test(ch);
+	const containsSpecialChar = (ch: string) => /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/.test(ch);
+	let countOfUpperCase = 0;
+	let countOfLowerCase = 0;
+	let countOfNumbers = 0;
+	let countOfSpecialChar = 0;
 	for (let i = 0; i < password.length; i++) {
-		const char = password.charAt(i)
+		const char = password.charAt(i);
 		if (!Number.isNaN(+char)) {
-			countOfNumbers++
+			countOfNumbers++;
 		} else if (containsUppercase(char)) {
-			countOfUpperCase++
+			countOfUpperCase++;
 		} else if (containsLowercase(char)) {
-			countOfLowerCase++
+			countOfLowerCase++;
 		} else if (containsSpecialChar(char)) {
-			countOfSpecialChar++
+			countOfSpecialChar++;
 		}
 	}
 
-	let errorMessage = 'Your password:'
+	let errorMessage = 'Your password:';
 
 	if (countOfLowerCase < 1) {
-		errorMessage = ' Must have at least one lowercase letter. '
+		errorMessage = ' Must have at least one lowercase letter. ';
 	}
 	if (countOfNumbers < 1) {
-		errorMessage += ' Must have at least one number. '
+		errorMessage += ' Must have at least one number. ';
 	}
 	if (countOfUpperCase < 1) {
-		errorMessage += ' Must have at least one uppercase letter. '
+		errorMessage += ' Must have at least one uppercase letter. ';
 	}
 	if (countOfSpecialChar < 1) {
-		errorMessage += ' Must have at least one special character.'
+		errorMessage += ' Must have at least one special character.';
 	}
 	if (minimumLength) {
-		errorMessage += ' Be at least 8 characters long.'
+		errorMessage += ' Be at least 8 characters long.';
 	}
 	if (maximumLength) {
-		errorMessage += ' Be less than 128 characters long.'
+		errorMessage += ' Be less than 128 characters long.';
 	}
 
 	if (errorMessage.length > 'Your password:'.length) {
@@ -76,6 +76,6 @@ const checkPasswordStrength = async (password: string, ctx: z.RefinementCtx) =>
 			code: 'custom',
 			message: errorMessage,
 			path: ['password'],
-		})
+		});
 	}
-}
+};
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/+page.server.ts b/src/routes/(app)/(protected)/settings/security/mfa/+page.server.ts
index d16dcd4..8cc88d7 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/security/mfa/+page.server.ts
@@ -1,24 +1,24 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import type { Actions } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
-import type { PageServerLoad } from '../../$types'
+import { notSignedInMessage } from '$lib/flashMessages';
+import type { Actions } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
+import type { PageServerLoad } from '../../$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
-	const { data: totpData, error: totpDataError } = await locals.api.mfa.totp.$get().then(locals.parseApiResponse)
+	const { data: totpData, error: totpDataError } = await locals.api.mfa.totp.$get().then(locals.parseApiResponse);
 
-	const totpEnabled = !!totpData
+	const totpEnabled = !!totpData;
 
 	return {
 		totpEnabled,
 		hardwareTokenEnabled: false,
-	}
-}
+	};
+};
 
-export const actions: Actions = {}
+export const actions: Actions = {};
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/+page.svelte b/src/routes/(app)/(protected)/settings/security/mfa/+page.svelte
index 94b3304..5b0803c 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/+page.svelte
+++ b/src/routes/(app)/(protected)/settings/security/mfa/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { Badge } from '$components/ui/badge'
-import { Button } from '$components/ui/button'
-import * as Card from '$lib/components/ui/card'
+import { Badge } from '$components/ui/badge';
+import { Button } from '$components/ui/button';
+import * as Card from '$components/ui/card';
 
-const { data } = $props()
+const { data } = $props();
 
-const totpEnabled = data.totpEnabled
-const hardwareTokenEnabled = data.hardwareTokenEnabled
+const totpEnabled = data.totpEnabled;
+const hardwareTokenEnabled = data.hardwareTokenEnabled;
 </script>
 
 <h1>Two-factor authentication</h1>
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/recovery-codes/+page.server.ts b/src/routes/(app)/(protected)/settings/security/mfa/recovery-codes/+page.server.ts
index c3c6533..b0d0649 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/recovery-codes/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/security/mfa/recovery-codes/+page.server.ts
@@ -1,28 +1,28 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import { redirect } from 'sveltekit-flash-message/server'
-import type { PageServerLoad } from '../../../$types'
+import { notSignedInMessage } from '$lib/flashMessages';
+import { redirect } from 'sveltekit-flash-message/server';
+import type { PageServerLoad } from '../../../$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
 	if (authedUser.mfa_enabled) {
-		const { data: recoveryCodesData, error: recoveryCodesError } = await locals.api.mfa.totp.recoveryCodes.$get().then(locals.parseApiResponse)
-		console.log('recoveryCodesData', recoveryCodesData)
-		console.log('recoveryCodesError', recoveryCodesError)
+		const { data: recoveryCodesData, error: recoveryCodesError } = await locals.api.mfa.totp.recoveryCodes.$get().then(locals.parseApiResponse);
+		console.log('recoveryCodesData', recoveryCodesData);
+		console.log('recoveryCodesError', recoveryCodesError);
 		if (recoveryCodesError || !recoveryCodesData || !recoveryCodesData.recoveryCodes) {
 			return {
 				recoveryCodes: [],
-			}
+			};
 		}
 		return {
 			recoveryCodes: recoveryCodesData.recoveryCodes,
-		}
+		};
 	}
 
-	redirect(302, '/profile', { message: 'Two-Factor Authentication is not enabled', type: 'error' }, event)
-}
+	redirect(302, '/profile', { message: 'Two-Factor Authentication is not enabled', type: 'error' }, event);
+};
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/security-keys/+page.svelte b/src/routes/(app)/(protected)/settings/security/mfa/security-keys/+page.svelte
new file mode 100644
index 0000000..bbefbaf
--- /dev/null
+++ b/src/routes/(app)/(protected)/settings/security/mfa/security-keys/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts"></script>
+
+<h1>Security Keys</h1>
+
+<p>TODO</p>
\ No newline at end of file
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.server.ts b/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.server.ts
index 5f86a0c..f0fc2ba 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.server.ts
+++ b/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.server.ts
@@ -1,35 +1,35 @@
-import { notSignedInMessage } from '$lib/flashMessages'
-import env from '$lib/server/api/common/env'
-import { decodeHex, encodeBase32 } from '@oslojs/encoding'
-import { createTOTPKeyURI } from '@oslojs/otp'
-import { type Actions, fail } from '@sveltejs/kit'
-import kebabCase from 'just-kebab-case'
-import QRCode from 'qrcode'
-import { redirect } from 'sveltekit-flash-message/server'
-import { zod } from 'sveltekit-superforms/adapters'
-import { setError, superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from '../../$types'
-import { addTwoFactorSchema, removeTwoFactorSchema } from './schemas'
+import { notSignedInMessage } from '$lib/flashMessages';
+import env from '$lib/server/api/common/env';
+import { decodeHex, encodeBase32 } from '@oslojs/encoding';
+import { createTOTPKeyURI } from '@oslojs/otp';
+import { type Actions, fail } from '@sveltejs/kit';
+import kebabCase from 'just-kebab-case';
+import QRCode from 'qrcode';
+import { redirect } from 'sveltekit-flash-message/server';
+import { zod } from 'sveltekit-superforms/adapters';
+import { setError, superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from '../../$types';
+import { addTwoFactorSchema, removeTwoFactorSchema } from './schemas';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 	if (!authedUser) {
-		throw redirect(302, '/login', notSignedInMessage, event)
+		throw redirect(302, '/login', notSignedInMessage, event);
 	}
 
-	const addTwoFactorForm = await superValidate(event, zod(addTwoFactorSchema))
-	const removeTwoFactorForm = await superValidate(event, zod(removeTwoFactorSchema))
+	const addTwoFactorForm = await superValidate(event, zod(addTwoFactorSchema));
+	const removeTwoFactorForm = await superValidate(event, zod(removeTwoFactorSchema));
 	// const addAuthNFactorForm = await superValidate(event, zod(addAuthNFactorSchema));
 
-	const { data, error } = await locals.api.mfa.totp.$get().then(locals.parseApiResponse)
+	const { data, error } = await locals.api.mfa.totp.$get().then(locals.parseApiResponse);
 	if (error || !data) {
 		return fail(500, {
 			addTwoFactorForm,
-		})
+		});
 	}
-	const { totpCredential } = data
+	const { totpCredential } = data;
 	if (totpCredential && authedUser.mfa_enabled) {
 		return {
 			addTwoFactorForm,
@@ -38,41 +38,41 @@ export const load: PageServerLoad = async (event) => {
 			recoveryCodes: [],
 			totpUri: '',
 			qrCode: '',
-		}
+		};
 	}
 
 	if (totpCredential && !authedUser.mfa_enabled) {
-		await locals.api.mfa.totp.$delete().then(locals.parseApiResponse)
+		await locals.api.mfa.totp.$delete().then(locals.parseApiResponse);
 	}
 
-	const issuer = kebabCase(env.PUBLIC_SITE_NAME)
-	const accountName = authedUser.email || authedUser.username
-	const { data: createdTotpData, error: createdTotpError } = await locals.api.mfa.totp.$post().then(locals.parseApiResponse)
+	const issuer = kebabCase(env.PUBLIC_SITE_NAME);
+	const accountName = authedUser.email || authedUser.username;
+	const { data: createdTotpData, error: createdTotpError } = await locals.api.mfa.totp.$post().then(locals.parseApiResponse);
 
 	if (createdTotpError || !createdTotpData) {
 		return fail(500, {
 			addTwoFactorForm,
-		})
+		});
 	}
 
-	const { totpCredential: createdTotpCredentials } = createdTotpData
+	const { totpCredential: createdTotpCredentials } = createdTotpData;
 	// pass the website's name and the user identifier (e.g. email, username)
 	if (!createdTotpCredentials?.secret_data) {
 		return fail(500, {
 			addTwoFactorForm,
-		})
+		});
 	}
-	const decodedHexSecret = decodeHex(createdTotpCredentials.secret_data)
-	const secret = encodeBase32(decodedHexSecret)
-	const intervalInSeconds = 30
-	const digits = 6
+	const decodedHexSecret = decodeHex(createdTotpCredentials.secret_data);
+	const secret = encodeBase32(decodedHexSecret);
+	const intervalInSeconds = 30;
+	const digits = 6;
 
-	const totpUri = createTOTPKeyURI(issuer, accountName, decodedHexSecret, intervalInSeconds, digits)
+	const totpUri = createTOTPKeyURI(issuer, accountName, decodedHexSecret, intervalInSeconds, digits);
 
 	addTwoFactorForm.data = {
 		password: '',
 		two_factor_code: '',
-	}
+	};
 	return {
 		addTwoFactorForm,
 		removeTwoFactorForm,
@@ -81,84 +81,84 @@ export const load: PageServerLoad = async (event) => {
 		totpUri,
 		qrCode: await QRCode.toDataURL(totpUri),
 		secret,
-	}
-}
+	};
+};
 
 export const actions: Actions = {
 	enableTotp: async (event) => {
-		const { locals } = event
+		const { locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 		if (!authedUser) {
-			throw redirect(302, '/login', notSignedInMessage, event)
+			throw redirect(302, '/login', notSignedInMessage, event);
 		}
 
-		const addTwoFactorForm = await superValidate(event, zod(addTwoFactorSchema))
+		const addTwoFactorForm = await superValidate(event, zod(addTwoFactorSchema));
 
 		if (!addTwoFactorForm.valid) {
 			return fail(400, {
 				addTwoFactorForm,
-			})
+			});
 		}
 
 		const { error: verifyPasswordError } = await locals.api.me.verify.password
 			.$post({
 				json: { password: addTwoFactorForm.data.password },
 			})
-			.then(locals.parseApiResponse)
+			.then(locals.parseApiResponse);
 
 		if (verifyPasswordError) {
-			console.log(verifyPasswordError)
-			return setError(addTwoFactorForm, 'password', 'Your password is incorrect')
+			console.log(verifyPasswordError);
+			return setError(addTwoFactorForm, 'password', 'Your password is incorrect');
 		}
 
 		if (addTwoFactorForm.data.two_factor_code === '') {
-			return setError(addTwoFactorForm, 'two_factor_code', 'Please enter a code')
+			return setError(addTwoFactorForm, 'two_factor_code', 'Please enter a code');
 		}
 
-		const twoFactorCode = addTwoFactorForm.data.two_factor_code
+		const twoFactorCode = addTwoFactorForm.data.two_factor_code;
 		const { error: verifyTotpError } = await locals.api.mfa.totp.verify
 			.$post({
 				json: { code: twoFactorCode },
 			})
-			.then(locals.parseApiResponse)
+			.then(locals.parseApiResponse);
 		if (verifyTotpError) {
-			return setError(addTwoFactorForm, 'two_factor_code', 'Invalid code')
+			return setError(addTwoFactorForm, 'two_factor_code', 'Invalid code');
 		}
 
-		redirect(302, '/settings/security/mfa/recovery-codes')
+		redirect(302, '/settings/security/mfa/recovery-codes');
 	},
 	disableTotp: async (event) => {
-		const { locals } = event
+		const { locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 		if (!authedUser) {
-			throw redirect(302, '/login', notSignedInMessage, event)
+			throw redirect(302, '/login', notSignedInMessage, event);
 		}
 
-		const removeTwoFactorForm = await superValidate(event, zod(removeTwoFactorSchema))
+		const removeTwoFactorForm = await superValidate(event, zod(removeTwoFactorSchema));
 
 		if (!removeTwoFactorForm.valid) {
 			return fail(400, {
 				removeTwoFactorForm,
-			})
+			});
 		}
 		const { error: verifyPasswordError } = await locals.api.me.verify.password
 			.$post({
 				json: { password: removeTwoFactorForm.data.password },
 			})
-			.then(locals.parseApiResponse)
+			.then(locals.parseApiResponse);
 
 		if (verifyPasswordError) {
-			console.log(verifyPasswordError)
-			return setError(removeTwoFactorForm, 'password', 'Your password is incorrect')
+			console.log(verifyPasswordError);
+			return setError(removeTwoFactorForm, 'password', 'Your password is incorrect');
 		}
 
-		const { error: deleteTotpError } = await locals.api.mfa.totp.$delete().then(locals.parseApiResponse)
+		const { error: deleteTotpError } = await locals.api.mfa.totp.$delete().then(locals.parseApiResponse);
 		if (deleteTotpError) {
 			return fail(500, {
 				removeTwoFactorForm,
-			})
+			});
 		}
 
 		redirect(
@@ -169,6 +169,6 @@ export const actions: Actions = {
 				message: 'Two-Factor Authentication has been disabled.',
 			},
 			event,
-		)
+		);
 	},
-}
+};
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.svelte b/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.svelte
index 43b3e4a..9ea6f89 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.svelte
+++ b/src/routes/(app)/(protected)/settings/security/mfa/totp/+page.svelte
@@ -1,36 +1,34 @@
 <script lang="ts">
-import CopyCodeBlock from '$components/CopyCodeBlock.svelte'
-import PinInput from '$components/pin-input.svelte'
-import * as Alert from '$components/ui/alert'
-import * as Form from '$components/ui/form'
-import { Input } from '$components/ui/input'
-import { AlertTriangle } from 'lucide-svelte'
-import { zodClient } from 'sveltekit-superforms/adapters'
-import { superForm } from 'sveltekit-superforms/client'
-import { addTwoFactorSchema, removeTwoFactorSchema } from './schemas'
+import CopyCodeBlock from '$components/CopyCodeBlock.svelte';
+import PinInput from '$components/pin-input.svelte';
+import * as Form from '$components/ui/form';
+import { Input } from '$components/ui/input';
+import { zodClient } from 'sveltekit-superforms/adapters';
+import { superForm } from 'sveltekit-superforms/client';
+import { addTwoFactorSchema, removeTwoFactorSchema } from './schemas';
 
-const { data } = $props()
+const { data } = $props();
 
-const { qrCode, secret, twoFactorEnabled, recoveryCodes } = data
+const { qrCode, secret, twoFactorEnabled, recoveryCodes } = data;
 
 const addTwoFactorForm = superForm(data.addTwoFactorForm, {
 	taintedMessage: null,
 	validators: zodClient(addTwoFactorSchema),
 	delayMs: 500,
 	multipleSubmits: 'prevent',
-})
+});
 
 const removeTwoFactorForm = superForm(data.removeTwoFactorForm, {
 	taintedMessage: null,
 	validators: zodClient(removeTwoFactorSchema),
 	delayMs: 500,
 	multipleSubmits: 'prevent',
-})
+});
 
-console.log('Two Factor: ', twoFactorEnabled, recoveryCodes)
+console.log('Two Factor: ', twoFactorEnabled, recoveryCodes);
 
-const { form: addTwoFactorFormData, enhance: addTwoFactorEnhance } = addTwoFactorForm
-const { form: removeTwoFactorFormData, enhance: removeTwoFactorEnhance } = removeTwoFactorForm
+const { form: addTwoFactorFormData, enhance: addTwoFactorEnhance } = addTwoFactorForm;
+const { form: removeTwoFactorFormData, enhance: removeTwoFactorEnhance } = removeTwoFactorForm;
 </script>
 
 <section class="two-factor">
diff --git a/src/routes/(app)/(protected)/settings/security/mfa/totp/schemas.ts b/src/routes/(app)/(protected)/settings/security/mfa/totp/schemas.ts
index 6e05a49..c03dbd2 100644
--- a/src/routes/(app)/(protected)/settings/security/mfa/totp/schemas.ts
+++ b/src/routes/(app)/(protected)/settings/security/mfa/totp/schemas.ts
@@ -1,14 +1,14 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
 export const addTwoFactorSchema = z.object({
 	password: z.string({ required_error: 'Current Password is required' }),
 	two_factor_code: z.string({ required_error: 'Two Factor Code is required' }).trim(),
-})
+});
 
-export type AddTwoFactorSchema = typeof addTwoFactorSchema
+export type AddTwoFactorSchema = typeof addTwoFactorSchema;
 
 export const removeTwoFactorSchema = addTwoFactorSchema.pick({
 	password: true,
-})
+});
 
-export type RemoveTwoFactorSchema = typeof removeTwoFactorSchema
+export type RemoveTwoFactorSchema = typeof removeTwoFactorSchema;
diff --git a/src/routes/(app)/(protected)/wishlists/+page.svelte b/src/routes/(app)/(protected)/wishlists/+page.svelte
index 29ad9b3..fdd32c1 100644
--- a/src/routes/(app)/(protected)/wishlists/+page.svelte
+++ b/src/routes/(app)/(protected)/wishlists/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-import * as Card from '$components/ui/card'
-
-const { data } = $props()
-const { wishlists = [] } = data
+import * as Card from '$components/ui/card';
+const { data } = $props();
+const { wishlists = [] } = data;
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/(protected)/wishlists/[cuid]/+page.server.ts b/src/routes/(app)/(protected)/wishlists/[cuid]/+page.server.ts
index 6bb229d..058f5ab 100644
--- a/src/routes/(app)/(protected)/wishlists/[cuid]/+page.server.ts
+++ b/src/routes/(app)/(protected)/wishlists/[cuid]/+page.server.ts
@@ -1,8 +1,7 @@
 import { notSignedInMessage } from '$lib/flashMessages.js';
 import { db } from '$lib/server/api/packages/drizzle';
-import { userNotAuthenticated } from '$lib/server/auth-utils';
 import { modifyListGameSchema } from '$lib/validations/zod-schemas';
-import { type Actions, error, fail } from '@sveltejs/kit';
+import { type Actions, error } from '@sveltejs/kit';
 import { and, eq } from 'drizzle-orm';
 import { redirect } from 'sveltekit-flash-message/server';
 import { zod } from 'sveltekit-superforms/adapters';
diff --git a/src/routes/(app)/(protected)/wishlists/[cuid]/+page.svelte b/src/routes/(app)/(protected)/wishlists/[cuid]/+page.svelte
index 784cbd7..de767ab 100644
--- a/src/routes/(app)/(protected)/wishlists/[cuid]/+page.svelte
+++ b/src/routes/(app)/(protected)/wishlists/[cuid]/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-import Game from '$components/Game.svelte'
+import Game from '$components/Game.svelte';
 
-const { data } = $props()
-const { items = [] } = data
+const { data } = $props();
+const { items = [] } = data;
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/+layout.server.ts b/src/routes/(app)/+layout.server.ts
index 493b195..8b60c88 100644
--- a/src/routes/(app)/+layout.server.ts
+++ b/src/routes/(app)/+layout.server.ts
@@ -1,12 +1,12 @@
-import { loadFlash } from 'sveltekit-flash-message/server'
-import type { LayoutServerLoad } from '../$types'
+import { loadFlash } from 'sveltekit-flash-message/server';
+import type { LayoutServerLoad } from '../$types';
 
 export const load: LayoutServerLoad = loadFlash(async (event) => {
-	const { url, locals } = event
-	const authedUser = await locals.getAuthedUser()
+	const { url, locals } = event;
+	const authedUser = await locals.getAuthedUser();
 
 	return {
 		url: url.pathname,
 		authedUser,
-	}
-})
+	};
+});
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index da6647f..6438179 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-import 'iconify-icon'
-import Footer from '$components/Footer.svelte'
-import Header from '$components/Header.svelte'
+import 'iconify-icon';
+import Footer from '$components/Footer.svelte';
+import Header from '$components/Header.svelte';
 
-const { data, children } = $props()
+const { data, children } = $props();
 </script>
 
 <div class="flex min-h-screen w-full flex-col">
diff --git a/src/routes/(app)/+page.server.ts b/src/routes/(app)/+page.server.ts
index 90ab259..1051cbe 100644
--- a/src/routes/(app)/+page.server.ts
+++ b/src/routes/(app)/+page.server.ts
@@ -1,17 +1,17 @@
-import { fail } from '@sveltejs/kit'
-import type { MetaTagsProps } from 'svelte-meta-tags'
-import type { PageServerLoad } from './$types'
+import { fail } from '@sveltejs/kit';
+import type { MetaTagsProps } from 'svelte-meta-tags';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals, url } = event
+	const { locals, url } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 
 	const image = {
 		url: `${new URL(url.pathname, url.origin).href}og?header=Bored Game&page=Home&content=Keep track of your games`,
 		width: 1200,
 		height: 630,
-	}
+	};
 	const metaTags: MetaTagsProps = Object.freeze({
 		title: 'Home',
 		description: 'Home page',
@@ -33,18 +33,18 @@ export const load: PageServerLoad = async (event) => {
 			image: `${new URL(url.pathname, url.origin).href}og?header=Bored Game&page=Home&content=Keep track of your games`,
 			imageAlt: 'Home | Bored Game',
 		},
-	})
+	});
 
 	if (authedUser) {
-		const { data: wishlistsData, error: wishlistsError } = await locals.api.wishlists.$get().then(locals.parseApiResponse)
-		const { data: collectionsData, error: collectionsError } = await locals.api.collections.$get().then(locals.parseApiResponse)
+		const { data: wishlistsData, error: wishlistsError } = await locals.api.wishlists.$get().then(locals.parseApiResponse);
+		const { data: collectionsData, error: collectionsError } = await locals.api.collections.$get().then(locals.parseApiResponse);
 
 		if (wishlistsError || collectionsError) {
-			return fail(500, 'Failed to fetch wishlistsTable or collections')
+			return fail(500, 'Failed to fetch wishlistsTable or collections');
 		}
 
-		console.log('Wishlists', wishlistsData.wishlists)
-		console.log('Collections', collectionsData.collections)
+		console.log('Wishlists', wishlistsData.wishlists);
+		console.log('Collections', collectionsData.collections);
 		return {
 			metaTagsChild: metaTags,
 			user: {
@@ -54,10 +54,10 @@ export const load: PageServerLoad = async (event) => {
 			},
 			wishlists: wishlistsData.wishlists,
 			collections: collectionsData.collections,
-		}
+		};
 	}
 
-	console.log('Not Authed')
+	console.log('Not Authed');
 
-	return { metaTagsChild: metaTags, user: null, wishlists: [], collections: [] }
-}
+	return { metaTagsChild: metaTags, user: null, wishlists: [], collections: [] };
+};
diff --git a/src/routes/(app)/game/[id]/+page.svelte b/src/routes/(app)/game/[id]/+page.svelte
index 294b37b..373697b 100644
--- a/src/routes/(app)/game/[id]/+page.svelte
+++ b/src/routes/(app)/game/[id]/+page.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-import AddToList from '$components/AddToList.svelte'
-import Badge from '$components/ui/badge/badge.svelte'
-import { Button } from '$components/ui/button'
-import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte'
-import { Image } from 'svelte-lazy-loader'
-import type { PageData } from './$types'
+import AddToList from '$components/AddToList.svelte';
+import Badge from '$components/ui/badge/badge.svelte';
+import { Button } from '$components/ui/button';
+import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte';
+import { Image } from 'svelte-lazy-loader';
 
-const { data } = $props()
-const { game, user, in_collection, in_wishlist } = data
+const { data } = $props();
+const { game, user, in_collection, in_wishlist } = data;
 
-let seeMore: boolean = $state(false)
+let seeMore: boolean = $state(false);
 </script>
 
 <svelte:head>
diff --git a/src/routes/(app)/search/+page.server.ts b/src/routes/(app)/search/+page.server.ts
index 172f8d4..db3e257 100644
--- a/src/routes/(app)/search/+page.server.ts
+++ b/src/routes/(app)/search/+page.server.ts
@@ -1,65 +1,65 @@
-import type { GameType, SearchQuery } from '$lib/types'
-import { createOrUpdateGameMinimal } from '$lib/utils/db/gameUtils'
-import { mapAPIGameToBoredGame } from '$lib/utils/gameMapper.js'
-import { search_schema } from '$lib/zodValidation'
-import { error } from '@sveltejs/kit'
-import type { BggThingDto } from 'boardgamegeekclient/dist/esm/dto/index.js'
-import kebabCase from 'just-kebab-case'
-import { zod } from 'sveltekit-superforms/adapters'
-import { superValidate } from 'sveltekit-superforms/server'
+import type { GameType, SearchQuery } from '$lib/types';
+import { createOrUpdateGameMinimal } from '$lib/utils/db/gameUtils';
+import { mapAPIGameToBoredGame } from '$lib/utils/gameMapper.js';
+import { search_schema } from '$lib/zodValidation';
+import { error } from '@sveltejs/kit';
+import type { BggThingDto } from 'boardgamegeekclient/dist/esm/dto/index.js';
+import kebabCase from 'just-kebab-case';
+import { zod } from 'sveltekit-superforms/adapters';
+import { superValidate } from 'sveltekit-superforms/server';
 
 async function searchForGames(locals: App.Locals, eventFetch: typeof fetch, urlQueryParams: URLSearchParams) {
 	try {
-		console.log('urlQueryParams search games', urlQueryParams)
+		console.log('urlQueryParams search games', urlQueryParams);
 
-		const headers = new Headers()
-		headers.set('Content-Type', 'application/json')
+		const headers = new Headers();
+		headers.set('Content-Type', 'application/json');
 		const requestInit: RequestInit = {
 			method: 'GET',
 			headers,
-		}
-		const url = `/api/games/search${urlQueryParams ? `?${urlQueryParams}` : ''}`
-		console.log('Calling internal api', url)
-		const response = await eventFetch(url, requestInit)
-		console.log('response from internal api', response)
+		};
+		const url = `/api/games/search${urlQueryParams ? `?${urlQueryParams}` : ''}`;
+		console.log('Calling internal api', url);
+		const response = await eventFetch(url, requestInit);
+		console.log('response from internal api', response);
 
 		if (response.status !== 404 && !response.ok) {
-			console.log('Status from internal api not 200', response.status)
-			error(response.status)
+			console.log('Status from internal api not 200', response.status);
+			error(response.status);
 		}
 
-		const games = await response.json()
-		console.log('games from DB', games)
+		const games = await response.json();
+		console.log('games from DB', games);
 
-		const gameNameSearch = urlQueryParams.get('q') ?? ''
-		let totalCount = games?.length || 0
+		const gameNameSearch = urlQueryParams.get('q') ?? '';
+		let totalCount = games?.length || 0;
 
 		if (totalCount === 0 || !games.find((game: GameType) => game.slug === kebabCase(gameNameSearch))) {
-			console.log('No games found in DB for', gameNameSearch)
-			const searchQueryParams = urlQueryParams ? `?${urlQueryParams}` : ''
-			const externalResponse = await eventFetch(`/api/external/search${searchQueryParams}`, requestInit)
+			console.log('No games found in DB for', gameNameSearch);
+			const searchQueryParams = urlQueryParams ? `?${urlQueryParams}` : '';
+			const externalResponse = await eventFetch(`/api/external/search${searchQueryParams}`, requestInit);
 
-			console.log('Back from external search', externalResponse)
+			console.log('Back from external search', externalResponse);
 
 			if (!externalResponse.ok) {
-				console.log('Status not 200', externalResponse.status)
-				error(externalResponse.status)
+				console.log('Status not 200', externalResponse.status);
+				error(externalResponse.status);
 			}
 
 			if (externalResponse.ok) {
-				const gameResponse = await externalResponse.json()
-				console.log('response from external api', gameResponse)
-				const gameList: BggThingDto[] = gameResponse?.games
-				totalCount = gameResponse?.totalCount
-				console.log('totalCount', totalCount)
+				const gameResponse = await externalResponse.json();
+				console.log('response from external api', gameResponse);
+				const gameList: BggThingDto[] = gameResponse?.games;
+				totalCount = gameResponse?.totalCount;
+				console.log('totalCount', totalCount);
 				for (const game of gameList) {
-					console.log(`Retrieving simplified external game details for id: ${game.id} with name ${game.name}`)
-					const externalGameResponse = await eventFetch(`/api/external/game/${game.id}?simplified=true`)
+					console.log(`Retrieving simplified external game details for id: ${game.id} with name ${game.name}`);
+					const externalGameResponse = await eventFetch(`/api/external/game/${game.id}?simplified=true`);
 					if (externalGameResponse.ok) {
-						const externalGame = await externalGameResponse.json()
-						console.log('externalGame', externalGame)
-						const boredGame = mapAPIGameToBoredGame(externalGame)
-						games.push(createOrUpdateGameMinimal(locals, boredGame, externalGame.id))
+						const externalGame = await externalGameResponse.json();
+						console.log('externalGame', externalGame);
+						const boredGame = mapAPIGameToBoredGame(externalGame);
+						games.push(createOrUpdateGameMinimal(locals, boredGame, externalGame.id));
 					}
 				}
 			}
@@ -68,14 +68,14 @@ async function searchForGames(locals: App.Locals, eventFetch: typeof fetch, urlQ
 		return {
 			totalCount,
 			games,
-		}
+		};
 	} catch (e) {
-		console.log(`Error searching board games ${e}`)
+		console.log(`Error searching board games ${e}`);
 	}
 	return {
 		totalCount: 0,
 		games: [],
-	}
+	};
 }
 
 const defaults = {
@@ -85,14 +85,14 @@ const defaults = {
 	sort: 'asc',
 	q: '',
 	exact: false,
-}
+};
 
 export const load = async ({ locals, fetch, url }) => {
-	const searchParams = Object.fromEntries(url?.searchParams)
-	console.log('searchParams', searchParams)
-	searchParams.order = searchParams.order || defaults.order
-	searchParams.sort = searchParams.sort || defaults.sort
-	searchParams.q = searchParams.q || defaults.q
+	const searchParams = Object.fromEntries(url?.searchParams);
+	console.log('searchParams', searchParams);
+	searchParams.order = searchParams.order || defaults.order;
+	searchParams.sort = searchParams.sort || defaults.sort;
+	searchParams.q = searchParams.q || defaults.q;
 	const form = await superValidate(
 		{
 			...searchParams,
@@ -101,14 +101,14 @@ export const load = async ({ locals, fetch, url }) => {
 			exact: searchParams.exact ? searchParams.exact === 'true' : defaults.exact,
 		},
 		zod(search_schema),
-	)
+	);
 
 	const queryParams: SearchQuery = {
 		limit: form.data?.limit,
 		skip: form.data?.skip,
 		q: form.data?.q,
 		exact: form.data?.exact,
-	}
+	};
 
 	try {
 		if (form.data?.q === '') {
@@ -119,53 +119,53 @@ export const load = async ({ locals, fetch, url }) => {
 					games: [],
 					wishlists: [],
 				},
-			}
+			};
 		}
 
 		if (form.data?.minAge) {
 			if (form.data?.exactMinAge) {
-				queryParams.min_age = form.data?.minAge
+				queryParams.min_age = form.data?.minAge;
 			} else {
-				queryParams.gt_min_age = form.data?.minAge === 1 ? 0 : form.data?.minAge - 1
+				queryParams.gt_min_age = form.data?.minAge === 1 ? 0 : form.data?.minAge - 1;
 			}
 		}
 
 		if (form.data?.minPlayers) {
 			if (form.data?.exactMinPlayers) {
-				queryParams.min_players = form.data?.minPlayers
+				queryParams.min_players = form.data?.minPlayers;
 			} else {
-				queryParams.gt_min_players = form.data?.minPlayers === 1 ? 0 : form.data?.minPlayers - 1
+				queryParams.gt_min_players = form.data?.minPlayers === 1 ? 0 : form.data?.minPlayers - 1;
 			}
 		}
 		if (form.data?.maxPlayers) {
 			if (form.data?.exactMaxPlayers) {
-				queryParams.max_players = form.data?.maxPlayers
+				queryParams.max_players = form.data?.maxPlayers;
 			} else {
-				queryParams.lt_max_players = form.data?.maxPlayers + 1
+				queryParams.lt_max_players = form.data?.maxPlayers + 1;
 			}
 		}
 
-		const newQueryParams: Record<string, string> = {}
+		const newQueryParams: Record<string, string> = {};
 		for (const key in queryParams) {
-			newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`
+			newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
 		}
 
-		const urlQueryParams = new URLSearchParams(newQueryParams)
-		const searchData = await searchForGames(locals, fetch, urlQueryParams)
+		const urlQueryParams = new URLSearchParams(newQueryParams);
+		const searchData = await searchForGames(locals, fetch, urlQueryParams);
 
-		console.log('search data', JSON.stringify(searchData, null, 2))
+		console.log('search data', JSON.stringify(searchData, null, 2));
 
 		return {
 			form,
 			// modifyListForm,
 			searchData,
 			wishlists: [],
-		}
+		};
 	} catch (e) {
-		console.log(`Error searching board games ${e}`)
+		console.log(`Error searching board games ${e}`);
 	}
 
-	console.log('returning default no data')
+	console.log('returning default no data');
 	return {
 		form,
 		searchData: {
@@ -173,29 +173,29 @@ export const load = async ({ locals, fetch, url }) => {
 			games: [],
 		},
 		wishlists: [],
-	}
-}
+	};
+};
 
 export const actions = {
 	random: async ({ request, locals, fetch }) => {
-		const form = await superValidate(request, zod(search_schema))
+		const form = await superValidate(request, zod(search_schema));
 		const queryParams: SearchQuery = {
 			order_by: 'rank',
 			ascending: false,
 			random: true,
 			fields: 'id,name,min_age,min_players,max_players,thumb_url,min_playtime,max_playtime,min_age,description',
-		}
+		};
 
-		const newQueryParams: Record<string, string> = {}
+		const newQueryParams: Record<string, string> = {};
 		for (const key in queryParams) {
-			newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`
+			newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
 		}
 
-		const urlQueryParams = new URLSearchParams(newQueryParams)
+		const urlQueryParams = new URLSearchParams(newQueryParams);
 
 		return {
 			form,
 			searchData: await searchForGames(locals, fetch, urlQueryParams),
-		}
+		};
 	},
-}
+};
diff --git a/src/routes/(app)/search/+page.svelte b/src/routes/(app)/search/+page.svelte
index e0b1d70..4b05253 100644
--- a/src/routes/(app)/search/+page.svelte
+++ b/src/routes/(app)/search/+page.svelte
@@ -1,40 +1,40 @@
 <script lang="ts">
-import { dev } from '$app/environment'
-import Game from '$components/Game.svelte'
-import GameSearchForm from '$components/search/GameSearchForm.svelte'
-import * as Pagination from '$lib/components/ui/pagination'
-import { search_schema } from '$lib/zodValidation'
-import { createToolbar, melt } from '@melt-ui/svelte'
-import { LayoutGrid, LayoutList } from 'lucide-svelte'
-import { superForm } from 'sveltekit-superforms'
-import { zodClient } from 'sveltekit-superforms/adapters'
-import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte'
+import { dev } from '$app/environment';
+import Game from '$components/Game.svelte';
+import GameSearchForm from '$components/search/GameSearchForm.svelte';
+import * as Pagination from '$components/ui/pagination';
+import { search_schema } from '$lib/zodValidation';
+import { createToolbar, melt } from '@melt-ui/svelte';
+import { LayoutGrid, LayoutList } from 'lucide-svelte';
+import { superForm } from 'sveltekit-superforms';
+import { zodClient } from 'sveltekit-superforms/adapters';
+import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 
-export let data
+export let data;
 
-const { games, totalCount } = data.searchData
+const { games, totalCount } = data.searchData;
 
-console.log('data found', data)
-console.log('found games', games)
-console.log('found totalCount', totalCount)
+console.log('data found', data);
+console.log('found games', games);
+console.log('found totalCount', totalCount);
 
 const form = superForm(data.form, {
 	validators: zodClient(search_schema),
-})
+});
 
-let pageSize: number = form.limit || 10
+let pageSize: number = form.limit || 10;
 
 const {
 	elements: { root: toolbarRoot },
 	builders: { createToolbarGroup },
-} = createToolbar()
+} = createToolbar();
 const {
 	elements: { group: listStyleGroup, item: listStyleItem },
-} = createToolbarGroup()
+} = createToolbarGroup();
 
-const gameListStyle: 'grid' | 'list' = 'grid'
+const gameListStyle: 'grid' | 'list' = 'grid';
 function handleListStyle(event) {
-	console.log(event, typeof event)
+	console.log(event, typeof event);
 }
 </script>
 
diff --git a/src/routes/(auth)/+layout.server.ts b/src/routes/(auth)/+layout.server.ts
index f2b9ed4..56daa2a 100644
--- a/src/routes/(auth)/+layout.server.ts
+++ b/src/routes/(auth)/+layout.server.ts
@@ -3,6 +3,6 @@ export async function load(event) {
 
 	return {
 		url: url.pathname,
-		user: locals.user
+		user: locals.user,
 	};
-};
+}
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index ef5e0e2..b9763bc 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-import { page } from '$app/stores'
-import Logo from '$lib/components/logo.svelte'
-import Transition from '$lib/components/transition.svelte'
-import { Button } from '$lib/components/ui/button'
+import { page } from '$app/stores';
+import Logo from '$lib/components/logo.svelte';
+import { Button } from '$lib/components/ui/button';
 
-let { data, children } = $props()
+let { data, children } = $props();
 </script>
 
 <div class="container">
diff --git a/src/routes/(auth)/auth/callback/github/+server.ts b/src/routes/(auth)/auth/callback/github/+server.ts
index 5453600..0b6d59c 100644
--- a/src/routes/(auth)/auth/callback/github/+server.ts
+++ b/src/routes/(auth)/auth/callback/github/+server.ts
@@ -1,26 +1,26 @@
-import { StatusCodes } from '$lib/constants/status-codes'
-import type { RequestEvent } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
+import { StatusCodes } from '$lib/constants/status-codes';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const { locals, url } = event
-	const code = url.searchParams.get('code')
-	const state = url.searchParams.get('state')
-	console.log('code', code, 'state', state)
+	const { locals, url } = event;
+	const code = url.searchParams.get('code');
+	const state = url.searchParams.get('state');
+	console.log('code', code, 'state', state);
 
-	const { data, error } = await locals.api.oauth.github.$get({ query: { code, state } }).then(locals.parseApiResponse)
+	const { data, error } = await locals.api.oauth.github.$get({ query: { code, state } }).then(locals.parseApiResponse);
 
 	if (error) {
 		return new Response(JSON.stringify(error), {
 			status: 400,
-		})
+		});
 	}
 
 	if (!data) {
 		return new Response(JSON.stringify({ message: 'Invalid request' }), {
 			status: 400,
-		})
+		});
 	}
 
-	redirect(StatusCodes.TEMPORARY_REDIRECT, '/')
+	redirect(StatusCodes.TEMPORARY_REDIRECT, '/');
 }
diff --git a/src/routes/(auth)/auth/callback/google/+server.ts b/src/routes/(auth)/auth/callback/google/+server.ts
index 5bc0ad4..8ed31f6 100644
--- a/src/routes/(auth)/auth/callback/google/+server.ts
+++ b/src/routes/(auth)/auth/callback/google/+server.ts
@@ -1,26 +1,26 @@
-import { StatusCodes } from '$lib/constants/status-codes'
-import type { RequestEvent } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
+import { StatusCodes } from '$lib/constants/status-codes';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const { locals, url } = event
-	const code = url.searchParams.get('code')
-	const state = url.searchParams.get('state')
-	console.log('code', code, 'state', state)
+	const { locals, url } = event;
+	const code = url.searchParams.get('code');
+	const state = url.searchParams.get('state');
+	console.log('code', code, 'state', state);
 
-	const { data, error } = await locals.api.oauth.google.$get({ query: { code, state } }).then(locals.parseApiResponse)
+	const { data, error } = await locals.api.oauth.google.$get({ query: { code, state } }).then(locals.parseApiResponse);
 
 	if (error) {
 		return new Response(JSON.stringify(error), {
 			status: 400,
-		})
+		});
 	}
 
 	if (!data) {
 		return new Response(JSON.stringify({ message: 'Invalid request' }), {
 			status: 400,
-		})
+		});
 	}
 
-	redirect(StatusCodes.TEMPORARY_REDIRECT, '/')
+	redirect(StatusCodes.TEMPORARY_REDIRECT, '/');
 }
diff --git a/src/routes/(auth)/login/+page.server.ts b/src/routes/(auth)/login/+page.server.ts
index 09fd50e..9653d0c 100644
--- a/src/routes/(auth)/login/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@@ -1,58 +1,58 @@
-import { StatusCodes } from '$lib/constants/status-codes'
-import { signinUsernameDto } from '$lib/dtos/signin-username.dto'
-import { type Actions, fail } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
-import { zod } from 'sveltekit-superforms/adapters'
-import { setError, superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from './$types'
+import { StatusCodes } from '$lib/constants/status-codes';
+import { signinUsernameDto } from '$lib/dtos/signin-username.dto';
+import { type Actions, fail } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
+import { zod } from 'sveltekit-superforms/adapters';
+import { setError, superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 
 	if (authedUser) {
-		console.log('user already signed in')
-		const message = { type: 'success', message: 'You are already signed in' } as const
-		throw redirect('/', message, event)
+		console.log('user already signed in');
+		const message = { type: 'success', message: 'You are already signed in' } as const;
+		throw redirect('/', message, event);
 		// redirect(302, '/', message, event)
 	}
-	const form = await superValidate(event, zod(signinUsernameDto))
+	const form = await superValidate(event, zod(signinUsernameDto));
 
 	return {
 		form,
-	}
-}
+	};
+};
 
 export const actions: Actions = {
 	default: async (event) => {
-		const { locals } = event
+		const { locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 
 		if (authedUser) {
-			const message = { type: 'success', message: 'You are already signed in' } as const
-			throw redirect('/', message, event)
+			const message = { type: 'success', message: 'You are already signed in' } as const;
+			throw redirect('/', message, event);
 		}
 
-		const form = await superValidate(event, zod(signinUsernameDto))
+		const form = await superValidate(event, zod(signinUsernameDto));
 
-		const { error } = await locals.api.login.$post({ json: form.data }).then(locals.parseApiResponse)
+		const { error } = await locals.api.login.$post({ json: form.data }).then(locals.parseApiResponse);
 		if (error) {
-			return setError(form, 'username', error)
+			return setError(form, 'username', error);
 		}
 
 		if (!form.valid) {
-			form.data.password = ''
+			form.data.password = '';
 			return fail(400, {
 				form,
-			})
+			});
 		}
 
-		form.data.username = ''
-		form.data.password = ''
+		form.data.username = '';
+		form.data.password = '';
 
-		redirect(StatusCodes.TEMPORARY_REDIRECT, '/')
+		redirect(StatusCodes.TEMPORARY_REDIRECT, '/');
 
 		// if (
 		// 	twoFactorDetails?.enabled &&
@@ -67,4 +67,4 @@ export const actions: Actions = {
 		// 	redirect(302, '/', message, event);
 		// }
 	},
-}
+};
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index 96fdd94..f2bc04c 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -1,19 +1,14 @@
 <script lang="ts">
-import * as Alert from '$components/ui/alert'
-import { Button } from '$components/ui/button'
-import { Input } from '$components/ui/input'
-import { Label } from '$components/ui/label'
-import * as Card from '$lib/components/ui/card'
-import * as Form from '$lib/components/ui/form'
-import { boredState } from '$lib/stores/boredState.js'
-import { receive, send } from '$lib/utils/pageCrossfade'
-import { signInSchema } from '$lib/validations/auth'
-import { AlertCircle } from 'lucide-svelte'
-import * as flashModule from 'sveltekit-flash-message/client'
-import { zodClient } from 'sveltekit-superforms/adapters'
-import { superForm } from 'sveltekit-superforms/client'
+import { Button } from '$components/ui/button';
+import * as Card from '$components/ui/card';
+import * as Form from '$components/ui/form';
+import { Input } from '$components/ui/input';
+import { boredState } from '$lib/stores/boredState.js';
+import { receive, send } from '$lib/utils/pageCrossfade';
+import * as flashModule from 'sveltekit-flash-message/client';
+import { superForm } from 'sveltekit-superforms/client';
 
-let { data } = $props()
+let { data } = $props();
 
 const superLoginForm = superForm(data.form, {
 	onSubmit: () => boredState.update((n) => ({ ...n, loading: true })),
@@ -24,8 +19,8 @@ const superLoginForm = superForm(data.form, {
 			// Error handling for the flash message:
 			// - result is the ActionResult
 			// - message is the flash store (not the status message store)
-			const errorMessage = result.error.message
-			flashMessage.set({ type: 'error', message: errorMessage })
+			const errorMessage = result.error.message;
+			flashMessage.set({ type: 'error', message: errorMessage });
 		},
 	},
 	syncFlashMessage: false,
@@ -33,9 +28,9 @@ const superLoginForm = superForm(data.form, {
 	// validators: zodClient(signInSchema),
 	// validationMethod: 'oninput',
 	delayMs: 0,
-})
+});
 
-const { form: loginForm, enhance } = superLoginForm
+const { form: loginForm, enhance } = superLoginForm;
 </script>
 
 <svelte:head>
diff --git a/src/routes/(auth)/login/github/+server.ts b/src/routes/(auth)/login/github/+server.ts
index d9e5c33..312061f 100644
--- a/src/routes/(auth)/login/github/+server.ts
+++ b/src/routes/(auth)/login/github/+server.ts
@@ -1,12 +1,11 @@
-import { github } from '$lib/server/auth'
-import { redirect } from '@sveltejs/kit'
-import { generateState } from 'arctic'
-
-import type { RequestEvent } from '@sveltejs/kit'
+import { github } from '$lib/server/auth';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { generateState } from 'arctic';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const state = generateState()
-	const url = await github.createAuthorizationURL(state)
+	const state = generateState();
+	const url = await github.createAuthorizationURL(state);
 
 	event.cookies.set('github_oauth_state', state, {
 		path: '/',
@@ -14,7 +13,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		httpOnly: true,
 		maxAge: 60 * 10,
 		sameSite: 'lax',
-	})
+	});
 
-	redirect(302, url.toString())
+	redirect(302, url.toString());
 }
diff --git a/src/routes/(auth)/login/google/+server.ts b/src/routes/(auth)/login/google/+server.ts
index 98da6dd..071b516 100644
--- a/src/routes/(auth)/login/google/+server.ts
+++ b/src/routes/(auth)/login/google/+server.ts
@@ -1,17 +1,16 @@
-import { google } from '$lib/server/auth'
-import { redirect } from '@sveltejs/kit'
-import { generateCodeVerifier, generateState } from 'arctic'
-
-import type { RequestEvent } from '@sveltejs/kit'
+import { google } from '$lib/server/auth';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { generateCodeVerifier, generateState } from 'arctic';
 
 // Google Login
 export async function GET(event: RequestEvent): Promise<Response> {
-	const state = generateState()
+	const state = generateState();
 	const codeVerifier = generateCodeVerifier();
 
 	const url = await google.createAuthorizationURL(state, codeVerifier, {
-		scopes: ["profile", "email", "openid"]
-	})
+		scopes: ['profile', 'email', 'openid'],
+	});
 
 	event.cookies.set('google_oauth_state', state, {
 		path: '/',
@@ -19,7 +18,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		httpOnly: true,
 		maxAge: 60 * 10,
 		sameSite: 'lax',
-	})
+	});
 
 	event.cookies.set('google_oauth_code_verifier', codeVerifier, {
 		path: '/',
@@ -27,7 +26,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		httpOnly: true,
 		maxAge: 60 * 10,
 		sameSite: 'lax',
-	})
+	});
 
-	redirect(302, url.toString())
+	redirect(302, url.toString());
 }
diff --git a/src/routes/(auth)/login/spotify/+server.ts b/src/routes/(auth)/login/spotify/+server.ts
index d9e5c33..312061f 100644
--- a/src/routes/(auth)/login/spotify/+server.ts
+++ b/src/routes/(auth)/login/spotify/+server.ts
@@ -1,12 +1,11 @@
-import { github } from '$lib/server/auth'
-import { redirect } from '@sveltejs/kit'
-import { generateState } from 'arctic'
-
-import type { RequestEvent } from '@sveltejs/kit'
+import { github } from '$lib/server/auth';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { generateState } from 'arctic';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const state = generateState()
-	const url = await github.createAuthorizationURL(state)
+	const state = generateState();
+	const url = await github.createAuthorizationURL(state);
 
 	event.cookies.set('github_oauth_state', state, {
 		path: '/',
@@ -14,7 +13,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		httpOnly: true,
 		maxAge: 60 * 10,
 		sameSite: 'lax',
-	})
+	});
 
-	redirect(302, url.toString())
+	redirect(302, url.toString());
 }
diff --git a/src/routes/(auth)/login/tidal/+server.ts b/src/routes/(auth)/login/tidal/+server.ts
index d9e5c33..312061f 100644
--- a/src/routes/(auth)/login/tidal/+server.ts
+++ b/src/routes/(auth)/login/tidal/+server.ts
@@ -1,12 +1,11 @@
-import { github } from '$lib/server/auth'
-import { redirect } from '@sveltejs/kit'
-import { generateState } from 'arctic'
-
-import type { RequestEvent } from '@sveltejs/kit'
+import { github } from '$lib/server/auth';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+import { generateState } from 'arctic';
 
 export async function GET(event: RequestEvent): Promise<Response> {
-	const state = generateState()
-	const url = await github.createAuthorizationURL(state)
+	const state = generateState();
+	const url = await github.createAuthorizationURL(state);
 
 	event.cookies.set('github_oauth_state', state, {
 		path: '/',
@@ -14,7 +13,7 @@ export async function GET(event: RequestEvent): Promise<Response> {
 		httpOnly: true,
 		maxAge: 60 * 10,
 		sameSite: 'lax',
-	})
+	});
 
-	redirect(302, url.toString())
+	redirect(302, url.toString());
 }
diff --git a/src/routes/(auth)/logout/+page.server.ts b/src/routes/(auth)/logout/+page.server.ts
index b8fb2c5..afe3a1c 100644
--- a/src/routes/(auth)/logout/+page.server.ts
+++ b/src/routes/(auth)/logout/+page.server.ts
@@ -1,12 +1,12 @@
+import { StatusCodes } from '$lib/constants/status-codes';
 import { redirect } from 'sveltekit-flash-message/server';
-import type { Actions } from "./$types";
-import {StatusCodes} from "$lib/constants/status-codes";
+import type { Actions } from './$types';
 
 export const actions: Actions = {
 	default: async (event) => {
 		const { locals } = event;
 		console.log('Signing out user');
-		await locals.api.me.logout.$post()
-		redirect(StatusCodes.SEE_OTHER, '/login')
-	}
+		await locals.api.me.logout.$post();
+		redirect(StatusCodes.SEE_OTHER, '/login');
+	},
 };
diff --git a/src/routes/(auth)/password/reset/+page.server.ts b/src/routes/(auth)/password/reset/+page.server.ts
index 70de114..63fa8e7 100644
--- a/src/routes/(auth)/password/reset/+page.server.ts
+++ b/src/routes/(auth)/password/reset/+page.server.ts
@@ -1,56 +1,56 @@
-import { StatusCodes } from '$lib/constants/status-codes'
-import { notSignedInMessage } from '$lib/flashMessages'
-import { resetPasswordEmailSchema, resetPasswordTokenSchema } from '$lib/validations/auth'
-import { type Actions, error, fail } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
-import { zod } from 'sveltekit-superforms/adapters'
-import { setError, superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from './$types'
+import { StatusCodes } from '$lib/constants/status-codes';
+import { notSignedInMessage } from '$lib/flashMessages';
+import { resetPasswordEmailSchema, resetPasswordTokenSchema } from '$lib/validations/auth';
+import { fail } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
+import { zod } from 'sveltekit-superforms/adapters';
+import { setError, superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
 	return {
 		emailForm: await superValidate(zod(resetPasswordEmailSchema)),
 		tokenForm: await superValidate(zod(resetPasswordTokenSchema)),
-	}
-}
+	};
+};
 
 export const actions = {
 	passwordReset: async (event) => {
-		const { request, locals } = event
+		const { request, locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 		if (!authedUser) {
-			throw redirect(302, '/login', notSignedInMessage, event)
+			throw redirect(302, '/login', notSignedInMessage, event);
 		}
 
-		const emailForm = await superValidate(request, zod(resetPasswordEmailSchema))
+		const emailForm = await superValidate(request, zod(resetPasswordEmailSchema));
 		if (!emailForm.valid) {
-			return fail(StatusCodes.BAD_REQUEST, { emailForm })
+			return fail(StatusCodes.BAD_REQUEST, { emailForm });
 		}
 		// const error = {};
 		// // const { error } = await locals.api.iam.login.request.$post({ json: emailRegisterForm.data }).then(locals.parseApiResponse);
 		// if (error) {
 		// 	return setError(emailForm, 'email', error);
 		// }
-		return { emailForm }
+		return { emailForm };
 	},
 	verifyToken: async (event) => {
-		const { request, locals } = event
+		const { request, locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 		if (!authedUser) {
-			throw redirect(302, '/login', notSignedInMessage, event)
+			throw redirect(302, '/login', notSignedInMessage, event);
 		}
 
-		const tokenForm = await superValidate(request, zod(resetPasswordTokenSchema))
+		const tokenForm = await superValidate(request, zod(resetPasswordTokenSchema));
 		if (!tokenForm.valid) {
-			return fail(StatusCodes.BAD_REQUEST, { tokenForm })
+			return fail(StatusCodes.BAD_REQUEST, { tokenForm });
 		}
-		const error = {}
+		const error = {};
 		// const { error } = await locals.api.iam.login.verify.$post({ json: emailSignInForm.data }).then(locals.parseApiResponse)
 		if (error) {
-			return setError(tokenForm, 'token', error)
+			return setError(tokenForm, 'token', error);
 		}
-		redirect(301, '/')
+		redirect(301, '/');
 	},
-}
+};
diff --git a/src/routes/(auth)/password/reset/+page.svelte b/src/routes/(auth)/password/reset/+page.svelte
index 9a178e4..ce329e4 100644
--- a/src/routes/(auth)/password/reset/+page.svelte
+++ b/src/routes/(auth)/password/reset/+page.svelte
@@ -1,38 +1,36 @@
 <script lang="ts">
-	import { superForm } from 'sveltekit-superforms';
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import { Button } from "$lib/components/ui/button/index.js";
-	import * as Card from "$lib/components/ui/card/index.js";
-	import { Input } from "$lib/components/ui/input/index.js";
-	import { Label } from "$lib/components/ui/label/index.js";
-	import * as Form from '$lib/components/ui/form';
-	import { send, receive } from '$lib/utils/pageCrossfade';
-	import { resetPasswordEmailSchema, resetPasswordTokenSchema } from "$lib/validations/auth";
-	import PinInput  from "$lib/components/pin-input.svelte";
+import * as Card from '$components/ui/card';
+import * as Form from '$components/ui/form';
+import PinInput from '$lib/components/pin-input.svelte';
+import { Button } from '$lib/components/ui/button/index.js';
+import { Input } from '$lib/components/ui/input/index.js';
+import { receive, send } from '$lib/utils/pageCrossfade';
+import { resetPasswordEmailSchema, resetPasswordTokenSchema } from '$lib/validations/auth';
+import { superForm } from 'sveltekit-superforms';
+import { zodClient } from 'sveltekit-superforms/adapters';
 
-	const {data} = $props();
+const { data } = $props();
 
-	let showTokenVerification = $state(false);
+let showTokenVerification = $state(false);
 
-	const emailResetForm = superForm(data.emailForm, {
-		validators: zodClient(resetPasswordEmailSchema),
-		resetForm: false,
-		onUpdated: ({ form }) => {
-			if (form.valid) {
-				showTokenVerification = true;
-				$emailFormData.email = form.data.email;
-			}
+const emailResetForm = superForm(data.emailForm, {
+	validators: zodClient(resetPasswordEmailSchema),
+	resetForm: false,
+	onUpdated: ({ form }) => {
+		if (form.valid) {
+			showTokenVerification = true;
+			$emailFormData.email = form.data.email;
 		}
-	});
+	},
+});
 
-	const tokenVerificationForm = superForm(data.tokenForm, {
-		validators: zodClient(resetPasswordTokenSchema),
-		resetForm: false
-	});
-
-	const { form: emailFormData, enhance: emailResetEnhance } = emailResetForm;
-	const { form: tokenFormData, enhance: tokenEnhance } = tokenVerificationForm;
+const tokenVerificationForm = superForm(data.tokenForm, {
+	validators: zodClient(resetPasswordTokenSchema),
+	resetForm: false,
+});
 
+const { form: emailFormData, enhance: emailResetEnhance } = emailResetForm;
+const { form: tokenFormData, enhance: tokenEnhance } = tokenVerificationForm;
 </script>
 
 <div out:send={{ key: 'auth-card' }} in:receive={{ key: 'auth-card' }}>
diff --git a/src/routes/(auth)/signup/+page.server.ts b/src/routes/(auth)/signup/+page.server.ts
index bc6c6ea..11e923e 100644
--- a/src/routes/(auth)/signup/+page.server.ts
+++ b/src/routes/(auth)/signup/+page.server.ts
@@ -1,9 +1,9 @@
-import { signupUsernameEmailDto } from '$lib/dtos/signup-username-email.dto'
-import { type Actions, error, fail } from '@sveltejs/kit'
-import { redirect } from 'sveltekit-flash-message/server'
-import { zod } from 'sveltekit-superforms/adapters'
-import { setError, superValidate } from 'sveltekit-superforms/server'
-import type { PageServerLoad } from './$types'
+import { signupUsernameEmailDto } from '$lib/dtos/signup-username-email.dto';
+import { type Actions, fail } from '@sveltejs/kit';
+import { redirect } from 'sveltekit-flash-message/server';
+import { zod } from 'sveltekit-superforms/adapters';
+import { setError, superValidate } from 'sveltekit-superforms/server';
+import type { PageServerLoad } from './$types';
 
 const signUpDefaults = {
 	firstName: '',
@@ -13,16 +13,16 @@ const signUpDefaults = {
 	password: '',
 	confirm_password: '',
 	terms: true,
-}
+};
 
 export const load: PageServerLoad = async (event) => {
-	const { locals } = event
+	const { locals } = event;
 
-	const authedUser = await locals.getAuthedUser()
+	const authedUser = await locals.getAuthedUser();
 
 	if (authedUser) {
-		const message = { type: 'success', message: 'You are already signed in' } as const
-		throw redirect('/', message, event)
+		const message = { type: 'success', message: 'You are already signed in' } as const;
+		throw redirect('/', message, event);
 	}
 
 	// if (userFullyAuthenticated(user, session)) {
@@ -45,31 +45,31 @@ export const load: PageServerLoad = async (event) => {
 		form: await superValidate(zod(signupUsernameEmailDto), {
 			defaults: signUpDefaults,
 		}),
-	}
-}
+	};
+};
 
 export const actions: Actions = {
 	default: async (event) => {
-		const { locals } = event
+		const { locals } = event;
 
-		const authedUser = await locals.getAuthedUser()
+		const authedUser = await locals.getAuthedUser();
 
 		if (authedUser) {
-			const message = { type: 'success', message: 'You are already signed in' } as const
-			throw redirect('/', message, event)
+			const message = { type: 'success', message: 'You are already signed in' } as const;
+			throw redirect('/', message, event);
 		}
 
-		const form = await superValidate(event, zod(signupUsernameEmailDto))
+		const form = await superValidate(event, zod(signupUsernameEmailDto));
 
-		const { error } = await locals.api.signup.$post({ json: form.data }).then(locals.parseApiResponse)
-		if (error) return setError(form, 'username', error)
+		const { error } = await locals.api.signup.$post({ json: form.data }).then(locals.parseApiResponse);
+		if (error) return setError(form, 'username', error);
 
 		if (!form.valid) {
-			form.data.password = ''
-			form.data.confirm_password = ''
+			form.data.password = '';
+			form.data.confirm_password = '';
 			return fail(400, {
 				form,
-			})
+			});
 		}
 
 		// let session;
@@ -147,8 +147,8 @@ export const actions: Actions = {
 		// 	...sessionCookie.attributes,
 		// });
 
-		redirect(302, '/')
+		redirect(302, '/');
 		// const message = { type: 'success', message: 'Signed Up!' } as const;
 		// throw flashRedirect(message, event);
 	},
-}
+};
diff --git a/src/routes/(auth)/signup/+page.svelte b/src/routes/(auth)/signup/+page.svelte
index d0f2491..0354851 100644
--- a/src/routes/(auth)/signup/+page.svelte
+++ b/src/routes/(auth)/signup/+page.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-import { Button } from '$components/ui/button'
-import { Input } from '$components/ui/input'
-import { Label } from '$components/ui/label'
-import * as Alert from '$lib/components/ui/alert'
-import * as Card from '$lib/components/ui/card'
-import * as Collapsible from '$lib/components/ui/collapsible'
-import { signupUsernameEmailDto } from '$lib/dtos/signup-username-email.dto'
-import { boredState } from '$lib/stores/boredState.js'
-import { receive, send } from '$lib/utils/pageCrossfade'
-import { signUpSchema } from '$lib/validations/auth'
-import { ChevronsUpDown } from 'lucide-svelte'
-import { quintIn } from 'svelte/easing'
-import { slide } from 'svelte/transition'
-import * as flashModule from 'sveltekit-flash-message/client'
-import { zodClient } from 'sveltekit-superforms/adapters'
-import { superForm } from 'sveltekit-superforms/client'
+import { Button } from '$components/ui/button';
+import { Input } from '$components/ui/input';
+import { Label } from '$components/ui/label';
+import * as Alert from '$lib/components/ui/alert';
+import * as Card from '$lib/components/ui/card';
+import * as Collapsible from '$lib/components/ui/collapsible';
+import { signupUsernameEmailDto } from '$lib/dtos/signup-username-email.dto';
+import { boredState } from '$lib/stores/boredState.js';
+import { receive, send } from '$lib/utils/pageCrossfade';
+import { ChevronsUpDown } from 'lucide-svelte';
+import { quintIn } from 'svelte/easing';
+import { slide } from 'svelte/transition';
+import * as flashModule from 'sveltekit-flash-message/client';
+import { zodClient } from 'sveltekit-superforms/adapters';
+import { superForm } from 'sveltekit-superforms/client';
 
-export let data
+export let data;
 
 const { form, errors, enhance } = superForm(data.form, {
 	onSubmit: () => boredState.update((n) => ({ ...n, loading: true })),
@@ -24,16 +23,16 @@ const { form, errors, enhance } = superForm(data.form, {
 	flashMessage: {
 		module: flashModule,
 		onError: ({ result, flashMessage }) => {
-			const errorMessage = result.error.message
-			flashMessage.set({ type: 'error', message: errorMessage })
+			const errorMessage = result.error.message;
+			flashMessage.set({ type: 'error', message: errorMessage });
 		},
 	},
 	taintedMessage: null,
 	validators: zodClient(signupUsernameEmailDto),
 	delayMs: 0,
-})
+});
 
-let collapsibleOpen = false
+let collapsibleOpen = false;
 </script>
 
 <svelte:head>
diff --git a/src/routes/(auth)/totp/+page.svelte b/src/routes/(auth)/totp/+page.svelte
index f87f8df..e524a1a 100644
--- a/src/routes/(auth)/totp/+page.svelte
+++ b/src/routes/(auth)/totp/+page.svelte
@@ -1,35 +1,31 @@
 <script lang="ts">
-	import { zodClient } from 'sveltekit-superforms/adapters';
-	import { superForm } from 'sveltekit-superforms/client';
-	import * as flashModule from 'sveltekit-flash-message/client';
-	import { AlertCircle } from "lucide-svelte";
-	import { recoveryCodeSchema, totpSchema } from '$lib/validations/auth';
-	import * as Card from "$lib/components/ui/card/index.js";
-	import * as Form from '$lib/components/ui/form';
-	import { Label } from '$components/ui/label';
-	import { Input } from '$components/ui/input';
-	import { Button } from '$components/ui/button';
-	import * as Alert from "$components/ui/alert";
-	import PinInput from '$components/pin-input.svelte';
+import PinInput from '$components/pin-input.svelte';
+import { Button } from '$components/ui/button';
+import * as Card from '$components/ui/card';
+import * as Form from '$components/ui/form';
+import { Input } from '$components/ui/input';
+import { recoveryCodeSchema, totpSchema } from '$lib/validations/auth';
+import { zodClient } from 'sveltekit-superforms/adapters';
+import { superForm } from 'sveltekit-superforms/client';
 
-	const { data } = $props();
+const { data } = $props();
 
-	const superTotpForm = superForm(data.totpForm, {
-		resetForm: false,
-		validators: zodClient(totpSchema),
-	});
+const superTotpForm = superForm(data.totpForm, {
+	resetForm: false,
+	validators: zodClient(totpSchema),
+});
 
-	const superRecoveryCodeForm = superForm(data.recoveryCodeForm, {
-		validators: zodClient(recoveryCodeSchema),
-		resetForm: false,
-		validationMethod: 'oninput',
-		delayMs: 0,
-	});
+const superRecoveryCodeForm = superForm(data.recoveryCodeForm, {
+	validators: zodClient(recoveryCodeSchema),
+	resetForm: false,
+	validationMethod: 'oninput',
+	delayMs: 0,
+});
 
-	let showRecoveryCode = $state(false);
+let showRecoveryCode = $state(false);
 
-	const { form: totpFormData, enhance: totpEnhance } = superTotpForm;
-	const { form: recoveryCodeFormData, enhance: recoveryCodeEnhance } = superRecoveryCodeForm;
+const { form: totpFormData, enhance: totpEnhance } = superTotpForm;
+const { form: recoveryCodeFormData, enhance: recoveryCodeEnhance } = superRecoveryCodeForm;
 </script>
 
 <svelte:head>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d480a67..fdfc7cd 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+import { page } from '$app/stores';
 </script>
 
 <div class="error">
 	{#if $page.status === 404}
-		<h1>The page you requested doesn't exist! 🤷‍♂️</h1>
+		<h1>The page you requested doesn't exist! 🤷</h1>
 		<h3 class="mt-6"><a href="/">Go Home</a></h3>
 	{:else}
 		<h1 class="h1">Unexpected Error</h1>
diff --git a/src/search/actions.ts b/src/search/actions.ts
index 7d26958..b8670bd 100644
--- a/src/search/actions.ts
+++ b/src/search/actions.ts
@@ -1,43 +1,42 @@
-import type { GameType, SearchQuery } from '$lib/types'
-import { mapAPIGameToBoredGame } from '$lib/utils/gameMapper'
-import { type RequestEvent, invalid } from '@sveltejs/kit'
+import type { SearchQuery } from '$lib/types';
+import { type RequestEvent, invalid } from '@sveltejs/kit';
 
 interface Actions {
-	[key: string]: any // Action
+	[key: string]: any; // Action
 }
 
 export const Games: Actions = {
 	search: async ({ request, locals }: RequestEvent): Promise<any> => {
-		console.log('In search action specific')
+		console.log('In search action specific');
 		// Do things in here
-		const form = await request.formData()
-		console.log('action form', form)
+		const form = await request.formData();
+		console.log('action form', form);
 		const queryParams: SearchQuery = {
 			order_by: 'rank',
 			ascending: false,
 			limit: 10,
 			skip: 0,
 			name: '',
-		}
+		};
 
-		const name = form.has('name') ? form.get('name') : await request?.text()
-		console.log('name', name)
+		const name = form.has('name') ? form.get('name') : await request?.text();
+		console.log('name', name);
 		if (name) {
-			queryParams.name = `${name}`
+			queryParams.name = `${name}`;
 		}
 
-		const newQueryParams: Record<string, string> = {}
+		const newQueryParams: Record<string, string> = {};
 		for (const key in queryParams) {
-			console.log('key', key)
-			console.log('queryParams[key]', queryParams[key])
-			newQueryParams[key] = `${queryParams[key]}`
+			console.log('key', key);
+			console.log('queryParams[key]', queryParams[key]);
+			newQueryParams[key] = `${queryParams[key]}`;
 		}
 
-		const urlQueryParams = new URLSearchParams(newQueryParams)
-		console.log('urlQueryParams', urlQueryParams)
+		const urlQueryParams = new URLSearchParams(newQueryParams);
+		console.log('urlQueryParams', urlQueryParams);
 
 		try {
-			throw new Error('test error')
+			throw new Error('test error');
 			// const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
 			//   }`;
 			// const response = await fetch(url, {
@@ -76,8 +75,8 @@ export const Games: Actions = {
 			//   totalCount: 0
 			// };
 		} catch (e) {
-			console.log(`Error searching board games ${e}`)
-			return invalid(400, { reason: 'Exception' })
+			console.log(`Error searching board games ${e}`);
+			return invalid(400, { reason: 'Exception' });
 		}
 	},
 
@@ -175,4 +174,4 @@ export const Games: Actions = {
 	//   const data = await getFormDataObject<any>(request);
 	//   return data;
 	// }
-}
+};
diff --git a/src/server/roles.ts b/src/server/roles.ts
index 62af8ea..02458ff 100644
--- a/src/server/roles.ts
+++ b/src/server/roles.ts
@@ -1,6 +1,6 @@
+import { roles, userRoles } from '$db/schema';
 import { eq } from 'drizzle-orm';
 import db from '../db';
-import { roles, userRoles } from '$db/schema';
 
 export async function add_user_to_role(user_id: string, role_name: string, primary = false) {
 	// Find the role by its name
diff --git a/src/server/users.ts b/src/server/users.ts
index e29b14c..837f1ee 100644
--- a/src/server/users.ts
+++ b/src/server/users.ts
@@ -1,6 +1,6 @@
-import db from '../db';
+import { type Users, usersTable } from '$db/schema';
 import { eq } from 'drizzle-orm';
-import { usersTable, type Users } from '$db/schema';
+import db from '../db';
 import { add_user_to_role } from './roles';
 
 export function create_user(user: Users) {
diff --git a/src/state/theme.ts b/src/state/theme.ts
index 8fe6e2d..9e9f652 100644
--- a/src/state/theme.ts
+++ b/src/state/theme.ts
@@ -4,7 +4,7 @@ export const theme = writable('system');
 
 const new_theme_selector = () => {
 	const { subscribe, update, set } = writable({
-		status: 'CLOSED'
+		status: 'CLOSED',
 	});
 
 	function open() {
@@ -31,7 +31,7 @@ const new_theme_selector = () => {
 		set,
 		close,
 		open,
-		toggle
+		toggle,
 	};
 };
 
diff --git a/src/styles/reset.pcss b/src/styles/reset.pcss
index 02bf499..e8086d2 100644
--- a/src/styles/reset.pcss
+++ b/src/styles/reset.pcss
@@ -1,9 +1,9 @@
 *,
 *:before,
 *:after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 img,
@@ -11,22 +11,22 @@ picture,
 video,
 canvas,
 svg {
-  display: block;
-  max-width: 100%;
+	display: block;
+	max-width: 100%;
 }
 
 iframe,
 video {
-  width: 100%;
-  border: none;
-  aspect-ratio: 16 / 9;
+	width: 100%;
+	border: none;
+	aspect-ratio: 16 / 9;
 }
 
 input,
 button,
 textarea,
 select {
-  font: inherit;
+	font: inherit;
 }
 
 p,
@@ -36,23 +36,23 @@ h3,
 h4,
 h5,
 h6 {
-  overflow-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 button,
 input {
-  font: inherit;
-  color: inherit;
-  border: none;
+	font: inherit;
+	color: inherit;
+	border: none;
 }
 
 button {
-  font: inherit;
-  background: none;
-  cursor: pointer;
+	font: inherit;
+	background: none;
+	cursor: pointer;
 }
 
 ul,
 ol {
-  list-style: none;
+	list-style: none;
 }
\ No newline at end of file
diff --git a/src/styles/theme.pcss b/src/styles/theme.pcss
index aec2fbe..e046bc3 100644
--- a/src/styles/theme.pcss
+++ b/src/styles/theme.pcss
@@ -1,137 +1,137 @@
 html[data-theme='🌛 Night'] {
-  /* Global */
-  --clr-primary: hsl(173 100% 66%);
-  --clr-txt: hsl(0 0% 98%);
-  --clr-bg: hsl(210 7% 11%);
+	/* Global */
+	--clr-primary: hsl(173 100% 66%);
+	--clr-txt: hsl(0 0% 98%);
+	--clr-bg: hsl(210 7% 11%);
 
-  --bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
-  --bg-opacity: 0.7;
+	--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
+	--bg-opacity: 0.7;
 
-  /* Menu */
-  --clr-menu-text: hsl(0 0% 78%);
-  --clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
-  --clr-menu-arrow-bg: hsl(180 7% 14%);
-  --clr-menu-border: hsl(0 0% 19%);
+	/* Menu */
+	--clr-menu-text: hsl(0 0% 78%);
+	--clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
+	--clr-menu-arrow-bg: hsl(180 7% 14%);
+	--clr-menu-border: hsl(0 0% 19%);
 
-  --clr-theme-txt: hsl(177 100% 15%);
-  --clr-theme-active: hsl(177 100% 80%);
-  --clr-switch-on-bg: hsl(0 0% 24%);
-  --clr-switch-off-bg: hsl(0 0% 10%);
+	--clr-theme-txt: hsl(177 100% 15%);
+	--clr-theme-active: hsl(177 100% 80%);
+	--clr-switch-on-bg: hsl(0 0% 24%);
+	--clr-switch-off-bg: hsl(0 0% 10%);
 
-  /* Hero */
-  --clr-hero-txt: hsl(174 27% 73%);
-  --clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
-  --clr-hero-divider-bg: hsl(0 0% 21%);
-  --clr-input-txt: hsl(177 100% 15%);
-  --clr-input-bg: hsl(210 13% 24%);
-  --clr-input-placeholder-txt: hsl(210 13% 50%);
-  --clr-input-border: hsl(0 0% 21%);
+	/* Hero */
+	--clr-hero-txt: hsl(174 27% 73%);
+	--clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
+	--clr-hero-divider-bg: hsl(0 0% 21%);
+	--clr-input-txt: hsl(177 100% 15%);
+	--clr-input-bg: hsl(210 13% 24%);
+	--clr-input-placeholder-txt: hsl(210 13% 50%);
+	--clr-input-border: hsl(0 0% 21%);
 
-  /* Card */
-  --clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
-  --clr-card-txt: hsl(0 0% 78%);
+	/* Card */
+	--clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
+	--clr-card-txt: hsl(0 0% 78%);
 
-  /* Link */
-  --clr-link-txt: hsl(0 100% 98%);
-  --clr-link-background: hsl(0 0% 4%);
+	/* Link */
+	--clr-link-txt: hsl(0 100% 98%);
+	--clr-link-background: hsl(0 0% 4%);
 
-  /* Footer */
-  --clr-footer-txt: hsl(0 0% 78%);
-  --clr-footer-bg: hsl(210 5% 7%);
+	/* Footer */
+	--clr-footer-txt: hsl(0 0% 78%);
+	--clr-footer-bg: hsl(210 5% 7%);
 
-  /* Post */
-  --post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
-  --post-blockquote-txt: hsl(173 100% 94%);
-  --post-blockquote-bg: hsl(173 60% 4%);
-  --post-blockquote-border: hsl(173 10% 10%);
+	/* Post */
+	--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
+	--post-blockquote-txt: hsl(173 100% 94%);
+	--post-blockquote-bg: hsl(173 60% 4%);
+	--post-blockquote-border: hsl(173 10% 10%);
 
-  --clr-code-bg: hsl(173 60% 4%);
-  --clr-code-title: hsl(173 100% 94%);
-  --clr-code-border: hsl(173 10% 10%);
-  --clr-code-line-number: hsl(173 20% 20%);
-  --clr-code-line-highlight: hsl(173 40% 8%);
-  --clr-code-inline-txt: hsl(173 100% 94%);
-  --clr-code-inline-bg: hsl(173 60% 4%);
+	--clr-code-bg: hsl(173 60% 4%);
+	--clr-code-title: hsl(173 100% 94%);
+	--clr-code-border: hsl(173 10% 10%);
+	--clr-code-line-number: hsl(173 20% 20%);
+	--clr-code-line-highlight: hsl(173 40% 8%);
+	--clr-code-inline-txt: hsl(173 100% 94%);
+	--clr-code-inline-bg: hsl(173 60% 4%);
 
-  --clr-token-1: hsl(173 100% 66%);
-  --clr-token-2: hsl(180 60% 80%);
-  --clr-token-3: hsl(173 100% 66%);
-  --clr-token-4: hsl(0 0% 98%);
-  --clr-token-5: hsl(173 10% 60%);
+	--clr-token-1: hsl(173 100% 66%);
+	--clr-token-2: hsl(180 60% 80%);
+	--clr-token-3: hsl(173 100% 66%);
+	--clr-token-4: hsl(0 0% 98%);
+	--clr-token-5: hsl(173 10% 60%);
 
-  /* Input Fields */
-  --input-bg: #181a1b;
+	/* Input Fields */
+	--input-bg: #181a1b;
 
-  /* Button */
-  --warning: hsla(0, 75%, 60%, 0.90);
-  --warning-hover: hsla(0, 75%, 60%, 1);
+	/* Button */
+	--warning: hsla(0, 75%, 60%, 0.90);
+	--warning-hover: hsla(0, 75%, 60%, 1);
 }
 
 html[data-theme='☀️ Daylight'] {
-  /* Global */
-  --clr-primary: hsl(220 100% 50%);
-  --clr-txt: hsl(220 10% 10%);
-  --clr-bg: hsl(0 0% 98%);
+	/* Global */
+	--clr-primary: hsl(220 100% 50%);
+	--clr-txt: hsl(220 10% 10%);
+	--clr-bg: hsl(0 0% 98%);
 
-  --bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
-  --bg-opacity: 0.7;
+	--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
+	--bg-opacity: 0.7;
 
-  /* Menu */
-  --clr-menu-text: hsl(220 10% 10%);
-  --clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
-  --clr-menu-arrow-bg: hsl(0 0% 98%);
-  --clr-menu-border: hsl(0 0% 80%);
+	/* Menu */
+	--clr-menu-text: hsl(220 10% 10%);
+	--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+	--clr-menu-arrow-bg: hsl(0 0% 98%);
+	--clr-menu-border: hsl(0 0% 80%);
 
-  --clr-theme-txt: hsl(0 0% 98%);
-  --clr-theme-active: hsl(220 100% 60%);
-  --clr-switch-on-bg: hsl(220 40% 90%);
-  --clr-switch-off-bg: hsl(220 40% 80%);
+	--clr-theme-txt: hsl(0 0% 98%);
+	--clr-theme-active: hsl(220 100% 60%);
+	--clr-switch-on-bg: hsl(220 40% 90%);
+	--clr-switch-off-bg: hsl(220 40% 80%);
 
-  /* Hero */
-  --clr-hero-txt: hsl(220 10% 40%);
-  --clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
-  --clr-hero-divider-bg: hsl(0 0% 80%);
-  --clr-input-txt: hsl(220 10% 98%);
-  --clr-input-bg: hsl(0 0% 98%);
-  --clr-input-placeholder-txt: hsl(220 10% 60%);
-  --clr-input-border: hsl(0 0% 80%);
+	/* Hero */
+	--clr-hero-txt: hsl(220 10% 40%);
+	--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
+	--clr-hero-divider-bg: hsl(0 0% 80%);
+	--clr-input-txt: hsl(220 10% 98%);
+	--clr-input-bg: hsl(0 0% 98%);
+	--clr-input-placeholder-txt: hsl(220 10% 60%);
+	--clr-input-border: hsl(0 0% 80%);
 
-  /* Card */
-  --clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
-  --clr-card-txt: hsl(220 10% 40%);
+	/* Card */
+	--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+	--clr-card-txt: hsl(220 10% 40%);
 
-  /* Link */
-  --clr-link-txt: hsl(220 10% 10%);
-  --clr-link-background: hsl(0 0% 100%);
+	/* Link */
+	--clr-link-txt: hsl(220 10% 10%);
+	--clr-link-background: hsl(0 0% 100%);
 
-  /* Footer */
-  --clr-footer-txt: hsl(220 10% 10%);
-  --clr-footer-bg: hsl(0 0% 98%);
+	/* Footer */
+	--clr-footer-txt: hsl(220 10% 10%);
+	--clr-footer-bg: hsl(0 0% 98%);
 
-  /* Post */
-  --post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
-  --post-blockquote-txt: hsl(0 0% 40%);
-  --post-blockquote-bg: hsl(0 0% 98%);
-  --post-blockquote-border: hsl(0 0% 84%);
+	/* Post */
+	--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
+	--post-blockquote-txt: hsl(0 0% 40%);
+	--post-blockquote-bg: hsl(0 0% 98%);
+	--post-blockquote-border: hsl(0 0% 84%);
 
-  --clr-code-bg: hsl(0 0% 98%);
-  --clr-code-title: hsl(0 0% 40%);
-  --clr-code-border: hsl(0 0% 84%);
-  --clr-code-line-number: hsl(0 0% 60%);
-  --clr-code-line-highlight: hsl(0 0% 94%);
-  --clr-code-inline-txt: hsl(0 0% 98%);
-  --clr-code-inline-bg: hsl(0 0% 20%);
+	--clr-code-bg: hsl(0 0% 98%);
+	--clr-code-title: hsl(0 0% 40%);
+	--clr-code-border: hsl(0 0% 84%);
+	--clr-code-line-number: hsl(0 0% 60%);
+	--clr-code-line-highlight: hsl(0 0% 94%);
+	--clr-code-inline-txt: hsl(0 0% 98%);
+	--clr-code-inline-bg: hsl(0 0% 20%);
 
-  --clr-token-1: hsl(220 100% 50%);
-  --clr-token-2: hsl(220 60% 50%);
-  --clr-token-3: hsl(220 100% 50%);
-  --clr-token-4: hsl(0 0% 20%);
-  --clr-token-5: hsl(0 0% 60%);
+	--clr-token-1: hsl(220 100% 50%);
+	--clr-token-2: hsl(220 60% 50%);
+	--clr-token-3: hsl(220 100% 50%);
+	--clr-token-4: hsl(0 0% 20%);
+	--clr-token-5: hsl(0 0% 60%);
 
-  /* Input Fields */
-  --input-bg: #181a1b;
+	/* Input Fields */
+	--input-bg: #181a1b;
 
-  /* Button */
-  --warning: hsla(0, 75%, 60%, 0.90);
-  --warning-hover: hsla(0, 75%, 60%, 1);
+	/* Button */
+	--warning: hsla(0, 75%, 60%, 0.90);
+	--warning-hover: hsla(0, 75%, 60%, 1);
 }
\ No newline at end of file