diff --git a/frontend/src/app.css b/frontend/src/app.css
index cc453f9..17761fc 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -45,9 +45,292 @@
 	src: url('/Phudu-Black.ttf') format('truetype');
 }
 
+/* custom properties for theming */
+:root {
+	/* light mode colors */
+	--color-bg-primary: #ffffff;
+	--color-bg-secondary: #f8f9fa;
+	--color-bg-tertiary: #f1f3f4;
+	--color-border: #e5e7eb;
+	--color-border-hover: #d1d5db;
+	--color-text-primary: #111827;
+	--color-text-secondary: #6b7280;
+	--color-text-tertiary: #9ca3af;
+	--color-shadow: rgba(0, 0, 0, 0.1);
+	--color-shadow-lg: rgba(0, 0, 0, 0.15);
+
+	/* form colors */
+	--color-input-bg: #ffffff;
+	--color-input-border: #d1d5db;
+	--color-input-border-focus: #2563eb;
+
+	/* scrollbar colors */
+	--color-scrollbar-track: #f1f1f1;
+	--color-scrollbar-thumb: #819efb;
+	--color-scrollbar-thumb-hover: #6b85d6;
+}
+
+.dark {
+	/* dark mode colors */
+	--color-bg-primary: #111827;
+	--color-bg-secondary: #1f2937;
+	--color-bg-tertiary: #374151;
+	--color-border: #374151;
+	--color-border-hover: #4b5563;
+	--color-text-primary: #f9fafb;
+	--color-text-secondary: #d1d5db;
+	--color-text-tertiary: #9ca3af;
+	--color-shadow: rgba(0, 0, 0, 0.3);
+	--color-shadow-lg: rgba(0, 0, 0, 0.4);
+
+	/* form colors */
+	--color-input-bg: #374151;
+	--color-input-border: #4b5563;
+	--color-input-border-focus: #3b82f6;
+
+	/* scrollbar colors */
+	--color-scrollbar-track: #374151;
+	--color-scrollbar-thumb: #6b7280;
+	--color-scrollbar-thumb-hover: #9ca3af;
+}
+
+/* global styles */
+body {
+	background-color: var(--color-bg-primary);
+	color: var(--color-text-primary);
+	transition:
+		background-color 0.2s ease,
+		color 0.2s ease;
+}
+
+/* scrollbar styles */
 body {
 	@apply [&::-webkit-scrollbar]:w-2
-    [&::-webkit-scrollbar-track]:bg-gray-100
+    [&::-webkit-scrollbar-track]:bg-[var(--color-scrollbar-track)]
     [&::-webkit-scrollbar-thumb]:rounded-md
-    [&::-webkit-scrollbar-thumb]:bg-pc-dusty-light-blue;
+    [&::-webkit-scrollbar-thumb]:bg-[var(--color-scrollbar-thumb)]
+    [&::-webkit-scrollbar-thumb:hover]:bg-[var(--color-scrollbar-thumb-hover)];
+}
+
+/* dark mode utility classes */
+@layer utilities {
+	.bg-theme-primary {
+		background-color: var(--color-bg-primary);
+	}
+
+	.bg-theme-secondary {
+		background-color: var(--color-bg-secondary);
+	}
+
+	.bg-theme-tertiary {
+		background-color: var(--color-bg-tertiary);
+	}
+
+	.text-theme-primary {
+		color: var(--color-text-primary);
+	}
+
+	.text-theme-secondary {
+		color: var(--color-text-secondary);
+	}
+
+	.text-theme-tertiary {
+		color: var(--color-text-tertiary);
+	}
+
+	.border-theme {
+		border-color: var(--color-border);
+	}
+
+	.border-theme-hover:hover {
+		border-color: var(--color-border-hover);
+	}
+
+	.shadow-theme {
+		box-shadow: 0 1px 3px 0 var(--color-shadow);
+	}
+
+	.shadow-theme-lg {
+		box-shadow: 0 10px 15px -3px var(--color-shadow-lg);
+	}
+
+	.input-theme {
+		background-color: var(--color-input-bg);
+		border-color: var(--color-input-border);
+		color: var(--color-text-primary);
+	}
+
+	.input-theme:focus {
+		border-color: var(--color-input-border-focus);
+	}
+}
+
+/* component-specific dark mode overrides */
+.dark .bg-gray-50 {
+	@apply bg-gray-800;
+}
+
+.dark .bg-gray-100 {
+	@apply bg-gray-700;
+}
+
+.dark .bg-gray-200 {
+	@apply bg-gray-600;
+}
+
+.dark .bg-white {
+	@apply bg-gray-800;
+}
+
+.dark .text-gray-900 {
+	@apply text-gray-100;
+}
+
+.dark .text-gray-800 {
+	@apply text-gray-200;
+}
+
+.dark .text-gray-700 {
+	@apply text-gray-300;
+}
+
+.dark .text-gray-600 {
+	@apply text-gray-400;
+}
+
+.dark .text-black {
+	@apply text-white;
+}
+
+.dark .border-gray-200 {
+	@apply border-gray-600;
+}
+
+.dark .border-gray-300 {
+	@apply border-gray-500;
+}
+
+/* table dark mode styles */
+.dark table {
+	@apply bg-gray-800;
+}
+
+.dark table td {
+	@apply bg-transparent text-gray-300 border-gray-600;
+}
+
+/* form elements dark mode */
+.dark input,
+.dark textarea,
+.dark select {
+	@apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
+}
+
+.dark input:focus,
+.dark textarea:focus,
+.dark select:focus {
+	@apply border-blue-500 ring-blue-500;
+}
+
+/* modal and card dark mode */
+.dark .modal-content,
+.dark .card {
+	@apply bg-gray-800 border-gray-600;
+}
+
+/* button hover effects in dark mode */
+.dark .bg-cta-blue:hover {
+	@apply bg-blue-600;
+}
+
+.dark .bg-pc-darkblue:hover {
+	@apply bg-blue-900;
+}
+
+/* custom scrollbar for dark mode containers */
+.dark .overflow-auto,
+.dark .overflow-x-auto,
+.dark .overflow-y-auto {
+	scrollbar-width: thin;
+	scrollbar-color: #6b7280 #374151;
+}
+
+.dark .overflow-auto::-webkit-scrollbar,
+.dark .overflow-x-auto::-webkit-scrollbar,
+.dark .overflow-y-auto::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+.dark .overflow-auto::-webkit-scrollbar-track,
+.dark .overflow-x-auto::-webkit-scrollbar-track,
+.dark .overflow-y-auto::-webkit-scrollbar-track {
+	background: #374151;
+}
+
+.dark .overflow-auto::-webkit-scrollbar-thumb,
+.dark .overflow-x-auto::-webkit-scrollbar-thumb,
+.dark .overflow-y-auto::-webkit-scrollbar-thumb {
+	background: #6b7280;
+	border-radius: 4px;
+}
+
+.dark .overflow-auto::-webkit-scrollbar-thumb:hover,
+.dark .overflow-x-auto::-webkit-scrollbar-thumb:hover,
+.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+	background: #9ca3af;
+}
+
+/* native date picker dark mode styling */
+.dark input[type='date']::-webkit-calendar-picker-indicator,
+.dark input[type='time']::-webkit-calendar-picker-indicator,
+.dark input[type='datetime-local']::-webkit-calendar-picker-indicator {
+	filter: invert(1);
+}
+
+.dark input[type='date']::-webkit-datetime-edit,
+.dark input[type='time']::-webkit-datetime-edit,
+.dark input[type='datetime-local']::-webkit-datetime-edit {
+	color: rgb(209 213 219);
+}
+
+.dark input[type='date']::-webkit-datetime-edit-fields-wrapper,
+.dark input[type='time']::-webkit-datetime-edit-fields-wrapper,
+.dark input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper {
+	background: rgb(55 65 81);
+}
+
+/* force date picker to use system dark theme */
+.dark input[type='date'],
+.dark input[type='time'],
+.dark input[type='datetime-local'] {
+	color-scheme: dark;
+}
+
+/* selected date background in dark mode */
+.dark input[type='date']::-webkit-datetime-edit-day-field:focus,
+.dark input[type='date']::-webkit-datetime-edit-month-field:focus,
+.dark input[type='date']::-webkit-datetime-edit-year-field:focus,
+.dark input[type='time']::-webkit-datetime-edit-hour-field:focus,
+.dark input[type='time']::-webkit-datetime-edit-minute-field:focus {
+	background-color: rgb(55 65 81);
+	color: rgb(209 213 219);
+}
+
+/* transitions for smooth theme switching */
+*,
+*::before,
+*::after {
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease,
+		color 0.2s ease;
+}
+
+/* override transitions for elements that shouldn't animate */
+.no-transition,
+.no-transition *,
+.no-transition *::before,
+.no-transition *::after {
+	transition: none !important;
 }
diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte
index 29c1d6c..21b51cc 100644
--- a/frontend/src/lib/components/Alert.svelte
+++ b/frontend/src/lib/components/Alert.svelte
@@ -243,7 +243,9 @@
 </script>
 
 {#if visible}
-	<div class="fixed top-0 left-0 w-full h-full bg-cta-blue opacity-20 blur-xl" />
+	<div
+		class="fixed top-0 left-0 w-full h-full bg-cta-blue dark:bg-gray-900 opacity-20 blur-xl transition-colors duration-200"
+	/>
 	<div
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
 		role="dialog"
@@ -253,11 +255,11 @@
 	>
 		<section
 			bind:this={alertElement}
-			class="shadow-xl w-[32rem] bg-white opacity-100 rounded-md flex flex-col"
+			class="shadow-xl dark:shadow-gray-900/70 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
 		>
 			<!-- Header -->
 			<div
-				class="bg-red-700 text-white rounded-t-md py-4 px-8 flex items-center justify-between flex-shrink-0"
+				class="bg-red-700 dark:bg-red-800 text-white rounded-t-md py-4 px-8 flex items-center justify-between flex-shrink-0 transition-colors duration-200"
 			>
 				<div class="flex items-center">
 					<svg
@@ -289,7 +291,10 @@
 
 			<!-- Content -->
 			<div class="px-8 py-6">
-				<div id="alert-description" class="text-gray-600">
+				<div
+					id="alert-description"
+					class="text-gray-600 dark:text-gray-300 transition-colors duration-200"
+				>
 					{#if $$slots.default}
 						<slot />
 					{:else}
@@ -312,13 +317,13 @@
 
 			<!-- Footer -->
 			<div
-				class="py-4 row-span-2 col-start-1 col-span-3 border-t-2 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end px-8 bg-gray-50 rounded-b-md"
+				class="py-4 row-span-2 col-start-1 col-span-3 border-t-2 border-gray-200 dark:border-gray-600 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end px-8 bg-gray-50 dark:bg-gray-700 rounded-b-md transition-colors duration-200"
 			>
 				{#if !noCancel}
 					<button
 						type="reset"
 						on:click={close}
-						class="bg-slate-400 hover:bg-slate-300 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md"
+						class="bg-slate-400 hover:bg-slate-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md transition-colors duration-200"
 					>
 						{cancel}
 					</button>
diff --git a/frontend/src/lib/components/AutoRefresh.svelte b/frontend/src/lib/components/AutoRefresh.svelte
index 50de60f..6515ee9 100644
--- a/frontend/src/lib/components/AutoRefresh.svelte
+++ b/frontend/src/lib/components/AutoRefresh.svelte
@@ -66,15 +66,20 @@
 	});
 </script>
 
-<div class="relative h-2">
-	<TextFieldSelect
-		id="autoRefresh"
-		value={$autoRefreshStore.enabled
-			? options.byValue($autoRefreshStore.interval.toString())
-			: 'Disabled'}
-		onSelect={handleIntervalChange}
-		options={options.keys()}
-		inline={true}
-		size={'small'}>Auto-Refresh</TextFieldSelect
+<div class="flex items-center gap-2">
+	<span class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200"
+		>Auto-Refresh</span
 	>
+	<div class="relative">
+		<TextFieldSelect
+			id="autoRefresh"
+			value={$autoRefreshStore.enabled
+				? options.byValue($autoRefreshStore.interval.toString())
+				: 'Disabled'}
+			onSelect={handleIntervalChange}
+			options={options.keys()}
+			inline={true}
+			size={'small'}
+		></TextFieldSelect>
+	</div>
 </div>
diff --git a/frontend/src/lib/components/BigButton.svelte b/frontend/src/lib/components/BigButton.svelte
index 505a5e1..e44a20b 100644
--- a/frontend/src/lib/components/BigButton.svelte
+++ b/frontend/src/lib/components/BigButton.svelte
@@ -6,9 +6,10 @@
 
 <button
 	{disabled}
-	class="self-start mt-6 bg-gradient-to-b from-blue-500 to-indigo-400 px-4 w-56 py-2 hover:from-blue-400 hover:to-indigo-400 text-white font-bold uppercase rounded-md mb-10"
+	class="self-start mt-6 bg-gradient-to-b from-blue-500 to-indigo-400 dark:from-blue-600 dark:to-indigo-500 px-4 w-56 py-2 hover:from-blue-400 hover:to-indigo-400 dark:hover:from-blue-500 dark:hover:to-indigo-400 text-white font-bold uppercase rounded-md mb-10 transition-all duration-200"
 	on:click
 	class:opacity-50={disabled}
+	class:dark:opacity-60={disabled}
 	class:cursor-not-allowed={disabled}
 	{type}
 >
diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte
index bc73341..7f0ed22 100644
--- a/frontend/src/lib/components/Button.svelte
+++ b/frontend/src/lib/components/Button.svelte
@@ -9,10 +9,12 @@
 </script>
 
 <button
-	class="{backgroundColor} px-6 py-2 text-white rounded-md uppercase font-semibold hover:opacity-80 text-sm {css}"
+	class="{backgroundColor} px-6 py-2 text-white rounded-md uppercase font-semibold hover:opacity-80 text-sm transition-all duration-200 dark:hover:opacity-90 {css}"
 	class:w-32={size === 'small'}
 	class:w-36={size === 'medium'}
 	class:w-60={size === 'large'}
+	class:disabled:opacity-50={disabled}
+	class:dark:disabled:opacity-60={disabled}
 	{disabled}
 	on:click
 >
diff --git a/frontend/src/lib/components/CTAbutton.svelte b/frontend/src/lib/components/CTAbutton.svelte
index cec39c8..95109ee 100644
--- a/frontend/src/lib/components/CTAbutton.svelte
+++ b/frontend/src/lib/components/CTAbutton.svelte
@@ -2,7 +2,7 @@
 	export let disabled = false;
 	/**
      * @type {"submit" | "button" | "reset"}
-     
+
      */
 	export let type = 'submit';
 </script>
@@ -11,7 +11,7 @@
 	<button
 		{disabled}
 		{type}
-		class="w-full p-2 text-white text-2xl bg-cta-blue rounded-lg font-phudu font-bold"
+		class="w-full p-2 text-white text-2xl bg-cta-blue dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 rounded-lg font-phudu font-bold transition-colors duration-200 disabled:opacity-50 dark:disabled:opacity-60"
 		>Login</button
 	>
 </div>
diff --git a/frontend/src/lib/components/CampaignCalendar.svelte b/frontend/src/lib/components/CampaignCalendar.svelte
index 0f0d395..d339311 100644
--- a/frontend/src/lib/components/CampaignCalendar.svelte
+++ b/frontend/src/lib/components/CampaignCalendar.svelte
@@ -41,11 +41,12 @@
 
 	let isGeneratingCalendar = false;
 
+	// Use consistent colors that match the design system - these work well in both light and dark modes
 	const COLORS = {
-		SCHEDULED: '#62aded',
-		ACTIVE: '#5557f6',
-		COMPLETED: '#69e1ab',
-		SELF_MANAGED: '#9F7AEA'
+		SCHEDULED: '#62aded', // campaign-scheduled
+		ACTIVE: '#5557f6', // campaign-active
+		COMPLETED: '#4cb5b5', // message-read - much more muted than bright green
+		SELF_MANAGED: '#9F7AEA' // purple
 	};
 
 	function sortCampaignsByPriority(campaigns, day) {
@@ -306,18 +307,20 @@
 	}
 </script>
 
-<div class="w-full bg-white rounded-lg shadow-sm p-4 border border-gray-200">
+<div
+	class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700 transition-colors duration-200"
+>
 	<div class="space-y-4 max-w-5xl mx-auto min-h-[600px]">
 		<!-- Navigation Controls -->
 		<div class="flex justify-center items-center">
 			<button
-				class="p-2 rounded hover:bg-gray-100 mx-4"
+				class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 mx-4 transition-colors duration-200"
 				on:click={previousMonth}
 				disabled={isLoadingNewMonth}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5 text-gray-600"
+					class="h-5 w-5 text-gray-600 dark:text-gray-300"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -331,18 +334,18 @@
 				</svg>
 			</button>
 
-			<h2 class="text-lg font-semibold">
+			<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
 				{format(currentMonth, 'MMMM yyyy')}
 			</h2>
 
 			<button
-				class="p-2 rounded hover:bg-gray-100 mx-4"
+				class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 mx-4 transition-colors duration-200"
 				on:click={nextMonth}
 				disabled={isLoadingNewMonth}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5 text-gray-600"
+					class="h-5 w-5 text-gray-600 dark:text-gray-300"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -356,7 +359,7 @@
 		<div class="flex justify-center flex-wrap gap-4 text-sm">
 			{#each [{ key: 'SCHEDULED', color: COLORS.SCHEDULED, label: 'Scheduled' }, { key: 'ACTIVE', color: COLORS.ACTIVE, label: 'Active' }, { key: 'COMPLETED', color: COLORS.COMPLETED, label: 'Completed' }, { key: 'SELF_MANAGED', color: COLORS.SELF_MANAGED, label: 'Self-managed' }] as item}
 				<button
-					class="flex items-center cursor-pointer select-none"
+					class="flex items-center cursor-pointer select-none hover:opacity-80 transition-opacity duration-200"
 					on:click={() => toggleFilter(item.key)}
 				>
 					<div
@@ -364,7 +367,7 @@
 						style="background-color: {item.color}; opacity: {activeFilters[item.key] ? '1' : '0.3'}"
 					></div>
 					<span
-						class="transition-opacity duration-200"
+						class="transition-opacity duration-200 text-gray-700 dark:text-gray-300"
 						style="opacity: {activeFilters[item.key] ? '1' : '0.5'}">{item.label}</span
 					>
 				</button>
@@ -376,7 +379,7 @@
 			<!-- Day headers -->
 			<div class="grid grid-cols-7 text-center mb-1">
 				{#each ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as day}
-					<div class="text-sm font-medium text-gray-600">{day}</div>
+					<div class="text-sm font-medium text-gray-600 dark:text-gray-300">{day}</div>
 				{/each}
 			</div>
 
@@ -384,8 +387,10 @@
 			{#if !isInitialized || isGeneratingCalendar || isLoadingNewMonth}
 				<div class="min-h-[450px] flex items-center justify-center">
 					<div class="flex items-center space-x-2">
-						<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-						<span class="text-gray-600">Loading calendar...</span>
+						<div
+							class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 dark:border-blue-400"
+						></div>
+						<span class="text-gray-600 dark:text-gray-300">Loading calendar...</span>
 					</div>
 				</div>
 			{:else}
@@ -395,17 +400,19 @@
 							{#each week as day}
 								<div
 									class="calendar-day relative border rounded-md overflow-hidden {scrollBarClassesHorizontal}  {day.isToday
-										? 'border-gray-700 bg-gray-50'
-										: 'border-gray-200'}
-	                                {day.isCurrentMonth ? 'bg-white' : 'bg-gray-50'}"
+										? 'border-gray-700 dark:border-gray-400 bg-gray-50 dark:bg-gray-700'
+										: 'border-gray-200 dark:border-gray-600'}
+	                                {day.isCurrentMonth
+										? 'bg-white dark:bg-gray-800'
+										: 'bg-gray-50 dark:bg-gray-700'} transition-colors duration-200"
 								>
 									<!-- Date number -->
 									<div
 										class="text-sm p-1 {day.isToday
-											? 'font-bold text-gray-800'
+											? 'font-bold text-gray-800 dark:text-white'
 											: day.isCurrentMonth
-												? 'text-gray-600'
-												: 'text-gray-400'}"
+												? 'text-gray-600 dark:text-gray-300'
+												: 'text-gray-400 dark:text-gray-500'}"
 									>
 										{day.date.getDate()}
 									</div>
diff --git a/frontend/src/lib/components/CampaignTrendChart.svelte b/frontend/src/lib/components/CampaignTrendChart.svelte
index d812857..78a71f5 100644
--- a/frontend/src/lib/components/CampaignTrendChart.svelte
+++ b/frontend/src/lib/components/CampaignTrendChart.svelte
@@ -60,7 +60,7 @@
 	let chartContainer;
 	let sizingContainer;
 	let width = 300;
-	let height = 200; // Balanced height to prevent overflow
+	let height = 240; // Increased height for better label spacing
 	let containerReady = false;
 
 	// User controls for N
@@ -96,7 +96,7 @@
 	$: margin = {
 		top: 15,
 		right: Math.min(180, Math.max(160, width * 0.28)), // 28% of width, min 160px, max 180px
-		bottom: 30,
+		bottom: 50, // Increased bottom margin for better label spacing
 		left: 50
 	};
 
@@ -344,17 +344,26 @@
 
 		const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
 		stop1.setAttribute('offset', '0%');
-		stop1.setAttribute('stop-color', '#f8f9fa');
+		stop1.setAttribute(
+			'stop-color',
+			document.documentElement.classList.contains('dark') ? '#374151' : '#f8f9fa'
+		);
 		stop1.setAttribute('stop-opacity', '0.3');
 
 		const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
 		stop2.setAttribute('offset', '50%');
-		stop2.setAttribute('stop-color', '#e9ecef');
+		stop2.setAttribute(
+			'stop-color',
+			document.documentElement.classList.contains('dark') ? '#4b5563' : '#e9ecef'
+		);
 		stop2.setAttribute('stop-opacity', '0.5');
 
 		const stop3 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
 		stop3.setAttribute('offset', '100%');
-		stop3.setAttribute('stop-color', '#f8f9fa');
+		stop3.setAttribute(
+			'stop-color',
+			document.documentElement.classList.contains('dark') ? '#374151' : '#f8f9fa'
+		);
 		stop3.setAttribute('stop-opacity', '0.3');
 
 		gradient.appendChild(stop1);
@@ -372,7 +381,10 @@
 			line.setAttribute('x2', (width - margin.right).toString());
 			line.setAttribute('y1', y.toString());
 			line.setAttribute('y2', y.toString());
-			line.setAttribute('stroke', '#E5E7EB');
+			line.setAttribute(
+				'stroke',
+				document.documentElement.classList.contains('dark') ? '#4b5563' : '#E5E7EB'
+			);
 			line.setAttribute('stroke-width', '1');
 			line.setAttribute('opacity', '0.4');
 			svg.appendChild(line);
@@ -386,7 +398,10 @@
 			vLine.setAttribute('x2', x.toString());
 			vLine.setAttribute('y1', margin.top.toString());
 			vLine.setAttribute('y2', (height - margin.bottom).toString());
-			vLine.setAttribute('stroke', '#e5e7eb');
+			vLine.setAttribute(
+				'stroke',
+				document.documentElement.classList.contains('dark') ? '#4b5563' : '#e5e7eb'
+			);
 			vLine.setAttribute('stroke-width', '0.5');
 			vLine.setAttribute('opacity', '0.3');
 			svg.appendChild(vLine);
@@ -399,7 +414,10 @@
 		yAxis.setAttribute('x2', margin.left.toString());
 		yAxis.setAttribute('y1', margin.top.toString());
 		yAxis.setAttribute('y2', (height - margin.bottom).toString());
-		yAxis.setAttribute('stroke', '#6B7280');
+		yAxis.setAttribute(
+			'stroke',
+			document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6B7280'
+		);
 		yAxis.setAttribute('stroke-width', '2');
 		svg.appendChild(yAxis);
 
@@ -408,7 +426,10 @@
 		xAxis.setAttribute('x2', (width - margin.right).toString());
 		xAxis.setAttribute('y1', (height - margin.bottom).toString());
 		xAxis.setAttribute('y2', (height - margin.bottom).toString());
-		xAxis.setAttribute('stroke', '#6B7280');
+		xAxis.setAttribute(
+			'stroke',
+			document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6B7280'
+		);
 		xAxis.setAttribute('stroke-width', '2');
 		svg.appendChild(xAxis);
 
@@ -420,7 +441,10 @@
 			text.setAttribute('y', (y - 2).toString());
 			text.setAttribute('text-anchor', 'end');
 			text.setAttribute('font-size', '11');
-			text.setAttribute('fill', '#6B7280');
+			text.setAttribute(
+				'fill',
+				document.documentElement.classList.contains('dark') ? '#d1d5db' : '#6B7280'
+			);
 			text.setAttribute('font-weight', '500');
 			text.setAttribute('alignment-baseline', 'middle');
 			text.textContent = `${value}%`;
@@ -432,10 +456,13 @@
 				const x = xScale(i);
 				const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
 				text.setAttribute('x', x.toString());
-				text.setAttribute('y', (height - margin.bottom + 18).toString());
+				text.setAttribute('y', (height - margin.bottom + 25).toString());
 				text.setAttribute('text-anchor', 'middle');
 				text.setAttribute('font-size', '11');
-				text.setAttribute('fill', '#000');
+				text.setAttribute(
+					'fill',
+					document.documentElement.classList.contains('dark') ? '#f9fafb' : '#000'
+				);
 				text.setAttribute('alignment-baseline', 'middle');
 				// Show date (YYYY/MM) and campaign name on the same line
 				const labelSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -534,9 +561,9 @@
 	}
 
 	function createLegend(svg, svgRoot) {
-		const legendY = margin.top - 5; // Move legend higher
+		const legendY = margin.top + 5; // Align with chart top area
 		const legendX = width - margin.right + 10;
-		const legendSpacing = 12; // Reduce spacing between legend items
+		const legendSpacing = 18; // More spacing between legend items
 
 		// Build a flat list of legend items (main and moving averages)
 		const legendItems = [];
@@ -684,8 +711,14 @@
 
 		const tooltipRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 		tooltipRect.setAttribute('rx', '4');
-		tooltipRect.setAttribute('fill', '#1F2937');
-		tooltipRect.setAttribute('stroke', '#374151');
+		tooltipRect.setAttribute(
+			'fill',
+			document.documentElement.classList.contains('dark') ? '#111827' : '#1F2937'
+		);
+		tooltipRect.setAttribute(
+			'stroke',
+			document.documentElement.classList.contains('dark') ? '#374151' : '#4b5563'
+		);
 		tooltipRect.setAttribute('opacity', '0.95');
 
 		const tooltipText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -829,18 +862,26 @@
 		<div>
 			{#if debouncedIsLoading}
 				<div class="flex items-center justify-center h-64">
-					<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-					<span class="ml-2 text-gray-600">Loading trend data...</span>
+					<div
+						class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 dark:border-blue-400"
+					></div>
+					<span class="ml-2 text-gray-600 dark:text-gray-300 transition-colors duration-200"
+						>Loading trend data...</span
+					>
 				</div>
 			{:else if !hasAttemptedLoad && debouncedShowPending}
 				<div class="flex items-center justify-center h-64">
-					<span class="text-gray-400 text-sm">Preparing trend data...</span>
+					<span class="text-gray-400 dark:text-gray-500 text-sm transition-colors duration-200"
+						>Preparing trend data...</span
+					>
 				</div>
 			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length === 0}
-				<div class="flex items-center justify-center h-64 bg-gray-50 rounded-lg">
+				<div
+					class="flex items-center justify-center h-64 bg-gray-50 dark:bg-gray-800 rounded-lg transition-colors duration-200"
+				>
 					<div class="text-center">
 						<svg
-							class="mx-auto h-12 w-12 text-gray-400"
+							class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 transition-colors duration-200"
 							fill="none"
 							stroke="currentColor"
 							viewBox="0 0 24 24"
@@ -852,17 +893,23 @@
 								d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
 							/>
 						</svg>
-						<h3 class="mt-2 text-sm font-medium text-gray-900">No campaign data</h3>
-						<p class="mt-1 text-sm text-gray-500">
+						<h3
+							class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-200 transition-colors duration-200"
+						>
+							No campaign data
+						</h3>
+						<p class="mt-1 text-sm text-gray-500 dark:text-gray-400 transition-colors duration-200">
 							Campaign statistics will appear here once campaigns are completed.
 						</p>
 					</div>
 				</div>
 			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length === 1}
