diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte
index 19e3295..6c61b61 100644
--- a/frontend/src/lib/components/Alert.svelte
+++ b/frontend/src/lib/components/Alert.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { fade } from 'svelte/transition';
 	import { onMount, tick } from 'svelte';
 	import FormButton from './FormButton.svelte';
 	import Input from './Input.svelte';
@@ -26,13 +27,13 @@
 	$: {
 		if (visible && !alertInitialized) {
 			window.addEventListener('keydown', keyHandler);
-			// Prevent body scrolling when alert is open
+			// prevent body scrolling when alert is open
 			document.body.style.overflow = 'hidden';
 			handleAlertOpen();
 			alertInitialized = true;
 		} else if (!visible && alertInitialized) {
 			window.removeEventListener('keydown', keyHandler);
-			// Restore body scrolling when alert is closed
+			// restore body scrolling when alert is closed
 			document.body.style.overflow = 'auto';
 			handleAlertClose();
 			alertInitialized = false;
@@ -243,9 +244,12 @@
 </script>
 
 {#if visible}
-	<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"
+		transition:fade={{ duration: 150 }}
+		class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92] z-[19]"
+	/>
+	<div
+		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="alert-title"
@@ -253,7 +257,7 @@
 	>
 		<section
 			bind:this={alertElement}
-			class="shadow-xl dark:shadow-gray-900/70 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
+			class="ring-1 ring-white/10 w-[32rem] bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-colors duration-200"
 		>
 			<!-- Header -->
 			<div
diff --git a/frontend/src/lib/components/ConfirmPrompt.svelte b/frontend/src/lib/components/ConfirmPrompt.svelte
index 40af440..e0e11ba 100644
--- a/frontend/src/lib/components/ConfirmPrompt.svelte
+++ b/frontend/src/lib/components/ConfirmPrompt.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { fade } from 'svelte/transition';
 	import { onMount, tick } from 'svelte';
 	import { beforeNavigate } from '$app/navigation';
 
@@ -17,13 +18,13 @@
 	$: {
 		if (visible && !confirmInitialized) {
 			window.addEventListener('keydown', keyHandler);
-			// Prevent body scrolling when confirm prompt is open
+			// prevent body scrolling when confirm prompt is open
 			document.body.style.overflow = 'hidden';
 			handleConfirmOpen();
 			confirmInitialized = true;
 		} else if (!visible && confirmInitialized) {
 			window.removeEventListener('keydown', keyHandler);
-			// Restore body scrolling when confirm prompt is closed
+			// restore body scrolling when confirm prompt is closed
 			document.body.style.overflow = 'auto';
 			handleConfirmClose();
 			confirmInitialized = false;
@@ -161,10 +162,12 @@
 
 {#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"
+		transition:fade={{ duration: 150 }}
+		class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92]"
+		style="z-index: 19;"
 	/>
 	<div
-		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-20"
+		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="confirm-title"
@@ -172,7 +175,7 @@
 	>
 		<section
 			bind:this={confirmElement}
-			class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 shadow-xl dark:shadow-gray-900/70 rounded-md transition-colors duration-200"
+			class="flex flex-col items-center w-1/3 bg-slate-100 dark:bg-gray-800 ring-1 ring-white/10 rounded-md transition-colors duration-200"
 		>
 			<div
 				class="bg-cta-orange2 dark:bg-orange-600 text-white rounded-tl-md rounded-tr-md w-full transition-colors duration-200"
diff --git a/frontend/src/lib/components/Loader.svelte b/frontend/src/lib/components/Loader.svelte
index cbc4de0..28ffaa8 100644
--- a/frontend/src/lib/components/Loader.svelte
+++ b/frontend/src/lib/components/Loader.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { isLoading } from '$lib/store/loading.js';
-	import { blur } from 'svelte/transition';
+	import { fade } from 'svelte/transition';
 
 	let isAnimating = false;
 	const duration = 250; //ms
@@ -15,10 +15,9 @@
 </script>
 
 {#if $isLoading && isAnimating}
-	<div class="fixed top-0 left-0 w-full h-full opacity-[0.5]" transition:blur={{ duration }} />
 	<div
-		transition:blur={{ duration }}
-		class="fixed top-0 left-0 w-full h-full flex justify-center items-center backdrop-blur-sm z-50"
+		transition:fade={{ duration }}
+		class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-50"
 	>
 		<div
 			class="w-20 h-20 border-t-8 border-t-cta-blue border-r-8 border-r-cta-blue border-b-cta-blue border-b-8 border-l-transparent border-l-8 rounded-full animate-spin"
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index 004195f..49a4782 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { fade } from 'svelte/transition';
 	import { onMount, tick } from 'svelte';
 	import { beforeNavigate } from '$app/navigation';
 	import { scrollBarClassesVertical } from '$lib/utils/scrollbar';
@@ -315,9 +316,13 @@
 
 {#if visible}
 	<div bind:this={bindTo}>
-		<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"
+			transition:fade={{ duration: 150 }}
+			class="fixed top-0 left-0 w-full h-full bg-overlay/[0.92]"
+			style="z-index: 19;"
+		/>
+		<div
+			class="fixed top-0 left-0 w-full h-full flex justify-center items-center z-20"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="modal-title"
@@ -325,7 +330,7 @@
 		>
 			<section
 				bind:this={modalElement}
-				class="shadow-xl dark:shadow-gray-900/70 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
+				class="ring-1 ring-white/10 bg-white dark:bg-gray-800 opacity-100 rounded-md flex flex-col transition-all duration-200
 					{fullscreen
 					? 'fixed inset-0 w-full h-full max-w-none max-h-none rounded-none'
 					: 'w-auto ml-20 mr-8 max-h-[90vh]'}"
diff --git a/frontend/src/lib/components/ThemeToggle.svelte b/frontend/src/lib/components/ThemeToggle.svelte
index 06c2a5a..8433255 100644
--- a/frontend/src/lib/components/ThemeToggle.svelte
+++ b/frontend/src/lib/components/ThemeToggle.svelte
@@ -11,7 +11,7 @@
 
 <button
 	on:click={handleToggle}
-	class="relative inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 dark:bg-gray-800/80 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50 hover:bg-white/20 dark:hover:bg-gray-700/80 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-lg"
+	class="relative inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/10 dark:bg-gray-800/80 border border-gray-200/50 dark:border-gray-600/50 hover:bg-white/20 dark:hover:bg-gray-700/80 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/50 shadow-lg"
 	title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 	aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 >
diff --git a/frontend/src/lib/components/header/MobileMenu.svelte b/frontend/src/lib/components/header/MobileMenu.svelte
index 3d2bbf5..b79e0b8 100644
--- a/frontend/src/lib/components/header/MobileMenu.svelte
+++ b/frontend/src/lib/components/header/MobileMenu.svelte
@@ -169,7 +169,7 @@
 	>
 		<!-- Header -->
 		<div
-			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"
+			class="mobile-menu-header flex justify-between h-20 items-center bg-pc-darkblue/90 dark:bg-gray-900/90 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-2">
diff --git a/frontend/src/lib/components/modal/CommandPalette.svelte b/frontend/src/lib/components/modal/CommandPalette.svelte
index be948b4..dedb8e2 100644
--- a/frontend/src/lib/components/modal/CommandPalette.svelte
+++ b/frontend/src/lib/components/modal/CommandPalette.svelte
@@ -1,4 +1,6 @@
 <script>
+	import { fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 	import { onMount, onDestroy } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { menu, topMenu } from '$lib/consts/navigation';
@@ -234,10 +236,15 @@
 </script>
 
 {#if visible}
+	<div
+		transition:fade={{ duration: 150 }}
+		class="fixed inset-0 bg-overlay/[0.92]"
+		style="z-index: 49;"
+	/>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div
-		class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 flex items-start justify-center pt-20"
+		class="fixed inset-0 z-50 flex items-start justify-center pt-20"
 		on:click|self={close}
 		on:keydown={handleKeydown}
 		role="dialog"
diff --git a/frontend/src/routes/campaign/+page.svelte b/frontend/src/routes/campaign/+page.svelte
index 46e8365..6a68452 100644
--- a/frontend/src/routes/campaign/+page.svelte
+++ b/frontend/src/routes/campaign/+page.svelte
@@ -612,9 +612,15 @@
 			return api.recipient.getAllGroups(options, contextCompanyID);
 		});
 		recipientGroups = recipientGroups
-			.filter((group) => group.recipientCount)
+			.filter((group) => group.isDynamic || group.recipientCount)
 			.map((group) => {
-				group.name = group.name + ` (${group.recipientCount})`;
+				// dynamic groups show their count or "dynamic" if count is unavailable
+				const countLabel = group.isDynamic
+					? group.recipientCount != null
+						? group.recipientCount
+						: 'dynamic'
+					: group.recipientCount;
+				group.name = group.name + ` (${countLabel})`;
 				return group;
 			});
 		recipientGroupsByID = recipientGroups.reduce((acc, group) => {
@@ -1144,9 +1150,11 @@
 				recipientGroupMap.byKey(id)
 			);
 			formValues.selectedCount = formValues.recipientGroups.reduce((acc, label) => {
+				if (!label) return acc;
 				const id = recipientGroupMap.byValue(label);
 				const group = recipientGroupsByID[id];
-				return acc + group.recipientCount;
+				if (!group) return acc;
+				return acc + (group.recipientCount ?? 0);
 			}, 0);
 		}
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index e5526b6..7bc169e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
 				titilium: ['Titillium Web', 'sans-serif']
 			},
 			colors: {
+				overlay: 'rgb(10 10 12 / <alpha-value>)',
 				'pc-pink': '#ff00ff',
 				'pc-pink-hover': '#fa48ff',
 				'pc-purple': '#9622fc',