From 0b3b796a0027bbbc44059a4d7301f6123f1fccd5 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Sun, 12 Oct 2025 13:46:15 +0200
Subject: [PATCH] Major UI update: Improved dark mode Added company banner and
 moved change company Changed campaign trends, and now requires 2 campaigns
 atleast Menu collapses if open and link clicked Changed calendar event type
 indicator Changed mobile menu Changed campaign event timeline and event cards
 Various UI changes

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/lib/components/Alert.svelte      |   12 +-
 .../lib/components/CampaignCalendar.svelte    |   42 +-
 .../lib/components/CampaignTrendChart.svelte  |  207 ++-
 .../src/lib/components/CheckboxField.svelte   |   14 +-
 .../src/lib/components/EventTimeline.svelte   | 1158 ++++++++++++-----
 frontend/src/lib/components/FormButton.svelte |    2 +-
 frontend/src/lib/components/FormError.svelte  |    4 +-
 frontend/src/lib/components/Input.svelte      |    4 +-
 frontend/src/lib/components/Modal.svelte      |    6 +-
 frontend/src/lib/components/Pagination.svelte |    6 +-
 .../src/lib/components/PasswordField.svelte   |   10 +-
 frontend/src/lib/components/Search.svelte     |    2 +-
 frontend/src/lib/components/Select.svelte     |    4 +-
 .../src/lib/components/SelectSquare.svelte    |   12 +-
 frontend/src/lib/components/StatsCard.svelte  |   12 +-
 frontend/src/lib/components/TextField.svelte  |    8 +-
 .../components/TextFieldMultiSelect.svelte    |   16 +-
 .../src/lib/components/TextFieldSelect.svelte |   14 +-
 .../src/lib/components/TextareaField.svelte   |    8 +-
 frontend/src/lib/components/Toast.svelte      |    8 +-
 frontend/src/lib/components/ToolTip.svelte    |    4 +-
 .../components/form/PageTypeSwitcher.svelte   |    6 +-
 .../form/TextFieldSelectWithType.svelte       |   22 +-
 .../components/header/CompanyBanner.svelte    |   53 +
 .../lib/components/header/DesktopMenu.svelte  |   85 +-
 .../src/lib/components/header/Header.svelte   |  145 +--
 .../lib/components/header/MobileMenu.svelte   |  323 +++--
 .../lib/components/header/ProfileMenu.svelte  |   84 +-
 .../modal/ChangeCompanyModal.svelte           |   14 +-
 .../lib/components/modal/DeleteAlert.svelte   |   12 +-
 .../src/lib/components/table/CopyCell.svelte  |    2 +-
 .../components/table/EmptyTableResult.svelte  |    6 +-
 .../src/lib/components/table/EventName.svelte |    2 +-
 .../src/lib/components/table/Table.svelte     |    4 +-
 .../src/lib/components/table/TableCell.svelte |    2 +-
 .../components/table/TableCellAction.svelte   |    2 +-
 .../components/table/TableCellCheck.svelte    |    2 +-
 .../components/table/TableCellEmpty.svelte    |    3 +-
 .../lib/components/table/TableCellLink.svelte |    4 +-
 .../table/TableDeleteButton2.svelte           |    4 +-
 .../table/TableDropDownButton.svelte          |    4 +-
 .../table/TableDropDownEllipsis.svelte        |    2 +-
 .../src/lib/components/table/TableHead.svelte |    2 +-
 .../lib/components/table/TableHeadCell.svelte |    8 +-
 .../table/TableHeadCellAction.svelte          |    2 +-
 .../table/TableHeadCellCheck.svelte           |    2 +-
 .../table/TableHeadCellEmpty.svelte           |    2 +-
 .../table/TableHeadCellSingle.svelte          |    2 +-
 .../src/lib/components/table/TableRow.svelte  |    2 +-
 .../lib/components/table/TableRowEmpty.svelte |    2 +-
 frontend/src/routes/+layout.svelte            |    5 +-
 .../src/routes/campaign-template/+page.svelte |   71 +-
 .../src/routes/campaign/[id]/+page.svelte     |   20 +-
 53 files changed, 1645 insertions(+), 807 deletions(-)
 create mode 100644 frontend/src/lib/components/header/CompanyBanner.svelte

diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte
index 21b51cc..19e3295 100644
--- a/frontend/src/lib/components/Alert.svelte
+++ b/frontend/src/lib/components/Alert.svelte
@@ -243,9 +243,7 @@
 </script>
 
 {#if visible}
-	<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 opacity-[0.5]" />
 	<div
 		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
 		role="dialog"
@@ -259,7 +257,7 @@
 		>
 			<!-- Header -->
 			<div
-				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"
+				class="bg-red-700 dark:bg-red-700/90 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
@@ -293,7 +291,7 @@
 			<div class="px-8 py-6">
 				<div
 					id="alert-description"
-					class="text-gray-600 dark:text-gray-300 transition-colors duration-200"
+					class="text-gray-600 dark:text-gray-400 transition-colors duration-200"
 				>
 					{#if $$slots.default}
 						<slot />
@@ -317,13 +315,13 @@
 
 			<!-- Footer -->
 			<div
-				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"
+				class="py-4 row-span-2 col-start-1 col-span-3 border-t-2 border-gray-200 dark:border-gray-700/60 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-800/40 rounded-b-md transition-colors duration-200"
 			>
 				{#if !noCancel}
 					<button
 						type="reset"
 						on:click={close}
-						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"
+						class="bg-slate-400 hover:bg-slate-300 dark:bg-gray-700/80 dark:hover:bg-gray-600/80 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/CampaignCalendar.svelte b/frontend/src/lib/components/CampaignCalendar.svelte
index d339311..2c1ae54 100644
--- a/frontend/src/lib/components/CampaignCalendar.svelte
+++ b/frontend/src/lib/components/CampaignCalendar.svelte
@@ -46,7 +46,7 @@
 		SCHEDULED: '#62aded', // campaign-scheduled
 		ACTIVE: '#5557f6', // campaign-active
 		COMPLETED: '#4cb5b5', // message-read - much more muted than bright green
-		SELF_MANAGED: '#9F7AEA' // purple
+		SELF_MANAGED: '#7C3AED' // darker purple
 	};
 
 	function sortCampaignsByPriority(campaigns, day) {
@@ -308,19 +308,19 @@
 </script>
 
 <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"
+	class="w-full bg-white dark:bg-gray-900/80 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700/60 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 dark:hover:bg-gray-700 mx-4 transition-colors duration-200"
+				class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/60 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 dark:text-gray-300"
+					class="h-5 w-5 text-gray-600 dark:text-gray-400"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -334,18 +334,18 @@
 				</svg>
 			</button>
 
-			<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+			<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-300">
 				{format(currentMonth, 'MMMM yyyy')}
 			</h2>
 
 			<button
-				class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 mx-4 transition-colors duration-200"
+				class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/60 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 dark:text-gray-300"
+					class="h-5 w-5 text-gray-600 dark:text-gray-400"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -367,7 +367,7 @@
 						style="background-color: {item.color}; opacity: {activeFilters[item.key] ? '1' : '0.3'}"
 					></div>
 					<span
-						class="transition-opacity duration-200 text-gray-700 dark:text-gray-300"
+						class="transition-opacity duration-200 text-gray-700 dark:text-gray-400"
 						style="opacity: {activeFilters[item.key] ? '1' : '0.5'}">{item.label}</span
 					>
 				</button>
@@ -379,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 dark:text-gray-300">{day}</div>
+					<div class="text-sm font-medium text-gray-600 dark:text-gray-400">{day}</div>
 				{/each}
 			</div>
 
@@ -388,9 +388,9 @@
 				<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 dark:border-blue-400"
+							class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 dark:border-highlight-blue/80"
 						></div>
-						<span class="text-gray-600 dark:text-gray-300">Loading calendar...</span>
+						<span class="text-gray-600 dark:text-gray-400">Loading calendar...</span>
 					</div>
 				</div>
 			{:else}
@@ -400,19 +400,19 @@
 							{#each week as day}
 								<div
 									class="calendar-day relative border rounded-md overflow-hidden {scrollBarClassesHorizontal}  {day.isToday
-										? 'border-gray-700 dark:border-gray-400 bg-gray-50 dark:bg-gray-700'
-										: 'border-gray-200 dark:border-gray-600'}
+										? 'border-gray-700 dark:border-gray-500 bg-gray-50 dark:bg-gray-800/60'
+										: 'border-gray-200 dark:border-gray-700/60'}
 	                                {day.isCurrentMonth
-										? 'bg-white dark:bg-gray-800'
-										: 'bg-gray-50 dark:bg-gray-700'} transition-colors duration-200"
+										? 'bg-white dark:bg-gray-900/60'
+										: 'bg-gray-50 dark:bg-gray-800/40'} transition-colors duration-200"
 								>
 									<!-- Date number -->
 									<div
 										class="text-sm p-1 {day.isToday
-											? 'font-bold text-gray-800 dark:text-white'
+											? 'font-bold text-gray-800 dark:text-gray-300'
 											: day.isCurrentMonth
-												? 'text-gray-600 dark:text-gray-300'
-												: 'text-gray-400 dark:text-gray-500'}"
+												? 'text-gray-600 dark:text-gray-400'
+												: 'text-gray-400 dark:text-gray-600'}"
 									>
 										{day.date.getDate()}
 									</div>
@@ -423,8 +423,8 @@
 										{#each day.campaigns as campaign}
 											<a
 												href={`/campaign/${campaign.id}`}
-												class="block mb-1 rounded-sm text-white text-xs p-1 overflow-hidden hover:opacity-90 transition-opacity"
-												style="background-color: {campaign.color};"
+												class="block mb-1 rounded-sm text-xs p-1 pl-2 overflow-hidden hover:bg-gray-200 dark:hover:bg-gray-700/40 transition-all duration-200 bg-gray-100 dark:bg-gray-800/30"
+												style="border-left: 3px solid {campaign.color};"
 												title="{campaign.name} - {campaign.isSelfManaged
 													? 'Self-managed'
 													: campaign.end < new Date()
@@ -435,7 +435,7 @@
 													? `${formatDateString(new Date(campaign.createdAt))} - ?`
 													: `${formatDateString(campaign.start)} - ${formatDateString(campaign.end)}`}"
 											>
-												<div class="campaign-name truncate text-white">
+												<div class="campaign-name truncate text-gray-700 dark:text-gray-300">
 													{truncateText(campaign.name, 18)}
 												</div>
 											</a>
diff --git a/frontend/src/lib/components/CampaignTrendChart.svelte b/frontend/src/lib/components/CampaignTrendChart.svelte
index 78a71f5..363b422 100644
--- a/frontend/src/lib/components/CampaignTrendChart.svelte
+++ b/frontend/src/lib/components/CampaignTrendChart.svelte
@@ -2,6 +2,21 @@
 	import { onMount, onDestroy, tick } from 'svelte';
 	let resizeObserver;
 
+	// Theme detection for chart reactivity
+	let isDarkMode = false;
+
+	// Check theme on mount and when it changes
+	const checkTheme = () => {
+		const newIsDarkMode = document.documentElement.classList.contains('dark');
+		if (newIsDarkMode !== isDarkMode) {
+			isDarkMode = newIsDarkMode;
+			// Recreate chart when theme changes
+			if (containerReady && chartData.length >= 2) {
+				tick().then(() => createChart());
+			}
+		}
+	};
+
 	export let campaignStats = [];
 	export let isLoading = false;
 
@@ -238,6 +253,16 @@
 		svg.setAttribute('class', 'campaign-trend-chart');
 		chartContainer.appendChild(svg);
 
+		// Add dark background rectangle
+		const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+		bgRect.setAttribute('width', '100%');
+		bgRect.setAttribute('height', '100%');
+		bgRect.setAttribute(
+			'fill',
+			document.documentElement.classList.contains('dark') ? '#111827' : '#ffffff'
+		);
+		svg.appendChild(bgRect);
+
 		const xExtent = [0, chartData.length - 1];
 		// Map 0-100% directly to chart boundaries so 0% aligns with X-axis
 		const yExtent = [0, 100];
@@ -346,7 +371,7 @@
 		stop1.setAttribute('offset', '0%');
 		stop1.setAttribute(
 			'stop-color',
-			document.documentElement.classList.contains('dark') ? '#374151' : '#f8f9fa'
+			document.documentElement.classList.contains('dark') ? '#1f2937' : '#f8f9fa'
 		);
 		stop1.setAttribute('stop-opacity', '0.3');
 
@@ -354,15 +379,15 @@
 		stop2.setAttribute('offset', '50%');
 		stop2.setAttribute(
 			'stop-color',
-			document.documentElement.classList.contains('dark') ? '#4b5563' : '#e9ecef'
+			document.documentElement.classList.contains('dark') ? '#374151' : '#e9ecef'
 		);
-		stop2.setAttribute('stop-opacity', '0.5');
+		stop2.setAttribute('stop-opacity', '0.4');
 
 		const stop3 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
 		stop3.setAttribute('offset', '100%');
 		stop3.setAttribute(
 			'stop-color',
-			document.documentElement.classList.contains('dark') ? '#374151' : '#f8f9fa'
+			document.documentElement.classList.contains('dark') ? '#1f2937' : '#f8f9fa'
 		);
 		stop3.setAttribute('stop-opacity', '0.3');
 
@@ -400,7 +425,7 @@
 			vLine.setAttribute('y2', (height - margin.bottom).toString());
 			vLine.setAttribute(
 				'stroke',
-				document.documentElement.classList.contains('dark') ? '#4b5563' : '#e5e7eb'
+				document.documentElement.classList.contains('dark') ? '#374151' : '#e5e7eb'
 			);
 			vLine.setAttribute('stroke-width', '0.5');
 			vLine.setAttribute('opacity', '0.3');
@@ -416,7 +441,7 @@
 		yAxis.setAttribute('y2', (height - margin.bottom).toString());
 		yAxis.setAttribute(
 			'stroke',
-			document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6B7280'
+			document.documentElement.classList.contains('dark') ? '#6887ea' : '#6B7280'
 		);
 		yAxis.setAttribute('stroke-width', '2');
 		svg.appendChild(yAxis);
@@ -428,7 +453,7 @@
 		xAxis.setAttribute('y2', (height - margin.bottom).toString());
 		xAxis.setAttribute(
 			'stroke',
-			document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6B7280'
+			document.documentElement.classList.contains('dark') ? '#6887ea' : '#6B7280'
 		);
 		xAxis.setAttribute('stroke-width', '2');
 		svg.appendChild(xAxis);
@@ -443,7 +468,7 @@
 			text.setAttribute('font-size', '11');
 			text.setAttribute(
 				'fill',
-				document.documentElement.classList.contains('dark') ? '#d1d5db' : '#6B7280'
+				document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#6B7280'
 			);
 			text.setAttribute('font-weight', '500');
 			text.setAttribute('alignment-baseline', 'middle');
@@ -461,7 +486,7 @@
 				text.setAttribute('font-size', '11');
 				text.setAttribute(
 					'fill',
-					document.documentElement.classList.contains('dark') ? '#f9fafb' : '#000'
+					document.documentElement.classList.contains('dark') ? '#f3f4f6' : '#000'
 				);
 				text.setAttribute('alignment-baseline', 'middle');
 				// Show date (YYYY/MM) and campaign name on the same line
@@ -810,8 +835,21 @@
 		});
 	}
 
+	let themeObserver;
+
 	onMount(async () => {
 		await tick(); // Wait for DOM/layout
+
+		// Initialize theme detection
+		checkTheme();
+
+		// Watch for theme changes
+		themeObserver = new MutationObserver(checkTheme);
+		themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class']
+		});
+
 		if (sizingContainer) {
 			const containerWidth = sizingContainer.parentElement?.clientWidth || 0;
 			width = Math.min(Math.max(containerWidth, 300), containerWidth); // Minimum 300px but never exceed container
@@ -833,6 +871,10 @@
 		if (resizeObserver && sizingContainer) {
 			resizeObserver.unobserve(sizingContainer.parentElement || sizingContainer);
 		}
+		// Clean up theme observer
+		if (themeObserver) {
+			themeObserver.disconnect();
+		}
 		if (loadingTimeout) {
 			clearTimeout(loadingTimeout);
 		}
@@ -856,14 +898,16 @@
 	></div>
 	{#if !containerReady}
 		<div class="flex items-center justify-center min-h-[100px]">
-			<span class="text-gray-400 text-sm">Preparing chart…</span>
+			<span class="text-gray-400 dark:text-gray-500 text-sm transition-colors duration-200"
+				>Preparing chart…</span
+			>
 		</div>
 	{:else}
 		<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 dark:border-blue-400"
+						class="animate-spin rounded-full h-8 w-8 border-b-2 border-cta-blue dark:border-highlight-blue transition-colors duration-200"
 					></div>
 					<span class="ml-2 text-gray-600 dark:text-gray-300 transition-colors duration-200"
 						>Loading trend data...</span
@@ -875,109 +919,53 @@
 						>Preparing trend data...</span
 					>
 				</div>
-			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length === 0}
+			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length < 2}
 				<div