-				<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
+				<div
+					class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6 transition-colors duration-200"
+				>
 					<div class="flex items-center">
 						<svg
-							class="h-6 w-6 text-blue-600 mr-2"
+							class="h-6 w-6 text-blue-600 dark:text-blue-400 mr-2 transition-colors duration-200"
 							fill="none"
 							stroke="currentColor"
 							viewBox="0 0 24 24"
@@ -875,44 +922,78 @@
 							/>
 						</svg>
 						<div>
-							<h4 class="text-sm font-medium text-blue-900">Single Campaign Data</h4>
-							<p class="text-sm text-blue-700">
+							<h4
+								class="text-sm font-medium text-blue-900 dark:text-blue-200 transition-colors duration-200"
+							>
+								Single Campaign Data
+							</h4>
+							<p class="text-sm text-blue-700 dark:text-blue-300 transition-colors duration-200">
 								Trends will appear when you have 2 or more completed campaigns.
 							</p>
 						</div>
 					</div>
 					<div class="grid grid-cols-4 gap-4">
 						<div class="text-center">
-							<div class="text-2xl font-bold text-blue-600">{chartData[0].openRate}%</div>
-							<div class="text-sm text-gray-600">Open Rate</div>
+							<div
+								class="text-2xl font-bold text-blue-600 dark:text-blue-400 transition-colors duration-200"
+							>
+								{chartData[0].openRate}%
+							</div>
+							<div class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-200">
+								Open Rate
+							</div>
 						</div>
 						<div class="text-center">
-							<div class="text-2xl font-bold text-green-600">{chartData[0].clickRate}%</div>
-							<div class="text-sm text-gray-600">Click Rate</div>
+							<div
+								class="text-2xl font-bold text-green-600 dark:text-green-400 transition-colors duration-200"
+							>
+								{chartData[0].clickRate}%
+							</div>
+							<div class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-200">
+								Click Rate
+							</div>
 						</div>
 						<div class="text-center">
-							<div class="text-2xl font-bold text-yellow-600">{chartData[0].submissionRate}%</div>
-							<div class="text-sm text-gray-600">Submission Rate</div>
+							<div
+								class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 transition-colors duration-200"
+							>
+								{chartData[0].submissionRate}%
+							</div>
+							<div class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-200">
+								Submission Rate
+							</div>
 						</div>
 						<div class="text-center">
-							<div class="text-2xl font-bold text-indigo-600">{chartData[0].reportRate}%</div>
-							<div class="text-sm text-gray-600">Report Rate</div>
+							<div
+								class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 transition-colors duration-200"
+							>
+								{chartData[0].reportRate}%
+							</div>
+							<div class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-200">
+								Report Rate
+							</div>
 						</div>
 					</div>
 				</div>
 			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length >= 2}
-				<div class="bg-white rounded-lg border border-gray-200 p-6">
+				<div
+					class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6 transition-colors duration-200"
+				>
 					<!-- Trendline stats and controls above chart -->
 					<div class="flex flex-row items-center justify-between mb-2 pb-0 flex-wrap gap-2">
-						<h4 class="text-sm font-medium text-gray-600 m-0">
+						<h4
+							class="text-sm font-medium text-gray-600 dark:text-gray-300 m-0 transition-colors duration-200"
+						>
 							Trendline: Last {trendStats ? trendStats.n : chartData.length} Campaigns (average)
 						</h4>
 						<div class="flex flex-wrap items-center gap-2 mb-0">
-							<label class="flex items-center gap-1 text-xs text-gray-700">
+							<label
+								class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-200"
+							>
 								Time range:
 								<select
 									bind:value={selectedTimeRange}
