From b87e2b09368cad64912d572511d72c76d6c1afaa Mon Sep 17 00:00:00 2001
From: NeilClack <cnclack@pm.me>
Date: Tue, 7 Jul 2026 10:27:08 -0500
Subject: [PATCH] fix: replace CSS variable inversion with standard Tailwind
 dark: classes

The :root.dark CSS variable inversion caused contrast problems -
text-gray-900 and bg-gray-950 both became light in dark mode, making
text invisible on backgrounds.

Fix:
- Remove :root.dark { --color-gray-*: ... } block from layout.css
- Change :root.dark selector to .dark for form element styles
- Add standard Tailwind dark: classes throughout every .svelte page
  - dark:bg-gray-950 (page backgrounds)
  - dark:bg-gray-900 (card/surface backgrounds)
  - dark:bg-gray-800 (table headers, elevated surfaces, active nav links)
  - dark:bg-gray-700 (primary buttons)
  - dark:text-gray-100 (primary text)
  - dark:text-gray-300 (secondary text, labels)
  - dark:text-gray-400 (muted text, inactive nav links, links)
  - dark:border-gray-700 (borders)
  - dark:border-gray-600 (input borders)
  - dark:hover:bg-gray-800 (sidebar hover)
  - dark:hover:bg-gray-600 (button hover)
  - dark:prose-invert (rich text content)
- TopBar: full dark mode support (bg, links, toggle button)
- Sidebar: all nav links, active states, admin submenu get dark mode
- Auth pages (login, register, forgot, reset): full dark mode
- Protected pages (dashboard, account, setup, license-keys,
  proclamations, categories): full dark mode
- Home page, error page, admin page: dark:text-gray-100
---
 src/lib/components/ui/topBar/TopBar.svelte    | 13 ++--
 .../(protected)/(user)/account/+page.svelte   | 70 ++++++++---------
 .../(user)/account/setup/+page.svelte         |  6 +-
 .../(protected)/(user)/dashboard/+page.svelte | 28 +++----
 .../(user)/license-keys/+page.svelte          | 28 +++----
 .../(user)/proclamations/+page.svelte         | 28 +++----
 .../(user)/proclamations/[id]/+page.svelte    | 22 +++---
 src/routes/(protected)/+layout.svelte         | 12 +--
 src/routes/(protected)/admin/+page.svelte     |  2 +-
 .../(protected)/admin/categories/+page.svelte | 50 ++++++------
 src/routes/+error.svelte                      |  6 +-
 src/routes/+layout.svelte                     |  2 +-
 src/routes/+page.svelte                       |  2 +-
 src/routes/forgot-password/+page.svelte       | 14 ++--
 src/routes/layout.css                         | 23 +-----
 src/routes/login/+page.svelte                 | 12 +--
 src/routes/register/+page.svelte              | 76 ++++++++++---------
 src/routes/reset-password/+page.svelte        | 12 +--
 18 files changed, 197 insertions(+), 209 deletions(-)

diff --git a/src/lib/components/ui/topBar/TopBar.svelte b/src/lib/components/ui/topBar/TopBar.svelte
index 0e1b2ef..5c684bd 100644
--- a/src/lib/components/ui/topBar/TopBar.svelte
+++ b/src/lib/components/ui/topBar/TopBar.svelte
@@ -25,25 +25,26 @@
 	}
 </script>
 
-<nav class="flex w-full items-center justify-between px-8 py-6">
-	<span><a href="/">Rhema Wave Technologies</a></span>
+<nav class="flex w-full items-center justify-between border-b border-gray-200 px-8 py-6 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100">
+	<span><a href="/" class="dark:text-gray-100">Rhema Wave Technologies</a></span>
 	<div class="flex items-center gap-4">
