diff --git a/server/shell.ts b/server/shell.ts
index acfd28e..45aa6c9 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -1619,11 +1619,16 @@ export function renderOnboarding(opts: OnboardingOptions): string {
 	const body = `
 	<div class="onboarding">
 		<div class="onboarding__card">
+			<div class="onboarding__glow"></div>
 			<span class="onboarding__icon">${moduleIcon}</span>
 			<h1 class="onboarding__title">${escapeHtml(moduleName)}</h1>
 			<p class="onboarding__desc">${escapeHtml(moduleDescription)}</p>
+			<p class="onboarding__hint">This app hasn't been used in <strong>${escapeHtml(spaceSlug)}</strong> yet. Load sample data to explore, or jump into the public demo.</p>
 			<div class="onboarding__ctas">
-				<a href="${escapeAttr(templateUrl)}" class="onboarding__btn onboarding__btn--primary">Get Started</a>
+				<a href="${escapeAttr(templateUrl)}" class="onboarding__btn onboarding__btn--primary">
+					<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M8 3v10M3 8h10"/></svg>
+					Load Sample Data
+				</a>
 				<a href="${escapeAttr(demoUrl)}" class="onboarding__btn onboarding__btn--secondary">Try Demo</a>
 			</div>
 		</div>
@@ -1646,25 +1651,44 @@ const ONBOARDING_CSS = `
   min-height: calc(80vh - 56px); padding: 3rem 1.5rem 2rem;
 }
 .onboarding__card {
-  text-align: center; max-width: 520px; width: 100%;
+  position: relative; text-align: center; max-width: 520px; width: 100%;
   padding: 2.5rem 2rem; margin-bottom: 2rem;
+  background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
+  border-radius: 16px; overflow: hidden;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
 }
-.onboarding__icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
+.onboarding__glow {
+  position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
+  width: 300px; height: 300px; border-radius: 50%;
+  background: radial-gradient(circle, rgba(20,184,166,0.08) 0%, transparent 70%);
+  pointer-events: none;
+}
+.onboarding__icon { position: relative; font-size: 3.5rem; display: block; margin-bottom: 1rem; }
 .onboarding__title {
+  position: relative;
   font-size: 2rem; margin: 0 0 0.75rem; font-weight: 700;
   background: var(--rs-gradient-brand);
   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 .onboarding__desc {
+  position: relative;
   font-size: 1.05rem; color: var(--rs-text-secondary);
-  line-height: 1.6; margin: 0 0 2rem;
+  line-height: 1.6; margin: 0 0 1rem;
 }
+.onboarding__hint {
+  position: relative;
+  font-size: 0.8125rem; color: var(--rs-text-muted);
+  line-height: 1.5; margin: 0 0 1.75rem;
+}
+.onboarding__hint strong { color: var(--rs-text-secondary); font-weight: 600; }
 .onboarding__ctas {
+  position: relative;
   display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
 }
 .onboarding__btn {
-  display: inline-block; padding: 0.75rem 1.75rem; border-radius: 0.5rem;
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  padding: 0.75rem 1.75rem; border-radius: 0.5rem;
   font-size: 0.95rem; font-weight: 600; text-decoration: none;
   transition: transform 0.2s, box-shadow 0.2s;
 }