diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index deacc99..ffaa5e2 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -95,6 +95,9 @@
 		return [];
 	});
 
+	const totalUsuarios = $derived(usuarios.length);
+	const totalTemplates = $derived(templates.length);
+
 	function templateDisponivelParaCanal(
 		template: Doc<'templatesMensagens'>,
 		canalAtual: 'chat' | 'email' | 'ambos'
@@ -1140,34 +1143,54 @@
 	}
 </script>
 
-<div class="container mx-auto max-w-7xl px-4 py-6">
-	<!-- Header -->
-	<div class="mb-6 flex items-center justify-between">
-		<div class="flex items-center gap-4">
-			<div class="bg-info/10 rounded-xl p-3">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="text-info h-8 w-8"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-					/>
-				</svg>
+<div class="container mx-auto max-w-7xl px-4 py-8">
+	<div
+		class="rounded-2xl bg-base-100/80 shadow-xl border border-base-200/60 p-6 lg:p-8 space-y-6 backdrop-blur"
+	>
+		<!-- Header -->
+		<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-gradient-to-br from-primary/15 via-info/10 to-secondary/10 rounded-2xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-9 w-9"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
+					<p class="text-base-content/60 mt-1 text-sm lg:text-base">
+						Envie avisos importantes por <span class="font-semibold">chat</span> e
+						<span class="font-semibold">email HTML padronizado</span> para os usuários do SGSE.
+					</p>
+				</div>
 			</div>
-			<div>
-				<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
-				<p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p>
+			<div class="grid grid-cols-2 gap-3 text-sm">
+				<div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
+					<div class="text-base-content/60 text-xs">Usuários alcançáveis</div>
+					<div class="text-base-content text-lg font-semibold">
+						{totalUsuarios}
+					</div>
+				</div>
+				<div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
+					<div class="text-base-content/60 text-xs">Templates cadastrados</div>
+					<div class="text-base-content text-lg font-semibold">
+						{totalTemplates}
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<!-- Mensagens de Feedback -->
+		<!-- Mensagens de Feedback -->
 	{#if mensagem}
 		<div
 			class="alert mb-6 shadow-lg"