-		<button onclick={toggleTheme} class="border px-3 py-1 text-sm">
+		<button onclick={toggleTheme} class="border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:text-gray-300">
 			{dark ? 'Light' : 'Dark'}
 		</button>
 		{#if $session.data}
 			{#if isAdmin}
-				<a href="/admin">Admin Panel</a>
+				<a href="/admin" class="dark:text-gray-300 dark:hover:text-gray-100">Admin Panel</a>
 			{/if}
-			<a href="/dashboard">Dashboard</a>
+			<a href="/dashboard" class="dark:text-gray-300 dark:hover:text-gray-100">Dashboard</a>
 			<button
+				class="dark:text-gray-300 dark:hover:text-gray-100"
 				onclick={async () => {
 					await authClient.signOut();
 					window.location.href = '/';
 				}}>Log Out</button
 			>
 		{:else}
-			<span><a href="/login">Log In</a> | <a href="/register">Register</a></span>
+			<span class="dark:text-gray-300"><a href="/login" class="dark:text-gray-300 dark:hover:text-gray-100">Log In</a> | <a href="/register" class="dark:text-gray-300 dark:hover:text-gray-100">Register</a></span>
 		{/if}
 	</div>
 </nav>
diff --git a/src/routes/(protected)/(user)/account/+page.svelte b/src/routes/(protected)/(user)/account/+page.svelte
index 87872c9..05c5b01 100644
--- a/src/routes/(protected)/(user)/account/+page.svelte
+++ b/src/routes/(protected)/(user)/account/+page.svelte
@@ -23,26 +23,26 @@
 	}
 </script>
 
-<div class="flex h-full min-h-0 flex-col gap-8 p-6 dark:bg-gray-950">
-	<h1 class="text-2xl font-semibold text-gray-900">Account</h1>
+<div class="flex h-full min-h-0 flex-col gap-8 p-6 dark:text-gray-100">
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Account</h1>
 
 	<!-- Email (read-only) -->
 	<div>
-		<p class="text-sm font-medium text-gray-700">Email</p>
-		<p class="mt-1 text-gray-900">{data.user.email}</p>
+		<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Email</p>
+		<p class="mt-1 text-gray-900 dark:text-gray-100">{data.user.email}</p>
 	</div>
 
 	<!-- Profile Form -->
 	<section>
-		<h2 class="mb-4 text-lg font-medium text-gray-900">Profile</h2>
+		<h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">Profile</h2>
 
 		{#if form?.action === 'updateProfile' && form?.success}
-			<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700">
+			<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 				Profile updated successfully.
 			</div>
 		{/if}
 		{#if form?.action === 'updateProfile' && form?.error}
-			<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+			<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 				{form.error}
 			</div>
 		{/if}
@@ -50,7 +50,7 @@
 		<form method="POST" action="?/updateProfile" class="flex max-w-lg flex-col gap-4">
 			<div class="grid grid-cols-2 gap-4">
 				<div>
-					<label for="firstName" class="block text-sm font-medium text-gray-700">
+					<label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
 						First Name
 					</label>
 					<input
@@ -59,11 +59,11 @@
 						name="firstName"
 						value={data.user.profile?.firstName ?? ''}
 						required
-						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 					/>
 				</div>
 				<div>
-					<label for="lastName" class="block text-sm font-medium text-gray-700">
+					<label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
 						Last Name
 					</label>
 					<input
@@ -72,12 +72,12 @@
 						name="lastName"
 						value={data.user.profile?.lastName ?? ''}
 						required
-						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+						class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 					/>
 				</div>
 			</div>
 			<div>
-				<label for="phoneNumber" class="block text-sm font-medium text-gray-700">
+				<label for="phoneNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
 					Phone Number
 				</label>
 				<input
@@ -87,13 +87,13 @@
 					bind:value={phoneNumber}
 					oninput={handlePhoneInput}
 					required
-					class="mt-1 w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+					class="mt-1 w-full max-w-xs rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 				/>
 			</div>
 			<div>
 				<button
 					type="submit"
-					class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
+					class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 				>
 					Save Profile
 				</button>
@@ -104,10 +104,10 @@
 	<!-- Addresses -->
 	<section>
 		<div class="mb-4 flex items-center justify-between">
-			<h2 class="text-lg font-medium text-gray-900">Addresses</h2>
+			<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Addresses</h2>
 			<button
 				type="button"
-				class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white dark:text-gray-950 transition-colors hover:bg-green-700"
+				class="rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-green-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 				onclick={() => (showAddressForm = !showAddressForm)}
 			>
 				{showAddressForm ? 'Cancel' : 'Add Address'}
@@ -115,12 +115,12 @@
 		</div>
 
 		{#if form?.action === 'addAddress' && form?.success}
-			<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700">
+			<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 				Address added successfully.
 			</div>
 		{/if}
 		{#if form?.action === 'addAddress' && form?.error}
-			<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+			<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 				{form.error}
 			</div>
 		{/if}
@@ -129,44 +129,44 @@
 			<form
 				method="POST"
 				action="?/addAddress"
-				class="mb-6 max-w-lg rounded-lg border border-gray-200 dark:border-gray-300 bg-gray-50 dark:bg-gray-200 p-4"
+				class="mb-6 max-w-lg rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800"
 			>
 				<div class="flex flex-col gap-3">
 					<div>
-						<label for="street" class="block text-sm font-medium text-gray-700">Street</label>
+						<label for="street" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street</label>
 						<input
 							type="text"
 							id="street"
 							name="street"
 							required
-							class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+							class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 						/>
 					</div>
 					<div class="grid grid-cols-2 gap-3">
 						<div>
-							<label for="city" class="block text-sm font-medium text-gray-700">City</label>
+							<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
 							<input
 								type="text"
 								id="city"
 								name="city"
 								required
-								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 							/>
 						</div>
 						<div>
-							<label for="state" class="block text-sm font-medium text-gray-700">State</label>
+							<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State</label>
 							<input
 								type="text"
 								id="state"
 								name="state"
 								required
-								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 							/>
 						</div>
 					</div>
 					<div class="grid grid-cols-2 gap-3">
 						<div>
-							<label for="postalCode" class="block text-sm font-medium text-gray-700">
+							<label for="postalCode" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
 								Postal Code
 							</label>
 							<input
@@ -174,25 +174,25 @@
 								id="postalCode"
 								name="postalCode"
 								required
-								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 							/>
 						</div>
 						<div>
-							<label for="country" class="block text-sm font-medium text-gray-700">Country</label>
+							<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
 							<input
 								type="text"
 								id="country"
 								name="country"
 								required
 								value="US"
-								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+								class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 							/>
 						</div>
 					</div>
 					<div>
 						<button
 							type="submit"
-							class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
+							class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 						>
 							Save Address
 						</button>
@@ -204,17 +204,17 @@
 		{#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
 			<div class="flex flex-col gap-3">
 				{#each data.user.profile.addresses as address}
-					<div class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-4">
-						<p class="text-sm text-gray-900">{address.street}</p>
-						<p class="text-sm text-gray-600">
+					<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900">
+						<p class="text-sm text-gray-900 dark:text-gray-100">{address.street}</p>
+						<p class="text-sm text-gray-600 dark:text-gray-400">
 							{address.city}, {address.state} {address.postalCode}
 						</p>
-						<p class="text-sm text-gray-600">{address.country}</p>
+						<p class="text-sm text-gray-600 dark:text-gray-400">{address.country}</p>
 					</div>
 				{/each}
 			</div>
 		{:else if !showAddressForm}
-			<p class="text-sm text-gray-500">No addresses on file.</p>
+			<p class="text-sm text-gray-500 dark:text-gray-400">No addresses on file.</p>
 		{/if}
 	</section>
 </div>
diff --git a/src/routes/(protected)/(user)/account/setup/+page.svelte b/src/routes/(protected)/(user)/account/setup/+page.svelte
index 3d1a344..a7d5b3d 100644
--- a/src/routes/(protected)/(user)/account/setup/+page.svelte
+++ b/src/routes/(protected)/(user)/account/setup/+page.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <Window>
-	<form method="POST" class="border shadow-lg p-6 rounded-xl dark:bg-gray-100 dark:border-gray-300">
+	<form method="POST" class="border p-6 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
         <p class="mx-auto text-center my-4 italic">Please finish setting up your profile</p>
 		{#if data.user?.image}
 			<img src={data.user?.image} class="rounded-full w-[8rem] mx-auto" alt="Profile" />
@@ -64,6 +64,6 @@
 				oninput={handlePhoneInput}
 			/>
 		</div>
-		<button type="submit" class="p-2 px-4 bg-blue-300 rounded-xl">Submit</button>
+		<button type="submit" class="p-2 px-4 bg-blue-300 dark:bg-gray-700 dark:text-gray-100">Submit</button>
 	</form>
-</Window>
\ No newline at end of file
+</Window>
diff --git a/src/routes/(protected)/(user)/dashboard/+page.svelte b/src/routes/(protected)/(user)/dashboard/+page.svelte
index 0a12b34..d481d36 100644
--- a/src/routes/(protected)/(user)/dashboard/+page.svelte
+++ b/src/routes/(protected)/(user)/dashboard/+page.svelte
@@ -4,35 +4,35 @@
 	let { data }: PageProps = $props();
 </script>
 
-<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950">
-	<h1 class="text-2xl font-semibold text-gray-900">Welcome, {data.firstName}!</h1>
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Welcome, {data.firstName}!</h1>
 
 	<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
 		<a
 			href="/license-keys"
-			class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md"
+			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
 		>
-			<p class="text-sm font-medium text-gray-500">Active License Keys</p>
-			<p class="mt-2 text-3xl font-bold text-gray-900">{data.activeKeys}</p>
-			<p class="mt-1 text-sm text-gray-400">{data.totalKeys} total</p>
+			<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active License Keys</p>
+			<p class="mt-2 text-3xl font-bold text-gray-900 dark:text-gray-100">{data.activeKeys}</p>
+			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">{data.totalKeys} total</p>
 		</a>
 
 		<a
 			href="/admin/proclamations"
-			class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md"
+			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
 		>
-			<p class="text-sm font-medium text-gray-500">Proclamations</p>
-			<p class="mt-2 text-3xl font-bold text-gray-900">{data.proclamationCount}</p>
-			<p class="mt-1 text-sm text-gray-400">Browse all</p>
+			<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Proclamations</p>
+			<p class="mt-2 text-3xl font-bold text-gray-900 dark:text-gray-100">{data.proclamationCount}</p>
+			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Browse all</p>
 		</a>
 
 		<a
 			href="/account"
-			class="rounded-lg border border-gray-200 bg-white dark:bg-gray-100 p-6 shadow-sm transition-shadow hover:shadow-md"
+			class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
 		>
-			<p class="text-sm font-medium text-gray-500">Account</p>
-			<p class="mt-2 text-lg font-semibold text-gray-900">Manage Profile</p>
-			<p class="mt-1 text-sm text-gray-400">Edit your details</p>
+			<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Account</p>
+			<p class="mt-2 text-lg font-semibold text-gray-900 dark:text-gray-100">Manage Profile</p>
+			<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Edit your details</p>
 		</a>
 	</div>
 </div>
diff --git a/src/routes/(protected)/(user)/license-keys/+page.svelte b/src/routes/(protected)/(user)/license-keys/+page.svelte
index 04dbb5f..130264c 100644
--- a/src/routes/(protected)/(user)/license-keys/+page.svelte
+++ b/src/routes/(protected)/(user)/license-keys/+page.svelte
@@ -4,39 +4,39 @@
 	let { data }: PageProps = $props();
 </script>
 
-<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950">
-	<h1 class="text-2xl font-semibold text-gray-900">License Keys</h1>
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">License Keys</h1>
 
 	{#if data.licenseKeys.length > 0}
-		<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-300">
-			<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-300">
-				<thead class="bg-gray-50 dark:bg-gray-200">
+		<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+			<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+				<thead class="bg-gray-50 dark:bg-gray-800">
 					<tr>
-						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
 							Key
 						</th>
-						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
 							Level
 						</th>
-						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+						<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
 							Status
 						</th>
 					</tr>
 				</thead>
-				<tbody class="divide-y divide-gray-200 dark:divide-gray-300 bg-white dark:bg-gray-100">
+				<tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
 					{#each data.licenseKeys as key}
 						<tr>
-							<td class="whitespace-nowrap px-6 py-4 font-mono text-sm text-gray-900">
+							<td class="whitespace-nowrap px-6 py-4 font-mono text-sm text-gray-900 dark:text-gray-100">
 								{key.key}
 							</td>
-							<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-700">
+							<td class="whitespace-nowrap px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
 								{key.level}
 							</td>
 							<td class="whitespace-nowrap px-6 py-4 text-sm">
 								<span
 									class="inline-flex rounded-full px-2 text-xs font-semibold leading-5 {key.active
-										? 'bg-green-100 text-green-800'
-										: 'bg-red-100 text-red-800'}"
+										? 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-gray-200'
+										: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-gray-200'}"
 								>
 									{key.active ? 'Active' : 'Inactive'}
 								</span>
@@ -48,7 +48,7 @@
 		</div>
 	{:else}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-lg text-gray-500">You don't have any license keys yet.</p>
+			<p class="text-lg text-gray-500 dark:text-gray-400">You don't have any license keys yet.</p>
 		</div>
 	{/if}
 </div>
diff --git a/src/routes/(protected)/(user)/proclamations/+page.svelte b/src/routes/(protected)/(user)/proclamations/+page.svelte
index 140c64b..3476c83 100644
--- a/src/routes/(protected)/(user)/proclamations/+page.svelte
+++ b/src/routes/(protected)/(user)/proclamations/+page.svelte
@@ -34,29 +34,29 @@
 	}
 </script>
 
-<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:bg-gray-950">
-	<h1 class="text-2xl font-semibold text-gray-900">Proclamations</h1>
+<div class="flex h-full min-h-0 flex-col gap-6 p-6 dark:text-gray-100">
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Proclamations</h1>
 
 	<!-- Filters -->
 	<div class="flex flex-wrap items-end gap-4">
 		<div>
-			<label for="search" class="block text-sm font-medium text-gray-700">Search</label>
+			<label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
 			<input
 				type="text"
 				id="search"
 				bind:value={search}
 				placeholder="Search by name..."
-				class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+				class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 				onkeydown={(e) => e.key === 'Enter' && applyFilters()}
 			/>
 		</div>
 		<div>
-			<label for="category" class="block text-sm font-medium text-gray-700">Category</label>
+			<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
 			<select
 				id="category"
 				bind:value={categoryId}
 				onchange={applyFilters}
-				class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+				class="mt-1 rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 			>
 				<option value={null}>All Categories</option>
 				{#each data.categories as cat}
@@ -66,7 +66,7 @@
 		</div>
 		<button
 			type="button"
-			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
+			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 			onclick={applyFilters}
 		>
 			Search
@@ -74,7 +74,7 @@
 		{#if data.search || data.categoryId}
 			<button
 				type="button"
-				class="rounded-lg border border-gray-300 dark:border-gray-400 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:hover:bg-gray-300"
+				class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
 				onclick={clearFilters}
 			>
 				Clear
@@ -88,16 +88,16 @@
 			{#each data.proclamations as proclamation}
 				<a
 					href="/proclamations/{proclamation.id}"
-					class="flex flex-col rounded-lg border border-gray-200 dark:border-gray-300 bg-white dark:bg-gray-100 p-5 shadow-sm transition-shadow hover:shadow-md"
+					class="flex flex-col rounded-lg border border-gray-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
 				>
-					<h2 class="text-lg font-medium text-gray-900">{proclamation.name}</h2>
-					<p class="mt-1 text-sm text-gray-500">{displayCategoryName(proclamation.category)}</p>
+					<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">{proclamation.name}</h2>
+					<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{displayCategoryName(proclamation.category)}</p>
 					<div class="mt-auto flex items-center justify-between pt-4">
-						<span class="text-sm text-purple-600">
+						<span class="text-sm text-purple-600 dark:text-gray-400">
 							{proclamation.solfeggioFrequency.value} Hz &mdash;
 							{proclamation.solfeggioFrequency.name}
 						</span>
-						<span class="font-semibold text-gray-900">
+						<span class="font-semibold text-gray-900 dark:text-gray-100">
 							${proclamation.price.toFixed(2)}
 						</span>
 					</div>
@@ -106,7 +106,7 @@
 		</div>
 	{:else}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-lg text-gray-500">No proclamations found.</p>
+			<p class="text-lg text-gray-500 dark:text-gray-400">No proclamations found.</p>
 		</div>
 	{/if}
 </div>
diff --git a/src/routes/(protected)/(user)/proclamations/[id]/+page.svelte b/src/routes/(protected)/(user)/proclamations/[id]/+page.svelte
index 2582d60..f100c9e 100644
--- a/src/routes/(protected)/(user)/proclamations/[id]/+page.svelte
+++ b/src/routes/(protected)/(user)/proclamations/[id]/+page.svelte
@@ -10,36 +10,36 @@
 	);
 </script>
 
-<div class="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 p-6 dark:bg-gray-950">
+<div class="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col gap-6 p-6 dark:text-gray-100">
 	<a
 		href="/proclamations"
-		class="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+		class="text-sm text-blue-600 hover:text-blue-800 hover:underline dark:text-gray-400 dark:hover:text-gray-200"
 	>
 		&larr; Back to Proclamations
 	</a>
 
 	<div>
-		<h1 class="text-2xl font-semibold text-gray-900">{data.proclamation.name}</h1>
-		<p class="mt-1 text-sm text-gray-500">{categoryBreadcrumb}</p>
+		<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{data.proclamation.name}</h1>
+		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{categoryBreadcrumb}</p>
 	</div>
 
 	<div class="flex flex-wrap gap-4">
-		<div class="rounded-lg border border-purple-200 bg-purple-50 px-4 py-2">
-			<p class="text-xs font-medium text-purple-600">Frequency</p>
-			<p class="text-sm font-semibold text-purple-900">
+		<div class="rounded-lg border border-purple-200 bg-purple-50 px-4 py-2 dark:border-gray-700 dark:bg-gray-800">
+			<p class="text-xs font-medium text-purple-600 dark:text-gray-400">Frequency</p>
+			<p class="text-sm font-semibold text-purple-900 dark:text-gray-100">
 				{data.proclamation.solfeggioFrequency.value} Hz &mdash;
 				{data.proclamation.solfeggioFrequency.name}
 			</p>
 		</div>
-		<div class="rounded-lg border border-gray-200 dark:border-gray-300 bg-gray-50 dark:bg-gray-200 px-4 py-2">
-			<p class="text-xs font-medium text-gray-500">Price</p>
-			<p class="text-sm font-semibold text-gray-900">
+		<div class="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 dark:border-gray-700 dark:bg-gray-800">
+			<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Price</p>
+			<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
 				${data.proclamation.price.toFixed(2)}
 			</p>
 		</div>
 	</div>
 
-	<div class="prose max-w-none rounded-lg border border-gray-200 dark:border-gray-300 bg-white dark:bg-gray-100 p-6">
+	<div class="prose max-w-none rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900 dark:prose-invert">
 		{@html data.proclamation.content}
 	</div>
 </div>
diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
index 10d52b5..4300e75 100644
--- a/src/routes/(protected)/+layout.svelte
+++ b/src/routes/(protected)/+layout.svelte
@@ -28,8 +28,8 @@
 			<a
 				href={link.href}
 				class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive(link.href)
-					? 'bg-blue-50 text-blue-700'
-					: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
+					? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
+					: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
 			>
 				{link.label}
 			</a>
@@ -39,8 +39,8 @@
 				<a
 					href="/admin"
 					class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive('/admin')
-						? 'bg-blue-50 text-blue-700'
-						: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
+						? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
+						: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
 				>
 					Admin Panel
 				</a>
@@ -51,8 +51,8 @@
 							class="rounded px-3 py-1 text-sm transition-colors {isActive(
 								'/admin/' + model.slug
 							)
-								? 'bg-blue-50 text-blue-700'
-								: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800 dark:hover:bg-gray-300 dark:hover:text-gray-100'}"
+								? 'bg-blue-50 text-blue-700 dark:bg-gray-800 dark:text-gray-100'
+								: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100'}"
 						>
 							{model.displayName}
 						</a>
diff --git a/src/routes/(protected)/admin/+page.svelte b/src/routes/(protected)/admin/+page.svelte
index 4caf1c0..86889e4 100644
--- a/src/routes/(protected)/admin/+page.svelte
+++ b/src/routes/(protected)/admin/+page.svelte
@@ -1 +1 @@
-<h1>Admin Dashboard</h1>
\ No newline at end of file
+<h1 class="p-6 dark:text-gray-100">Admin Dashboard</h1>
\ No newline at end of file
diff --git a/src/routes/(protected)/admin/categories/+page.svelte b/src/routes/(protected)/admin/categories/+page.svelte
index c75e7cd..4827b80 100644
--- a/src/routes/(protected)/admin/categories/+page.svelte
+++ b/src/routes/(protected)/admin/categories/+page.svelte
@@ -13,27 +13,29 @@
 </script>
 
 <!-- Display a list of categories -->
-<table>
-	<thead>
-		<tr>
-			<th class="hidden">ID</th>
-			<th>Name</th>
-			<th>Parent Category</th>
-		</tr>
-	</thead>
-	<tbody>
-		{#if data.categories}
-			{#each data.categories as category, i (category.id)}
-				<tr class="hover:bg-gray-300 dark:hover:bg-gray-700">
-					<td class="hidden">{i}</td>
-					<td>{category.name}</td>
-					{#if category.parentId}
-						<td>{getCategoryNameFromId(category.parentId)}</td>
-					{:else}
-						<td></td>
-					{/if}
-				</tr>
-			{/each}
-		{/if}
-	</tbody>
-</table>
+<div class="p-6 dark:text-gray-100">
+	<table class="w-full">
+		<thead>
+			<tr class="border-b border-gray-200 dark:border-gray-700">
+				<th class="hidden">ID</th>
+				<th class="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Name</th>
+				<th class="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Parent Category</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if data.categories}
+				{#each data.categories as category, i (category.id)}
+					<tr class="border-b border-gray-200 hover:bg-gray-300 dark:border-gray-700 dark:hover:bg-gray-800">
+						<td class="hidden">{i}</td>
+						<td class="px-4 py-2 text-gray-900 dark:text-gray-100">{category.name}</td>
+						{#if category.parentId}
+							<td class="px-4 py-2 text-gray-700 dark:text-gray-300">{getCategoryNameFromId(category.parentId)}</td>
+						{:else}
+							<td class="px-4 py-2"></td>
+						{/if}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d8fbc10..9b0996b 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -5,9 +5,9 @@
 
 <Window>
 	{#if $page.status === 403}
-		<h1>Not Authorized</h1>
-      <p>
-        You don't have permission to view this page. <a href="/">Go home</a>.
+		<h1 class="dark:text-gray-100">Not Authorized</h1>
+      <p class="dark:text-gray-300">
+        You don't have permission to view this page. <a href="/" class="dark:text-gray-400 dark:hover:text-gray-200">Go home</a>.
       </p>
 	{/if}
 </Window>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ae9942f..1c86524 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,6 +19,6 @@
 </svelte:head>
 
 <TopBar userRoleId={data.userRoleId} />
-<div class="flex min-h-0 flex-1 px-8 dark:bg-gray-950 dark:text-gray-100">
+<div class="flex min-h-0 flex-1 px-8 dark:bg-gray-950">
 	{@render children()}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 83b58d8..ffaf698 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,5 +3,5 @@
 </script>
 
 <Center>
-	<h1>Hello</h1>
+	<h1 class="dark:text-gray-100">Hello</h1>
 </Center>
diff --git a/src/routes/forgot-password/+page.svelte b/src/routes/forgot-password/+page.svelte
index c890339..e9cb387 100644
--- a/src/routes/forgot-password/+page.svelte
+++ b/src/routes/forgot-password/+page.svelte
@@ -5,17 +5,17 @@
 	let { form }: PageProps = $props();
 </script>
 
-<div class="mx-auto mt-12 max-w-md">
-	<h1 class="mb-6 text-2xl font-semibold text-gray-900">Forgot Password</h1>
+<div class="mx-auto mt-12 max-w-md dark:text-gray-100">
+	<h1 class="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">Forgot Password</h1>
 
 	{#if form?.success}
-		<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700">
+		<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 			If an account with that email exists, we've sent a password reset link.
 		</div>
 	{/if}
 
 	{#if form?.error && !form?.success}
-		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 			{form.error}
 		</div>
 	{/if}
@@ -26,17 +26,17 @@
 			name="email"
 			placeholder="Email Address"
 			required
-			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 		/>
 		<button
 			type="submit"
-			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
+			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 		>
 			Send Reset Link
 		</button>
 	</form>
 
-	<a href={resolve('/login')} class="mt-4 block text-sm text-blue-600 hover:text-blue-800">
+	<a href={resolve('/login')} class="mt-4 block text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200">
 		Back to Login
 	</a>
 </div>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 4053309..d534225 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -74,29 +74,12 @@
   --shadow-2xl: 0 0 #0000;
 }
 
-/* ------------------------------------------------------------------ */
-/*  Dark mode — invert the gray scale                                  */
-/*  Use :root.dark so specificity matches Tailwind's :root, :host       */
-/* ------------------------------------------------------------------ */
-:root.dark {
-  --color-gray-50: #030712;
-  --color-gray-100: #111827;
-  --color-gray-200: #1f2937;
-  --color-gray-300: #374151;
-  --color-gray-400: #4b5563;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #9ca3af;
-  --color-gray-700: #d1d5db;
-  --color-gray-800: #e5e7eb;
-  --color-gray-900: #f9fafb;
-}
-
 /* ------------------------------------------------------------------ */
 /*  Dark mode form elements                                            */
 /* ------------------------------------------------------------------ */
-:root.dark input,
-:root.dark select,
-:root.dark textarea {
+.dark input,
+.dark select,
+.dark textarea {
   background-color: #1f2937;
   color: #f9fafb;
   border-color: #374151;
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index e6e002e..d98a036 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -26,16 +26,16 @@
 </script>
 
 <Window>
-	<div>
+	<div class="dark:text-gray-100">
 		{#if verified}
 			<div
-				class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700"
+				class="mb-4 rounded-lg border border-green-200 bg-green-50 p-4 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
 			>
 				Your email has been verified. You can now log in.
 			</div>
 		{/if}
 		{#if error}
-			<span class="text-red-600">{error}</span>
+			<span class="text-red-600 dark:text-gray-300">{error}</span>
 		{/if}
 		<form
 			onsubmit={handleSubmit}
@@ -44,13 +44,13 @@
 			<p>Login</p>
 			<input type="email" placeholder="Email Address" bind:value={email} required class="my-2" />
 			<input type="password" placeholder="Password" bind:value={password} required class="my-2" />
-			<button class="mt-4 rounded bg-blue-200 px-4 py-2" type="submit">Sign In</button>
+			<button class="mt-4 rounded bg-blue-200 px-4 py-2 dark:bg-gray-700 dark:text-gray-100" type="submit">Sign In</button>
 		</form>
 		<div class="mt-2 flex flex-col items-center gap-2">
-			<a href="/forgot-password" class="text-sm text-blue-600 hover:text-blue-800"
+			<a href="/forgot-password" class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
 				>Forgot Password?</a
 			>
-			<a href="/register" class="text-sm text-blue-600 hover:text-blue-800"
+			<a href="/register" class="text-sm text-blue-600 hover:text-blue-800 dark:text-gray-400 dark:hover:text-gray-200"
 				>Don't have an account? Register</a
 			>
 		</div>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 9305586..0df3225 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -7,42 +7,44 @@
 </script>
 
 <Window>
-	{#if form?.success}
-		<div class="mx-auto max-w-md text-center">
-			<div
-				class="rounded-lg border border-green-200 bg-green-50 p-6 text-green-700"
-			>
-				<p class="text-lg font-medium">Account created!</p>
-				<p class="mt-2">
-					We've sent a verification email. Check your inbox and click the link to verify your
-					email address, then log in.
-				</p>
-			</div>
-		</div>
-	{:else}
-		<div class="flex flex-col items-start justify-center">
-			{#if form?.error}
-				<div class="mb-4 w-full rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
-					{form.error}
-				</div>
-			{/if}
-			<form method="POST" class="flex flex-col items-start">
-				<input type="text" name="firstName" placeholder="First Name" required class="mb-2" />
-				<input type="text" name="lastName" placeholder="Last Name" required class="mb-2" />
-				<input type="email" name="email" placeholder="Email Address" required class="mb-2" />
-				<input type="password" name="password" placeholder="Password" required class="mb-2" />
-				<input type="password" name="password2" placeholder="Verify Password" required class="mb-2" />
-				<button type="submit" class="mx-auto rounded-full bg-blue-600 px-6 py-2 text-white dark:text-gray-950"
-					>Submit</button
+	<div class="dark:text-gray-100">
+		{#if form?.success}
+			<div class="mx-auto max-w-md text-center">
+				<div
+					class="rounded-lg border border-green-200 bg-green-50 p-6 text-green-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
 				>
-			</form>
-			<p class=" mx-auto my-6 text-center">Or</p>
-			<button
-				class="mx-auto"
-				onclick={async () => {
-					await authClient.signIn.social({ provider: 'google', callbackURL: '/account/setup' });
-				}}><img src="light/web_light_sq_SU.svg" alt="Sign Up with Google" /></button
-			>
-		</div>
-	{/if}
+					<p class="text-lg font-medium">Account created!</p>
+					<p class="mt-2">
+						We've sent a verification email. Check your inbox and click the link to verify your
+						email address, then log in.
+					</p>
+				</div>
+			</div>
+		{:else}
+			<div class="flex flex-col items-start justify-center">
+				{#if form?.error}
+					<div class="mb-4 w-full rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+						{form.error}
+					</div>
+				{/if}
+				<form method="POST" class="flex flex-col items-start">
+					<input type="text" name="firstName" placeholder="First Name" required class="mb-2" />
+					<input type="text" name="lastName" placeholder="Last Name" required class="mb-2" />
+					<input type="email" name="email" placeholder="Email Address" required class="mb-2" />
+					<input type="password" name="password" placeholder="Password" required class="mb-2" />
+					<input type="password" name="password2" placeholder="Verify Password" required class="mb-2" />
+					<button type="submit" class="mx-auto rounded-full bg-blue-600 px-6 py-2 text-white dark:bg-gray-700 dark:text-gray-100"
+						>Submit</button
+					>
+				</form>
+				<p class=" mx-auto my-6 text-center">Or</p>
+				<button
+					class="mx-auto"
+					onclick={async () => {
+						await authClient.signIn.social({ provider: 'google', callbackURL: '/account/setup' });
+					}}><img src="light/web_light_sq_SU.svg" alt="Sign Up with Google" /></button
+				>
+			</div>
+		{/if}
+	</div>
 </Window>
diff --git a/src/routes/reset-password/+page.svelte b/src/routes/reset-password/+page.svelte
index c58c24a..f503db2 100644
--- a/src/routes/reset-password/+page.svelte
+++ b/src/routes/reset-password/+page.svelte
@@ -4,11 +4,11 @@
 	let { form }: PageProps = $props();
 </script>
 
-<div class="mx-auto mt-12 max-w-md">
-	<h1 class="mb-6 text-2xl font-semibold text-gray-900">Reset Password</h1>
+<div class="mx-auto mt-12 max-w-md dark:text-gray-100">
+	<h1 class="mb-6 text-2xl font-semibold text-gray-900 dark:text-gray-100">Reset Password</h1>
 
 	{#if form?.error}
-		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
+		<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
 			{form.error}
 		</div>
 	{/if}
@@ -20,7 +20,7 @@
 			placeholder="New Password"
 			required
 			minlength="8"
-			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 		/>
 		<input
 			type="password"
@@ -28,11 +28,11 @@
 			placeholder="Confirm New Password"
 			required
 			minlength="8"
-			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+			class="rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600"
 		/>
 		<button
 			type="submit"
-			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white dark:text-gray-950 transition-colors hover:bg-blue-700"
+			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
 		>
 			Reset Password
 		</button>