From 1fbbecb0b38a58e69bc92a66ded1ee2f3db24535 Mon Sep 17 00:00:00 2001
From: Sam Valladares <samvalladares21@gmail.com>
Date: Mon, 22 Jun 2026 02:58:26 -0500
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20alive=20overhaul=20=E2=80=94?=
 =?UTF-8?q?=20unique=20icons,=20dropdowns,=20motion=20on=20every=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the dashboard feel alive every second, with clear controls, for the
July 14 HN relaunch. Memory Cinema is left fully untouched (zero changes to
MemoryCinema.svelte / graph/cinema/*; its tests still pass).

Foundation (lifts every page):
- Icon.svelte: inline-SVG icon system, zero runtime dep. A UNIQUE semantic
  silhouette per nav item — kills the old duplicated Unicode glyphs (◎◈◉◷
  were each reused across multiple items). Wired into sidebar, mobile nav,
  command palette, logo.
- Dropdown.svelte: accessible, keyboard-nav, type-ahead, animated select
  replacement with color dots / badges. Replaces dead native <select>s.
- AnimatedNumber.svelte: rAF count-up/tween, reduced-motion safe.
- PageHeader.svelte: shared masthead (drawn route icon + aurora title).
- actions/reveal.ts + actions/interactions.ts: scroll-reveal, magnetic,
  tilt(+glare), spotlight — all no-op under reduced-motion.
- app.css "alive layer": @property animatable gradients, conic live-border,
  breathe/ping, shimmer skeletons, @starting-style entry, aurora text, lift.

Per-page: every route (graph non-cinema controls, reasoning, memories,
timeline, feed, explore, activation, dreams, schedule, importance,
duplicates, contradictions, patterns, intentions, stats, settings) now uses
PageHeader, real Icons, count-ups, staggered reveals, shimmer loaders,
spotlight cards, and warm empty states. Native selects and button-row
filters became clear Dropdowns where it improves clarity.

Gates: svelte-check 0 errors/0 warnings, 937/937 tests pass, build green,
verified live in the browser preview.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/dashboard/src/app.css                    | 271 ++++++++++++++
 .../dashboard/src/lib/actions/interactions.ts | 136 +++++++
 apps/dashboard/src/lib/actions/reveal.ts      |  68 ++++
 .../src/lib/components/AnimatedNumber.svelte  |  91 +++++
 .../src/lib/components/Dropdown.svelte        | 338 ++++++++++++++++++
 apps/dashboard/src/lib/components/Icon.svelte | 143 ++++++++
 .../src/lib/components/PageHeader.svelte      |  69 ++++
 .../src/routes/(app)/activation/+page.svelte  |  54 ++-
 .../routes/(app)/contradictions/+page.svelte  | 135 ++++---
 .../src/routes/(app)/dreams/+page.svelte      | 109 +++---
 .../src/routes/(app)/duplicates/+page.svelte  |  98 ++---
 .../src/routes/(app)/explore/+page.svelte     | 102 ++++--
 .../src/routes/(app)/feed/+page.svelte        | 222 +++++++++---
 .../src/routes/(app)/graph/+page.svelte       |  81 +++--
 .../src/routes/(app)/importance/+page.svelte  |  72 ++--
 .../src/routes/(app)/intentions/+page.svelte  | 155 +++++---
 .../src/routes/(app)/memories/+page.svelte    | 128 +++++--
 .../src/routes/(app)/patterns/+page.svelte    | 115 ++++--
 .../src/routes/(app)/reasoning/+page.svelte   |  67 ++--
 .../src/routes/(app)/schedule/+page.svelte    |  66 ++--
 .../src/routes/(app)/settings/+page.svelte    | 156 ++++++--
 .../src/routes/(app)/stats/+page.svelte       |  99 +++--
 .../src/routes/(app)/timeline/+page.svelte    |  88 +++--
 apps/dashboard/src/routes/+layout.svelte      |  82 +++--
 24 files changed, 2360 insertions(+), 585 deletions(-)
 create mode 100644 apps/dashboard/src/lib/actions/interactions.ts
 create mode 100644 apps/dashboard/src/lib/actions/reveal.ts
 create mode 100644 apps/dashboard/src/lib/components/AnimatedNumber.svelte
 create mode 100644 apps/dashboard/src/lib/components/Dropdown.svelte
 create mode 100644 apps/dashboard/src/lib/components/Icon.svelte
 create mode 100644 apps/dashboard/src/lib/components/PageHeader.svelte

diff --git a/apps/dashboard/src/app.css b/apps/dashboard/src/app.css
index d7c0f7c..841c2a8 100644
--- a/apps/dashboard/src/app.css
+++ b/apps/dashboard/src/app.css
@@ -301,3 +301,274 @@ body {
 		to { opacity: 1; }
 	}
 }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   THE "ALIVE" LAYER  (bleeding-edge, progressively enhanced)
+   ───────────────────────────────────────────────────────────────────────
+   Shared primitives that make every page breathe, respond, and feel seen.
+   Everything here degrades gracefully and is disabled under reduced-motion.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── Registered animatable custom props (@property) ──────────────────────
+   Registering a property as <angle>/<percentage> lets the browser TWEEN it,
+   which plain CSS vars can't do. Powers the rotating conic borders below. */
+@property --angle {
+	syntax: '<angle>';
+	initial-value: 0deg;
+	inherits: false;
+}
+@property --shine {
+	syntax: '<percentage>';
+	initial-value: 0%;
+	inherits: false;
+}
+
+/* ── Scroll-reveal (paired with use:reveal) ─────────────────────────────
+   Elements start translated + transparent; .reveal-in lands them. The
+   action toggles the class via IntersectionObserver, with per-item --reveal-delay
+   for staggered list entrances. */
+.reveal {
+	opacity: 0;
+	transform: translateY(var(--reveal-y, 16px));
+	transition:
+		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
+	transition-delay: var(--reveal-delay, 0ms);
+	will-change: opacity, transform;
+}
+.reveal-in {
+	opacity: 1;
+	transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+	.reveal {
+		opacity: 1;
+		transform: none;
+		transition: none;
+	}
+}
+
+/* ── @starting-style page/section entry ─────────────────────────────────
+   Native entry animation with zero JS: the element animates FROM the
+   starting-style the first time it's rendered. Used on route content. */
+@media not (prefers-reduced-motion: reduce) {
+	.enter {
+		transition:
+			opacity 0.4s ease,
+			transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	@starting-style {
+		.enter {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+	}
+}
+
+/* ── Conic-gradient animated border (premium "live" frame) ──────────────
+   A slowly rotating iridescent ring around a panel. The @property --angle
+   makes the conic gradient's start angle tweenable. Use class .live-border. */
+.live-border {
+	position: relative;
+	isolation: isolate;
+}
+.live-border::before {
+	content: '';
+	position: absolute;
+	inset: -1px;
+	border-radius: inherit;
+	padding: 1px;
+	background: conic-gradient(
+		from var(--angle),
+		transparent 0%,
+		var(--color-synapse) 18%,
+		var(--color-dream) 33%,
+		transparent 50%,
+		transparent 100%
+	);
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask-composite: exclude;
+	pointer-events: none;
+	opacity: 0.6;
+	z-index: -1;
+}
+@media not (prefers-reduced-motion: reduce) {
+	.live-border::before {
+		animation: border-rotate 6s linear infinite;
+	}
+	@keyframes border-rotate {
+		to {
+			--angle: 360deg;
+		}
+	}
+}
+
+/* ── Cursor spotlight surface (paired with use:spotlight) ────────────────
+   A soft radial glow follows the pointer across a panel. --spot-x/y/o are
+   set by the action; default opacity 0 so it's invisible until hovered. */
+.spotlight-surface {
+	position: relative;
+	overflow: hidden;
+}
+.spotlight-surface::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background: radial-gradient(
+		340px circle at var(--spot-x, 50%) var(--spot-y, 50%),
+		rgba(129, 140, 248, 0.12),
+		transparent 60%
+	);
+	opacity: var(--spot-o, 0);
+	transition: opacity 0.3s ease;
+	z-index: 0;
+}
+
+/* ── Tilt glare (paired with use:tilt glare) ────────────────────────────── */
+.tilt-glare {
+	position: relative;
+	overflow: hidden;
+}
+.tilt-glare::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background: radial-gradient(
+		circle at var(--glare-x, 50%) var(--glare-y, 50%),
+		rgba(255, 255, 255, 0.14),
+		transparent 45%
+	);
+	opacity: var(--glare-o, 0);
+	transition: opacity 0.3s ease;
+}
+
+/* ── Breathing live indicator (calmer than a hard blink) ────────────────
+   A dot that gently inhales/exhales scale + glow — reads as "alive,
+   listening" rather than "error blinking". */
+.breathe {
+	animation: breathe 3.2s ease-in-out infinite;
+}
+@keyframes breathe {
+	0%, 100% {
+		transform: scale(1);
+		filter: drop-shadow(0 0 2px currentColor);
+		opacity: 0.85;
+	}
+	50% {
+		transform: scale(1.18);
+		filter: drop-shadow(0 0 7px currentColor);
+		opacity: 1;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.breathe { animation: none; }
+}
+
+/* A live "radar ping" ring that expands and fades — wrap a dot in .ping-host. */
+.ping-host {
+	position: relative;
+}
+.ping-host::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: 50%;
+	background: currentColor;
+	opacity: 0.6;
+	z-index: -1;
+}
+@media not (prefers-reduced-motion: reduce) {
+	.ping-host::before {
+		animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
+	}
+	@keyframes ping {
+		0% { transform: scale(1); opacity: 0.5; }
+		80%, 100% { transform: scale(2.6); opacity: 0; }
+	}
+}
+
+/* ── Shimmer skeleton (loading that feels intentional, not frozen) ───────
+   A diagonal light sweep over skeleton blocks. Use .shimmer on the
+   placeholder; it replaces a plain pulse with a directional sheen. */
+.shimmer {
+	position: relative;
+	overflow: hidden;
+	background: rgba(255, 255, 255, 0.03);
+}
+.shimmer::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	transform: translateX(-100%);
+	background: linear-gradient(
+		90deg,
+		transparent,
+		rgba(129, 140, 248, 0.12),
+		transparent
+	);
+}
+@media not (prefers-reduced-motion: reduce) {
+	.shimmer::after {
+		animation: shimmer 1.6s ease-in-out infinite;
+	}
+	@keyframes shimmer {
+		100% { transform: translateX(100%); }
+	}
+}
+
+/* ── Gradient text that slowly drifts (alive headings) ──────────────────── */
+.text-aurora {
+	background: linear-gradient(
+		100deg,
+		var(--color-synapse-glow),
+		var(--color-dream-glow),
+		var(--color-recall),
+		var(--color-synapse-glow)
+	);
+	background-size: 250% 100%;
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+@media not (prefers-reduced-motion: reduce) {
+	.text-aurora {
+		animation: aurora-drift 8s ease-in-out infinite;
+	}
+	@keyframes aurora-drift {
+		0%, 100% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+	}
+}
+
+/* ── Hover lift utility — cards rise + glow when pointed at ───────────────*/
+.lift {
+	transition:
+		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
+		box-shadow 0.28s ease,
+		border-color 0.28s ease;
+}
+.lift:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.18);
+}
+@media (prefers-reduced-motion: reduce) {
+	.lift:hover { transform: none; }
+}
+
+/* ── Tabular numerals helper (count-ups don't jitter) ──────────────────── */
+.tabular-nums {
+	font-variant-numeric: tabular-nums;
+	font-feature-settings: 'tnum';
+}
+
+/* ── Focus ring consistency (accessible + on-brand) ─────────────────────── */
+:where(button, a, input, select, [role='button'], [tabindex]):focus-visible {
+	outline: 2px solid var(--color-synapse-glow);
+	outline-offset: 2px;
+	border-radius: 0.4rem;
+}
diff --git a/apps/dashboard/src/lib/actions/interactions.ts b/apps/dashboard/src/lib/actions/interactions.ts
new file mode 100644
index 0000000..c4e43b3
--- /dev/null
+++ b/apps/dashboard/src/lib/actions/interactions.ts
@@ -0,0 +1,136 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  Micro-interaction actions — the "alive" layer for pointer feel.
+// ───────────────────────────────────────────────────────────────────────
+//  All actions no-op under prefers-reduced-motion and clean up their own
+//  listeners on destroy. Pure pointer events, no dependency.
+// ═══════════════════════════════════════════════════════════════════════
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined' &&
+	window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+// ── magnetic: element drifts toward the cursor, snaps back on leave ──────
+export interface MagneticOptions {
+	/** How far the element is allowed to drift, in px. */
+	strength?: number;
+}
+export function magnetic(node: HTMLElement, options: MagneticOptions = {}) {
+	if (prefersReducedMotion()) return {};
+	const strength = options.strength ?? 8;
+	let raf = 0;
+
+	function onMove(e: PointerEvent) {
+		const r = node.getBoundingClientRect();
+		const mx = e.clientX - (r.left + r.width / 2);
+		const my = e.clientY - (r.top + r.height / 2);
+		const dx = Math.max(-1, Math.min(1, mx / (r.width / 2))) * strength;
+		const dy = Math.max(-1, Math.min(1, my / (r.height / 2))) * strength;
+		cancelAnimationFrame(raf);
+		raf = requestAnimationFrame(() => {
+			node.style.transform = `translate(${dx}px, ${dy}px)`;
+		});
+	}
+	function onLeave() {
+		cancelAnimationFrame(raf);
+		node.style.transform = '';
+	}
+
+	node.style.transition = 'transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)';
+	node.addEventListener('pointermove', onMove);
+	node.addEventListener('pointerleave', onLeave);
+	return {
+		destroy() {
+			node.removeEventListener('pointermove', onMove);
+			node.removeEventListener('pointerleave', onLeave);
+			cancelAnimationFrame(raf);
+		},
+	};
+}
+
+// ── tilt: 3D parallax tilt toward the cursor (cards, hero panels) ────────
+export interface TiltOptions {
+	/** Max tilt in degrees. */
+	max?: number;
+	/** Lift the card toward the viewer on hover, in px. */
+	lift?: number;
+	/** Add a moving sheen highlight that follows the cursor. */
+	glare?: boolean;
+}
+export function tilt(node: HTMLElement, options: TiltOptions = {}) {
+	if (prefersReducedMotion()) return {};
+	const max = options.max ?? 6;
+	const lift = options.lift ?? 0;
+	const glare = options.glare ?? false;
+	let raf = 0;
+
+	node.style.transformStyle = 'preserve-3d';
+	node.style.transition = 'transform 0.3s cubic-bezier(0.23, 1, 0.32, 1)';
+
+	if (glare) {
+		node.style.setProperty('--glare-x', '50%');
+		node.style.setProperty('--glare-y', '50%');
+		node.style.setProperty('--glare-o', '0');
+	}
+
+	function onMove(e: PointerEvent) {
+		const r = node.getBoundingClientRect();
+		const px = (e.clientX - r.left) / r.width;
+		const py = (e.clientY - r.top) / r.height;
+		const rx = (0.5 - py) * max * 2;
+		const ry = (px - 0.5) * max * 2;
+		cancelAnimationFrame(raf);
+		raf = requestAnimationFrame(() => {
+			node.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg)${lift ? ` translateZ(${lift}px)` : ''}`;
+			if (glare) {
+				node.style.setProperty('--glare-x', `${px * 100}%`);
+				node.style.setProperty('--glare-y', `${py * 100}%`);
+				node.style.setProperty('--glare-o', '1');
+			}
+		});
+	}
+	function onLeave() {
+		cancelAnimationFrame(raf);
+		node.style.transform = '';
+		if (glare) node.style.setProperty('--glare-o', '0');
+	}
+
+	node.addEventListener('pointermove', onMove);
+	node.addEventListener('pointerleave', onLeave);
+	return {
+		destroy() {
+			node.removeEventListener('pointermove', onMove);
+			node.removeEventListener('pointerleave', onLeave);
+			cancelAnimationFrame(raf);
+		},
+	};
+}
+
+// ── spotlight: a soft radial glow that tracks the cursor over a surface ──
+//  Sets --spot-x / --spot-y custom props the element's CSS can read to
+//  position a radial-gradient highlight. Makes large panels feel responsive
+//  to the pointer even when nothing is "hovered".
+export function spotlight(node: HTMLElement) {
+	if (prefersReducedMotion()) return {};
+	let raf = 0;
+	function onMove(e: PointerEvent) {
+		const r = node.getBoundingClientRect();
+		cancelAnimationFrame(raf);
+		raf = requestAnimationFrame(() => {
+			node.style.setProperty('--spot-x', `${e.clientX - r.left}px`);
+			node.style.setProperty('--spot-y', `${e.clientY - r.top}px`);
+			node.style.setProperty('--spot-o', '1');
+		});
+	}
+	function onLeave() {
+		node.style.setProperty('--spot-o', '0');
+	}
+	node.addEventListener('pointermove', onMove);
+	node.addEventListener('pointerleave', onLeave);
+	return {
+		destroy() {
+			node.removeEventListener('pointermove', onMove);
+			node.removeEventListener('pointerleave', onLeave);
+			cancelAnimationFrame(raf);
+		},
+	};
+}
diff --git a/apps/dashboard/src/lib/actions/reveal.ts b/apps/dashboard/src/lib/actions/reveal.ts
new file mode 100644
index 0000000..43efd48
--- /dev/null
+++ b/apps/dashboard/src/lib/actions/reveal.ts
@@ -0,0 +1,68 @@
+// ═══════════════════════════════════════════════════════════════════════
+//  reveal — scroll-into-view entrance animation as a Svelte action.
+// ───────────────────────────────────────────────────────────────────────
+//  Usage:  <div use:reveal>            // default rise+fade
+//          <div use:reveal={{ y: 24, delay: 80, once: true }}>
+//
+//  Adds an IntersectionObserver that flips the element to its "revealed"
+//  state the first time it scrolls into view. Pairs with the .reveal /
+//  .reveal-in CSS in app.css. Honors prefers-reduced-motion by revealing
+//  instantly (no transform), so motion-sensitive users still see content.
+//
+//  Why an action and not CSS scroll-timeline alone: scroll-driven
+//  animation-timeline is great for continuous scrubbing, but for a simple
+//  "appear once when seen" we want a one-shot that also works as a staggered
+//  list entrance with per-item delay — an observer is the robust path with
+//  universal mid-2026 support.
+// ═══════════════════════════════════════════════════════════════════════
+
+export interface RevealOptions {
+	/** Pixels to translate up from on entry. */
+	y?: number;
+	/** ms delay before the transition starts (use for stagger). */
+	delay?: number;
+	/** Only reveal once, then stop observing (default true). */
+	once?: boolean;
+	/** 0-1 visibility threshold to trigger. */
+	threshold?: number;
+}
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined' &&
+	window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+export function reveal(node: HTMLElement, options: RevealOptions = {}) {
+	const { y = 16, delay = 0, once = true, threshold = 0.12 } = options;
+
+	// Motion-off: show immediately, do nothing else.
+	if (prefersReducedMotion()) {
+		node.classList.add('reveal-in');
+		return {};
+	}
+
+	node.classList.add('reveal');
+	node.style.setProperty('--reveal-y', `${y}px`);
+	if (delay) node.style.setProperty('--reveal-delay', `${delay}ms`);
+
+	const io = new IntersectionObserver(
+		(entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					node.classList.add('reveal-in');
+					if (once) io.unobserve(node);
+				} else if (!once) {
+					node.classList.remove('reveal-in');
+				}
+			}
+		},
+		{ threshold, rootMargin: '0px 0px -8% 0px' }
+	);
+
+	io.observe(node);
+
+	return {
+		destroy() {
+			io.disconnect();
+		},
+	};
+}
diff --git a/apps/dashboard/src/lib/components/AnimatedNumber.svelte b/apps/dashboard/src/lib/components/AnimatedNumber.svelte
new file mode 100644
index 0000000..0aab878
--- /dev/null
+++ b/apps/dashboard/src/lib/components/AnimatedNumber.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	// ═══════════════════════════════════════════════════════════════════
+	//  ANIMATED NUMBER — smooth count-up / tween between values.
+	// ───────────────────────────────────────────────────────────────────
+	//  Tweens from the previous value to the new one with an ease-out curve.
+	//  Counts up on first mount (from 0) so every figure feels like it's
+	//  being tallied live, and re-tweens whenever the bound value changes
+	//  (e.g. a websocket push). Respects prefers-reduced-motion: those users
+	//  get the final value instantly. Pure rAF — no dependency.
+	// ═══════════════════════════════════════════════════════════════════
+	interface Props {
+		value: number;
+		/** Decimal places to render. */
+		decimals?: number;
+		/** Multiply before formatting (e.g. 100 for a 0-1 ratio → percent). */
+		scale?: number;
+		prefix?: string;
+		suffix?: string;
+		duration?: number;
+		class?: string;
+		/** Group thousands with separators. */
+		group?: boolean;
+	}
+	let {
+		value,
+		decimals = 0,
+		scale = 1,
+		prefix = '',
+		suffix = '',
+		duration = 900,
+		class: cls = '',
+		group = true,
+	}: Props = $props();
+
+	let display = $state(0);
+	let raf = 0;
+	let from = 0;
+	let start = 0;
+	let mounted = false;
+
+	const reduceMotion =
+		typeof window !== 'undefined' &&
+		window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+	function easeOutExpo(t: number): number {
+		return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+	}
+
+	function animateTo(target: number) {
+		if (reduceMotion) {
+			display = target;
+			return;
+		}
+		cancelAnimationFrame(raf);
+		from = display;
+		start = 0;
+		function tick(ts: number) {
+			if (!start) start = ts;
+			const t = Math.min(1, (ts - start) / duration);
+			display = from + (target - from) * easeOutExpo(t);
+			if (t < 1) raf = requestAnimationFrame(tick);
+			else display = target;
+		}
+		raf = requestAnimationFrame(tick);
+	}
+
+	$effect(() => {
+		// Track the incoming value; tween toward it.
+		const target = value;
+		if (!mounted) {
+			mounted = true;
+			animateTo(target);
+		} else {
+			animateTo(target);
+		}
+		return () => cancelAnimationFrame(raf);
+	});
+
+	let formatted = $derived(
+		(() => {
+			const v = display * scale;
+			const fixed = v.toFixed(decimals);
+			if (!group) return fixed;
+			const [int, frac] = fixed.split('.');
+			const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+			return frac !== undefined ? `${grouped}.${frac}` : grouped;
+		})()
+	);
+</script>
+
+<span class="tabular-nums {cls}">{prefix}{formatted}{suffix}</span>
diff --git a/apps/dashboard/src/lib/components/Dropdown.svelte b/apps/dashboard/src/lib/components/Dropdown.svelte
new file mode 100644
index 0000000..9c12e69
--- /dev/null
+++ b/apps/dashboard/src/lib/components/Dropdown.svelte
@@ -0,0 +1,338 @@
+<script lang="ts" module>
+	export interface DropdownOption {
+		value: string;
+		label: string;
+		/** Optional color dot (e.g. node-type color) shown before the label. */
+		color?: string;
+		/** Optional small count/badge shown after the label. */
+		badge?: string | number;
+		/** Optional icon name from the Icon system. */
+		icon?: IconName;
+	}
+</script>
+
+<script lang="ts">
+	import Icon, { type IconName } from './Icon.svelte';
+
+	// ═══════════════════════════════════════════════════════════════════
+	//  DROPDOWN — accessible, animated, themed select replacement.
+	// ───────────────────────────────────────────────────────────────────
+	//  Replaces the dead native <select>. Keyboard-navigable (↑/↓/Enter/Esc/
+	//  Home/End/type-ahead), closes on outside click, animates open with a
+	//  spring-ish scale, and themes to the cosmic palette. Makes filtering
+	//  CLEAR: shows the current value, an icon, color dots, and counts.
+	// ═══════════════════════════════════════════════════════════════════
+	interface Props {
+		options: DropdownOption[];
+		value: string;
+		label?: string;
+		placeholder?: string;
+		icon?: IconName;
+		/** Width hint for the trigger; menu matches the trigger width. */
+		class?: string;
+		onChange?: (value: string) => void;
+	}
+	let {
+		options,
+		value = $bindable(),
+		label,
+		placeholder = 'Select…',
+		icon,
+		class: cls = '',
+		onChange,
+	}: Props = $props();
+
+	let open = $state(false);
+	let triggerEl = $state<HTMLButtonElement>();
+	let menuEl = $state<HTMLDivElement>();
+	let activeIndex = $state(-1);
+	let typeAhead = '';
+	let typeAheadTimer: ReturnType<typeof setTimeout>;
+
+	let selected = $derived(options.find((o) => o.value === value));
+
+	function select(opt: DropdownOption) {
+		value = opt.value;
+		onChange?.(opt.value);
+		close();
+		triggerEl?.focus();
+	}
+
+	function toggle() {
+		open ? close() : openMenu();
+	}
+
+	function openMenu() {
+		open = true;
+		activeIndex = Math.max(0, options.findIndex((o) => o.value === value));
+		requestAnimationFrame(() => {
+			(menuEl?.querySelectorAll('[role="option"]')[activeIndex] as HTMLElement)?.scrollIntoView({
+				block: 'nearest',
+			});
+		});
+	}
+
+	function close() {
+		open = false;
+		activeIndex = -1;
+	}
+
+	function onTriggerKey(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			open ? move(1) : openMenu();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			open ? move(-1) : openMenu();
+		} else if (e.key === 'Escape') {
+			close();
+		} else if (e.key === 'Home' && open) {
+			e.preventDefault();
+			activeIndex = 0;
+		} else if (e.key === 'End' && open) {
+			e.preventDefault();
+			activeIndex = options.length - 1;
+		} else if (open && e.key === 'Enter' && activeIndex >= 0) {
+			e.preventDefault();
+			select(options[activeIndex]);
+		} else if (e.key.length === 1 && /\S/.test(e.key)) {
+			// type-ahead
+			if (!open) openMenu();
+			clearTimeout(typeAheadTimer);
+			typeAhead += e.key.toLowerCase();
+			typeAheadTimer = setTimeout(() => (typeAhead = ''), 600);
+			const idx = options.findIndex((o) => o.label.toLowerCase().startsWith(typeAhead));
+			if (idx >= 0) activeIndex = idx;
+		}
+	}
+
+	function move(delta: number) {
+		const n = options.length;
+		activeIndex = (activeIndex + delta + n) % n;
+		requestAnimationFrame(() => {
+			(menuEl?.querySelectorAll('[role="option"]')[activeIndex] as HTMLElement)?.scrollIntoView({
+				block: 'nearest',
+			});
+		});
+	}
+
+	// Close on outside click while open.
+	$effect(() => {
+		if (!open) return;
+		function onDocClick(e: MouseEvent) {
+			if (!triggerEl?.contains(e.target as Node) && !menuEl?.contains(e.target as Node)) close();
+		}
+		document.addEventListener('click', onDocClick, true);
+		return () => document.removeEventListener('click', onDocClick, true);
+	});
+</script>
+
+<div class="dd {cls}">
+	{#if label}
+		<span class="dd-label">{label}</span>
+	{/if}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		class="dd-trigger"
+		class:dd-open={open}
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		onclick={toggle}
+		onkeydown={onTriggerKey}
+	>
+		{#if icon}
+			<span class="dd-trigger-icon"><Icon name={icon} size={15} /></span>
+		{/if}
+		<span class="dd-value" class:dd-placeholder={!selected}>
+			{#if selected?.color}
+				<span class="dd-dot" style="background:{selected.color}"></span>
+			{/if}
+			{selected ? selected.label : placeholder}
+		</span>
+		<span class="dd-chevron" class:dd-chevron-open={open}><Icon name="chevron" size={14} /></span>
+	</button>
+
+	{#if open}
+		<div
+			bind:this={menuEl}
+			class="dd-menu glass-panel"
+			role="listbox"
+			tabindex="-1"
+			aria-label={label ?? placeholder}
+		>
+			{#each options as opt, i (opt.value)}
+				<button
+					type="button"
+					role="option"
+					aria-selected={opt.value === value}
+					class="dd-option"
+					class:dd-active={i === activeIndex}
+					class:dd-selected={opt.value === value}
+					onmouseenter={() => (activeIndex = i)}
+					onclick={() => select(opt)}
+				>
+					{#if opt.icon}<span class="dd-opt-icon"><Icon name={opt.icon} size={15} /></span>{/if}
+					{#if opt.color}<span class="dd-dot" style="background:{opt.color}"></span>{/if}
+					<span class="dd-opt-label">{opt.label}</span>
+					{#if opt.badge !== undefined}<span class="dd-badge">{opt.badge}</span>{/if}
+					{#if opt.value === value}<span class="dd-check"><Icon name="sparkle" size={12} /></span>{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.dd {
+		position: relative;
+		display: inline-flex;
+		flex-direction: column;
+		gap: 0.3rem;
+	}
+	.dd-label {
+		font-size: 0.65rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--color-muted);
+		padding-left: 0.15rem;
+	}
+	.dd-trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.55rem 0.7rem 0.55rem 0.8rem;
+		min-width: 9rem;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(99, 102, 241, 0.12);
+		border-radius: 0.75rem;
+		color: var(--color-text);
+		font-size: 0.8rem;
+		font-family: inherit;
+		cursor: pointer;
+		backdrop-filter: blur(8px);
+		transition:
+			border-color 0.2s ease,
+			background 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+	.dd-trigger:hover {
+		border-color: rgba(99, 102, 241, 0.3);
+		background: rgba(255, 255, 255, 0.05);
+	}
+	.dd-trigger:focus-visible,
+	.dd-trigger.dd-open {
+		outline: none;
+		border-color: rgba(99, 102, 241, 0.5);
+		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
+	}
+	.dd-trigger-icon {
+		color: var(--color-synapse-glow);
+		display: inline-flex;
+	}
+	.dd-value {
+		flex: 1;
+		text-align: left;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.dd-placeholder {
+		color: var(--color-muted);
+	}
+	.dd-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		flex-shrink: 0;
+		box-shadow: 0 0 6px currentColor;
+	}
+	.dd-chevron {
+		color: var(--color-dim);
+		display: inline-flex;
+		transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	.dd-chevron-open {
+		transform: rotate(180deg);
+		color: var(--color-synapse-glow);
+	}
+
+	.dd-menu {
+		position: absolute;
+		top: calc(100% + 0.4rem);
+		left: 0;
+		z-index: 60;
+		min-width: 100%;
+		max-height: 18rem;
+		overflow-y: auto;
+		padding: 0.35rem;
+		border-radius: 0.85rem;
+		transform-origin: top center;
+	}
+	@media not (prefers-reduced-motion: reduce) {
+		.dd-menu {
+			animation: dd-pop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+		}
+		@keyframes dd-pop {
+			from {
+				opacity: 0;
+				transform: translateY(-6px) scale(0.96);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0) scale(1);
+			}
+		}
+	}
+	.dd-option {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.6rem;
+		border: none;
+		background: transparent;
+		color: var(--color-dim);
+		font-size: 0.8rem;
+		font-family: inherit;
+		text-align: left;
+		border-radius: 0.6rem;
+		cursor: pointer;
+		transition: background 0.12s ease, color 0.12s ease;
+	}
+	.dd-active {
+		background: rgba(99, 102, 241, 0.14);
+		color: var(--color-text);
+	}
+	.dd-selected {
+		color: var(--color-synapse-glow);
+	}
+	.dd-opt-icon {
+		color: var(--color-dim);
+		display: inline-flex;
+	}
+	.dd-active .dd-opt-icon {
+		color: var(--color-synapse-glow);
+	}
+	.dd-opt-label {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.dd-badge {
+		font-size: 0.65rem;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-muted);
+		background: rgba(255, 255, 255, 0.05);
+		padding: 0.05rem 0.4rem;
+		border-radius: 0.4rem;
+	}
+	.dd-check {
+		color: var(--color-synapse-glow);
+		display: inline-flex;
+	}
+</style>
diff --git a/apps/dashboard/src/lib/components/Icon.svelte b/apps/dashboard/src/lib/components/Icon.svelte
new file mode 100644
index 0000000..ed248a0
--- /dev/null
+++ b/apps/dashboard/src/lib/components/Icon.svelte
@@ -0,0 +1,143 @@
+<script lang="ts" module>
+	// ═══════════════════════════════════════════════════════════════════
+	//  VESTIGE ICON SYSTEM
+	// ───────────────────────────────────────────────────────────────────
+	//  Hand-tuned inline SVG icons — ZERO runtime dependency. Every nav
+	//  item gets a UNIQUE, semantically-meaningful silhouette that reads
+	//  instantly even at 18px. All strokes use `currentColor` so a single
+	//  parent `color` (or our glow utilities) themes the whole set.
+	//
+	//  Design language: 24×24 viewBox, 1.6 stroke, round caps/joins, a
+	//  cosmic/neural motif. Distinct silhouettes are the contract — no two
+	//  icons may be confused at a glance (the old Unicode set reused
+	//  ◎ ◈ ◉ ◷ across multiple items; that bug is dead here).
+	// ═══════════════════════════════════════════════════════════════════
+	export type IconName =
+		| 'graph'
+		| 'reasoning'
+		| 'memories'
+		| 'timeline'
+		| 'feed'
+		| 'explore'
+		| 'activation'
+		| 'dreams'
+		| 'schedule'
+		| 'importance'
+		| 'duplicates'
+		| 'contradictions'
+		| 'patterns'
+		| 'intentions'
+		| 'stats'
+		| 'settings'
+		| 'command'
+		| 'search'
+		| 'filter'
+		| 'sparkle'
+		| 'chevron'
+		| 'close'
+		| 'pulse'
+		| 'logo';
+
+	// Each entry is the inner markup of a 24×24 SVG. Strokes inherit
+	// currentColor; fills are explicit where a solid accent reads better.
+	export const ICON_PATHS: Record<IconName, string> = {
+		// Connected nodes — a literal knowledge graph.
+		graph: `<circle cx="6" cy="7" r="2.1"/><circle cx="18" cy="6" r="2.1"/><circle cx="12" cy="17.5" r="2.3"/><path d="M7.7 8.4 10.6 15.5M16.4 7.6 13.2 15.6M8 7l8-1"/>`,
+		// Branching logic tree with a spark — deduction.
+		reasoning: `<path d="M12 3v4M12 7 7 11M12 7l5 4"/><circle cx="12" cy="3" r="1.6"/><circle cx="7" cy="12" r="1.8"/><circle cx="17" cy="12" r="1.8"/><path d="m7 16 .9 1.9 1.9.6-1.4 1.5.2 2-1.6-1-1.6 1 .2-2L4.2 18.5l1.9-.6z" fill="currentColor" stroke="none" opacity=".55"/>`,
+		// Stacked memory cards / layered recall.
+		memories: `<rect x="5" y="8" width="14" height="11" rx="2.2"/><path d="M7.5 8V6.4A1.4 1.4 0 0 1 8.9 5h8.2A1.9 1.9 0 0 1 19 7v8.5"/><path d="M9 12.5h6M9 15.5h4"/>`,
+		// Time axis with marked moments.
+		timeline: `<path d="M3 12h18"/><circle cx="7" cy="12" r="2" fill="currentColor" stroke="none"/><circle cx="13" cy="12" r="2.2"/><circle cx="19" cy="12" r="1.6" fill="currentColor" stroke="none"/><path d="M7 12V7M13 12v6M19 12V9"/>`,
+		// Streaming feed lines.
+		feed: `<path d="M4 7h16M4 12h16M4 17h10"/><circle cx="18.5" cy="17" r="1.4" fill="currentColor" stroke="none"/>`,
+		// Compass — exploration.
+		explore: `<circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5z" fill="currentColor" stroke="none" opacity=".8"/><circle cx="12" cy="12" r="1" fill="var(--color-void,#050510)" stroke="none"/>`,
+		// Radiating activation — spreading energy from a core.
+		activation: `<circle cx="12" cy="12" r="2.4" fill="currentColor" stroke="none"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>`,
+		// Crescent moon + stars — dream consolidation.
+		dreams: `<path d="M20 13.5A7.5 7.5 0 1 1 11 4.2a6 6 0 0 0 9 9.3Z"/><path d="m6.5 6 .5 1.4L8.4 8 7 8.6 6.5 10 6 8.6 4.6 8 6 7.4z" fill="currentColor" stroke="none" opacity=".7"/>`,
+		// Calendar — scheduling.
+		schedule: `<rect x="4" y="5.5" width="16" height="14" rx="2"/><path d="M4 9.5h16M8 3.5v4M16 3.5v4"/><circle cx="9" cy="14" r="1" fill="currentColor" stroke="none"/><circle cx="13" cy="14" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="17" r="1" fill="currentColor" stroke="none"/>`,
+		// Filled award star — importance.
+		importance: `<path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9z" fill="currentColor" stroke="none"/>`,
+		// Two overlapping cards — duplicates.
+		duplicates: `<rect x="4" y="7" width="11" height="11" rx="2"/><path d="M9 7V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1"/>`,
+		// Opposing arrows colliding — contradiction.
+		contradictions: `<path d="M3 9h8l-2.5-2.5M3 9l2.5 2.5M21 15h-8l2.5 2.5M21 15l-2.5-2.5"/><path d="M12 4v16" opacity=".35" stroke-dasharray="2 2.5"/>`,
+		// Tessellated grid — recurring patterns.
+		patterns: `<path d="M4 8.5 8.5 4 13 8.5 8.5 13zM13 8.5 17.5 4 22 8.5 17.5 13zM8.5 17 13 12.5 17.5 17 13 21.5z" opacity=".9"/>`,
+		// Crosshair / target — intentions / aim.
+		intentions: `<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.4"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><path d="M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3"/>`,
+		// Bar chart — stats.
+		stats: `<path d="M4 20h16"/><rect x="5.5" y="11" width="3.2" height="6.5" rx="1" fill="currentColor" stroke="none"/><rect x="10.4" y="7" width="3.2" height="10.5" rx="1" fill="currentColor" stroke="none" opacity=".85"/><rect x="15.3" y="13.5" width="3.2" height="4" rx="1" fill="currentColor" stroke="none" opacity=".7"/>`,
+		// Gear — settings.
+		settings: `<circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v2.6M12 18.9v2.6M21.5 12h-2.6M5.1 12H2.5M18.7 5.3l-1.9 1.9M7.2 16.8l-1.9 1.9M18.7 18.7l-1.9-1.9M7.2 7.2 5.3 5.3"/>`,
+
+		// ── UI utility glyphs (not nav, but part of the system) ──
+		command: `<path d="M9 6.5A2.5 2.5 0 1 0 6.5 9H9V6.5ZM9 9v6M9 9h6M15 9V6.5A2.5 2.5 0 1 1 17.5 9H15ZM15 15h2.5A2.5 2.5 0 1 1 15 17.5V15ZM15 15H9M9 15v2.5A2.5 2.5 0 1 1 6.5 15H9Z"/>`,
+		search: `<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.3-4.3"/>`,
+		filter: `<path d="M4 5.5h16l-6 7v5l-4 2v-7z"/>`,
+		sparkle: `<path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" fill="currentColor" stroke="none"/><path d="m18.5 14 .7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z" fill="currentColor" stroke="none" opacity=".6"/>`,
+		chevron: `<path d="m8 10 4 4 4-4"/>`,
+		close: `<path d="m6 6 12 12M18 6 6 18"/>`,
+		pulse: `<path d="M3 12h4l2-6 4 12 2-6h6"/>`,
+		logo: `<circle cx="6" cy="8" r="2"/><circle cx="17" cy="6.5" r="2"/><circle cx="12" cy="17" r="2.4" fill="currentColor" stroke="none"/><circle cx="18" cy="16" r="1.6"/><path d="M7.7 9.2 10.5 15M15.3 7.4 12.7 15M8 8l7-1M14 16.5l2.4-.3"/>`,
+	};
+</script>
+
+<script lang="ts">
+	interface Props {
+		name: IconName;
+		size?: number;
+		strokeWidth?: number;
+		class?: string;
+		/** When true, the icon plays a one-shot stroke-draw on mount. */
+		draw?: boolean;
+	}
+	let { name, size = 20, strokeWidth = 1.6, class: cls = '', draw = false }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	fill="none"
+	stroke="currentColor"
+	stroke-width={strokeWidth}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="vestige-icon {draw ? 'vestige-icon-draw' : ''} {cls}"
+	aria-hidden="true"
+	role="presentation"
+>
+	{@html ICON_PATHS[name]}
+</svg>
+
+<style>
+	.vestige-icon {
+		display: inline-block;
+		flex-shrink: 0;
+		vertical-align: middle;
+		overflow: visible;
+	}
+
+	/* One-shot stroke-draw — used on page-title icons so each route entry
+	   feels like the icon is being "written" for you. Reduced-motion users
+	   get the fully-drawn icon with no animation. */
+	@media not (prefers-reduced-motion: reduce) {
+		.vestige-icon-draw :global(path),
+		.vestige-icon-draw :global(circle),
+		.vestige-icon-draw :global(rect) {
+			stroke-dasharray: 64;
+			stroke-dashoffset: 64;
+			animation: icon-draw 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
+		}
+		@keyframes icon-draw {
+			to {
+				stroke-dashoffset: 0;
+			}
+		}
+	}
+</style>
diff --git a/apps/dashboard/src/lib/components/PageHeader.svelte b/apps/dashboard/src/lib/components/PageHeader.svelte
new file mode 100644
index 0000000..00ad638
--- /dev/null
+++ b/apps/dashboard/src/lib/components/PageHeader.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Icon, { type IconName } from './Icon.svelte';
+
+	// ═══════════════════════════════════════════════════════════════════
+	//  PAGE HEADER — the shared "alive" page title used on every route.
+	// ───────────────────────────────────────────────────────────────────
+	//  A drawn-on unique route icon in a glowing tile, an aurora-gradient
+	//  title, an optional subtitle, and an optional right-aligned slot for
+	//  live counts / actions. Replaces the flat `<h1>` each page had, giving
+	//  the whole app one premium, consistent, animated masthead.
+	// ═══════════════════════════════════════════════════════════════════
+	interface Props {
+		icon: IconName;
+		title: string;
+		subtitle?: string;
+		/** Tailwind color token name for the icon tile accent (e.g. 'synapse'). */
+		accent?: string;
+		children?: import('svelte').Snippet;
+	}
+	let { icon, title, subtitle, accent = 'synapse', children }: Props = $props();
+</script>
+
+<header class="flex items-start justify-between gap-4 mb-6 enter">
+	<div class="flex items-center gap-3.5 min-w-0">
+		<div
+			class="header-tile relative flex items-center justify-center w-11 h-11 rounded-xl shrink-0
+				bg-{accent}/12 border border-{accent}/25 text-{accent}-glow"
+		>
+			<Icon name={icon} size={22} draw />
+		</div>
+		<div class="min-w-0">
+			<h1 class="text-2xl font-bold text-aurora leading-tight text-balance">{title}</h1>
+			{#if subtitle}
+				<p class="text-sm text-dim mt-0.5 text-pretty">{subtitle}</p>
+			{/if}
+		</div>
+	</div>
+	{#if children}
+		<div class="flex items-center gap-2 shrink-0 flex-wrap justify-end">
+			{@render children()}
+		</div>
+	{/if}
+</header>
+
+<style>
+	/* Soft outward glow that gently pulses, so the masthead icon reads as
+	   "live" the moment the page lands. */
+	.header-tile::after {
+		content: '';
+		position: absolute;
+		inset: -1px;
+		border-radius: inherit;
+		box-shadow: 0 0 18px -2px currentColor;
+		opacity: 0.35;
+		pointer-events: none;
+	}
+	@media not (prefers-reduced-motion: reduce) {
+		.header-tile::after {
+			animation: tile-glow 4s ease-in-out infinite;
+		}
+		@keyframes tile-glow {
+			0%, 100% { opacity: 0.22; }
+			50% { opacity: 0.5; }
+		}
+	}
+
+	.text-balance { text-wrap: balance; }
+	.text-pretty { text-wrap: pretty; }
+</style>
diff --git a/apps/dashboard/src/routes/(app)/activation/+page.svelte b/apps/dashboard/src/routes/(app)/activation/+page.svelte
index 2433e43..ed4bcc0 100644
--- a/apps/dashboard/src/routes/(app)/activation/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/activation/+page.svelte
@@ -24,6 +24,11 @@
 	} from '$components/ActivationNetwork.svelte';
 	import { filterNewSpreadEvents } from '$components/activation-helpers';
 	import type { Memory, VestigeEvent } from '$types';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight, magnetic } from '$lib/actions/interactions';
 
 	let searchQuery = $state('');
 	let loading = $state(false);
@@ -180,19 +185,30 @@
 	});
 </script>
 
-<div class="p-6 max-w-6xl mx-auto space-y-6">
-	<header class="space-y-2">
-		<h1 class="text-xl text-bright font-semibold">Spreading Activation</h1>
-		<p class="text-xs text-muted">
-			Collins &amp; Loftus 1975 — activation spreads from a seed memory to
-			neighbours along semantic edges, decaying by 0.93 per animation frame
-			until it drops below 0.05. Search seeds a focused burst; live mode
-			overlays every spread event fired by the cognitive engine in real time.
-		</p>
-	</header>
+<div class="p-6 max-w-6xl mx-auto space-y-6 enter">
+	<PageHeader
+		icon="activation"
+		title="Spreading Activation"
+		subtitle="Collins & Loftus 1975 — activation spreads from a seed memory to neighbours along semantic edges, decaying 0.93 per frame until it drops below 0.05. Search seeds a focused burst; live mode overlays every engine spread in real time."
+		accent="synapse"
+	>
+		<div
+			class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-synapse/10 border border-synapse/25 text-xs"
+		>
+			<span
+				class="ping-host inline-flex h-2 w-2 rounded-full"
+				style="color: var(--synapse-glow, #8b9dff); background: currentColor;"
+				class:breathe={liveEnabled}
+			></span>
+			<span class="text-dim">{liveEnabled ? 'Live' : 'Paused'}</span>
+			<span class="text-muted">·</span>
+			<AnimatedNumber value={liveBurstsFired} class="text-synapse-glow font-semibold" />
+			<span class="text-muted">bursts</span>
+		</div>
+	</PageHeader>
 
 	<!-- Search -->
-	<div class="space-y-3">
+	<div class="space-y-3" use:reveal={{ delay: 60 }}>
 		<span class="text-xs text-dim font-medium">Seed Memory</span>
 		<div class="flex gap-2">
 			<input
@@ -204,10 +220,12 @@
 					placeholder:text-muted focus:outline-none focus:border-synapse/40 transition backdrop-blur-sm"
 			/>
 			<button
+				use:magnetic
 				onclick={runSearch}
 				disabled={loading}
-				class="px-4 py-2.5 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-xl hover:bg-synapse/30 transition disabled:opacity-50"
+				class="inline-flex items-center gap-1.5 px-4 py-2.5 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-xl hover:bg-synapse/30 transition disabled:opacity-50"
 			>
+				<Icon name="activation" size={15} />
 				{loading ? 'Activating…' : 'Activate'}
 			</button>
 		</div>
@@ -236,8 +254,8 @@
 		{#if loading}
 			<div class="flex items-center justify-center h-[560px] text-dim">
 				<div class="text-center">
-					<div class="text-2xl animate-pulse mb-2">◎</div>
-					<p class="text-sm">Computing activation...</p>
+					<div class="mx-auto w-fit text-synapse-glow mb-2 breathe"><Icon name="activation" size={32} /></div>
+					<p class="text-sm">Computing activation…</p>
 				</div>
 			</div>
 		{:else if errorMessage}
@@ -250,8 +268,8 @@
 			</div>
 		{:else if !focusedSource && searched}
 			<div class="flex items-center justify-center h-[560px] text-dim">
-				<div class="text-center max-w-md px-6">
-					<div class="text-3xl opacity-20 mb-3">◬</div>
+				<div class="text-center max-w-md px-6 enter">
+					<div class="mx-auto w-fit text-dim opacity-40 mb-3"><Icon name="search" size={30} /></div>
 					<p class="text-sm text-bright mb-1">No matching memory</p>
 					<p class="text-xs text-muted">
 						Nothing in the graph matches
@@ -263,8 +281,8 @@
 			</div>
 		{:else if !focusedSource}
 			<div class="flex items-center justify-center h-[560px] text-dim">
-				<div class="text-center max-w-md px-6">
-					<div class="text-3xl opacity-20 mb-3">◎</div>
+				<div class="text-center max-w-md px-6 enter">
+					<div class="mx-auto w-fit text-synapse-glow opacity-40 mb-3 breathe"><Icon name="activation" size={32} /></div>
 					<p class="text-sm text-bright mb-1">Waiting for activation</p>
 					<p class="text-xs text-muted">
 						Seed a burst with the search bar above, or enable live mode to
diff --git a/apps/dashboard/src/routes/(app)/contradictions/+page.svelte b/apps/dashboard/src/routes/(app)/contradictions/+page.svelte
index 13ee04e..4415f0e 100644
--- a/apps/dashboard/src/routes/(app)/contradictions/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/contradictions/+page.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
 	import ContradictionArcs, { type Contradiction } from '$components/ContradictionArcs.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import Dropdown, { type DropdownOption } from '$components/Dropdown.svelte';
+	import Icon from '$components/Icon.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
 	import {
 		severityColor,
 		severityLabel,
@@ -297,6 +302,33 @@
 		Array.from(new Set(MOCK_CONTRADICTIONS.map((c) => c.topic))).sort()
 	);
 
+	// --- Clear, labelled dropdown options replace the bare filter buttons +
+	// native <select>. These only drive the *control*, not the filter math:
+	// `filterOptions` writes into the same `filter` state, `topicOptions` into
+	// the same `topicFilter` state. ---
+	const filterOptions: DropdownOption[] = [
+		{ value: 'all', label: 'All contradictions', icon: 'contradictions' },
+		{ value: 'recent', label: 'Recent (last 7 days)', icon: 'timeline' },
+		{ value: 'high-trust', label: 'High trust (>60%)', icon: 'importance' },
+		{ value: 'topic', label: 'By topic', icon: 'filter' },
+	];
+	const topicOptions = $derived<DropdownOption[]>([
+		{ value: '', label: 'All topics' },
+		...uniqueTopics.map((t) => ({
+			value: t,
+			label: t,
+			badge: MOCK_CONTRADICTIONS.filter((c) => c.topic === t).length,
+		})),
+	]);
+
+	// The Dropdown emits string values; keep the filter-reset behaviour the
+	// old buttons had (clearing focus when the lens changes) without altering
+	// what each filter selects.
+	function onFilterChange(v: string) {
+		filter = v as Filter;
+		focusedPairIndex = null;
+	}
+
 	const filtered = $derived.by<Contradiction[]>(() => {
 		switch (filter) {
 			case 'recent':
@@ -361,71 +393,76 @@
 
 <div class="min-h-full p-6 space-y-6">
 	<!-- Header -->
-	<header class="space-y-1">
-		<h1 class="text-2xl text-bright font-semibold tracking-tight">
-			Contradiction Constellation
-		</h1>
-		<p class="text-sm text-dim">Where your memory disagrees with itself</p>
-	</header>
+	<PageHeader
+		icon="contradictions"
+		title="Contradiction Constellation"
+		subtitle="Where your memory disagrees with itself"
+		accent="warning"
+	>
+		<span class="text-dim text-sm tabular-nums inline-flex items-center gap-1.5">
+			<AnimatedNumber value={filtered.length} /> in view
+		</span>
+	</PageHeader>
 
 	<!-- Stats bar -->
 	<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
-		<div class="p-4 glass rounded-xl">
-			<div class="text-2xl text-bright font-bold">{TOTAL_CONTRADICTIONS_DETECTED}</div>
+		<div use:reveal={{ delay: 0, y: 12 }} class="p-4 glass rounded-xl lift">
+			<div class="text-2xl text-bright font-bold tabular-nums">
+				<AnimatedNumber value={TOTAL_CONTRADICTIONS_DETECTED} />
+			</div>
 			<div class="text-xs text-dim mt-1">
 				contradictions across {totalMemoriesInvolved.toLocaleString()} memories
 			</div>
 		</div>
-		<div class="p-4 glass rounded-xl">
-			<div class="text-2xl font-bold" style="color: #f59e0b">
-				{avgTrustDelta.toFixed(2)}
+		<div use:reveal={{ delay: 60, y: 12 }} class="p-4 glass rounded-xl lift">
+			<div class="text-2xl font-bold tabular-nums" style="color: #f59e0b">
+				<AnimatedNumber value={avgTrustDelta} decimals={2} />
 			</div>
 			<div class="text-xs text-dim mt-1">average trust delta</div>
 		</div>
-		<div class="p-4 glass rounded-xl">
-			<div class="text-2xl text-bright font-bold">{filtered.length}</div>
+		<div use:reveal={{ delay: 120, y: 12 }} class="p-4 glass rounded-xl lift">
+			<div class="text-2xl text-bright font-bold tabular-nums">
+				<AnimatedNumber value={filtered.length} />
+			</div>
 			<div class="text-xs text-dim mt-1">visible in current filter</div>
 		</div>
-		<div class="p-4 glass rounded-xl">
-			<div class="text-2xl font-bold" style="color: #ef4444">
-				{filtered.filter((c) => c.similarity > 0.7).length}
+		<div use:reveal={{ delay: 180, y: 12 }} class="p-4 glass rounded-xl lift">
+			<div class="flex items-center gap-2">
+				<span class="ping-host inline-flex">
+					<span class="w-2 h-2 rounded-full" style="background: #ef4444"></span>
+				</span>
+				<div class="text-2xl font-bold tabular-nums" style="color: #ef4444">
+					<AnimatedNumber value={filtered.filter((c) => c.similarity > 0.7).length} />
+				</div>
 			</div>
 			<div class="text-xs text-dim mt-1">strong conflicts</div>
 		</div>
 	</div>
 
 	<!-- Filter bar -->
-	<div class="flex flex-wrap gap-2 items-center">
-		{#each [{ id: 'all', label: 'All' }, { id: 'recent', label: 'Recent (7d)' }, { id: 'high-trust', label: 'High trust (>60%)' }, { id: 'topic', label: 'By topic' }] as f (f.id)}
-			<button
-				onclick={() => {
-					filter = f.id as Filter;
-					focusedPairIndex = null;
-				}}
-				class="px-3 py-1.5 rounded-lg text-xs border transition
-					{filter === f.id
-						? 'bg-synapse/15 border-synapse/40 text-synapse-glow'
-						: 'border-subtle/30 text-dim hover:text-text hover:bg-white/[0.03]'}"
-			>
-				{f.label}
-			</button>
-		{/each}
+	<div class="flex flex-wrap gap-3 items-end enter">
+		<Dropdown
+			options={filterOptions}
+			value={filter}
+			label="Lens"
+			icon="filter"
+			onChange={onFilterChange}
+		/>
 		{#if filter === 'topic'}
-			<select
+			<Dropdown
+				options={topicOptions}
 				bind:value={topicFilter}
-				class="ml-2 px-3 py-1.5 rounded-lg text-xs glass-subtle border border-subtle/30 text-text"
-			>
-				<option value="">All topics</option>
-				{#each uniqueTopics as t}
-					<option value={t}>{t}</option>
-				{/each}
-			</select>
+				label="Topic"
+				icon="contradictions"
+				placeholder="All topics"
+			/>
 		{/if}
 		{#if focusedPairIndex !== null}
 			<button
 				onclick={() => (focusedPairIndex = null)}
-				class="ml-auto px-3 py-1.5 rounded-lg text-xs border border-subtle/30 text-dim hover:text-text"
+				class="ml-auto inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs border border-subtle/30 text-dim hover:text-text hover:border-synapse/30 hover:bg-white/[0.03] transition lift"
 			>
+				<Icon name="close" size={13} />
 				Clear focus
 			</button>
 		{/if}
@@ -433,11 +470,16 @@
 
 	<!-- Main view: constellation + sidebar -->
 	<div class="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-4">
-		<!-- Constellation -->
+		<!-- Constellation. NOTE: no `use:reveal` on this wrapper or the
+		     ContradictionArcs SVG container — a transform/opacity entrance here
+		     would interfere with the constellation's own layout. -->
 		<div class="glass-panel rounded-2xl p-3 min-h-[520px] relative">
 			{#if filtered.length === 0}
-				<div class="flex items-center justify-center h-full text-dim text-sm">
-					No contradictions match this filter.
+				<div class="flex flex-col items-center justify-center h-full gap-3 text-center">
+					<div class="text-dim opacity-50 breathe">
+						<Icon name="contradictions" size={44} strokeWidth={1.2} />
+					</div>
+					<p class="text-dim text-sm">No contradictions match this filter.</p>
 				</div>
 			{:else}
 				<ContradictionArcs
@@ -451,10 +493,10 @@
 		</div>
 
 		<!-- Sidebar: pair list -->
-		<aside class="glass rounded-2xl p-3 space-y-2 max-h-[620px] overflow-y-auto">
+		<aside use:reveal={{ delay: 120, y: 16 }} class="glass rounded-2xl p-3 space-y-2 max-h-[620px] overflow-y-auto">
 			<div class="flex items-center justify-between px-1 pb-2 sticky top-0 bg-deep/60 backdrop-blur-sm z-10">
 				<span class="text-xs text-dim uppercase tracking-wider">Pairs</span>
-				<span class="text-xs text-muted">{visibleList.length}</span>
+				<span class="text-xs text-muted tabular-nums"><AnimatedNumber value={visibleList.length} /></span>
 			</div>
 
 			{#if visibleList.length === 0}
@@ -465,8 +507,9 @@
 				{@const c = entry.c}
 				{@const isFocused = focusedPairIndex === localIndex}
 				<button
+					use:reveal={{ delay: Math.min(localIndex * 35, 350), y: 10 }}
 					onclick={() => sidebarClick(localIndex)}
-					class="w-full text-left p-3 rounded-xl border transition
+					class="w-full text-left p-3 rounded-xl border transition lift
 						{isFocused
 							? 'bg-synapse/10 border-synapse/40 shadow-[0_0_12px_rgba(99,102,241,0.18)]'
 							: 'border-subtle/20 hover:border-synapse/30 hover:bg-white/[0.02]'}"
diff --git a/apps/dashboard/src/routes/(app)/dreams/+page.svelte b/apps/dashboard/src/routes/(app)/dreams/+page.svelte
index 9e5f4d5..d0a8abb 100644
--- a/apps/dashboard/src/routes/(app)/dreams/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/dreams/+page.svelte
@@ -11,6 +11,11 @@
 	import type { DreamResult } from '$types';
 	import DreamStageReplay from '$components/DreamStageReplay.svelte';
 	import DreamInsightCard from '$components/DreamInsightCard.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import Icon from '$components/Icon.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight, magnetic } from '$lib/actions/interactions';
 	import {
 		STAGE_NAMES,
 		clampStage,
@@ -59,49 +64,73 @@
 	<title>Dream Cinema · Vestige</title>
 </svelte:head>
 
-<div class="p-6 max-w-7xl mx-auto space-y-6">
+<div class="p-6 max-w-7xl mx-auto space-y-6 enter">
 	<!-- Header -->
-	<header class="flex items-start justify-between flex-wrap gap-4">
-		<div>
-			<h1 class="text-2xl text-bright font-semibold tracking-tight flex items-center gap-3">
-				<span class="header-glyph">✦</span>
-				Dream Cinema
-			</h1>
-			<p class="text-sm text-dim mt-1 max-w-xl leading-snug">
-				Scrub through Vestige's 5-stage consolidation cycle. Replay, cross-reference,
-				strengthen, prune, transfer. Watch episodic become semantic.
-			</p>
-		</div>
-
-		<button
-			type="button"
-			onclick={runDream}
-			disabled={dreaming}
-			class="dream-button"
-			class:is-dreaming={dreaming}
-		>
+	<PageHeader
+		icon="dreams"
+		title="Dream Cinema"
+		subtitle="Scrub through Vestige's 5-stage consolidation cycle. Replay, cross-reference, strengthen, prune, transfer. Watch episodic become semantic."
+		accent="dream"
+	>
+		<div class="flex items-center gap-3">
 			{#if dreaming}
-				<span class="spinner" aria-hidden="true"></span>
-				<span>Dreaming...</span>
-			{:else}
-				<span class="dream-icon" aria-hidden="true">✦</span>
-				<span>Dream Now</span>
+				<span class="live-status">
+					<span class="ping-host live-dot" style="color: var(--color-dream-glow); background: var(--color-dream-glow);"></span>
+					<span>Consolidating</span>
+				</span>
+			{:else if hasDream}
+				<span class="live-status idle">
+					<span class="live-dot breathe" style="background: var(--color-synapse-glow);"></span>
+					<span>Cycle complete</span>
+				</span>
 			{/if}
-		</button>
-	</header>
+
+			<button
+				type="button"
+				onclick={runDream}
+				disabled={dreaming}
+				class="dream-button"
+				class:is-dreaming={dreaming}
+				use:magnetic
+			>
+				{#if dreaming}
+					<span class="spinner" aria-hidden="true"></span>
+					<span>Dreaming...</span>
+				{:else}
+					<span class="dream-icon" aria-hidden="true"><Icon name="sparkle" size={16} /></span>
+					<span>Dream Now</span>
+				{/if}
+			</button>
+		</div>
+	</PageHeader>
 
 	{#if error}
-		<div class="glass-subtle rounded-xl px-4 py-3 text-sm border !border-decay/40 text-decay">
-			{error}
+		<div class="glass-subtle rounded-xl px-4 py-3 text-sm border !border-decay/40 text-decay flex items-center gap-2" use:reveal>
+			<Icon name="contradictions" size={16} />
+			<span>{error}</span>
 		</div>
 	{/if}
 
 	{#if !hasDream && !dreaming}
 		<!-- Empty state -->
-		<div class="empty-state glass-panel rounded-2xl p-12 text-center space-y-3">
-			<div class="empty-glyph">✦</div>
-			<p class="text-bright font-semibold">No dream yet.</p>
-			<p class="text-dim text-sm">Click Dream Now to begin.</p>
+		<div class="empty-state glass-panel rounded-2xl p-12 text-center space-y-4" use:reveal>
+			<div class="empty-glyph" aria-hidden="true">
+				<Icon name="dreams" size={52} draw />
+			</div>
+			<p class="text-bright font-semibold text-lg">Nothing's been dreamt yet.</p>
+			<p class="text-dim text-sm max-w-sm mx-auto leading-relaxed">
+				Run a consolidation cycle and watch your episodic memories replay,
+				cross-reference, and crystallize into lasting semantic knowledge.
+			</p>
+			<button
+				type="button"
+				onclick={runDream}
+				class="dream-button mx-auto"
+				use:magnetic
+			>
+				<span class="dream-icon" aria-hidden="true"><Icon name="sparkle" size={16} /></span>
+				<span>Start the first dream</span>
+			</button>
 		</div>
 	{:else}
 		<!-- Scrubber + stage markers -->
@@ -218,20 +247,6 @@
 </div>
 
 <style>
-	.header-glyph {
-		display: inline-block;
-		color: var(--color-dream-glow);
-		text-shadow:
-			0 0 12px var(--color-dream),
-			0 0 24px color-mix(in srgb, var(--color-dream) 50%, transparent);
-		animation: twinkle 4s ease-in-out infinite;
-	}
-
-	@keyframes twinkle {
-		0%, 100% { opacity: 1; transform: rotate(0deg); }
-		50% { opacity: 0.75; transform: rotate(10deg); }
-	}
-
 	.dream-button {
 		display: inline-flex;
 		align-items: center;
diff --git a/apps/dashboard/src/routes/(app)/duplicates/+page.svelte b/apps/dashboard/src/routes/(app)/duplicates/+page.svelte
index 28860f9..5f16c73 100644
--- a/apps/dashboard/src/routes/(app)/duplicates/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/duplicates/+page.svelte
@@ -9,6 +9,11 @@
 	import { onMount, onDestroy } from 'svelte';
 	import DuplicateCluster from '$components/DuplicateCluster.svelte';
 	import { clusterKey, filterByThreshold } from '$components/duplicates-helpers';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
 
 	interface ClusterMemory {
 		id: string;
@@ -255,15 +260,20 @@
 
 <div class="relative mx-auto max-w-5xl space-y-6 p-6">
 	<!-- Header -->
-	<header class="space-y-2">
-		<h1 class="text-xl font-semibold text-bright">
-			Memory Hygiene — Duplicate Detection
-		</h1>
-		<p class="text-sm text-dim">
-			Cosine-similarity clustering over embeddings. Merges reinforce the winner's FSRS state;
-			losers inherit into the merged node. Dismissed clusters are hidden for this session only.
-		</p>
-	</header>
+	<PageHeader
+		icon="duplicates"
+		title="Memory Hygiene — Duplicate Detection"
+		subtitle="Cosine-similarity clustering over embeddings. Merges reinforce the winner's FSRS state; losers inherit into the merged node. Dismissed clusters are hidden for this session only."
+		accent="synapse"
+	>
+		<span
+			class="ping-host flex h-2 w-2 items-center justify-center text-synapse-glow"
+			aria-hidden="true"
+		>
+			<span class="breathe h-2 w-2 rounded-full bg-synapse-glow"></span>
+		</span>
+		<span class="text-xs text-dim">Live</span>
+	</PageHeader>
 
 	<!-- Controls panel -->
 	<div class="glass-panel flex flex-wrap items-center gap-5 rounded-2xl p-4">
@@ -292,17 +302,19 @@
 			aria-live="polite"
 		>
 			{#if loading}
-				<span class="h-2 w-2 animate-pulse rounded-full bg-synapse-glow"></span>
+				<span class="breathe h-2 w-2 rounded-full bg-synapse-glow text-synapse-glow"></span>
 				<span>Detecting…</span>
 			{:else if error}
 				<span class="h-2 w-2 rounded-full bg-decay"></span>
 				<span class="text-decay">Error</span>
 			{:else}
-				<span class="h-2 w-2 rounded-full bg-synapse-glow"></span>
-				<span>
-					{visibleClusters.length}
+				<span class="breathe h-2 w-2 rounded-full bg-synapse-glow text-synapse-glow"></span>
+				<span class="tabular-nums">
+					<AnimatedNumber value={visibleClusters.length} />
 					{visibleClusters.length === 1 ? 'cluster' : 'clusters'},
-					{totalDuplicates} potential duplicate{totalDuplicates === 1 ? '' : 's'}
+					<AnimatedNumber value={totalDuplicates} /> potential duplicate{totalDuplicates === 1
+						? ''
+						: 's'}
 				</span>
 			{/if}
 		</div>
@@ -335,18 +347,25 @@
 	{:else if loading}
 		<div class="space-y-3">
 			{#each Array(3) as _}
-				<div class="glass-subtle h-40 animate-pulse rounded-2xl"></div>
+				<div class="glass-subtle shimmer h-40 rounded-2xl"></div>
 			{/each}
 		</div>
 	{:else if visibleClusters.length === 0}
 		<div
-			class="glass-panel flex flex-col items-center gap-2 rounded-2xl p-12 text-center"
+			class="glass-panel enter flex flex-col items-center gap-3 rounded-2xl p-12 text-center"
 		>
-			<div class="text-3xl">·</div>
-			<div class="text-sm font-medium text-bright">
-				No duplicates found above threshold.
+			<div
+				class="flex h-14 w-14 items-center justify-center rounded-2xl border border-recall/25 bg-recall/10 text-recall"
+			>
+				<Icon name="sparkle" size={26} draw />
+			</div>
+			<div class="text-sm font-medium text-bright">
+				No duplicates found — your memory is clean.
+			</div>
+			<div class="max-w-sm text-xs text-muted">
+				Nothing clusters above {(threshold * 100).toFixed(0)}% similarity. Lower the threshold to
+				surface looser matches.
 			</div>
-			<div class="text-xs text-muted">Memory is clean.</div>
 		</div>
 	{:else}
 		<div class="space-y-4">
@@ -358,30 +377,23 @@
 					threshold to narrow results.
 				</div>
 			{/if}
-			{#each renderedClusters as { c, key } (key)}
-				<div class="animate-[fadeSlide_0.35s_ease-out_both]">
-					<DuplicateCluster
-						similarity={c.similarity}
-						memories={c.memories}
-						suggestedAction={c.suggestedAction}
-						onDismiss={() => dismissCluster(key)}
-						onMerge={(winnerId, loserIds) => mergeCluster(key, winnerId, loserIds)}
-					/>
+			{#each renderedClusters as { c, key }, i (key)}
+				<div
+					class="spotlight-surface lift rounded-2xl"
+					use:reveal={{ delay: Math.min(i * 40, 400), y: 14 }}
+					use:spotlight
+				>
+					<div class="relative z-[1]">
+						<DuplicateCluster
+							similarity={c.similarity}
+							memories={c.memories}
+							suggestedAction={c.suggestedAction}
+							onDismiss={() => dismissCluster(key)}
+							onMerge={(winnerId, loserIds) => mergeCluster(key, winnerId, loserIds)}
+						/>
+					</div>
 				</div>
 			{/each}
 		</div>
 	{/if}
-</div>
-
-<style>
-	@keyframes fadeSlide {
-		from {
-			opacity: 0;
-			transform: translateY(8px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-</style>
+</div>
\ No newline at end of file
diff --git a/apps/dashboard/src/routes/(app)/explore/+page.svelte b/apps/dashboard/src/routes/(app)/explore/+page.svelte
index d05dd97..bffb591 100644
--- a/apps/dashboard/src/routes/(app)/explore/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/explore/+page.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { api } from '$stores/api';
 	import type { Memory } from '$types';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Icon, { type IconName } from '$lib/components/Icon.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
 
 	let searchQuery = $state('');
 	let targetQuery = $state('');
@@ -12,10 +17,10 @@
 	let importanceText = $state('');
 	let importanceResult: Record<string, unknown> | null = $state(null);
 
-	const MODE_INFO: Record<string, { icon: string; desc: string }> = {
-		associations: { icon: '◎', desc: 'Spreading activation — find related memories via graph traversal' },
-		chains: { icon: '⟿', desc: 'Build reasoning path from source to target memory' },
-		bridges: { icon: '⬡', desc: 'Find connecting memories between two concepts' },
+	const MODE_INFO: Record<string, { icon: IconName; desc: string }> = {
+		associations: { icon: 'activation', desc: 'Spreading activation — find related memories via graph traversal' },
+		chains: { icon: 'reasoning', desc: 'Build reasoning path from source to target memory' },
+		bridges: { icon: 'explore', desc: 'Find connecting memories between two concepts' },
 	};
 
 	async function findSource() {
@@ -68,17 +73,22 @@
 </script>
 
 <div class="p-6 max-w-5xl mx-auto space-y-8">
-	<h1 class="text-xl text-bright font-semibold">Explore Connections</h1>
+	<PageHeader
+		icon="explore"
+		title="Explore Connections"
+		subtitle="Traverse the memory graph — spreading activation, reasoning chains, and conceptual bridges."
+		accent="synapse"
+	/>
 
 	<!-- Mode selector -->
 	<div class="grid grid-cols-3 gap-2">
 		{#each (['associations', 'chains', 'bridges'] as const) as m}
 			<button onclick={() => switchMode(m)}
-				class="flex flex-col items-center gap-1 p-3 rounded-xl text-sm transition
+				class="lift flex flex-col items-center gap-1 p-3 rounded-xl text-sm transition
 					{mode === m
 						? 'glass !border-synapse/30 text-synapse-glow'
 						: 'glass-subtle text-dim hover:bg-white/[0.03]'}">
-				<span class="text-xl">{MODE_INFO[m].icon}</span>
+				<span class="{mode === m ? 'breathe' : ''}"><Icon name={MODE_INFO[m].icon} size={22} /></span>
 				<span class="font-medium">{m.charAt(0).toUpperCase() + m.slice(1)}</span>
 				<span class="text-[10px] text-muted text-center">{MODE_INFO[m].desc}</span>
 			</button>
@@ -144,29 +154,51 @@
 	<!-- Results -->
 	{#if sourceMemory}
 		{#if loading}
-			<div class="text-center py-8 text-dim">
-				<div class="text-lg animate-pulse mb-2">◎</div>
-				<p>Exploring {mode}...</p>
+			<div class="space-y-3" aria-busy="true">
+				<div class="flex items-center gap-2.5 text-dim">
+					<Icon name="activation" size={18} class="breathe text-synapse-glow" />
+					<span class="text-sm">Exploring {mode}…</span>
+				</div>
+				<div class="space-y-2">
+					{#each Array(4) as _, i}
+						<div class="shimmer p-3 glass-subtle rounded-xl flex items-start gap-3">
+							<div class="shimmer w-6 h-6 rounded-full bg-white/[0.05] flex-shrink-0 mt-0.5"></div>
+							<div class="flex-1 min-w-0 space-y-2">
+								<div class="shimmer h-3.5 rounded bg-white/[0.05]" style="width: {88 - i * 9}%"></div>
+								<div class="shimmer h-3 rounded bg-white/[0.04]" style="width: {52 - i * 6}%"></div>
+							</div>
+						</div>
+					{/each}
+				</div>
 			</div>
 		{:else if associations.length > 0}
 			<div class="space-y-4">
 				<div class="flex items-center justify-between">
-					<h2 class="text-sm text-bright font-semibold">{associations.length} Connections Found</h2>
+					<h2 class="text-sm text-bright font-semibold flex items-baseline gap-1.5">
+						<AnimatedNumber value={associations.length} class="text-aurora font-bold" />
+						<span>Connections Found</span>
+					</h2>
 				</div>
 				<div class="space-y-2">
-					{#each associations as assoc, i}
-						<div class="p-3 glass-subtle rounded-xl flex items-start gap-3 hover:bg-white/[0.03] transition">
-							<div class="w-6 h-6 rounded-full bg-synapse/15 text-synapse-glow text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
-								{i + 1}
-							</div>
-							<div class="flex-1 min-w-0">
-								<p class="text-sm text-text line-clamp-2">{assoc.content}</p>
-								<div class="flex flex-wrap gap-3 mt-1.5 text-xs text-muted">
-									{#if assoc.nodeType}<span class="px-1.5 py-0.5 bg-white/[0.04] rounded">{assoc.nodeType}</span>{/if}
-									{#if assoc.score}<span>Score: {Number(assoc.score).toFixed(3)}</span>{/if}
-									{#if assoc.similarity}<span>Similarity: {Number(assoc.similarity).toFixed(3)}</span>{/if}
-									{#if assoc.retention}<span>{(Number(assoc.retention) * 100).toFixed(0)}% retention</span>{/if}
-									{#if assoc.connectionType}<span class="text-synapse-glow">{assoc.connectionType}</span>{/if}
+					{#each associations as assoc, i (i)}
+						<div
+							use:reveal={{ delay: Math.min(i * 35, 350), y: 12 }}
+							use:spotlight
+							class="spotlight-surface lift p-3 glass-subtle rounded-xl hover:bg-white/[0.03] transition"
+						>
+							<div class="relative z-[1] flex items-start gap-3">
+								<div class="w-6 h-6 rounded-full bg-synapse/15 text-synapse-glow text-xs flex items-center justify-center flex-shrink-0 mt-0.5 tabular-nums">
+									{i + 1}
+								</div>
+								<div class="flex-1 min-w-0">
+									<p class="text-sm text-text line-clamp-2">{assoc.content}</p>
+									<div class="flex flex-wrap gap-3 mt-1.5 text-xs text-muted">
+										{#if assoc.nodeType}<span class="px-1.5 py-0.5 bg-white/[0.04] rounded">{assoc.nodeType}</span>{/if}
+										{#if assoc.score}<span class="tabular-nums">Score: {Number(assoc.score).toFixed(3)}</span>{/if}
+										{#if assoc.similarity}<span class="tabular-nums">Similarity: {Number(assoc.similarity).toFixed(3)}</span>{/if}
+										{#if assoc.retention}<span class="tabular-nums">{(Number(assoc.retention) * 100).toFixed(0)}% retention</span>{/if}
+										{#if assoc.connectionType}<span class="text-synapse-glow">{assoc.connectionType}</span>{/if}
+									</div>
 								</div>
 							</div>
 						</div>
@@ -174,16 +206,26 @@
 				</div>
 			</div>
 		{:else}
-			<div class="text-center py-8 text-dim">
-				<div class="text-3xl mb-3 opacity-20">◬</div>
-				<p>No connections found for this query.</p>
+			<div class="enter text-center py-12 px-6 glass-subtle rounded-2xl">
+				<Icon name="explore" size={40} class="breathe text-synapse-glow mx-auto mb-4 opacity-80" />
+				<p class="text-sm text-bright font-medium">No connections surfaced yet</p>
+				<p class="text-xs text-muted mt-1.5 max-w-sm mx-auto">
+					{#if mode === 'associations'}
+						This memory hasn't formed strong links here. Try a broader source query — the graph rewards more general seeds.
+					{:else}
+						No {mode} found between these two memories. Pick a different source or target and the path may light up.
+					{/if}
+				</p>
 			</div>
 		{/if}
 	{/if}
 
 	<!-- Importance Scorer -->
 	<div class="pt-8 border-t border-synapse/10">
-		<h2 class="text-lg text-bright font-semibold mb-4">Importance Scorer</h2>
+		<h2 class="text-lg text-bright font-semibold mb-4 flex items-center gap-2">
+			<Icon name="importance" size={20} class="text-recall" />
+			Importance Scorer
+		</h2>
 		<p class="text-xs text-muted mb-3">4-channel neuroscience scoring: novelty, arousal, reward, attention</p>
 		<textarea
 			bind:value={importanceText}
@@ -199,9 +241,9 @@
 		{#if importanceResult}
 			{@const channels = importanceResult.channels as Record<string, number> | undefined}
 			{@const composite = Number(importanceResult.composite || importanceResult.compositeScore || 0)}
-			<div class="mt-4 p-4 glass rounded-xl">
+			<div class="enter mt-4 p-4 glass rounded-xl">
 				<div class="flex items-center gap-3 mb-4">
-					<span class="text-3xl text-bright font-bold">{composite.toFixed(2)}</span>
+					<AnimatedNumber value={composite} decimals={2} class="text-3xl text-aurora font-bold" />
 					<span class="px-2 py-1 rounded-lg text-xs {composite > 0.6
 						? 'bg-recall/20 text-recall border border-recall/30'
 						: 'bg-white/[0.04] text-dim border border-subtle/20'}">
diff --git a/apps/dashboard/src/routes/(app)/feed/+page.svelte b/apps/dashboard/src/routes/(app)/feed/+page.svelte
index 67e3f61..c2b9c33 100644
--- a/apps/dashboard/src/routes/(app)/feed/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/feed/+page.svelte
@@ -1,32 +1,38 @@
 <script lang="ts">
-	import { eventFeed, websocket } from '$stores/websocket';
+	import { eventFeed, websocket, isConnected, isReconnecting } from '$stores/websocket';
 	import { EVENT_TYPE_COLORS, type VestigeEvent } from '$types';
 	import PipelineVisualizer from '$components/PipelineVisualizer.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import Icon, { type IconName } from '$components/Icon.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
 
 	function formatTime(ts: string): string {
 		return new Date(ts).toLocaleTimeString();
 	}
 
-	function eventIcon(type: string): string {
-		const icons: Record<string, string> = {
-			MemoryCreated: '+',
-			MemoryUpdated: '~',
-			MemoryDeleted: '×',
-			MemoryPromoted: '↑',
-			MemoryDemoted: '↓',
-			SearchPerformed: '◎',
-			DreamStarted: '◈',
-			DreamProgress: '◈',
-			DreamCompleted: '◈',
-			ConsolidationStarted: '◉',
-			ConsolidationCompleted: '◉',
-			RetentionDecayed: '↘',
-			ConnectionDiscovered: '━',
-			ActivationSpread: '◬',
-			ImportanceScored: '◫',
-			Heartbeat: '♡',
+	// Map each cognitive event type to a drawn route-icon so the feed speaks the
+	// same visual language as the rest of the dashboard (no more Unicode glyphs).
+	function eventIcon(type: string): IconName {
+		const icons: Record<string, IconName> = {
+			MemoryCreated: 'memories',
+			MemoryUpdated: 'memories',
+			MemoryDeleted: 'close',
+			MemoryPromoted: 'importance',
+			MemoryDemoted: 'importance',
+			SearchPerformed: 'search',
+			DreamStarted: 'dreams',
+			DreamProgress: 'dreams',
+			DreamCompleted: 'dreams',
+			ConsolidationStarted: 'activation',
+			ConsolidationCompleted: 'activation',
+			RetentionDecayed: 'timeline',
+			ConnectionDiscovered: 'graph',
+			ActivationSpread: 'activation',
+			ImportanceScored: 'importance',
+			Heartbeat: 'pulse',
 		};
-		return icons[type] || '·';
+		return icons[type] || 'sparkle';
 	}
 
 	function eventSummary(event: VestigeEvent): string {
@@ -45,44 +51,84 @@
 			default: return JSON.stringify(d).slice(0, 100);
 		}
 	}
+
+	// Connection state drives the live pill — connected pings, reconnecting
+	// breathes amber, offline goes quiet. Computed once, reused in the header.
+	let pill = $derived(
+		$isConnected
+			? { color: 'var(--color-recall)', label: 'Live', live: true }
+			: $isReconnecting
+				? { color: 'var(--color-importance, #f59e0b)', label: 'Reconnecting', live: false }
+				: { color: 'var(--color-decay, #8B95A5)', label: 'Offline', live: false }
+	);
 </script>
 
-<div class="p-6 max-w-4xl mx-auto space-y-6">
-	<div class="flex items-center justify-between">
-		<h1 class="text-xl text-bright font-semibold">Live Feed</h1>
-		<div class="flex gap-3">
-			<span class="text-dim text-sm">{$eventFeed.length} events</span>
-			<button onclick={() => websocket.clearEvents()}
-				class="text-xs text-muted hover:text-text transition">Clear</button>
-		</div>
-	</div>
+<div class="p-6 max-w-4xl mx-auto space-y-6 enter">
+	<PageHeader
+		icon="feed"
+		title="Live Feed"
+		subtitle="Every thought as it happens — memories born, searches fired, dreams consolidating, connections discovered. Vestige, thinking out loud."
+		accent="synapse"
+	>
+		<span class="live-status" class:idle={!pill.live}>
+			<span
+				class="live-dot w-2 h-2 rounded-full"
+				class:ping-host={pill.live}
+				class:breathe={!pill.live}
+				style="color:{pill.color};background:{pill.color}"
+			></span>
+			<span>{pill.label}</span>
+		</span>
+
+		<span class="count-chip">
+			<AnimatedNumber value={$eventFeed.length} class="text-bright font-semibold" />
+			<span class="text-dim">events</span>
+		</span>
+
+		<button
+			onclick={() => websocket.clearEvents()}
+			class="clear-btn"
+			disabled={$eventFeed.length === 0}
+		>
+			<Icon name="close" size={13} />
+			<span>Clear</span>
+		</button>
+	</PageHeader>
 
 	{#if $eventFeed.length === 0}
-		<div class="text-center py-20 text-dim">
-			<div class="text-4xl mb-4">◉</div>
-			<p>Waiting for cognitive events...</p>
-			<p class="text-sm text-muted mt-2">Events appear here in real-time as Vestige thinks.</p>
+		<div class="empty-state glass-panel rounded-2xl p-12 text-center space-y-4" use:reveal>
+			<div class="empty-glyph" aria-hidden="true">
+				<Icon name="feed" size={52} draw />
+			</div>
+			<p class="text-bright font-semibold text-lg">Quiet for now.</p>
+			<p class="text-dim text-sm max-w-sm mx-auto leading-relaxed">
+				New memory activity will stream in here the moment it happens — the feed
+				wakes up the instant Vestige does.
+			</p>
 		</div>
 	{:else}
 		<div class="space-y-2">
 			{#each $eventFeed as event, i (i)}
+				{@const color = EVENT_TYPE_COLORS[event.type] || '#8B95A5'}
 				<div
-					class="flex items-start gap-3 p-3 glass-subtle rounded-xl
-						hover:bg-white/[0.03] transition-all duration-200"
-					style="border-left: 3px solid {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}"
+					use:reveal={{ delay: Math.min(i * 30, 300), y: 10 }}
+					class="event-row lift flex items-start gap-3 p-3 glass-subtle rounded-xl"
+					style="border-left: 3px solid {color}; --evt: {color};"
 				>
-					<div class="w-6 h-6 rounded flex items-center justify-center text-xs flex-shrink-0"
-						style="background: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}15; color: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}">
-						{eventIcon(event.type)}
+					<div
+						class="event-icon flex items-center justify-center flex-shrink-0"
+						style="background: {color}1a; color: {color}"
+					>
+						<Icon name={eventIcon(event.type)} size={15} />
 					</div>
 					<div class="flex-1 min-w-0">
 						<div class="flex items-center gap-2 mb-0.5">
-							<span class="text-xs font-medium" style="color: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}">{event.type}</span>
+							<span class="text-xs font-semibold tracking-wide" style="color: {color}">{event.type}</span>
 							{#if event.data.timestamp}
-								<span class="text-xs text-muted">{formatTime(String(event.data.timestamp))}</span>
+								<span class="text-xs text-muted tabular-nums">{formatTime(String(event.data.timestamp))}</span>
 							{/if}
 						</div>
-						<p class="text-sm text-dim">{eventSummary(event)}</p>
+						<p class="text-sm text-dim leading-relaxed">{eventSummary(event)}</p>
 						{#if event.type === 'SearchPerformed'}
 							<div class="mt-2">
 								<PipelineVisualizer
@@ -98,3 +144,95 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	/* ── Live connection pill in the header right-slot ──────────────────────── */
+	.live-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3rem 0.7rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--color-recall, #34d399);
+		background: color-mix(in srgb, var(--color-recall, #34d399) 12%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-recall, #34d399) 28%, transparent);
+		white-space: nowrap;
+	}
+	.live-status.idle {
+		color: var(--color-dim, #8b95a5);
+		background: rgba(255, 255, 255, 0.04);
+		border-color: rgba(255, 255, 255, 0.08);
+	}
+	.live-dot {
+		display: inline-block;
+		flex-shrink: 0;
+	}
+
+	/* ── Event-count chip ───────────────────────────────────────────────────── */
+	.count-chip {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.35rem;
+		padding: 0.3rem 0.7rem;
+		border-radius: 999px;
+		font-size: 0.78rem;
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.07);
+	}
+
+	/* ── Clear button ───────────────────────────────────────────────────────── */
+	.clear-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.3rem 0.65rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		color: var(--color-muted, #6b7280);
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+	}
+	.clear-btn:hover:not(:disabled) {
+		color: var(--color-text, #e5e7eb);
+		background: rgba(255, 255, 255, 0.05);
+		border-color: rgba(255, 255, 255, 0.12);
+	}
+	.clear-btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	/* ── Event rows ─────────────────────────────────────────────────────────── */
+	.event-row {
+		position: relative;
+		transition:
+			transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
+			box-shadow 0.28s ease,
+			background 0.2s ease;
+	}
+	.event-row:hover {
+		background: color-mix(in srgb, var(--evt) 7%, transparent);
+	}
+	.event-icon {
+		width: 1.6rem;
+		height: 1.6rem;
+		border-radius: 0.5rem;
+	}
+
+	/* ── Empty state (warm, not a frozen spinner) ───────────────────────────── */
+	.empty-glyph {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-synapse-glow, #818cf8);
+		opacity: 0.85;
+	}
+	@media not (prefers-reduced-motion: reduce) {
+		.empty-glyph {
+			animation: breathe 3.2s ease-in-out infinite;
+		}
+	}
+</style>
diff --git a/apps/dashboard/src/routes/(app)/graph/+page.svelte b/apps/dashboard/src/routes/(app)/graph/+page.svelte
index 57c8d8f..04f61fb 100644
--- a/apps/dashboard/src/routes/(app)/graph/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/graph/+page.svelte
@@ -5,7 +5,14 @@
 	import RetentionCurve from '$components/RetentionCurve.svelte';
 	import TimeSlider from '$components/TimeSlider.svelte';
 	import MemoryStateLegend from '$components/MemoryStateLegend.svelte';
+	// ⚠ MEMORY CINEMA — DO NOT MODIFY. This is the flawless, protected
+	//   AI-narrated flythrough experience. The graph-control overhaul below
+	//   (icons, dropdown, alive empty states) is a SEPARATE concern and must
+	//   never touch the Cinema import, element, or its props.
 	import MemoryCinema from '$components/MemoryCinema.svelte';
+	// Graph-control overhaul (2026 alive UI): unique icons + dropdown.
+	import Icon from '$components/Icon.svelte';
+	import Dropdown, { type DropdownOption } from '$components/Dropdown.svelte';
 	import { api } from '$stores/api';
 	import { eventFeed } from '$stores/websocket';
 	import { graphState } from '$stores/graph-state.svelte';
@@ -21,6 +28,19 @@
 	let isDreaming = $state(false);
 	let searchQuery = $state('');
 	let maxNodes = $state(150);
+	// Node-count choices for the clear Dropdown control (replaces a native
+	// <select>). Bound as a string; coerced back to a number on change.
+	const nodeCountOptions: DropdownOption[] = [
+		{ value: '50', label: '50 nodes' },
+		{ value: '100', label: '100 nodes' },
+		{ value: '150', label: '150 nodes' },
+		{ value: '200', label: '200 nodes' },
+	];
+	let maxNodesChoice = $state('150');
+	function onMaxNodesChange(v: string) {
+		maxNodes = parseInt(v, 10);
+		loadGraph();
+	}
 	let temporalEnabled = $state(false);
 	let temporalDate = $state(new Date());
 	// Colour spheres by node type, FSRS memory state, or AhaGraph learning tags.
@@ -204,14 +224,14 @@
 		<div class="h-full flex items-center justify-center">
 			<div class="text-center space-y-4">
 				<div class="w-16 h-16 mx-auto rounded-full border-2 border-synapse/30 border-t-synapse animate-spin"></div>
-				<p class="text-dim text-sm">Loading memory graph...</p>
+				<p class="text-dim text-sm">Weaving your memory graph…</p>
 			</div>
 		</div>
 	{:else if error === 'OFFLINE'}
 		<div class="h-full flex items-center justify-center">
-			<div class="text-center space-y-5 max-w-lg px-8">
-				<div class="text-5xl opacity-40">⚡</div>
-				<h2 class="text-xl text-bright">MCP Backend Offline</h2>
+			<div class="text-center space-y-5 max-w-lg px-8 enter">
+				<div class="mx-auto w-fit text-warning opacity-70 breathe"><Icon name="activation" size={52} strokeWidth={1.2} /></div>
+				<h2 class="text-xl text-bright text-aurora">MCP Backend Offline</h2>
 				<p class="text-dim text-sm leading-relaxed">
 					The Vestige MCP server isn't reachable on <code class="font-mono text-muted">:3927</code>.
 					The dashboard is running but has nothing to query.
@@ -235,17 +255,17 @@ disown</code>
 		</div>
 	{:else if error === 'EMPTY'}
 		<div class="h-full flex items-center justify-center">
-			<div class="text-center space-y-4 max-w-md px-8">
-				<div class="text-5xl opacity-30">◎</div>
-				<h2 class="text-xl text-bright">Your Mind Awaits</h2>
-				<p class="text-dim text-sm">No memories yet. Start using Vestige to populate your graph.</p>
+			<div class="text-center space-y-4 max-w-md px-8 enter">
+				<div class="mx-auto w-fit text-synapse-glow opacity-50 breathe"><Icon name="graph" size={52} strokeWidth={1.2} /></div>
+				<h2 class="text-xl text-bright text-aurora">Your Mind Awaits</h2>
+				<p class="text-dim text-sm">No memories yet — the moment Vestige starts remembering, your constellation will bloom here.</p>
 			</div>
 		</div>
 	{:else if error}
 		<div class="h-full flex items-center justify-center">
-			<div class="text-center space-y-4 max-w-md px-8">
-				<div class="text-5xl opacity-30">◎</div>
-				<h2 class="text-xl text-bright">Your Mind Awaits</h2>
+			<div class="text-center space-y-4 max-w-md px-8 enter">
+				<div class="mx-auto w-fit text-synapse-glow opacity-50 breathe"><Icon name="graph" size={52} strokeWidth={1.2} /></div>
+				<h2 class="text-xl text-bright text-aurora">Your Mind Awaits</h2>
 				<p class="text-dim text-sm">{error}</p>
 			</div>
 		</div>
@@ -321,14 +341,14 @@ disown</code>
 				</button>
 			</div>
 
-			<!-- Node count -->
-			<select bind:value={maxNodes} onchange={() => loadGraph()}
-				class="shrink-0 min-h-10 px-2 py-2 glass rounded-xl text-dim text-xs">
-				<option value={50}>50 nodes</option>
-				<option value={100}>100 nodes</option>
-				<option value={150}>150 nodes</option>
-				<option value={200}>200 nodes</option>
-			</select>
+			<!-- Node count — clear animated Dropdown (replaces native <select>) -->
+			<Dropdown
+				options={nodeCountOptions}
+				bind:value={maxNodesChoice}
+				icon="graph"
+				class="shrink-0"
+				onChange={onMaxNodesChange}
+			/>
 
 			<!-- Brightness slider (persists in localStorage). Scales node emissive,
 				 glow, and distance-compensated fog falloff. Default 1.0, range 0.5-2.5. -->
@@ -355,14 +375,19 @@ disown</code>
 			<button
 				onclick={triggerDream}
 				disabled={isDreaming}
-				class="shrink-0 min-h-10 px-4 py-2 rounded-xl bg-dream/20 border border-dream/40 text-dream-glow text-sm
+				class="shrink-0 inline-flex items-center gap-2 min-h-10 px-4 py-2 rounded-xl bg-dream/20 border border-dream/40 text-dream-glow text-sm
 					hover:bg-dream/30 transition-all backdrop-blur-sm disabled:opacity-50
 					{isDreaming ? 'glow-dream animate-pulse-glow' : ''}"
 			>
-				{isDreaming ? '◈ Dreaming...' : '◈ Dream'}
+				<span class={isDreaming ? 'breathe' : ''}><Icon name="dreams" size={16} /></span>
+				{isDreaming ? 'Dreaming…' : 'Dream'}
 			</button>
 
-			<!-- Memory Cinema — AI-narrated flythrough of the real graph -->
+			<!-- ═══════════════════════════════════════════════════════════
+			     MEMORY CINEMA — PROTECTED · DO NOT MODIFY
+			     The AI-narrated flythrough. Its trigger + props are flawless
+			     and intentionally untouched by the graph-control overhaul.
+			     ═══════════════════════════════════════════════════════════ -->
 			{#if displayNodes.length > 0}
 				<MemoryCinema
 					nodes={displayNodes}
@@ -370,11 +395,15 @@ disown</code>
 					centerId={graphData?.center_id ?? ''}
 				/>
 			{/if}
+			<!-- ═══════════ END PROTECTED MEMORY CINEMA ═══════════ -->
 
 			<!-- Reload -->
 			<button onclick={() => loadGraph()}
-				class="shrink-0 min-h-10 min-w-10 px-3 py-2 glass rounded-xl text-dim text-sm hover:text-text transition">
-				↻
+				class="shrink-0 min-h-10 min-w-10 inline-flex items-center justify-center px-3 py-2 glass rounded-xl text-dim hover:text-text hover:rotate-180 transition-all duration-500"
+				title="Reload graph"
+				aria-label="Reload graph"
+			>
+				<Icon name="pulse" size={16} />
 			</button>
 		</div>
 	</div>
@@ -501,9 +530,9 @@ disown</code>
 				<!-- Explore from this node -->
 				<a
 					href="{base}/explore"
-					class="block text-center px-3 py-2 rounded-xl bg-dream/10 text-dream-glow text-xs hover:bg-dream/20 transition border border-dream/20"
+					class="flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-dream/10 text-dream-glow text-xs hover:bg-dream/20 transition border border-dream/20"
 				>
-					◬ Explore Connections
+					<Icon name="explore" size={14} /> Explore Connections
 				</a>
 			</div>
 		</div>
diff --git a/apps/dashboard/src/routes/(app)/importance/+page.svelte b/apps/dashboard/src/routes/(app)/importance/+page.svelte
index f157300..50451ec 100644
--- a/apps/dashboard/src/routes/(app)/importance/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/importance/+page.svelte
@@ -6,6 +6,11 @@
 	import type { ImportanceScore, Memory } from '$types';
 	import { NODE_TYPE_COLORS } from '$types';
 	import ImportanceRadar from '$components/ImportanceRadar.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import Icon from '$components/Icon.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
 
 	// ── Section 1: Test Importance ───────────────────────────────────────────
 	let content = $state('');
@@ -145,17 +150,15 @@
 </script>
 
 <div class="p-6 max-w-5xl mx-auto space-y-8">
-	<div class="flex items-center justify-between">
-		<div>
-			<h1 class="text-xl text-bright font-semibold">Importance Radar</h1>
-			<p class="text-sm text-dim mt-1">
-				4-channel importance model: Novelty · Arousal · Reward · Attention
-			</p>
-		</div>
-	</div>
+	<PageHeader
+		icon="importance"
+		title="Importance Radar"
+		subtitle="4-channel importance model: Novelty · Arousal · Reward · Attention"
+		accent="warning"
+	/>
 
 	<!-- ── Section 1: Test Importance ─────────────────────────────────────── -->
-	<section class="glass-panel rounded-2xl p-6 space-y-5">
+	<section use:reveal class="glass-panel rounded-2xl p-6 space-y-5">
 		<div>
 			<h2 class="text-sm font-semibold text-bright uppercase tracking-wider">Test Importance</h2>
 			<p class="text-xs text-muted mt-1">
@@ -191,12 +194,15 @@
 			</div>
 
 			<!-- Radar + composite readout -->
-			<div class="flex flex-col items-center gap-4 md:min-w-[340px]">
+			<div
+				use:spotlight
+				class="spotlight-surface flex flex-col items-center gap-4 md:min-w-[340px] rounded-2xl"
+			>
 				{#if score}
-					<div class="text-center">
+					<div class="relative z-[1] text-center enter">
 						<div class="text-[10px] uppercase tracking-widest text-muted">Composite</div>
-						<div class="text-5xl font-semibold text-bright leading-none mt-1">
-							{(score.composite * 100).toFixed(0)}<span class="text-xl text-dim">%</span>
+						<div class="text-5xl font-semibold text-aurora leading-none mt-1 tabular-nums">
+							<AnimatedNumber value={score.composite} scale={100} decimals={0} suffix="%" />
 						</div>
 					</div>
 					{#key radarKey}
@@ -211,8 +217,11 @@
 
 					<!-- Recommendation -->
 					{#if score.composite > 0.6}
-						<div class="w-full text-center space-y-1">
-							<div class="text-lg font-semibold text-recall">✓ Save</div>
+						<div class="relative z-[1] w-full text-center space-y-1 enter">
+							<div class="flex items-center justify-center gap-1.5 text-lg font-semibold text-recall">
+								<Icon name="sparkle" size={18} />
+								<span>Save</span>
+							</div>
 							<p class="text-xs text-dim leading-relaxed">
 								Composite {(score.composite * 100).toFixed(0)}% &gt; 60% threshold.
 								{#if topChannel}
@@ -221,8 +230,11 @@
 							</p>
 						</div>
 					{:else}
-						<div class="w-full text-center space-y-1">
-							<div class="text-lg font-semibold text-decay">⨯ Skip</div>
+						<div class="relative z-[1] w-full text-center space-y-1 enter">
+							<div class="flex items-center justify-center gap-1.5 text-lg font-semibold text-decay">
+								<Icon name="close" size={18} />
+								<span>Skip</span>
+							</div>
 							<p class="text-xs text-dim leading-relaxed">
 								Composite {(score.composite * 100).toFixed(0)}% &lt; 60% threshold.
 								{#if weakestChannel}
@@ -232,8 +244,10 @@
 						</div>
 					{/if}
 				{:else}
-					<div class="flex flex-col items-center justify-center min-h-[320px] w-full text-center px-4">
-						<div class="text-3xl text-muted mb-3">◫</div>
+					<div class="relative z-[1] flex flex-col items-center justify-center min-h-[320px] w-full text-center px-4">
+						<div class="text-warning/70 mb-3 breathe">
+							<Icon name="importance" size={36} />
+						</div>
 						<p class="text-sm text-dim">Type some content above to score its importance.</p>
 						<p class="text-xs text-muted mt-2 max-w-xs">
 							Composite = 0.25·novelty + 0.30·arousal + 0.25·reward + 0.20·attention.
@@ -246,7 +260,7 @@
 	</section>
 
 	<!-- ── Section 2: Top Important Memories This Week ────────────────────── -->
-	<section class="space-y-4">
+	<section use:reveal class="space-y-4">
 		<div class="flex items-end justify-between">
 			<div>
 				<h2 class="text-sm font-semibold text-bright uppercase tracking-wider">
@@ -267,21 +281,29 @@
 		{#if loadingMemories}
 			<div class="grid gap-3 md:grid-cols-2">
 				{#each Array(6) as _}
-					<div class="h-28 glass-subtle rounded-xl animate-pulse"></div>
+					<div class="h-28 glass-subtle rounded-xl shimmer"></div>
 				{/each}
 			</div>
 		{:else if memories.length === 0}
-			<div class="text-center py-12 text-dim">
-				<p class="text-sm">No memories yet.</p>
+			<div class="flex flex-col items-center justify-center text-center py-16 px-6 glass-subtle rounded-2xl enter">
+				<div class="text-warning/60 mb-3 breathe">
+					<Icon name="importance" size={40} />
+				</div>
+				<p class="text-sm text-bright font-medium">No standout memories yet</p>
+				<p class="text-xs text-muted mt-1.5 max-w-sm">
+					As you capture decisions, wins, and discoveries, the most important ones
+					will rise to the top here — ranked by retention, reviews, and recency.
+				</p>
 			</div>
 		{:else}
 			<div class="grid gap-3 md:grid-cols-2">
-				{#each memories as memory (memory.id)}
+				{#each memories as memory, i (memory.id)}
 					{@const ch = perMemoryScores[memory.id]}
 					<button
 						type="button"
+						use:reveal={{ delay: i * 45 }}
 						onclick={() => openMemory(memory.id)}
-						class="text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04] hover:border-synapse/30
+						class="lift text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04] hover:border-synapse/30
 							transition-all duration-200 flex items-start gap-4"
 					>
 						<div class="flex-1 min-w-0 space-y-2">
diff --git a/apps/dashboard/src/routes/(app)/intentions/+page.svelte b/apps/dashboard/src/routes/(app)/intentions/+page.svelte
index ca078fb..8fa0a06 100644
--- a/apps/dashboard/src/routes/(app)/intentions/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/intentions/+page.svelte
@@ -2,6 +2,12 @@
 	import { onMount } from 'svelte';
 	import { api } from '$stores/api';
 	import type { IntentionItem } from '$types';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Dropdown, { type DropdownOption } from '$lib/components/Dropdown.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
 
 	let intentions: IntentionItem[] = $state([]);
 	let predictions: Record<string, unknown>[] = $state([]);
@@ -29,13 +35,25 @@
 		1: 'text-muted',
 	};
 
-	const TRIGGER_ICONS: Record<string, string> = {
-		time: '⏰',
-		context: '◎',
-		event: '⚡',
-		manual: '◇',
+	// Each trigger kind gets a drawn-on Icon instead of a Unicode glyph, so the
+	// list reads as part of the same premium icon system as the rest of the app.
+	const TRIGGER_ICONS: Record<string, 'schedule' | 'graph' | 'pulse' | 'intentions'> = {
+		time: 'schedule',
+		context: 'graph',
+		event: 'pulse',
+		manual: 'intentions',
 	};
 
+	// Clear, labelled dropdown options replace the row of status tabs. Same values,
+	// same filtering behavior — just clearer at a glance.
+	const statusOptions: DropdownOption[] = [
+		{ value: 'active', label: 'Active', color: '#6366f1' },
+		{ value: 'fulfilled', label: 'Fulfilled', color: '#10b981' },
+		{ value: 'snoozed', label: 'Snoozed', color: '#a78bfa' },
+		{ value: 'cancelled', label: 'Cancelled', color: '#8B95A5' },
+		{ value: 'all', label: 'All', color: '#00D4FF' },
+	];
+
 	function summarizeTrigger(intention: IntentionItem): string {
 		// The API returns trigger_data as a JSON-encoded string. Parse it, pick the
 		// most human-readable field, then truncate for display.
@@ -99,56 +117,64 @@
 </script>
 
 <div class="p-6 max-w-5xl mx-auto space-y-8">
-	<div class="flex items-center justify-between">
-		<h1 class="text-xl text-bright font-semibold">Intentions & Predictions</h1>
-		<span class="text-xs text-muted">{intentions.length} intentions</span>
-	</div>
+	<PageHeader
+		icon="intentions"
+		title="Intentions & Predictions"
+		subtitle="Prospective memory and the needs Vestige sees coming"
+		accent="memory"
+	>
+		<span class="text-dim text-sm tabular-nums">
+			<AnimatedNumber value={intentions.length} /> intentions
+		</span>
+	</PageHeader>
 
 	<!-- Intentions Section -->
-	<div class="space-y-4">
-		<div class="flex items-center gap-2">
-			<h2 class="text-sm text-bright font-semibold">Prospective Memory</h2>
-			<span class="text-xs text-muted">"Remember to do X when Y happens"</span>
-		</div>
+	<div class="space-y-4 enter">
+		<div class="flex flex-wrap items-center justify-between gap-3">
+			<div class="flex items-center gap-2 min-w-0">
+				<h2 class="text-sm text-bright font-semibold">Prospective Memory</h2>
+				<span class="text-xs text-muted">"Remember to do X when Y happens"</span>
+			</div>
 
-		<!-- Status filter tabs -->
-		<div class="flex gap-1.5">
-			{#each ['active', 'fulfilled', 'snoozed', 'cancelled', 'all'] as status}
-				<button
-					onclick={() => changeFilter(status)}
-					class="px-3 py-1.5 rounded-xl text-xs transition {statusFilter === status
-						? 'bg-synapse/20 text-synapse-glow border border-synapse/40'
-						: 'glass-subtle text-dim hover:bg-white/[0.03]'}"
-				>
-					{status.charAt(0).toUpperCase() + status.slice(1)}
-				</button>
-			{/each}
+			<!-- Status filter dropdown (same values & logic as the old tabs) -->
+			<Dropdown
+				options={statusOptions}
+				value={statusFilter}
+				label="Status"
+				icon="filter"
+				onChange={changeFilter}
+			/>
 		</div>
 
 		{#if loading}
 			<div class="space-y-2">
 				{#each Array(4) as _}
-					<div class="h-16 glass-subtle rounded-xl animate-pulse"></div>
+					<div class="h-16 glass-subtle rounded-xl shimmer"></div>
 				{/each}
 			</div>
 		{:else if intentions.length === 0}
-			<div class="text-center py-12 text-dim">
-				<div class="text-4xl mb-3 opacity-20">◇</div>
-				<p>No {statusFilter === 'all' ? '' : statusFilter + ' '}intentions.</p>
-				<p class="text-xs text-muted mt-1">Use "Remind me..." in conversation to create intentions.</p>
+			<div class="enter flex flex-col items-center justify-center text-center py-14 gap-4">
+				<div class="text-dim opacity-60 breathe"><Icon name="intentions" size={44} strokeWidth={1.2} /></div>
+				<p class="text-dim text-sm max-w-sm">
+					No {statusFilter === 'all' ? '' : statusFilter + ' '}intentions yet — say "Remind me…" in conversation and Vestige will hold the thought for you.
+				</p>
 			</div>
 		{:else}
 			<div class="space-y-2">
-				{#each intentions as intention}
-					<div class="p-4 glass-subtle rounded-xl">
-						<div class="flex items-start gap-3">
+				{#each intentions as intention, i (intention.id)}
+					<div
+						use:reveal={{ delay: Math.min(i * 35, 350), y: 12 }}
+						use:spotlight
+						class="spotlight-surface p-4 glass-subtle rounded-xl lift transition-all duration-200"
+					>
+						<div class="relative z-[1] flex items-start gap-3">
 							<!-- Trigger icon -->
-							<div class="w-8 h-8 rounded-lg bg-white/[0.04] flex items-center justify-center text-lg flex-shrink-0">
-								{TRIGGER_ICONS[intention.trigger_type] || '◇'}
+							<div class="w-9 h-9 rounded-lg bg-white/[0.04] border border-synapse/10 flex items-center justify-center text-synapse-glow flex-shrink-0">
+								<Icon name={TRIGGER_ICONS[intention.trigger_type] || 'intentions'} size={18} />
 							</div>
 
 							<div class="flex-1 min-w-0">
-								<p class="text-sm text-text">{intention.content}</p>
+								<p class="text-sm text-text leading-relaxed">{intention.content}</p>
 								<div class="flex flex-wrap gap-2 mt-2">
 									<!-- Status badge -->
 									<span class="px-2 py-0.5 text-[10px] rounded-lg border {STATUS_COLORS[intention.status] || 'text-dim bg-white/[0.03] border-subtle/20'}">
@@ -175,7 +201,7 @@
 								</div>
 							</div>
 
-							<span class="text-[10px] text-muted flex-shrink-0">{formatDate(intention.created_at)}</span>
+							<span class="text-[10px] text-muted tabular-nums flex-shrink-0">{formatDate(intention.created_at)}</span>
 						</div>
 					</div>
 				{/each}
@@ -184,34 +210,49 @@
 	</div>
 
 	<!-- Predictions Section -->
-	<div class="pt-6 border-t border-synapse/10 space-y-4">
+	<div class="pt-6 border-t border-synapse/10 space-y-4 enter">
 		<div class="flex items-center gap-2">
+			<span class="text-dream-glow"><Icon name="sparkle" size={16} /></span>
 			<h2 class="text-sm text-bright font-semibold">Predicted Needs</h2>
 			<span class="text-xs text-muted">What you might need next</span>
 		</div>
 
-		{#if predictions.length === 0}
-			<div class="text-center py-8 text-dim">
-				<div class="text-3xl mb-3 opacity-20">◬</div>
-				<p class="text-sm">No predictions yet. Use Vestige more to train the predictive model.</p>
+		{#if loading}
+			<div class="space-y-2">
+				{#each Array(3) as _}
+					<div class="h-14 glass-subtle rounded-xl shimmer"></div>
+				{/each}
+			</div>
+		{:else if predictions.length === 0}
+			<div class="enter flex flex-col items-center justify-center text-center py-10 gap-4">
+				<div class="text-dim opacity-60 breathe"><Icon name="sparkle" size={40} strokeWidth={1.2} /></div>
+				<p class="text-dim text-sm max-w-sm">
+					No predictions yet — keep using Vestige and the predictive model will start surfacing what you'll reach for next.
+				</p>
 			</div>
 		{:else}
 			<div class="space-y-2">
 				{#each predictions as pred, i}
-					<div class="p-3 glass-subtle rounded-xl flex items-start gap-3">
-						<div class="w-6 h-6 rounded-full bg-dream/20 text-dream-glow text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
-							{i + 1}
-						</div>
-						<div class="flex-1 min-w-0">
-							<p class="text-sm text-text line-clamp-2">{pred.content}</p>
-							<div class="flex gap-3 mt-1 text-xs text-muted">
-								<span>{pred.nodeType}</span>
-								{#if pred.retention}
-									<span>{(Number(pred.retention) * 100).toFixed(0)}% retention</span>
-								{/if}
-								{#if pred.predictedNeed}
-									<span class="text-dream-glow">{pred.predictedNeed} need</span>
-								{/if}
+					<div
+						use:reveal={{ delay: Math.min(i * 35, 350), y: 12 }}
+						use:spotlight
+						class="spotlight-surface p-3 glass-subtle rounded-xl lift transition-all duration-200"
+					>
+						<div class="relative z-[1] flex items-start gap-3">
+							<div class="w-6 h-6 rounded-full bg-dream/20 text-dream-glow text-xs tabular-nums flex items-center justify-center flex-shrink-0 mt-0.5">
+								{i + 1}
+							</div>
+							<div class="flex-1 min-w-0">
+								<p class="text-sm text-text line-clamp-2">{pred.content}</p>
+								<div class="flex gap-3 mt-1 text-xs text-muted">
+									<span>{pred.nodeType}</span>
+									{#if pred.retention}
+										<span class="tabular-nums">{(Number(pred.retention) * 100).toFixed(0)}% retention</span>
+									{/if}
+									{#if pred.predictedNeed}
+										<span class="text-dream-glow">{pred.predictedNeed} need</span>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
diff --git a/apps/dashboard/src/routes/(app)/memories/+page.svelte b/apps/dashboard/src/routes/(app)/memories/+page.svelte
index 03e9808..393f84b 100644
--- a/apps/dashboard/src/routes/(app)/memories/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/memories/+page.svelte
@@ -4,6 +4,12 @@
 	import type { Memory } from '$types';
 	import { NODE_TYPE_COLORS } from '$types';
 	import MemoryAuditTrail from '$lib/components/MemoryAuditTrail.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import Dropdown, { type DropdownOption } from '$lib/components/Dropdown.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
 
 	let memories: Memory[] = $state([]);
 	let searchQuery = $state('');
@@ -46,65 +52,111 @@
 		if (r > 0.4) return '#f59e0b';
 		return '#ef4444';
 	}
+
+	// Clear, labelled dropdown options replace the dead native <select>.
+	const typeOptions: DropdownOption[] = [
+		{ value: '', label: 'All types' },
+		{ value: 'fact', label: 'Fact', color: NODE_TYPE_COLORS.fact },
+		{ value: 'concept', label: 'Concept', color: NODE_TYPE_COLORS.concept },
+		{ value: 'event', label: 'Event', color: NODE_TYPE_COLORS.event },
+		{ value: 'person', label: 'Person', color: NODE_TYPE_COLORS.person },
+		{ value: 'place', label: 'Place', color: NODE_TYPE_COLORS.place },
+		{ value: 'note', label: 'Note', color: NODE_TYPE_COLORS.note },
+		{ value: 'pattern', label: 'Pattern', color: NODE_TYPE_COLORS.pattern },
+		{ value: 'decision', label: 'Decision', color: NODE_TYPE_COLORS.decision },
+	];
+
+	// Retention filter as a clear dropdown of thresholds (was a bare range slider).
+	const retentionOptions: DropdownOption[] = [
+		{ value: '0', label: 'Any retention' },
+		{ value: '0.3', label: '≥ 30% — fading & up' },
+		{ value: '0.5', label: '≥ 50% — half-strength' },
+		{ value: '0.7', label: '≥ 70% — well-retained' },
+		{ value: '0.9', label: '≥ 90% — core memories' },
+	];
+	let retentionChoice = $state('0');
+	function onRetentionChange(v: string) {
+		minRetention = parseFloat(v);
+		loadMemories();
+	}
 </script>
 
 <div class="p-6 max-w-6xl mx-auto space-y-6">
-	<div class="flex items-center justify-between">
-		<h1 class="text-xl text-bright font-semibold">Memories</h1>
-		<span class="text-dim text-sm">{memories.length} results</span>
-	</div>
+	<PageHeader
+		icon="memories"
+		title="Memories"
+		subtitle="Search, filter, and curate everything Vestige remembers"
+		accent="memory"
+	>
+		<span class="text-dim text-sm tabular-nums">
+			<AnimatedNumber value={memories.length} /> results
+		</span>
+	</PageHeader>
 
 	<!-- Search & Filters -->
-	<div class="flex gap-3 flex-wrap">
-		<input
-			type="text"
-			placeholder="Search memories..."
-			bind:value={searchQuery}
-			oninput={onSearch}
-			class="flex-1 min-w-64 px-4 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
-				placeholder:text-muted focus:outline-none focus:border-synapse/40 focus:ring-1 focus:ring-synapse/20 transition backdrop-blur-sm"
-		/>
-		<select bind:value={selectedType} onchange={loadMemories}
-			class="px-3 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-dim text-sm focus:outline-none backdrop-blur-sm">
-			<option value="">All types</option>
-			<option value="fact">Fact</option>
-			<option value="concept">Concept</option>
-			<option value="event">Event</option>
-			<option value="person">Person</option>
-			<option value="place">Place</option>
-			<option value="note">Note</option>
-			<option value="pattern">Pattern</option>
-			<option value="decision">Decision</option>
-		</select>
-		<div class="flex items-center gap-2 text-xs text-dim">
-			<span>Min retention:</span>
-			<input type="range" min="0" max="1" step="0.1" bind:value={minRetention} onchange={loadMemories}
-				class="w-24 accent-synapse" />
-			<span>{(minRetention * 100).toFixed(0)}%</span>
+	<div class="flex gap-3 flex-wrap items-end enter">
+		<div class="relative flex-1 min-w-64">
+			<span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none">
+				<Icon name="search" size={16} />
+			</span>
+			<input
+				type="text"
+				placeholder="Search memories…  (press / to focus)"
+				bind:value={searchQuery}
+				oninput={onSearch}
+				class="w-full pl-10 pr-4 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
+					placeholder:text-muted focus:outline-none focus:border-synapse/40 focus:ring-2 focus:ring-synapse/15 transition backdrop-blur-sm"
+			/>
 		</div>
+		<Dropdown
+			options={typeOptions}
+			bind:value={selectedType}
+			label="Type"
+			icon="filter"
+			placeholder="All types"
+			onChange={loadMemories}
+		/>
+		<Dropdown
+			options={retentionOptions}
+			bind:value={retentionChoice}
+			label="Retention"
+			icon="pulse"
+			onChange={onRetentionChange}
+		/>
 	</div>
 
 	<!-- Memory grid -->
 	{#if loading}
 		<div class="grid gap-3">
 			{#each Array(8) as _}
-				<div class="h-24 glass-subtle rounded-xl animate-pulse"></div>
+				<div class="h-24 glass-subtle rounded-xl shimmer"></div>
 			{/each}
 		</div>
+	{:else if memories.length === 0}
+		<div class="enter flex flex-col items-center justify-center text-center py-20 gap-4">
+			<div class="text-dim opacity-60 breathe"><Icon name="memories" size={48} strokeWidth={1.2} /></div>
+			<p class="text-dim text-sm max-w-sm">
+				{searchQuery || selectedType || minRetention > 0
+					? 'No memories match these filters yet. Try widening your search.'
+					: 'No memories yet — once Vestige starts remembering, they will surface here, alive and searchable.'}
+			</p>
+		</div>
 	{:else}
 		<div class="grid gap-3">
-			{#each memories as memory (memory.id)}
+			{#each memories as memory, i (memory.id)}
 				<button
+					use:reveal={{ delay: Math.min(i * 35, 350), y: 12 }}
+					use:spotlight
 					onclick={() => selectedMemory = selectedMemory?.id === memory.id ? null : memory}
-					class="text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04]
+					class="spotlight-surface text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04]
 						transition-all duration-200 group
-						{selectedMemory?.id === memory.id ? '!border-synapse/40 glow-synapse' : ''}"
+						{selectedMemory?.id === memory.id ? '!border-synapse/40 glow-synapse live-border' : ''}"
 				>
-					<div class="flex items-start justify-between gap-4">
+					<div class="relative z-[1] flex items-start justify-between gap-4">
 						<div class="flex-1 min-w-0">
 							<div class="flex items-center gap-2 mb-2">
-								<span class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[memory.nodeType] || '#8B95A5'}"></span>
-								<span class="text-xs text-dim">{memory.nodeType}</span>
+								<span class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[memory.nodeType] || '#8B95A5'}; box-shadow: 0 0 6px {NODE_TYPE_COLORS[memory.nodeType] || '#8B95A5'}99"></span>
+								<span class="text-xs text-dim capitalize">{memory.nodeType}</span>
 								{#each memory.tags.slice(0, 3) as tag}
 									<span class="text-xs px-1.5 py-0.5 bg-white/[0.04] rounded text-muted">{tag}</span>
 								{/each}
@@ -121,7 +173,7 @@
 
 					{#if selectedMemory?.id === memory.id}
 						{@const activeTab = expandedTab[memory.id] ?? 'content'}
-						<div class="mt-4 pt-4 border-t border-synapse/10 space-y-3">
+						<div class="relative z-[1] mt-4 pt-4 border-t border-synapse/10 space-y-3">
 							<!-- Inner tab switcher: Content (default) vs Audit Trail. -->
 							<div class="flex gap-1 text-[11px] uppercase tracking-wider">
 								<span
diff --git a/apps/dashboard/src/routes/(app)/patterns/+page.svelte b/apps/dashboard/src/routes/(app)/patterns/+page.svelte
index e436b12..8108d7f 100644
--- a/apps/dashboard/src/routes/(app)/patterns/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/patterns/+page.svelte
@@ -11,6 +11,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import PatternTransferHeatmap from '$components/PatternTransferHeatmap.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import Icon from '$components/Icon.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
 
 	type Category =
 		| 'ErrorHandling'
@@ -392,35 +396,53 @@
 </script>
 
 <div class="relative mx-auto max-w-7xl space-y-6 p-6">
-	<!-- Header -->
-	<header class="space-y-2">
-		<h1 class="text-xl font-semibold text-bright">Cross-Project Intelligence</h1>
-		<p class="text-sm text-dim">Patterns learned here, applied there.</p>
-	</header>
+	<PageHeader
+		icon="patterns"
+		title="Cross-Project Intelligence"
+		subtitle="Patterns learned here, applied there — across every tracked project."
+		accent="dream"
+	>
+		{#if !loading && !error}
+			<span class="glass-subtle rounded-full px-3 py-1 text-xs text-dim tabular-nums">
+				<span class="font-semibold text-bright"><AnimatedNumber value={patternCount} /></span>
+				pattern{patternCount === 1 ? '' : 's'}
+				·
+				<span class="font-semibold text-bright"><AnimatedNumber value={totalTransfers} /></span>
+				transfer{totalTransfers === 1 ? '' : 's'}
+			</span>
+		{/if}
+	</PageHeader>
 
-	<!-- Category tabs -->
-	<div class="glass-panel flex flex-wrap items-center gap-1.5 rounded-2xl p-2">
+	<!-- Category tabs — switching category clears the selected heatmap cell. -->
+	<div class="glass-panel flex flex-wrap items-center gap-1.5 rounded-2xl p-2 enter">
 		<button
 			type="button"
 			onclick={() => selectCategory('All')}
-			class="rounded-lg px-3 py-1.5 text-xs font-medium transition {activeCategory === 'All'
-				? 'bg-synapse/25 text-synapse-glow'
+			class="lift rounded-lg px-3 py-1.5 text-xs font-medium transition {activeCategory === 'All'
+				? 'bg-synapse/25 text-synapse-glow shadow-[0_0_16px_-4px_var(--color-synapse-glow)]'
 				: 'text-dim hover:bg-white/[0.04] hover:text-text'}"
 		>
-			All
+			<span class="inline-flex items-center gap-1.5">
+				<Icon name="sparkle" size={13} />
+				All
+			</span>
 		</button>
 		{#each CATEGORIES as cat (cat)}
 			<button
 				type="button"
 				onclick={() => selectCategory(cat)}
-				class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition {activeCategory ===
+				class="lift flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition {activeCategory ===
 				cat
-					? 'bg-synapse/25 text-synapse-glow'
+					? 'bg-synapse/25 text-synapse-glow shadow-[0_0_16px_-4px_var(--color-synapse-glow)]'
 					: 'text-dim hover:bg-white/[0.04] hover:text-text'}"
 			>
 				<span
-					class="h-1.5 w-1.5 rounded-full"
-					style="background: {CATEGORY_COLORS[cat]}"
+					class="h-1.5 w-1.5 rounded-full transition-all duration-300 {activeCategory === cat
+						? 'scale-150'
+						: ''}"
+					style="background: {CATEGORY_COLORS[cat]}; {activeCategory === cat
+						? `box-shadow: 0 0 8px ${CATEGORY_COLORS[cat]};`
+						: ''}"
 				></span>
 				{cat}
 			</button>
@@ -428,27 +450,29 @@
 	</div>
 
 	{#if error}
-		<div class="glass-panel flex flex-col items-center gap-3 rounded-2xl p-10 text-center">
+		<div class="glass-panel enter flex flex-col items-center gap-3 rounded-2xl p-10 text-center">
+			<div class="text-decay/80"><Icon name="contradictions" size={28} /></div>
 			<div class="text-sm text-decay">Couldn't load pattern transfers</div>
 			<div class="max-w-md text-xs text-muted">{error}</div>
 			<button
 				type="button"
 				onclick={load}
-				class="mt-2 rounded-lg bg-synapse/20 px-4 py-2 text-xs font-medium text-synapse-glow transition hover:bg-synapse/30"
+				class="lift mt-2 inline-flex items-center gap-1.5 rounded-lg bg-synapse/20 px-4 py-2 text-xs font-medium text-synapse-glow transition hover:bg-synapse/30"
 			>
+				<Icon name="pulse" size={14} />
 				Retry
 			</button>
 		</div>
 	{:else if loading}
 		<div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
-			<div class="glass-subtle h-[520px] animate-pulse rounded-2xl"></div>
-			<div class="glass-subtle h-[520px] animate-pulse rounded-2xl"></div>
+			<div class="glass-subtle shimmer h-[520px] rounded-2xl"></div>
+			<div class="glass-subtle shimmer h-[520px] rounded-2xl"></div>
 		</div>
 	{:else}
 		<!-- Main grid: heatmap (70%) + sidebar -->
 		<div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
 			<!-- Heatmap column -->
-			<div class="space-y-4">
+			<div class="space-y-4 enter">
 				<PatternTransferHeatmap
 					projects={data.projects}
 					patterns={categoryFiltered}
@@ -458,9 +482,10 @@
 
 				{#if selectedCell}
 					<div
-						class="glass-subtle flex items-center justify-between rounded-xl px-4 py-2.5 text-xs"
+						class="glass-subtle enter flex items-center justify-between rounded-xl px-4 py-2.5 text-xs"
 					>
 						<div class="flex items-center gap-2">
+							<span class="text-synapse-glow"><Icon name="filter" size={13} /></span>
 							<span class="text-muted">Filtered to</span>
 							<span class="font-mono text-bright">{selectedCell.from}</span>
 							<span class="text-synapse-glow">→</span>
@@ -469,8 +494,9 @@
 						<button
 							type="button"
 							onclick={clearCellFilter}
-							class="rounded-md bg-white/[0.04] px-2 py-1 text-dim transition hover:bg-white/[0.08] hover:text-text"
+							class="inline-flex items-center gap-1 rounded-md bg-white/[0.04] px-2 py-1 text-dim transition hover:bg-white/[0.08] hover:text-text"
 						>
+							<Icon name="close" size={12} />
 							Clear
 						</button>
 					</div>
@@ -478,29 +504,34 @@
 			</div>
 
 			<!-- Sidebar: Top Transferred Patterns -->
-			<aside class="glass-panel flex flex-col rounded-2xl p-4">
+			<aside class="glass-panel enter flex flex-col rounded-2xl p-4">
 				<div class="mb-3 flex items-center justify-between">
-					<h2 class="text-sm font-semibold text-bright">Top Transferred Patterns</h2>
-					<span class="text-[11px] text-muted">
-						{sidebarPatterns.length}
+					<h2 class="flex items-center gap-2 text-sm font-semibold text-bright">
+						<span class="text-dream-glow"><Icon name="patterns" size={15} /></span>
+						Top Transferred Patterns
+					</h2>
+					<span class="text-[11px] text-muted tabular-nums">
+						<AnimatedNumber value={sidebarPatterns.length} />
 						{sidebarPatterns.length === 1 ? 'pattern' : 'patterns'}
 					</span>
 				</div>
 
 				{#if sidebarPatterns.length === 0}
-					<div class="flex flex-1 flex-col items-center justify-center gap-2 py-10 text-center">
+					<div class="flex flex-1 flex-col items-center justify-center gap-3 py-12 text-center">
+						<div class="breathe text-dim/70"><Icon name="explore" size={32} /></div>
 						<div class="text-xs font-medium text-dim">No matching patterns</div>
 						<div class="max-w-[220px] text-[11px] text-muted">
 							{selectedCell
-								? 'No patterns transferred from this origin to this destination.'
-								: 'No patterns in this category.'}
+								? 'No patterns transferred from this origin to this destination yet — try another cell or clear the filter.'
+								: 'Nothing in this category yet. Pick another category to explore what travels between projects.'}
 						</div>
 					</div>
 				{:else}
 					<ul class="flex-1 space-y-2 overflow-y-auto pr-1" style="max-height: 560px;">
-						{#each sidebarPatterns as p (p.name)}
+						{#each sidebarPatterns as p, i (p.name)}
 							<li
-								class="rounded-lg border border-synapse/5 bg-white/[0.02] p-3 transition hover:border-synapse/20 hover:bg-white/[0.04]"
+								use:reveal={{ y: 12, delay: Math.min(i * 45, 360) }}
+								class="lift rounded-lg border border-synapse/5 bg-white/[0.02] p-3 transition hover:border-synapse/20 hover:bg-white/[0.04]"
 							>
 								<div class="flex items-start justify-between gap-2">
 									<div class="min-w-0 flex-1 space-y-1.5">
@@ -531,11 +562,11 @@
 									</div>
 									<div class="flex flex-shrink-0 flex-col items-end gap-1">
 										<span
-											class="rounded-full bg-synapse/15 px-2 py-0.5 text-xs font-semibold text-synapse-glow"
+											class="rounded-full bg-synapse/15 px-2 py-0.5 text-xs font-semibold text-synapse-glow tabular-nums"
 										>
-											{p.transfer_count}
+											<AnimatedNumber value={p.transfer_count} />
 										</span>
-										<span class="text-[10px] text-muted">
+										<span class="text-[10px] text-muted tabular-nums">
 											{(p.confidence * 100).toFixed(0)}%
 										</span>
 									</div>
@@ -549,17 +580,23 @@
 
 		<!-- Stats footer -->
 		<footer
-			class="glass-subtle flex flex-wrap items-center justify-between gap-3 rounded-xl px-4 py-3 text-xs text-dim"
+			class="glass-subtle enter flex flex-wrap items-center justify-between gap-3 rounded-xl px-4 py-3 text-xs text-dim"
 		>
-			<div>
-				<span class="font-semibold text-bright">{patternCount}</span>
+			<div class="tabular-nums">
+				<span class="font-semibold text-bright"><AnimatedNumber value={patternCount} /></span>
 				pattern{patternCount === 1 ? '' : 's'} across
-				<span class="font-semibold text-bright">{projectCount}</span>
+				<span class="font-semibold text-bright"><AnimatedNumber value={projectCount} /></span>
 				project{projectCount === 1 ? '' : 's'},
-				<span class="font-semibold text-bright">{totalTransfers}</span>
+				<span class="font-semibold text-bright"><AnimatedNumber value={totalTransfers} /></span>
 				total transfer{totalTransfers === 1 ? '' : 's'}
 			</div>
-			<div class="text-muted">
+			<div class="inline-flex items-center gap-1.5 text-muted">
+				<span
+					class="h-1.5 w-1.5 rounded-full"
+					style="background: {activeCategory === 'All'
+						? 'var(--color-synapse-glow)'
+						: CATEGORY_COLORS[activeCategory]}"
+				></span>
 				{activeCategory === 'All' ? 'All categories' : activeCategory}
 			</div>
 		</footer>
diff --git a/apps/dashboard/src/routes/(app)/reasoning/+page.svelte b/apps/dashboard/src/routes/(app)/reasoning/+page.svelte
index 2a208b2..1a76d3c 100644
--- a/apps/dashboard/src/routes/(app)/reasoning/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/reasoning/+page.svelte
@@ -3,6 +3,11 @@
 	import { api } from '$stores/api';
 	import ReasoningChain from '$components/ReasoningChain.svelte';
 	import EvidenceCard from '$components/EvidenceCard.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight, magnetic } from '$lib/actions/interactions';
 	import {
 		confidenceColor,
 		confidenceLabel,
@@ -244,40 +249,39 @@
 	<title>Reasoning Theater · Vestige</title>
 </svelte:head>
 
-<div class="p-6 max-w-6xl mx-auto space-y-8">
+<div class="p-6 max-w-6xl mx-auto space-y-8 enter">
 	<!-- Header -->
-	<div class="space-y-2">
-		<div class="flex items-center gap-3">
-			<span class="text-2xl text-dream-glow">❖</span>
-			<h1 class="text-xl text-bright font-semibold">Reasoning Theater</h1>
-			<span class="px-2 py-0.5 rounded bg-dream/15 border border-dream/30 text-[10px] text-dream-glow uppercase tracking-wider">
-				deep_reference
-			</span>
-		</div>
-		<p class="text-xs text-dim max-w-2xl">
-			Watch Vestige reason. Your query runs the 8-stage cognitive pipeline — broad retrieval,
-			spreading activation, FSRS trust scoring, intent classification, supersession, contradiction
-			analysis, relation assessment, template reasoning — and returns a pre-built answer with
-			trust-scored evidence.
-		</p>
-	</div>
+	<PageHeader
+		icon="reasoning"
+		title="Reasoning Theater"
+		subtitle="Watch Vestige reason — the 8-stage cognitive pipeline runs locally and returns a pre-built answer with trust-scored evidence."
+		accent="dream"
+	>
+		<span
+			class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-dream/15 border border-dream/30 text-[10px] text-dream-glow uppercase tracking-wider font-mono"
+		>
+			<span class="ping-host w-1.5 h-1.5 rounded-full" style="color: var(--color-dream); background: var(--color-dream)"></span>
+			deep_reference
+		</span>
+	</PageHeader>
 
 	<!-- Cmd+K Ask Palette -->
 	<div class="glass-panel rounded-2xl p-5 space-y-4">
 		<div class="flex items-center gap-3">
-			<span class="text-lg text-synapse-glow">◎</span>
+			<span class="text-synapse-glow {loading ? 'breathe' : ''}"><Icon name="reasoning" size={20} /></span>
 			<input
 				bind:this={askInputEl}
 				type="text"
 				bind:value={query}
 				onkeydown={(e) => e.key === 'Enter' && ask()}
-				placeholder="Ask your memory anything..."
+				placeholder="Ask your memory anything…"
 				class="flex-1 bg-transparent text-bright text-lg placeholder:text-muted focus:outline-none font-mono"
 			/>
 			<kbd class="hidden sm:inline-flex items-center gap-1 px-2 py-1 rounded bg-white/[0.04] border border-synapse/15 text-[10px] text-dim font-mono">
 				<span>⌘</span>K
 			</kbd>
 			<button
+				use:magnetic
 				onclick={ask}
 				disabled={!query.trim() || loading}
 				class="px-4 py-2 rounded-xl bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm hover:bg-synapse/30 transition disabled:opacity-40 disabled:cursor-not-allowed"
@@ -330,24 +334,25 @@
 
 		<!-- REASONING CHAIN (hero — this IS the answer) -->
 		{#if response.reasoning}
-			<div class="space-y-3">
+			<div class="space-y-3" use:reveal>
 				<div class="flex items-center justify-between">
 					<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-						<span class="text-dream-glow">❖</span>
+						<span class="text-dream-glow"><Icon name="reasoning" size={16} /></span>
 						Reasoning
 					</h2>
 					<div class="flex items-center gap-3 text-[10px] text-muted font-mono">
 						<span>intent: <span class="text-dim">{response.intent}</span></span>
 						<span>·</span>
-						<span>{response.memoriesAnalyzed} analyzed</span>
+						<span><AnimatedNumber value={response.memoriesAnalyzed} /> analyzed</span>
 						<span>·</span>
 						<span style="color: {confColor}">{conf}% {confidenceLabel(conf)}</span>
 					</div>
 				</div>
 				<div
-					class="glass-panel rounded-2xl p-6 font-mono text-sm text-bright whitespace-pre-wrap leading-relaxed"
+					use:spotlight
+					class="spotlight-surface glass-panel rounded-2xl p-6 font-mono text-sm text-bright whitespace-pre-wrap leading-relaxed"
 					style="box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.03), 0 0 32px {confColor}20, 0 8px 32px rgba(0,0,0,0.4); border-color: {confColor}35;"
-				>{response.reasoning}</div>
+				><span class="relative z-[1]">{response.reasoning}</span></div>
 			</div>
 		{/if}
 
@@ -364,7 +369,7 @@
 						class="block text-6xl font-bold font-mono conf-number"
 						style="color: {confColor}; text-shadow: 0 0 24px {confColor}80;"
 					>
-						{conf}<span class="text-2xl align-top opacity-60">%</span>
+						<AnimatedNumber value={conf} /><span class="text-2xl align-top opacity-60">%</span>
 					</span>
 				</div>
 				<span
@@ -418,7 +423,7 @@
 		<!-- Cognitive Pipeline visualization (how the engine got there) -->
 		<div class="space-y-3">
 			<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-				<span class="text-dream-glow">⟿</span>
+				<span class="text-dream-glow"><Icon name="activation" size={15} /></span>
 				Cognitive Pipeline
 			</h2>
 			<div class="glass-panel rounded-2xl p-5">
@@ -436,7 +441,7 @@
 		<div class="space-y-3">
 			<div class="flex items-center justify-between">
 				<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-					<span class="text-synapse-glow">◈</span>
+					<span class="text-synapse-glow"><Icon name="memories" size={15} /></span>
 					Evidence
 					<span class="text-muted font-normal">({response.evidence.length})</span>
 				</h2>
@@ -503,9 +508,9 @@
 		{#if response.contradictions.length > 0}
 			<div class="space-y-3">
 				<h2 class="text-sm font-semibold flex items-center gap-2" style="color: #fca5a5;">
-					<span>⚡</span>
+					<span><Icon name="contradictions" size={15} /></span>
 					Contradictions Detected
-					<span class="font-normal text-muted">({response.contradictions.length})</span>
+					<span class="font-normal text-muted">(<AnimatedNumber value={response.contradictions.length} />)</span>
 				</h2>
 				<div class="glass rounded-2xl p-4 space-y-3 !border-decay/30">
 					{#each response.contradictions as c, i}
@@ -575,7 +580,7 @@
 			{#if response.related_insights.length > 0}
 				<div class="space-y-3">
 					<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-						<span class="text-dream-glow">◇</span>
+						<span class="text-dream-glow"><Icon name="sparkle" size={15} /></span>
 						Related Insights
 					</h2>
 					<div class="glass rounded-2xl p-4 space-y-2">
@@ -592,8 +597,8 @@
 
 	<!-- Empty state -->
 	{#if !response && !loading && !error}
-		<div class="glass-subtle rounded-2xl p-12 text-center space-y-3">
-			<div class="text-5xl opacity-20">❖</div>
+		<div class="glass-subtle rounded-2xl p-12 text-center space-y-3 enter">
+			<div class="mx-auto w-fit text-dream-glow opacity-40 breathe"><Icon name="reasoning" size={44} strokeWidth={1.2} /></div>
 			<p class="text-sm text-dim">
 				Ask anything. Vestige will run the full reasoning pipeline and show you its work.
 			</p>
diff --git a/apps/dashboard/src/routes/(app)/schedule/+page.svelte b/apps/dashboard/src/routes/(app)/schedule/+page.svelte
index 781b284..3433cb3 100644
--- a/apps/dashboard/src/routes/(app)/schedule/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/schedule/+page.svelte
@@ -3,6 +3,12 @@
 	import { api } from '$stores/api';
 	import type { Memory } from '$types';
 	import FSRSCalendar from '$components/FSRSCalendar.svelte';
+	import PageHeader from '$components/PageHeader.svelte';
+	import Icon from '$components/Icon.svelte';
+	import Dropdown, { type DropdownOption } from '$components/Dropdown.svelte';
+	import AnimatedNumber from '$components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight, magnetic } from '$lib/actions/interactions';
 	import {
 		classifyUrgency,
 		computeScheduleStats,
@@ -80,36 +86,44 @@
 		}
 	}
 
-	// The filter buttons.
+	// The review windows.
 	const FILTERS: { key: WindowFilter; label: string }[] = [
 		{ key: 'today', label: 'Due today' },
 		{ key: 'week', label: 'This week' },
 		{ key: 'month', label: 'This month' },
 		{ key: 'all', label: 'All upcoming' }
 	];
+
+	// Live, badge-counted options for the window Dropdown. Each badge reflects
+	// the exact bucket size so the choice is CLEAR before the user even opens it.
+	let windowOptions = $derived<DropdownOption[]>([
+		{ value: 'today', label: 'Due today', icon: 'schedule', badge: stats.dueToday, color: '#fbbf24' },
+		{ value: 'week', label: 'This week', icon: 'schedule', badge: stats.dueThisWeek, color: '#818cf8' },
+		{ value: 'month', label: 'This month', icon: 'schedule', badge: stats.dueThisMonth, color: '#c084fc' },
+		{ value: 'all', label: 'All upcoming', icon: 'schedule', badge: scheduled.length, color: '#6ee7b7' }
+	]);
+
+	let activeFilterLabel = $derived(FILTERS.find((f) => f.key === windowFilter)?.label ?? '');
 </script>
 
 <div class="p-6 max-w-7xl mx-auto space-y-6">
-	<div class="flex items-center justify-between flex-wrap gap-3">
-		<div>
-			<h1 class="text-xl text-bright font-semibold">Review Schedule</h1>
-			<p class="text-xs text-dim mt-1">FSRS-6 next-review dates across your memory corpus</p>
-		</div>
-		<div class="flex gap-1 p-1 glass-subtle rounded-xl">
-			{#each FILTERS as f}
-				<button
-					type="button"
-					onclick={() => (windowFilter = f.key)}
-					class="px-3 py-1.5 text-xs rounded-lg transition-all
-						{windowFilter === f.key
-						? 'bg-synapse/20 text-synapse-glow border border-synapse/30'
-						: 'text-dim hover:text-text hover:bg-white/[0.03] border border-transparent'}"
-				>
-					{f.label}
-				</button>
-			{/each}
-		</div>
-	</div>
+	<PageHeader
+		icon="schedule"
+		title="Review Schedule"
+		subtitle="FSRS-6 next-review dates across your memory corpus"
+		accent="warning"
+	>
+		<!-- Badge-counted window Dropdown — each option shows its exact bucket
+		     size, so the choice is clear before the menu even opens. -->
+		<Dropdown
+			options={windowOptions}
+			bind:value={windowFilter}
+			label="Window"
+			icon="filter"
+		/>
+	</PageHeader>
+
+	{#if activeFilterLabel}<span class="sr-only">{activeFilterLabel}</span>{/if}
 
 	{#if !loading && !errored && truncated}
 		<div class="px-3 py-2 glass-subtle rounded-lg text-[11px] text-dim">
@@ -121,16 +135,16 @@
 	{#if loading}
 		<div class="grid lg:grid-cols-[1fr_280px] gap-6">
 			<div class="space-y-3">
-				<div class="h-14 glass-subtle rounded-xl animate-pulse"></div>
+				<div class="h-14 glass-subtle rounded-xl shimmer"></div>
 				<div class="grid grid-cols-7 gap-2">
 					{#each Array(42) as _}
-						<div class="aspect-square glass-subtle rounded-lg animate-pulse"></div>
+						<div class="aspect-square glass-subtle rounded-lg shimmer"></div>
 					{/each}
 				</div>
 			</div>
 			<div class="space-y-3">
 				{#each Array(5) as _}
-					<div class="h-20 glass-subtle rounded-xl animate-pulse"></div>
+					<div class="h-20 glass-subtle rounded-xl shimmer"></div>
 				{/each}
 			</div>
 		</div>
@@ -140,8 +154,8 @@
 			<p class="text-xs text-dim">Could not fetch memories from /api/memories.</p>
 		</div>
 	{:else if scheduled.length === 0}
-		<div class="p-10 glass rounded-xl text-center space-y-4">
-			<div class="text-4xl text-dream/40">◷</div>
+		<div class="p-10 glass rounded-xl text-center space-y-4 enter">
+			<div class="mx-auto w-fit text-dream/50 breathe"><Icon name="schedule" size={42} strokeWidth={1.2} /></div>
 			<p class="text-sm text-bright font-medium">FSRS review schedule not yet populated.</p>
 			<p class="text-xs text-dim max-w-md mx-auto">
 				None of your {memories.length} memor{memories.length === 1 ? 'y has' : 'ies have'} a
diff --git a/apps/dashboard/src/routes/(app)/settings/+page.svelte b/apps/dashboard/src/routes/(app)/settings/+page.svelte
index f7a82eb..dd53f98 100644
--- a/apps/dashboard/src/routes/(app)/settings/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/settings/+page.svelte
@@ -3,6 +3,9 @@
 	import { api } from '$stores/api';
 	import { websocket, isConnected, memoryCount, avgRetention } from '$stores/websocket';
 	import { fireDemoSequence } from '$stores/toast';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import { reveal } from '$lib/actions/reveal';
 
 	// v2.3 Birth Ritual demo — injects a synthetic MemoryCreated event so
 	// Graph3D spawns a birth orb without needing a real ingest. Node types
@@ -80,43 +83,64 @@
 	}
 </script>
 
-<div class="p-6 max-w-4xl mx-auto space-y-8">
-	<div class="flex items-center justify-between">
-		<h1 class="text-xl text-bright font-semibold">Settings & System</h1>
-		<button onclick={loadAllData} class="text-xs text-dim hover:text-text transition">Refresh</button>
-	</div>
+<div class="p-6 max-w-4xl mx-auto space-y-8 enter">
+	<PageHeader
+		icon="settings"
+		title="Settings & System"
+		subtitle="Tune the cognitive engine, watch the system breathe, and run the rituals that keep memory alive."
+		accent="synapse"
+	>
+		<span class="conn-pill" class:idle={!$isConnected}>
+			<span
+				class="conn-dot w-2 h-2 rounded-full"
+				class:ping-host={$isConnected}
+				class:breathe={!$isConnected}
+				style="color:{$isConnected ? 'var(--color-recall)' : 'var(--color-decay)'};background:{$isConnected ? 'var(--color-recall)' : 'var(--color-decay)'}"
+			></span>
+			<span>{$isConnected ? 'Connected' : 'Offline'}</span>
+		</span>
+		<button onclick={loadAllData} class="refresh-btn">
+			<Icon name="activation" size={13} />
+			<span>Refresh</span>
+		</button>
+	</PageHeader>
 
 	<!-- System Health Overview -->
 	<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-		<div class="p-4 glass rounded-xl text-center">
-			<div class="text-2xl text-bright font-bold">{$memoryCount}</div>
+		<div class="p-4 glass rounded-xl text-center lift" use:reveal={{ delay: 0 }}>
+			<div class="text-2xl text-bright font-bold tabular-nums">{$memoryCount}</div>
 			<div class="text-xs text-dim mt-1">Memories</div>
 		</div>
-		<div class="p-4 glass rounded-xl text-center">
-			<div class="text-2xl font-bold" style="color: {$avgRetention > 0.7 ? '#10b981' : $avgRetention > 0.4 ? '#f59e0b' : '#ef4444'}">{($avgRetention * 100).toFixed(1)}%</div>
+		<div class="p-4 glass rounded-xl text-center lift" use:reveal={{ delay: 60 }}>
+			<div class="text-2xl font-bold tabular-nums" style="color: {$avgRetention > 0.7 ? '#10b981' : $avgRetention > 0.4 ? '#f59e0b' : '#ef4444'}">{($avgRetention * 100).toFixed(1)}%</div>
 			<div class="text-xs text-dim mt-1">Avg Retention</div>
 		</div>
-		<div class="p-4 glass rounded-xl text-center">
+		<div class="p-4 glass rounded-xl text-center lift" use:reveal={{ delay: 120 }}>
 			<div class="text-2xl text-bright font-bold flex items-center justify-center gap-2">
-				<div class="w-2.5 h-2.5 rounded-full {$isConnected ? 'bg-recall animate-pulse-glow' : 'bg-decay'}"></div>
+				<span
+					class="w-2.5 h-2.5 rounded-full"
+					class:ping-host={$isConnected}
+					class:breathe={!$isConnected}
+					style="color:{$isConnected ? 'var(--color-recall)' : 'var(--color-decay)'};background:{$isConnected ? 'var(--color-recall)' : 'var(--color-decay)'}"
+				></span>
 				<span class="text-sm">{$isConnected ? 'Online' : 'Offline'}</span>
 			</div>
 			<div class="text-xs text-dim mt-1">WebSocket</div>
 		</div>
-		<div class="p-4 glass rounded-xl text-center">
+		<div class="p-4 glass rounded-xl text-center lift" use:reveal={{ delay: 180 }}>
 			<div class="text-2xl text-synapse-glow font-bold">v2.1</div>
 			<div class="text-xs text-dim mt-1">Vestige</div>
 		</div>
 	</div>
 
 	<!-- Cognitive Operations -->
-	<section class="space-y-4">
+	<section class="space-y-4" use:reveal={{ delay: 60 }}>
 		<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-			<span class="text-dream">◈</span> Cognitive Operations
+			<Icon name="dreams" size={16} class="text-dream" /> Cognitive Operations
 		</h2>
 
 		<!-- v2.2 Pulse — demo the InsightToast stream -->
-		<div class="p-4 glass rounded-xl space-y-3">
+		<div class="p-4 glass rounded-xl space-y-3 lift">
 			<div class="flex items-center justify-between">
 				<div>
 					<div class="text-sm text-text font-medium">Pulse Toast Preview</div>
@@ -124,13 +148,13 @@
 				</div>
 				<button onclick={fireDemoSequence}
 					class="px-4 py-2 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-xl hover:bg-synapse/30 transition flex items-center gap-2">
-					<span>✦</span> Preview Pulse
+					<Icon name="sparkle" size={14} /> Preview Pulse
 				</button>
 			</div>
 		</div>
 
 		<!-- v2.3 Terrarium — demo the Memory Birth Ritual on the Graph page -->
-		<div class="p-4 glass rounded-xl space-y-3">
+		<div class="p-4 glass rounded-xl space-y-3 lift">
 			<div class="flex items-center justify-between">
 				<div>
 					<div class="text-sm text-text font-medium">Birth Ritual Preview</div>
@@ -138,13 +162,13 @@
 				</div>
 				<button onclick={fireBirthRitualDemo}
 					class="px-4 py-2 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-xl hover:bg-dream/30 transition flex items-center gap-2">
-					<span>✺</span> Trigger Birth
+					<Icon name="memories" size={14} /> Trigger Birth
 				</button>
 			</div>
 		</div>
 
 		<!-- Consolidation -->
-		<div class="p-4 glass rounded-xl space-y-3">
+		<div class="p-4 glass rounded-xl space-y-3 lift">
 			<div class="flex items-center justify-between">
 				<div>
 					<div class="text-sm text-text font-medium">FSRS-6 Consolidation</div>
@@ -165,19 +189,19 @@
 					<div class="grid grid-cols-3 gap-3 text-center">
 						{#if consolidationResult.nodesProcessed !== undefined}
 							<div>
-								<div class="text-lg text-text font-semibold">{consolidationResult.nodesProcessed}</div>
+								<div class="text-lg text-text font-semibold tabular-nums">{consolidationResult.nodesProcessed}</div>
 								<div class="text-[10px] text-muted">Processed</div>
 							</div>
 						{/if}
 						{#if consolidationResult.decayApplied !== undefined}
 							<div>
-								<div class="text-lg text-decay font-semibold">{consolidationResult.decayApplied}</div>
+								<div class="text-lg text-decay font-semibold tabular-nums">{consolidationResult.decayApplied}</div>
 								<div class="text-[10px] text-muted">Decayed</div>
 							</div>
 						{/if}
 						{#if consolidationResult.embeddingsGenerated !== undefined}
 							<div>
-								<div class="text-lg text-synapse-glow font-semibold">{consolidationResult.embeddingsGenerated}</div>
+								<div class="text-lg text-synapse-glow font-semibold tabular-nums">{consolidationResult.embeddingsGenerated}</div>
 								<div class="text-[10px] text-muted">Embedded</div>
 							</div>
 						{/if}
@@ -187,7 +211,7 @@
 		</div>
 
 		<!-- Dream -->
-		<div class="p-4 glass rounded-xl space-y-3">
+		<div class="p-4 glass rounded-xl space-y-3 lift">
 			<div class="flex items-center justify-between">
 				<div>
 					<div class="text-sm text-text font-medium">Memory Dream Cycle</div>
@@ -227,9 +251,9 @@
 
 	<!-- Retention Distribution -->
 	{#if retentionDist}
-		<section class="space-y-4">
+		<section class="space-y-4" use:reveal={{ delay: 120 }}>
 			<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-				<span class="text-recall">◫</span> Retention Distribution
+				<Icon name="importance" size={16} class="text-recall" /> Retention Distribution
 			</h2>
 			<div class="p-4 glass rounded-xl">
 				{#if retentionDist.distribution && Array.isArray(retentionDist.distribution)}
@@ -254,9 +278,9 @@
 	{/if}
 
 	<!-- Keyboard Shortcuts -->
-	<section class="space-y-4">
+	<section class="space-y-4" use:reveal={{ delay: 160 }}>
 		<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-			<span class="text-synapse">⌨</span> Keyboard Shortcuts
+			<Icon name="command" size={16} class="text-synapse" /> Keyboard Shortcuts
 		</h2>
 		<div class="p-4 glass-subtle rounded-xl">
 			<div class="grid grid-cols-2 gap-2 text-xs">
@@ -280,14 +304,14 @@
 	</section>
 
 	<!-- About -->
-	<section class="space-y-4">
+	<section class="space-y-4" use:reveal={{ delay: 200 }}>
 		<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
-			<span class="text-memory">◎</span> About
+			<Icon name="logo" size={16} class="text-memory" /> About
 		</h2>
-		<div class="p-4 glass rounded-xl space-y-3">
+		<div class="p-4 glass rounded-xl space-y-3 lift">
 			<div class="flex items-center gap-4">
-				<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright text-xl font-bold shadow-lg shadow-synapse/20">
-					V
+				<div class="logo-tile w-12 h-12 rounded-xl bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright shadow-lg shadow-synapse/20">
+					<Icon name="logo" size={20} strokeWidth={1.8} />
 				</div>
 				<div>
 					<div class="text-sm text-bright font-semibold">Vestige v2.1 "Nuclear Dashboard"</div>
@@ -308,3 +332,71 @@
 		</div>
 	</section>
 </div>
+
+<style>
+	/* ── Live connection pill in the header right-slot ──────────────────────── */
+	.conn-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.3rem 0.7rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--color-recall, #34d399);
+		background: color-mix(in srgb, var(--color-recall, #34d399) 12%, transparent);
+		border: 1px solid color-mix(in srgb, var(--color-recall, #34d399) 28%, transparent);
+		white-space: nowrap;
+	}
+	.conn-pill.idle {
+		color: var(--color-dim, #8b95a5);
+		background: rgba(255, 255, 255, 0.04);
+		border-color: rgba(255, 255, 255, 0.08);
+	}
+	.conn-dot {
+		display: inline-block;
+		flex-shrink: 0;
+	}
+
+	/* ── Refresh button ─────────────────────────────────────────────────────── */
+	.refresh-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.3rem 0.65rem;
+		border-radius: 999px;
+		font-size: 0.75rem;
+		color: var(--color-muted, #6b7280);
+		background: rgba(255, 255, 255, 0.02);
+		border: 1px solid rgba(255, 255, 255, 0.06);
+		transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+	}
+	.refresh-btn:hover {
+		color: var(--color-text, #e5e7eb);
+		background: rgba(255, 255, 255, 0.05);
+		border-color: rgba(255, 255, 255, 0.12);
+	}
+
+	/* ── About logo tile — a soft synapse glow so the masthead reads alive ──── */
+	.logo-tile {
+		position: relative;
+	}
+	.logo-tile::after {
+		content: '';
+		position: absolute;
+		inset: -1px;
+		border-radius: inherit;
+		box-shadow: 0 0 18px -2px var(--color-synapse-glow, #818cf8);
+		opacity: 0.4;
+		pointer-events: none;
+	}
+	@media not (prefers-reduced-motion: reduce) {
+		.logo-tile::after {
+			animation: logo-glow 4s ease-in-out infinite;
+		}
+		@keyframes logo-glow {
+			0%, 100% { opacity: 0.25; }
+			50% { opacity: 0.55; }
+		}
+	}
+</style>
diff --git a/apps/dashboard/src/routes/(app)/stats/+page.svelte b/apps/dashboard/src/routes/(app)/stats/+page.svelte
index 50f2cb6..eae40a0 100644
--- a/apps/dashboard/src/routes/(app)/stats/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/stats/+page.svelte
@@ -2,6 +2,11 @@
 	import { onMount } from 'svelte';
 	import { api } from '$stores/api';
 	import type { SystemStats, HealthCheck, RetentionDistribution } from '$types';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import { reveal } from '$lib/actions/reveal';
+	import { spotlight } from '$lib/actions/interactions';
+	import { NODE_TYPE_COLORS } from '$types';
 
 	let stats: SystemStats | null = $state(null);
 	let health: HealthCheck | null = $state(null);
@@ -37,45 +42,59 @@
 </script>
 
 <div class="p-6 max-w-5xl mx-auto space-y-6">
-	<h1 class="text-xl text-bright font-semibold">System Stats</h1>
+	<PageHeader
+		icon="stats"
+		title="System Stats"
+		subtitle="Live health and retention across your memory store"
+		accent="recall"
+	>
+		{#if health}
+			<div class="flex items-center gap-2 px-3 py-1.5 rounded-full glass-subtle text-xs" style="color: {statusColor(health.status)}">
+				<span class="ping-host w-2 h-2 rounded-full" style="color: {statusColor(health.status)}; background: {statusColor(health.status)}"></span>
+				<span class="font-semibold tracking-wide">{health.status.toUpperCase()}</span>
+				<span class="text-muted">v{health.version}</span>
+			</div>
+		{/if}
+	</PageHeader>
 
 	{#if loading}
 		<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
 			{#each Array(8) as _}
-				<div class="h-24 glass-subtle rounded-xl animate-pulse"></div>
+				<div class="h-24 glass-subtle rounded-xl shimmer"></div>
 			{/each}
 		</div>
 	{:else if stats && health}
-		<!-- Status banner -->
-		<div class="flex items-center gap-3 p-4 glass rounded-xl" style="border-color: {statusColor(health.status)}30">
-			<div class="w-3 h-3 rounded-full animate-pulse-glow" style="background: {statusColor(health.status)}"></div>
-			<span class="text-sm font-medium" style="color: {statusColor(health.status)}">{health.status.toUpperCase()}</span>
-			<span class="text-xs text-dim">v{health.version}</span>
-		</div>
-
 		<!-- Key metrics -->
 		<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-			<div class="p-4 glass rounded-xl">
-				<div class="text-2xl text-bright font-bold">{stats.totalMemories}</div>
-				<div class="text-xs text-dim mt-1">Total Memories</div>
+			<div use:reveal={{ delay: 0 }} use:spotlight class="metric-card spotlight-surface lift p-4 glass rounded-xl">
+				<div class="relative z-[1] text-3xl text-bright font-bold">
+					<AnimatedNumber value={stats.totalMemories} />
+				</div>
+				<div class="relative z-[1] text-xs text-dim mt-1">Total Memories</div>
 			</div>
-			<div class="p-4 glass rounded-xl">
-				<div class="text-2xl font-bold" style="color: {stats.averageRetention > 0.7 ? '#10b981' : stats.averageRetention > 0.4 ? '#f59e0b' : '#ef4444'}">{(stats.averageRetention * 100).toFixed(1)}%</div>
-				<div class="text-xs text-dim mt-1">Avg Retention</div>
+			<div use:reveal={{ delay: 70 }} use:spotlight class="metric-card spotlight-surface lift p-4 glass rounded-xl">
+				<div class="relative z-[1] text-3xl font-bold" style="color: {stats.averageRetention > 0.7 ? 'var(--color-recall)' : stats.averageRetention > 0.4 ? 'var(--color-warning)' : 'var(--color-decay)'}">
+					<AnimatedNumber value={stats.averageRetention} scale={100} decimals={1} suffix="%" />
+				</div>
+				<div class="relative z-[1] text-xs text-dim mt-1">Avg Retention</div>
 			</div>
-			<div class="p-4 glass rounded-xl">
-				<div class="text-2xl text-bright font-bold">{stats.dueForReview}</div>
-				<div class="text-xs text-dim mt-1">Due for Review</div>
+			<div use:reveal={{ delay: 140 }} use:spotlight class="metric-card spotlight-surface lift p-4 glass rounded-xl">
+				<div class="relative z-[1] text-3xl text-bright font-bold">
+					<AnimatedNumber value={stats.dueForReview} />
+				</div>
+				<div class="relative z-[1] text-xs text-dim mt-1">Due for Review</div>
 			</div>
-			<div class="p-4 glass rounded-xl">
-				<div class="text-2xl text-bright font-bold">{stats.embeddingCoverage.toFixed(0)}%</div>
-				<div class="text-xs text-dim mt-1">Embedding Coverage</div>
+			<div use:reveal={{ delay: 210 }} use:spotlight class="metric-card spotlight-surface lift p-4 glass rounded-xl">
+				<div class="relative z-[1] text-3xl text-bright font-bold">
+					<AnimatedNumber value={stats.embeddingCoverage} decimals={0} suffix="%" />
+				</div>
+				<div class="relative z-[1] text-xs text-dim mt-1">Embedding Coverage</div>
 			</div>
 		</div>
 
 		<!-- Retention Distribution -->
 		{#if retention}
-			<div class="p-6 glass rounded-xl">
+			<div use:reveal class="p-6 glass rounded-xl">
 				<h2 class="text-sm text-bright font-semibold mb-4">Retention Distribution</h2>
 				<div class="flex items-end gap-1 h-40">
 					{#each retention.distribution as bucket, i}
@@ -92,14 +111,14 @@
 			</div>
 
 			<!-- Type breakdown -->
-			<div class="p-6 glass-subtle rounded-xl">
+			<div use:reveal class="p-6 glass-subtle rounded-xl">
 				<h2 class="text-sm text-bright font-semibold mb-4">Memory Types</h2>
 				<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
 					{#each Object.entries(retention.byType) as [type, count]}
-						<div class="flex items-center gap-2 text-sm">
-							<div class="w-3 h-3 rounded-full" style="background: {({'fact':'#00A8FF','concept':'#9D00FF','event':'#FFB800','person':'#00FFD1','note':'#8B95A5','pattern':'#FF3CAC','decision':'#FF4757'})[type] || '#8B95A5'}"></div>
-							<span class="text-dim">{type}</span>
-							<span class="text-muted ml-auto">{count}</span>
+						<div class="flex items-center gap-2 text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition">
+							<div class="w-3 h-3 rounded-full" style="background: {NODE_TYPE_COLORS[type] || '#8B95A5'}; box-shadow: 0 0 8px {NODE_TYPE_COLORS[type] || '#8B95A5'}80"></div>
+							<span class="text-dim capitalize">{type}</span>
+							<span class="text-muted ml-auto tabular-nums"><AnimatedNumber value={count} /></span>
 						</div>
 					{/each}
 				</div>
@@ -107,12 +126,18 @@
 
 			<!-- Endangered memories -->
 			{#if retention.endangered.length > 0}
-				<div class="p-6 glass rounded-xl !border-decay/20">
-					<h2 class="text-sm text-decay font-semibold mb-3">Endangered Memories ({retention.endangered.length})</h2>
-					<div class="space-y-2 max-h-48 overflow-y-auto">
+				<div use:reveal class="p-6 glass rounded-xl !border-decay/20">
+					<h2 class="text-sm text-decay font-semibold mb-3 flex items-center gap-2">
+						<span class="breathe inline-block w-2 h-2 rounded-full bg-decay text-decay"></span>
+						Endangered Memories ({retention.endangered.length})
+					</h2>
+					<div class="space-y-1 max-h-48 overflow-y-auto">
 						{#each retention.endangered.slice(0, 20) as m}
-							<div class="flex items-center gap-3 text-sm">
-								<span class="text-xs text-decay">{(m.retentionStrength * 100).toFixed(0)}%</span>
+							<div class="flex items-center gap-3 text-sm rounded-lg px-2 py-1 hover:bg-decay/[0.06] transition">
+								<span class="text-xs text-decay tabular-nums w-9">{(m.retentionStrength * 100).toFixed(0)}%</span>
+								<div class="w-16 h-1 rounded-full bg-deep overflow-hidden shrink-0">
+									<div class="h-full rounded-full bg-decay" style="width: {m.retentionStrength * 100}%"></div>
+								</div>
 								<span class="text-dim truncate">{m.content}</span>
 							</div>
 						{/each}
@@ -122,11 +147,17 @@
 		{/if}
 
 		<!-- Actions -->
-		<div class="flex gap-3">
+		<div use:reveal class="flex gap-3">
 			<button onclick={runConsolidation}
-				class="px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-xl hover:bg-warning/30 transition">
+				class="lift px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-xl hover:bg-warning/30 transition">
 				Run Consolidation
 			</button>
 		</div>
 	{/if}
 </div>
+
+<style>
+	.metric-card {
+		cursor: default;
+	}
+</style>
diff --git a/apps/dashboard/src/routes/(app)/timeline/+page.svelte b/apps/dashboard/src/routes/(app)/timeline/+page.svelte
index 25401a4..2e850f1 100644
--- a/apps/dashboard/src/routes/(app)/timeline/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/timeline/+page.svelte
@@ -3,6 +3,11 @@
 	import { api } from '$stores/api';
 	import type { TimelineDay } from '$types';
 	import { NODE_TYPE_COLORS } from '$types';
+	import PageHeader from '$lib/components/PageHeader.svelte';
+	import AnimatedNumber from '$lib/components/AnimatedNumber.svelte';
+	import Dropdown, { type DropdownOption } from '$lib/components/Dropdown.svelte';
+	import Icon from '$lib/components/Icon.svelte';
+	import { reveal } from '$lib/actions/reveal';
 
 	let timeline: TimelineDay[] = $state([]);
 	let loading = $state(true);
@@ -22,29 +27,61 @@
 			loading = false;
 		}
 	}
+
+	// Day-range filter as a clear, labelled dropdown (was a bare native <select>).
+	const dayOptions: DropdownOption[] = [
+		{ value: '7', label: 'Last 7 days' },
+		{ value: '14', label: 'Last 14 days' },
+		{ value: '30', label: 'Last 30 days' },
+		{ value: '90', label: 'Last 90 days' },
+		{ value: '365', label: 'Last year' },
+	];
+	// `days` is a number; the Dropdown binds to a string. Keep a string mirror
+	// and reconcile through the change handler so reloads use the parsed value.
+	let daysChoice = $state('14');
+	function onDaysChange(v: string) {
+		days = parseInt(v, 10);
+		loadTimeline();
+	}
+
+	// Total memories across the loaded range — drives the live header count.
+	let totalMemories = $derived(timeline.reduce((sum, d) => sum + d.count, 0));
 </script>
 
 <div class="p-6 max-w-4xl mx-auto space-y-6">
-	<div class="flex items-center justify-between">
-		<h1 class="text-xl text-bright font-semibold">Timeline</h1>
-		<select bind:value={days} onchange={loadTimeline}
-			class="px-3 py-2 bg-white/[0.03] border border-synapse/10 rounded-xl text-dim text-sm focus:outline-none backdrop-blur-sm">
-			<option value={7}>7 days</option>
-			<option value={14}>14 days</option>
-			<option value={30}>30 days</option>
-			<option value={90}>90 days</option>
-		</select>
-	</div>
+	<PageHeader
+		icon="timeline"
+		title="Timeline"
+		subtitle="Watch your memories accumulate, day by day"
+		accent="synapse"
+	>
+		<div class="flex items-center gap-4">
+			<span class="text-dim text-sm tabular-nums">
+				<AnimatedNumber value={totalMemories} /> memories
+			</span>
+			<Dropdown
+				options={dayOptions}
+				bind:value={daysChoice}
+				label="Range"
+				icon="schedule"
+				onChange={onDaysChange}
+			/>
+		</div>
+	</PageHeader>
 
 	{#if loading}
 		<div class="space-y-4">
 			{#each Array(7) as _}
-				<div class="h-16 glass-subtle rounded-xl animate-pulse"></div>
+				<div class="h-16 glass-subtle rounded-xl shimmer"></div>
 			{/each}
 		</div>
 	{:else if timeline.length === 0}
-		<div class="text-center py-20 text-dim">
-			<p>No memories in the selected time range.</p>
+		<div class="enter flex flex-col items-center justify-center text-center py-20 gap-4">
+			<div class="text-dim opacity-60 breathe"><Icon name="timeline" size={48} strokeWidth={1.2} /></div>
+			<p class="text-dim text-sm max-w-sm">
+				No memories in this window yet — widen the range or come back once Vestige has
+				been remembering a while.
+			</p>
 		</div>
 	{:else}
 		<div class="relative">
@@ -52,40 +89,43 @@
 			<div class="absolute left-6 top-0 bottom-0 w-px bg-synapse/15"></div>
 
 			<div class="space-y-4">
-				{#each timeline as day (day.date)}
-					<div class="relative pl-14">
+				{#each timeline as day, i (day.date)}
+					<div use:reveal={{ delay: Math.min(i * 35, 350), y: 12 }} class="relative pl-14">
 						<!-- Dot -->
 						<div class="absolute left-4 top-3 w-5 h-5 rounded-full border-2 border-synapse bg-void flex items-center justify-center">
-							<div class="w-2 h-2 rounded-full bg-synapse"></div>
+							<div class="w-2 h-2 rounded-full bg-synapse breathe"></div>
 						</div>
 
 						<button onclick={() => expandedDay = expandedDay === day.date ? null : day.date}
-							class="w-full text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.03] transition-all">
+							class="lift w-full text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04] transition-all duration-200
+								{expandedDay === day.date ? '!border-synapse/40 glow-synapse' : ''}">
 							<div class="flex items-center justify-between">
-								<div>
+								<div class="flex items-baseline gap-2">
 									<span class="text-sm text-bright font-medium">{day.date}</span>
-									<span class="text-xs text-dim ml-2">{day.count} memories</span>
+									<span class="text-xs text-dim tabular-nums">
+										<AnimatedNumber value={day.count} /> memories
+									</span>
 								</div>
 								<!-- Dots for memory types -->
-								<div class="flex gap-1">
+								<div class="flex items-center gap-1">
 									{#each day.memories.slice(0, 10) as m}
-										<div class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}; opacity: {0.3 + m.retentionStrength * 0.7}"></div>
+										<div class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}; opacity: {0.3 + m.retentionStrength * 0.7}; box-shadow: 0 0 5px {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}66"></div>
 									{/each}
 									{#if day.memories.length > 10}
-										<span class="text-xs text-muted">+{day.memories.length - 10}</span>
+										<span class="text-xs text-muted tabular-nums">+{day.memories.length - 10}</span>
 									{/if}
 								</div>
 							</div>
 
 							{#if expandedDay === day.date}
-								<div class="mt-3 pt-3 border-t border-synapse/10 space-y-2">
+								<div class="enter mt-3 pt-3 border-t border-synapse/10 space-y-2">
 									{#each day.memories as m}
 										<div class="flex items-start gap-2 text-sm">
 											<div class="w-2 h-2 mt-1.5 rounded-full flex-shrink-0" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}"></div>
 											<div class="flex-1 min-w-0">
 												<span class="text-dim line-clamp-1">{m.content}</span>
 											</div>
-											<span class="text-xs text-muted flex-shrink-0">{(m.retentionStrength * 100).toFixed(0)}%</span>
+											<span class="text-xs text-muted flex-shrink-0 tabular-nums">{(m.retentionStrength * 100).toFixed(0)}%</span>
 										</div>
 									{/each}
 								</div>
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index 1182c70..1e160fd 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -18,6 +18,7 @@
 	import AmbientAwarenessStrip from '$lib/components/AmbientAwarenessStrip.svelte';
 	import VerdictBar from '$lib/components/VerdictBar.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
+	import Icon, { type IconName } from '$lib/components/Icon.svelte';
 	import { initTheme } from '$stores/theme';
 
 	let { children } = $props();
@@ -93,23 +94,26 @@
 		});
 	});
 
-	const nav = [
-		{ href: '/graph', label: 'Graph', icon: '◎', shortcut: 'G' },
-		{ href: '/reasoning', label: 'Reasoning', icon: '✦', shortcut: 'R' },
-		{ href: '/memories', label: 'Memories', icon: '◈', shortcut: 'M' },
-		{ href: '/timeline', label: 'Timeline', icon: '◷', shortcut: 'T' },
-		{ href: '/feed', label: 'Feed', icon: '◉', shortcut: 'F' },
-		{ href: '/explore', label: 'Explore', icon: '◬', shortcut: 'E' },
-		{ href: '/activation', label: 'Activation', icon: '◈', shortcut: 'A' },
-		{ href: '/dreams', label: 'Dreams', icon: '✧', shortcut: 'D' },
-		{ href: '/schedule', label: 'Schedule', icon: '◷', shortcut: 'C' },
-		{ href: '/importance', label: 'Importance', icon: '◎', shortcut: 'P' },
-		{ href: '/duplicates', label: 'Duplicates', icon: '◉', shortcut: 'U' },
-		{ href: '/contradictions', label: 'Contradictions', icon: '⚠', shortcut: 'X' },
-		{ href: '/patterns', label: 'Patterns', icon: '▦', shortcut: 'N' },
-		{ href: '/intentions', label: 'Intentions', icon: '◇', shortcut: 'I' },
-		{ href: '/stats', label: 'Stats', icon: '◫', shortcut: 'S' },
-		{ href: '/settings', label: 'Settings', icon: '⚙', shortcut: ',' },
+	// Each nav item carries a UNIQUE semantic icon (see Icon.svelte). The old
+	// set reused the same Unicode glyph across multiple items; every entry here
+	// now has a distinct silhouette that reads instantly.
+	const nav: { href: string; label: string; icon: IconName; shortcut: string }[] = [
+		{ href: '/graph', label: 'Graph', icon: 'graph', shortcut: 'G' },
+		{ href: '/reasoning', label: 'Reasoning', icon: 'reasoning', shortcut: 'R' },
+		{ href: '/memories', label: 'Memories', icon: 'memories', shortcut: 'M' },
+		{ href: '/timeline', label: 'Timeline', icon: 'timeline', shortcut: 'T' },
+		{ href: '/feed', label: 'Feed', icon: 'feed', shortcut: 'F' },
+		{ href: '/explore', label: 'Explore', icon: 'explore', shortcut: 'E' },
+		{ href: '/activation', label: 'Activation', icon: 'activation', shortcut: 'A' },
+		{ href: '/dreams', label: 'Dreams', icon: 'dreams', shortcut: 'D' },
+		{ href: '/schedule', label: 'Schedule', icon: 'schedule', shortcut: 'C' },
+		{ href: '/importance', label: 'Importance', icon: 'importance', shortcut: 'P' },
+		{ href: '/duplicates', label: 'Duplicates', icon: 'duplicates', shortcut: 'U' },
+		{ href: '/contradictions', label: 'Contradictions', icon: 'contradictions', shortcut: 'X' },
+		{ href: '/patterns', label: 'Patterns', icon: 'patterns', shortcut: 'N' },
+		{ href: '/intentions', label: 'Intentions', icon: 'intentions', shortcut: 'I' },
+		{ href: '/stats', label: 'Stats', icon: 'stats', shortcut: 'S' },
+		{ href: '/settings', label: 'Settings', icon: 'settings', shortcut: ',' },
 	];
 
 	// Mobile nav shows top 5 items
@@ -148,11 +152,11 @@
 		<!-- Desktop Sidebar (hidden on mobile) -->
 		<nav class="hidden md:flex w-16 lg:w-56 flex-shrink-0 glass-sidebar flex-col">
 			<!-- Logo -->
-			<a href="{base}/graph" class="flex items-center gap-3 px-4 py-5 border-b border-synapse/10">
-				<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright text-sm font-bold shadow-lg shadow-synapse/20">
-					V
+			<a href="{base}/graph" class="logo-link flex items-center gap-3 px-4 py-5 border-b border-synapse/10">
+				<div class="logo-mark w-8 h-8 rounded-lg bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright shadow-lg shadow-synapse/20">
+					<Icon name="logo" size={18} strokeWidth={1.8} />
 				</div>
-				<span class="hidden lg:block text-sm font-semibold text-bright tracking-wide">VESTIGE</span>
+				<span class="hidden lg:block text-sm font-semibold text-bright tracking-[0.18em]">VESTIGE</span>
 			</a>
 
 			<!-- Nav items -->
@@ -161,12 +165,14 @@
 					{@const active = isActive(item.href, $page.url.pathname)}
 					<a
 						href="{base}{item.href}"
-						class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 text-sm
+						class="nav-link group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 text-sm
 							{active
 								? 'bg-synapse/15 text-synapse-glow border border-synapse/30 shadow-[0_0_12px_rgba(99,102,241,0.15)] nav-active-border'
 								: 'text-dim hover:text-text hover:bg-white/[0.03] border border-transparent'}"
 					>
-						<span class="text-base w-5 text-center">{item.icon}</span>
+						<span class="nav-icon w-5 flex justify-center transition-transform duration-200 group-hover:scale-110">
+							<Icon name={item.icon} size={18} />
+						</span>
 						<span class="hidden lg:block">{item.label}</span>
 						<span class="hidden lg:block ml-auto text-[10px] text-muted/50 font-mono">{item.shortcut}</span>
 					</a>
@@ -179,8 +185,9 @@
 					onclick={() => { showCommandPalette = true; cmdQuery = ''; requestAnimationFrame(() => cmdInput?.focus()); }}
 					class="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-muted hover:text-dim hover:bg-white/[0.03] transition border border-subtle/15"
 				>
-					<span class="text-[10px] font-mono bg-white/[0.04] px-1.5 py-0.5 rounded">⌘K</span>
+					<Icon name="command" size={14} />
 					<span class="hidden lg:block">Command</span>
+					<span class="hidden lg:block ml-auto text-[10px] font-mono bg-white/[0.04] px-1.5 py-0.5 rounded">⌘K</span>
 				</button>
 			</div>
 
@@ -229,7 +236,7 @@
 						class="flex flex-col items-center gap-0.5 px-3 py-2 rounded-lg transition-all min-w-[3.5rem]
 							{active ? 'text-synapse-glow' : 'text-muted'}"
 					>
-						<span class="text-lg">{item.icon}</span>
+						<Icon name={item.icon} size={20} />
 						<span class="text-[9px]">{item.label}</span>
 					</a>
 				{/each}
@@ -259,7 +266,7 @@
 	>
 		<div class="w-full max-w-lg glass-panel rounded-xl shadow-2xl shadow-synapse/10 overflow-hidden">
 			<div class="flex items-center gap-3 px-4 py-3 border-b border-synapse/10">
-				<span class="text-synapse text-sm">◎</span>
+				<span class="text-synapse"><Icon name="search" size={16} /></span>
 				<input
 					bind:this={cmdInput}
 					bind:value={cmdQuery}
@@ -280,7 +287,7 @@
 						onclick={() => cmdNavigate(item.href)}
 						class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-dim hover:text-text hover:bg-white/[0.04] transition"
 					>
-						<span class="text-base w-5 text-center">{item.icon}</span>
+						<span class="w-5 flex justify-center"><Icon name={item.icon} size={17} /></span>
 						<span>{item.label}</span>
 						<span class="ml-auto text-[10px] text-muted/50 font-mono hidden md:block">{item.shortcut}</span>
 					</button>
@@ -297,4 +304,25 @@
 	.safe-bottom {
 		padding-bottom: env(safe-area-inset-bottom, 0px);
 	}
+
+	/* Logo breathes a faint synapse glow on hover — the mark feels live. */
+	.logo-mark {
+		transition:
+			transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+			box-shadow 0.3s ease;
+	}
+	.logo-link:hover .logo-mark {
+		transform: rotate(-6deg) scale(1.08);
+		box-shadow:
+			0 0 0 1px rgba(129, 140, 248, 0.4),
+			0 0 22px rgba(99, 102, 241, 0.5);
+	}
+
+	/* The active nav item's icon picks up a soft drop-shadow glow so the
+	   current location reads at a glance even in the collapsed (icon-only)
+	   sidebar. */
+	.nav-link.text-synapse-glow .nav-icon :global(svg),
+	.nav-active-border .nav-icon :global(svg) {
+		filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.55));
+	}
 </style>