diff --git a/web/routes/uix/+layout@.svelte b/web/routes/uix/+layout@.svelte
index f9e349c81..9182402aa 100644
--- a/web/routes/uix/+layout@.svelte
+++ b/web/routes/uix/+layout@.svelte
@@ -299,8 +299,7 @@
 				{ slug: '/uix/components/trans', label: 'Trans' },
 				{ slug: '/uix/components/format-number', label: 'FormatNumber' },
 				{ slug: '/uix/components/format-date', label: 'FormatDate' },
-				{ slug: '/uix/components/relative-time', label: 'RelativeTime' },
-				{ slug: '/uix/components/count-up', label: 'CountUp' }
+				{ slug: '/uix/components/relative-time', label: 'RelativeTime' }
 			]
 		},
 		{
@@ -344,6 +343,7 @@
 			kind: 'group',
 			heading: 'Text effects',
 			items: [
+				{ slug: '/uix/components/count-up', label: 'CountUp' },
 				{ slug: '/uix/components/text-gradient', label: 'TextGradient' },
 				{ slug: '/uix/components/text-circular', label: 'TextCircular' },
 				{ slug: '/uix/components/text-blur', label: 'TextBlur' },
diff --git a/web/routes/uix/components/count-up/+page.svelte b/web/routes/uix/components/count-up/+page.svelte
index bb6cc4ade..1e3690310 100644
--- a/web/routes/uix/components/count-up/+page.svelte
+++ b/web/routes/uix/components/count-up/+page.svelte
@@ -51,7 +51,7 @@
 
 <div data-uix-canvas-inner>
 	<header>
-		<div data-uix-eyebrow>Services · CountUp</div>
+		<div data-uix-eyebrow>Text effects · CountUp</div>
 		<h1 data-uix-page-title>CountUp</h1>
 		<p data-uix-page-lede>
 			Service component que anima un número de <code>from</code> → <code>to</code> con un settle de
@@ -72,7 +72,7 @@
 
 	<!-- Live preview always rendered -->
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700;">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); font-weight: 700; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${to}|${from}|${direction}|${delay}|${duration}|${useGrouping}|${demoLocale}`}
 				<CountUp {to} {from} {direction} {delay} {duration} {useGrouping} locale={demoLocale} />
 			{/key}
diff --git a/web/routes/uix/components/text-blur/+page.svelte b/web/routes/uix/components/text-blur/+page.svelte
index 32a045f6d..cb8f7fc87 100644
--- a/web/routes/uix/components/text-blur/+page.svelte
+++ b/web/routes/uix/components/text-blur/+page.svelte
@@ -60,7 +60,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600;">
+		<div data-uix-stage-area style="font-size: var(--font-size-2xl); font-weight: 600; background: var(--color-surface-default); color: var(--color-neutral-text);">
 			{#key `${runId}|${text}|${delay}|${animateBy}|${direction}|${stepDuration}`}
 				<TextBlur {text} {delay} {animateBy} {direction} {stepDuration} />
 			{/key}
diff --git a/web/routes/uix/components/text-circular/+page.svelte b/web/routes/uix/components/text-circular/+page.svelte
index 1f7b1da92..1e27251aa 100644
--- a/web/routes/uix/components/text-circular/+page.svelte
+++ b/web/routes/uix/components/text-circular/+page.svelte
@@ -62,7 +62,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextCircular {text} {spinDuration} {onHover} style={`--text-circular-size: ${size}rem`} />
 		</div>
 		<div data-uix-stage-trace>
diff --git a/web/routes/uix/components/text-focus/+page.svelte b/web/routes/uix/components/text-focus/+page.svelte
index d6d900ea3..919130ff1 100644
--- a/web/routes/uix/components/text-focus/+page.svelte
+++ b/web/routes/uix/components/text-focus/+page.svelte
@@ -65,7 +65,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area>
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextFocus
 				{sentence}
 				{manualMode}
diff --git a/web/routes/uix/components/text-gradient/+page.svelte b/web/routes/uix/components/text-gradient/+page.svelte
index dbf012529..36f70bc75 100644
--- a/web/routes/uix/components/text-gradient/+page.svelte
+++ b/web/routes/uix/components/text-gradient/+page.svelte
@@ -68,7 +68,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="font-size: var(--font-size-3xl);">
+		<div data-uix-stage-area style="font-size: var(--font-size-3xl); background: var(--color-surface-default);">
 			<TextGradient {colors} {animationSpeed} {showBorder} {direction} {pauseOnHover} {yoyo}>
 				{sample}
 			</TextGradient>
diff --git a/web/routes/uix/components/text-scramble/+page.svelte b/web/routes/uix/components/text-scramble/+page.svelte
index 118f8a791..aad6b323f 100644
--- a/web/routes/uix/components/text-scramble/+page.svelte
+++ b/web/routes/uix/components/text-scramble/+page.svelte
@@ -57,7 +57,7 @@
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area style="max-inline-size: 36rem;">
+		<div data-uix-stage-area style="background: var(--color-surface-default); color: var(--color-neutral-text);">
 			<TextScramble {text} {radius} {duration} {speed} {scrambleChars} />
 		</div>
 		<div data-uix-stage-trace>