-					class="flex items-center justify-center h-64 bg-gray-50 dark:bg-gray-800 rounded-lg transition-colors duration-200"
+					class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-6 transition-colors duration-200"
 				>
-					<div class="text-center">
-						<svg
-							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"
+					<!-- Match the height structure of the data container -->
+					<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 dark:text-gray-300 m-0 transition-colors duration-200"
 						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="1.5"
-								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 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>
+							Trend Analytics
+						</h4>
 					</div>
-				</div>
-			{:else if hasAttemptedLoad && !isLoading && !debouncedIsLoading && chartData.length === 1}
-				<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 dark:text-blue-400 mr-2 transition-colors duration-200"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
-						<div>
-							<h4
-								class="text-sm font-medium text-blue-900 dark:text-blue-200 transition-colors duration-200"
+					<div class="mb-8"></div>
+
+					<!-- Centered content matching stats grid height -->
+					<div class="flex items-center justify-center min-h-[350px] py-16">
+						<div class="text-center">
+							<svg
+								class="mx-auto h-12 w-12 text-cta-blue dark:text-highlight-blue transition-colors duration-200"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+								aria-hidden="true"
 							>
-								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.
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									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-3 text-lg font-medium text-gray-900 dark:text-gray-100 transition-colors duration-200"
+							>
+								Insufficient data for trend analysis
+							</h3>
+							<p
+								class="mt-2 text-sm text-gray-600 dark:text-gray-400 transition-colors duration-200"
+							>
+								Trend analysis requires at least 2 completed campaigns to show meaningful patterns.
 							</p>
 						</div>
 					</div>
-					<div class="grid grid-cols-4 gap-4">
-						<div class="text-center">
-							<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 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 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 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 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-6 transition-colors duration-200"
+					class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 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">
@@ -993,7 +981,7 @@
 								Time range:
 								<select
 									bind:value={selectedTimeRange}
