diff --git a/modules/rsocials/mod.ts b/modules/rsocials/mod.ts
index 41497d3..25f9e16 100644
--- a/modules/rsocials/mod.ts
+++ b/modules/rsocials/mod.ts
@@ -8,7 +8,7 @@
 import { resolve } from "node:path";
 import { mkdir, readdir, readFile, writeFile, unlink } from "node:fs/promises";
 import { Hono } from "hono";
-import { renderShell, renderExternalAppShell, escapeHtml } from "../../server/shell";
+import { renderShell, renderExternalAppShell, escapeHtml, RICH_LANDING_CSS } from "../../server/shell";
 import { getModuleInfoList } from "../../shared/module";
 import type { RSpaceModule } from "../../shared/module";
 import { renderLanding } from "./landing";
@@ -1969,68 +1969,9 @@ routes.get("/", (c) => {
 
 	const body = isDemo
 		? renderDemoFeedHTML()
-		: `
-		<div class="rsocials-app" data-space="${space}">
-			<div class="rsocials-header">
-				<h2>Community Feed</h2>
-				<p class="rsocials-subtitle">Social activity across your community</p>
-			</div>
-			<div id="rsocials-feed" class="rsocials-feed">
-				<div class="rsocials-loading">Loading feed…</div>
-			</div>
-		</div>
-		<script type="module">
-			const space = document.querySelector('.rsocials-app')?.dataset.space || 'demo';
-			const feedEl = document.getElementById('rsocials-feed');
+		: renderLanding();
 
-			try {
-				const res = await fetch('api/feed');
-				const data = await res.json();
-
-				if (!data.items?.length) {
-					feedEl.innerHTML = '<p class="rsocials-empty">No posts yet. Share something with your community!</p>';
-					return;
-				}
-
-				feedEl.innerHTML = data.items.map(item => {
-					const time = new Date(item.timestamp);
-					const ago = Math.round((Date.now() - time.getTime()) / 60000);
-					const timeStr = ago < 60 ? ago + 'm ago' : Math.round(ago / 60) + 'h ago';
-					const sourceTag = '<span class="rsocials-source">' + item.source + '</span>';
-
-					return '<article class="rsocials-item">' +
-						'<div class="rsocials-item-header">' +
-							'<strong>' + item.author + '</strong> ' + sourceTag +
-							'<time>' + timeStr + '</time>' +
-						'</div>' +
-						'<p class="rsocials-item-content">' + item.content + '</p>' +
-						(item.url ? '<a class="rsocials-item-link" href="' + item.url + '" target="_blank" rel="noopener">' + item.url + '</a>' : '') +
-						'<div class="rsocials-item-actions">' +
-							'<span>♥ ' + (item.likes || 0) + '</span>' +
-							'<span>💬 ' + (item.replies || 0) + '</span>' +
-						'</div>' +
-					'</article>';
-				}).join('');
-
-				if (data.demo) {
-					feedEl.insertAdjacentHTML('beforeend',
-						'<p class="rsocials-demo-notice">This is demo data. Connect ActivityPub or RSS feeds in your own space.</p>'
-					);
-				}
-			} catch(e) {
-				feedEl.innerHTML = '<p class="rsocials-empty">Failed to load feed.</p>';
-			}
-		</script>`;
-
-	return c.html(
-		renderShell({
-			title: `${space} — Socials | rSpace`,
-			moduleId: "rsocials",
-			spaceSlug: space,
-			modules: getModuleInfoList(),
-			theme: "dark",
-			body,
-			styles: `<style>
+	const demoFeedStyles = `<style>
 .rsocials-app { max-width: 640px; margin: 0 auto; padding: 2rem 1rem; }
 .rsocials-header { margin-bottom: 1.5rem; }
 .rsocials-header h2 {
@@ -2096,7 +2037,21 @@ routes.get("/", (c) => {
 	text-align: center; font-size: 0.75rem; color: var(--rs-text-muted);
 	padding: 1rem 0; border-top: 1px solid var(--rs-border-subtle); margin-top: 0.5rem;
 }
-</style>`,
+</style>`;
+
+	const styles = isDemo
+		? demoFeedStyles
+		: `<style>${RICH_LANDING_CSS}</style>`;
+
+	return c.html(
+		renderShell({
+			title: `${space} — Socials | rSpace`,
+			moduleId: "rsocials",
+			spaceSlug: space,
+			modules: getModuleInfoList(),
+			theme: "dark",
+			body,
+			styles,
 		}),
 	);
 });