diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
index c05f208..ba0c3a6 100644
--- a/frontend/src/lib/components/Header.svelte
+++ b/frontend/src/lib/components/Header.svelte
@@ -1,68 +1,81 @@
 <script>
-  import { onMount } from "svelte";
-  import { applyAction, enhance } from "$app/forms";
-  import { page } from "$app/stores";
-  // import Developer from "$lib/img/hero-image.png";
-  // import Avatar from "$lib/img/TeamAvatar.jpeg";
-  import { t } from "svelte-i18n";
-  onMount(() => {
-    console.log("Page data in Header:", $page);
-  });
+	import { onMount } from 'svelte';
+	import { applyAction, enhance } from '$app/forms';
+	import { page } from '$app/stores';
+	// import Developer from "$lib/img/hero-image.png";
+	// import Avatar from "$lib/img/TeamAvatar.jpeg";
+	import { t } from 'svelte-i18n';
+	import { writable } from 'svelte/store';
+	onMount(() => {
+		console.log('Page data in Header:', $page);
+		document.documentElement.setAttribute('data-theme', $theme);
+	});
 
-  $: {
-    console.log("Page data updated:", $page);
-  }
+	$: {
+		console.log('Page data updated:', $page);
+	}
+	// Create a theme store
+	const theme = writable(
+		typeof window !== 'undefined' ? localStorage.getItem('theme') || 'dark' : 'dark'
+	);
+
+	// Update theme and localStorage when changed
+	function toggleTheme() {
+		theme.update((current) => {
+			const newTheme = current === 'dark' ? 'bright' : 'dark';
+			localStorage.setItem('theme', newTheme);
+			document.documentElement.setAttribute('data-theme', newTheme);
+			return newTheme;
+		});
+	}
 </script>
 
 <header class="header">
-  <div class="header-container">
-    <div class="header-left">
-      <div class="header-crafted-by-container">
-        <!-- <a href="https://tiny-bits.net/">
+	<div class="header-container">
+		<div class="header-left">
+			<div class="header-crafted-by-container">
+				<!-- <a href="https://tiny-bits.net/">
           <span>Developed by</span><img
             src={Developer}
             alt="Alexander Stölting"
           /> -->
