diff --git a/modules/rchoices/components/folk-choices-dashboard.ts b/modules/rchoices/components/folk-choices-dashboard.ts
index bc6b340..c6cb419 100644
--- a/modules/rchoices/components/folk-choices-dashboard.ts
+++ b/modules/rchoices/components/folk-choices-dashboard.ts
@@ -31,7 +31,7 @@ class FolkChoicesDashboard extends HTMLElement {
 	private space: string;
 
 	/* Demo state */
-	private demoTab: "spider" | "ranking" | "voting" = "spider";
+	private demoTab: "spider" | "ranking" | "voting" | "crowdsurf" = "spider";
 	private hoveredPerson: string | null = null;
 	private rankItems: { id: number; name: string; emoji: string }[] = [];
 	private rankDragging: number | null = null;
@@ -503,15 +503,17 @@ class FolkChoicesDashboard extends HTMLElement {
 	}
 
 	private renderDemo() {
-		const tabs: { key: "spider" | "ranking" | "voting"; label: string; icon: string }[] = [
+		const tabs: { key: "spider" | "ranking" | "voting" | "crowdsurf"; label: string; icon: string }[] = [
 			{ key: "spider", label: "Spider Chart", icon: "🕸" },
 			{ key: "ranking", label: "Ranking", icon: "📊" },
 			{ key: "voting", label: "Live Voting", icon: "☑" },
+			{ key: "crowdsurf", label: "CrowdSurf", icon: "🏄" },
 		];
 
 		let content = "";
 		if (this.demoTab === "spider") content = this.renderSpider();
 		else if (this.demoTab === "ranking") content = this.renderRanking();
+		else if (this.demoTab === "crowdsurf") content = this.renderCrowdSurf();
 		else content = this.renderVoting();
 
 		this.shadow.innerHTML = `
@@ -725,6 +727,17 @@ class FolkChoicesDashboard extends HTMLElement {
 		</div>`;
 	}
 
+	private renderCrowdSurf(): string {
+		return `<div style="text-align:center;padding:2rem 1rem;">
+			<div style="font-size:3rem;margin-bottom:0.75rem;">🏄</div>
+			<h3 style="color:var(--rs-text-primary);margin:0 0 0.5rem;">CrowdSurf</h3>
+			<p style="color:var(--rs-text-secondary);margin:0 0 1.5rem;max-width:360px;margin-inline:auto;">
+				Swipe-based community coordination. Propose activities, set commitment thresholds, and watch them trigger when enough people join.
+			</p>
+			<a href="/${this.space}/crowdsurf" style="display:inline-block;padding:0.6rem 1.5rem;background:var(--rs-primary);color:#fff;border-radius:8px;text-decoration:none;font-weight:600;font-size:0.9rem;">Open CrowdSurf</a>
+		</div>`;
+	}
+
 	/* -- Demo event binding -- */
 
 	private bindDemoEvents() {
@@ -732,7 +745,7 @@ class FolkChoicesDashboard extends HTMLElement {
 		// Tab switching
 		this.shadow.querySelectorAll<HTMLButtonElement>(".demo-tab").forEach((btn) => {
 			btn.addEventListener("click", () => {
-				const tab = btn.dataset.tab as "spider" | "ranking" | "voting";
+				const tab = btn.dataset.tab as "spider" | "ranking" | "voting" | "crowdsurf";
 				if (tab && tab !== this.demoTab) {
 					this.demoTab = tab;
 					this.renderDemo();
diff --git a/modules/rchoices/mod.ts b/modules/rchoices/mod.ts
index 4f7c064..bc4c1c6 100644
--- a/modules/rchoices/mod.ts
+++ b/modules/rchoices/mod.ts
@@ -56,7 +56,7 @@ routes.get("/", (c) => {
 		modules: getModuleInfoList(),
 		theme: "dark",
 		body: `<folk-choices-dashboard space="${spaceSlug}"></folk-choices-dashboard>`,
-		scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=2"></script>`,
+		scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=3"></script>`,
 		styles: `<link rel="stylesheet" href="/modules/rchoices/choices.css">`,
 	}));
 });