-									class="border rounded px-1 py-0 text-xs"
+									class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 text-xs bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 									style="height: 1.5rem;"
 								>
 									{#each timeRanges as range}
@@ -921,26 +1002,30 @@
 								</select>
 							</label>
 							{#if chartData.length > 1}
-								<label class="flex items-center gap-1 text-xs text-gray-700">
+								<label
+									class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-200"
+								>
 									Trendline N:
 									<input
 										type="number"
 										min="1"
 										max={chartData.length}
 										bind:value={trendN}
-										class="border rounded px-1 py-0 w-10 text-xs"
+										class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 w-10 text-xs bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 										style="height: 1.5rem;"
 									/>
 								</label>
 							{/if}
-							<label class="flex items-center gap-1 text-xs text-gray-700">
+							<label
+								class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-200"
+							>
 								Moving Avg N:
 								<input
 									type="number"
 									min="2"
 									max={chartData.length}
 									bind:value={movingAvgN}
-									class="border rounded px-1 py-0 w-10 text-xs"
+									class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 w-10 text-xs bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 									style="height: 1.5rem;"
 								/>
 							</label>
@@ -956,7 +1041,10 @@
 											class="w-3 h-3 rounded-full mr-2"
 											style="background-color: {metric.color}"
 										></div>
-										<span class="text-sm font-medium text-gray-700">{metric.label}</span>
+										<span
+											class="text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-200"
+											>{metric.label}</span
+										>
 									</div>
 									<div class="mt-1">
 										<span class="text-2xl font-bold" style="color: {metric.color}">
@@ -971,7 +1059,9 @@
 							{/each}
 						</div>
 					{:else}
-						<div class="text-center text-gray-400 text-sm py-4">
+						<div
+							class="text-center text-gray-400 dark:text-gray-500 text-sm py-4 transition-colors duration-200"
+						>
 							No trendline stats to display (trendStats is null or not enough data).
 						</div>
 					{/if}
@@ -979,7 +1069,7 @@
 						{#if containerReady}
 							<div
 								bind:this={chartContainer}
-								class="min-h-[180px] max-h-[220px] w-full box-border relative rounded-md bg-white m-1"
+								class="min-h-[220px] max-h-[280px] w-full box-border relative rounded-md bg-white dark:bg-gray-800 m-1 transition-colors duration-200"
 								style="contain: layout style;"
 							></div>
 						{/if}
@@ -1038,6 +1128,10 @@
 		background: white;
 		border-radius: 8px;
 		padding: 8px;
+		transition: background-color 0.2s ease;
+	}
+	:global(.dark .campaign-trend-chart) {
+		background: #1f2937 !important;
 	}
 	:global(.line-enhanced) {
 		stroke-width: 5 !important;
diff --git a/frontend/src/lib/components/CheckboxField.svelte b/frontend/src/lib/components/CheckboxField.svelte
index 9402070..4a610ed 100644
--- a/frontend/src/lib/components/CheckboxField.svelte
+++ b/frontend/src/lib/components/CheckboxField.svelte
@@ -46,7 +46,7 @@
 	class:items-center={inline}
 >
 	<div class="flex items-center">
-		<p class="font-semibold text-slate-600 py-2">
+		<p class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -55,8 +55,10 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+					optional
+				</p>
 			</div>
 		{/if}
 	</div>
@@ -71,12 +73,12 @@
 				on:change
 			/>
 			<div
-				class="w-5 h-5 border-2 border-slate-300 rounded
-                        peer-checked:border-cta-blue peer-checked:bg-cta-blue
+				class="w-5 h-5 border-2 border-slate-300 dark:border-gray-600 rounded
+                        peer-checked:border-cta-blue dark:peer-checked:border-blue-500 peer-checked:bg-cta-blue dark:peer-checked:bg-blue-500
                         transition-all duration-200 ease-in-out
                         flex items-center justify-center
-						bg-slate-50
-                        focus-within:ring-2 focus-within:ring-cta-blue focus-within:ring-offset-2"
+						bg-slate-50 dark:bg-gray-700
+                        focus-within:ring-2 focus-within:ring-cta-blue dark:focus-within:ring-blue-500 focus-within:ring-offset-2 dark:focus-within:ring-offset-gray-800"
 			>
 				{#if value}
 					<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/frontend/src/lib/components/ConfirmPrompt.svelte b/frontend/src/lib/components/ConfirmPrompt.svelte
index 49d3c95..40af440 100644
--- a/frontend/src/lib/components/ConfirmPrompt.svelte
+++ b/frontend/src/lib/components/ConfirmPrompt.svelte
@@ -160,7 +160,9 @@
 </script>
 
 {#if visible}
-	<div class="fixed top-0 left-0 w-full h-full bg-cta-blue opacity-20 blur-xl" />
+	<div
+		class="fixed top-0 left-0 w-full h-full bg-cta-blue dark:bg-gray-900 opacity-20 blur-xl transition-colors duration-200"
+	/>
 	<div
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
 		role="dialog"
@@ -170,23 +172,34 @@
 	>
 		<section
 			bind:this={confirmElement}
-			class="flex flex-col items-center w-1/3 bg-slate-100 shadow-xl rounded-md"
+			class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 shadow-xl dark:shadow-gray-900/70 rounded-md transition-colors duration-200"
 		>
-			<div class="bg-cta-orange2 text-white rounded-tl-md rounded-tr-md w-full">
+			<div
+				class="bg-cta-orange2 dark:bg-orange-600 text-white rounded-tl-md rounded-tr-md w-full transition-colors duration-200"
+			>
 				<p id="confirm-title" class="uppercase font-bold text-center py">Confirm action</p>
 			</div>
-			<h1 class="uppercase font-bold text-center text-gray-500 text-4xl pt-10">Are you sure?</h1>
-			<p id="confirm-description" class="text-center">{confirm_text}</p>
+			<h1
+				class="uppercase font-bold text-center text-gray-500 dark:text-gray-300 text-4xl pt-10 transition-colors duration-200"
+			>
+				Are you sure?
+			</h1>
+			<p
+				id="confirm-description"
+				class="text-center text-gray-700 dark:text-gray-200 transition-colors duration-200"
+			>
+				{confirm_text}
+			</p>
 			<div class="flex pt-4 pb-8">
 				<button
-					class="mt-6 bg-grayblue-dark w-40 py-2 mr-2 hover:bg-slate-300 text-white font-bold uppercase rounded-md"
+					class="mt-6 bg-grayblue-dark dark:bg-gray-600 w-40 py-2 mr-2 hover:bg-slate-300 dark:hover:bg-gray-500 text-white font-bold uppercase rounded-md transition-colors duration-200"
 					on:click={close}
 					aria-label="Cancel action"
 				>
 					no
 				</button>
 				<button
-					class="mt-6 bg-cta-blue w-56 py-2 hover:bg-blue-500 text-white font-bold uppercase rounded-md"
+					class="mt-6 bg-cta-blue dark:bg-blue-600 w-56 py-2 hover:bg-blue-500 dark:hover:bg-blue-700 text-white font-bold uppercase rounded-md transition-colors duration-200"
 					on:click={confirm}
 					aria-label="Confirm action"
 				>
diff --git a/frontend/src/lib/components/DateField.svelte b/frontend/src/lib/components/DateField.svelte
index 2510ba2..0fc0cc2 100644
--- a/frontend/src/lib/components/DateField.svelte
+++ b/frontend/src/lib/components/DateField.svelte
@@ -59,7 +59,9 @@
 		class:w-60={labelWidth === 'large'}
 	>
 		<div class="flex items-center">
-			<p class="font-semibold text-slate-600 py-2">
+			<p
+				class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200"
+			>
 				<slot />
 			</p>
 			{#if toolTipText.length > 0}
@@ -68,8 +70,12 @@
 				</ToolTip>
 			{/if}
 			{#if optional === true}
-				<div class="bg-gray-100 ml-2 px-2 rounded-md">
-					<p class="text-slate-600 text-xs">optional</p>
+				<div
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+				>
+					<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+						optional
+					</p>
 				</div>
 			{/if}
 		</div>
@@ -86,7 +92,7 @@
 		{required}
 		{disabled}
 		autocomplete="off"
-		class="rounded-md text-center py-2 pl-2 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+		class="rounded-md text-center py-2 pl-2 text-gray-600 dark:text-gray-200 border border-transparent dark:border-gray-600 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-blue-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 		class:text-left={textAlign == 'left'}
 		class:text-center={textAlign == 'center'}
 		class:text-right={textAlign == 'right'}
diff --git a/frontend/src/lib/components/DateTimeField.svelte b/frontend/src/lib/components/DateTimeField.svelte
index 896213b..4532aae 100644
--- a/frontend/src/lib/components/DateTimeField.svelte
+++ b/frontend/src/lib/components/DateTimeField.svelte
@@ -112,7 +112,7 @@
 	class:w-60={labelWidth === 'large'}
 >
 	<div class="flex items-center">
-		<p class="font-semibold text-slate-600 py-2">
+		<p class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -121,8 +121,8 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 			</div>
 		{/if}
 	</div>
@@ -139,7 +139,7 @@
 		{readonly}
 		{required}
 		autocomplete="off"
-		class="w-44 rounded-md py-2 pl-2 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+		class="w-44 rounded-md py-2 pl-2 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-gray-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 		class:opacity-90={readonly}
 	/>
 	<input
@@ -153,7 +153,8 @@
 		{readonly}
 		{required}
 		autocomplete="off"
-		class="ml-2 rounded-md py-2 pl-2 text-gray-600 text-center border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+		class="ml-2 rounded-md py-2 pl-2 text-gray-600 dark:text-gray-300 text-center border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-gray-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 		class:bg-yellow-200={readonly}
+		class:dark:bg-yellow-700={readonly}
 	/>
 </div>
diff --git a/frontend/src/lib/components/Datetime.svelte b/frontend/src/lib/components/Datetime.svelte
index d5ef0ba..072bfa0 100644
--- a/frontend/src/lib/components/Datetime.svelte
+++ b/frontend/src/lib/components/Datetime.svelte
@@ -14,7 +14,7 @@
 	}
 </script>
 
-<div>
+<div class="text-gray-900 dark:text-gray-100 transition-colors duration-200">
 	{#if date}
 		{#if !hideHours}
 			{date.toLocaleString()}
diff --git a/frontend/src/lib/components/DeveloperPanel.svelte b/frontend/src/lib/components/DeveloperPanel.svelte
index 66c93c9..43c1187 100644
--- a/frontend/src/lib/components/DeveloperPanel.svelte
+++ b/frontend/src/lib/components/DeveloperPanel.svelte
@@ -28,7 +28,7 @@
 	<div>
 		<div>
 			<button
-				class="fixed border-2 border-slate-500 bg-white w-8 h-8 left-2 pb-1 bottom-4 text-white rounded-full hover:right-3 hover:bottom-3 hover:w-10 hover:h-10 transition-all"
+				class="fixed border-2 border-slate-500 dark:border-slate-400 bg-white dark:bg-gray-700 w-8 h-8 left-2 pb-1 bottom-4 text-white rounded-full hover:right-3 hover:bottom-3 hover:w-10 hover:h-10 transition-all"
 				on:click={() => (visible = !visible)}
 			>
 				{#if visible}
@@ -41,46 +41,75 @@
 		{#if visible}
 			<div
 				transition:fade={{ duration: 100 }}
-				class="absolute right-0 h-auto bg-black text-white p-4 z-40"
+				class="absolute right-0 h-auto bg-black dark:bg-gray-900 text-white p-4 z-40 border border-gray-600 dark:border-gray-500"
 			>
 				<h1 class="text-xl m-4">Developer Panel</h1>
 				<h2 class="text-lg font-bold m-4">Links</h2>
 				<ul class="m-4">
 					<li>
-						<a href="http://localhost:8101" target="_blank">Database</a>
+						<a
+							href="http://localhost:8101"
+							target="_blank"
+							class="text-blue-400 hover:text-blue-300 underline">Database</a
+						>
 					</li>
 					<li>
-						<a href="http://localhost:8102" target="_blank">Mailbox</a>
+						<a
+							href="http://localhost:8102"
+							target="_blank"
+							class="text-blue-400 hover:text-blue-300 underline">Mailbox</a
+						>
 					</li>
 					<li>
-						<a href="http://localhost:8103" target="_blank">Container logs</a>
+						<a
+							href="http://localhost:8103"
+							target="_blank"
+							class="text-blue-400 hover:text-blue-300 underline">Container logs</a
+						>
 					</li>
 					<li>
-						<a href="http://localhost:8104" target="_blank">Container stats</a>
+						<a
+							href="http://localhost:8104"
+							target="_blank"
+							class="text-blue-400 hover:text-blue-300 underline">Container stats</a
+						>
 					</li>
 				</ul>
 				<h2 class="text-lg font-bold m-4">Toast</h2>
 				<ul class="m-4">
 					<li>
-						<button on:click={() => triggerToast('Success')}>Trigger toast - Success</button>
+						<button
+							on:click={() => triggerToast('Success')}
+							class="text-green-400 hover:text-green-300 underline">Trigger toast - Success</button
+						>
 					</li>
 					<li>
-						<button on:click={() => triggerToast('Info')}>Trigger toast - Info</button>
+						<button
+							on:click={() => triggerToast('Info')}
+							class="text-blue-400 hover:text-blue-300 underline">Trigger toast - Info</button
+						>
 					</li>
 					<li>
-						<button on:click={() => triggerToast('Warning')}>Trigger toast - Warning</button>
+						<button
+							on:click={() => triggerToast('Warning')}
+							class="text-yellow-400 hover:text-yellow-300 underline"
+							>Trigger toast - Warning</button
+						>
 					</li>
 					<li>
-						<button on:click={() => triggerToast('Error')}>Trigger toast - Error</button>
+						<button
+							on:click={() => triggerToast('Error')}
+							class="text-red-400 hover:text-red-300 underline">Trigger toast - Error</button
+						>
 					</li>
 				</ul>
 				<div class="pt-4">
 					<h2 class="text-lg font-bold">Global State</h2>
-					<table class="border-2">
+					<table class="border-2 border-gray-400 dark:border-gray-500">
 						{#each Object.entries(state) as [key, value]}
-							<tr class="flex flex-col border-2 border-white">
-								<td class="p-4 font-bold border-1 border-white">{key}</td>
-								<td class="p-4 border-1 border-white w-full">
+							<tr class="flex flex-col border-2 border-white dark:border-gray-600">
+								<td class="p-4 font-bold border-1 border-white dark:border-gray-600">{key}</td>
+								<td class="p-4 border-1 border-white dark:border-gray-600 w-full">
 									{#if typeof value === 'object'}
 										<pre class="whitespace-pre-wrap">{JSON.stringify(value, null, 2)}</pre>
 									{:else}
diff --git a/frontend/src/lib/components/EventTimeline.svelte b/frontend/src/lib/components/EventTimeline.svelte
index c1a948b..75ee367 100644
--- a/frontend/src/lib/components/EventTimeline.svelte
+++ b/frontend/src/lib/components/EventTimeline.svelte
@@ -70,7 +70,8 @@
 			.attr('y1', (height - margin.top - margin.bottom) / 2)
 			.attr('y2', (height - margin.top - margin.bottom) / 2)
 			.attr('stroke', '#E2E8F0')
-			.attr('stroke-width', 2);
+			.attr('stroke-width', 2)
+			.attr('class', 'timeline-line');
 
 		// X Axis
 		g.append('g')
@@ -340,7 +341,8 @@
 			.attr('y1', (height - margin.top - margin.bottom) / 2)
 			.attr('y2', (height - margin.top - margin.bottom) / 2)
 			.attr('stroke', '#E2E8F0')
-			.attr('stroke-width', 2);
+			.attr('stroke-width', 2)
+			.attr('class', 'timeline-line');
 
 		const ghostDots = 8;
 		const ghostDotsData = Array(ghostDots).fill(null);
@@ -355,6 +357,7 @@
 			.attr('r', 6)
 			.attr('fill', '#E2E8F0')
 			.attr('stroke', '#fff')
+			.attr('class', 'ghost-dot-fill')
 			.attr('stroke-width', 2);
 	}
 
@@ -378,10 +381,10 @@
 		try {
 			tooltip.innerHTML = `
 				<div class="p-2">
-					<div class="font-semibold text-lg text-gray-700 border-b-2">${toEvent(d.eventName).name}</div>
-					<div class="">${d.recipient?.email ?? ''}</div>
-					<div class="text-xs text-gray-600">${new Date(d.createdAt).toLocaleString()}</div>
-					${d.data ? `<div class="text-xs mt-1">${d.data}</div>` : ''}
+					<div class="font-semibold text-lg text-gray-700 dark:text-gray-200 border-b-2">${toEvent(d.eventName).name}</div>
+					<div class="text-gray-600 dark:text-gray-300">${d.recipient?.email ?? ''}</div>
+					<div class="text-xs text-gray-600 dark:text-gray-400">${new Date(d.createdAt).toLocaleString()}</div>
+					${d.data ? `<div class="text-xs mt-1 text-gray-500 dark:text-gray-400">${d.data}</div>` : ''}
 				</div>
 			`;
 		} catch (e) {
@@ -435,7 +438,10 @@
 	function getEventColor(eventName) {
 		if (!eventName) return '#6B7280'; // Default gray for undefined events
 
-		const colorMap = {
+		const isDark =
+			typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+
+		const lightModeColors = {
 			campaign_scheduled: '#4e68d8',
 			campaign_active: '#53afe3',
 			campaign_self_managed: '#303f9f',
@@ -443,7 +449,7 @@
 			campaign_recipient_scheduled: '#4e68d8',
 			campaign_recipient_message_sent: '#94cae6',
 			campaign_recipient_message_failed: '#f2bb58',
-			campaign_recipient_message_read: '#4cb5b5',
+			campaign_recipient_message_read: '#22c55e', // More muted green
 			campaign_recipient_before_page_visited: '#eea5fa',
 			campaign_recipient_page_visited: '#f96dcf',
 			campaign_recipient_after_page_visited: '#f6287b',
@@ -451,6 +457,25 @@
 			campaign_recipient_cancelled: '#161692',
 			default: '#6B7280'
 		};
+
+		const darkModeColors = {
+			campaign_scheduled: '#60a5fa',
+			campaign_active: '#38bdf8',
+			campaign_self_managed: '#6366f1',
+			campaign_closed: '#a1a1aa',
+			campaign_recipient_scheduled: '#60a5fa',
+			campaign_recipient_message_sent: '#7dd3fc',
+			campaign_recipient_message_failed: '#fbbf24',
+			campaign_recipient_message_read: '#4ade80', // Softer green for dark mode
+			campaign_recipient_before_page_visited: '#d8b4fe',
+			campaign_recipient_page_visited: '#f472b6',
+			campaign_recipient_after_page_visited: '#fb7185',
+			campaign_recipient_submitted_data: '#f87171',
+			campaign_recipient_cancelled: '#3730a3',
+			default: '#9ca3af'
+		};
+
+		const colorMap = isDark ? darkModeColors : lightModeColors;
 		return colorMap[eventName] || colorMap.default;
 	}
 
@@ -465,11 +490,11 @@
 			bind:this={svg}
 			width="100%"
 			height={height + 20}
-			class="bg-white rounded-lg shadow-sm p-2"
+			class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-2 transition-colors duration-200"
 		/>
 		<div
 			bind:this={tooltip}
-			class="absolute hidden bg-white shadow-lg rounded-lg border border-gray-200 z-10 pointer-events-none"
+			class="absolute hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg border border-gray-200 dark:border-gray-600 z-10 pointer-events-none transition-colors duration-200"
 		/>
 		{#if !isGhost}
 			<div class="absolute top-2 right-2 flex gap-2">
@@ -478,23 +503,23 @@
 						use24Hour = !use24Hour;
 						updateTimeline();
 					}}
-					class="px-2 py-1 text-xs bg-white border border-slate-200 rounded shadow-sm hover:bg-slate-50 text-slate-600"
+					class="px-2 py-1 text-xs bg-white dark:bg-gray-700 border border-slate-200 dark:border-gray-600 rounded shadow-sm hover:bg-slate-50 dark:hover:bg-gray-600 text-slate-600 dark:text-gray-300 transition-colors duration-200"
 				>
 					{use24Hour ? '12h' : '24h'}
 				</button>
 				<button
 					on:click={resetZoom}
-					class="px-2 py-1 text-xs bg-white border border-slate-200 rounded shadow-sm hover:bg-slate-50 text-slate-600"
+					class="px-2 py-1 text-xs bg-white dark:bg-gray-700 border border-slate-200 dark:border-gray-600 rounded shadow-sm hover:bg-slate-50 dark:hover:bg-gray-600 text-slate-600 dark:text-gray-300 transition-colors duration-200"
 				>
 					Reset View
 				</button>
 			</div>
 			<div
-				class="absolute top-0 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded-b-lg shadow-sm border border-t-0 text-sm font-medium text-slate-700"
+				class="absolute top-0 left-1/2 transform -translate-x-1/2 bg-white dark:bg-gray-800 px-3 py-1 rounded-b-lg shadow-sm border border-t-0 border-gray-200 dark:border-gray-600 text-sm font-medium text-slate-700 dark:text-gray-200 transition-colors duration-200"
 			>
 				{currentCenterDate}
 			</div>
-			<div class="absolute bottom-0 right-0 p-2 text-xs text-slate-500">
+			<div class="absolute bottom-0 right-0 p-2 text-xs text-slate-500 dark:text-gray-400">
 				Drag to pan • Scroll to zoom
 			</div>
 		{/if}
@@ -507,12 +532,45 @@
 		font-weight: 500;
 		fill: #4a5568;
 	}
+
+	:global(.dark .x-axis text) {
+		fill: #d1d5db;
+	}
+
 	:global(.x-axis line) {
 		stroke: #e2e8f0;
 	}
+
+	:global(.dark .x-axis line) {
+		stroke: #4b5563;
+	}
+
 	:global(.x-axis path) {
 		stroke: #e2e8f0;
 	}
+
+	:global(.dark .x-axis path) {
+		stroke: #4b5563;
+	}
+
+	:global(.timeline-line) {
+		stroke: #e2e8f0;
+	}
+
+	:global(.dark .timeline-line) {
+		stroke: #4b5563;
+	}
+
+	:global(.ghost-dot-fill) {
+		fill: #e2e8f0;
+		stroke: #fff;
+	}
+
+	:global(.dark .ghost-dot-fill) {
+		fill: #4b5563;
+		stroke: #1f2937;
+	}
+
 	:global(.ghost-dot) {
 		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
diff --git a/frontend/src/lib/components/FileField.svelte b/frontend/src/lib/components/FileField.svelte
index 368979f..ec101f7 100644
--- a/frontend/src/lib/components/FileField.svelte
+++ b/frontend/src/lib/components/FileField.svelte
@@ -43,7 +43,7 @@
 
 <label class="flex flex-col py-2 w-56">
 	<div class="flex items-center">
-		<p class="font-semibold text-slate-600 py-2">
+		<p class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -52,8 +52,8 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 			</div>
 		{/if}
 	</div>
@@ -68,6 +68,6 @@
 		{multiple}
 		{required}
 		{placeholder}
-		class="border-solid border-2 py-2 px-2 rounded-md file:px-4 file:py-2 file:text-white file:cursor-pointer file:text-sm file:font-semibold bg-white file:bg-cta-green hover:cursor-pointer file:hover:bg-teal-300 file:border-hidden file:rounded-md"
+		class="border-solid border-2 border-gray-300 dark:border-gray-600 py-2 px-2 rounded-md file:px-4 file:py-2 file:text-white file:cursor-pointer file:text-sm file:font-semibold bg-white dark:bg-gray-700 file:bg-cta-blue hover:cursor-pointer file:hover:bg-blue-600 dark:file:bg-indigo-600 dark:file:hover:bg-indigo-700 file:border-hidden file:rounded-md text-gray-900 dark:text-white transition-colors duration-200"
 	/>
 </label>
diff --git a/frontend/src/lib/components/Form.svelte b/frontend/src/lib/components/Form.svelte
index fd59a8f..c851a1b 100644
--- a/frontend/src/lib/components/Form.svelte
+++ b/frontend/src/lib/components/Form.svelte
@@ -6,7 +6,7 @@
 
 <form
 	on:submit|preventDefault
-	class="flex w-60 flex-col"
+	class="flex w-60 flex-col bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 	class:h-full={fullHeight}
 	class:w-full={fullWidth}
 	bind:this={bindTo}
diff --git a/frontend/src/lib/components/FormButton.svelte b/frontend/src/lib/components/FormButton.svelte
index 3413c04..ac2f0c8 100644
--- a/frontend/src/lib/components/FormButton.svelte
+++ b/frontend/src/lib/components/FormButton.svelte
@@ -9,7 +9,7 @@
 	class:w-32={size === 'small'}
 	class:w-36={size === 'medium'}
 	class:w-60={size === 'large'}
-	class="bg-cta-blue px-2 py-2 self-end hover:bg-blue-500 text-white text-sm font-bold flex justify-center items-center uppercase rounded-md"
+	class="bg-cta-blue dark:bg-blue-600 px-2 py-2 self-end hover:bg-blue-500 dark:hover:bg-blue-700 text-white text-sm font-bold flex justify-center items-center uppercase rounded-md transition-colors duration-200 disabled:opacity-50 dark:disabled:opacity-60"
 	on:click
 >
 	{#if isSubmitting}
diff --git a/frontend/src/lib/components/FormColumn.svelte b/frontend/src/lib/components/FormColumn.svelte
index 41fe4d4..699832f 100644
--- a/frontend/src/lib/components/FormColumn.svelte
+++ b/frontend/src/lib/components/FormColumn.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="px-6 flex flex-col items-start sm:items-start md:items-start lg:items-start xl:items-start 2xl:items-start"
+	class="px-6 flex flex-col items-start sm:items-start md:items-start lg:items-start xl:items-start 2xl:items-start text-gray-900 dark:text-gray-100 transition-colors duration-200"
 	class:overflow-x-scroll={overflowX}
 >
 	<slot />
diff --git a/frontend/src/lib/components/FormColumns.svelte b/frontend/src/lib/components/FormColumns.svelte
index f87d660..578e777 100644
--- a/frontend/src/lib/components/FormColumns.svelte
+++ b/frontend/src/lib/components/FormColumns.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="scrollX col-start-1 col-span-3 row-start-1 row-span-5 py-8 flex-col flex sm:flex-col md:flex-col lg:flex-row justify-center"
+	class="scrollX col-start-1 col-span-3 row-start-1 row-span-5 py-8 flex-col flex sm:flex-col md:flex-col lg:flex-row justify-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 	{id}
 >
 	<slot />
diff --git a/frontend/src/lib/components/FormError.svelte b/frontend/src/lib/components/FormError.svelte
index 6a78dd6..46c81ee 100644
--- a/frontend/src/lib/components/FormError.svelte
+++ b/frontend/src/lib/components/FormError.svelte
@@ -7,7 +7,7 @@
 	<div class="flex col-span-12 justify-center p-4">
 		<div class="w-80 flex col-span-12 justify-center">
 			<div
-				class="flex items-center w-full bg-pleasant-gray rounded-md border text-center p-2 font-titilium"
+				class="flex items-center w-full bg-pleasant-gray dark:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 text-center p-2 font-titilium transition-colors duration-200"
 			>
 				<svg class="w-12 ml-4" transition:slide viewBox="0 0 32.94 32.94">
 					<circle
@@ -33,7 +33,7 @@
 						/>
 					</g>
 				</svg>
-				<p class="pl-4">
+				<p class="pl-4 text-gray-700 dark:text-gray-200 transition-colors duration-200">
 					{message}
 				</p>
 			</div>
diff --git a/frontend/src/lib/components/FormFlex.svelte b/frontend/src/lib/components/FormFlex.svelte
index 71dded4..c648db3 100644
--- a/frontend/src/lib/components/FormFlex.svelte
+++ b/frontend/src/lib/components/FormFlex.svelte
@@ -4,7 +4,7 @@
 
 <form
 	on:submit|preventDefault
-	class="col-start-1 col-span-3 row-start-1 row-span-5 py-8 flex-col flex sm:flex-col md:flex-col lg:flex-row justify-start"
+	class="col-start-1 col-span-3 row-start-1 row-span-5 py-8 flex-col flex sm:flex-col md:flex-col lg:flex-row justify-start bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 	bind:this={bindTo}
 >
 	<slot />
diff --git a/frontend/src/lib/components/FormFooter.svelte b/frontend/src/lib/components/FormFooter.svelte
index 099222b..285a84f 100644
--- a/frontend/src/lib/components/FormFooter.svelte
+++ b/frontend/src/lib/components/FormFooter.svelte
@@ -19,12 +19,12 @@
 </script>
 
 <div
-	class="py-4 row-span-2 col-start-1 col-span-3 border-t-2 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end"
+	class="py-4 row-span-2 col-start-1 col-span-3 border-t-2 border-gray-200 dark:border-gray-700 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 >
 	<button
 		type="reset"
 		on:click|preventDefault={onCloseModal}
-		class="bg-slate-400 hover:bg-slate-300 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md"
+		class="bg-slate-400 hover:bg-slate-300 dark:bg-slate-600 dark:hover:bg-slate-500 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md transition-colors duration-200"
 		>{closeText}</button
 	>
 	<FormButton {isSubmitting}>{okText}</FormButton>
diff --git a/frontend/src/lib/components/FormGrid.svelte b/frontend/src/lib/components/FormGrid.svelte
index 7f6abf6..939d98d 100644
--- a/frontend/src/lib/components/FormGrid.svelte
+++ b/frontend/src/lib/components/FormGrid.svelte
@@ -7,7 +7,7 @@
 <form
 	on:submit|preventDefault
 	inert={isSubmitting}
-	class="grid grid-cols-3 grid-rows-1 w-full h-full flex-col"
+	class="grid grid-cols-3 grid-rows-1 w-full h-full flex-col bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 	class:opacity-70={isSubmitting}
 	bind:this={bindTo}
 	{novalidate}
diff --git a/frontend/src/lib/components/GhostText.svelte b/frontend/src/lib/components/GhostText.svelte
index 6863ffa..3f681fd 100644
--- a/frontend/src/lib/components/GhostText.svelte
+++ b/frontend/src/lib/components/GhostText.svelte
@@ -4,18 +4,18 @@
 	const widths = ['w-16', 'w-20', 'w-24'];
 	let height = 'h-4';
 	let width = widths[Math.floor(Math.random() * widths.length)];
-	let gradient = 'from-gray-300 to-transparent bg-gradient-to-r';
+	let gradient = 'from-gray-300 dark:from-gray-600 to-transparent bg-gradient-to-r';
 	if (square) {
 		width = 'h-4';
 		height = 'w-4';
-		gradient = 'bg-gray-300';
+		gradient = 'bg-gray-300 dark:bg-gray-600';
 	}
 </script>
 
 {#if center}
 	<div class="flex items-center justify-center">
-		<div class="{width} {height} {gradient} ">&nbsp;</div>
+		<div class="{width} {height} {gradient} transition-colors duration-200">&nbsp;</div>
 	</div>
 {:else}
-	<div class="{width} {height} {gradient}">&nbsp;</div>
+	<div class="{width} {height} {gradient} transition-colors duration-200">&nbsp;</div>
 {/if}
diff --git a/frontend/src/lib/components/HeaderFirst.svelte b/frontend/src/lib/components/HeaderFirst.svelte
index 5abc0b4..cbbf3f4 100644
--- a/frontend/src/lib/components/HeaderFirst.svelte
+++ b/frontend/src/lib/components/HeaderFirst.svelte
@@ -1,3 +1,5 @@
-<div class="bg-gray-300 w-full h-1/10 flex justify-center">
-    <img alt="logo" src="/logo-white.svg" class="w-1/3 sm:w-1/4 lg:w-2/10 xl:w-1/10 2xl:w-1/10" />
-</div>
\ No newline at end of file
+<div
+	class="bg-gray-300 dark:bg-gray-700 w-full h-1/10 flex justify-center transition-colors duration-200"
+>
+	<img alt="logo" src="/logo-white.svg" class="w-1/3 sm:w-1/4 lg:w-2/10 xl:w-1/10 2xl:w-1/10" />
+</div>
diff --git a/frontend/src/lib/components/Headline.svelte b/frontend/src/lib/components/Headline.svelte
index 15f54ef..e659881 100644
--- a/frontend/src/lib/components/Headline.svelte
+++ b/frontend/src/lib/components/Headline.svelte
@@ -1,3 +1,5 @@
-<h1 class="text-3xl text-gray-600 font-bold uppercase">
+<h1
+	class="text-3xl text-gray-600 dark:text-gray-300 font-bold uppercase transition-colors duration-200"
+>
 	<slot />
 </h1>
diff --git a/frontend/src/lib/components/Hello.svelte b/frontend/src/lib/components/Hello.svelte
index 5d7a5c8..d1751db 100644
--- a/frontend/src/lib/components/Hello.svelte
+++ b/frontend/src/lib/components/Hello.svelte
@@ -1,8 +1,8 @@
 <script>
 	export let name = 'World';
-	console.log(name)
+	console.log(name);
 </script>
 
-<main>
+<main class="text-gray-900 dark:text-gray-100 transition-colors duration-200">
 	Hello {name}!
 </main>
diff --git a/frontend/src/lib/components/Input.svelte b/frontend/src/lib/components/Input.svelte
index 586cd82..19035d4 100644
--- a/frontend/src/lib/components/Input.svelte
+++ b/frontend/src/lib/components/Input.svelte
@@ -10,7 +10,9 @@
 </script>
 
 <div class="flex flex-col w-full p-4 h-24">
-	<label for={fieldName} class="text-md font-semibold font-titilium text-pc-darkblue"
+	<label
+		for={fieldName}
+		class="text-md font-semibold font-titilium text-pc-darkblue dark:text-gray-200"
 		>{fieldName}</label
 	>
 	<input
@@ -32,6 +34,6 @@
 		{type}
 		id={fieldName}
 		name={fieldName}
-		class="w-full p-2 rounded bg-pc-lightblue focus:outline-none focus:ring-0 focus:border-cta-blue focus:border-2"
+		class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-blue-500 focus:border-2 transition-colors duration-200"
 	/>
 </div>
diff --git a/frontend/src/lib/components/Loader.svelte b/frontend/src/lib/components/Loader.svelte
index cbc4de0..e3b0c81 100644
--- a/frontend/src/lib/components/Loader.svelte
+++ b/frontend/src/lib/components/Loader.svelte
@@ -15,13 +15,16 @@
 </script>
 
 {#if $isLoading && isAnimating}
-	<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" transition:blur={{ duration }} />
+	<div
+		class="fixed top-0 left-0 w-full h-full bg-black dark:bg-gray-900 opacity-[0.5] transition-colors duration-200"
+		transition:blur={{ duration }}
+	/>
 	<div
 		transition:blur={{ duration }}
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-50"
 	>
 		<div
-			class="w-20 h-20 border-t-8 border-t-cta-blue border-r-8 border-r-cta-blue border-b-cta-blue border-b-8 border-l-transparent border-l-8 rounded-full animate-spin"
+			class="w-20 h-20 border-t-8 border-t-cta-blue dark:border-t-blue-500 border-r-8 border-r-cta-blue dark:border-r-blue-500 border-b-cta-blue dark:border-b-blue-500 border-b-8 border-l-transparent border-l-8 rounded-full animate-spin transition-colors duration-200"
 		></div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 83c7ea7..705198c 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -240,7 +240,9 @@
 
 {#if visible}
 	<div bind:this={bindTo}>
-		<div class="fixed top-0 left-0 w-full h-full bg-cta-blue opacity-20 blur-xl" />
+		<div
+			class="fixed top-0 left-0 w-full h-full bg-cta-blue dark:bg-gray-900 opacity-20 blur-xl transition-colors duration-200"
+		/>
 		<div
 			class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
 			role="dialog"
@@ -250,11 +252,11 @@
 		>
 			<section
 				bind:this={modalElement}
-				class="shadow-xl w-auto ml-20 mr-8 max-h-[90vh] bg-white opacity-100 rounded-md flex flex-col"
+				class="shadow-xl dark:shadow-gray-900/70 w-auto ml-20 mr-8 max-h-[90vh] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
 			>
 				<div
 					class:opacity-20={isSubmitting}
-					class="bg-cta-blue text-white rounded-t-md py-4 px-8 flex justify-between flex-shrink-0"
+					class="bg-cta-blue dark:bg-blue-700 text-white rounded-t-md py-4 px-8 flex justify-between flex-shrink-0 transition-colors duration-200"
 				>
 					<div class="flex-1">
 						<h1 id="modal-title" class="uppercase mr-8 font-semibold text-2xl">{headerText}</h1>
diff --git a/frontend/src/lib/components/Pagination.svelte b/frontend/src/lib/components/Pagination.svelte
index 76b6227..57fb8a2 100644
--- a/frontend/src/lib/components/Pagination.svelte
+++ b/frontend/src/lib/components/Pagination.svelte
@@ -43,12 +43,16 @@
 
 <div class="flex items-center mb-8 mt-4">
 	<button
-		class="bg-highlight-blue w-8 text-white hover:bg-active-blue m-1 rounded-md py-1 px-1"
+		class="bg-highlight-blue dark:bg-blue-600 w-8 text-white hover:bg-active-blue dark:hover:bg-blue-700 m-1 rounded-md py-1 px-1 transition-colors duration-200"
 		on:click|preventDefault={previousPage}>&lt;&lt;</button
 	>
-	<div class="w-8 text-center bg-grayblue-light rounded-md py-1 px-1">{currentPage}</div>
+	<div
+		class="w-8 text-center bg-grayblue-light dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md py-1 px-1 transition-colors duration-200"
+	>
+		{currentPage}
+	</div>
 	<button
-		class="bg-highlight-blue w-8 text-white hover:bg-active-blue m-1 rounded-md py-1 px-1"
+		class="bg-highlight-blue dark:bg-blue-600 w-8 text-white hover:bg-active-blue dark:hover:bg-blue-700 m-1 rounded-md py-1 px-1 transition-colors duration-200"
 		on:click|preventDefault={nextPage}>&gt;&gt;</button
 	>
 </div>
diff --git a/frontend/src/lib/components/PasswordField.svelte b/frontend/src/lib/components/PasswordField.svelte
index 41ae191..b72f991 100644
--- a/frontend/src/lib/components/PasswordField.svelte
+++ b/frontend/src/lib/components/PasswordField.svelte
@@ -59,7 +59,7 @@
 
 <label class="flex flex-col py-2 w-60">
 	<div class="flex items-center">
-		<p class="font-semibold text-slate-600 py-2">
+		<p class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -68,8 +68,10 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+					optional
+				</p>
 			</div>
 		{/if}
 	</div>
@@ -86,7 +88,7 @@
 				minlength={minLength}
 				maxlength={maxLength}
 				{required}
-				class="text-ellipsis w-60 rounded-md py-2 pl-4 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+				class="text-ellipsis w-60 rounded-md py-2 pl-4 pr-12 text-gray-600 dark:text-gray-200 border border-transparent dark:border-gray-600 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-blue-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 			/>
 		{:else}
 			<input
@@ -100,18 +102,26 @@
 				{placeholder}
 				autocomplete="off"
 				{required}
-				class="text-ellipsis w-60 rounded-md py-2 pl-4 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+				class="text-ellipsis w-60 rounded-md py-2 pl-4 pr-12 text-gray-600 dark:text-gray-200 border border-transparent dark:border-gray-600 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-blue-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 			/>
 		{/if}
 		<button
-			class="absolute w-8 mr-2 hover:opacity-70"
+			class="absolute w-8 mr-2 hover:opacity-70 transition-opacity duration-200"
 			on:click={handleClick}
 			on:keyup={handleClick}
 		>
 			{#if viewPassword}
-				<img src="/view.svg" alt="view" />
+				<img
+					src="/view.svg"
+					alt="view"
+					class="dark:filter dark:brightness-0 dark:invert transition-all duration-200"
+				/>
 			{:else}
-				<img src="/toggle-view.svg" alt="toggle view" />
+				<img
+					src="/toggle-view.svg"
+					alt="toggle view"
+					class="dark:filter dark:brightness-0 dark:invert transition-all duration-200"
+				/>
 			{/if}
 		</button>
 	</div>
diff --git a/frontend/src/lib/components/RelativeTime.svelte b/frontend/src/lib/components/RelativeTime.svelte
index 031a778..2cf1b9b 100644
--- a/frontend/src/lib/components/RelativeTime.svelte
+++ b/frontend/src/lib/components/RelativeTime.svelte
@@ -88,6 +88,7 @@
 		: value instanceof Date
 			? value.toLocaleString()
 			: ''}
+	class="text-gray-600 dark:text-gray-400 transition-colors duration-200"
 >
 	{formattedTime}
 </span>
diff --git a/frontend/src/lib/components/RootLoader.svelte b/frontend/src/lib/components/RootLoader.svelte
index 1627865..434a95c 100644
--- a/frontend/src/lib/components/RootLoader.svelte
+++ b/frontend/src/lib/components/RootLoader.svelte
@@ -30,4 +30,6 @@
 	});
 </script>
 
-<div class="w-full h-full flex border-4 border-pc-darkblue animate-pulse"></div>
+<div
+	class="w-full h-full flex border-4 border-pc-darkblue dark:border-gray-600 animate-pulse transition-colors duration-200"
+></div>
diff --git a/frontend/src/lib/components/Search.svelte b/frontend/src/lib/components/Search.svelte
index 0cad41a..e06e7c5 100644
--- a/frontend/src/lib/components/Search.svelte
+++ b/frontend/src/lib/components/Search.svelte
@@ -39,7 +39,7 @@
 				setSearch();
 			}
 		}}
-		class="bg-grayblue-light w-56 border text-gray-600 border-gray-300 pl-8 py-2 relative rounded-lg focus:outline-none focus:ring-0 focus:border-cta-blue focus:border"
+		class="bg-grayblue-light dark:bg-gray-700 w-56 border text-gray-600 dark:text-gray-200 border-gray-300 dark:border-gray-600 pl-8 py-2 relative rounded-lg focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-blue-500 focus:border transition-colors duration-200 dark:placeholder-gray-400"
 		placeholder="Search"
 	/>
 </div>
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
index e241045..ede8d57 100644
--- a/frontend/src/lib/components/Select.svelte
+++ b/frontend/src/lib/components/Select.svelte
@@ -21,10 +21,12 @@
 	});
 </script>
 
-<div >
-	<label for="pet-select">Show:</label>
+<div>
+	<label for="pet-select" class="text-gray-600 dark:text-gray-300 transition-colors duration-200"
+		>Show:</label
+	>
 	<select
-		class="bg-grayblue-light px-2 py-1 rounded-md text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 focus:bg-gray-100"
+		class="bg-grayblue-light dark:bg-gray-700 px-2 py-1 rounded-md text-gray-600 dark:text-gray-200 border border-transparent dark:border-gray-600 focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-blue-500 focus:bg-gray-100 dark:focus:bg-gray-600 transition-colors duration-200"
 		name="entries"
 		id="entries"
 		bind:value
diff --git a/frontend/src/lib/components/SelectSquare.svelte b/frontend/src/lib/components/SelectSquare.svelte
index d662f97..d08bb75 100644
--- a/frontend/src/lib/components/SelectSquare.svelte
+++ b/frontend/src/lib/components/SelectSquare.svelte
@@ -15,15 +15,19 @@
 <div class="flex flex-col gap-2 py-2">
 	{#if label}
 		<div class="flex flex-row">
-			<div class="font-semibold text-slate-600">{label}</div>
+			<div class="font-semibold text-slate-600 dark:text-gray-300 transition-colors duration-200">
+				{label}
+			</div>
 			{#if toolTipText.length > 0}
 				<ToolTip>
 					{toolTipText}
 				</ToolTip>
 			{/if}
 			{#if optional}
-				<div class="bg-gray-100 ml-2 px-2 rounded-md">
-					<p class="text-slate-600 text-xs">optional</p>
+				<div
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+				>
+					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -42,11 +46,11 @@
           p-3 rounded-lg border-2 transition-all duration-200
           flex flex-col items-center justify-center text-center
           w-40
-          hover:border-blue-300 hover:bg-blue-50
+          hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30
           ${
 						value === option.value
-							? 'border-green-500 bg-green-50 text-green-700 '
-							: 'border-gray-200 bg-white text-gray-700 '
+							? 'border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300'
+							: 'border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200'
 					}
         `}
 				on:click={() => {
@@ -59,7 +63,9 @@
 				{/if}
 				<span class="font-medium text-sm">{option.label}</span>
 				{#if option.description}
-					<span class="text-xs text-gray-500 mt-1">{option.description}</span>
+					<span class="text-xs text-gray-500 dark:text-gray-400 mt-1 transition-colors duration-200"
+						>{option.description}</span
+					>
 				{/if}
 			</button>
 		{/each}
diff --git a/frontend/src/lib/components/StatsCard.svelte b/frontend/src/lib/components/StatsCard.svelte
index 8fad740..8a287a6 100644
--- a/frontend/src/lib/components/StatsCard.svelte
+++ b/frontend/src/lib/components/StatsCard.svelte
@@ -43,12 +43,20 @@
 </script>
 
 <div
-	class="bg-white p-6 rounded-lg shadow-md border-l-[12px] {borderColor} hover:shadow-lg transition-shadow"
+	class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md dark:shadow-gray-900/50 border-l-[12px] {borderColor} hover:shadow-lg dark:hover:shadow-gray-900/70 transition-all duration-200"
 >
-	<div class="text-grayblue-dark text-sm font-semibold">{title}</div>
+	<div
+		class="text-grayblue-dark dark:text-gray-400 text-sm font-semibold transition-colors duration-200"
+	>
+		{title}
+	</div>
 	<div class="flex items-center justify-between">
 		<div class="flex items-center">
-			<span class="text-3xl font-bold text-pc-darkblue {flash ? 'flash' : ''}">
+			<span
+				class="text-3xl font-bold text-pc-darkblue dark:text-gray-100 transition-colors duration-200 {flash
+					? 'flash'
+					: ''}"
+			>
 				{Math.floor($displayValue)}
 			</span>
 			<div class="ml-2">
@@ -74,12 +82,14 @@
 
 	{#if validPercentages.length > 0}
 		<button
-			class="mt-2 text-sm text-gray-600 flex items-center"
+			class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center transition-colors duration-200"
 			on:click={cyclePercentage}
 			class:cursor-pointer={validPercentages.length > 1}
 		>
 			<div class="flex items-center">
-				<span class="text-pc-darkblue font-semibold">
+				<span
+					class="text-pc-darkblue dark:text-gray-200 font-semibold transition-colors duration-200"
+				>
 					{validPercentages[currentPercentageIndex].value}%
 				</span>
 				<span class="ml-1">
@@ -89,7 +99,7 @@
 			{#if validPercentages.length > 1}
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4 ml-1 text-gray-400"
+					class="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500 transition-colors duration-200"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
diff --git a/frontend/src/lib/components/SubHeadline.svelte b/frontend/src/lib/components/SubHeadline.svelte
index a65b988..4f47bff 100644
--- a/frontend/src/lib/components/SubHeadline.svelte
+++ b/frontend/src/lib/components/SubHeadline.svelte
@@ -1,3 +1,5 @@
-<h2 class="text-lg text-gray-600 font-bold uppercase">
+<h2
+	class="text-lg text-gray-600 dark:text-gray-300 font-bold uppercase transition-colors duration-200"
+>
 	<slot />
 </h2>
diff --git a/frontend/src/lib/components/TestLabel.svelte b/frontend/src/lib/components/TestLabel.svelte
index 48a66b7..b3afe78 100644
--- a/frontend/src/lib/components/TestLabel.svelte
+++ b/frontend/src/lib/components/TestLabel.svelte
@@ -1,3 +1,6 @@
-<span title="Test / Preview" class="select-none px-1 border-2 relative -top-1 rounded-lg text-xs">
+<span
+	title="Test / Preview"
+	class="select-none px-1 border-2 border-gray-400 dark:border-gray-500 relative -top-1 rounded-lg text-xs text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 transition-colors duration-200"
+>
 	test
 </span>
diff --git a/frontend/src/lib/components/TextField.svelte b/frontend/src/lib/components/TextField.svelte
index 1f4b37e..bbc674e 100644
--- a/frontend/src/lib/components/TextField.svelte
+++ b/frontend/src/lib/components/TextField.svelte
@@ -59,7 +59,7 @@
 
 <label class="flex flex-col py-2">
 	<div class="flex items-center">
-		<p class="font-semibold text-slate-600 py-2">
+		<p class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -68,8 +68,10 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+					optional
+				</p>
 			</div>
 		{/if}
 	</div>
@@ -93,7 +95,7 @@
 		{required}
 		{placeholder}
 		{pattern}
-		class="text-ellipsis row-start-1 row-span-3 justify-self-center rounded-md py-2 pl-2 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal"
+		class="text-ellipsis row-start-1 row-span-3 justify-self-center rounded-md py-2 pl-2 text-gray-600 dark:text-gray-200 border border-transparent dark:border-gray-600 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-blue-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal transition-colors duration-200"
 		class:w-24={width === 'small'}
 		class:w-60={width === 'medium'}
 		class:w-95={width === 'large'}
diff --git a/frontend/src/lib/components/TextFieldMultiSelect.svelte b/frontend/src/lib/components/TextFieldMultiSelect.svelte
index 60b7ce6..520eb28 100644
--- a/frontend/src/lib/components/TextFieldMultiSelect.svelte
+++ b/frontend/src/lib/components/TextFieldMultiSelect.svelte
@@ -117,7 +117,9 @@
 <div class="flex flex-col justify-start">
 	<label class="flex flex-col py-2 relative">
 		<div class="flex items-center">
-			<p class="font-semibold text-slate-600 py-2">
+			<p
+				class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200"
+			>
 				<slot />
 			</p>
 			{#if toolTipText.length > 0}
@@ -126,8 +128,10 @@
 				</ToolTip>
 			{/if}
 			{#if optional === true}
-				<div class="bg-gray-100 ml-2 px-2 rounded-md">
-					<p class="text-slate-600 text-xs">optional</p>
+				<div
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+				>
+					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -151,7 +155,7 @@
 				{id}
 				required={required && !value.length}
 				autocomplete="off"
-				class="w-full relative rounded-md py-2 pl-4 focus:pl-10 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal cursor-pointer focus:cursor-text"
+				class="w-full relative rounded-md py-2 pl-4 focus:pl-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-gray-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
 			/>
 			{#if showSelection}
 				<img
@@ -165,13 +169,13 @@
 		{#if showSelection}
 			<div class="w-60 absolute top-10 z-50">
 				<ul
-					class="bg-gray-100 list-none mt-4 rounded-md min-w-fit shadow-md border max-h-40 overflow-y-scroll"
+					class="bg-gray-100 dark:bg-gray-700 list-none mt-4 rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-600 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#if options.length}
 						{#each filteredOptions as option}
 							<li>
 								<button
-									class="w-full text-left bg-slate-100 rounded-md text-gray-600 hover:bg-grayblue-dark hover:text-white py-2 px-2 cursor-pointer"
+									class="w-full text-left bg-slate-100 dark:bg-gray-600 rounded-md text-gray-600 dark:text-gray-200 hover:bg-grayblue-dark dark:hover:bg-gray-500 hover:text-white py-2 px-2 cursor-pointer transition-colors duration-200"
 									on:click={() => {
 										onClickSelectedOption(option);
 									}}
@@ -181,7 +185,11 @@
 							</li>
 						{/each}
 					{:else}
-						<li class="w-full bg-slate-100 rounded-md text-gray-600 py-2 px-2">List is empty</li>
+						<li
+							class="w-full bg-slate-100 dark:bg-gray-600 rounded-md text-gray-600 dark:text-gray-300 py-2 px-2 transition-colors duration-200"
+						>
+							List is empty
+						</li>
 					{/if}
 				</ul>
 			</div>
@@ -192,7 +200,7 @@
 					on:click|preventDefault={removeSelection}
 					on:keypress|preventDefault={removeSelection}
 					data-value={option}
-					class="flex flex-row items-center bg-gray-100 hover:bg-gray-200 px-2 py-2 mt-2 mr-2 rounded-md"
+					class="flex flex-row items-center bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-2 py-2 mt-2 mr-2 rounded-md text-gray-900 dark:text-gray-100 transition-colors duration-200"
 				>
 					{option}
 					<img class="w-4 ml-2 pointer-events-none" src="/delete2.svg" alt="delete" />
diff --git a/frontend/src/lib/components/TextFieldSearchSelect.svelte b/frontend/src/lib/components/TextFieldSearchSelect.svelte
index 783b2d7..fa383cf 100644
--- a/frontend/src/lib/components/TextFieldSearchSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSearchSelect.svelte
@@ -71,7 +71,9 @@
 <div class="flex flex-col justify-start">
 	<label class="flex flex-col py-2 relative">
 		<div class="flex items-center">
-			<p class="font-semibold text-slate-600 py-2">
+			<p
+				class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200"
+			>
 				<slot />
 			</p>
 			{#if toolTipText.length > 0}
@@ -97,7 +99,7 @@
 				on:keyup={_onKeyUp}
 				on:click|stopPropagation={() => {}}
 				autocomplete="off"
-				class="w-full relative rounded-md py-2 pl-4 focus:pl-10 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal cursor-pointer focus:cursor-text"
+				class="w-full relative rounded-md py-2 pl-4 focus:pl-10 text-gray-600 dark:text-gray-100 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-gray-500 focus:bg-gray-100 dark:focus:bg-gray-700 bg-grayblue-light dark:bg-gray-600 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
 				{id}
 				{required}
 			/>
@@ -109,12 +111,12 @@
 		{#if options.length && showSelection}
 			<div class="w-96 absolute top-10 z-50">
 				<ul
-					class="bg-gray-100 list-none mt-4 rounded-md min-w-fit shadow-md border max-h-40 overflow-y-scroll"
+					class="bg-gray-100 dark:bg-gray-700 list-none mt-4 rounded-md min-w-fit shadow-md dark:shadow-gray-900/50 border border-gray-200 dark:border-gray-600 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#each options as option}
 						<li class="break-words">
 							<button
-								class="w-full text-left bg-slate-100 rounded-md text-gray-600 hover:bg-grayblue-dark hover:text-white py-2 px-2 cursor-pointer"
+								class="w-full text-left bg-slate-100 dark:bg-gray-700 rounded-md text-gray-600 dark:text-gray-200 hover:bg-grayblue-dark dark:hover:bg-gray-600 hover:text-white py-2 px-2 cursor-pointer transition-colors duration-200"
 								on:click|preventDefault={() => {
 									value = '';
 									showSelection = false;
diff --git a/frontend/src/lib/components/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index cb566b0..8f236fa 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -223,7 +223,10 @@
 >
 	<label class="flex flex-col py-2 relative" class:py-2={!inline} class:pr-2={inline}>
 		<div class="flex items-center">
-			<p id={labelId} class="font-semibold text-slate-600 py-1">
+			<p
+				id={labelId}
+				class="font-semibold text-slate-600 dark:text-gray-300 py-1 transition-colors duration-200"
+			>
 				<slot />
 			</p>
 			{#if toolTipText.length > 0}
@@ -232,8 +235,10 @@
 				</ToolTip>
 			{/if}
 			{#if optional === true}
-				<div class="bg-gray-100 ml-2 px-2 rounded-md">
-					<p class="text-slate-600 text-xs">optional</p>
+				<div
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+				>
+					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -261,7 +266,7 @@
 				on:keydown={handleKeyDown}
 				on:click={handleFocus}
 				autocomplete="off"
-				class="w-full relative rounded-md py-2 pr-10 text-gray-600 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 focus:bg-gray-100 bg-grayblue-light font-normal cursor-pointer focus:cursor-text"
+				class="w-full relative rounded-md py-2 pr-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-gray-500 focus:bg-gray-100 dark:focus:bg-gray-600 bg-grayblue-light dark:bg-gray-700 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
 				class:pl-10={showDropdown}
 				class:pl-4={!showDropdown}
 				class:text-gray-400={!hasValue && !showDropdown}
@@ -314,7 +319,7 @@
 					id={listboxId}
 					role="listbox"
 					aria-labelledby={labelId}
-					class="bg-gray-100 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border max-h-40 overflow-y-scroll"
+					class="bg-gray-100 dark:bg-gray-700 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-600 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#if allOptions.length}
 						{#each allOptions as option, index}
@@ -323,7 +328,7 @@
 									id="{listboxId}-option-{index}"
 									role="option"
 									aria-selected={value === option}
-									class="w-full text-left bg-slate-100 rounded-md text-gray-600 hover:bg-grayblue-dark hover:text-white py-2 px-2 cursor-pointer focus:bg-grayblue-dark focus:text-white focus:outline-none"
+									class="w-full text-left bg-slate-100 dark:bg-gray-600 rounded-md text-gray-600 dark:text-gray-200 hover:bg-grayblue-dark dark:hover:bg-gray-500 hover:text-white py-2 px-2 cursor-pointer focus:bg-grayblue-dark dark:focus:bg-gray-500 focus:text-white focus:outline-none transition-colors duration-200"
 									on:click={(e) => {
 										e.preventDefault();
 										e.stopPropagation();
@@ -337,7 +342,10 @@
 							</li>
 						{/each}
 					{:else}
-						<li role="none" class="w-full bg-slate-100 rounded-md text-gray-600 py-2 px-2">
+						<li
+							role="none"
+							class="w-full bg-slate-100 dark:bg-gray-600 rounded-md text-gray-600 dark:text-gray-300 py-2 px-2 transition-colors duration-200"
+						>
 							No options available
 						</li>
 					{/if}
diff --git a/frontend/src/lib/components/TextareaField.svelte b/frontend/src/lib/components/TextareaField.svelte
index cc03647..fd1e122 100644
--- a/frontend/src/lib/components/TextareaField.svelte
+++ b/frontend/src/lib/components/TextareaField.svelte
@@ -52,7 +52,7 @@
 
 <label class="flex flex-col py-2 w-60" class:w-full={fullWidth}>
 	<div class="flex items-center">
-		<p class="font-bold text-slate-600 py-2">
+		<p class="font-bold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -61,8 +61,10 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 ml-2 px-2 rounded-md">
-				<p class="text-slate-600 text-xs">optional</p>
+			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+					optional
+				</p>
 			</div>
 		{/if}
 	</div>
@@ -76,7 +78,7 @@
 		maxlength={maxLength}
 		{readonly}
 		{placeholder}
-		class=" focus:outline-none pl-2 border border-transparent rounded-md focus:border-solid text-gray-600 focus:bg-gray-100 font-light focus:border-slate-400 bg-grayblue-light"
+		class=" focus:outline-none pl-2 border border-transparent dark:border-gray-600 rounded-md focus:border-solid text-gray-600 dark:text-gray-200 focus:bg-gray-100 dark:focus:bg-gray-600 font-light focus:border-slate-400 dark:focus:border-blue-500 bg-grayblue-light dark:bg-gray-700 transition-colors duration-200"
 		class:h-16={height === 'small'}
 		class:h-28={height === 'medium'}
 		class:h-48={height === 'large'}
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
new file mode 100644
index 0000000..9253c2a
--- /dev/null
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { theme, toggleMode, modeLight, modeDark } from '$lib/theme.js';
+
+	// reactive statement to determine current theme
+	$: isDark = $theme === modeDark;
+
+	const handleToggle = () => {
+		toggleMode();
+	};
+</script>
+
+<button
+	on:click={handleToggle}
+	class="relative inline-flex items-center justify-center w-6 h-6 rounded transition-colors duration-200 focus:outline-none"
+	title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+	aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+>
+	<!-- sun icon for light mode -->
+	<svg
+		class="w-4 h-4 text-yellow-400 transition-all duration-200 {isDark
+			? 'opacity-0 rotate-90 scale-0'
+			: 'opacity-100 rotate-0 scale-100'} absolute"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+			clip-rule="evenodd"
+		/>
+	</svg>
+
+	<!-- moon icon for dark mode -->
+	<svg
+		class="w-4 h-4 text-blue-300 transition-all duration-200 {isDark
+			? 'opacity-100 rotate-0 scale-100'
+			: 'opacity-0 -rotate-90 scale-0'} absolute"
+		fill="currentColor"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+	</svg>
+
+	<!-- invisible placeholder to maintain button size -->
+	<div class="w-4 h-4 opacity-0">
+		<svg class="w-4 h-4" viewBox="0 0 20 20">
+			<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1z" />
+		</svg>
+	</div>
+</button>
diff --git a/frontend/src/lib/components/ToIcon.svelte b/frontend/src/lib/components/ToIcon.svelte
index b852479..03a7691 100644
--- a/frontend/src/lib/components/ToIcon.svelte
+++ b/frontend/src/lib/components/ToIcon.svelte
@@ -1,6 +1,6 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class="h-5 w-5 text-slate-400"
+	class="h-5 w-5 text-slate-400 dark:text-gray-400 transition-colors duration-200"
 	viewBox="0 0 20 20"
 	fill="currentColor"
 >
diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index 25728cc..96ba9a8 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -30,7 +30,7 @@
 							}
 						}}
 						transition:slide|global
-						class="flex items-center bg-pleasant-gray text-gray-500 shadow-lg capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full"
+						class="flex items-center bg-pleasant-gray dark:bg-gray-700 text-gray-500 dark:text-gray-200 shadow-lg dark:shadow-gray-900/50 capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full transition-colors duration-200"
 					>
 						<!-- <img class="w-9 mr-6" draggable="false" src={src1} alt="checkmark success" /> -->
 						<svg class="w-11 mr-6" viewBox="0 0 32.25 32.4">
@@ -60,7 +60,7 @@
 						}
 					}}
 					transition:slide|global
-					class="flex items-center bg-pleasant-gray text-gray-500 shadow-lg capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-700 text-gray-500 dark:text-gray-200 shadow-lg dark:shadow-gray-900/50 capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full transition-colors duration-200"
 				>
 					<!-- <img class="w-9 mr-6" draggable="false" src="/t-warning.svg" alt="checkmark warning" /> -->
 					<svg class="w-11 mr-6" viewBox="0 0 36.26 32.41">
@@ -101,7 +101,7 @@
 						}
 					}}
 					transition:slide|global
-					class="flex items-center bg-pleasant-gray text-gray-500 shadow-lg capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-700 text-gray-500 dark:text-gray-200 shadow-lg dark:shadow-gray-900/50 capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full transition-colors duration-200"
 				>
 					<!-- <img class="w-9 mr-6" draggable="false" src="/t-error.svg" alt="checkmark error" /> -->
 					<svg class="w-11 mr-6" viewBox="0 0 32.98 32.98">
@@ -143,7 +143,7 @@
 							removeToast(toast.id);
 						}
 					}}
-					class="flex items-center bg-pleasant-gray text-gray-500 shadow-lg capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-700 text-gray-500 dark:text-gray-200 shadow-lg dark:shadow-gray-900/50 capitalize text-xl p-4 first:mt-0 mt-4 min-w-max rounded-md justify-self-center w-full transition-colors duration-200"
 				>
 					<!-- <img class="w-9 mr-6" draggable="false" src="/t-info.svg" alt="checkmark info" /> -->
 					<svg class="w-11 mr-6" viewBox="0 0 32.79 32.79">
diff --git a/frontend/src/lib/components/ToolTip.svelte b/frontend/src/lib/components/ToolTip.svelte
index 191d41e..d2cb986 100644
--- a/frontend/src/lib/components/ToolTip.svelte
+++ b/frontend/src/lib/components/ToolTip.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="rounded-full bg-gray-600 text-white w-4 h-4 z-30 text-center ml-2 relative cursor-pointer hover:bg-gray-500"
+	class="rounded-full bg-gray-600 dark:bg-gray-500 text-white w-4 h-4 z-30 text-center ml-2 relative cursor-pointer hover:bg-gray-500 dark:hover:bg-gray-400 transition-colors duration-200"
 	role="tooltip"
 	aria-describedby={tooltipId}
 	on:mouseenter={(e) => {
@@ -27,7 +27,7 @@
 {#if showToolTip}
 	<div
 		id={tooltipId}
-		class="bg-gray-600 text-white w-max mt-2 px-2 py-2 rounded-md shadow-xl z-40"
+		class="bg-gray-600 dark:bg-gray-700 text-white w-max mt-2 px-2 py-2 rounded-md shadow-xl dark:shadow-gray-900/70 z-40 transition-colors duration-200"
 		style={tooltipStyle}
 	>
 		<p><slot /></p>
diff --git a/frontend/src/lib/components/editor/Editor.svelte b/frontend/src/lib/components/editor/Editor.svelte
index 2fa57ea..ebb20da 100644
--- a/frontend/src/lib/components/editor/Editor.svelte
+++ b/frontend/src/lib/components/editor/Editor.svelte
@@ -374,8 +374,10 @@
 	let isDetailsVisible = $$slots.default;
 </script>
 
-<div class="w-80vw z-[9000] col-start-1 col-end-4 flex flex-col">
-	<div class="">
+<div
+	class="w-80vw z-[9000] col-start-1 col-end-4 flex flex-col bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
+>
+	<div class="bg-white dark:bg-gray-800 transition-colors duration-200">
 		<div class="mt-4 flex items-center flex-wrap">
 			<!-- mode tabs -->
 			<div class="flex">
@@ -385,9 +387,10 @@
 							isDetailsVisible = true;
 						}}
 						type="button"
-						class="h-8 border-2 rounded-md w-36 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2 mb-2"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md w-36 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2 mb-2 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 transition-colors duration-200"
 						class:font-bold={isDetailsVisible}
 						class:bg-cta-blue={isDetailsVisible}
+						class:dark:bg-indigo-600={isDetailsVisible}
 						class:text-white={isDetailsVisible}
 					>
 						<svg
@@ -410,9 +413,10 @@
 							isDetailsVisible = false;
 						}}
 						type="button"
-						class="h-8 border-2 rounded-md w-36 text-center cursor-pointer hover:opacity-80 ml-1 flex items-center justify-center gap-2"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md w-36 text-center cursor-pointer hover:opacity-80 ml-1 flex items-center justify-center gap-2 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 transition-colors duration-200"
 						class:font-bold={!isDetailsVisible}
 						class:bg-cta-blue={!isDetailsVisible}
+						class:dark:bg-indigo-600={!isDetailsVisible}
 						class:text-white={!isDetailsVisible}
 					>
 						<svg
@@ -443,7 +447,7 @@
 					<button
 						type="button"
 						on:click={triggerFileInput}
-						class="h-8 border-2 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -476,9 +480,10 @@
 								updatePreview();
 							}
 						}}
-						class="h-8 border-2 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 						class:font-bold={isPreviewVisible}
 						class:bg-cta-blue={isPreviewVisible}
+						class:dark:bg-indigo-600={isPreviewVisible}
 						class:text-white={isPreviewVisible}
 					>
 						<svg
@@ -499,7 +504,7 @@
 
 					<!-- template selector -->
 					<select
-						class="h-8 border-2 rounded-md px-3 bg-white text-black cursor-pointer"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md px-3 bg-white dark:bg-gray-700 text-black dark:text-gray-200 cursor-pointer transition-colors duration-200"
 						on:change={(e) => {
 							const t = /** @type {HTMLSelectElement} */ (e.target);
 							if (t.value) {
@@ -524,7 +529,7 @@
 							id="domain-select"
 							bind:value={selectedDomain}
 							on:change={selectPreviewDomain}
-							class="h-8 border-2 rounded-md px-3 bg-white text-black cursor-pointer"
+							class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md px-3 bg-white dark:bg-gray-700 text-black dark:text-gray-200 cursor-pointer transition-colors duration-200"
 						>
 							<option value="">Select preview domain...</option>
 							{#each domainMap.values() as domain}
@@ -537,7 +542,7 @@
 					<button
 						type="button"
 						on:click={openFullPagePreview}
-						class="h-8 border-2 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2"
+						class="h-8 border-2 border-gray-300 dark:border-gray-600 rounded-md px-3 text-center cursor-pointer hover:opacity-80 flex items-center justify-center gap-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors duration-200"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -563,8 +568,7 @@
 		<!-- details -->
 		{#if $$slots.default}
 			<div
-				class="flex flex-col lg:flex-row lg:items-center h-auto w-full justify-between mb-4"
-				class:lg:h-28={isDetailsVisible}
+				class="flex flex-col lg:flex-row lg:items-center h-auto w-full justify-between mb-4 bg-white dark:bg-gray-800 transition-colors duration-200"
 			>
 				{#if isDetailsVisible}
 					<slot />
@@ -575,21 +579,30 @@
 
 	<div class="flex h-full">
 		<div
-			class="flex flex-col border-2 border-black {!isPreviewVisible ? 'w-80vw' : 'w-1/2'}"
+			class="flex flex-col border-2 border-black dark:border-gray-600 bg-white dark:bg-gray-900 {!isPreviewVisible
+				? 'w-80vw'
+				: 'w-1/2'} transition-colors duration-200"
 			class:h-55vh={isDetailsVisible}
 			class:h-67vh={!isDetailsVisible}
 		>
 			<div id="monaco-editor" class="h-full" />
 		</div>
-		<div class="bg-cta-blue cursor-move w-1" class:hidden={!isPreviewVisible}>&nbsp;</div>
+		<div
+			class="bg-cta-blue dark:bg-indigo-600 cursor-move w-1 transition-colors duration-200"
+			class:hidden={!isPreviewVisible}
+		>
+			&nbsp;
+		</div>
 		{#if isPreviewVisible}
-			<div class="w-1/2 border-2 border-black">
+			<div
+				class="w-1/2 border-2 border-black dark:border-gray-600 bg-white transition-colors duration-200"
+			>
 				<iframe
 					bind:this={previewFrame}
 					sandbox="allow-forms allow-modals allow-popups allow-scripts allow-pointer-lock"
 					title="preview"
 					class="h-full w-full"
-					style="color-scheme: normal"
+					style="color-scheme: light;"
 				/>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/editor/SimpleCodeEditor.svelte b/frontend/src/lib/components/editor/SimpleCodeEditor.svelte
index 38cf908..515f03f 100644
--- a/frontend/src/lib/components/editor/SimpleCodeEditor.svelte
+++ b/frontend/src/lib/components/editor/SimpleCodeEditor.svelte
@@ -11,6 +11,7 @@
 
 	let editor = null;
 	let editorContainer = null;
+	let isDark = false;
 
 	const heightClasses = {
 		small: 'h-64',
@@ -18,7 +19,38 @@
 		large: 'h-96'
 	};
 
+	// Check for dark mode
+	const checkDarkMode = () => {
+		if (typeof window !== 'undefined') {
+			isDark = document.documentElement.classList.contains('dark');
+		}
+	};
+
 	onMount(() => {
+		checkDarkMode();
+
+		// Watch for dark mode changes
+		const observer = new MutationObserver(() => {
+			const newIsDark = document.documentElement.classList.contains('dark');
+			if (newIsDark !== isDark) {
+				isDark = newIsDark;
+				if (editor) {
+					monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs-light');
+				}
+			}
+		});
+
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class']
+		});
+
+		const cleanup = () => {
+			observer.disconnect();
+			if (editor) {
+				editor.dispose();
+			}
+		};
 		self.MonacoEnvironment = {
 			getWorker: function (_, label) {
 				if (label === 'json') {
@@ -31,7 +63,7 @@
 		editor = monaco.editor.create(editorContainer, {
 			value: value || '',
 			language: language,
-			theme: 'vs-dark',
+			theme: isDark ? 'vs-dark' : 'vs-light',
 			automaticLayout: true,
 			minimap: {
 				enabled: false
@@ -60,11 +92,7 @@
 			value = editor.getValue();
 		});
 
-		return () => {
-			if (editor) {
-				editor.dispose();
-			}
-		};
+		return cleanup;
 	});
 
 	// Watch for external value changes
@@ -86,30 +114,38 @@
 <div class="w-full">
 	<div
 		bind:this={editorContainer}
-		class="border border-gray-300 rounded-md {heightClasses[height]} w-full"
+		class="border border-gray-300 dark:border-gray-600 rounded-md {heightClasses[
+			height
+		]} w-full transition-colors duration-200"
 	></div>
 	{#if placeholder}
 		<div class="mt-2">
 			<button
 				type="button"
 				on:click={() => (showExample = !showExample)}
-				class="text-xs text-blue-600 hover:text-blue-800 underline focus:outline-none"
+				class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline focus:outline-none transition-colors duration-200"
 			>
 				{showExample ? 'Hide' : 'Show'} example
 			</button>
 			{#if showExample}
-				<div class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded-md">
+				<div
+					class="mt-2 p-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md transition-colors duration-200"
+				>
 					<div class="flex justify-between items-start mb-2">
-						<span class="text-xs font-medium text-gray-700">Example:</span>
+						<span
+							class="text-xs font-medium text-gray-700 dark:text-gray-300 transition-colors duration-200"
+							>Example:</span
+						>
 						<button
 							type="button"
 							on:click={loadExample}
-							class="text-xs text-blue-600 hover:text-blue-800 underline"
+							class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline transition-colors duration-200"
 						>
 							Load example
 						</button>
 					</div>
-					<pre class="text-xs text-gray-600 whitespace-pre-wrap">{placeholder}</pre>
+					<pre
+						class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap transition-colors duration-200">{placeholder}</pre>
 				</div>
 			{/if}
 		</div>
diff --git a/frontend/src/lib/components/header/DesktopMenu.svelte b/frontend/src/lib/components/header/DesktopMenu.svelte
index 782eb65..2f54020 100644
--- a/frontend/src/lib/components/header/DesktopMenu.svelte
+++ b/frontend/src/lib/components/header/DesktopMenu.svelte
@@ -92,19 +92,19 @@
 
 <div class="flex">
 	<nav
-		class="hidden lg:flex flex-col transition-all fixed top-16 z-10 bg-gradient-to-b from-pc-darkblue to-indigo-400 rounded-br-lg overflow-y-auto overflow-x-hidden min-h-0 max-h-[calc(100vh-4rem)] box-content border-r-[1px] border-pc-darkblue"
+		class="hidden lg:flex flex-col transition-all fixed top-16 z-10 bg-gradient-to-b from-pc-darkblue to-indigo-400 dark:from-gray-900 dark:to-gray-800 rounded-br-lg overflow-y-auto overflow-x-hidden min-h-0 max-h-[calc(100vh-4rem)] box-content border-r-[1px] border-pc-darkblue dark:border-gray-700"
 		class:w-40={isExpanded}
 		class:w-12={!isExpanded}
 	>
 		<div
-			class="sticky top-0 bg-highlight-blue/20 border-b w-full border-blue-700/30 transform-none"
+			class="sticky top-0 bg-highlight-blue/20 dark:bg-gray-800/70 border-b w-full border-blue-700/30 dark:border-gray-600 transform-none transition-colors duration-200"
 		>
 			<button
-				class="w-full flex items-center justify-center rounded-md hover:bg-blue-600/30 transition-colors group px-3 py-2"
+				class="w-full flex items-center justify-center rounded-md hover:bg-blue-600/30 dark:hover:bg-gray-700/70 transition-colors group px-3 py-2"
 				on:click={() => (isExpanded = !isExpanded)}
 			>
 				<svg
-					class="text-blue-100 duration-200 w-6"
+					class="text-blue-100 dark:text-gray-100 duration-200 w-6 transition-colors"
 					class:rotate-180={!isExpanded}
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
@@ -123,13 +123,15 @@
 
 		<!-- Navigation Items -->
 		<div
-			class="flex flex-col py-4 flex-1 overflow-y-auto {scrollBarClassesVertical} [&::-webkit-scrollbar-track]:bg-cta-blue"
+			class="flex flex-col py-4 flex-1 overflow-y-auto {scrollBarClassesVertical} [&::-webkit-scrollbar-track]:bg-cta-blue dark:[&::-webkit-scrollbar-track]:bg-gray-800"
 		>
 			{#each menu as link}
 				{#if link.type === 'submenu'}
 					<div class="py-1 mt-4 first:mt-0">
 						{#if isExpanded}
-							<div class="px-3 py-2 text-xs font-semibold text-blue-100 uppercase tracking-wider">
+							<div
+								class="px-3 py-2 text-xs font-semibold text-blue-100 dark:text-gray-200 uppercase tracking-wider transition-colors duration-200"
+							>
 								{link.label}
 							</div>
 						{/if}
@@ -139,8 +141,8 @@
 								<a
 									class="flex items-center px-3 py-2 text-sm transition-all duration-150 relative group
                                         {$page.url.pathname === item.route
-										? 'text-white font-medium bg-active-blue shadow-md'
-										: 'text-blue-100 hover:shadow-md hover:bg-highlight-blue hover:text-white'}"
+										? 'text-white font-medium bg-active-blue dark:bg-indigo-600 shadow-md'
+										: 'text-blue-100 dark:text-gray-200 hover:shadow-md hover:bg-highlight-blue dark:hover:bg-gray-700 hover:text-white dark:hover:text-gray-100'}"
 									class:hidden={shouldHideMenuItem(item.route)}
 									draggable="false"
 									href={item.route}
@@ -164,7 +166,7 @@
 									{/if}
 
 									{#if $page.url.pathname === item.route}
-										<div class="absolute left-0 top-0 bottom-0 w-1 bg-white"></div>
+										<div class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-blue-400"></div>
 									{/if}
 								</a>
 							{/each}
@@ -174,8 +176,8 @@
 					<a
 						class="flex items-center px-3 py-2 text-sm transition-all duration-150 relative group
                             {$page.url.pathname === link.route
-							? 'text-white font-medium bg-active-blue shadow-md'
-							: 'text-blue-100 hover:text-white'}"
+							? 'text-white font-medium bg-active-blue dark:bg-indigo-600 shadow-md'
+							: 'text-blue-100 dark:text-gray-200 hover:text-white dark:hover:text-gray-100 dark:hover:bg-gray-700'}"
 						draggable="false"
 						href={link.route}
 					>
@@ -188,16 +190,16 @@
 							<span class="ml-3 truncate">{link.label}</span>
 						{:else}
 							<div
-								class="absolute left-14 rounded bg-gray-900 text-white px-2 py-1 ml-6 text-sm
-                                invisible opacity-0 -translate-x-3 group-hover:visible group-hover:opacity-100 group-hover:translate-x-0
-                                transition-all duration-150 whitespace-nowrap z-50 shadow-lg"
+								class="absolute left-14 rounded bg-gray-900 dark:bg-gray-800 text-white dark:text-gray-100 px-2 py-1 ml-6 text-sm
+	                                invisible opacity-0 -translate-x-3 group-hover:visible group-hover:opacity-100 group-hover:translate-x-0
+	                                transition-all duration-150 whitespace-nowrap z-50 shadow-lg border dark:border-gray-600"
 							>
 								{link.label}
 							</div>
 						{/if}
 
 						{#if $page.url.pathname === link.route}
-							<div class="absolute left-0 top-0 bottom-0 w-1 bg-white"></div>
+							<div class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-blue-400"></div>
 						{/if}
 					</a>
 				{/if}
diff --git a/frontend/src/lib/components/header/Header.svelte b/frontend/src/lib/components/header/Header.svelte
index ec709ee..db80ebf 100644
--- a/frontend/src/lib/components/header/Header.svelte
+++ b/frontend/src/lib/components/header/Header.svelte
@@ -2,6 +2,7 @@
 	import { AppStateService } from '$lib/service/appState';
 	import { onMount } from 'svelte';
 	import Logo from './Logo.svelte';
+	import ThemeToggle from '../ThemeToggle.svelte';
 
 	const appState = AppStateService.instance;
 
@@ -112,17 +113,19 @@
 	$: initials = getInitials(username || 'U');
 </script>
 
-<div class="sticky top-0 z-20 col-span-12 h-16 bg-pc-darkblue flex justify-between items-center">
+<div
+	class="header-container sticky top-0 z-20 col-span-12 h-16 bg-pc-darkblue dark:bg-gray-800 border-b border-pc-darkblue/20 dark:border-gray-700 flex justify-between items-center"
+>
 	<Logo />
 	{#if isInstalled}
 		<div class="hidden lg:flex flex-row items-center px-8 h-full justify-self-end">
 			{#if context.current === AppStateService.CONTEXT.COMPANY}
-				<p class="text-slate-300 uppercase font-bold text-lg mr-4">
+				<p class="text-slate-300 dark:text-gray-300 uppercase font-bold text-lg mr-4">
 					{context.companyName}
 				</p>
 			{/if}
 			<button
-				class="rounded-md h-3/4 px-8 text-white bg-indigo-500 hover:bg-cta-blue uppercase font-semibold mr-4"
+				class="rounded-md h-3/4 px-8 text-white bg-indigo-500 hover:bg-cta-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 uppercase font-semibold mr-4 transition-colors duration-200"
 				on:click={toggleChangeCompanyModal}
 			>
 				Change company
@@ -130,14 +133,15 @@
 
 			{#if isUpdateAvailable}
 				<a
-					class="flex items-center gap-2 mr-8 text-lg font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-500 rounded-md px-4 py-2 transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 active:scale-95 fixed bottom-4 right-2 shadow-md shadow-black"
+					class="flex items-center gap-2 mr-8 text-lg font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-600 dark:to-purple-600 rounded-md px-4 py-2 transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 active:scale-95 fixed bottom-4 right-2 shadow-md shadow-black dark:shadow-gray-900"
 					href={'/settings/update'}
 				>
 					<span class="">✨</span>
 					<span>Update Available</span>
 				</a>
 			{/if}
-			<div class="relative ml-10 flex items-center">
+			<div class="relative ml-10 flex items-center gap-4">
+				<ThemeToggle />
 				<button
 					id="toggle-profile-menu"
 					class="group flex items-center"
@@ -145,7 +149,7 @@
 				>
 					<!-- Main Circle with Initials -->
 					<div
-						class="w-10 h-10 rounded-full bg-cta-blue hover:bg-indigo-500 flex items-center justify-center text-white font-medium relative"
+						class="w-10 h-10 rounded-full bg-cta-blue hover:bg-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-700 flex items-center justify-center text-white font-medium relative transition-colors duration-200"
 					>
 						{initials}
 
@@ -154,7 +158,7 @@
 
 					<!-- Dropdown Indicator -->
 					<svg
-						class="w-4 h-4 ml-2 text-gray-300 transition-transform duration-200 group-hover:text-white"
+						class="w-4 h-4 ml-2 text-gray-300 dark:text-gray-400 transition-transform duration-200 group-hover:text-white"
 						fill="none"
 						stroke="currentColor"
 						viewBox="0 0 24 24"
@@ -170,25 +174,40 @@
 			</div>
 		</div>
 
-		<div class="flex lg:hidden items-center mr-4">
+		<div class="flex lg:hidden items-center mr-4 gap-4">
+			<div
+				class="flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/10 transition-colors duration-200"
+			>
+				<ThemeToggle />
+			</div>
 			<button
-				class="rounded-md px-3 py-1 text-white bg-indigo-500 hover:bg-cta-blue uppercase font-semibold text-xs mr-3"
+				class="rounded-md px-3 py-2 text-white bg-indigo-500 hover:bg-cta-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 uppercase font-semibold text-xs transition-colors duration-200"
 				on:click={toggleChangeCompanyModal}
 			>
 				Change company
 			</button>
-			<button class="flex w-14" on:click={() => (isMobileMenuVisible = !isMobileMenuVisible)}>
-				<img class="" src="/mob-menu-button.svg" alt="toggle mobile menu" />
+			<button
+				class="flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/10 transition-colors duration-200"
+				on:click={() => (isMobileMenuVisible = !isMobileMenuVisible)}
+			>
+				<img class="w-6 h-6" src="/mob-menu-button.svg" alt="toggle mobile menu" />
 			</button>
 		</div>
 	{/if}
 </div>
 
 <style>
-	button {
-		filter: contrast(1.1) saturate(1.2);
+	/* Prevent any hover effects on the header */
+	.header-container {
+		background-color: #0b2063 !important;
 	}
-	button:hover {
-		filter: contrast(1.2) saturate(1.3);
+	.header-container:hover {
+		background-color: #0b2063 !important;
+	}
+	:global(.dark) .header-container {
+		background-color: #1f2937 !important;
+	}
+	:global(.dark) .header-container:hover {
+		background-color: #1f2937 !important;
 	}
 </style>
diff --git a/frontend/src/lib/components/header/Logo.svelte b/frontend/src/lib/components/header/Logo.svelte
index bc99c40..3b75845 100644
--- a/frontend/src/lib/components/header/Logo.svelte
+++ b/frontend/src/lib/components/header/Logo.svelte
@@ -7,7 +7,22 @@
 	on:keydown={(e) => e.key === 'Enter' && goto('/dashboard/')}
 	tabindex="0"
 	role="button"
-	class="flex items-center w-40 sm:w-40 md:w-42 lg:w-56 justify-center py-4 my-6 rounded-md ml-4"
+	class="flex items-center w-40 sm:w-40 md:w-42 lg:w-56 justify-center py-4 my-6 ml-4 cursor-pointer"
 >
 	<img draggable="false" src="/logo-white.svg" alt="logo" />
 </div>
+
+<style>
+	div {
+		background: none !important;
+	}
+	div:hover {
+		background: none !important;
+		background-color: transparent !important;
+	}
+	div:focus {
+		background: none !important;
+		background-color: transparent !important;
+		outline: none !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/header/MenuLink.svelte b/frontend/src/lib/components/header/MenuLink.svelte
index 8f1de7b..bf36430 100644
--- a/frontend/src/lib/components/header/MenuLink.svelte
+++ b/frontend/src/lib/components/header/MenuLink.svelte
@@ -5,10 +5,13 @@
 </script>
 
 <a
-	class="py-2 px-4 text-white hover:bg-active-blue hover:text-white hover:rounded-md"
-	class:bg-highlight-blue={$page.url.pathname === href}
-	class:font-semibold={$page.url.pathname === href}
-	class:rounded-md={$page.url.pathname === href}
+	class="pl-5 py-2 text-white last:rounded-md first:rounded-t-md transition-colors duration-200"
+	class:hover:shadow-md={$page.url.pathname !== href}
+	class:hover:bg-highlight-blue={$page.url.pathname !== href}
+	class:dark:hover:bg-gray-600={$page.url.pathname !== href}
+	class:bg-active-blue={$page.url.pathname === href}
+	class:dark:bg-gray-700={$page.url.pathname === href}
+	class:shadow-md={$page.url.pathname === href}
 	class:hidden
 	{href}
 	on:click
diff --git a/frontend/src/lib/components/header/MobileMenu.svelte b/frontend/src/lib/components/header/MobileMenu.svelte
index cceb88a..4d30e7f 100644
--- a/frontend/src/lib/components/header/MobileMenu.svelte
+++ b/frontend/src/lib/components/header/MobileMenu.svelte
@@ -3,6 +3,7 @@
 	import { menu, mobileTopMenu } from '$lib/consts/navigation';
 	import MenuLink from './MenuLink.svelte';
 	import { shouldHideMenuItem } from '$lib/utils/common';
+	import ThemeToggle from '../ThemeToggle.svelte';
 
 	export let visible = false;
 	export let username = '';
@@ -10,48 +11,91 @@
 </script>
 
 {#if visible}
-	<div class="fixed top-0 left-0 w-full h-full bg-pc-darkblue z-40 overflow-y-auto pb-4">
-		<div class="flex justify-between h-16">
-			<img class="w-40 sm:w-40 md:w-42 lg:w-56 ml-4" src="/logo-white.svg" alt="logo" />
-			<button class="mr-4 w-14" on:click={() => (visible = !visible)}>
-				<img class="w-3/4" src="/mob-menu-close.svg" alt="close mobile menu" />
-			</button>
-		</div>
-		<div>
-			<div class="flex flex-col px-4 py-4 rounded-b-xl">
-				<div class="flex py-6 border-b-2 border-white mb-4">
-					<!-- <div class="bg-slate-50 w-16 h-16 rounded-full" /> -->
-					<div>
-						<h1 class="font-bold text-3xl ml-6 text-white">{username ?? ''}</h1>
-						<button
-							on:click={onClickLogout}
-							class="bg-cta-blue hover:bg-pc-lightblue uppercase font-bold ml-6 mt-2 py text-white rounded-md"
-						>
-							<p class="py px-8">Log Out</p>
-						</button>
-					</div>
-				</div>
-				<div class="flex flex-col text-white">
-					{#each mobileTopMenu as link}
-						<a
-							class="pl-5 py-2 hover:bg-cta-blue hover:text-white rounded-md"
-							class:bg-gray-600={$page.url.pathname === link.route}
-							class:hidden={shouldHideMenuItem(link.route)}
-							on:click={() => (visible = !visible)}
-							target={link.external ? '_blank' : '_self'}
-							href={link.route}>{link.label}</a
-						>
-					{/each}
+	<!-- Overlay -->
+	<button
+		class="fixed inset-0 bg-black bg-opacity-50 z-40 cursor-default"
+		on:click={() => (visible = false)}
+		aria-label="Close mobile menu"
+	></button>
+
+	<!-- Mobile Menu -->
+	<div
+		class="mobile-menu-content fixed top-0 left-0 w-full h-full bg-pc-darkblue dark:bg-gray-900 z-50 overflow-y-auto shadow-xl transition-colors duration-200"
+	>
+		<!-- Header -->
+		<div
+			class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue dark:bg-gray-800 px-6"
+		>
+			<img class="w-40 h-auto" src="/logo-white.svg" alt="logo" />
+			<div class="flex items-center gap-4">
+				<div
+					class="flex items-center justify-center w-12 h-12 rounded-lg hover:bg-white/10 dark:hover:bg-gray-600/30 transition-colors duration-200"
+				>
+					<ThemeToggle />
 				</div>
+				<button
+					class="flex items-center justify-center w-12 h-12 rounded-lg hover:bg-white/10 dark:hover:bg-gray-600/30 transition-colors duration-200"
+					on:click={() => (visible = false)}
+				>
+					<img class="w-6 h-6" src="/mob-menu-close.svg" alt="close mobile menu" />
+				</button>
 			</div>
 		</div>
-		<div>
-			<div class="flex flex-col bg-cta-blue px-4 pt-4">
+
+		<!-- User Section -->
+		<div class="p-6 border-b border-white dark:border-gray-700">
+			<h1 class="font-bold text-xl text-white dark:text-gray-100 mb-4">
+				{username ?? ''}
+			</h1>
+			<button
+				on:click={onClickLogout}
+				class="bg-cta-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 uppercase font-bold py-3 px-6 rounded-md transition-colors duration-200 text-sm text-white"
+			>
+				Log Out
+			</button>
+		</div>
+
+		<!-- Top Menu -->
+		<div class="p-4">
+			<div
+				class="bg-gradient-to-b from-cta-blue to-indigo-500 dark:from-gray-800 dark:to-gray-700 rounded-md"
+			>
+				{#each mobileTopMenu as link}
+					<a
+						class="block text-center py-4 text-white text-lg font-medium first:rounded-t-md last:rounded-b-md transition-colors duration-200"
+						class:bg-active-blue={$page.url.pathname === link.route}
+						class:dark:bg-gray-700={$page.url.pathname === link.route}
+						class:shadow-md={$page.url.pathname === link.route}
+						class:hidden={shouldHideMenuItem(link.route)}
+						on:click={() => (visible = false)}
+						target={link.external ? '_blank' : '_self'}
+						href={link.route}
+					>
+						{link.label}
+					</a>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Main Menu -->
+		<div class="p-4 pt-0">
+			<div
+				class="bg-gradient-to-b from-cta-blue to-indigo-500 dark:from-gray-800 dark:to-gray-700 rounded-md"
+			>
 				{#each menu as link}
 					{#if link.type === 'submenu'}
-						<div class="text-white font-semibold text-xl">{link.label}</div>
+						<div
+							class="text-center py-4 text-white font-semibold text-lg border-b border-white/20 dark:border-gray-600"
+						>
+							{link.label}
+						</div>
 						{#each link.items as item, i (i)}
-							<MenuLink href={item.route} on:click={() => (visible = !visible)}>
+							<a
+								class="block text-center py-3 text-white text-base transition-colors duration-200"
+								class:last:rounded-b-md={i === link.items.length - 1}
+								href={item.route}
+								on:click={() => (visible = false)}
+							>
 								{#if i === 0}
 									Overview
 								{:else if item.singleLabel}
@@ -59,13 +103,49 @@
 								{:else}
 									{item.label}
 								{/if}
-							</MenuLink>
+							</a>
 						{/each}
 					{:else}
-						<MenuLink href={link.route}>{link.label}</MenuLink>
+						<a
+							class="block text-center py-4 text-white text-lg font-medium transition-colors duration-200"
+							href={link.route}
+							on:click={() => (visible = false)}
+						>
+							{link.label}
+						</a>
 					{/if}
 				{/each}
 			</div>
 		</div>
 	</div>
 {/if}
+
+<style>
+	/* Prevent any hover effects on the mobile menu header */
+	:global(.mobile-menu-header) {
+		background-color: #0b2063 !important;
+	}
+	:global(.mobile-menu-header:hover) {
+		background-color: #0b2063 !important;
+	}
+	:global(.dark .mobile-menu-header) {
+		background-color: #1f2937 !important;
+	}
+	:global(.dark .mobile-menu-header:hover) {
+		background-color: #1f2937 !important;
+	}
+
+	/* Prevent any hover effects on the mobile menu content */
+	.mobile-menu-content {
+		background-color: #0b2063 !important;
+	}
+	.mobile-menu-content:hover {
+		background-color: #0b2063 !important;
+	}
+	:global(.dark) .mobile-menu-content {
+		background-color: #111827 !important;
+	}
+	:global(.dark) .mobile-menu-content:hover {
+		background-color: #111827 !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/header/ProfileMenu.svelte b/frontend/src/lib/components/header/ProfileMenu.svelte
index 1a784c8..2598fee 100644
--- a/frontend/src/lib/components/header/ProfileMenu.svelte
+++ b/frontend/src/lib/components/header/ProfileMenu.svelte
@@ -26,6 +26,14 @@
 			document.removeEventListener('click', handleClickOutsideNavigation);
 		}
 	}
+
+	// Custom transition that only fades in
+	function fadeIn(node, { duration = 150 }) {
+		return {
+			duration,
+			css: (t) => `opacity: ${t}`
+		};
+	}
 </script>
 
 {#if visible}
@@ -34,15 +42,17 @@
 		class="lg:flex flex-col h-fit lg:col-start-10 lg:col-span-3 row-start-1 xl:col-start-11 xl:col-span-2 2xl:col-start-11 2xl:col-span-2 sticky top-20 z-30"
 	>
 		<div
-			class="flex flex-col bg-gradient-to-b from-cta-blue to-indigo-500 rounded-md"
-			transition:fade={{ duration: 150 }}
+			class="flex flex-col bg-gradient-to-b from-cta-blue to-indigo-500 dark:from-gray-800 dark:to-gray-700 rounded-md transition-colors duration-200"
+			in:fadeIn={{ duration: 150 }}
 		>
 			{#each topMenu as item}
 				<a
-					class="pl-5 py-2 text-white last:rounded-md first:rounded-t-md"
+					class="pl-5 py-2 text-white last:rounded-md first:rounded-t-md transition-colors duration-200"
 					class:hover:shadow-md={$page.url.pathname !== item.route}
 					class:hover:bg-highlight-blue={$page.url.pathname !== item.route}
+					class:dark:hover:bg-gray-600={$page.url.pathname !== item.route}
 					class:bg-active-blue={$page.url.pathname === item.route}
+					class:dark:bg-gray-700={$page.url.pathname === item.route}
 					class:shadow-md={$page.url.pathname === item.route}
 					class:hidden={shouldHideMenuItem(item.route)}
 					target={item.external ? '_blank' : '_self'}
@@ -55,9 +65,11 @@
 			{/each}
 			<button
 				on:click={logout}
-				class="bg-white uppercase font-bold hover:bg-pc-lightblue py-2 mx-4 my-4 rounded-md"
+				class="bg-white dark:bg-gray-800 uppercase font-bold hover:bg-pc-lightblue dark:hover:bg-gray-700 py-2 mx-4 my-4 rounded-md transition-colors duration-200"
 			>
-				<p class="text-cta-blue py px-8">Log Out</p>
+				<p class="text-cta-blue dark:text-gray-100 py px-8 transition-colors duration-200">
+					Log Out
+				</p>
 			</button>
 		</div>
 	</nav>
diff --git a/frontend/src/lib/components/modal/ChangeCompanyModal.svelte b/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
index 42aa800..7f466f8 100644
--- a/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
+++ b/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
@@ -117,17 +117,21 @@
 		<div class="flex-grow p-6">
 			{#if isLoadingCompanies}
 				<div class="flex items-center justify-center py-8">
-					<div class="text-gray-500">Loading companies...</div>
+					<div class="text-gray-500 dark:text-gray-400 transition-colors duration-200">
+						Loading companies...
+					</div>
 				</div>
 			{:else if companies.length === 0}
 				<div class="flex flex-col items-center justify-center py-8 text-center">
-					<div class="text-gray-500 mb-4">No companies found.</div>
-					<div class="text-sm text-gray-400 mb-4">
+					<div class="text-gray-500 dark:text-gray-400 mb-4 transition-colors duration-200">
+						No companies found.
+					</div>
+					<div class="text-sm text-gray-400 dark:text-gray-500 mb-4 transition-colors duration-200">
 						You need to create a company first before you can switch to it.
 					</div>
 					<a
 						href="/company/"
-						class="bg-cta-blue hover:bg-blue-700 text-sm uppercase font-bold px-4 py-2 text-white rounded-md"
+						class="bg-cta-blue dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 text-sm uppercase font-bold px-4 py-2 text-white rounded-md transition-colors duration-200"
 						on:click={() => {
 							visible = false;
 						}}
@@ -143,11 +147,13 @@
 		</div>
 
 		<!-- Button Section -->
-		<div class="border-t p-6 mt-36 flex flex-wrap gap-4 justify-end">
+		<div
+			class="border-t border-gray-200 dark:border-gray-600 p-6 mt-36 flex flex-wrap gap-4 justify-end transition-colors duration-200"
+		>
 			{#if inContext}
 				<button
 					type="button"
-					class="bg-slate-400 hover:bg-slate-300 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+					class="bg-slate-400 dark:bg-gray-600 hover:bg-slate-300 dark:hover:bg-gray-500 text-sm mr-2 uppercase font-bold px-4 py-2 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
 					disabled={isLoadingCompanies}
 					on:click={onClickSwitchToAdministratorContext}
 				>
@@ -157,7 +163,7 @@
 
 			<button
 				type="submit"
-				class="bg-cta-blue hover:bg-blue-700 text-sm uppercase font-bold px-4 py-2 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+				class="bg-cta-blue dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 text-sm uppercase font-bold px-4 py-2 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
 				disabled={isLoadingCompanies || !selectedCompany}
 				on:click={onClickSwitch}
 			>
diff --git a/frontend/src/lib/components/modal/DeleteAlert.svelte b/frontend/src/lib/components/modal/DeleteAlert.svelte
index a3f58ce..9bbee39 100644
--- a/frontend/src/lib/components/modal/DeleteAlert.svelte
+++ b/frontend/src/lib/components/modal/DeleteAlert.svelte
@@ -46,20 +46,20 @@
 				<!--
 				<h3 class="text-lg font-medium text-gray-900">Delete {type}</h3>
 				-->
-				<p class="mt-2 text-gray-600">
+				<p class="mt-2 text-gray-600 dark:text-gray-300">
 					Are you sure you want to delete
 					{#if name?.length > 30}
 						<br />
 					{/if}
-					<span class="font-medium text-gray-900">"{name}"</span>?
+					<span class="font-medium text-gray-900 dark:text-gray-100">"{name}"</span>?
 				</p>
 			</div>
 
 			<!-- Impact Section -->
 			{#if list.length}
-				<div class="bg-gray-50 rounded-lg p-4">
-					<p class="font-medium text-gray-900 mb-3">Side effects:</p>
-					<ul class="space-y-2 ml-4 list-disc text-gray-600">
+				<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 transition-colors duration-200">
+					<p class="font-medium text-gray-900 dark:text-gray-100 mb-3">Side effects:</p>
+					<ul class="space-y-2 ml-4 list-disc text-gray-600 dark:text-gray-300">
 						{#each list as line}
 							<li>{line}</li>
 						{/each}
@@ -85,7 +85,7 @@
 			{/if}
 
 			{#if permanent}
-				<p class="text-red-700 font-medium">This action cannot be undone.</p>
+				<p class="text-red-700 dark:text-red-400 font-medium">This action cannot be undone.</p>
 			{/if}
 		</div>
 	</Alert>
diff --git a/frontend/src/lib/components/table/CopyCell.svelte b/frontend/src/lib/components/table/CopyCell.svelte
index 18633b1..ccef270 100644
--- a/frontend/src/lib/components/table/CopyCell.svelte
+++ b/frontend/src/lib/components/table/CopyCell.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <button
-	class="hover:bg-gray-100 px-2 py-1 rounded-md transition-colors w-full text-left text-ellipsis overflow-hidden"
+	class="hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors w-full text-left text-ellipsis overflow-hidden text-gray-900 dark:text-gray-100"
 	title={text}
 	on:click={() => onClickCopy(text)}
 >
diff --git a/frontend/src/lib/components/table/EmptyTableResult.svelte b/frontend/src/lib/components/table/EmptyTableResult.svelte
index a62dc33..c69eeeb 100644
--- a/frontend/src/lib/components/table/EmptyTableResult.svelte
+++ b/frontend/src/lib/components/table/EmptyTableResult.svelte
@@ -5,12 +5,16 @@
 	export let colspan = 100;
 </script>
 
-<tr class="text-center bg-pleasant-gray">
+<tr class="text-center bg-pleasant-gray dark:bg-gray-700 transition-colors duration-200">
 	<td class="p-24" {colspan}>
 		{#if page === 1}
-			<p class="text-lg text-gray-600">No {plural} found</p>
+			<p class="text-lg text-gray-600 dark:text-gray-300 transition-colors duration-200">
+				No {plural} found
+			</p>
 		{:else}
-			<p class="text-lg text-gray-600">No more results found</p>
+			<p class="text-lg text-gray-600 dark:text-gray-300 transition-colors duration-200">
+				No more results found
+			</p>
 		{/if}
 	</td>
 </tr>
diff --git a/frontend/src/lib/components/table/EventName.svelte b/frontend/src/lib/components/table/EventName.svelte
index 15d0d2c..6cded42 100644
--- a/frontend/src/lib/components/table/EventName.svelte
+++ b/frontend/src/lib/components/table/EventName.svelte
@@ -10,7 +10,9 @@
 	});
 </script>
 
-<div class="flex items-center text-ellipsis">
+<div
+	class="flex items-center text-ellipsis text-gray-900 dark:text-gray-100 transition-colors duration-200"
+>
 	<div class="w-4 h-4 {event.color} mr-2 rounded-sm"></div>
 	{event.name}
 </div>
diff --git a/frontend/src/lib/components/table/Table.svelte b/frontend/src/lib/components/table/Table.svelte
index 1bfdcb5..f25f6b8 100644
--- a/frontend/src/lib/components/table/Table.svelte
+++ b/frontend/src/lib/components/table/Table.svelte
@@ -56,10 +56,13 @@
 		<div
 			bind:this={tableWrapper}
 			class="
-			border-2 rounded-md px-4 py-4 overflow-x-auto
+			border-2 border-gray-200 dark:border-gray-600 rounded-md px-4 py-4 overflow-x-auto bg-white dark:bg-gray-800 transition-colors duration-200
 			{scrollBarClassesHorizontal}"
 		>
-			<table class="w-full table-fixed" class:animate-pulse={isGhost}>
+			<table
+				class="w-full table-fixed bg-white dark:bg-gray-800 transition-colors duration-200"
+				class:animate-pulse={isGhost}
+			>
 				<TableHeader {isGhost} {columns} {sortable} {hasActions} {pagination} />
 				{#if !hasData && !isGhost}
 					<EmptyTableResult page={currentPage} {plural} colspan={columnsLength} />
diff --git a/frontend/src/lib/components/table/TableCell.svelte b/frontend/src/lib/components/table/TableCell.svelte
index 1ca7491..9c6ca07 100644
--- a/frontend/src/lib/components/table/TableCell.svelte
+++ b/frontend/src/lib/components/table/TableCell.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <td
-	class={`pl-4 font-regular text-slate-600 text-ellipsis whitespace-nowrap overflow-hidden pr-4`}
+	class={`pl-4 font-regular text-slate-600 dark:text-gray-300 text-ellipsis whitespace-nowrap overflow-hidden pr-4 transition-colors duration-200`}
 	title={isDate ? '' : value}
 >
 	{#if value}
diff --git a/frontend/src/lib/components/table/TableCellAction.svelte b/frontend/src/lib/components/table/TableCellAction.svelte
index 97765d9..0e0261a 100644
--- a/frontend/src/lib/components/table/TableCellAction.svelte
+++ b/frontend/src/lib/components/table/TableCellAction.svelte
@@ -1,5 +1,5 @@
-<td class="pl-4 w-48 text-center border: hidden;">
-	<p class="font-regular text-slate-600">
+<td class="w-48 text-center border: hidden;">
+	<p class="font-regular text-slate-600 dark:text-gray-300 transition-colors duration-200">
 		<slot />
 	</p>
 </td>
diff --git a/frontend/src/lib/components/table/TableCellCheck.svelte b/frontend/src/lib/components/table/TableCellCheck.svelte
index 576562e..fd51baf 100644
--- a/frontend/src/lib/components/table/TableCellCheck.svelte
+++ b/frontend/src/lib/components/table/TableCellCheck.svelte
@@ -3,7 +3,9 @@
 </script>
 
 <td class="pl-4 w-40 text-center border: hidden;">
-	<p class="font-regular text-slate-600 flex justify-center">
+	<p
+		class="font-regular text-slate-600 dark:text-gray-300 flex justify-center transition-colors duration-200"
+	>
 		{value ? 'Yes' : 'No'}
 	</p>
 </td>
diff --git a/frontend/src/lib/components/table/TableCellEmpty.svelte b/frontend/src/lib/components/table/TableCellEmpty.svelte
index 0e8fb2c..b19712d 100644
--- a/frontend/src/lib/components/table/TableCellEmpty.svelte
+++ b/frontend/src/lib/components/table/TableCellEmpty.svelte
@@ -1,3 +1 @@
-<td class="pl-4 w-4 border: hidden;">
-	
-</td>
+<td class="pl-4 w-4 border: hidden; bg-white dark:bg-gray-800 transition-colors duration-200"> </td>
diff --git a/frontend/src/lib/components/table/TableDeleteButton2.svelte b/frontend/src/lib/components/table/TableDeleteButton2.svelte
index 9249c5c..e713592 100644
--- a/frontend/src/lib/components/table/TableDeleteButton2.svelte
+++ b/frontend/src/lib/components/table/TableDeleteButton2.svelte
@@ -8,12 +8,16 @@
 </script>
 
 {#if disabled}
-	<button class="px py text-slate-300 cursor-not-allowed" {disabled} {title}>
+	<button
+		class="px py text-slate-300 dark:text-gray-500 cursor-not-allowed transition-colors duration-200"
+		{disabled}
+		{title}
+	>
 		<p class="ml-2 text-left">{name}</p>
 	</button>
 {:else}
 	<button
-		class="px py-1 text-slate-600 hover:bg-red-400 hover:text-white cursor-pointer"
+		class="px py-1 text-slate-600 dark:text-gray-300 hover:bg-red-400 dark:hover:bg-red-500 hover:text-white cursor-pointer transition-colors duration-200"
 		on:click
 		{title}
 	>
diff --git a/frontend/src/lib/components/table/TableDropDownButton.svelte b/frontend/src/lib/components/table/TableDropDownButton.svelte
index 71061e1..e80ea26 100644
--- a/frontend/src/lib/components/table/TableDropDownButton.svelte
+++ b/frontend/src/lib/components/table/TableDropDownButton.svelte
@@ -16,12 +16,16 @@
 </script>
 
 {#if disabled}
-	<button class="px py-1 text-slate-300 cursor-not-allowed" {disabled} {title}>
+	<button
+		class="px py-1 text-slate-300 dark:text-gray-500 cursor-not-allowed transition-colors duration-200"
+		{disabled}
+		{title}
+	>
 		<p class="ml-2 text-left">{name}</p>
 	</button>
 {:else}
 	<button
-		class="px py-1 text-slate-600 hover:bg-highlight-blue hover:text-white cursor-pointer"
+		class="px py-1 text-slate-600 dark:text-gray-300 hover:bg-highlight-blue dark:hover:bg-blue-600 hover:text-white cursor-pointer transition-colors duration-200"
 		on:click
 		on:keydown={handleKeydown}
 		{title}
diff --git a/frontend/src/lib/components/table/TableDropDownEllipsis.svelte b/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
index 59565b2..360e007 100644
--- a/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
+++ b/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
@@ -128,16 +128,31 @@
 <div class="">
 	<button
 		bind:this={buttonRef}
-		class="py-2 px-2"
+		class="w-full h-full py-3 flex items-center justify-center"
 		on:click|stopPropagation|preventDefault={toggle}
 		on:keydown={handleKeydown}
 	>
 		<svg width="3.335557" height="16.465519" viewBox="0 0 0.88253281 4.3565019">
 			<g transform="translate(-892.25669,88.863024)">
 				<g transform="matrix(0,1.0139418,-1.0139418,0,802.48114,-807.2715)">
-					<circle class="fill-cta-blue" cx="708.99603" cy="-88.976357" r="0.40846577" />
-					<circle class="fill-cta-blue" cx="710.67859" cy="-88.976357" r="0.40846577" />
-					<circle class="fill-cta-blue" cx="712.36115" cy="-88.976357" r="0.40846577" />
+					<circle
+						class="fill-cta-blue dark:fill-blue-500 transition-colors duration-200"
+						cx="708.99603"
+						cy="-88.976357"
+						r="0.40846577"
+					/>
+					<circle
+						class="fill-cta-blue dark:fill-blue-500 transition-colors duration-200"
+						cx="710.67859"
+						cy="-88.976357"
+						r="0.40846577"
+					/>
+					<circle
+						class="fill-cta-blue dark:fill-blue-500 transition-colors duration-200"
+						cx="712.36115"
+						cy="-88.976357"
+						r="0.40846577"
+					/>
 				</g>
 			</g>
 		</svg>
@@ -145,7 +160,7 @@
 
 	<div
 		bind:this={menuRef}
-		class="absolute bg-white drop-shadow-md z-20 w-48 rounded-md overflow-y-scroll {scrollBarClassesVertical}"
+		class="absolute bg-white dark:bg-gray-800 drop-shadow-md dark:shadow-gray-900/50 border dark:border-gray-600 z-20 w-48 rounded-md overflow-y-scroll transition-colors duration-200 {scrollBarClassesVertical}"
 		class:hidden={!isMenuVisible}
 	>
 		<ul class="flex flex-col text-left">
diff --git a/frontend/src/lib/components/table/TableHead.svelte b/frontend/src/lib/components/table/TableHead.svelte
index 0366e38..8df2147 100644
--- a/frontend/src/lib/components/table/TableHead.svelte
+++ b/frontend/src/lib/components/table/TableHead.svelte
@@ -1,3 +1,3 @@
-<thead class="table-header-group">
-		<slot />
+<thead class="table-header-group bg-white dark:bg-gray-800 transition-colors duration-200">
+	<slot />
 </thead>
diff --git a/frontend/src/lib/components/table/TableHeadCell.svelte b/frontend/src/lib/components/table/TableHeadCell.svelte
index c243187..c9abce5 100644
--- a/frontend/src/lib/components/table/TableHeadCell.svelte
+++ b/frontend/src/lib/components/table/TableHeadCell.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <th
-	class="pl-4 bg-grayblue-light py-4 border-hidden first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:border-4 min-w-48"
+	class="pl-4 bg-grayblue-light dark:bg-gray-700 py-4 border-hidden first:rounded-tl-lg first:rounded-bl-lg last:rounded-tr-lg last:border-4 min-w-48 transition-colors duration-200"
 	class:rounded-br-lg={last}
 	class:rounded-tr-lg={last}
 	class:w-48={size === 'small'}
@@ -49,7 +49,9 @@
 		on:click|preventDefault={setSortAndSortBy}
 	>
 		<div class="w-full">
-			<p class="font-bold text-slate-600 text-{alignText} flex">
+			<p
+				class="font-bold text-slate-600 dark:text-gray-200 text-{alignText} flex transition-colors duration-200"
+			>
 				{#if !isGhost}
 					{title.length ? title : column}
 				{:else}
@@ -58,7 +60,7 @@
 				{#if sortable && column.toLowerCase() === sortBy.toLowerCase() && !isGhost}
 					<div
 						class:bg-transparent={sortOrder === ''}
-						class="flex justify-center items-center w-6 h-6 ml-2 rounded-md bg-cta-blue"
+						class="flex justify-center items-center w-6 h-6 ml-2 rounded-md bg-cta-blue dark:bg-blue-600 transition-colors duration-200"
 					>
 						{#if sortOrder === 'asc'}
 							<div>
diff --git a/frontend/src/lib/components/table/TableHeadCellAction.svelte b/frontend/src/lib/components/table/TableHeadCellAction.svelte
index 22ae731..ec36e31 100644
--- a/frontend/src/lib/components/table/TableHeadCellAction.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellAction.svelte
@@ -1,5 +1,7 @@
-<th class="bg-cta-light-blue w-20 py-4 border-hidden rounded-lg">
-	<p class="font-bold text-slate-600 text-center">
+<th
+	class="bg-cta-light-blue dark:bg-gray-700 w-20 py-4 border-hidden rounded-lg transition-colors duration-200"
+>
+	<p class="font-bold text-slate-600 dark:text-gray-200 text-center transition-colors duration-200">
 		<slot />
 	</p>
 </th>
diff --git a/frontend/src/lib/components/table/TableHeadCellCheck.svelte b/frontend/src/lib/components/table/TableHeadCellCheck.svelte
index 0ac4d45..3f7528a 100644
--- a/frontend/src/lib/components/table/TableHeadCellCheck.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellCheck.svelte
@@ -1,5 +1,9 @@
-<th class="pl-4 bg-grayblue-light w-48 py-4 border-hidden">
-	<p class="font-bold text-slate-600 flex justify-center text-center">
+<th
+	class="pl-4 bg-grayblue-light dark:bg-gray-700 w-48 py-4 border-hidden transition-colors duration-200"
+>
+	<p
+		class="font-bold text-slate-600 dark:text-gray-200 flex justify-center text-center transition-colors duration-200"
+	>
 		<slot />
 	</p>
 </th>
diff --git a/frontend/src/lib/components/table/TableHeadCellEmpty.svelte b/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
index aab85f8..5a223d8 100644
--- a/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
@@ -1,3 +1,2 @@
-<th class="pl-4 bg-white w-4 py-4 border-hidden">
-	
+<th class="pl-4 bg-white dark:bg-gray-800 w-4 py-4 border-hidden transition-colors duration-200">
 </th>
diff --git a/frontend/src/lib/components/table/TableHeadCellSingle.svelte b/frontend/src/lib/components/table/TableHeadCellSingle.svelte
index 2dc3a71..bcba896 100644
--- a/frontend/src/lib/components/table/TableHeadCellSingle.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellSingle.svelte
@@ -1,5 +1,7 @@
-<th class="pl-4 bg-grayblue-light w-48 py-4 border-hidden rounded-md">
-	<p class="font-bold text-slate-600 text-left">
+<th
+	class="pl-4 bg-grayblue-light dark:bg-gray-700 w-48 py-4 border-hidden rounded-md transition-colors duration-200"
+>
+	<p class="font-bold text-slate-600 dark:text-gray-200 text-left transition-colors duration-200">
 		<slot />
 	</p>
 </th>
diff --git a/frontend/src/lib/components/table/TableRow.svelte b/frontend/src/lib/components/table/TableRow.svelte
index 0ae5a12..2be3469 100644
--- a/frontend/src/lib/components/table/TableRow.svelte
+++ b/frontend/src/lib/components/table/TableRow.svelte
@@ -1,3 +1,5 @@
-<tr class="table-row odd:bg-white even:bg-pleasant-gray h-10 hover:bg-cta-light-blue">
+<tr
+	class="table-row odd:bg-white odd:dark:bg-gray-800 even:bg-pleasant-gray even:dark:bg-gray-900 h-10 hover:bg-cta-light-blue hover:dark:bg-indigo-800 transition-colors duration-200"
+>
 	<slot />
 </tr>
diff --git a/frontend/src/lib/components/table/TableRowEmpty.svelte b/frontend/src/lib/components/table/TableRowEmpty.svelte
index 3b3e70d..9e400ea 100644
--- a/frontend/src/lib/components/table/TableRowEmpty.svelte
+++ b/frontend/src/lib/components/table/TableRowEmpty.svelte
@@ -1,3 +1,3 @@
-<tr class="table-row bg-white h-4">
+<tr class="table-row bg-white dark:bg-gray-800 h-4 transition-colors duration-200">
 	<slot />
 </tr>
diff --git a/frontend/src/lib/theme.js b/frontend/src/lib/theme.js
index e97f215..2d73231 100644
--- a/frontend/src/lib/theme.js
+++ b/frontend/src/lib/theme.js
@@ -1,104 +1,108 @@
 import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
 
-// modeLight is the state for light mode
+// mode constants
 export const modeLight = 'light';
-// modeDark is the state for dark mode
 export const modeDark = 'dark';
-// modeNotSet is the state for when the mode is not set
 const modeNotSet = 'not-set';
-// modeKey is the key used to store the mode in localstorage
 const modeKey = 'theme-mode';
 
 /**
- * theme is either 'light' or 'dark' -
+ * theme store - either 'light' or 'dark'
  * use it to know which theme is current and subscribe to know when it changes
  */
-export const theme = writable('dark');
+export const theme = writable(modeLight);
 
 /**
- * toggleMode is used to toggle the theme mode from light to dark or vice versa
- * it is used by the toggle button in the header
- * @returns {void} - the new mode, either light or dark
+ * toggle the theme mode from light to dark or vice versa
+ * @returns {void}
  */
 export const toggleMode = () => {
 	theme.update((current) => {
-		let mode = current;
-		switch (mode) {
-			case modeLight:
-				mode = modeDark;
-				break;
-			case modeDark:
-				mode = modeLight;
-				break;
-			default:
-				throw new Error(`Unknown mode passed to changeMode: ${mode} - must be 'light' or 'dark'`);
-		}
-		setModeToLocalStorage(mode);
-		return mode;
+		const newMode = current === modeLight ? modeDark : modeLight;
+		setModeToLocalStorage(newMode);
+		applyThemeToHTML(newMode);
+		return newMode;
 	});
 };
 
 /**
- * setupTheme is used to set the theme mode
- * it must be called once it the bootstrapping of the application
- * it checks if a prefered mode is set in localstorage, if not
- * it checks the OS preferred mode and if that is not set it defaults to light
- * the default mode is saved to localstorage
- *
- * @returns {string} - the mode that was set, either light or dark
+ * setup the theme mode - must be called once during app bootstrapping
+ * checks localStorage, then OS preference, defaults to light
+ * @returns {string} the mode that was set
  */
 export function setupTheme() {
+	if (!browser) return modeLight;
+
 	let mode = getModeFromLocalStorage();
 	if (mode === modeNotSet) {
 		mode = getOSPreferredMode();
 		setModeToLocalStorage(mode);
 	}
-	changeMode(mode);
+
+	applyThemeToHTML(mode);
+	theme.set(mode);
 	return mode;
 }
 
 /**
- * getOSPreferredMode is used to get the OS preferred light or dark mode
- * @returns {string} - the mode that was set, either light or dark
+ * get the OS preferred light or dark mode
+ * @returns {string} either 'light' or 'dark'
  */
 export const getOSPreferredMode = () => {
+	if (!browser) return modeLight;
+
 	const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-	if (darkMediaQuery.matches) {
-		return modeDark;
-	}
-	return modeLight;
+	return darkMediaQuery.matches ? modeDark : modeLight;
 };
 
-/*
- * This function is used to set the theme mode in the local storage
- * @param {string} mode - light or dark
- * @returns {string}
+/**
+ * get the theme mode from localStorage
+ * @returns {string} the stored mode or 'not-set'
  */
 export const getModeFromLocalStorage = () => {
+	if (!browser) return modeNotSet;
 	return localStorage.getItem(modeKey) ?? modeNotSet;
 };
 
 /**
- * setModeToLocalStorage is used to set the theme mode in the local storage
- * @param {string} mode  - light or dark
+ * set the theme mode in localStorage
+ * @param {string} mode - either 'light' or 'dark'
  */
 export const setModeToLocalStorage = (mode) => {
+	if (!browser) return;
 	localStorage.setItem(modeKey, mode);
 };
 
 /**
- * changeMode is used to change the theme mode from light to dark or vice versa
- * @param {string} mode - light or dark
+ * apply the theme to the HTML element by adding/removing the 'dark' class
+ * @param {string} mode - either 'light' or 'dark'
  */
-const changeMode = (mode) => {
-	switch (mode) {
-		case modeLight:
-			theme.set(modeLight);
-			break;
-		case modeDark:
-			theme.set(modeDark);
-			break;
-		default:
-			throw new Error(`Unknown mode passed to changeMode: ${mode} - must be 'light' or 'dark'`);
+const applyThemeToHTML = (mode) => {
+	if (!browser) return;
+
+	const html = document.documentElement;
+	if (mode === modeDark) {
+		html.classList.add('dark');
+	} else {
+		html.classList.remove('dark');
 	}
 };
+
+/**
+ * set up theme change listener for OS preference changes
+ */
+export const setupOSThemeListener = () => {
+	if (!browser) return;
+
+	const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+	darkMediaQuery.addEventListener('change', (e) => {
+		// only update if user hasn't manually set a preference
+		const storedMode = getModeFromLocalStorage();
+		if (storedMode === modeNotSet) {
+			const newMode = e.matches ? modeDark : modeLight;
+			applyThemeToHTML(newMode);
+			theme.set(newMode);
+		}
+	});
+};
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 741d6de..3a5fc3d 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -17,6 +17,7 @@
 	import DesktopMenu from '$lib/components/header/DesktopMenu.svelte';
 	import { hideIsLoading, showIsLoading } from '$lib/store/loading';
 	import Header from '$lib/components/header/Header.svelte';
+	import { setupTheme, setupOSThemeListener } from '$lib/theme.js';
 	// Removed feature flags import - no longer needed
 
 	// services
@@ -50,6 +51,10 @@
 	});
 
 	onMount(() => {
+		// initialize theme system
+		setupTheme();
+		setupOSThemeListener();
+
 		(async () => {
 			// handle session
 			// if the user already has a active session, then the session will be
@@ -197,7 +202,7 @@
 	};
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col min-w-[768px]">
 	<!-- global components -->
 	<DeveloperPanel />
 	<Loader />
@@ -235,6 +240,8 @@
 
 		/* font-family: "Phudu"; */
 		font-family: 'Titillium Web';
+		min-width: 768px;
+		overflow-x: auto;
 	}
 	:global(table) {
 		user-select: text;
diff --git a/frontend/src/routes/api-sender/+page.svelte b/frontend/src/routes/api-sender/+page.svelte
index 927746f..e4e04a1 100644
--- a/frontend/src/routes/api-sender/+page.svelte
+++ b/frontend/src/routes/api-sender/+page.svelte
@@ -354,8 +354,10 @@
 			<FormColumns>
 				<FormColumn>
 					<!-- Basic Information Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Basic Information</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Basic Information
+						</h3>
 						<TextField
 							required
 							minLength={1}
@@ -366,8 +368,10 @@
 					</div>
 
 					<!-- API Configuration Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">API Configuration</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							API Configuration
+						</h3>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 							<div class="md:col-span-2">
 								<TextField
@@ -404,7 +408,9 @@
 
 					<!-- Headers and Body Section -->
 					<div class="mb-6 pt-4 pb-2 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Request Details</h3>
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Request Details
+						</h3>
 						<div class="space-y-5">
 							<TextareaField
 								optional={true}
@@ -420,9 +426,9 @@ X-Custom-Header: Hello Friend"
 							>
 							<div class="flex flex-col py-2 w-full">
 								<div class="flex items-center">
-									<p class="font-bold text-slate-600 py-2">Request Body</p>
-									<div class="bg-gray-100 ml-2 px-2 rounded-md">
-										<p class="text-slate-600 text-xs">optional</p>
+									<p class="font-bold text-slate-600 dark:text-gray-300 py-2">Request Body</p>
+									<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md">
+										<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 									</div>
 								</div>
 								<SimpleCodeEditor
@@ -441,8 +447,10 @@ X-Custom-Header: Hello Friend"
 					</div>
 
 					<!-- Response Validation Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Response Validation</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Response Validation
+						</h3>
 						<div class="space-y-5">
 							<div>
 								<TextField
@@ -481,7 +489,9 @@ X-Custom-Header: Hello Friend"
 
 					<!-- Custom Fields Section -->
 					<div class="pt-4 pb-2 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Custom Fields</h3>
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Custom Fields
+						</h3>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 							<div>
 								<TextField
@@ -536,9 +546,13 @@ X-Custom-Header: Hello Friend"
 		<div class="col-span-3 w-full overflow-y-auto px-6 py-4 space-y-6 select-text">
 			{#if !testResponse.error}
 				<!-- Successful Test -->
-				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Request Details</h3>
-					<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Request Details
+					</h3>
+					<div
+						class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+					>
 						<div class="font-medium">
 							{testResponse.apiSender?.requestMethod}
 							{testResponse?.request?.url}
@@ -546,9 +560,13 @@ X-Custom-Header: Hello Friend"
 					</div>
 				</div>
 
-				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Request Headers</h3>
-					<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Request Headers
+					</h3>
+					<div
+						class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+					>
 						<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-60">{headersToString(
 								testResponse.request?.headers
 							) || 'No headers'}</pre>
@@ -556,17 +574,23 @@ X-Custom-Header: Hello Friend"
 				</div>
 
 				<div class="pt-4 pb-2 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Request Body</h3>
-					<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">Request Body</h3>
+					<div
+						class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+					>
 						<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-80">{testResponse.request
 								?.body || 'Empty body'}</pre>
 					</div>
 				</div>
 				<!-- response -->
-				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Response Status</h3>
+				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Response Status
+					</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Received:</div>
 							<div
 								class={testResponse.response?.code ==
@@ -577,23 +601,31 @@ X-Custom-Header: Hello Friend"
 								{testResponse.response?.code}
 							</div>
 						</div>
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Expected:</div>
 							<div>{testResponse.apiSender?.expectedResponseStatusCode}</div>
 						</div>
 					</div>
 				</div>
 
-				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Response Headers</h3>
+				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Response Headers
+					</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Received:</div>
 							<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-60">{headersToString(
 									testResponse.response?.headers
 								) || 'No headers'}</pre>
 						</div>
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Expected to contain:</div>
 							<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-60">{testResponse
 									.apiSender?.expectedResponseHeaders || 'No validation specified'}</pre>
@@ -602,14 +634,18 @@ X-Custom-Header: Hello Friend"
 				</div>
 
 				<div class="pt-4 pb-2 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Response Body</h3>
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">Response Body</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Received:</div>
 							<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-80">{testResponse
 									.response?.body || 'Empty response'}</pre>
 						</div>
-						<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+						<div
+							class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+						>
 							<div class="text-sm font-medium mb-1">Expected to contain:</div>
 							<pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-80">{testResponse
 									.apiSender?.expectedResponseBody || 'No validation specified'}</pre>
@@ -618,9 +654,13 @@ X-Custom-Header: Hello Friend"
 				</div>
 			{:else}
 				<!-- Error Case -->
-				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Request Details</h3>
-					<div class="p-3 bg-gray-50 rounded-md border border-gray-200">
+				<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Request Details
+					</h3>
+					<div
+						class="p-3 bg-gray-50 dark:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600"
+					>
 						<div class="font-medium">
 							{testResponse.apiSender?.requestMethod}
 							{testResponse.apiSender?.requestURL}
@@ -636,11 +676,11 @@ X-Custom-Header: Hello Friend"
 			{/if}
 
 			<!-- Footer with Close Button -->
-			<div class="pt-4 border-t border-gray-200">
+			<div class="pt-4 border-t border-gray-200 dark:border-gray-600">
 				<div class="flex justify-end">
 					<button
 						type="button"
-						class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+						class="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 						on:click={closeTestModal}
 					>
 						Close
diff --git a/frontend/src/routes/campaign-template/+page.svelte b/frontend/src/routes/campaign-template/+page.svelte
index 8ed1e27..bb26db1 100644
--- a/frontend/src/routes/campaign-template/+page.svelte
+++ b/frontend/src/routes/campaign-template/+page.svelte
@@ -661,7 +661,9 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 			<div class="col-span-3 w-full overflow-y-auto px-6 py-4 space-y-8">
 				<!-- Basic Information Section -->
 				<div class="w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Basic Information</h3>
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Basic Information
+					</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 						<div>
 							<TextField
@@ -689,7 +691,9 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 				<!-- Delivery Configuration Section -->
 				<div class="w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Delivery Configuration</h3>
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Delivery Configuration
+					</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 						<div>
 							{#if formValues.templateType === 'Email' || !formValues.templateType}
@@ -721,7 +725,9 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 				<!-- Domain & URL Configuration Section -->
 				<div class="w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Domain & URL Configuration</h3>
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+						Domain & URL Configuration
+					</h3>
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
 						<div>
 							<TextFieldSelect
@@ -764,7 +770,7 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 				<!-- Page Flow Section -->
 				<div class="w-full">
-					<h3 class="text-base font-medium text-pc-darkblue mb-3">Page Flow</h3>
+					<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">Page Flow</h3>
 					<div class="grid grid-cols-1 md:grid-cols-5 gap-6">
 						<div class="md:col-span-2 flex flex-col space-y-4">
 							<div>
diff --git a/frontend/src/routes/campaign/+page.svelte b/frontend/src/routes/campaign/+page.svelte
index 98d8636..7269813 100644
--- a/frontend/src/routes/campaign/+page.svelte
+++ b/frontend/src/routes/campaign/+page.svelte
@@ -1042,7 +1042,9 @@
 	<Modal headerText={modalText} visible={isModalVisible} onClose={closeModal} {isSubmitting}>
 		<div class="relative flex justify-between items-center mb-8 w-full px-4">
 			<!-- Connector Line -->
-			<div class="absolute h-[2px] bg-gray-200 top-1/2 left-0 right-0 -translate-y-1/2 -z-10" />
+			<div
+				class="absolute h-[2px] bg-gray-200 dark:bg-gray-600 top-1/2 left-0 right-0 -translate-y-1/2 -z-10 transition-colors duration-200"
+			/>
 
 			{#each campaignSteps as step, index}
 				<div class="flex flex-col items-center w-20 sm:w-32">
@@ -1053,10 +1055,10 @@
           transition-colors duration-200
           ${
 						currentStep > index + 1
-							? 'bg-blue-300 text-white'
+							? 'bg-blue-300 dark:bg-indigo-700 text-white'
 							: currentStep === index + 1
-								? 'bg-blue-600 text-white'
-								: 'bg-white text-gray-500 border-2 border-gray-300'
+								? 'bg-blue-600 dark:bg-indigo-600 text-white'
+								: 'bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-600'
 					}
         `}
 					>
@@ -1083,7 +1085,9 @@
 						class={`
           mt-2 text-xs sm:text-sm font-medium text-center
           ${
-						currentStep > index + 1 || currentStep === index + 1 ? 'text-blue-600' : 'text-gray-500'
+						currentStep > index + 1 || currentStep === index + 1
+							? 'text-blue-600 dark:text-blue-400'
+							: 'text-gray-500 dark:text-gray-400'
 					}
         `}
 					>
@@ -1167,7 +1171,7 @@
 										Delivery start
 									</DateTimeField>
 									<button
-										class="text-cta-blue hover:text-blue-700 text-sm"
+										class="text-cta-blue hover:text-blue-700 dark:text-white dark:hover:text-gray-200 text-sm transition-colors duration-200"
 										on:click|preventDefault={() =>
 											(formValues.sendStartAt = new Date().toISOString())}
 									>
@@ -1178,7 +1182,9 @@
 								{#if formValues.sendStartAt}
 									<div class="pl-36 pt-4 pb-6">
 										<div class="flex flex-col gap-2">
-											<p class="text-sm font-semibold text-slate-600">
+											<p
+												class="text-sm font-semibold text-slate-600 dark:text-gray-300 transition-colors duration-200"
+											>
 												Distribution Speed
 
 												<span class="italic font-normal">
@@ -1237,7 +1243,7 @@
 									</DateTimeField>
 									{#if spreadOption === SPREAD_MANUAL}
 										<button
-											class="text-cta-blue hover:text-blue-700 text-sm"
+											class="text-cta-blue hover:text-blue-700 dark:text-white dark:hover:text-gray-200 text-sm transition-colors duration-200"
 											on:click|preventDefault={() => {
 												formValues.sendEndAt = new Date().toISOString();
 											}}
@@ -1472,38 +1478,56 @@
 							<!-- First Row: Basic Info and Recipients -->
 							<div class="grid grid-cols-2 gap-6">
 								<!-- Basic Information -->
-								<div class="bg-white p-6 rounded-lg shadow-sm">
-									<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+								<div
+									class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm transition-colors duration-200"
+								>
+									<h3
+										class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b dark:border-gray-600 pb-2 transition-colors duration-200"
+									>
 										Basic Information
 									</h3>
 									<div class="grid grid-cols-[120px_1fr] gap-y-3">
 										<span class="text-grayblue-dark font-medium">Name:</span>
-										<span class="text-pc-darkblue">{formValues.name || 'Not set'}</span>
+										<span class="text-pc-darkblue dark:text-white"
+											>{formValues.name || 'Not set'}</span
+										>
 
 										<span class="text-grayblue-dark font-medium">Template:</span>
-										<span class="text-pc-darkblue">{formValues.template || 'Not set'}</span>
+										<span class="text-pc-darkblue dark:text-white"
+											>{formValues.template || 'Not set'}</span
+										>
 
 										<span class="text-grayblue-dark font-medium">Type:</span>
-										<span class="text-pc-darkblue">{formValues.isTest ? 'Test' : 'Production'}</span
+										<span class="text-pc-darkblue dark:text-white"
+											>{formValues.isTest ? 'Test' : 'Production'}</span
+										>
 										>
 									</div>
 								</div>
 
 								<!-- Recipients -->
-								<div class="bg-white p-6 rounded-lg shadow-sm">
-									<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+								<div
+									class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm transition-colors duration-200"
+								>
+									<h3
+										class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b dark:border-gray-600 pb-2 transition-colors duration-200"
+									>
 										Recipients
 									</h3>
 									<div class="grid grid-cols-[120px_1fr] gap-y-3">
 										<span class="text-grayblue-dark font-medium">Groups:</span>
-										<span class="text-pc-darkblue">
+										<span
+											class="text-pc-darkblue dark:text-gray-100 transition-colors duration-200"
+										>
 											{formValues.recipientGroups.length
 												? formValues.recipientGroups.join(', ')
 												: 'None selected'}
 										</span>
 
 										<span class="text-grayblue-dark font-medium">Total:</span>
-										<span class="text-pc-darkblue">{formValues.selectedCount} recipients</span>
+										<span class="text-pc-darkblue dark:text-white"
+											>{formValues.selectedCount} recipients</span
+										>
 									</div>
 								</div>
 							</div>
@@ -1511,8 +1535,12 @@
 							<!-- Second Row: Email and Schedule -->
 							<div class="grid grid-cols-2 gap-6">
 								<!-- Email/API Sender Information -->
-								<div class="bg-white p-6 rounded-lg shadow-sm">
-									<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+								<div
+									class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm transition-colors duration-200"
+								>
+									<h3
+										class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b dark:border-gray-600 pb-2 transition-colors duration-200"
+									>
 										Delivery Details
 									</h3>
 									{#await getTemplateDetails(formValues.template)}
@@ -1521,36 +1549,44 @@
 										{#if template?.apiSender}
 											<div class="grid grid-cols-[120px_1fr] gap-y-3">
 												<span class="text-grayblue-dark font-medium">Type:</span>
-												<span class="text-pc-darkblue font-semibold">API Sender</span>
+												<span class="text-pc-darkblue dark:text-white font-semibold"
+													>API Sender</span
+												>
 
 												<span class="text-grayblue-dark font-medium">Name:</span>
-												<span class="text-pc-darkblue">{template.apiSender.name || 'Not set'}</span>
+												<span class="text-pc-darkblue dark:text-white"
+													>{template.apiSender.name || 'Not set'}</span
+												>
 
 												{#if template?.email}
 													<span class="text-grayblue-dark font-medium">Email:</span>
-													<span class="text-pc-darkblue">{template.email.name || 'Not set'}</span>
+													<span class="text-pc-darkblue dark:text-white"
+														>{template.email.name || 'Not set'}</span
+													>
 												{/if}
 											</div>
 										{:else if template?.email}
 											<div class="grid grid-cols-[120px_1fr] gap-y-3">
 												<span class="text-grayblue-dark font-medium">Type:</span>
-												<span class="text-pc-darkblue font-semibold">SMTP</span>
+												<span class="text-pc-darkblue dark:text-white font-semibold">SMTP</span>
 
 												<span class="text-grayblue-dark font-medium">Name:</span>
-												<span class="text-pc-darkblue">{template.email.name || 'Not set'}</span>
+												<span class="text-pc-darkblue dark:text-white"
+													>{template.email.name || 'Not set'}</span
+												>
 
 												<span class="text-grayblue-dark font-medium">From:</span>
-												<span class="text-pc-darkblue"
+												<span class="text-pc-darkblue dark:text-white"
 													>{template.email.mailHeaderFrom || 'Not set'}</span
 												>
 
 												<span class="text-grayblue-dark font-medium">Mail from:</span>
-												<span class="text-pc-darkblue"
+												<span class="text-pc-darkblue dark:text-white"
 													>{template.email.mailEnvelopeFrom || 'Not set'}</span
 												>
 
 												<span class="text-grayblue-dark font-medium">Subject:</span>
-												<span class="text-pc-darkblue"
+												<span class="text-pc-darkblue dark:text-white"
 													>{template.email.mailHeaderSubject || 'Not set'}</span
 												>
 											</div>
@@ -1565,43 +1601,58 @@
 								</div>
 
 								<!-- Schedule -->
-								<div class="bg-white p-6 rounded-lg shadow-sm">
-									<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+								<div
+									class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm transition-colors duration-200"
+								>
+									<h3
+										class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b dark:border-gray-600 pb-2 transition-colors duration-200"
+									>
 										Schedule
 									</h3>
 									<div class="grid grid-cols-[120px_1fr] gap-y-3">
 										<span class="text-grayblue-dark font-medium">Type:</span>
-										<span class="text-pc-darkblue capitalize">{scheduleType}</span>
+										<span class="text-pc-darkblue dark:text-white capitalize">{scheduleType}</span>
 
 										{#if scheduleType === 'basic'}
 											<span class="text-grayblue-dark font-medium">Start:</span>
-											<span class="text-pc-darkblue">
+											<span
+												class="text-pc-darkblue dark:text-gray-100 transition-colors duration-200"
+											>
 												<Datetime value={formValues.sendStartAt} />
 												<RelativeTime value={formValues.sendStartAt} />
 											</span>
 
-											<span class="text-grayblue-dark font-medium">End:</span>
-											<span class="text-pc-darkblue">
+											<span
+												class="text-grayblue-dark dark:text-gray-300 font-medium transition-colors duration-200"
+												>End:</span
+											>
+											<span
+												class="text-pc-darkblue dark:text-gray-100 transition-colors duration-200"
+											>
 												<Datetime value={formValues.sendEndAt} />
 												<RelativeTime value={formValues.sendEndAt} />
 											</span>
 
 											{#if spreadOption && spreadOption !== SPREAD_MANUAL}
 												<span class="text-grayblue-dark font-medium">Spread:</span>
-												<span class="text-pc-darkblue">
+												<span
+													class="text-pc-darkblue dark:text-gray-100 transition-colors duration-200"
+												>
 													{spreadOptionMap.byValue(spreadOption)}
 												</span>
 											{/if}
 										{:else if scheduleType === 'schedule'}
 											<span class="text-grayblue-dark font-medium">Active days:</span>
-											<span class="text-pc-darkblue">
+											<span
+												class="text-pc-darkblue dark:text-gray-100 transition-colors duration-200"
+											>
 												{formValues.constraintWeekDays.map((d) => dayMap[d]).join(', ') ||
 													'None selected'}
 											</span>
 
 											{#if formValues.contraintStartTime && formValues.contraintEndTime}
 												<span class="text-grayblue-dark font-medium">Hours:</span>
-												<span class="text-pc-darkblue">
+												<span class="text-pc-darkblue dark:text-white">
 													{formValues.contraintStartTime} - {formValues.contraintEndTime}
 												</span>
 											{/if}
@@ -1609,7 +1660,7 @@
 
 										{#if formValues.closeAt}
 											<span class="text-grayblue-dark font-medium">Close at:</span>
-											<span class="text-pc-darkblue">
+											<span class="text-pc-darkblue dark:text-white">
 												<Datetime value={formValues.closeAt} />
 												<RelativeTime value={formValues.closeAt} />
 											</span>
@@ -1620,13 +1671,17 @@
 
 							<!-- Third Row: Security & Privacy -->
 							<div class="grid grid-cols-1 gap-6">
-								<div class="bg-white p-6 rounded-lg shadow-sm">
-									<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+								<div
+									class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm transition-colors duration-200"
+								>
+									<h3
+										class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b dark:border-gray-600 pb-2 transition-colors duration-200"
+									>
 										Security & Privacy
 									</h3>
 									<div class="grid grid-cols-[120px_1fr] gap-y-3">
 										<span class="text-grayblue-dark font-medium">IP Filtering:</span>
-										<span class="text-pc-darkblue">
+										<span class="text-pc-darkblue dark:text-white">
 											{#if allowDenyType === 'none'}
 												None
 											{:else}
@@ -1638,7 +1693,7 @@
 										</span>
 
 										<span class="text-grayblue-dark font-medium">Save data:</span>
-										<span class="text-pc-darkblue"
+										<span class="text-pc-darkblue dark:text-white"
 											>{formValues.saveSubmittedData ? 'Enabled' : 'Disabled'}</span
 										>
 
@@ -1651,17 +1706,20 @@
 
 										{#if formValues.webhookValue}
 											<span class="text-grayblue-dark font-medium">Webhook:</span>
-											<span class="text-pc-darkblue">{formValues.webhookValue}</span>
+											<span class="text-pc-darkblue dark:text-white">{formValues.webhookValue}</span
+											>
 										{/if}
 
 										{#if formValues.denyPageValue}
 											<span class="text-grayblue-dark font-medium">Deny Page:</span>
-											<span class="text-pc-darkblue">{formValues.denyPageValue}</span>
+											<span class="text-pc-darkblue dark:text-white"
+												>{formValues.denyPageValue}</span
+											>
 										{/if}
 
 										{#if formValues.anonymizeAt}
 											<span class="text-grayblue-dark font-medium">Anonymize at:</span>
-											<span class="text-pc-darkblue">
+											<span class="text-pc-darkblue dark:text-white">
 												<Datetime value={formValues.anonymizeAt} />
 												<RelativeTime value={formValues.anonymizeAt} />
 											</span>
@@ -1674,11 +1732,13 @@
 				</FormColumns>
 			{/if}
 			<FormError message={modalError} />
-			<div class="col-span-3 flex justify-between items-center w-full mt-2 border-t py-6">
+			<div
+				class="col-span-3 flex justify-between items-center w-full mt-2 border-t dark:border-gray-600 py-6 transition-colors duration-200"
+			>
 				{#if currentStep > 1}
 					<button
 						type="button"
-						class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+						class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 						on:click={previousStep}
 					>
 						<svg
diff --git a/frontend/src/routes/campaign/[id]/+page.svelte b/frontend/src/routes/campaign/[id]/+page.svelte
index fc0ea29..622020a 100644
--- a/frontend/src/routes/campaign/[id]/+page.svelte
+++ b/frontend/src/routes/campaign/[id]/+page.svelte
@@ -38,6 +38,7 @@
 	import EventName from '$lib/components/table/EventName.svelte';
 	import { goto } from '$app/navigation';
 	import { globalButtonDisabledAttributes } from '$lib/utils/form';
+	import FileField from '$lib/components/FileField.svelte';
 
 	// services
 	const appStateService = AppStateService.instance;
@@ -1062,18 +1063,20 @@
 			<!-- First Row: Details and Timeline -->
 			<div class="grid grid-cols-1 lg:grid-cols-2">
 				<!-- Primary Campaign Info -->
-				<div class="bg-white py-6 rounded-lg">
-					<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Details</h3>
+				<div class="py-6 rounded-lg">
+					<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+						Details
+					</h3>
 					<div class="grid grid-cols-[120px_1fr] gap-y-3">
 						<span class="text-grayblue-dark font-medium">Status:</span>
-						<span class="text-pc-darkblue font-semibold">
+						<span class="text-pc-darkblue dark:text-white font-semibold">
 							{toEvent(campaign.notableEventName).name}
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Template:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							<button
-								class="cursor-pointer text-cta-blue underline hover:opacity-75"
+								class="cursor-pointer text-cta-blue dark:text-white underline hover:opacity-75"
 								on:click={() => {
 									openTemplateModal(templateMap.byValue(campaign.template));
 								}}
@@ -1083,10 +1086,10 @@
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Groups:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{#each campaign.recipientGroups as group, i}
 								<a
-									class="hover:underline text-cta-blue hover:opacity-75 underline"
+									class="hover:underline text-cta-blue dark:text-white hover:opacity-75 underline"
 									href="/recipient/group/{recipientGroupMap.byValue(group)}"
 									target="_blank">{group}</a
 								>{#if i !== (campaign.recipientGroups?.length ?? 0) - 1}
@@ -1096,18 +1099,20 @@
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Type:</span>
-						<span class="text-pc-darkblue">{isSelfManaged ? 'Self Managed' : 'Scheduled'}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{isSelfManaged ? 'Self Managed' : 'Scheduled'}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">
 							{campaign?.allowDeny ? (campaign.allowDeny.allowed ? 'Allow' : 'Deny') : ''}
 							IP Filters:
 						</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{#if campaign.allowDeny?.length}
 								{#each campaign.allowDeny as allowDeny, i}
 									<a
 										href="/ip-filter/?edit={allowDeny.id}"
-										class="text-pc-blue hover:underline"
+										class="text-cta-blue dark:text-white hover:underline"
 										target="_blank"
 									>
 										{allowDeny.name}
@@ -1121,7 +1126,7 @@
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Webhook:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{#if campaign.webhookID}
 								Yes
 							{:else}
@@ -1130,44 +1135,60 @@
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Data Saving:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{campaign.saveSubmittedData ? 'Enabled' : 'Disabled'}
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Test:</span>
-						<span class="text-pc-darkblue">{campaign.isTest ? 'Yes' : 'No'}</span>
+						<span class="text-pc-darkblue dark:text-white">{campaign.isTest ? 'Yes' : 'No'}</span>
 					</div>
 				</div>
 
-				<div class="bg-white p-6 rounded-lg">
-					<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Timeline</h3>
+				<div class="p-6 rounded-lg">
+					<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+						Timeline
+					</h3>
 					<div class="grid grid-cols-[120px_1fr] gap-y-3">
 						<span class="text-grayblue-dark font-medium">Created:</span>
-						<span class="text-pc-darkblue"><Datetime value={campaign.createdAt} /></span>
+						<span class="text-pc-darkblue dark:text-white"
+							><Datetime value={campaign.createdAt} /></span
+						>
 
 						{#if !isSelfManaged}
 							<span class="text-grayblue-dark font-medium">Delivery start:</span>
-							<span class="text-pc-darkblue"><Datetime value={campaign.sendStartAt} /></span>
+							<span class="text-pc-darkblue dark:text-white"
+								><Datetime value={campaign.sendStartAt} /></span
+							>
 
 							<span class="text-grayblue-dark font-medium">Delivery finish:</span>
-							<span class="text-pc-darkblue"><Datetime value={campaign.sendEndAt} /></span>
+							<span class="text-pc-darkblue dark:text-white"
+								><Datetime value={campaign.sendEndAt} /></span
+							>
 						{/if}
 
 						<span class="text-grayblue-dark font-medium">Close At:</span>
-						<span class="text-pc-darkblue"><Datetime value={campaign.closeAt} /></span>
+						<span class="text-pc-darkblue dark:text-white"
+							><Datetime value={campaign.closeAt} /></span
+						>
 
 						<span class="text-grayblue-dark font-medium">Closed:</span>
-						<span class="text-pc-darkblue"><Datetime value={campaign.closedAt} /></span>
+						<span class="text-pc-darkblue dark:text-white"
+							><Datetime value={campaign.closedAt} /></span
+						>
 
 						<span class="text-grayblue-dark font-medium">Anonymize At:</span>
-						<span class="text-pc-darkblue"><Datetime value={campaign.anonymizeAt} /></span>
+						<span class="text-pc-darkblue dark:text-white"
+							><Datetime value={campaign.anonymizeAt} /></span
+						>
 
 						<span class="text-grayblue-dark font-medium">Anonymized:</span>
-						<span class="text-pc-darkblue"><Datetime value={campaign.anonymizedAt} /></span>
+						<span class="text-pc-darkblue dark:text-white"
+							><Datetime value={campaign.anonymizedAt} /></span
+						>
 					</div>
 
 					{#if campaign.constraintWeekDays}
-						<div class="bg-white py-6 rounded-lg">
+						<div class="py-6 rounded-lg">
 							<div class="flex gap-8">
 								<!-- Days Schedule -->
 								<div class="flex-1">
@@ -1244,8 +1265,10 @@
 			<!-- Second Row: Schedule Constraints and Actions -->
 			<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 				<div></div>
-				<div class="bg-white p-6 rounded-lg">
-					<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Actions</h3>
+				<div class="p-6 rounded-lg">
+					<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+						Actions
+					</h3>
 					<div class="space-y-4">
 						<!-- Action Buttons -->
 						<div class="flex flex-wrap gap-3">
@@ -1292,20 +1315,10 @@
 						<!-- Upload Section -->
 						<div class="border-t pt-4">
 							<div>
-								<label
-									for="reported-csv-upload"
-									class="block text-sm font-medium text-gray-700 mb-2"
-								>
+								<FileField accept=".csv" on:change={onUploadReportedCSV}>
 									Upload Reported CSV
-								</label>
-								<input
-									type="file"
-									id="reported-csv-upload"
-									accept=".csv"
-									on:change={onUploadReportedCSV}
-									class="block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-reported file:text-white hover:file:opacity-80"
-								/>
-								<p class="mt-1 text-xs text-gray-500">
+								</FileField>
+								<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
 									CSV format: "Reported by" (email), "Date reported(UTC+02:00)"
 								</p>
 							</div>
@@ -1551,15 +1564,17 @@
 	>
 		<div class="space-y-6">
 			<!-- Full-width Landing Page Flow -->
-			<div class="bg-white p-6 rounded-lg">
-				<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Phishing Flow</h3>
+			<div class="p-6 rounded-lg">
+				<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+					Phishing Flow
+				</h3>
 
 				<!-- Enhanced Flow Visualization -->
 				<div class="flex items-center justify-center mb-6 text-sm">
 					<div class="flex items-center flex-wrap justify-center gap-2">
 						<!-- First block is always the delivery method -->
-						<div class="text-center px-3 py-2 bg-pc-lightblue rounded">
-							<div class="font-medium">
+						<div class="text-center px-3 py-2 bg-pc-lightblue dark:bg-blue-600 rounded">
+							<div class="font-medium text-gray-800 dark:text-white">
 								{#if template.email}
 									Email
 								{:else}
@@ -1575,8 +1590,8 @@
 
 						<!-- Before Landing -->
 						{#if template.beforeLandingPage}
-							<div class="text-center px-3 py-2 bg-pc-lightblue rounded">
-								<div class="font-medium">Before Landing</div>
+							<div class="text-center px-3 py-2 bg-pc-lightblue dark:bg-blue-600 rounded">
+								<div class="font-medium text-gray-800 dark:text-white">Before Landing</div>
 							</div>
 							<!-- Only show arrow if there's a next step -->
 							{#if template.landingPage}
@@ -1586,8 +1601,8 @@
 
 						<!-- Main Landing -->
 						{#if template.landingPage}
-							<div class="text-center px-3 py-2 bg-pc-lightblue rounded">
-								<div class="font-medium">Main Landing</div>
+							<div class="text-center px-3 py-2 bg-pc-lightblue dark:bg-blue-600 rounded">
+								<div class="font-medium text-gray-800 dark:text-white">Main Landing</div>
 							</div>
 							<!-- Only show arrow if there's a next step -->
 							{#if template.afterLandingPage || template.afterLandingPageRedirectURL}
@@ -1597,14 +1612,14 @@
 
 						<!-- After Landing or Redirect -->
 						{#if template.afterLandingPage}
-							<div class="text-center px-3 py-2 bg-pc-lightblue rounded">
-								<div class="font-medium">After Landing</div>
+							<div class="text-center px-3 py-2 bg-pc-lightblue dark:bg-blue-600 rounded">
+								<div class="font-medium text-gray-800 dark:text-white">After Landing</div>
 							</div>
 						{/if}
 						{#if template.afterLandingPageRedirectURL}
 							<div class="mx-2">→</div>
-							<div class="text-center px-3 py-2 bg-pc-lightorange rounded">
-								<div class="font-medium">Redirect</div>
+							<div class="text-center px-3 py-2 bg-pc-lightorange dark:bg-orange-600 rounded">
+								<div class="font-medium text-gray-800 dark:text-white">Redirect</div>
 							</div>
 						{/if}
 					</div>
@@ -1614,22 +1629,26 @@
 			<!-- Basic Info and Email Config -->
 			<div class="grid grid-cols-2 gap-6">
 				<!-- Basic Info Section -->
-				<div class="bg-white p-6 rounded-lg">
-					<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+				<div class="p-6 rounded-lg">
+					<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
 						Basic Information
 					</h3>
 					<div class="grid grid-cols-[120px_1fr] gap-y-3">
 						<span class="text-grayblue-dark font-medium">Name:</span>
-						<span class="text-pc-darkblue">{template.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white">{template.name ?? ''}</span>
 
 						<span class="text-grayblue-dark font-medium">Query Key:</span>
-						<span class="text-pc-darkblue">{template.urlIdentifier?.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.urlIdentifier?.name ?? ''}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">State Key:</span>
-						<span class="text-pc-darkblue">{template.stateIdentifier?.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.stateIdentifier?.name ?? ''}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">Delivery :</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{#if template.email}
 								Email ({template.email.name ?? ''})
 							{:else}
@@ -1638,38 +1657,49 @@
 						</span>
 
 						<span class="text-grayblue-dark font-medium">Before Page:</span>
-						<span class="text-pc-darkblue">{template.beforeLandingPage?.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.beforeLandingPage?.name ?? ''}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">Main Page:</span>
-						<span class="text-pc-darkblue">{template.landingPage?.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white">{template.landingPage?.name ?? ''}</span>
 
 						<span class="text-grayblue-dark font-medium">After Page:</span>
-						<span class="text-pc-darkblue">{template.afterLandingPage?.name ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.afterLandingPage?.name ?? ''}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">Redirect URL:</span>
-						<span class="text-pc-darkblue">{template.afterLandingPageRedirectURL ?? ''}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.afterLandingPageRedirectURL ?? ''}</span
+						>
 					</div>
 				</div>
 
 				<!-- Email Configuration -->
 				{#if template.email}
-					<div class="bg-white p-6 rounded-lg">
-						<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Email</h3>
+					<div class="p-6 rounded-lg">
+						<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+							Email
+						</h3>
 						<div class="grid grid-cols-[120px_1fr] gap-y-3">
 							<span class="text-grayblue-dark font-medium">Name:</span>
-							<span class="text-pc-darkblue">{template.email.name}</span>
+							<span class="text-pc-darkblue dark:text-white">{template.email.name}</span>
 
 							<span class="text-grayblue-dark font-medium">Envelope:</span>
-							<span class="text-pc-darkblue">{template.email.mailEnvelopeFrom}</span>
+							<span class="text-pc-darkblue dark:text-white">{template.email.mailEnvelopeFrom}</span
+							>
 
 							<span class="text-grayblue-dark font-medium">From:</span>
-							<span class="text-pc-darkblue">{template.email.mailHeaderFrom}</span>
+							<span class="text-pc-darkblue dark:text-white">{template.email.mailHeaderFrom}</span>
 
 							<span class="text-grayblue-dark font-medium">Subject:</span>
-							<span class="text-pc-darkblue">{template.email.mailHeaderSubject}</span>
+							<span class="text-pc-darkblue dark:text-white"
+								>{template.email.mailHeaderSubject}</span
+							>
 
 							<span class="text-grayblue-dark font-medium">Tracking:</span>
-							<span class="text-pc-darkblue"
+							<span class="text-pc-darkblue dark:text-white"
 								>{template.email.addTrackingPixel ? 'Enabled' : 'Disabled'}</span
 							>
 						</div>
@@ -1680,28 +1710,32 @@
 			<!-- Domain and SMTP Config -->
 			<div class="grid grid-cols-2 gap-6">
 				<!-- Domain Configuration -->
-				<div class="bg-white p-6 rounded-lg">
-					<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">Domain</h3>
+				<div class="p-6 rounded-lg">
+					<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
+						Domain
+					</h3>
 					<div class="grid grid-cols-[120px_1fr] gap-y-3">
 						<span class="text-grayblue-dark font-medium">Host Site:</span>
-						<span class="text-pc-darkblue">{template.domain.hostWebsite ? 'Yes' : 'No'}</span>
+						<span class="text-pc-darkblue dark:text-white"
+							>{template.domain.hostWebsite ? 'Yes' : 'No'}</span
+						>
 
 						<span class="text-grayblue-dark font-medium">Domain:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							<a
 								href="https://{template.domain?.name}"
 								target="_blank"
-								class="text-pc-blue hover:underline"
+								class="text-cta-blue dark:text-white hover:underline"
 							>
 								{template.domain?.name}
 							</a>
 						</span>
 
 						<span class="text-grayblue-dark font-medium">URL Path:</span>
-						<span class="text-pc-darkblue">{template.urlPath}</span>
+						<span class="text-pc-darkblue dark:text-white">{template.urlPath}</span>
 
 						<span class="text-grayblue-dark font-medium">TLS:</span>
-						<span class="text-pc-darkblue">
+						<span class="text-pc-darkblue dark:text-white">
 							{template.domain.managedTLS ? 'Managed' : template.domain.ownManagedTLS ? 'Own' : ''}
 						</span>
 					</div>
@@ -1709,33 +1743,39 @@
 
 				<!-- SMTP/API Configuration -->
 				{#if template.smtpConfiguration || template.apiSender}
-					<div class="bg-white p-6 rounded-lg">
-						<h3 class="text-xl font-semibold text-pc-darkblue mb-4 border-b pb-2">
+					<div class="p-6 rounded-lg">
+						<h3 class="text-xl font-semibold text-pc-darkblue dark:text-white mb-4 border-b pb-2">
 							{template.smtpConfiguration ? 'Email SMTP' : 'API Sender'}
 						</h3>
 						<div class="grid grid-cols-[120px_1fr] gap-y-3">
 							{#if template.smtpConfiguration}
 								<span class="text-grayblue-dark font-medium">Name:</span>
-								<span class="text-pc-darkblue">{template.smtpConfiguration.name}</span>
+								<span class="text-pc-darkblue dark:text-white"
+									>{template.smtpConfiguration.name}</span
+								>
 
 								<span class="text-grayblue-dark font-medium">Host:</span>
-								<span class="text-pc-darkblue">{template.smtpConfiguration.host}</span>
+								<span class="text-pc-darkblue dark:text-white"
+									>{template.smtpConfiguration.host}</span
+								>
 
 								<span class="text-grayblue-dark font-medium">Port:</span>
-								<span class="text-pc-darkblue">{template.smtpConfiguration.port}</span>
+								<span class="text-pc-darkblue dark:text-white"
+									>{template.smtpConfiguration.port}</span
+								>
 
 								<span class="text-grayblue-dark font-medium">Username:</span>
-								<span class="text-pc-darkblue">
+								<span class="text-pc-darkblue dark:text-white">
 									{template.smtpConfiguration.username || 'Not configured'}
 								</span>
 
 								<span class="text-grayblue-dark font-medium">Allow insecure: </span>
-								<span class="text-pc-darkblue">
+								<span class="text-pc-darkblue dark:text-white">
 									{!template.smtpConfiguration.ignoreCertErrors ? 'Disabled' : 'Enabled'}
 								</span>
 							{:else}
 								<span class="text-grayblue-dark font-medium">API Sender:</span>
-								<span class="text-pc-darkblue">{template.apiSender?.name}</span>
+								<span class="text-pc-darkblue dark:text-white">{template.apiSender?.name}</span>
 							{/if}
 						</div>
 					</div>
@@ -1778,7 +1818,7 @@
 							? `Are you sure you want to send the campaign ${getMessageType()} again to:`
 							: `Are you sure you want to send the campaign ${getMessageType()} to:`}
 					</p>
-					<div class="bg-gray-50 p-3 rounded mb-4">
+					<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded mb-4">
 						<p class="font-medium">{sendMessageRecipient.name}</p>
 						<p class="text-gray-600">{sendMessageRecipient.email}</p>
 						<p class="text-xs text-blue-600 mt-1">
diff --git a/frontend/src/routes/dashboard/+page.svelte b/frontend/src/routes/dashboard/+page.svelte
index e09f9e3..5f5e40b 100644
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -72,6 +72,8 @@
 	// Toggle for including test campaigns
 	let includeTestCampaigns = false;
 
+	// Use consistent colors with campaign detail page - these are already well-suited for both light and dark modes
+
 	// Handler for when toggle changes
 	const handleToggleChange = async () => {
 		// Wait for binding to update
@@ -292,7 +294,7 @@
 <main>
 	<div class="flex justify-between">
 		<Headline>Dashboard</Headline>
-		<div class="flex gap-4 items-baseline">
+		<div class="flex gap-4 items-center">
 			<CheckboxField
 				bind:value={includeTestCampaigns}
 				on:change={handleToggleChange}
@@ -449,13 +451,13 @@
 			<StatsCard
 				title="Completed Campaigns"
 				value={finished}
-				borderColor="border-campaign-completed"
-				iconColor="text-campaign-completed"
+				borderColor="border-message-read"
+				iconColor="text-message-read"
 			>
 				<svg
 					slot="icon"
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5 ml-2 text-campaign-completed"
+					class="h-5 w-5 ml-2 text-message-read"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -474,13 +476,13 @@
 			<StatsCard
 				title="Repeat Offenders"
 				value={repeatOffenders}
-				borderColor="border-repeart-submissions"
-				iconColor="text-repeart-submissions"
+				borderColor="border-submitted-data"
+				iconColor="text-submitted-data"
 			>
 				<svg
 					slot="icon"
 					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5 ml-2 text-repeart-submissions"
+					class="h-5 w-5 ml-2 text-submitted-data"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
diff --git a/frontend/src/routes/domain/+page.svelte b/frontend/src/routes/domain/+page.svelte
index 2beeabe..0aa7ec6 100644
--- a/frontend/src/routes/domain/+page.svelte
+++ b/frontend/src/routes/domain/+page.svelte
@@ -592,8 +592,10 @@
 			<FormColumns>
 				<FormColumn>
 					<!-- Domain Information Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Domain Information</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Domain Information
+						</h3>
 						<div class="space-y-6">
 							<TextField
 								minLength={3}
@@ -628,9 +630,11 @@
 						</div>
 					</div>
 
-					<!-- TLS Configuration Section -->
-					<div class="mb-6 pt-4 pb-2 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">TLS Configuration</h3>
+					<!-- SSL Configuration Section -->
+					<div class="pt-4 pb-2 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							SSL Configuration
+						</h3>
 						<div class="space-y-6">
 							<SelectSquare
 								label="Managed TLS"
diff --git a/frontend/src/routes/install/+page.svelte b/frontend/src/routes/install/+page.svelte
index fef0cb8..662480b 100644
--- a/frontend/src/routes/install/+page.svelte
+++ b/frontend/src/routes/install/+page.svelte
@@ -139,16 +139,22 @@
 
 <HeadTitle title="Setup" />
 
-<div class="inset-0 z-50 min-h-screen">
+<div
+	class="inset-0 z-50 min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"
+>
 	<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8">
 		<div class="flex justify-center">
 			<img src="/logo-blue.svg" class="w-48" alt="Phishing Club" />
 		</div>
-		<p class="mt-2 text-center text-sm text-gray-600">
+		<p
+			class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300 transition-colors duration-200"
+		>
 			Complete the setup to get started with Phishing Club
 		</p>
 
-		<div class="sm:mx-auto sm:max-w-2xl mt-8">
+		<div
+			class="sm:mx-auto sm:max-w-2xl mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900/50 transition-colors duration-200"
+		>
 			<div class="flex justify-between items-center mb-8 w-full px-4">
 				{#each steps as step, index}
 					<div class="flex flex-col items-center w-32">
@@ -263,7 +269,7 @@
 								{#if currentStep > 1}
 									<button
 										type="button"
-										class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+										class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
 										on:click={previousStep}
 									>
 										<svg
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 8236b58..c7d3f32 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -208,7 +208,7 @@
 
 <HeadTitle title="Sign in" />
 <main
-	class="h-screen grid-cols-1 grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2"
+	class="h-screen grid-cols-1 grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 bg-white dark:bg-gray-900 transition-colors duration-200"
 >
 	<div class="flex items-center justify-center h-full">
 		<img
@@ -221,7 +221,7 @@
 		>
 			<div class="flex flex-col items-center justify-center w-full p-4">
 				<h1
-					class="text-4xl md:text-5xl lg:text-5xl xl:text-5xl 2xl:text-5xl font-titilium font-bold uppercase text-pc-darkblue text-center"
+					class="text-4xl md:text-5xl lg:text-5xl xl:text-5xl 2xl:text-5xl font-titilium font-bold uppercase text-pc-darkblue dark:text-white text-center transition-colors duration-200"
 				>
 					Please sign in
 				</h1>
@@ -230,7 +230,7 @@
 			<div class="flex flex-col items-center justify-center w-full p-px md:p-px lg:p-4">
 				{#if loginError}
 					<div
-						class="flex justify-center w-9/10 bg-message-red border-pc-red border text-center py-4 font-titilium"
+						class="flex justify-center w-9/10 bg-message-red dark:bg-red-900 border-pc-red dark:border-red-700 border text-center py-4 font-titilium text-gray-900 dark:text-white transition-colors duration-200"
 					>
 						{loginError}
 					</div>
@@ -248,7 +248,9 @@
 						submitOnEnter
 					/>
 					<div class="flex flex-col w-full p-4 h-24">
-						<label for="Password" class="text-md font-semibold font-titilium text-pc-darkblue"
+						<label
+							for="Password"
+							class="text-md font-semibold font-titilium text-pc-darkblue dark:text-white transition-colors duration-200"
 							>Password</label
 						>
 						<div class="relative flex items-center justify-end">
@@ -259,9 +261,17 @@
 								on:click={handleClick}
 							>
 								{#if isPasswordVisible}
-									<img src="/view.svg" alt="view" />
+									<img
+										src="/view.svg"
+										alt="view"
+										class="dark:filter dark:brightness-0 dark:invert transition-all duration-200"
+									/>
 								{:else}
-									<img src="/toggle-view.svg" alt="toggle view" />
+									<img
+										src="/toggle-view.svg"
+										alt="toggle view"
+										class="dark:filter dark:brightness-0 dark:invert transition-all duration-200"
+									/>
 								{/if}
 							</button>
 							<input
@@ -281,14 +291,18 @@
 								type={inputType}
 								id="Password"
 								name="Password"
-								class="relative w-full p-2 rounded bg-pc-lightblue focus:outline-none focus:ring-0 focus:border-cta-blue focus:border-2"
+								class="relative w-full p-2 rounded bg-pc-lightblue dark:bg-gray-700 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-blue-400 focus:border-2 text-gray-900 dark:text-white transition-colors duration-200"
 							/>
 						</div>
 					</div>
 					<CTAbutton disabled={isSubmitting} />
 					{#if isSSOEnabled}
 						<div class="absolute bottom-12">
-							<div class="text-center font-bold">SSO</div>
+							<div
+								class="text-center font-bold text-gray-900 dark:text-white transition-colors duration-200"
+							>
+								SSO
+							</div>
 							<a href="/api/v1/sso/entra-id/login">
 								<img src="/ms-login-light.svg" alt="Login with Microsoft" />
 							</a>
@@ -303,15 +317,22 @@
 					>
 						<FormColumns>
 							<FormColumn>
-								<p class="text-center text-lg">Enter the MFA code from your authenticator app</p>
+								<p
+									class="text-center text-lg text-gray-900 dark:text-white transition-colors duration-200"
+								>
+									Enter the MFA code from your authenticator app
+								</p>
 								<Input fieldName={'MFA Code'} type="text" bind:value={formValues.mfaTOTP} />
 
 								<div class="flex flex-col">
-									<p class="text-sm">
+									<p
+										class="text-sm text-gray-700 dark:text-gray-300 transition-colors duration-200"
+									>
 										Forgot your MFA code? Recover your code <button
 											type="button"
 											on:click={showMFARecoveryModal}
-											class="text-cta-blue underline">here</button
+											class="text-cta-blue dark:text-blue-400 underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200"
+											>here</button
 										>
 									</p>
 								</div>
@@ -319,7 +340,7 @@
 						</FormColumns>
 						<FormError message={mfaError} />
 						<div
-							class="row-start-7 py-4 row-span-2 col-start-1 col-span-3 border-t-2 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end"
+							class="row-start-7 py-4 row-span-2 col-start-1 col-span-3 border-t-2 dark:border-gray-600 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end transition-colors duration-200"
 						>
 							<FormButton>Verify</FormButton>
 						</div>
@@ -338,7 +359,11 @@
 						<FormColumns>
 							<FormColumn>
 								<div class="px-16 py-8">
-									<p class="text-center text-lg">Please enter the MFA recovery code</p>
+									<p
+										class="text-center text-lg text-gray-900 dark:text-white transition-colors duration-200"
+									>
+										Please enter the MFA recovery code
+									</p>
 									<Input
 										fieldName={'MFA Recovery Code'}
 										type="text"
@@ -350,7 +375,7 @@
 
 						<FormError message={mfaRecoveryLoginError} />
 						<div
-							class="row-start-7 py-4 row-span-2 col-start-1 col-span-3 border-t-2 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end"
+							class="row-start-7 py-4 row-span-2 col-start-1 col-span-3 border-t-2 dark:border-gray-600 w-full flex flex-row justify-center items-center sm:justify-center md:justify-center lg:justify-end xl:justify-end 2xl:justify-end transition-colors duration-200"
 						>
 							<FormButton>Verify</FormButton>
 						</div>
diff --git a/frontend/src/routes/page/+page.svelte b/frontend/src/routes/page/+page.svelte
index 44f1dc6..6aa27f9 100644
--- a/frontend/src/routes/page/+page.svelte
+++ b/frontend/src/routes/page/+page.svelte
@@ -6,27 +6,29 @@
 	import { globalButtonDisabledAttributes } from '$lib/utils/form.js';
 	import Headline from '$lib/components/Headline.svelte';
 	import TextField from '$lib/components/TextField.svelte';
-	import TableCell from '$lib/components/table/TableCell.svelte';
 	import TableRow from '$lib/components/table/TableRow.svelte';
+	import TableCell from '$lib/components/table/TableCell.svelte';
 	import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
 	import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
-	import { addToast } from '$lib/store/toast';
 	import FormError from '$lib/components/FormError.svelte';
+	import { addToast } from '$lib/store/toast';
 	import { AppStateService } from '$lib/service/appState';
-	import TableCellAction from '$lib/components/table/TableCellAction.svelte';
 	import TableCellEmpty from '$lib/components/table/TableCellEmpty.svelte';
-	import FormGrid from '$lib/components/FormGrid.svelte';
+	import TableCellAction from '$lib/components/table/TableCellAction.svelte';
 	import Modal from '$lib/components/Modal.svelte';
+	import FormGrid from '$lib/components/FormGrid.svelte';
 	import BigButton from '$lib/components/BigButton.svelte';
+	import FormColumns from '$lib/components/FormColumns.svelte';
+	import FormColumn from '$lib/components/FormColumn.svelte';
 	import FormFooter from '$lib/components/FormFooter.svelte';
 	import Table from '$lib/components/table/Table.svelte';
 	import HeadTitle from '$lib/components/HeadTitle.svelte';
 	import { getModalText } from '$lib/utils/common';
 	import TableCopyButton from '$lib/components/table/TableCopyButton.svelte';
 	import { showIsLoading, hideIsLoading } from '$lib/store/loading.js';
-	import Editor from '$lib/components/editor/Editor.svelte';
 	import TableDropDownEllipsis from '$lib/components/table/TableDropDownEllipsis.svelte';
 	import DeleteAlert from '$lib/components/modal/DeleteAlert.svelte';
+	import Editor from '$lib/components/editor/Editor.svelte';
 	import { fetchAllRows } from '$lib/utils/api-utils';
 	import { BiMap } from '$lib/utils/maps';
 	import AutoRefresh from '$lib/components/AutoRefresh.svelte';
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index a1c28f2..7454bc1 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -361,9 +361,13 @@
 			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
 				<!-- Profile Settings -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Account Details</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Account Details
+					</h2>
 					<Form
 						fullHeight
 						on:submit={async () => {
@@ -402,9 +406,13 @@
 
 				<!-- Password Settings -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Password Settings</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Password Settings
+					</h2>
 					{#if !isSSOUser}
 						<Form on:submit={onClickChangePassword}>
 							<div class="flex flex-col h-full">
@@ -437,16 +445,22 @@
 							</div>
 						</Form>
 					{:else}
-						<div class="bg-gray-50 p-4 rounded-md text-gray-600">
+						<div
+							class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md text-gray-600 dark:text-gray-300"
+						>
 							Password changes are disabled for SSO users.
 						</div>
 					{/if}
 				</div>
 				<!-- MFA Section -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Multi-Factor Authentication</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Multi-Factor Authentication
+					</h2>
 					{#if !isSSOUser}
 						{#if isMFAEnabled}
 							<div class="flex flex-col h-full pt-5 w-60">
@@ -484,7 +498,9 @@
 							</Form>
 						{/if}
 					{:else}
-						<div class="bg-gray-50 p-4 rounded-md text-gray-600">
+						<div
+							class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md text-gray-600 dark:text-gray-300"
+						>
 							MFA is managed through your SSO provider.
 						</div>
 					{/if}
@@ -492,9 +508,13 @@
 
 				<!-- API Key Section -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">API Access</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						API Access
+					</h2>
 					<Form fullHeight on:submit={onClickCreateAPIKey}>
 						<div class="flex flex-col h-full">
 							{#if !!apiKey.length}
@@ -508,7 +528,9 @@
 									<Button size={'large'} on:click={openShowRemoveAPIKeyModal}>Delete Key</Button>
 								</div>
 							{:else}
-								<div class="bg-gray-50 p-4 rounded-md text-gray-600 mb-4">
+								<div
+									class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md text-gray-600 dark:text-gray-300 mb-4"
+								>
 									No API key currently exists.
 								</div>
 								<div class="mt-auto pt-4">
@@ -578,9 +600,11 @@
 								</div>
 
 								<!-- Alternative Method -->
-								<div class="border-gray-200 pt-4">
-									<h3 class="text-lg font-medium text-gray-700 mb-2">Can't scan the QR code?</h3>
-									<p class="text-gray-600 mb-2">
+								<div class="border-gray-200 dark:border-gray-600 pt-4">
+									<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">
+										Can't scan the QR code?
+									</h3>
+									<p class="text-gray-600 dark:text-gray-300 mb-2">
 										Enter this code manually in your authenticator app:
 									</p>
 									<button
@@ -594,9 +618,11 @@
 								</div>
 
 								<!-- Step 2 -->
-								<div class="border-t border-gray-200 pt-4">
-									<h3 class="text-xl font-semibold text-gray-700 mb-2">2. Verify Setup</h3>
-									<p class="text-gray-600 mb-4">
+								<div class="border-t border-gray-200 dark:border-gray-600 pt-4">
+									<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">
+										2. Verify Setup
+									</h3>
+									<p class="text-gray-600 dark:text-gray-300 mb-4">
 										Enter the 6-digit code from your authenticator app:
 									</p>
 									<TextField
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index dd69009..c01744f 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -442,9 +442,13 @@
 			<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8">
 				<!-- SSO Card -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Single Sign-On</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Single Sign-On
+					</h2>
 					<div class="flex flex-col h-full pt-4">
 						<div class="bg-gray-50 rounded-md p-3">
 							{#if isSSOEnabled}
@@ -476,9 +480,13 @@
 
 				<!-- General Settings Card -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">General Settings</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						General Settings
+					</h2>
 					<Form on:submit={onClickUpdateSettings} fullHeight>
 						<div class="flex flex-col h-full">
 							<div>
@@ -504,9 +512,13 @@
 
 				<!-- Logging Card -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Logging</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Logging
+					</h2>
 					<Form fullHeight>
 						<div class="flex flex-col h-full">
 							<div>
@@ -532,9 +544,13 @@
 
 				<!-- Import Section -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Import</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Import
+					</h2>
 					<div class="flex flex-col h-full">
 						<div class="space-y-4">
 							<FileField name="importFile" accept=".zip" on:change={(e) => onSetImportFile(e)}>
@@ -549,12 +565,16 @@
 								Import pages and emails as company templates
 							</label>
 							{#if importForCompany}
-								<div class="bg-blue-50 p-3 rounded-md text-sm text-blue-700">
+								<div
+									class="bg-blue-50 dark:bg-blue-900/30 p-3 rounded-md text-sm text-blue-700 dark:text-blue-200 transition-colors duration-200"
+								>
 									<strong>Company Import:</strong><br /> Pages and emails will be imported for this company.
 									Assets will be imported as global/shared resources.
 								</div>
 							{:else}
-								<div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
+								<div
+									class="bg-gray-50 dark:bg-gray-700 p-3 rounded-md text-sm text-gray-600 dark:text-gray-300 transition-colors duration-200"
+								>
 									<strong>Global Import:</strong> All templates and assets will be imported as shared
 									resources.
 								</div>
@@ -579,31 +599,45 @@
 
 				<!-- Backup Section -->
 				<div
-					class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 min-h-[300px] flex flex-col"
+					class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm dark:shadow-gray-900/50 border border-gray-100 dark:border-gray-700 min-h-[300px] flex flex-col transition-colors duration-200"
 				>
-					<h2 class="text-xl font-semibold text-gray-700 mb-6">Backup</h2>
+					<h2
+						class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 transition-colors duration-200"
+					>
+						Backup
+					</h2>
 					<div class="flex flex-col h-full">
 						<div class="space-y-4">
-							<p class="text-gray-600 text-sm">
+							<p class="text-gray-600 dark:text-gray-300 text-sm transition-colors duration-200">
 								Create a backup of database, assets, attachments and certificates.
 							</p>
 
 							{#if availableBackups.length > 0}
-								<div class="bg-gray-50 p-3 rounded-md">
-									<h4 class="font-medium text-gray-900 mb-2">Available:</h4>
+								<div
+									class="bg-gray-50 dark:bg-gray-700 p-3 rounded-md transition-colors duration-200"
+								>
+									<h4
+										class="font-medium text-gray-900 dark:text-gray-100 mb-2 transition-colors duration-200"
+									>
+										Available:
+									</h4>
 									<div class="space-y-3">
 										{#each availableBackups as backup}
 											<div class="flex items-start justify-between gap-4 text-sm">
 												<div class="flex flex-col min-w-0 flex-1">
-													<span class="text-gray-700 text-xs font-medium">
+													<span
+														class="text-gray-700 dark:text-gray-200 text-xs font-medium transition-colors duration-200"
+													>
 														{new Date(backup.createdAt).toLocaleString()}
 													</span>
-													<span class="text-gray-400 text-xs">
+													<span
+														class="text-gray-400 dark:text-gray-400 text-xs transition-colors duration-200"
+													>
 														{(backup.size / 1024 / 1024).toFixed(1)} MB
 													</span>
 												</div>
 												<button
-													class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded transition-colors flex-shrink-0"
+													class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white text-xs rounded transition-colors flex-shrink-0"
 													on:click={() => downloadBackup(backup.name)}
 												>
 													Download
@@ -613,7 +647,9 @@
 									</div>
 								</div>
 							{:else if !isLoadingBackups}
-								<div class="bg-gray-50 p-3 rounded-md text-sm text-gray-600">
+								<div
+									class="bg-gray-50 dark:bg-gray-700 p-3 rounded-md text-sm text-gray-600 dark:text-gray-300 transition-colors duration-200"
+								>
 									No backups available yet.
 								</div>
 							{/if}
@@ -631,7 +667,7 @@
 		{#if isImportResultModalVisible && importResult}
 			<Modal headerText="Import Summary" bind:visible={isImportResultModalVisible}>
 				<div
-					class="p-6 max-h-[80vh] overflow-y-auto"
+					class="p-6 max-h-[80vh] overflow-y-auto bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-200"
 					on:scroll={() => {}}
 					bind:this={importModalContent}
 				>
@@ -640,20 +676,30 @@
 						<div class="grid grid-cols-3 gap-6">
 							<!-- Assets -->
 							<div>
-								<h3 class="font-semibold text-gray-900 mb-2">Assets (Global/Shared)</h3>
+								<h3
+									class="font-semibold text-gray-900 dark:text-gray-100 mb-2 transition-colors duration-200"
+								>
+									Assets (Global/Shared)
+								</h3>
 								<ul class="space-y-1">
 									<li>Created: {importResult.assets_created}</li>
 									<li>Skipped: {importResult.assets_skipped}</li>
 									<li>Errors: {importResult.assets_errors}</li>
 								</ul>
-								<p class="text-xs text-gray-500 mt-1">
+								<p
+									class="text-xs text-gray-500 dark:text-gray-400 mt-1 transition-colors duration-200"
+								>
 									Assets are always imported as global resources
 								</p>
 							</div>
 
 							<!-- Pages -->
 							<div>
-								<h3 class="font-semibold text-gray-900 mb-2">Pages</h3>
+								<h3
+									class="font-semibold text-gray-900 dark:text-gray-100 mb-2 transition-colors duration-200"
+								>
+									Pages
+								</h3>
 								<ul class="space-y-1">
 									<li>Created: {importResult.pages_created}</li>
 									<li>Updated: {importResult.pages_updated}</li>
@@ -664,7 +710,11 @@
 
 							<!-- Emails -->
 							<div>
-								<h3 class="font-semibold text-gray-900 mb-2">Emails</h3>
+								<h3
+									class="font-semibold text-gray-900 dark:text-gray-100 mb-2 transition-colors duration-200"
+								>
+									Emails
+								</h3>
 								<ul class="space-y-1">
 									<li>Created: {importResult.emails_created}</li>
 									<li>Updated: {importResult.emails_updated}</li>
@@ -829,26 +879,34 @@
 		{/if}
 
 		<!-- Version and Update Info -->
-		<div class="mt-8 text-sm text-gray-600 border-t border-gray-100 pt-4">
+		<div
+			class="mt-8 text-sm text-gray-600 dark:text-gray-300 border-t border-gray-100 dark:border-gray-700 pt-4 transition-colors duration-200"
+		>
 			<div class="flex items-center gap-4 flex-wrap">
 				<button
 					on:click|preventDefault={() => onClickCopy('.version-text')}
-					class="flex items-center hover:bg-gray-100 py-2 px-4 rounded-md text-gray-700 transition-colors"
+					class="flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 rounded-md text-gray-700 dark:text-gray-300 transition-colors duration-200"
 				>
 					<span class="version-text font-mono">Version: {version}</span>
 					<img class="ml-2 w-4 h-4" src="/icon-copy.svg" alt="copy version" />
 				</button>
 				<span>|</span>
 				{#if updateAvailable}
-					<a href="/settings/update/" class="text-blue-600 hover:underline">Update Available</a>
+					<a
+						href="/settings/update/"
+						class="text-blue-600 dark:text-white hover:underline transition-colors duration-200"
+						>Update Available</a
+					>
 				{:else}
-					<span class="text-gray-500">Up to date</span>
+					<span class="text-gray-500 dark:text-gray-400 transition-colors duration-200"
+						>Up to date</span
+					>
 				{/if}
 				<span>|</span>
 				<button
 					on:click={checkForUpdate}
 					disabled={isCheckingUpdate}
-					class="text-blue-600 hover:underline disabled:opacity-50 disabled:cursor-not-allowed"
+					class="text-blue-600 dark:text-white hover:underline disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
 				>
 					{#if isCheckingUpdate}
 						Checking...
@@ -857,7 +915,11 @@
 					{/if}
 				</button>
 				<span>|</span>
-				<a href="/licenses.txt" class="text-blue-600 hover:underline">View Licenses</a>
+				<a
+					href="/licenses.txt"
+					class="text-blue-600 dark:text-white hover:underline transition-colors duration-200"
+					>View Licenses</a
+				>
 			</div>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/smtp-configuration/+page.svelte b/frontend/src/routes/smtp-configuration/+page.svelte
index 77ccafb..ac63dcd 100644
--- a/frontend/src/routes/smtp-configuration/+page.svelte
+++ b/frontend/src/routes/smtp-configuration/+page.svelte
@@ -481,8 +481,10 @@
 			<FormColumns>
 				<FormColumn>
 					<!-- Basic Configuration Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Basic Configuration</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Basic Configuration
+						</h3>
 						<div class="space-y-6">
 							<TextField
 								required
@@ -510,8 +512,10 @@
 					</div>
 
 					<!-- Authentication Section -->
-					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Authentication</h3>
+					<div class="mb-6 pt-4 pb-2 border-b border-gray-200 dark:border-gray-600 w-full">
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Authentication
+						</h3>
 						<div class="space-y-6">
 							<TextField
 								minLength={1}
@@ -531,7 +535,9 @@
 
 					<!-- Security Settings -->
 					<div class="pt-4 pb-2 w-full">
-						<h3 class="text-base font-medium text-pc-darkblue mb-3">Security Settings</h3>
+						<h3 class="text-base font-medium text-pc-darkblue dark:text-white mb-3">
+							Security Settings
+						</h3>
 						<div>
 							<SelectSquare
 								label="TLS Certificate Validation"
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1584375..d20b77f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -95,6 +95,10 @@ export default {
 				'70vw': '70vw',
 				'80vw': '80vw',
 				'90vw': '90vw'
+			},
+			minWidth: {
+				app: '768px',
+				desktop: '1024px'
 			}
 		}
 	}