-        <!-- </a> -->
-      </div>
-    </div>
-    <div class="header-right">
-      <div class="header-nav-item" class:active={$page.url.pathname === "/"}>
-        <a href="/">home</a>
-      </div>
-      {#if !$page.data.user}
-        <div
-          class="header-nav-item"
-          class:active={$page.url.pathname === "/auth/login"}
-        >
-          <a href="/auth/login">login</a>
-        </div>
-        <!-- <div
+				<!-- </a> -->
+			</div>
+		</div>
+		<div class="header-right">
+			<div class="header-nav-item" class:active={$page.url.pathname === '/'}>
+				<a href="/">home</a>
+			</div>
+			{#if !$page.data.user}
+				<div class="header-nav-item" class:active={$page.url.pathname === '/auth/login'}>
+					<a href="/auth/login">login</a>
+				</div>
+				<!-- <div
                     class="header-nav-item"
                     class:active={$page.url.pathname === "/auth/register"}
                 >
                     <a href="/auth/register">register</a>
                 </div> -->
-      {:else}
-        <div class="header-nav-item">
-          <a href="/auth/about/{$page.data.user.id}">
-            <!-- <img
+			{:else}
+				<div class="header-nav-item">
+					<a href="/auth/about/{$page.data.user.id}">
+						<!-- <img
               src={$page.data.user.profile_picture  ? $page.data.user.profile_picture : Avatar}
               alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
             /> -->
-            {$page.data.user.first_name}
-            {$page.data.user.last_name}
-          </a>
-        </div>
-        {#if $page.data.user.role_id > 0}
-          <div
-            class="header-nav-item"
-            class:active={$page.url.pathname.startsWith("/auth/admin/users")}
-          >
-            <a href="/auth/admin/users">{$t("user.management")}</a>
-          </div>
-        {/if}
-        <!-- {#if $page.data.user.is_superuser}
+						{$page.data.user.first_name}
+						{$page.data.user.last_name}
+					</a>
+				</div>
+				{#if $page.data.user.role_id > 0}
+					<div
+						class="header-nav-item"
+						class:active={$page.url.pathname.startsWith('/auth/admin/users')}
+					>
+						<a href="/auth/admin/users">{$t('user.management')}</a>
+					</div>
+				{/if}
+				<!-- {#if $page.data.user.is_superuser}
           <div
             class="header-nav-item"
             class:active={$page.url.pathname.startsWith("/auth/admin")}
@@ -70,19 +83,109 @@
             <a href="/auth/admin">admin</a>
           </div>
         {/if} -->
-        <form
-          class="header-nav-item"
-          action="/auth/logout"
-          method="POST"
-          use:enhance={async () => {
-            return async ({ result }) => {
-              await applyAction(result);
-            };
-          }}
-        >
-          <button type="submit">logout</button>
-        </form>
-      {/if}
-    </div>
-  </div>
+				<form
+					class="header-nav-item"
+					action="/auth/logout"
+					method="POST"
+					use:enhance={async () => {
+						return async ({ result }) => {
+							await applyAction(result);
+						};
+					}}
+				>
+					<button type="submit">logout</button>
+				</form>
+			{/if}
+			<div class="theme-toggle">
+				<label class="switch">
+					<input type="checkbox" checked={$theme === 'bright'} on:change={toggleTheme} />
+					<span class="slider">
+						<i class="fas fa-sun"></i>
+						<i class="fas fa-moon"></i>
+					</span>
+				</label>
+			</div>
+		</div>
+	</div>
 </header>
+
+<style>
+	.theme-toggle {
+		display: flex;
+		align-items: center;
+		margin-left: 20px;
+	}
+
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 60px;
+		height: 30px;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: var(--surface0);
+		transition: 0.4s;
+		border-radius: 30px;
+		padding: 4px;
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 22px;
+		width: 22px;
+		left: 4px;
+		bottom: 4px;
+		background-color: var(--text);
+		transition: 0.4s;
+		border-radius: 50%;
+	}
+
+	input:checked + .slider {
+		background-color: var(--surface0);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(30px);
+	}
+
+	.fa-sun,
+	.fa-moon {
+		position: absolute;
+		font-size: 16px;
+		top: 7px;
+		color: var(--text);
+		transition: 0.4s;
+	}
+
+	.fa-sun {
+		left: 7px;
+		opacity: 0;
+	}
+
+	.fa-moon {
+		right: 7px;
+		opacity: 1;
+	}
+
+	input:checked + .slider .fa-sun {
+		opacity: 1;
+	}
+
+	input:checked + .slider .fa-moon {
+		opacity: 0;
+	}
+</style>
diff --git a/frontend/src/lib/css/styles.min.css b/frontend/src/lib/css/styles.min.css
index dabeab1..c63248a 100644
--- a/frontend/src/lib/css/styles.min.css
+++ b/frontend/src/lib/css/styles.min.css
@@ -1,4 +1,6 @@
 :root {
+	--white: #ffffff;
+	--black: #000000;
 	--rosewater: #f5e0dc;
 	--flamingo: #f2cdcd;
 	--pink: #f5c2e7;
@@ -26,6 +28,69 @@
 	--mantle: #181825;
 	--crust: #11111b;
 	--modal-backdrop: rgba(49, 50, 68, 0.45); /* For Mocha theme */
+
+	/* Bright theme (Latte) colors */
+	--bright-white: #000000;
+	--bright-black: #ffffff;
+	--bright-rosewater: #dc8a78;
+	--bright-flamingo: #dd7878;
+	--bright-pink: #ea76cb;
+	--bright-mauve: #8839ef;
+	--bright-red: #d20f39;
+	--bright-maroon: #e64553;
+	--bright-peach: #fe640b;
+	--bright-yellow: #df8e1d;
+	--bright-green: #40a02b;
+	--bright-teal: #179299;
+	--bright-sky: #04a5e5;
+	--bright-sapphire: #209fb5;
+	--bright-blue: #1e66f5;
+	--bright-lavender: #7287fd;
+	--bright-text: #4c4f69;
+	--bright-subtext1: #5c5f77;
+	--bright-subtext0: #6c6f85;
+	--bright-overlay2: #7c7f93;
+	--bright-overlay1: #8c8fa1;
+	--bright-overlay0: #9ca0b0;
+	--bright-surface2: #acb0be;
+	--bright-surface1: #bcc0cc;
+	--bright-surface0: #ccd0da;
+	--bright-base: #eff1f5;
+	--bright-mantle: #e6e9ef;
+	--bright-crust: #dce0e8;
+	--bright-modal-backdrop: rgba(220, 224, 232, 0.45);
+}
+
+[data-theme='bright'] {
+	--white: var(--bright-white);
+	--black: var(--bright-black);
+	--rosewater: var(--bright-rosewater);
+	--flamingo: var(--bright-flamingo);
+	--pink: var(--bright-pink);
+	--mauve: var(--bright-mauve);
+	--red: var(--bright-red);
+	--maroon: var(--bright-maroon);
+	--peach: var(--bright-peach);
+	--yellow: var(--bright-yellow);
+	--green: var(--bright-green);
+	--teal: var(--bright-teal);
+	--sky: var(--bright-sky);
+	--sapphire: var(--bright-sapphire);
+	--blue: var(--bright-blue);
+	--lavender: var(--bright-lavender);
+	--text: var(--bright-text);
+	--subtext1: var(--bright-subtext1);
+	--subtext0: var(--bright-subtext0);
+	--overlay2: var(--bright-overlay2);
+	--overlay1: var(--bright-overlay1);
+	--overlay0: var(--bright-overlay0);
+	--surface2: var(--bright-surface2);
+	--surface1: var(--bright-surface1);
+	--surface0: var(--bright-surface0);
+	--base: var(--bright-base);
+	--mantle: var(--bright-mantle);
+	--crust: var(--bright-crust);
+	--modal-backdrop: var(--bright-modal-backdrop);
 }
 
 @font-face {
@@ -247,7 +312,7 @@ li strong {
 	transition:
 		border-color 0.3s ease-in-out,
 		background-color 0.3s ease-in-out;
-	color: white;
+	color: var(--white);
 	text-transform: uppercase;
 	font-weight: 500;
 	padding: 18px 28px;
@@ -264,7 +329,7 @@ li strong {
 	transition:
 		border-color 0.3s ease-in-out,
 		background-color 0.3s ease-in-out;
-	color: white;
+	color: var(--white);
 	text-transform: uppercase;
 	font-weight: 500;
 	padding: 18px 28px;
@@ -274,14 +339,14 @@ li strong {
 	border: 1px solid var(--mauve);
 }
 .button-colorful:hover {
-	background-color: #c907ff;
-	border-color: #c907ff;
+	background-color: var(--bright-mauve);
+	border-color: var(--bright-mauve);
 }
 .button-orange {
 	transition:
 		border-color 0.3s ease-in-out,
 		background-color 0.3s ease-in-out;
-	color: white;
+	color: var(--white);
 	text-transform: uppercase;
 	font-weight: 500;
 	padding: 18px 28px;
@@ -291,14 +356,14 @@ li strong {
 	border: 1px solid var(--peach);
 }
 .button-orange:hover {
-	background-color: #ca3f12;
-	border-color: #ca3f12;
+	background-color: var(--bright-peach);
+	border-color: var(--bright-peach);
 }
 .button-colorful:disabled {
 	transition:
 		border-color 0.3s ease-in-out,
 		background-color 0.3s ease-in-out;
-	color: white;
+	color: var(--white);
 	text-transform: uppercase;
 	font-weight: 500;
 	padding: 18px 28px;
@@ -338,7 +403,7 @@ li strong {
 
 .container {
 	transition: opacity 0.2s ease-in-out;
-	color: white;
+	color: var(--white);
 	letter-spacing: 0;
 	opacity: 1;
 }
@@ -348,7 +413,7 @@ li strong {
 	flex-grow: 1;
 }
 .container .content .step-title {
-	color: #fff;
+	color: var(--white);
 	font-size: 20px;
 	font-weight: 500;
 	line-height: 86px;
@@ -449,7 +514,7 @@ li strong {
 .btn.primary {
 	background-color: var(--blue);
 	border-color: var(--blue);
-	color: white;
+	color: var(--white);
 }
 
 .btn.primary:hover {
@@ -460,7 +525,7 @@ li strong {
 .btn.danger {
 	background-color: var(--red);
 	border-color: var(--red);
-	color: white;
+	color: var(--white);
 }
 
 .btn.danger:hover {
@@ -508,7 +573,7 @@ li strong {
 }
 
 .footer-branding-container {
-	color: white;
+	color: var(--white);
 	font-weight: 300;
 	margin-bottom: 73px;
 }
@@ -527,7 +592,7 @@ li strong {
 	align-items: center;
 	justify-content: center;
 	margin-bottom: 16px;
-	color: white;
+	color: var(--white);
 }
 .footer-branding-container .footer-branding .footer-crafted-by-container span {
 	display: inline-block;
@@ -541,12 +606,12 @@ li strong {
 }
 
 .footer-branding-container .footer-branding .footer-copyright {
-	color: #696969;
+	color: var(--overlay0);
 	letter-spacing: 0.5px;
 }
 .footer-container {
 	width: 100%;
-	color: white;
+	color: var(--white);
 	box-sizing: border-box;
 	display: flex;
 	justify-content: center;
@@ -575,7 +640,7 @@ li strong {
 			#000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
 			#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
 		),
-		radial-gradient(farthest-side, #0000 calc(98% - var(--b)), #000 calc(100% - var(--b)));
+		radial-gradient(farthest-side, #0000 calc(98% - var(--b)), var(--black) calc(100% - var(--b)));
 	-webkit-mask: var(--_m);
 	mask: var(--_m);
 	-webkit-mask-composite: destination-in;