-									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"
+									class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 text-xs bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 hover:border-cta-blue dark:hover:border-highlight-blue focus:border-cta-blue dark:focus:border-highlight-blue transition-colors duration-200"
 									style="height: 1.5rem;"
 								>
 									{#each timeRanges as range}
@@ -1011,7 +999,7 @@
 										min="1"
 										max={chartData.length}
 										bind:value={trendN}
-										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"
+										class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 w-10 text-xs bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 hover:border-cta-blue dark:hover:border-highlight-blue focus:border-cta-blue dark:focus:border-highlight-blue transition-colors duration-200"
 										style="height: 1.5rem;"
 									/>
 								</label>
@@ -1025,13 +1013,13 @@
 									min="2"
 									max={chartData.length}
 									bind:value={movingAvgN}
-									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"
+									class="border border-gray-300 dark:border-gray-600 rounded px-1 py-0 w-10 text-xs bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 hover:border-cta-blue dark:hover:border-highlight-blue focus:border-cta-blue dark:focus:border-highlight-blue transition-colors duration-200"
 									style="height: 1.5rem;"
 								/>
 							</label>
 						</div>
 					</div>
-					<div style="height: 1.25rem;"></div>
+					<div class="mb-8"></div>
 					{#if chartData.length > 0}
 						<div class="grid grid-cols-4 gap-2 sm:gap-4">
 							{#each metrics as metric}
@@ -1065,11 +1053,12 @@
 							No trendline stats to display (trendStats is null or not enough data).
 						</div>
 					{/if}
+					<div class="mt-8 mb-6"></div>
 					{#key chartKey}
 						{#if containerReady}
 							<div
 								bind:this={chartContainer}
-								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"
+								class="min-h-[220px] max-h-[280px] w-full box-border relative rounded-md bg-white dark:bg-gray-900 m-1 transition-colors duration-200"
 								style="contain: layout style;"
 							></div>
 						{/if}
@@ -1126,8 +1115,6 @@
 		display: block !important;
 		contain: layout style !important;
 		background: white;
-		border-radius: 8px;
-		padding: 8px;
 		transition: background-color 0.2s ease;
 	}
 	:global(.dark .campaign-trend-chart) {
diff --git a/frontend/src/lib/components/CheckboxField.svelte b/frontend/src/lib/components/CheckboxField.svelte
index f4315f8..08de747 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 dark:text-gray-300 py-2 transition-colors duration-200">
+		<p class="font-semibold text-slate-600 dark:text-gray-400 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -56,9 +56,9 @@
 		{/if}
 		{#if optional === true}
 			<div
-				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+				class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 			>
-				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-400 text-xs transition-colors duration-200">
 					optional
 				</p>
 			</div>
@@ -75,12 +75,12 @@
 				on:change
 			/>
 			<div
-				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
+				class="w-5 h-5 border-2 border-slate-300 dark:border-gray-700/60 rounded
+                        peer-checked:border-cta-blue dark:peer-checked:border-highlight-blue/80 peer-checked:bg-cta-blue dark:peer-checked:bg-highlight-blue/80
                         transition-all duration-200 ease-in-out
                         flex items-center justify-center
-						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"
+						bg-slate-50 dark:bg-gray-900/60
+                        focus-within:ring-2 focus-within:ring-cta-blue dark:focus-within:ring-highlight-blue/80 focus-within:ring-offset-2 dark:focus-within:ring-offset-gray-900"
 			>
 				{#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/EventTimeline.svelte b/frontend/src/lib/components/EventTimeline.svelte
index 75ee367..4bf071e 100644
--- a/frontend/src/lib/components/EventTimeline.svelte
+++ b/frontend/src/lib/components/EventTimeline.svelte
@@ -1,204 +1,344 @@
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
 	import * as d3 from 'd3';
 	import { toEvent } from '$lib/utils/events';
 
 	export let events = [];
 	export let isGhost = false;
 
+	// theme management
+	let isDarkMode = false;
+
+	const checkTheme = () => {
+		isDarkMode = document.documentElement.classList.contains('dark');
+	};
+
+	// dom references
 	let svg;
 	let tooltip;
 	let container;
 	let timelineGroup;
-	let width;
+
+	// layout properties
+	let width = 800;
 	let height = 200;
-	let margin = { top: 20, right: 40, bottom: 50, left: 40 };
-	let currentCenterDate = '';
+	let margin = { top: 20, right: 20, bottom: 30, left: 20 };
+
+	// timeline state
+	let currentCenterDate = new Date();
 	let zoom;
-	let currentTransform = null;
+	let currentTransform;
 	let xScale;
 	let use24Hour = true;
 	let initialized = false;
+	let themeObserver;
+	let showFilterDropdown = false;
 
-	// Constants for zoom limits
-	const MAX_ZOOM_IN = 1000 * 10; // Milliseconds minimum visible on screen
+	// event filtering
+	let eventFilters = {
+		campaign_recipient_scheduled: true,
+		campaign_recipient_cancelled: true,
+		campaign_recipient_message_sent: true,
+		campaign_recipient_message_failed: true,
+		campaign_recipient_message_read: true,
+		campaign_recipient_before_page_visited: true,
+		campaign_recipient_page_visited: true,
+		campaign_recipient_after_page_visited: true,
+		campaign_recipient_submitted_data: true,
+		campaign_recipient_reported: true
+	};
+	let filterUpdateCounter = 0;
+
+	// performance optimizations
+	const MAX_ZOOM_IN = 1000; // 1 second in milliseconds
 	const MIN_ZOOM_OUT_PADDING = 0.1; // 10% padding on each side when fully zoomed out
 
-	$: if (container) {
-		width = container.offsetWidth - margin.left - margin.right;
+	// throttling for zoom operations
+	let zoomThrottleTimeout;
+	let axisUpdateTimeout;
+	let filteredEventsCache = null;
+	let lastFilterHash = '';
+
+	// virtualization for large datasets
+	const MAX_VISIBLE_EVENTS = 1000;
+	let visibleEvents = [];
+
+	// debounced container resize
+	let resizeTimeout;
+	let resizeObserver;
+
+	// update timeline colors when theme changes
+	function updateTimelineColors() {
+		if (!timelineGroup) return;
+
+		requestAnimationFrame(() => {
+			timelineGroup.selectAll('circle').attr('stroke', isDarkMode ? '#374151' : '#fff');
+			// update center line color
+			timelineGroup.select('.center-line').attr('stroke', isDarkMode ? '#6b7280' : '#d1d5db');
+		});
 	}
 
-	onDestroy(() => {
-		// Clean up D3 event listeners
-		if (svg) {
-			d3.select(svg).on('.zoom', null);
+	// optimized event filtering with caching
+	function getFilteredEvents() {
+		if (!events || events.length === 0) {
+			filteredEventsCache = [];
+			return filteredEventsCache;
 		}
 
-		// Clean up tooltip event listeners
-		if (timelineGroup) {
-			timelineGroup.selectAll('circle').on('mouseover', null).on('mouseout', null);
+		// create hash of current filter state
+		const filterHash = JSON.stringify(eventFilters);
+		if (filterHash === lastFilterHash && filteredEventsCache) {
+			return filteredEventsCache;
 		}
-	});
+
+		// check if any recipient filters are enabled
+		const hasAnyRecipientFiltersEnabled = Object.values(eventFilters).some(
+			(filter) => filter === true
+		);
+
+		// always show campaign events, filter only recipient events
+		filteredEventsCache = events.filter((event) => {
+			// always show campaign events
+			if (
+				event.eventName.startsWith('campaign_') &&
+				!event.eventName.startsWith('campaign_recipient_')
+			) {
+				return true;
+			}
+			// if no recipient filters are enabled, hide all recipient events
+			if (!hasAnyRecipientFiltersEnabled) {
+				return false;
+			}
+			// filter recipient events based on eventFilters
+			return eventFilters[event.eventName] === true;
+		});
+
+		lastFilterHash = filterHash;
+		return filteredEventsCache;
+	}
+
+	// get visible events for current zoom level (virtualization)
+	function getVisibleEvents(scale) {
+		const filteredEvents = getFilteredEvents();
+
+		if (!scale || filteredEvents.length <= MAX_VISIBLE_EVENTS) {
+			return filteredEvents;
+		}
+
+		const domain = scale.domain();
+		const visibleRange = [domain[0].getTime(), domain[1].getTime()];
+
+		// add some padding to include events just outside visible area
+		const padding = (visibleRange[1] - visibleRange[0]) * 0.1;
+		const extendedRange = [visibleRange[0] - padding, visibleRange[1] + padding];
+
+		// filter events within visible range
+		const eventsInRange = filteredEvents.filter((event) => {
+			const timestamp = new Date(event.createdAt).getTime();
+			return timestamp >= extendedRange[0] && timestamp <= extendedRange[1];
+		});
+
+		// if still too many events, sample them
+		if (eventsInRange.length > MAX_VISIBLE_EVENTS) {
+			const step = Math.ceil(eventsInRange.length / MAX_VISIBLE_EVENTS);
+			return eventsInRange.filter((_, index) => index % step === 0);
+		}
+
+		return eventsInRange;
+	}
+
+	// debounced container resize handler
+	function handleResize() {
+		if (resizeTimeout) clearTimeout(resizeTimeout);
+		resizeTimeout = setTimeout(() => {
+			if (container && initialized) {
+				const newWidth = container.offsetWidth - margin.left - margin.right;
+				if (newWidth > 0 && newWidth !== width) {
+					width = newWidth;
+					if (xScale) {
+						xScale.range([0, width]);
+						updateTimelineOptimized();
+					}
+				}
+			}
+		}, 100);
+	}
 
 	function initializeTimeline() {
-		if (isGhost) {
-			handleGhost();
+		if (!svg || !container) {
 			return;
 		}
 
-		if (!svg) return;
+		const containerWidth = container.offsetWidth;
+		width = containerWidth > 0 ? containerWidth - margin.left - margin.right : 800;
+		height = 200;
 
-		const g = d3
+		// clear any existing content
+		d3.select(svg).selectAll('*').remove();
+
+		// create the main timeline group
+		timelineGroup = d3
 			.select(svg)
 			.append('g')
-			.attr('transform', `translate(${margin.left},${margin.top})`);
+			.attr('transform', `translate(${margin.left}, ${margin.top})`);
 
-		g.append('defs')
-			.append('clipPath')
-			.attr('id', 'clip')
-			.append('rect')
-			.attr('width', width)
-			.attr('height', height - margin.top - margin.bottom);
-
-		timelineGroup = g.append('g').attr('clip-path', 'url(#clip)');
-
-		// Base timeline
+		// add the timeline line
 		timelineGroup
 			.append('line')
+			.attr('class', 'timeline-line')
 			.attr('x1', 0)
-			.attr('x2', width)
 			.attr('y1', (height - margin.top - margin.bottom) / 2)
+			.attr('x2', width)
 			.attr('y2', (height - margin.top - margin.bottom) / 2)
-			.attr('stroke', '#E2E8F0')
-			.attr('stroke-width', 2)
-			.attr('class', 'timeline-line');
+			.attr('stroke', isDarkMode ? '#374151' : '#e5e7eb')
+			.attr('stroke-width', 2);
 
-		// X Axis
-		g.append('g')
+		// add center reference line
+		timelineGroup
+			.append('line')
+			.attr('class', 'center-line')
+			.attr('x1', width / 2)
+			.attr('y1', 0)
+			.attr('x2', width / 2)
+			.attr('y2', height - margin.top - margin.bottom)
+			.attr('stroke', isDarkMode ? '#6b7280' : '#d1d5db')
+			.attr('stroke-width', 1)
+			.attr('opacity', 0.4);
+
+		// add x-axis group
+		d3.select(svg)
+			.append('g')
 			.attr('class', 'x-axis')
-			.attr('transform', `translate(0,${height - margin.bottom})`);
+			.attr('transform', `translate(${margin.left}, ${height - margin.bottom})`);
 
-		// Setup default time domain based on events
-		if (events.length > 0) {
-			const timestamps = events.map((d) => new Date(d.createdAt).getTime());
-			const timeRange = d3.extent(timestamps);
-			const timeSpan = timeRange[1] - timeRange[0];
-			const padding = Math.max(timeSpan * MIN_ZOOM_OUT_PADDING, 60000);
+		// create initial scale (always create one)
+		const now = new Date();
+		const defaultStart = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+		xScale = d3.scaleTime().domain([defaultStart, now]).range([0, width]);
 
-			const domainStart = new Date(timeRange[0] - padding);
-			const domainEnd = new Date(timeRange[1] + padding);
+		// setup zoom behavior
+		setupZoomOptimized();
 
-			xScale = d3.scaleTime().domain([domainStart, domainEnd]).range([0, width]);
-		} else {
-			const now = new Date();
-			const defaultStart = new Date(now);
-			defaultStart.setHours(now.getHours() - 24);
-			xScale = d3.scaleTime().domain([defaultStart, now]).range([0, width]);
+		// setup theme observer
+		if (!themeObserver && typeof MutationObserver !== 'undefined') {
+			themeObserver = new MutationObserver(() => {
+				checkTheme();
+				updateTimelineColors();
+			});
+			themeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ['class']
+			});
 		}
 
-		// Initialize the zoom behavior with calculated scale limits
-		setupZoom();
+		// setup resize observer
+		if (typeof ResizeObserver !== 'undefined') {
+			resizeObserver = new ResizeObserver(handleResize);
+			resizeObserver.observe(container);
+		}
 
-		updateAxes(xScale);
 		initialized = true;
+
+		// show initial axes
+		updateAxesImmediate(xScale);
+		updateCenterDate(xScale);
+
+		// initialize with current events after everything is set up
+		if (!isGhost) {
+			updateTimelineOptimized();
+		} else {
+			handleGhost();
+		}
 	}
 
-	function setupZoom() {
-		// Create a custom zoom behavior that handles the limits smoothly
+	// optimized zoom setup with better performance
+	function setupZoomOptimized() {
 		zoom = d3
 			.zoom()
-			.scaleExtent([0.1, 1000000]) // Use wide bounds
+			.scaleExtent([0.1, 1000000])
 			.extent([
 				[0, 0],
 				[width, height]
 			])
 			.filter((event) => {
-				// Check if this zoom operation would exceed our limit
-				if (event.type === 'wheel' || event.type === 'touchmove' || event.type === 'mousemove') {
-					// Get current visible timespan
+				// performance: check zoom limits only for wheel events
+				if (event.type === 'wheel') {
 					if (!currentTransform || !xScale) return true;
 
 					const newX = currentTransform.rescaleX(xScale);
 					const visibleDomain = newX.domain();
 					const visibleTimeSpan = visibleDomain[1] - visibleDomain[0];
 
-					// If we're already at 1 second and trying to zoom in further, block it
-					if (
-						visibleTimeSpan <= MAX_ZOOM_IN &&
-						((event.type === 'wheel' && event.deltaY < 0) ||
-							(event.type !== 'wheel' &&
-								event.sourceEvent?.type === 'wheel' &&
-								event.sourceEvent?.deltaY < 0))
-					) {
-						return false; // Block zoom in when already at max zoom
+					// block zoom in when already at max zoom
+					if (visibleTimeSpan <= MAX_ZOOM_IN && event.deltaY < 0) {
+						return false;
 					}
 				}
-				return true; // Allow all other zoom operations
+				return true;
 			})
-			.on('zoom', handleZoom);
+			.on('zoom', handleZoomThrottled);
 
 		d3.select(svg).call(zoom);
 	}
 
-	function updateTimeline() {
-		if (!initialized) {
-			initializeTimeline();
-		}
+	// throttled zoom handler for better performance
+	function handleZoomThrottled(event) {
+		if (!xScale) return;
 
-		if (!svg || !timelineGroup) return;
+		// store the current transform immediately for responsive feel
+		currentTransform = event.transform;
+		const newX = event.transform.rescaleX(xScale);
 
-		// Update scales based on events
-		const timestamps = events.map((d) => new Date(d.createdAt));
-		if (timestamps.length === 0) {
-			const now = new Date();
-			// Create a default domain of last 24 hours to now
-			const defaultStart = new Date(now);
-			defaultStart.setHours(now.getHours() - 24);
-			xScale = d3.scaleTime().domain([defaultStart, now]).range([0, width]);
-			updateAxes(xScale);
+		// immediately update circle positions for smooth panning
+		timelineGroup.selectAll('circle').attr('cx', (d) => newX(new Date(d.createdAt)));
+
+		// throttle expensive operations
+		if (zoomThrottleTimeout) clearTimeout(zoomThrottleTimeout);
+		zoomThrottleTimeout = setTimeout(() => {
+			updateAxesOptimized(newX);
+			updateVisibleEventsOptimized(newX);
+		}, 16); // ~60fps
+	}
+
+	// optimized timeline update with minimal DOM manipulation
+	function updateTimelineOptimized() {
+		if (!initialized || !svg || !timelineGroup || !xScale) {
 			return;
 		}
 
+		const filteredEvents = getFilteredEvents();
+
+		// handle empty state
+		if (filteredEvents.length === 0) {
+			timelineGroup.selectAll('circle').remove();
+			// keep current scale but update center date
+			updateCenterDate(xScale);
+			return;
+		}
+
+		// calculate time domain
+		const timestamps = filteredEvents.map((d) => new Date(d.createdAt));
 		const timeRange = d3.extent(timestamps);
 		const timeSpan = timeRange[1] - timeRange[0];
-		// Smaller minimum padding for shorter time spans
-		const padding = Math.max(timeSpan * MIN_ZOOM_OUT_PADDING, 60000); // minimum 1 minute padding
+		const padding = Math.max(timeSpan * MIN_ZOOM_OUT_PADDING, 60000);
 
 		const domainStart = new Date(timeRange[0].getTime() - padding);
 		const domainEnd = new Date(timeRange[1].getTime() + padding);
 
 		xScale = d3.scaleTime().domain([domainStart, domainEnd]).range([0, width]);
 
-		// Update zoom constraints based on the new data
-		setupZoom();
-
-		// Update dots
-		const dots = timelineGroup.selectAll('circle').data(events, (d) => d.id);
-
-		dots.exit().remove();
-
-		const dotsEnter = dots
-			.enter()
-			.append('circle')
-			.attr('r', 6)
-			.attr('stroke', '#fff')
-			.attr('stroke-width', 2)
-			.on('mouseover', showTooltip)
-			.on('mouseout', hideTooltip);
-
-		dots
-			.merge(dotsEnter)
-			.attr('cx', (d) => xScale(new Date(d.createdAt)))
-			.attr('cy', (height - margin.top - margin.bottom) / 2)
-			.attr('fill', (d) => getEventColor(d.eventName));
+		// update visible events
+		updateVisibleEventsOptimized(xScale);
+		updateAxesImmediate(xScale);
+		updateCenterDate(xScale);
 
+		// apply current transform if exists
 		if (currentTransform) {
 			const newX = currentTransform.rescaleX(xScale);
-			updateAxes(newX);
+			updateAxesImmediate(newX);
 			timelineGroup.selectAll('circle').attr('cx', (d) => newX(new Date(d.createdAt)));
 		} else {
-			updateAxes(xScale);
-			// Set initial zoom to fit all events nicely
+			// set initial zoom
 			const optimalScale = calculateOptimalScale(domainStart, domainEnd);
 			const initialTranslate = (width - width * optimalScale) / 2;
 			currentTransform = d3.zoomIdentity.translate(initialTranslate, 0).scale(optimalScale);
@@ -206,34 +346,56 @@
 		}
 	}
 
+	// optimized visible events update with virtualization
+	function updateVisibleEventsOptimized(scale) {
+		const currentScale = scale || xScale;
+		if (!currentScale) return;
+
+		visibleEvents = getVisibleEvents(currentScale);
+
+		// use d3's data join for efficient updates
+		const circles = timelineGroup
+			.selectAll('circle')
+			.data(visibleEvents, (d) => d.id || `${d.createdAt}-${d.eventName}`);
+
+		// remove events no longer visible
+		circles.exit().remove();
+
+		// add new visible events
+		circles
+			.enter()
+			.append('circle')
+			.attr('r', 6)
+			.attr('stroke', isDarkMode ? '#374151' : '#fff')
+			.attr('stroke-width', 1)
+			.attr('cy', (height - margin.top - margin.bottom) / 2)
+			.merge(circles)
+			.attr('cx', (d) => currentScale(new Date(d.createdAt)))
+			.attr('fill', (d) => getEventColor(d.eventName))
+			.on('mouseover', showTooltipOptimized)
+			.on('mouseout', hideTooltipOptimized);
+	}
+
 	function calculateOptimalScale(start, end) {
-		if (!start || !end) return 0.9; // Default fallback
+		if (!start || !end) return 0.9;
 
 		const timeSpan = end - start;
-		// Target visible timespan should be the actual timespan plus some padding
 		const targetTimeSpan = timeSpan * (1 + MIN_ZOOM_OUT_PADDING * 2);
 		const currentScale = width / targetTimeSpan;
 
-		// Constrain to a reasonable range for initial view
 		return Math.min(Math.max(currentScale, 0.7), 0.95);
 	}
 
-	function handleZoom(event) {
-		if (!xScale) return;
+	// optimized axis updates with throttling
+	function updateAxesOptimized(scale) {
+		if (axisUpdateTimeout) clearTimeout(axisUpdateTimeout);
 
-		// Store the current transform
-		currentTransform = event.transform;
-
-		// Apply the transform to the x scale
-		const newX = event.transform.rescaleX(xScale);
-
-		// Update the visualization with the new scale
-		updateAxes(newX);
-		timelineGroup.selectAll('circle').attr('cx', (d) => newX(new Date(d.createdAt)));
-		timelineGroup.select('line').attr('x1', 0).attr('x2', width);
+		axisUpdateTimeout = setTimeout(() => {
+			updateAxesImmediate(scale);
+		}, 32); // ~30fps for axis updates
 	}
 
-	function updateAxes(scale) {
+	function updateAxesImmediate(scale) {
 		if (!scale || !scale.domain || typeof scale.domain !== 'function') {
 			console.error('Invalid scale provided to updateAxes');
 			return;
@@ -241,9 +403,7 @@
 
 		const domain = scale.domain();
 		const timeSpan = domain[1] - domain[0];
-
-		// Calculate available width per tick to avoid overlap
-		const minTickSpacing = 80; // Minimum pixels between ticks
+		const minTickSpacing = 80;
 		const maxTicks = Math.floor(width / minTickSpacing);
 
 		const xAxis = d3.select(svg).select('.x-axis');
@@ -251,38 +411,30 @@
 			let tickFunction;
 			let tickFormat;
 
+			// optimize tick calculation
 			if (timeSpan < 1000) {
-				// Less than 1 second
-				// For very zoomed in views, use fewer time ticks with millisecond precision
 				tickFunction = d3.timeMillisecond.every(Math.ceil(timeSpan / maxTicks / 10) * 10);
 				tickFormat = d3.timeFormat(use24Hour ? '%H:%M:%S.%L' : '%I:%M:%S.%L %p');
 			} else if (timeSpan < 60000) {
-				// Less than 1 minute
 				tickFunction = d3.timeSecond.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 1000)));
 				tickFormat = d3.timeFormat(use24Hour ? '%H:%M:%S' : '%I:%M:%S %p');
 			} else if (timeSpan < 3600000) {
-				// Less than 1 hour
 				tickFunction = d3.timeMinute.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 60000)));
 				tickFormat = d3.timeFormat(use24Hour ? '%H:%M' : '%I:%M %p');
 			} else if (timeSpan < 86400000) {
-				// Less than 1 day
 				tickFunction = d3.timeHour.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 3600000)));
 				tickFormat = d3.timeFormat(use24Hour ? '%H:%M' : '%I:%M %p');
 			} else if (timeSpan < 2592000000) {
-				// Less than 30 days
 				tickFunction = d3.timeDay.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 86400000)));
 				tickFormat = d3.timeFormat('%d %b');
 			} else if (timeSpan < 31536000000) {
-				// Less than 1 year
 				tickFunction = d3.timeMonth.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 2592000000)));
 				tickFormat = d3.timeFormat('%b %Y');
 			} else {
-				// More than 1 year
 				tickFunction = d3.timeYear.every(Math.max(1, Math.ceil(timeSpan / maxTicks / 31536000000)));
 				tickFormat = d3.timeFormat('%Y');
 			}
 
-			// Apply the ticks with calculated frequency
 			xAxis.call(d3.axisBottom(scale).ticks(tickFunction).tickFormat(tickFormat));
 
 			xAxis
@@ -297,190 +449,389 @@
 	}
 
 	function updateCenterDate(scale) {
-		if (!scale || !scale.invert) return;
-
-		const centerX = width / 2;
-		const centerDate = scale.invert(centerX);
-		const timeSpan = scale.domain()[1] - scale.domain()[0];
-
-		const options = {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
-			second: '2-digit',
-			hour12: !use24Hour
-		};
-
-		if (timeSpan < 60000) {
-			options.fractionalSecondDigits = 3;
-		}
+		const currentScale = scale || xScale;
+		if (!currentScale) return;
 
 		try {
-			currentCenterDate = centerDate.toLocaleDateString('en-US', options);
+			const domain = currentScale.domain();
+			const centerTime = new Date((domain[0].getTime() + domain[1].getTime()) / 2);
+
+			// only update if significantly different to avoid unnecessary reactivity
+			if (Math.abs(centerTime.getTime() - currentCenterDate.getTime()) > 1000) {
+				currentCenterDate = centerTime;
+			}
 		} catch (e) {
-			console.error('Error formatting center date:', e);
-			currentCenterDate = '';
+			console.error('Error updating center date:', e);
 		}
 	}
 
 	function handleGhost() {
-		if (!svg) return;
+		if (!initialized || !timelineGroup) return;
 
-		d3.select(svg).selectAll('*').remove();
+		if (isGhost) {
+			// hide event dots and show ghost dots when in ghost mode
+			timelineGroup.selectAll('circle:not(.ghost-dot)').style('display', 'none');
 
-		const g = d3
-			.select(svg)
-			.append('g')
-			.attr('transform', `translate(${margin.left},${margin.top})`);
+			// create ghost dots if they don't exist
+			if (timelineGroup.selectAll('.ghost-dot').empty()) {
+				const ghostCount = Math.min(12, Math.max(3, Math.floor(width / 80)));
+				const ghostData = Array.from({ length: ghostCount }, (_, i) => ({
+					x: (width / (ghostCount - 1)) * i,
+					id: `ghost-${i}`
+				}));
 
-		g.append('line')
-			.attr('x1', 0)
-			.attr('x2', width)
-			.attr('y1', (height - margin.top - margin.bottom) / 2)
-			.attr('y2', (height - margin.top - margin.bottom) / 2)
-			.attr('stroke', '#E2E8F0')
-			.attr('stroke-width', 2)
-			.attr('class', 'timeline-line');
-
-		const ghostDots = 8;
-		const ghostDotsData = Array(ghostDots).fill(null);
-
-		g.selectAll('.ghost-dot')
-			.data(ghostDotsData)
-			.enter()
-			.append('circle')
-			.attr('class', 'ghost-dot')
-			.attr('cx', (_, i) => (width / (ghostDots - 1)) * i)
-			.attr('cy', (height - margin.top - margin.bottom) / 2)
-			.attr('r', 6)
-			.attr('fill', '#E2E8F0')
-			.attr('stroke', '#fff')
-			.attr('class', 'ghost-dot-fill')
-			.attr('stroke-width', 2);
-	}
-
-	function showTooltip(event, d) {
-		if (!tooltip || !d || !d.eventName) return;
-
-		const [x, y] = d3.pointer(event);
-		tooltip.style.display = 'block';
-
-		// Ensure tooltip stays within container bounds
-		const tooltipWidth = 250; // Approximate width
-		const leftPosition = x + margin.left + 10;
-		const rightEdge = leftPosition + tooltipWidth;
-		// If tooltip would go off the right side, position it to the left of the point
-		const adjustedLeft =
-			rightEdge > container.offsetWidth ? x + margin.left - tooltipWidth - 10 : leftPosition;
-
-		tooltip.style.left = `${adjustedLeft}px`;
-		tooltip.style.top = `${y + margin.top - 10}px`;
-
-		try {
-			tooltip.innerHTML = `
-				<div class="p-2">
-					<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) {
-			console.error('Error showing tooltip:', e);
-			hideTooltip();
+				timelineGroup
+					.selectAll('.ghost-dot')
+					.data(ghostData)
+					.enter()
+					.append('circle')
+					.attr('class', 'ghost-dot')
+					.attr('r', 6)
+					.attr('cx', (d) => d.x)
+					.attr('cy', (height - margin.top - margin.bottom) / 2)
+					.attr('fill', 'none')
+					.attr('stroke', isDarkMode ? '#6b7280' : '#9ca3af')
+					.attr('stroke-width', 1);
+			}
+		} else {
+			// remove ghost dots and show real events
+			timelineGroup.selectAll('.ghost-dot').remove();
+			timelineGroup.selectAll('circle:not(.ghost-dot)').style('display', null);
+			// update timeline with real data
+			updateTimelineOptimized();
 		}
 	}
 
-	function hideTooltip() {
-		if (tooltip) {
-			tooltip.style.display = 'none';
+	// optimized tooltip with reduced DOM manipulation
+	let tooltipTimeout;
+	function showTooltipOptimized(event, d) {
+		if (!tooltip || !d || !d.eventName) return;
+
+		// clear any pending hide
+		if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
+		// use requestAnimationFrame for smooth tooltip positioning
+		requestAnimationFrame(() => {
+			const [x, y] = d3.pointer(event, container);
+			tooltip.style.display = 'block';
+
+			const tooltipWidth = 250;
+			const containerRect = container.getBoundingClientRect();
+			const leftPosition = x + 10;
+			const rightEdge = leftPosition + tooltipWidth;
+			const adjustedLeft = rightEdge > container.offsetWidth ? x - tooltipWidth - 10 : leftPosition;
+
+			tooltip.style.left = `${Math.max(10, adjustedLeft)}px`;
+			tooltip.style.top = `${Math.max(10, y - 10)}px`;
+
+			updateTooltipContent(d);
+		});
+	}
+
+	function hideTooltipOptimized() {
+		if (tooltipTimeout) clearTimeout(tooltipTimeout);
+		tooltipTimeout = setTimeout(() => {
+			if (tooltip) {
+				tooltip.style.display = 'none';
+			}
+		}, 100); // small delay to prevent flickering
+	}
+
+	// separate tooltip content update for better performance
+	function updateTooltipContent(d) {
+		if (!tooltip) return;
+
+		try {
+			const eventColor = getEventColor(d.eventName);
+			const eventInfo = toEvent(d.eventName);
+			const eventIcon = getEventIcon(d.eventName);
+			const dateObj = new Date(d.createdAt);
+			const formattedDate = dateObj.toLocaleDateString();
+			const formattedTime = dateObj.toLocaleTimeString([], {
+				hour12: !use24Hour,
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit'
+			});
+
+			// use template literals for better performance
+			const content = `
+				<div class="overflow-hidden">
+					<div class="border-t-4" style="border-top-color: ${eventColor};">
+						<div class="px-4 py-3 text-gray-800 dark:text-gray-200">
+							<div class="flex items-center space-x-2">
+								<div class="flex-shrink-0 w-5 h-5" style="color: ${eventColor};">
+									${eventIcon}
+								</div>
+								<div class="flex-1 min-w-0">
+									<h3 class="text-sm font-bold truncate">${eventInfo.name}</h3>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="px-4 py-3 space-y-3">
+						${
+							d.recipient?.email
+								? `
+							<div class="flex items-center space-x-2">
+								<div class="flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400">
+									<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
+									</svg>
+								</div>
+								<span class="text-sm text-gray-700 dark:text-gray-300 truncate">${d.recipient.email}</span>
+							</div>
+						`
+								: ''
+						}
+						<div class="flex items-center space-x-2">
+							<div class="flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400">
+								<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+								</svg>
+							</div>
+							<div class="text-sm text-gray-700 dark:text-gray-300">
+								${formattedDate.split(',')[0]} ${formattedTime}
+							</div>
+						</div>
+						${
+							d.ip || d.userAgent
+								? `
+							<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600 space-y-2">
+								${
+									d.ip
+										? `
+									<div class="flex items-center space-x-2">
+										<div class="flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400">
+											<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+											</svg>
+										</div>
+										<span class="text-xs text-gray-600 dark:text-gray-400 truncate">${d.ip}</span>
+									</div>
+								`
+										: ''
+								}
+								${
+									d.userAgent
+										? `
+									<div class="flex items-start space-x-2">
+										<div class="flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400 mt-0.5">
+											<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+											</svg>
+										</div>
+										<span class="text-xs text-gray-600 dark:text-gray-400 break-words">${d.userAgent.length > 80 ? d.userAgent.substring(0, 80) + '...' : d.userAgent}</span>
+									</div>
+								`
+										: ''
+								}
+							</div>
+						`
+								: ''
+						}
+						${
+							d.data
+								? `
+							<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
+								<div class="flex items-start space-x-2">
+									<div class="flex-shrink-0 w-4 h-4 text-gray-500 dark:text-gray-400 mt-0.5">
+										<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+										</svg>
+									</div>
+									<div class="text-xs text-gray-600 dark:text-gray-400 break-words">${d.data.length > 100 ? d.data.substring(0, 100) + '...' : d.data}</div>
+								</div>
+							</div>
+						`
+								: ''
+						}
+					</div>
+				</div>
+			`;
+
+			tooltip.innerHTML = content;
+		} catch (e) {
+			console.error('Error updating tooltip content:', e);
+			hideTooltipOptimized();
 		}
 	}
 
 	function resetZoom() {
-		if (!svg || !zoom || !xScale || events.length === 0) return;
+		if (!zoom || !svg || !xScale) return;
 
-		try {
-			// If we have events, zoom to fit all events
-			if (events.length > 0) {
-				const timestamps = events.map((d) => new Date(d.createdAt).getTime());
-				const timeRange = d3.extent(timestamps);
-				const timeSpan = timeRange[1] - timeRange[0];
+		const filteredEvents = getFilteredEvents();
+		if (filteredEvents.length === 0) return;
 
-				// Add padding
-				const padding = Math.max(timeSpan * MIN_ZOOM_OUT_PADDING, 60000);
-				const domainStart = new Date(timeRange[0] - padding);
-				const domainEnd = new Date(timeRange[1] + padding);
+		const timestamps = filteredEvents.map((d) => new Date(d.createdAt));
+		const timeRange = d3.extent(timestamps);
+		const timeSpan = timeRange[1] - timeRange[0];
+		const padding = Math.max(timeSpan * MIN_ZOOM_OUT_PADDING, 60000);
 
-				// Calculate optimal scale
-				const optimalScale = calculateOptimalScale(domainStart, domainEnd);
+		const domainStart = new Date(timeRange[0].getTime() - padding);
+		const domainEnd = new Date(timeRange[1].getTime() + padding);
 
-				// Create transform to center the events
-				const initialTranslate = (width - width * optimalScale) / 2;
-				currentTransform = d3.zoomIdentity.translate(initialTranslate, 0).scale(optimalScale);
+		const optimalScale = calculateOptimalScale(domainStart, domainEnd);
+		const initialTranslate = (width - width * optimalScale) / 2;
 
-				// Apply transform with animation
-				d3.select(svg).transition().duration(750).call(zoom.transform, currentTransform);
-			} else {
-				// Default view for no events
-				const fullViewScale = 0.8;
-				const initialX = (width - width * fullViewScale) / 2;
-				currentTransform = d3.zoomIdentity.translate(initialX, 0).scale(fullViewScale);
-				d3.select(svg).transition().duration(750).call(zoom.transform, currentTransform);
-			}
-		} catch (e) {
-			console.error('Error resetting zoom:', e);
-		}
+		const resetTransform = d3.zoomIdentity.translate(initialTranslate, 0).scale(optimalScale);
+
+		d3.select(svg).transition().duration(750).call(zoom.transform, resetTransform);
 	}
 
 	function getEventColor(eventName) {
-		if (!eventName) return '#6B7280'; // Default gray for undefined events
-
-		const isDark =
-			typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
-
-		const lightModeColors = {
-			campaign_scheduled: '#4e68d8',
-			campaign_active: '#53afe3',
-			campaign_self_managed: '#303f9f',
+		const eventColors = {
+			campaign_scheduled: '#62aded',
+			campaign_active: '#5557f6',
+			campaign_self_managed: '#9622fc',
 			campaign_closed: '#9f9f9f',
 			campaign_recipient_scheduled: '#4e68d8',
+			campaign_recipient_cancelled: '#161692',
 			campaign_recipient_message_sent: '#94cae6',
 			campaign_recipient_message_failed: '#f2bb58',
-			campaign_recipient_message_read: '#22c55e', // More muted green
+			campaign_recipient_message_read: '#4cb5b5',
 			campaign_recipient_before_page_visited: '#eea5fa',
 			campaign_recipient_page_visited: '#f96dcf',
 			campaign_recipient_after_page_visited: '#f6287b',
 			campaign_recipient_submitted_data: '#f42e41',
-			campaign_recipient_cancelled: '#161692',
-			default: '#6B7280'
+			campaign_recipient_reported: '#2c3e50'
 		};
-
-		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;
+		return eventColors[eventName] || '#6b7280';
 	}
 
-	$: if (svg && events) {
-		updateTimeline();
+	function getEventIcon(eventName) {
+		const eventIcons = {
+			campaign_scheduled:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>',
+			campaign_active:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h1m4 0h1m-6 4h1m4 0h1M4 20h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>',
+			campaign_self_managed:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>',
+			campaign_closed:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+			campaign_recipient_scheduled:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>',
+			campaign_recipient_cancelled:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>',
+			campaign_recipient_message_sent:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>',
+			campaign_recipient_message_failed:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.072 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>',
+			campaign_recipient_message_read:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>',
+			campaign_recipient_before_page_visited:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>',
+			campaign_recipient_page_visited:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>',
+			campaign_recipient_after_page_visited:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>',
+			campaign_recipient_submitted_data:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+			campaign_recipient_reported:
+				'<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.072 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>'
+		};
+		return (
+			eventIcons[eventName] ||
+			'<svg fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="3"></circle></svg>'
+		);
+	}
+
+	function getEventDescription(eventName) {
+		const descriptions = {
+			campaign_scheduled: 'Campaign scheduled for future execution',
+			campaign_active: 'Campaign is currently running',
+			campaign_self_managed: 'Campaign is self-managed',
+			campaign_closed: 'Campaign has been completed',
+			campaign_recipient_scheduled: 'Recipient scheduled for campaign',
+			campaign_recipient_cancelled: 'Campaign cancelled for recipient',
+			campaign_recipient_message_sent: 'Email successfully delivered',
+			campaign_recipient_message_failed: 'Email delivery failed',
+			campaign_recipient_message_read: 'Recipient opened the email',
+			campaign_recipient_before_page_visited: 'Recipient browsing before target page',
+			campaign_recipient_page_visited: 'Recipient visited the target page',
+			campaign_recipient_after_page_visited: 'Recipient continued browsing after target',
+			campaign_recipient_submitted_data: 'Recipient submitted form data',
+			campaign_recipient_reported: 'Email was reported as spam'
+		};
+		return descriptions[eventName] || 'Unknown event';
+	}
+
+	function getEventStatus(eventName) {
+		if (eventName.startsWith('campaign_recipient_')) {
+			return 'recipient';
+		}
+		return 'campaign';
+	}
+
+	function handleClickOutside(event) {
+		if (showFilterDropdown && !event.target.closest('.filter-dropdown')) {
+			showFilterDropdown = false;
+		}
+	}
+
+	// lifecycle
+	onMount(() => {
+		checkTheme();
+	});
+
+	onDestroy(() => {
+		if (themeObserver) {
+			themeObserver.disconnect();
+		}
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+		}
+		if (zoomThrottleTimeout) clearTimeout(zoomThrottleTimeout);
+		if (axisUpdateTimeout) clearTimeout(axisUpdateTimeout);
+		if (tooltipTimeout) clearTimeout(tooltipTimeout);
+		if (resizeTimeout) clearTimeout(resizeTimeout);
+		window.removeEventListener('click', handleClickOutside);
+	});
+
+	// reactive statements - optimized to prevent unnecessary updates
+	$: if (container && svg && !initialized) {
+		initializeTimeline();
+	}
+
+	// simple width reactive update
+	$: if (container) {
+		const newWidth = container.offsetWidth - margin.left - margin.right;
+		if (newWidth > 0 && newWidth !== width) {
+			width = newWidth;
+		}
+	}
+
+	// debounce timeline updates
+	let timelineUpdateTimeout;
+	$: if (initialized && xScale) {
+		if (timelineUpdateTimeout) clearTimeout(timelineUpdateTimeout);
+		timelineUpdateTimeout = setTimeout(() => {
+			filteredEventsCache = null; // invalidate cache
+			if (!isGhost) {
+				updateTimelineOptimized();
+			}
+		}, 50);
+	}
+
+	// debounce filter updates
+	$: if (initialized && filterUpdateCounter >= 0 && xScale) {
+		if (timelineUpdateTimeout) clearTimeout(timelineUpdateTimeout);
+		timelineUpdateTimeout = setTimeout(() => {
+			filteredEventsCache = null; // invalidate cache
+			updateTimelineOptimized();
+		}, 50);
+	}
+
+	// ghost mode handling
+	$: if (initialized && timelineGroup) {
+		handleGhost();
+	}
+
+	// click outside handler
+	$: if (showFilterDropdown) {
+		window.addEventListener('click', handleClickOutside);
+	} else {
+		window.removeEventListener('click', handleClickOutside);
 	}
 </script>
 
@@ -489,38 +840,189 @@
 		<svg
 			bind:this={svg}
 			width="100%"
-			height={height + 20}
-			class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-2 transition-colors duration-200"
-		/>
+			{height}
+			class="w-full bg-white dark:bg-gray-900/80 border border-gray-200 dark:border-gray-700/60 rounded-lg"
+		></svg>
 		<div
 			bind:this={tooltip}
-			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"
-		/>
+			class="absolute z-50 hidden bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700/60 max-w-xs"
+		></div>
 		{#if !isGhost}
 			<div class="absolute top-2 right-2 flex gap-2">
-				<button
-					on:click={() => {
-						use24Hour = !use24Hour;
-						updateTimeline();
-					}}
-					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>
+				<div class="relative filter-dropdown">
+					<button
+						on:click|stopPropagation={() => (showFilterDropdown = !showFilterDropdown)}
+						class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 focus:outline-none focus:border-slate-400 dark:focus:border-highlight-blue/80 transition-colors duration-200"
+					>
+						<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+							></path>
+						</svg>
+					</button>
+					{#if showFilterDropdown}
+						<div
+							class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-900/80 rounded-md shadow-lg border border-gray-200 dark:border-gray-700/60 z-50"
+						>
+							<div class="p-3">
+								<h3 class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3">
+									Filter Events
+								</h3>
+
+								<div class="space-y-3">
+									<div>
+										<h4 class="text-xs font-medium text-gray-600 dark:text-gray-300 mb-2">
+											Recipient Events
+										</h4>
+										<div class="space-y-1 pl-2">
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_scheduled}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Scheduled</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_cancelled}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Cancelled</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_message_sent}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Message Sent</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_message_failed}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Message Failed</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_message_read}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Message Read</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_before_page_visited}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Before Page Visited</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_page_visited}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Page Visited</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_after_page_visited}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">After Page Visited</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_submitted_data}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Data Submitted</span>
+											</label>
+											<label class="flex items-center text-xs">
+												<input
+													type="checkbox"
+													bind:checked={eventFilters.campaign_recipient_reported}
+													on:change={() => filterUpdateCounter++}
+													class="mr-2 rounded border-slate-300 dark:border-gray-700/60"
+												/>
+												<span class="text-gray-600 dark:text-gray-300">Reported</span>
+											</label>
+										</div>
+									</div>
+								</div>
+
+								<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600 flex gap-2">
+									<button
+										on:click={() => {
+											Object.keys(eventFilters).forEach((key) => {
+												eventFilters[key] = true;
+											});
+											filterUpdateCounter++;
+										}}
+										class="flex-1 px-2 py-1 text-xs bg-cta-blue dark:bg-highlight-blue/80 text-white rounded hover:bg-blue-500 dark:hover:bg-highlight-blue focus:outline-none transition-colors duration-200"
+									>
+										Select All
+									</button>
+									<button
+										on:click={() => {
+											Object.keys(eventFilters).forEach((key) => {
+												eventFilters[key] = false;
+											});
+											filterUpdateCounter++;
+										}}
+										class="flex-1 px-2 py-1 text-xs bg-slate-500 dark:bg-gray-700 text-white rounded hover:bg-slate-600 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"
+									>
+										Clear All
+									</button>
+									<button
+										on:click={() => (showFilterDropdown = false)}
+										class="px-2 py-1 text-xs text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+									>
+										✕
+									</button>
+								</div>
+							</div>
+						</div>
+					{/if}
+				</div>
 				<button
 					on:click={resetZoom}
-					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"
+					class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 focus:outline-none focus:border-slate-400 dark:focus:border-highlight-blue/80 transition-colors duration-200"
 				>
-					Reset View
+					Reset Zoom
+				</button>
+				<button
+					on:click={() => (use24Hour = !use24Hour)}
+					class="inline-flex items-center px-2 py-1 border border-slate-300 dark:border-gray-700/60 rounded-md text-xs font-medium text-slate-600 dark:text-gray-300 bg-grayblue-light dark:bg-gray-900/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 focus:outline-none focus:border-slate-400 dark:focus:border-highlight-blue/80 transition-colors duration-200"
+				>
+					{use24Hour ? '12H' : '24H'}
 				</button>
 			</div>
 			<div
-				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"
+				class="absolute top-2 left-2 text-xs text-slate-600 dark:text-gray-400 bg-grayblue-light dark:bg-gray-900/60 px-2 py-1 rounded border border-slate-300 dark:border-gray-700/60"
 			>
-				{currentCenterDate}
-			</div>
-			<div class="absolute bottom-0 right-0 p-2 text-xs text-slate-500 dark:text-gray-400">
-				Drag to pan • Scroll to zoom
+				{currentCenterDate.toLocaleString()}
 			</div>
 		{/if}
 	</div>
@@ -528,60 +1030,52 @@
 
 <style>
 	:global(.x-axis text) {
+		fill: #6b7280;
 		font-size: 11px;
-		font-weight: 500;
-		fill: #4a5568;
 	}
 
 	:global(.dark .x-axis text) {
-		fill: #d1d5db;
+		fill: #9ca3af;
 	}
 
 	:global(.x-axis line) {
-		stroke: #e2e8f0;
+		stroke: #e5e7eb;
 	}
 
 	:global(.dark .x-axis line) {
-		stroke: #4b5563;
+		stroke: #374151;
 	}
 
 	:global(.x-axis path) {
-		stroke: #e2e8f0;
+		stroke: #e5e7eb;
 	}
 
 	:global(.dark .x-axis path) {
-		stroke: #4b5563;
+		stroke: #374151;
 	}
 
 	:global(.timeline-line) {
-		stroke: #e2e8f0;
+		stroke: #e5e7eb;
 	}
 
 	:global(.dark .timeline-line) {
-		stroke: #4b5563;
+		stroke: #374151;
 	}
 
 	:global(.ghost-dot-fill) {
-		fill: #e2e8f0;
-		stroke: #fff;
+		fill: #e5e7eb;
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
 
 	:global(.dark .ghost-dot-fill) {
-		fill: #4b5563;
-		stroke: #1f2937;
+		fill: #374151;
 	}
 
 	:global(.ghost-dot) {
 		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 	}
 
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.5;
-		}
+	:global(.center-line) {
+		pointer-events: none;
 	}
 </style>
diff --git a/frontend/src/lib/components/FormButton.svelte b/frontend/src/lib/components/FormButton.svelte
index ac2f0c8..c42808a 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 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"
+	class="bg-cta-blue dark:bg-highlight-blue/80 px-2 py-2 self-end hover:bg-blue-500 dark:hover:bg-highlight-blue 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/FormError.svelte b/frontend/src/lib/components/FormError.svelte
index 06b1d8c..f66db5d 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 select-text">
 		<div class="w-80 flex col-span-12 justify-center">
 			<div
-				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"
+				class="flex items-center w-full bg-pleasant-gray dark:bg-gray-800/40 rounded-md border border-gray-200 dark:border-gray-700/60 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 text-gray-700 dark:text-gray-200 transition-colors duration-200">
+				<p class="pl-4 text-gray-700 dark:text-gray-400 transition-colors duration-200">
 					{message}
 				</p>
 			</div>
diff --git a/frontend/src/lib/components/Input.svelte b/frontend/src/lib/components/Input.svelte
index 19035d4..3e4fd97 100644
--- a/frontend/src/lib/components/Input.svelte
+++ b/frontend/src/lib/components/Input.svelte
@@ -12,7 +12,7 @@
 <div class="flex flex-col w-full p-4 h-24">
 	<label
 		for={fieldName}
-		class="text-md font-semibold font-titilium text-pc-darkblue dark:text-gray-200"
+		class="text-md font-semibold font-titilium text-pc-darkblue dark:text-gray-300"
 		>{fieldName}</label
 	>
 	<input
@@ -34,6 +34,6 @@
 		{type}
 		id={fieldName}
 		name={fieldName}
-		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"
+		class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-900/60 dark:border-gray-700/60 dark:text-gray-300 dark:placeholder-gray-500 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
 	/>
 </div>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index f76f4c5..dcae501 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -295,9 +295,7 @@
 
 {#if visible}
 	<div bind:this={bindTo}>
-		<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 opacity-[0.5]" />
 		<div
 			class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
 			role="dialog"
@@ -311,7 +309,7 @@
 			>
 				<div
 					class:opacity-20={isSubmitting}
-					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"
+					class="bg-cta-blue dark:bg-blue-800 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 57fb8a2..b7c5098 100644
--- a/frontend/src/lib/components/Pagination.svelte
+++ b/frontend/src/lib/components/Pagination.svelte
@@ -43,16 +43,16 @@
 
 <div class="flex items-center mb-8 mt-4">
 	<button
-		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"
+		class="bg-highlight-blue dark:bg-highlight-blue/80 w-8 text-white hover:bg-active-blue dark:hover:bg-highlight-blue 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 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md py-1 px-1 transition-colors duration-200"
+		class="w-8 text-center bg-grayblue-light dark:bg-gray-800/60 text-gray-700 dark:text-gray-300 rounded-md py-1 px-1 transition-colors duration-200"
 	>
 		{currentPage}
 	</div>
 	<button
-		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"
+		class="bg-highlight-blue dark:bg-highlight-blue/80 w-8 text-white hover:bg-active-blue dark:hover:bg-highlight-blue 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 28fd334..e68e43c 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 dark:text-gray-300 py-2 transition-colors duration-200">
+		<p class="font-semibold text-slate-600 dark:text-gray-400 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -69,9 +69,9 @@
 		{/if}
 		{#if optional === true}
 			<div
-				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+				class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 			>
-				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-400 text-xs transition-colors duration-200">
 					optional
 				</p>
 			</div>
@@ -90,7 +90,7 @@
 				minlength={minLength}
 				maxlength={maxLength}
 				{required}
-				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"
+				class="text-ellipsis w-60 rounded-md py-2 pl-4 pr-12 text-gray-600 dark:text-gray-300 border border-transparent dark:border-gray-700/60 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal transition-colors duration-200"
 			/>
 		{:else}
 			<input
@@ -104,7 +104,7 @@
 				{placeholder}
 				autocomplete="off"
 				{required}
-				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"
+				class="text-ellipsis w-60 rounded-md py-2 pl-4 pr-12 text-gray-600 dark:text-gray-300 border border-transparent dark:border-gray-700/60 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal transition-colors duration-200"
 			/>
 		{/if}
 		<button
diff --git a/frontend/src/lib/components/Search.svelte b/frontend/src/lib/components/Search.svelte
index e06e7c5..47bf212 100644
--- a/frontend/src/lib/components/Search.svelte
+++ b/frontend/src/lib/components/Search.svelte
@@ -39,7 +39,7 @@
 				setSearch();
 			}
 		}}
-		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"
+		class="bg-grayblue-light dark:bg-gray-900/60 w-56 border text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700/60 pl-8 py-2 relative rounded-lg focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border transition-colors duration-200 dark:placeholder-gray-500"
 		placeholder="Search"
 	/>
 </div>
diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte
index ede8d57..1bc08e6 100644
--- a/frontend/src/lib/components/Select.svelte
+++ b/frontend/src/lib/components/Select.svelte
@@ -22,11 +22,11 @@
 </script>
 
 <div>
-	<label for="pet-select" class="text-gray-600 dark:text-gray-300 transition-colors duration-200"
+	<label for="pet-select" class="text-gray-600 dark:text-gray-400 transition-colors duration-200"
 		>Show:</label
 	>
 	<select
-		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"
+		class="bg-grayblue-light dark:bg-gray-900/60 px-2 py-1 rounded-md text-gray-600 dark:text-gray-300 border border-transparent dark:border-gray-700/60 focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 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 763c959..3c519b3 100644
--- a/frontend/src/lib/components/SelectSquare.svelte
+++ b/frontend/src/lib/components/SelectSquare.svelte
@@ -15,7 +15,7 @@
 <div class="flex flex-col gap-2 py-2">
 	{#if label}
 		<div class="flex flex-row items-center">
-			<div class="font-semibold text-slate-600 dark:text-gray-300 transition-colors duration-200">
+			<div class="font-semibold text-slate-600 dark:text-gray-400 transition-colors duration-200">
 				{label}
 			</div>
 			{#if toolTipText.length > 0}
@@ -25,9 +25,9 @@
 			{/if}
 			{#if optional}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+					class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
-					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
+					<p class="text-slate-600 dark:text-gray-400 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -46,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 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30
+          hover:border-blue-300 dark:hover:border-highlight-blue/80 hover:bg-blue-50 dark:hover:bg-highlight-blue/20
           ${
 						value === option.value
-							? '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'
+							? 'border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-800/40 text-green-700 dark:text-green-300'
+							: 'border-gray-200 dark:border-gray-700/60 bg-white dark:bg-gray-900/60 text-gray-700 dark:text-gray-300'
 					}
         `}
 				on:click={() => {
diff --git a/frontend/src/lib/components/StatsCard.svelte b/frontend/src/lib/components/StatsCard.svelte
index 8a287a6..925ffeb 100644
--- a/frontend/src/lib/components/StatsCard.svelte
+++ b/frontend/src/lib/components/StatsCard.svelte
@@ -43,17 +43,17 @@
 </script>
 
 <div
-	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"
+	class="bg-white dark:bg-gray-900/80 p-6 rounded-lg shadow-md dark:shadow-none border-l-[12px] {borderColor} hover:shadow-lg dark:hover:shadow-none transition-all duration-200 dark:ring-1 dark:ring-gray-600/30"
 >
 	<div
-		class="text-grayblue-dark dark:text-gray-400 text-sm font-semibold transition-colors duration-200"
+		class="text-grayblue-dark dark:text-gray-500 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 dark:text-gray-100 transition-colors duration-200 {flash
+				class="text-3xl font-bold text-pc-darkblue dark:text-gray-300 transition-colors duration-200 {flash
 					? 'flash'
 					: ''}"
 			>
@@ -82,13 +82,13 @@
 
 	{#if validPercentages.length > 0}
 		<button
-			class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center transition-colors duration-200"
+			class="mt-2 text-sm text-gray-600 dark:text-gray-500 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 dark:text-gray-200 font-semibold transition-colors duration-200"
+					class="text-pc-darkblue dark:text-gray-400 font-semibold transition-colors duration-200"
 				>
 					{validPercentages[currentPercentageIndex].value}%
 				</span>
@@ -99,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 dark:text-gray-500 transition-colors duration-200"
+					class="h-4 w-4 ml-1 text-gray-400 dark:text-gray-600 transition-colors duration-200"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
diff --git a/frontend/src/lib/components/TextField.svelte b/frontend/src/lib/components/TextField.svelte
index 1cbf50f..c181b1e 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 dark:text-gray-300 py-2 transition-colors duration-200">
+		<p class="font-semibold text-slate-600 dark:text-gray-400 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -69,9 +69,9 @@
 		{/if}
 		{#if optional === true}
 			<div
-				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+				class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 			>
-				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-400 text-xs transition-colors duration-200">
 					optional
 				</p>
 			</div>
@@ -97,7 +97,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 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-ellipsis row-start-1 row-span-3 justify-self-center rounded-md py-2 pl-2 text-gray-600 dark:text-gray-300 border border-transparent dark:border-gray-700/60 focus:outline-none focus:border-solid focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 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 d5ab1d0..1eefc16 100644
--- a/frontend/src/lib/components/TextFieldMultiSelect.svelte
+++ b/frontend/src/lib/components/TextFieldMultiSelect.svelte
@@ -118,7 +118,7 @@
 	<label class="flex flex-col py-2 relative">
 		<div class="flex items-center">
 			<p
-				class="font-semibold text-slate-600 dark:text-gray-300 py-2 transition-colors duration-200"
+				class="font-semibold text-slate-600 dark:text-gray-400 py-2 transition-colors duration-200"
 			>
 				<slot />
 			</p>
@@ -129,9 +129,9 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+					class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
-					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
+					<p class="text-slate-600 dark:text-gray-400 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -155,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 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="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-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
 			/>
 			{#if showSelection}
 				<img
@@ -169,13 +169,13 @@
 		{#if showSelection}
 			<div class="w-60 absolute top-10 z-50">
 				<ul
-					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"
+					class="bg-gray-100 dark:bg-gray-900 list-none mt-4 rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-700/60 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 dark:bg-gray-700 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"
+									class="w-full text-left bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 hover:bg-grayblue-dark dark:hover:bg-highlight-blue/40 hover:text-white py-2 px-2 cursor-pointer transition-colors duration-200"
 									on:click={() => {
 										onClickSelectedOption(option);
 									}}
@@ -186,7 +186,7 @@
 						{/each}
 					{:else}
 						<li
-							class="w-full bg-slate-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-2 px-2 transition-colors duration-200"
+							class="w-full bg-slate-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 py-2 px-2 transition-colors duration-200"
 						>
 							List is empty
 						</li>
@@ -200,7 +200,7 @@
 					on:click|preventDefault={removeSelection}
 					on:keypress|preventDefault={removeSelection}
 					data-value={option}
-					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"
+					class="flex flex-row items-center bg-gray-100 dark:bg-gray-800/60 hover:bg-gray-200 dark:hover:bg-gray-700/80 px-2 py-2 mt-2 mr-2 rounded-md text-gray-900 dark:text-gray-300 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/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index bbb60cf..5983e29 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -237,7 +237,7 @@
 		<div class="flex items-center">
 			<p
 				id={labelId}
-				class="font-semibold text-slate-600 dark:text-gray-300 py-1 transition-colors duration-200"
+				class="font-semibold text-slate-600 dark:text-gray-400 py-1 transition-colors duration-200"
 			>
 				<slot />
 			</p>
@@ -248,9 +248,9 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+					class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
-					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
+					<p class="text-slate-600 dark:text-gray-400 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -278,7 +278,7 @@
 				on:keydown={handleKeyDown}
 				on:click={handleFocus}
 				autocomplete="off"
-				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="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-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 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}
@@ -331,7 +331,7 @@
 					id={listboxId}
 					role="listbox"
 					aria-labelledby={labelId}
-					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"
+					class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#if allOptions.length}
 						{#each allOptions as option, index}
@@ -340,7 +340,7 @@
 									id="{listboxId}-option-{index}"
 									role="option"
 									aria-selected={value === option}
-									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-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"
+									class="w-full text-left bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 hover:bg-grayblue-dark dark:hover:bg-highlight-blue/40 hover:text-white py-2 px-2 cursor-pointer focus:bg-grayblue-dark dark:focus:bg-highlight-blue/40 focus:text-white focus:outline-none transition-colors duration-200"
 									on:click={(e) => {
 										e.preventDefault();
 										e.stopPropagation();
@@ -356,7 +356,7 @@
 					{:else}
 						<li
 							role="none"
-							class="w-full bg-slate-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-2 px-2 transition-colors duration-200"
+							class="w-full bg-slate-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 py-2 px-2 transition-colors duration-200"
 						>
 							No options available
 						</li>
diff --git a/frontend/src/lib/components/TextareaField.svelte b/frontend/src/lib/components/TextareaField.svelte
index 9319b5d..b0e8c8c 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 dark:text-gray-300 py-2 transition-colors duration-200">
+		<p class="font-bold text-slate-600 dark:text-gray-400 py-2 transition-colors duration-200">
 			<slot />
 		</p>
 		{#if toolTipText.length > 0}
@@ -62,9 +62,9 @@
 		{/if}
 		{#if optional === true}
 			<div
-				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+				class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 			>
-				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
+				<p class="text-slate-600 dark:text-gray-400 text-xs transition-colors duration-200">
 					optional
 				</p>
 			</div>
@@ -80,7 +80,7 @@
 		maxlength={maxLength}
 		{readonly}
 		{placeholder}
-		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=" focus:outline-none pl-2 border border-transparent dark:border-gray-700/60 rounded-md focus:border-solid text-gray-600 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700/60 font-light focus:border-slate-400 dark:focus:border-highlight-blue/80 bg-grayblue-light dark:bg-gray-900/60 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/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index 96ba9a8..a952161 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 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"
+						class="flex items-center bg-pleasant-gray dark:bg-gray-800/80 text-gray-500 dark:text-gray-300 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 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"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-800/80 text-gray-500 dark:text-gray-300 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 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"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-800/80 text-gray-500 dark:text-gray-300 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 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"
+					class="flex items-center bg-pleasant-gray dark:bg-gray-800/80 text-gray-500 dark:text-gray-300 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 d2cb986..34efa30 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 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"
+	class="rounded-full bg-gray-600 dark:bg-gray-700/80 text-white w-4 h-4 z-30 text-center ml-2 relative cursor-pointer hover:bg-gray-500 dark:hover:bg-gray-600/80 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 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"
+		class="bg-gray-600 dark:bg-gray-800/90 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/form/PageTypeSwitcher.svelte b/frontend/src/lib/components/form/PageTypeSwitcher.svelte
index 1e6eed5..0b82c6b 100644
--- a/frontend/src/lib/components/form/PageTypeSwitcher.svelte
+++ b/frontend/src/lib/components/form/PageTypeSwitcher.svelte
@@ -16,14 +16,14 @@
 	}
 </script>
 
-<div class="inline-flex bg-gray-100 dark:bg-gray-700 rounded p-0.5">
+<div class="inline-flex bg-gray-100 dark:bg-gray-800/60 rounded p-0.5">
 	{#each options as option}
 		<button
 			type="button"
 			class="w-6 h-6 text-xs rounded transition-colors duration-150 flex items-center justify-center {value ===
 			option.value
-				? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'
-				: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'} {disabled
+				? 'bg-white dark:bg-gray-700/80 text-gray-900 dark:text-white shadow-sm'
+				: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'} {disabled
 				? 'opacity-50 cursor-not-allowed'
 				: 'cursor-pointer'}"
 			on:click={() => handleChange(option.value)}
diff --git a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
index aff5899..e5b59b8 100644
--- a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
+++ b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
@@ -240,7 +240,7 @@
 		<div class="flex items-center">
 			<p
 				id={labelId}
-				class="font-semibold text-slate-600 dark:text-gray-300 py-1 transition-colors duration-200"
+				class="font-semibold text-slate-600 dark:text-gray-400 py-1 transition-colors duration-200"
 			>
 				<slot />
 			</p>
@@ -251,9 +251,9 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-800/60 ml-2 px-2 rounded-md transition-colors duration-200"
 				>
-					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
+					<p class="text-slate-600 dark:text-gray-400 text-xs">optional</p>
 				</div>
 			{/if}
 		</div>
@@ -265,8 +265,8 @@
 					type="button"
 					class="w-8 h-8 text-base transition-all duration-200 rounded-lg border flex items-center justify-center {type ===
 					'page'
-						? '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-grayblue-light dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30'}"
+						? 'border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-800/40 text-green-700 dark:text-green-300'
+						: 'border-gray-200 dark:border-gray-700/60 bg-grayblue-light dark:bg-gray-800/60 text-gray-700 dark:text-gray-300 hover:border-blue-300 dark:hover:border-highlight-blue/80 hover:bg-blue-50 dark:hover:bg-highlight-blue/20'}"
 					on:click={() => handleTypeChange('page')}
 					title="Page"
 				>
@@ -276,8 +276,8 @@
 					type="button"
 					class="w-8 h-8 text-base transition-all duration-200 rounded-lg border flex items-center justify-center ml-0.5 {type ===
 					'proxy'
-						? '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-grayblue-light dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:border-blue-300 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/30'}"
+						? 'border-green-500 dark:border-green-400 bg-green-50 dark:bg-green-800/40 text-green-700 dark:text-green-300'
+						: 'border-gray-200 dark:border-gray-700/60 bg-grayblue-light dark:bg-gray-800/60 text-gray-700 dark:text-gray-300 hover:border-blue-300 dark:hover:border-highlight-blue/80 hover:bg-blue-50 dark:hover:bg-highlight-blue/20'}"
 					on:click={() => handleTypeChange('proxy')}
 					title="Proxy"
 				>
@@ -308,7 +308,7 @@
 				on:keydown={handleKeyDown}
 				on:click={handleFocus}
 				autocomplete="off"
-				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="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-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
 				class:pl-10={isFocused && showDropdown}
 				class:pl-20={!isFocused}
 				class:pl-4={isFocused && !showDropdown}
@@ -363,7 +363,7 @@
 					id={listboxId}
 					role="listbox"
 					aria-labelledby={labelId}
-					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"
+					class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#if allOptions.length}
 						{#each allOptions as option, index}
@@ -372,7 +372,7 @@
 									id="{listboxId}-option-{index}"
 									role="option"
 									aria-selected={value === option}
-									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-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"
+									class="w-full text-left bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 hover:bg-grayblue-dark dark:hover:bg-highlight-blue/40 hover:text-white py-2 px-2 cursor-pointer focus:bg-grayblue-dark dark:focus:bg-highlight-blue/40 focus:text-white focus:outline-none transition-colors duration-200"
 									on:click={(e) => {
 										e.preventDefault();
 										e.stopPropagation();
@@ -388,7 +388,7 @@
 					{:else}
 						<li
 							role="none"
-							class="w-full bg-slate-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-2 px-2 transition-colors duration-200"
+							class="w-full bg-slate-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 py-2 px-2 transition-colors duration-200"
 						>
 							No {type === 'proxy' ? 'Proxies' : 'pages'} available
 						</li>
diff --git a/frontend/src/lib/components/header/CompanyBanner.svelte b/frontend/src/lib/components/header/CompanyBanner.svelte
new file mode 100644
index 0000000..b4a743d
--- /dev/null
+++ b/frontend/src/lib/components/header/CompanyBanner.svelte
@@ -0,0 +1,53 @@
+<script>
+	import { AppStateService } from '$lib/service/appState';
+	import { onMount } from 'svelte';
+
+	let context = {
+		current: '',
+		companyName: ''
+	};
+
+	const appState = AppStateService.instance;
+
+	onMount(() => {
+		const unsub = appState.subscribe((s) => {
+			context = {
+				current: s.context.current,
+				companyName: s.context.companyName
+			};
+		});
+		return () => {
+			unsub();
+		};
+	});
+</script>
+
+{#if context.current === AppStateService.CONTEXT.COMPANY && context.companyName}
+	<div
+		class="sticky top-0 w-full bg-blue-900 dark:bg-gradient-to-r dark:from-emerald-700 dark:to-teal-700 border-b border-blue-800/50 dark:border-emerald-600/50 z-30"
+	>
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="flex items-center justify-center py-1">
+				<div class="flex items-center space-x-2 text-xs">
+					<svg
+						class="w-3 h-3 text-blue-100 dark:text-emerald-100"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+						></path>
+					</svg>
+					<span class="text-blue-100 dark:text-emerald-100 font-medium">Viewing as:</span>
+					<span class="text-white dark:text-white font-semibold">
+						{context.companyName}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/header/DesktopMenu.svelte b/frontend/src/lib/components/header/DesktopMenu.svelte
index 4021591..89b72ea 100644
--- a/frontend/src/lib/components/header/DesktopMenu.svelte
+++ b/frontend/src/lib/components/header/DesktopMenu.svelte
@@ -3,8 +3,57 @@
 	import { page } from '$app/stores';
 	import { scrollBarClassesVertical } from '$lib/utils/scrollbar';
 	import { shouldHideMenuItem } from '$lib/utils/common';
+	import { AppStateService } from '$lib/service/appState';
+	import { onMount } from 'svelte';
+	import { beforeNavigate } from '$app/navigation';
 
 	let isExpanded = false;
+	let menuElement;
+	let instantCollapse = false;
+	let context = {
+		current: '',
+		companyName: ''
+	};
+
+	const appState = AppStateService.instance;
+
+	onMount(() => {
+		const unsub = appState.subscribe((s) => {
+			context = {
+				current: s.context.current,
+				companyName: s.context.companyName
+			};
+		});
+
+		// handle click outside to collapse menu
+		const handleClickOutside = (event) => {
+			if (isExpanded && menuElement && !menuElement.contains(event.target)) {
+				isExpanded = false;
+			}
+		};
+
+		document.addEventListener('click', handleClickOutside);
+
+		return () => {
+			unsub();
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
+
+	// handle navigation to collapse menu
+	beforeNavigate(() => {
+		if (isExpanded) {
+			instantCollapse = true;
+			isExpanded = false;
+			// reset after a brief moment
+			setTimeout(() => {
+				instantCollapse = false;
+			}, 50);
+		}
+	});
+
+	$: hasCompanySelected =
+		context.current === AppStateService.CONTEXT.COMPANY && context.companyName;
 
 	const icons = {
 		dashboard: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -98,19 +147,23 @@
 
 <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 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"
+		bind:this={menuElement}
+		class="hidden lg:flex flex-col 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-highlight-blue/40"
+		class:transition-all={!instantCollapse}
 		class:w-40={isExpanded}
 		class:w-12={!isExpanded}
+		class:!top-[89px]={hasCompanySelected}
+		class:!max-h-[calc(100vh-6rem)]={hasCompanySelected}
 	>
 		<div
-			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"
+			class="sticky top-0 bg-highlight-blue/20 dark:bg-gray-800/70 border-b w-full border-blue-700/30 dark:border-highlight-blue/40 transform-none transition-colors duration-200"
 		>
 			<button
-				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"
+				class="w-full flex items-center justify-center rounded-md hover:bg-blue-600/30 dark:hover:bg-highlight-blue/20 transition-colors group px-3 py-2"
 				on:click={() => (isExpanded = !isExpanded)}
 			>
 				<svg
-					class="text-blue-100 dark:text-gray-100 duration-200 w-6 transition-colors"
+					class="text-blue-100 dark:text-highlight-blue duration-200 w-6 transition-colors"
 					class:rotate-180={!isExpanded}
 					xmlns="http://www.w3.org/2000/svg"
 					fill="none"
@@ -136,7 +189,7 @@
 					<div class="py-1 mt-4 first:mt-0">
 						{#if isExpanded}
 							<div
-								class="px-3 py-2 text-xs font-semibold text-blue-100 dark:text-gray-200 uppercase tracking-wider transition-colors duration-200"
+								class="px-3 py-2 text-xs font-semibold text-blue-100 dark:text-highlight-blue uppercase tracking-wider transition-colors duration-200"
 							>
 								{link.label}
 							</div>
@@ -147,15 +200,15 @@
 								<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 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'}"
+										? 'text-white font-medium bg-active-blue dark:bg-active-blue shadow-md'
+										: 'text-blue-100 dark:text-gray-200 hover:shadow-md hover:bg-highlight-blue/80 dark:hover:bg-highlight-blue/20 hover:text-white dark:hover:text-gray-100'}"
 									class:hidden={shouldHideMenuItem(item.route)}
 									draggable="false"
 									href={item.route}
 									title={item.label}
 								>
 									<!-- Icon -->
-									<div class="flex-shrink-0">
+									<div class="flex-shrink-0 text-blue-100 dark:text-highlight-blue">
 										{@html getIconForRoute(item.route)}
 									</div>
 
@@ -172,7 +225,9 @@
 									{/if}
 
 									{#if $page.url.pathname === item.route}
-										<div class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-blue-400"></div>
+										<div
+											class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-highlight-blue"
+										></div>
 									{/if}
 								</a>
 							{/each}
@@ -182,13 +237,13 @@
 					<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 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'}"
+							? 'text-white font-medium bg-active-blue dark:bg-active-blue shadow-md'
+							: 'text-blue-100 dark:text-gray-200 hover:text-white dark:hover:text-gray-100 hover:bg-highlight-blue/80 dark:hover:bg-highlight-blue/20'}"
 						draggable="false"
 						href={link.route}
 					>
 						<!-- Icon -->
-						<div class="flex-shrink-0">
+						<div class="flex-shrink-0 text-blue-100 dark:text-highlight-blue">
 							{@html icons[link.label]}
 						</div>
 
@@ -196,16 +251,16 @@
 							<span class="ml-3 truncate">{link.label}</span>
 						{:else}
 							<div
-								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
+								class="absolute left-14 rounded bg-gray-900 dark:bg-gray-800 dark:border-highlight-blue/40 text-white dark:text-highlight-blue 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"
+	                                transition-all duration-150 whitespace-nowrap z-50 shadow-lg border dark:border-highlight-blue/40"
 							>
 								{link.label}
 							</div>
 						{/if}
 
 						{#if $page.url.pathname === link.route}
-							<div class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-blue-400"></div>
+							<div class="absolute left-0 top-0 bottom-0 w-1 bg-white dark:bg-highlight-blue"></div>
 						{/if}
 					</a>
 				{/if}
diff --git a/frontend/src/lib/components/header/Header.svelte b/frontend/src/lib/components/header/Header.svelte
index db80ebf..8fef51c 100644
--- a/frontend/src/lib/components/header/Header.svelte
+++ b/frontend/src/lib/components/header/Header.svelte
@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import Logo from './Logo.svelte';
 	import ThemeToggle from '../ThemeToggle.svelte';
+	import CompanyBanner from './CompanyBanner.svelte';
 
 	const appState = AppStateService.instance;
 
@@ -64,12 +65,12 @@
 	}
 
 	function profilePattern(username) {
-		// Create consistent hash
+		// create consistent hash
 		const hash = username.split('').reduce((acc, char) => {
 			return char.charCodeAt(0) + ((acc << 5) - acc);
 		}, 0);
 
-		// Generate base colors
+		// generate base colors
 		const hue = Math.abs(hash) % 360;
 		const colors = {
 			primary: `hsl(${hue}, 70%, 50%)`,
@@ -77,7 +78,7 @@
 			accent: `hsl(${(hue + 240) % 360}, 70%, 50%)`
 		};
 
-		// Generate pattern parameters
+		// generate pattern parameters
 		const params = {
 			rotation: hash % 360,
 			segments: 6 + (hash % 6),
@@ -113,91 +114,77 @@
 	$: initials = getInitials(username || 'U');
 </script>
 
-<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 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 dark:bg-indigo-600 dark:hover:bg-indigo-700 uppercase font-semibold mr-4 transition-colors duration-200"
-				on:click={toggleChangeCompanyModal}
-			>
-				Change company
-			</button>
+<div class="sticky top-0 z-20">
+	<CompanyBanner />
+	<div
+		class="header-container col-span-12 h-16 bg-pc-darkblue dark:bg-gray-800 border-b border-pc-darkblue/20 dark:border-highlight-blue/30 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 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 dark:from-active-blue dark:to-highlight-blue 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 gap-4">
+					<ThemeToggle />
+					<button
+						id="toggle-profile-menu"
+						class="group flex items-center"
+						on:click={() => (isProfileMenuVisible = !isProfileMenuVisible)}
+					>
+						<!-- main circle with initials -->
+						<div
+							class="w-10 h-10 rounded-full bg-cta-blue hover:bg-cta-blue/80 dark:bg-active-blue dark:hover:bg-active-blue/80 dark:border dark:border-highlight-blue/40 flex items-center justify-center text-white font-medium relative transition-colors duration-200"
+						>
+							{initials}
 
-			{#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 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'}
+							<div class="absolute -bottom-1 -right-1 w-5 h-5"></div>
+						</div>
+
+						<!-- dropdown indicator -->
+						<svg
+							class="w-4 h-4 ml-2 text-gray-300 dark:text-highlight-blue transition-transform duration-200 group-hover:text-white"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M19 9l-7 7-7-7"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<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 dark:hover:bg-white/10 transition-colors duration-200"
 				>
-					<span class="">✨</span>
-					<span>Update Available</span>
-				</a>
-			{/if}
-			<div class="relative ml-10 flex items-center gap-4">
-				<ThemeToggle />
+					<ThemeToggle />
+				</div>
+
 				<button
-					id="toggle-profile-menu"
-					class="group flex items-center"
-					on:click={() => (isProfileMenuVisible = !isProfileMenuVisible)}
+					class="flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/10 dark:hover:bg-white/10 transition-colors duration-200"
+					on:click={() => (isMobileMenuVisible = !isMobileMenuVisible)}
 				>
-					<!-- Main Circle with Initials -->
-					<div
-						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}
-
-						<div class="absolute -bottom-1 -right-1 w-5 h-5"></div>
-					</div>
-
-					<!-- Dropdown Indicator -->
-					<svg
-						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"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
+					<img class="w-6 h-6" src="/mob-menu-button.svg" alt="toggle mobile menu" />
 				</button>
 			</div>
-		</div>
-
-		<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-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 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}
+		{/if}
+	</div>
 </div>
 
 <style>
-	/* Prevent any hover effects on the header */
+	/* prevent any hover effects on the header */
 	.header-container {
 		background-color: #0b2063 !important;
 	}
diff --git a/frontend/src/lib/components/header/MobileMenu.svelte b/frontend/src/lib/components/header/MobileMenu.svelte
index 4d30e7f..a753315 100644
--- a/frontend/src/lib/components/header/MobileMenu.svelte
+++ b/frontend/src/lib/components/header/MobileMenu.svelte
@@ -6,8 +6,142 @@
 	import ThemeToggle from '../ThemeToggle.svelte';
 
 	export let visible = false;
-	export let username = '';
 	export let onClickLogout;
+	export let toggleChangeCompanyModal;
+
+	const icons = {
+		dashboard: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    </svg>`,
+
+		campaigns_overview: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 5h6c2 0 4 2 4 4v4c0 3-3 5-5 5 1.5-1.5 1.5-3 1.5-3" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.5 15l-2 2" />
+        <circle cx="14" cy="5" r="1" fill="currentColor" />
+    </svg>`,
+		campaign_templates: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </svg>`,
+
+		ip_filters: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
+</svg>`,
+
+		webhooks: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
+    </svg>`,
+
+		recipients_overview: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+</svg>`,
+
+		recipient_groups: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+    </svg>`,
+
+		domains_overview: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+    </svg>`,
+
+		pages: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </svg>`,
+
+		assets: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+    </svg>`,
+
+		emails_overview: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+    </svg>`,
+
+		attachments: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+    </svg>`,
+
+		smtp_configurations: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
+</svg>`,
+
+		api_senders: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+</svg>`,
+
+		proxy: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+</svg>`,
+
+		// Top menu icons
+		profile: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+</svg>`,
+
+		sessions: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>`,
+
+		users: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+</svg>`,
+
+		companies: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>`,
+
+		settings: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a6.759 6.759 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>`,
+
+		'user guide': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg>`,
+
+		'change company': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>`
+	};
+
+	const getIconForRoute = (route) => {
+		const iconMap = {
+			'/dashboard/': 'dashboard',
+			'/campaign/': 'campaigns_overview',
+			'/campaign-template/': 'campaign_templates',
+			'/ip-filter/': 'ip_filters',
+			'/webhook/': 'webhooks',
+			'/recipient/': 'recipients_overview',
+			'/recipient/group/': 'recipient_groups',
+			'/domain/': 'domains_overview',
+			'/page/': 'pages',
+			'/proxy/': 'proxy',
+			'/asset/': 'assets',
+			'/email/': 'emails_overview',
+			'/attachment/': 'attachments',
+			'/smtp-configuration/': 'smtp_configurations',
+			'/api-sender/': 'api_senders',
+			'/profile/': 'profile',
+			'/sessions/': 'sessions',
+			'/user/': 'users',
+			'/company/': 'companies',
+			'/settings/': 'settings'
+		};
+
+		return icons[iconMap[route] || 'dashboard'];
+	};
+
+	const getTopMenuIcon = (label) => {
+		const iconMap = {
+			Profile: 'profile',
+			Sessions: 'sessions',
+			Users: 'users',
+			Companies: 'companies',
+			Settings: 'settings',
+			'User Guide': 'user guide',
+			'Change Company': 'change company'
+		};
+
+		return icons[iconMap[label] || 'profile'];
+	};
 </script>
 
 {#if visible}
@@ -20,21 +154,21 @@
 
 	<!-- 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"
+		class="mobile-menu-content fixed top-0 left-0 w-full h-full bg-gradient-to-b from-pc-darkblue to-slate-900 dark:from-gray-900 dark:to-gray-950 z-50 overflow-y-auto shadow-xl"
 	>
 		<!-- Header -->
 		<div
-			class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue dark:bg-gray-800 px-6"
+			class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue/90 dark:bg-gray-900/90 backdrop-blur-sm px-6 border-b border-white/10 dark:border-gray-700/50"
 		>
 			<img class="w-40 h-auto" src="/logo-white.svg" alt="logo" />
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-2">
 				<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"
+					class="flex items-center justify-center w-12 h-12 rounded-lg hover:bg-white/10 dark:hover:bg-gray-600/30 transition-all 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"
+					class="flex items-center justify-center w-12 h-12 rounded-lg hover:bg-white/10 dark:hover:bg-gray-600/30 transition-all duration-200"
 					on:click={() => (visible = false)}
 				>
 					<img class="w-6 h-6" src="/mob-menu-close.svg" alt="close mobile menu" />
@@ -42,110 +176,153 @@
 			</div>
 		</div>
 
-		<!-- 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>
+		<!-- Switch Company Section -->
+		<div class="px-6 py-4 border-b border-white/20 dark:border-highlight-blue/30">
 			<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"
+				class="flex items-center w-full py-3 px-4 text-white bg-active-blue dark:bg-highlight-blue/30 rounded-lg transition-all duration-200 hover:bg-active-blue/80 dark:hover:bg-highlight-blue/40 font-medium"
+				on:click={() => {
+					visible = false;
+					toggleChangeCompanyModal();
+				}}
 			>
-				Log Out
+				<div class="flex-shrink-0 mr-3 text-white dark:text-highlight-blue">
+					{@html getTopMenuIcon('Change Company')}
+				</div>
+				<span class="flex-1 text-left">Switch Company</span>
 			</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"
+		<!-- Quick Actions Section -->
+		<div class="p-6 border-b border-white/20 dark:border-highlight-blue/30">
+			<h2
+				class="text-white/80 dark:text-highlight-blue text-lg font-semibold uppercase tracking-wider mb-4 text-left"
 			>
+				Quick Access
+			</h2>
+			<div class="space-y-2">
 				{#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="flex items-center w-full py-3 px-4 text-white text-lg font-medium rounded-lg transition-all duration-200 group {$page
+							.url.pathname === link.route
+							? 'bg-active-blue shadow-lg dark:bg-active-blue'
+							: 'hover:bg-highlight-blue/30 hover:shadow-md dark:hover:bg-highlight-blue/20'}"
 						class:hidden={shouldHideMenuItem(link.route)}
 						on:click={() => (visible = false)}
 						target={link.external ? '_blank' : '_self'}
 						href={link.route}
 					>
-						{link.label}
+						<div class="flex-shrink-0 mr-3 text-white dark:text-highlight-blue">
+							{@html getTopMenuIcon(link.label)}
+						</div>
+						<span class="flex-1 text-left">{link.label}</span>
+						{#if $page.url.pathname === link.route}
+							<div class="w-2 h-2 bg-white rounded-full"></div>
+						{/if}
 					</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"
+		<!-- Main Navigation -->
+		<div class="p-6">
+			<h2
+				class="text-white/80 dark:text-highlight-blue text-lg font-semibold uppercase tracking-wider mb-4 text-left"
 			>
+				Navigation
+			</h2>
+			<div class="space-y-1">
 				{#each menu as link}
 					{#if link.type === 'submenu'}
-						<div
-							class="text-center py-4 text-white font-semibold text-lg border-b border-white/20 dark:border-gray-600"
-						>
-							{link.label}
+						<!-- section header -->
+						<div class="pt-4 pb-2 first:pt-0">
+							<div class="py-2 px-4 border-l-2 border-cta-blue/60 dark:border-highlight-blue/60">
+								<h3
+									class="text-white dark:text-highlight-blue font-bold text-lg uppercase tracking-wide text-left"
+								>
+									{link.label}
+								</h3>
+							</div>
 						</div>
-						{#each link.items as item, i (i)}
+						<!-- submenu items -->
+						<div class="ml-4 space-y-1">
+							{#each link.items as item, i (i)}
+								<a
+									class="flex items-center w-full py-2.5 px-4 text-white/90 dark:text-gray-300 text-base font-medium rounded-lg transition-all duration-200 group hover:bg-highlight-blue/30 dark:hover:bg-highlight-blue/20 hover:text-white dark:hover:text-white"
+									href={item.route}
+									on:click={() => (visible = false)}
+								>
+									<div
+										class="flex-shrink-0 mr-3 text-white/70 dark:text-highlight-blue/80 group-hover:text-white"
+									>
+										{@html getIconForRoute(item.route)}
+									</div>
+									<span class="text-left">
+										{#if i === 0}
+											Overview
+										{:else if item.singleLabel}
+											{item.singleLabel}
+										{:else}
+											{item.label}
+										{/if}
+									</span>
+								</a>
+							{/each}
+						</div>
+					{:else}
+						<!-- standalone menu item -->
+						<div class="pt-4 pb-2 first:pt-0">
 							<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}
+								class="flex items-center w-full py-3 px-4 text-white text-lg font-bold rounded-lg transition-all duration-200 group hover:bg-highlight-blue/30 dark:hover:bg-highlight-blue/20"
+								href={link.route}
 								on:click={() => (visible = false)}
 							>
-								{#if i === 0}
-									Overview
-								{:else if item.singleLabel}
-									{item.singleLabel}
-								{:else}
-									{item.label}
-								{/if}
+								<div class="flex-shrink-0 mr-3 text-white dark:text-highlight-blue">
+									{@html getIconForRoute(link.route)}
+								</div>
+								<span class="text-left">{link.label}</span>
 							</a>
-						{/each}
-					{:else}
-						<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>
+						</div>
 					{/if}
 				{/each}
 			</div>
 		</div>
+
+		<!-- Logout Section -->
+		<div class="p-6 border-t border-white/20 dark:border-highlight-blue/30 mt-auto">
+			<button
+				on:click={onClickLogout}
+				class="w-full border-2 border-white/30 dark:border-highlight-blue/50 hover:border-highlight-blue/60 dark:hover:border-highlight-blue hover:bg-highlight-blue/20 dark:hover:bg-highlight-blue/20 uppercase font-medium py-2.5 px-6 rounded-lg transition-all duration-200 text-sm text-white/90 dark:text-highlight-blue hover:text-white dark:hover:text-white"
+			>
+				Log Out
+			</button>
+		</div>
+
+		<!-- Footer spacer -->
+		<div class="h-6"></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;
+	/* ensure consistent background colors */
+	.mobile-menu-content {
+		background: linear-gradient(to bottom, #0b2063, #1e293b);
 	}
 
-	/* 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;
+		background: linear-gradient(to bottom, #111827, #0f172a);
 	}
-	:global(.dark) .mobile-menu-content:hover {
-		background-color: #111827 !important;
+
+	/* smooth scrolling */
+	.mobile-menu-content {
+		scroll-behavior: smooth;
+	}
+
+	/* hide scrollbar but keep functionality */
+	.mobile-menu-content::-webkit-scrollbar {
+		display: none;
+	}
+	.mobile-menu-content {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
 	}
 </style>
diff --git a/frontend/src/lib/components/header/ProfileMenu.svelte b/frontend/src/lib/components/header/ProfileMenu.svelte
index 2598fee..f570921 100644
--- a/frontend/src/lib/components/header/ProfileMenu.svelte
+++ b/frontend/src/lib/components/header/ProfileMenu.svelte
@@ -5,6 +5,52 @@
 	import { shouldHideMenuItem } from '$lib/utils/common';
 	export let logout;
 	export let visible = false;
+	export let toggleChangeCompanyModal;
+
+	const icons = {
+		profile: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+</svg>`,
+
+		sessions: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>`,
+
+		users: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+</svg>`,
+
+		companies: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>`,
+
+		settings: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a6.759 6.759 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>`,
+
+		'user guide': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg>`,
+
+		'change company': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>`
+	};
+
+	const getTopMenuIcon = (label) => {
+		const iconMap = {
+			Profile: 'profile',
+			Sessions: 'sessions',
+			Users: 'users',
+			Companies: 'companies',
+			Settings: 'settings',
+			'User Guide': 'user guide',
+			'Change Company': 'change company'
+		};
+
+		return icons[iconMap[label] || 'profile'];
+	};
 
 	const handleClickOutsideNavigation = (event) => {
 		const profileMenuElement = document.getElementById('profile-menu');
@@ -42,32 +88,48 @@
 		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 dark:from-gray-800 dark:to-gray-700 rounded-md transition-colors duration-200"
+			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 dark:border dark:border-highlight-blue/30"
 			in:fadeIn={{ duration: 150 }}
 		>
+			<!-- Change Company at top with distinct styling -->
+			<button
+				class="flex items-center pl-5 py-3 text-white bg-active-blue dark:bg-highlight-blue/30 first:rounded-t-md transition-colors duration-200 hover:bg-active-blue/80 dark:hover:bg-highlight-blue/40 border-b border-active-blue/50 dark:border-highlight-blue/40"
+				on:click={() => {
+					visible = false;
+					toggleChangeCompanyModal();
+				}}
+			>
+				<div class="flex-shrink-0 mr-3 text-white dark:text-highlight-blue">
+					{@html getTopMenuIcon('Change Company')}
+				</div>
+				<span class="font-medium">Switch Company</span>
+			</button>
+
 			{#each topMenu as item}
 				<a
-					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="flex items-center pl-5 py-2 text-white last:rounded-md first:rounded-t-md transition-colors duration-200 {$page
+						.url.pathname === item.route
+						? 'bg-active-blue shadow-md dark:bg-active-blue'
+						: 'hover:shadow-md hover:bg-highlight-blue/80 dark:hover:bg-highlight-blue/20'}"
 					class:hidden={shouldHideMenuItem(item.route)}
 					target={item.external ? '_blank' : '_self'}
 					draggable="false"
 					on:click={() => {
 						visible = false;
 					}}
-					href={item.route}>{item.label}</a
+					href={item.route}
 				>
+					<div class="flex-shrink-0 mr-3 text-white dark:text-highlight-blue">
+						{@html getTopMenuIcon(item.label)}
+					</div>
+					<span>{item.label}</span>
+				</a>
 			{/each}
 			<button
 				on:click={logout}
-				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"
+				class="bg-white dark:bg-gray-800 dark:border dark:border-highlight-blue/40 uppercase font-bold hover:bg-cta-blue/10 dark:hover:bg-highlight-blue/20 py-2 mx-4 my-4 rounded-md transition-colors duration-200"
 			>
-				<p class="text-cta-blue dark:text-gray-100 py px-8 transition-colors duration-200">
+				<p class="text-cta-blue dark:text-highlight-blue py px-8 transition-colors duration-200">
 					Log Out
 				</p>
 			</button>
diff --git a/frontend/src/lib/components/modal/ChangeCompanyModal.svelte b/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
index 7f466f8..8a915c5 100644
--- a/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
+++ b/frontend/src/lib/components/modal/ChangeCompanyModal.svelte
@@ -117,21 +117,21 @@
 		<div class="flex-grow p-6">
 			{#if isLoadingCompanies}
 				<div class="flex items-center justify-center py-8">
-					<div class="text-gray-500 dark:text-gray-400 transition-colors duration-200">
+					<div class="text-gray-500 dark:text-gray-500 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 dark:text-gray-400 mb-4 transition-colors duration-200">
+					<div class="text-gray-500 dark:text-gray-500 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">
+					<div class="text-sm text-gray-400 dark:text-gray-600 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 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"
+						class="bg-cta-blue dark:bg-highlight-blue/80 hover:bg-blue-700 dark:hover:bg-highlight-blue hover:text-white text-sm uppercase font-bold px-4 py-2 text-white rounded-md transition-colors duration-200"
 						on:click={() => {
 							visible = false;
 						}}
@@ -148,12 +148,12 @@
 
 		<!-- Button Section -->
 		<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"
+			class="border-t border-gray-200 dark:border-gray-700/60 p-6 mt-36 flex flex-wrap gap-4 justify-end transition-colors duration-200"
 		>
 			{#if inContext}
 				<button
 					type="button"
-					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"
+					class="bg-slate-400 dark:bg-gray-700/80 hover:bg-slate-300 dark:hover:bg-gray-600/80 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}
 				>
@@ -163,7 +163,7 @@
 
 			<button
 				type="submit"
-				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"
+				class="bg-cta-blue dark:bg-highlight-blue/80 hover:bg-blue-700 dark:hover:bg-highlight-blue hover:text-white 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 9bbee39..b8372f4 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 dark:text-gray-300">
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
 					Are you sure you want to delete
 					{#if name?.length > 30}
 						<br />
 					{/if}
-					<span class="font-medium text-gray-900 dark:text-gray-100">"{name}"</span>?
+					<span class="font-medium text-gray-900 dark:text-gray-300">"{name}"</span>?
 				</p>
 			</div>
 
 			<!-- Impact Section -->
 			{#if list.length}
-				<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">
+				<div class="bg-gray-50 dark:bg-gray-800/40 rounded-lg p-4 transition-colors duration-200">
+					<p class="font-medium text-gray-900 dark:text-gray-300 mb-3">Side effects:</p>
+					<ul class="space-y-2 ml-4 list-disc text-gray-600 dark:text-gray-400">
 						{#each list as line}
 							<li>{line}</li>
 						{/each}
@@ -85,7 +85,7 @@
 			{/if}
 
 			{#if permanent}
-				<p class="text-red-700 dark:text-red-400 font-medium">This action cannot be undone.</p>
+				<p class="text-red-700 dark:text-red-300 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 ccef270..f61c78b 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 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"
+	class="hover:bg-gray-100 dark:hover:bg-gray-800/40 px-2 py-1 rounded-md transition-colors w-full text-left text-ellipsis overflow-hidden text-gray-900 dark:text-gray-200"
 	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 c69eeeb..38e89b3 100644
--- a/frontend/src/lib/components/table/EmptyTableResult.svelte
+++ b/frontend/src/lib/components/table/EmptyTableResult.svelte
@@ -5,14 +5,14 @@
 	export let colspan = 100;
 </script>
 
-<tr class="text-center bg-pleasant-gray dark:bg-gray-700 transition-colors duration-200">
+<tr class="text-center bg-pleasant-gray dark:bg-gray-800/40 transition-colors duration-200">
 	<td class="p-24" {colspan}>
 		{#if page === 1}
-			<p class="text-lg text-gray-600 dark:text-gray-300 transition-colors duration-200">
+			<p class="text-lg text-gray-600 dark:text-gray-200 transition-colors duration-200">
 				No {plural} found
 			</p>
 		{:else}
-			<p class="text-lg text-gray-600 dark:text-gray-300 transition-colors duration-200">
+			<p class="text-lg text-gray-600 dark:text-gray-200 transition-colors duration-200">
 				No more results found
 			</p>
 		{/if}
diff --git a/frontend/src/lib/components/table/EventName.svelte b/frontend/src/lib/components/table/EventName.svelte
index 6cded42..4c0c7c7 100644
--- a/frontend/src/lib/components/table/EventName.svelte
+++ b/frontend/src/lib/components/table/EventName.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-	class="flex items-center text-ellipsis text-gray-900 dark:text-gray-100 transition-colors duration-200"
+	class="flex items-center text-ellipsis text-gray-900 dark:text-gray-200 transition-colors duration-200"
 >
 	<div class="w-4 h-4 {event.color} mr-2 rounded-sm"></div>
 	{event.name}
diff --git a/frontend/src/lib/components/table/Table.svelte b/frontend/src/lib/components/table/Table.svelte
index f25f6b8..5eb54ac 100644
--- a/frontend/src/lib/components/table/Table.svelte
+++ b/frontend/src/lib/components/table/Table.svelte
@@ -56,11 +56,11 @@
 		<div
 			bind:this={tableWrapper}
 			class="
-			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
+			border-2 border-gray-200 dark:border-gray-700/60 rounded-md px-4 py-4 overflow-x-auto bg-white dark:bg-gray-900/80 transition-colors duration-200
 			{scrollBarClassesHorizontal}"
 		>
 			<table
-				class="w-full table-fixed bg-white dark:bg-gray-800 transition-colors duration-200"
+				class="w-full table-fixed bg-white dark:bg-gray-900/80 transition-colors duration-200"
 				class:animate-pulse={isGhost}
 			>
 				<TableHeader {isGhost} {columns} {sortable} {hasActions} {pagination} />
diff --git a/frontend/src/lib/components/table/TableCell.svelte b/frontend/src/lib/components/table/TableCell.svelte
index 9c6ca07..62d91a6 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 dark:text-gray-300 text-ellipsis whitespace-nowrap overflow-hidden pr-4 transition-colors duration-200`}
+	class={`pl-4 font-regular text-slate-600 dark:text-gray-200 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 0e0261a..f51dea5 100644
--- a/frontend/src/lib/components/table/TableCellAction.svelte
+++ b/frontend/src/lib/components/table/TableCellAction.svelte
@@ -1,5 +1,5 @@
 <td class="w-48 text-center border: hidden;">
-	<p class="font-regular text-slate-600 dark:text-gray-300 transition-colors duration-200">
+	<p class="font-regular text-slate-600 dark:text-gray-200 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 fd51baf..f213834 100644
--- a/frontend/src/lib/components/table/TableCellCheck.svelte
+++ b/frontend/src/lib/components/table/TableCellCheck.svelte
@@ -4,7 +4,7 @@
 
 <td class="pl-4 w-40 text-center border: hidden;">
 	<p
-		class="font-regular text-slate-600 dark:text-gray-300 flex justify-center transition-colors duration-200"
+		class="font-regular text-slate-600 dark:text-gray-200 flex justify-center transition-colors duration-200"
 	>
 		{value ? 'Yes' : 'No'}
 	</p>
diff --git a/frontend/src/lib/components/table/TableCellEmpty.svelte b/frontend/src/lib/components/table/TableCellEmpty.svelte
index b19712d..6f010d3 100644
--- a/frontend/src/lib/components/table/TableCellEmpty.svelte
+++ b/frontend/src/lib/components/table/TableCellEmpty.svelte
@@ -1 +1,2 @@
-<td class="pl-4 w-4 border: hidden; bg-white dark:bg-gray-800 transition-colors duration-200"> </td>
+<td class="pl-4 w-4 border: hidden; bg-white dark:bg-gray-900/40 transition-colors duration-200">
+</td>
diff --git a/frontend/src/lib/components/table/TableCellLink.svelte b/frontend/src/lib/components/table/TableCellLink.svelte
index 4ab073c..2538657 100644
--- a/frontend/src/lib/components/table/TableCellLink.svelte
+++ b/frontend/src/lib/components/table/TableCellLink.svelte
@@ -4,10 +4,10 @@
 </script>
 
 <td
-	class="pl-4 font-regular text-slate-600 dark:text-gray-300 text-ellipsis whitespace-nowrap overflow-hidden pr-4 transition-colors duration-200"
+	class="pl-4 font-regular text-slate-600 dark:text-gray-200 text-ellipsis whitespace-nowrap overflow-hidden pr-4 transition-colors duration-200"
 	{title}
 >
-	<a href={href} class="block w-full py-1">
+	<a {href} class="block w-full py-1">
 		<slot />
 	</a>
 </td>
diff --git a/frontend/src/lib/components/table/TableDeleteButton2.svelte b/frontend/src/lib/components/table/TableDeleteButton2.svelte
index ee2fb6b..2beb9e1 100644
--- a/frontend/src/lib/components/table/TableDeleteButton2.svelte
+++ b/frontend/src/lib/components/table/TableDeleteButton2.svelte
@@ -9,7 +9,7 @@
 
 {#if disabled}
 	<button
-		class="w-full px py text-slate-300 dark:text-gray-500 cursor-not-allowed text-left transition-colors duration-200"
+		class="w-full px py text-slate-300 dark:text-gray-600 cursor-not-allowed text-left transition-colors duration-200"
 		{disabled}
 		{title}
 	>
@@ -17,7 +17,7 @@
 	</button>
 {:else}
 	<button
-		class="w-full px py-1 text-slate-600 dark:text-gray-300 hover:bg-red-400 dark:hover:bg-red-500 hover:text-white cursor-pointer text-left transition-colors duration-200"
+		class="w-full px py-1 text-slate-600 dark:text-gray-200 hover:bg-red-400 dark:hover:bg-red-600/70 hover:text-white cursor-pointer text-left 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 edd2c8b..68d44cc 100644
--- a/frontend/src/lib/components/table/TableDropDownButton.svelte
+++ b/frontend/src/lib/components/table/TableDropDownButton.svelte
@@ -17,7 +17,7 @@
 
 {#if disabled}
 	<button
-		class="w-full px py-1 text-slate-300 dark:text-gray-500 cursor-not-allowed text-left transition-colors duration-200"
+		class="w-full px py-1 text-slate-300 dark:text-gray-600 cursor-not-allowed text-left transition-colors duration-200"
 		{disabled}
 		{title}
 	>
@@ -25,7 +25,7 @@
 	</button>
 {:else}
 	<button
-		class="w-full px py-1 text-slate-600 dark:text-gray-300 hover:bg-highlight-blue dark:hover:bg-blue-600 hover:text-white cursor-pointer text-left transition-colors duration-200"
+		class="w-full px py-1 text-slate-600 dark:text-gray-200 hover:bg-highlight-blue dark:hover:bg-highlight-blue/50 hover:text-white cursor-pointer text-left 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 360e007..4da40d0 100644
--- a/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
+++ b/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
@@ -160,7 +160,7 @@
 
 	<div
 		bind:this={menuRef}
-		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="absolute bg-white dark:bg-gray-900/90 drop-shadow-md dark:shadow-gray-900/50 border dark:border-gray-700/60 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 8df2147..c824a44 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 bg-white dark:bg-gray-800 transition-colors duration-200">
+<thead class="table-header-group bg-white dark:bg-gray-900/60 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 c9abce5..f397e77 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 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="pl-4 bg-grayblue-light dark:bg-gray-800/60 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'}
@@ -43,9 +43,11 @@
 	class:w-full={fillRest}
 >
 	<button
-		class="flex group cursor-pointer"
+		class="flex group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 rounded-md p-1 transition-colors duration-200"
 		class:pointer-events-none={!sortable}
 		class:table-cell={alignText === 'center'}
+		class:hover:bg-transparent={!sortable}
+		class:dark:hover:bg-transparent={!sortable}
 		on:click|preventDefault={setSortAndSortBy}
 	>
 		<div class="w-full">
@@ -60,7 +62,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 dark:bg-blue-600 transition-colors duration-200"
+						class="flex justify-center items-center w-6 h-6 ml-2 rounded-md bg-cta-blue dark:bg-highlight-blue/80 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 ec36e31..331fb0e 100644
--- a/frontend/src/lib/components/table/TableHeadCellAction.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellAction.svelte
@@ -1,5 +1,5 @@
 <th
-	class="bg-cta-light-blue dark:bg-gray-700 w-20 py-4 border-hidden rounded-lg transition-colors duration-200"
+	class="bg-cta-light-blue dark:bg-gray-800/60 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 />
diff --git a/frontend/src/lib/components/table/TableHeadCellCheck.svelte b/frontend/src/lib/components/table/TableHeadCellCheck.svelte
index 3f7528a..d03401a 100644
--- a/frontend/src/lib/components/table/TableHeadCellCheck.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellCheck.svelte
@@ -1,5 +1,5 @@
 <th
-	class="pl-4 bg-grayblue-light dark:bg-gray-700 w-48 py-4 border-hidden transition-colors duration-200"
+	class="pl-4 bg-grayblue-light dark:bg-gray-800/60 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"
diff --git a/frontend/src/lib/components/table/TableHeadCellEmpty.svelte b/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
index 5a223d8..c9fdcf2 100644
--- a/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellEmpty.svelte
@@ -1,2 +1,2 @@
-<th class="pl-4 bg-white dark:bg-gray-800 w-4 py-4 border-hidden transition-colors duration-200">
+<th class="pl-4 bg-white dark:bg-gray-900 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 bcba896..3e2dffe 100644
--- a/frontend/src/lib/components/table/TableHeadCellSingle.svelte
+++ b/frontend/src/lib/components/table/TableHeadCellSingle.svelte
@@ -1,5 +1,5 @@
 <th
-	class="pl-4 bg-grayblue-light dark:bg-gray-700 w-48 py-4 border-hidden rounded-md transition-colors duration-200"
+	class="pl-4 bg-grayblue-light dark:bg-gray-800/60 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 />
diff --git a/frontend/src/lib/components/table/TableRow.svelte b/frontend/src/lib/components/table/TableRow.svelte
index 2be3469..75d362f 100644
--- a/frontend/src/lib/components/table/TableRow.svelte
+++ b/frontend/src/lib/components/table/TableRow.svelte
@@ -1,5 +1,5 @@
 <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"
+	class="table-row odd:bg-white odd:dark:bg-gray-900/40 even:bg-pleasant-gray even:dark:bg-gray-800/30 h-10 hover:bg-cta-light-blue hover:dark:bg-highlight-blue/20 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 9e400ea..8b4cc37 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 dark:bg-gray-800 h-4 transition-colors duration-200">
+<tr class="table-row bg-white dark:bg-gray-900/40 h-4 transition-colors duration-200">
 	<slot />
 </tr>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3a5fc3d..9f631f5 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 CompanyBanner from '$lib/components/header/CompanyBanner.svelte';
 	import { setupTheme, setupOSThemeListener } from '$lib/theme.js';
 	// Removed feature flags import - no longer needed
 
@@ -222,10 +223,10 @@
 			{#if installState === AppStateService.INSTALL.INSTALLED}
 				<MobileMenu
 					bind:visible={isMobileMenuVisible}
-					username={user?.name}
 					onClickLogout={logout}
+					{toggleChangeCompanyModal}
 				/>
-				<ProfileMenu {logout} bind:visible={isProfileMenuVisible} />
+				<ProfileMenu {logout} bind:visible={isProfileMenuVisible} {toggleChangeCompanyModal} />
 			{/if}
 			<div class="col-start-1 col-end-13 row-start-1">
 				<slot />
diff --git a/frontend/src/routes/campaign-template/+page.svelte b/frontend/src/routes/campaign-template/+page.svelte
index fcfb9fb..fdb1825 100644
--- a/frontend/src/routes/campaign-template/+page.svelte
+++ b/frontend/src/routes/campaign-template/+page.svelte
@@ -945,21 +945,25 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 								<!-- Before Landing Page -->
 								<div class="flex items-center">
 									<div
-										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3
-                                    ${formValues.beforeLandingPage ? 'bg-blue-50 border-blue-300' : 'bg-gray-100 border-gray-300'}`}
+										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3 transition-colors duration-200
+                                    ${formValues.beforeLandingPage ? 'bg-blue-50 dark:bg-blue-900/40 border-blue-300 dark:border-blue-500' : 'bg-gray-100 dark:bg-gray-800/60 border-gray-300 dark:border-gray-600'}`}
 									>
 										<span
-											class={`text-xl ${formValues.beforeLandingPage ? 'text-blue-500' : 'text-gray-400'}`}
+											class={`text-xl transition-colors duration-200 ${formValues.beforeLandingPage ? 'text-blue-500 dark:text-blue-300' : 'text-gray-400 dark:text-gray-500'}`}
 											>1</span
 										>
 									</div>
 									<div class="flex-1">
-										<p class="text-xs font-medium">
+										<p
+											class="text-xs font-medium text-gray-900 dark:text-gray-300 transition-colors duration-200"
+										>
 											Before Landing {formValues.beforeLandingPageType === 'proxy'
 												? 'Proxy'
 												: 'Page'}
 										</p>
-										<p class="text-xs text-gray-500 truncate max-w-[180px]">
+										<p
+											class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[180px] transition-colors duration-200"
+										>
 											{formValues.beforeLandingPage || 'Not selected'}
 										</p>
 									</div>
@@ -967,21 +971,30 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 								<!-- Down Arrow -->
 								<div class="flex">
-									<div class="ml-5 w-0.5 h-4 bg-gray-300"></div>
+									<div
+										class="ml-5 w-0.5 h-4 bg-gray-300 dark:bg-gray-600 transition-colors duration-200"
+									></div>
 								</div>
 
 								<!-- Main Landing Page -->
 								<div class="flex items-center">
 									<div
-										class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center border border-blue-400 mr-3"
+										class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center border border-blue-400 dark:border-blue-500 mr-3 transition-colors duration-200"
 									>
-										<span class="text-xl text-blue-600">2</span>
+										<span
+											class="text-xl text-blue-600 dark:text-blue-300 transition-colors duration-200"
+											>2</span
+										>
 									</div>
 									<div class="flex-1">
-										<p class="text-xs font-medium">
+										<p
+											class="text-xs font-medium text-gray-900 dark:text-gray-300 transition-colors duration-200"
+										>
 											Landing {formValues.landingPageType === 'proxy' ? 'Proxy' : 'Page'}
 										</p>
-										<p class="text-xs text-gray-500 truncate max-w-[180px]">
+										<p
+											class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[180px] transition-colors duration-200"
+										>
 											{formValues.landingPage || 'Required'}
 										</p>
 									</div>
@@ -989,25 +1002,31 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 								<!-- Down Arrow -->
 								<div class="flex">
-									<div class="ml-5 w-0.5 h-4 bg-gray-300"></div>
+									<div
+										class="ml-5 w-0.5 h-4 bg-gray-300 dark:bg-gray-600 transition-colors duration-200"
+									></div>
 								</div>
 
 								<!-- After Landing Page -->
 								<div class="flex items-center">
 									<div
-										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3
-                                    ${formValues.afterLandingPage ? 'bg-blue-50 border-blue-300' : 'bg-gray-100 border-gray-300'}`}
+										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3 transition-colors duration-200
+                                    ${formValues.afterLandingPage ? 'bg-blue-50 dark:bg-blue-900/40 border-blue-300 dark:border-blue-500' : 'bg-gray-100 dark:bg-gray-800/60 border-gray-300 dark:border-gray-600'}`}
 									>
 										<span
-											class={`text-xl ${formValues.afterLandingPage ? 'text-blue-500' : 'text-gray-400'}`}
+											class={`text-xl transition-colors duration-200 ${formValues.afterLandingPage ? 'text-blue-500 dark:text-blue-300' : 'text-gray-400 dark:text-gray-500'}`}
 											>3</span
 										>
 									</div>
 									<div class="flex-1">
-										<p class="text-xs font-medium">
+										<p
+											class="text-xs font-medium text-gray-900 dark:text-gray-300 transition-colors duration-200"
+										>
 											After Landing {formValues.afterLandingPageType === 'proxy' ? 'Proxy' : 'Page'}
 										</p>
-										<p class="text-xs text-gray-500 truncate max-w-[180px]">
+										<p
+											class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[180px] transition-colors duration-200"
+										>
 											{formValues.afterLandingPage || 'Not selected'}
 										</p>
 									</div>
@@ -1015,23 +1034,31 @@ Simulation URLs to allow:\n${allowListingData.simulationUrl}\n
 
 								<!-- Down Arrow -->
 								<div class="flex">
-									<div class="ml-5 w-0.5 h-4 bg-gray-300"></div>
+									<div
+										class="ml-5 w-0.5 h-4 bg-gray-300 dark:bg-gray-600 transition-colors duration-200"
+									></div>
 								</div>
 
 								<!-- Final Redirect -->
 								<div class="flex items-center">
 									<div
-										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3
-                                    ${formValues.afterLandingPageRedirectURL ? 'bg-blue-50 border-blue-300' : 'bg-gray-100 border-gray-300'}`}
+										class={`w-10 h-10 rounded-lg flex items-center justify-center border mr-3 transition-colors duration-200
+                                    ${formValues.afterLandingPageRedirectURL ? 'bg-blue-50 dark:bg-blue-900/40 border-blue-300 dark:border-blue-500' : 'bg-gray-100 dark:bg-gray-800/60 border-gray-300 dark:border-gray-600'}`}
 									>
 										<span
-											class={`text-xl ${formValues.afterLandingPageRedirectURL ? 'text-blue-500' : 'text-gray-400'}`}
+											class={`text-xl transition-colors duration-200 ${formValues.afterLandingPageRedirectURL ? 'text-blue-500 dark:text-blue-300' : 'text-gray-400 dark:text-gray-500'}`}
 											>4</span
 										>
 									</div>
 									<div class="flex-1">
-										<p class="text-xs font-medium">POST Redirect URL</p>
-										<p class="text-xs text-gray-500 truncate max-w-[180px]">
+										<p
+											class="text-xs font-medium text-gray-900 dark:text-gray-300 transition-colors duration-200"
+										>
+											POST Redirect URL
+										</p>
+										<p
+											class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[180px] transition-colors duration-200"
+										>
 											{formValues.afterLandingPageRedirectURL || 'Not set'}
 										</p>
 									</div>
diff --git a/frontend/src/routes/campaign/[id]/+page.svelte b/frontend/src/routes/campaign/[id]/+page.svelte
index b3b1737..8c7e94a 100644
--- a/frontend/src/routes/campaign/[id]/+page.svelte
+++ b/frontend/src/routes/campaign/[id]/+page.svelte
@@ -6,12 +6,11 @@
 	import SubHeadline from '$lib/components/SubHeadline.svelte';
 	import { addToast } from '$lib/store/toast';
 	import { BiMap } from '$lib/utils/maps';
-	import { defaultOptions, fetchAllRows } from '$lib/utils/api-utils';
+	import { fetchAllRows } from '$lib/utils/api-utils';
 	import { AppStateService } from '$lib/service/appState';
 	import ProxySvgIcon from '$lib/components/ProxySvgIcon.svelte';
 	import TableRow from '$lib/components/table/TableRow.svelte';
 	import TableCell from '$lib/components/table/TableCell.svelte';
-	import TableCellLink from '$lib/components/table/TableCellLink.svelte';
 	import { formatWeekDays, formatTimeConstraint, timeFormat } from '$lib/utils/date.js';
 	import {
 		defaultPerPage,
@@ -37,9 +36,7 @@
 	import Alert from '$lib/components/Alert.svelte';
 	import EventTimeline from '$lib/components/EventTimeline.svelte';
 	import CellCopy from '$lib/components/table/CopyCell.svelte';
-	import Button from '$lib/components/Button.svelte';
 	import FormGrid from '$lib/components/FormGrid.svelte';
-	import FormFooter from '$lib/components/FormFooter.svelte';
 	import FormColumns from '$lib/components/FormColumns.svelte';
 	import FormColumn from '$lib/components/FormColumn.svelte';
 	import EventName from '$lib/components/table/EventName.svelte';
@@ -1039,12 +1036,12 @@
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
+					stroke-width="1.5"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						stroke-width="2"
-						d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
 					/>
 				</svg>
 			</StatsCard>
@@ -1073,18 +1070,17 @@
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
+					stroke-width="1.5"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+						d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
 					/>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						stroke-width="2"
-						d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+						d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
 					/>
 				</svg>
 			</StatsCard>
@@ -1164,12 +1160,12 @@
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
+					stroke-width="1.5"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						stroke-width="2"
-						d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					/>
 				</svg>
 			</StatsCard>