diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index 92220860..c90c4446 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -51,7 +51,8 @@
 		'winter',
 		'dim',
 		'nord',
-		'sunset'
+		'sunset',
+		'colorful'
 	];
 	let activeTheme: string | null = '';
 	let avatar = $pocketbase.authStore.model?.avatar;
@@ -99,7 +100,7 @@
 			<ul
 				id="mobile-menu"
 				tabindex="-1"
-				class="menu dropdown-content z-[1] mt-3 w-max gap-1 rounded-box bg-base-300 p-2 shadow"
+				class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 w-max gap-1 p-2 shadow"
 			>
 				{#if $settingsPub?.website_title}
 					<div class="menu-title">
@@ -140,14 +141,14 @@
 								{#each availableThemes as theme}
 									<li>
 										<button
-											class="overflow-hidden rounded-lg text-left outline-base-content"
+											class="outline-base-content overflow-hidden rounded-lg text-left"
 											data-set-theme={theme}
 											on:click={() => (activeTheme = theme)}
 											on:keydown={() => (activeTheme = theme)}
 										>
 											<div
 												data-theme={theme}
-												class="w-full cursor-pointer rounded bg-base-100 font-sans text-base-content"
+												class="bg-base-100 text-base-content w-full cursor-pointer rounded font-sans"
 											>
 												<div class="grid grid-cols-5 grid-rows-3">
 													<div
@@ -159,10 +160,10 @@
 														/>
 														<div class="flex-grow text-sm">{theme}</div>
 														<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-															<div class="w-2 rounded bg-primary" />
-															<div class="w-2 rounded bg-secondary" />
-															<div class="w-2 rounded bg-accent" />
-															<div class="w-2 rounded bg-neutral" />
+															<div class="bg-primary w-2 rounded" />
+															<div class="bg-secondary w-2 rounded" />
+															<div class="bg-accent w-2 rounded" />
+															<div class="bg-neutral w-2 rounded" />
 														</div>
 													</div>
 												</div>
@@ -217,29 +218,29 @@
 				<Fa icon={faChevronDown} />
 			</div>
 			<div
-				class="dropdown-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto rounded-box bg-base-200 text-base-content shadow"
+				class="dropdown-content rounded-box bg-base-200 text-base-content z-[1] mt-3 h-fit max-h-96 w-56 overflow-y-auto shadow"
 			>
 				<div class="grid grid-cols-1 gap-3 p-3" tabindex="-1">
 					{#each availableThemes as theme}
 						<button
-							class="overflow-hidden rounded-lg text-left outline-base-content"
+							class="outline-base-content overflow-hidden rounded-lg text-left"
 							data-set-theme={theme}
 							on:click={() => (activeTheme = theme)}
 							on:keydown={() => (activeTheme = theme)}
 						>
 							<div
 								data-theme={theme}
-								class="w-full cursor-pointer bg-base-100 font-sans text-base-content"
+								class="bg-base-100 text-base-content w-full cursor-pointer font-sans"
 							>
 								<div class="grid grid-cols-5 grid-rows-3">
 									<div class="col-span-5 row-span-3 row-start-1 flex items-center gap-2 px-4 py-3">
 										<Fa icon={faCheck} class={activeTheme === theme ? 'visible' : 'invisible'} />
 										<div class="flex-grow text-sm">{theme}</div>
 										<div class="flex h-full flex-shrink-0 flex-wrap gap-1">
-											<div class="w-2 rounded bg-primary" />
-											<div class="w-2 rounded bg-secondary" />
-											<div class="w-2 rounded bg-accent" />
-											<div class="w-2 rounded bg-neutral" />
+											<div class="bg-primary w-2 rounded" />
+											<div class="bg-secondary w-2 rounded" />
+											<div class="bg-accent w-2 rounded" />
+											<div class="bg-neutral w-2 rounded" />
 										</div>
 									</div>
 								</div>
@@ -266,7 +267,7 @@
 				</label>
 				<ul
 					tabindex="-1"
-					class="menu dropdown-content z-[1] mt-3 rounded-box bg-base-300 p-2 shadow"
+					class="menu dropdown-content rounded-box bg-base-300 z-[1] mt-3 p-2 shadow"
 				>
 					<li class="menu-title">
 						{$pocketbase.authStore.isAdmin
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7ac7b494..e9601291 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -15,9 +15,7 @@ export default {
 					primary: '#55BCD9',
 					secondary: '#D4A35C',
 					'primary-content': '#ffffff'
-				}
-			},
-			{
+				},
 				dark: {
 					...themes['dark'],
 					primary: '#55BCD9',
@@ -26,15 +24,25 @@ export default {
 					'--rounded-btn': '1.9rem',
 					'--tab-border': '2px',
 					'--tab-radius': '.5rem'
-				}
-			},
-			{
+				},
 				cupcake: {
 					...themes['cupcake'],
 					primary: '#55BCD9',
 					secondary: '#D4A35C',
 					'primary-content': '#ffffff'
-				}
+				},
+				colorful: {
+					...themes['light'],
+					primary: '#00bdf8',
+					secondary: '#009aff',
+					accent: '#00b3a2',
+					neutral: '#161200',
+					'base-100': '#ffffff',
+					info: '#00c5dc',
+					success: '#00d892',
+					warning: '#f77800',
+					error: '#f36165'
+				},
 			},
 			'bumblebee',
 			'emerald',