diff --git a/app/layout.tsx b/app/layout.tsx
index 757d1bd..a956011 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import './globals.css'
+import { Header } from '@/components/Header'
+import { EcosystemFooter } from '@/components/EcosystemFooter'
 
 const geistSans = localFont({
   src: './fonts/GeistVF.woff',
@@ -35,7 +37,9 @@ export default function RootLayout({
         <script defer src="https://rdata.online/collect.js" data-website-id="0ebf1cfd-57e4-4fbe-925d-cd541d7bb3a8" />
       </head>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <Header current="funds" />
         {children}
+        <EcosystemFooter current="funds" />
       </body>
     </html>
   )
diff --git a/app/page.tsx b/app/page.tsx
index 6c6559e..9a639df 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,44 +1,8 @@
 import Link from 'next/link'
-import { AppSwitcher } from '@/components/AppSwitcher'
-import { AuthButton } from '@/components/AuthButton'
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
-      {/* Nav */}
-      <nav className="border-b border-slate-700/50 backdrop-blur-sm">
-        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <AppSwitcher current="funds" />
-            <div className="w-8 h-8 bg-gradient-to-br from-amber-400 to-emerald-500 rounded-lg flex items-center justify-center font-bold text-slate-900 text-sm">
-              rF
-            </div>
-            <span className="font-semibold text-lg">rFunds</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <Link
-              href="/tbff"
-              className="text-sm text-slate-300 hover:text-white transition-colors"
-            >
-              Demo
-            </Link>
-            <Link
-              href="/river"
-              className="text-sm text-slate-300 hover:text-white transition-colors"
-            >
-              River View
-            </Link>
-            <Link
-              href="/space"
-              className="text-sm px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg transition-colors font-medium"
-            >
-              Create Space
-            </Link>
-            <AuthButton />
-          </div>
-        </div>
-      </nav>
-
       {/* Hero */}
       <section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
         <div className="text-center max-w-3xl mx-auto">
@@ -175,37 +139,6 @@ export default function Home() {
           Create Your Space
         </Link>
       </section>
-
-      {/* Footer */}
-      <footer className="border-t border-slate-700/50 py-8">
-        <div className="max-w-6xl mx-auto px-6">
-          <div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-500 mb-4">
-            <span className="font-medium text-slate-400">r* Ecosystem</span>
-            <a href="https://rspace.online" className="hover:text-slate-300 transition-colors">rSpace</a>
-            <a href="https://rmaps.online" className="hover:text-slate-300 transition-colors">rMaps</a>
-            <a href="https://rnotes.online" className="hover:text-slate-300 transition-colors">rNotes</a>
-            <a href="https://rvote.online" className="hover:text-slate-300 transition-colors">rVote</a>
-            <a href="https://rfunds.online" className="hover:text-slate-300 transition-colors font-medium text-slate-300">rFunds</a>
-            <a href="https://rtrips.online" className="hover:text-slate-300 transition-colors">rTrips</a>
-            <a href="https://rcart.online" className="hover:text-slate-300 transition-colors">rCart</a>
-            <a href="https://rchoices.online" className="hover:text-slate-300 transition-colors">rChoices</a>
-            <a href="https://rwallet.online" className="hover:text-slate-300 transition-colors">rWallet</a>
-            <a href="https://rfiles.online" className="hover:text-slate-300 transition-colors">rFiles</a>
-            <a href="https://rtube.online" className="hover:text-slate-300 transition-colors">rTube</a>
-            <a href="https://rcal.online" className="hover:text-slate-300 transition-colors">rCal</a>
-            <a href="https://rnetwork.online" className="hover:text-slate-300 transition-colors">rNetwork</a>
-            <a href="https://rinbox.online" className="hover:text-slate-300 transition-colors">rInbox</a>
-            <a href="https://rstack.online" className="hover:text-slate-300 transition-colors">rStack</a>
-            <a href="https://rauctions.online" className="hover:text-slate-300 transition-colors">rAuctions</a>
-            <a href="https://rpubs.online" className="hover:text-slate-300 transition-colors">rPubs</a>
-            <a href="https://rbooks.online" className="hover:text-slate-300 transition-colors">rBooks</a>
-            <a href="https://rdata.online" className="hover:text-slate-300 transition-colors">rData</a>
-          </div>
-          <p className="text-center text-xs text-slate-600">
-            Part of the r* ecosystem — collaborative tools for communities.
-          </p>
-        </div>
-      </footer>
     </div>
   )
 }
diff --git a/components/AppSwitcher.tsx b/components/AppSwitcher.tsx
index 3696bad..2544fca 100644
--- a/components/AppSwitcher.tsx
+++ b/components/AppSwitcher.tsx
@@ -21,56 +21,91 @@ const MODULES: AppModule[] = [
   { id: 'cal',      name: 'rCal',      badge: 'rC',  color: 'bg-sky-300',     emoji: '📅', description: 'Collaborative scheduling & events',             domain: 'rcal.online' },
   { id: 'trips',    name: 'rTrips',    badge: 'rT',  color: 'bg-emerald-300', emoji: '✈️', description: 'Group travel planning in real time',            domain: 'rtrips.online' },
   { id: 'maps',     name: 'rMaps',     badge: 'rM',  color: 'bg-green-300',   emoji: '🗺️', description: 'Collaborative real-time mapping',               domain: 'rmaps.online' },
-  // Discussing & Deciding
+  // Communicating
+  { id: 'chats',    name: 'rChats',    badge: 'rCh', color: 'bg-emerald-200', emoji: '💬', description: 'Real-time encrypted messaging',                domain: 'rchats.online' },
   { id: 'inbox',    name: 'rInbox',    badge: 'rI',  color: 'bg-indigo-300',  emoji: '📬', description: 'Private group messaging',                        domain: 'rinbox.online' },
-  { id: 'choices',  name: 'rChoices',  badge: 'rCh', color: 'bg-fuchsia-300', emoji: '🔀', description: 'Collaborative decision making',                 domain: 'rchoices.online' },
+  { id: 'mail',     name: 'rMail',     badge: 'rMa', color: 'bg-blue-200',    emoji: '✉️', description: 'Community email & newsletters',                 domain: 'rmail.online' },
+  { id: 'forum',    name: 'rForum',    badge: 'rFo', color: 'bg-amber-200',   emoji: '💭', description: 'Threaded community discussions',                domain: 'rforum.online' },
+  // Deciding
+  { id: 'choices',  name: 'rChoices',  badge: 'rCo', color: 'bg-fuchsia-300', emoji: '🔀', description: 'Collaborative decision making',                 domain: 'rchoices.online' },
   { id: 'vote',     name: 'rVote',     badge: 'rV',  color: 'bg-violet-300',  emoji: '🗳️', description: 'Real-time polls & governance',                  domain: 'rvote.online' },
   // Funding & Commerce
   { id: 'funds',    name: 'rFunds',    badge: 'rF',  color: 'bg-lime-300',    emoji: '💸', description: 'Collaborative fundraising & grants',            domain: 'rfunds.online' },
   { id: 'wallet',   name: 'rWallet',   badge: 'rW',  color: 'bg-yellow-300',  emoji: '💰', description: 'Multi-chain crypto wallet',                      domain: 'rwallet.online' },
   { id: 'cart',     name: 'rCart',      badge: 'rCt', color: 'bg-orange-300',  emoji: '🛒', description: 'Group commerce & shared shopping',              domain: 'rcart.online' },
   { id: 'auctions', name: 'rAuctions', badge: 'rA',  color: 'bg-red-300',     emoji: '🔨', description: 'Live auction platform',                          domain: 'rauctions.online' },
-  // Social & Sharing
-  { id: 'network',  name: 'rNetwork',  badge: 'rNe', color: 'bg-blue-300',    emoji: '🌐', description: 'Community network & social graph',              domain: 'rnetwork.online' },
-  { id: 'files',    name: 'rFiles',    badge: 'rFi', color: 'bg-cyan-300',    emoji: '📁', description: 'Collaborative file storage',                    domain: 'rfiles.online' },
+  { id: 'swag',     name: 'rSwag',     badge: 'rSw', color: 'bg-red-200',     emoji: '👕', description: 'Community merch & swag store',                  domain: 'rswag.online' },
+  // Social & Media
+  { id: 'photos',   name: 'rPhotos',   badge: 'rPh', color: 'bg-pink-200',    emoji: '📸', description: 'Shared community photo albums',                domain: 'rphotos.online' },
   { id: 'tube',     name: 'rTube',     badge: 'rTu', color: 'bg-pink-300',    emoji: '🎬', description: 'Group video platform',                          domain: 'rtube.online' },
+  { id: 'network',  name: 'rNetwork',  badge: 'rNe', color: 'bg-blue-300',    emoji: '🌐', description: 'Community network & social graph',              domain: 'rnetwork.online' },
+  { id: 'socials',  name: 'rSocials',  badge: 'rSo', color: 'bg-sky-200',     emoji: '📢', description: 'Social media management',                      domain: 'rsocials.online' },
+  { id: 'files',    name: 'rFiles',    badge: 'rFi', color: 'bg-cyan-300',    emoji: '📁', description: 'Collaborative file storage',                    domain: 'rfiles.online' },
   { id: 'data',     name: 'rData',     badge: 'rD',  color: 'bg-purple-300',  emoji: '📊', description: 'Analytics & insights dashboard',                domain: 'rdata.online' },
+  // Work & Productivity
+  { id: 'work',     name: 'rWork',     badge: 'rWo', color: 'bg-slate-300',   emoji: '💼', description: 'Project & task management',                     domain: 'rwork.online' },
+  // Identity & Infrastructure
+  { id: 'ids',      name: 'rIDs',      badge: 'rId', color: 'bg-emerald-300', emoji: '🔑', description: 'Passkey identity & zero-knowledge auth',       domain: 'ridentity.online' },
+  { id: 'stack',    name: 'rStack',    badge: 'r*',  color: 'bg-gradient-to-br from-cyan-300 via-violet-300 to-rose-300', emoji: '📦', description: 'Open-source community infrastructure', domain: 'rstack.online' },
 ];
 
 const MODULE_CATEGORIES: Record<string, string> = {
-  space:   'Creating',
-  notes:   'Creating',
-  pubs:    'Creating',
-  cal:     'Planning',
-  trips:   'Planning',
-  inbox:   'Discussing & Deciding',
-  choices: 'Discussing & Deciding',
-  vote:    'Discussing & Deciding',
-  funds:   'Funding & Commerce',
-  wallet:  'Funding & Commerce',
-  cart:    'Funding & Commerce',
-  auctions:'Funding & Commerce',
-  maps:    'Planning',
-  network: 'Social & Sharing',
-  files:   'Social & Sharing',
-  tube:    'Social & Sharing',
-  data:    'Social & Sharing',
+  space:    'Creating',
+  notes:    'Creating',
+  pubs:     'Creating',
+  cal:      'Planning',
+  trips:    'Planning',
+  maps:     'Planning',
+  chats:    'Communicating',
+  inbox:    'Communicating',
+  mail:     'Communicating',
+  forum:    'Communicating',
+  choices:  'Deciding',
+  vote:     'Deciding',
+  funds:    'Funding & Commerce',
+  wallet:   'Funding & Commerce',
+  cart:     'Funding & Commerce',
+  auctions: 'Funding & Commerce',
+  swag:     'Funding & Commerce',
+  photos:   'Social & Media',
+  tube:     'Social & Media',
+  network:  'Social & Media',
+  socials:  'Social & Media',
+  files:    'Social & Media',
+  data:     'Social & Media',
+  work:     'Work & Productivity',
+  ids:      'Identity & Infrastructure',
+  stack:    'Identity & Infrastructure',
 };
 
 const CATEGORY_ORDER = [
   'Creating',
   'Planning',
-  'Discussing & Deciding',
+  'Communicating',
+  'Deciding',
   'Funding & Commerce',
-  'Social & Sharing',
+  'Social & Media',
+  'Work & Productivity',
+  'Identity & Infrastructure',
 ];
 
+/** Build the URL for a module, using username subdomain if logged in */
+function getModuleUrl(m: AppModule, username: string | null): string {
+  if (!m.domain) return '#';
+  if (username) {
+    // Generate <username>.<domain> URL
+    return `https://${username}.${m.domain}`;
+  }
+  return `https://${m.domain}`;
+}
+
 interface AppSwitcherProps {
   current?: string;
 }
 
 export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
   const [open, setOpen] = useState(false);
+  const [username, setUsername] = useState<string | null>(null);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -83,6 +118,18 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
     return () => document.removeEventListener('click', handleClick);
   }, []);
 
+  // Fetch current user's username for subdomain links
+  useEffect(() => {
+    fetch('/api/me')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated && data.user?.username) {
+          setUsername(data.user.username);
+        }
+      })
+      .catch(() => { /* not logged in */ });
+  }, []);
+
   const currentMod = MODULES.find((m) => m.id === current);
 
   // Group modules by category
@@ -140,7 +187,7 @@ export function AppSwitcher({ current = 'notes' }: AppSwitcherProps) {
                     } transition-colors`}
                   >
                     <a
-                      href={m.domain ? `https://${m.domain}` : '#'}
+                      href={getModuleUrl(m, username)}
                       className="flex items-center gap-2.5 flex-1 px-3.5 py-2 text-slate-200 no-underline min-w-0"
                       onClick={() => setOpen(false)}
                     >
diff --git a/components/EcosystemFooter.tsx b/components/EcosystemFooter.tsx
new file mode 100644
index 0000000..ac513c6
--- /dev/null
+++ b/components/EcosystemFooter.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+const FOOTER_LINKS = [
+  { name: 'rSpace', href: 'https://rspace.online' },
+  { name: 'rNotes', href: 'https://rnotes.online' },
+  { name: 'rPubs', href: 'https://rpubs.online' },
+  { name: 'rCal', href: 'https://rcal.online' },
+  { name: 'rTrips', href: 'https://rtrips.online' },
+  { name: 'rMaps', href: 'https://rmaps.online' },
+  { name: 'rChats', href: 'https://rchats.online' },
+  { name: 'rInbox', href: 'https://rinbox.online' },
+  { name: 'rMail', href: 'https://rmail.online' },
+  { name: 'rForum', href: 'https://rforum.online' },
+  { name: 'rChoices', href: 'https://rchoices.online' },
+  { name: 'rVote', href: 'https://rvote.online' },
+  { name: 'rFunds', href: 'https://rfunds.online' },
+  { name: 'rWallet', href: 'https://rwallet.online' },
+  { name: 'rCart', href: 'https://rcart.online' },
+  { name: 'rAuctions', href: 'https://rauctions.online' },
+  { name: 'rSwag', href: 'https://rswag.online' },
+  { name: 'rPhotos', href: 'https://rphotos.online' },
+  { name: 'rTube', href: 'https://rtube.online' },
+  { name: 'rNetwork', href: 'https://rnetwork.online' },
+  { name: 'rSocials', href: 'https://rsocials.online' },
+  { name: 'rFiles', href: 'https://rfiles.online' },
+  { name: 'rData', href: 'https://rdata.online' },
+  { name: 'rWork', href: 'https://rwork.online' },
+  { name: 'rIDs', href: 'https://ridentity.online' },
+  { name: 'rStack', href: 'https://rstack.online' },
+];
+
+interface EcosystemFooterProps {
+  current?: string;
+}
+
+export function EcosystemFooter({ current }: EcosystemFooterProps) {
+  return (
+    <footer className="border-t border-slate-800 py-8">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-slate-500 mb-4">
+          <span className="font-medium text-slate-400">r* Ecosystem</span>
+          {FOOTER_LINKS.map((link) => (
+            <a
+              key={link.name}
+              href={link.href}
+              className={`hover:text-slate-300 transition-colors ${
+                current && link.name.toLowerCase() === current.toLowerCase()
+                  ? 'font-medium text-slate-300'
+                  : ''
+              }`}
+            >
+              {link.name}
+            </a>
+          ))}
+        </div>
+        <p className="text-center text-xs text-slate-600">
+          Part of the <a href="https://rstack.online" className="hover:text-slate-400 transition-colors">r* ecosystem</a> — open source, self-hosted, community-owned
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..0d4599d
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { AppSwitcher } from './AppSwitcher';
+import { SpaceSwitcher } from './SpaceSwitcher';
+import { UserMenu } from './UserMenu';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface HeaderProps {
+  /** Which r*App is current (e.g. 'notes', 'vote', 'funds') */
+  current?: string;
+  /** Breadcrumb trail after the switchers */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Right-side actions (rendered between breadcrumbs and UserMenu) */
+  actions?: React.ReactNode;
+  /** Max width class for the inner container */
+  maxWidth?: string;
+}
+
+export function Header({ current = 'notes', breadcrumbs, actions, maxWidth = 'max-w-6xl' }: HeaderProps) {
+  return (
+    <nav className="border-b border-slate-800 backdrop-blur-sm bg-[#0a0a0a]/90 sticky top-0 z-50">
+      <div className={`${maxWidth} mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-2`}>
+        {/* Left: App switcher + Space switcher + Breadcrumbs */}
+        <div className="flex items-center gap-1 min-w-0">
+          <AppSwitcher current={current} />
+          <SpaceSwitcher />
+          {breadcrumbs && breadcrumbs.length > 0 && (
+            <>
+              {breadcrumbs.map((crumb, i) => (
+                <div key={i} className="flex items-center gap-1 min-w-0">
+                  <span className="text-slate-600 hidden sm:inline">/</span>
+                  {crumb.href ? (
+                    <a
+                      href={crumb.href}
+                      className="text-slate-400 hover:text-white transition-colors text-sm hidden sm:inline truncate max-w-[140px]"
+                    >
+                      {crumb.label}
+                    </a>
+                  ) : (
+                    <span className="text-white text-sm truncate max-w-[140px] md:max-w-[200px]">{crumb.label}</span>
+                  )}
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* Right: Actions + UserMenu */}
+        <div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
+          {actions}
+          <UserMenu />
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
new file mode 100644
index 0000000..e891244
--- /dev/null
+++ b/components/UserMenu.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface UserInfo {
+  username?: string;
+  did?: string;
+}
+
+export function UserMenu() {
+  const [user, setUser] = useState<UserInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetch('/api/me')
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.authenticated && data.user) {
+          setUser(data.user);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="w-6 h-6 rounded-full bg-slate-700 animate-pulse" />
+    );
+  }
+
+  if (!user) {
+    return (
+      <a
+        href="https://auth.ridentity.online"
+        className="px-3 py-1.5 text-sm bg-cyan-500 hover:bg-cyan-400 text-black font-medium rounded-lg transition-colors no-underline"
+      >
+        Sign In
+      </a>
+    );
+  }
+
+  const displayName = user.username || (user.did ? `${user.did.slice(0, 12)}...` : 'User');
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open); }}
+        className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.06] transition-colors"
+      >
+        <div className="w-7 h-7 rounded-full bg-gradient-to-br from-cyan-400 to-violet-500 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
+          {(user.username || 'U')[0].toUpperCase()}
+        </div>
+        <span className="text-sm text-slate-300 hidden sm:inline">{displayName}</span>
+        <span className="text-[0.7em] text-slate-500 hidden sm:inline">&#9662;</span>
+      </button>
+
+      {open && (
+        <div className="absolute top-full right-0 mt-1.5 min-w-[180px] rounded-xl bg-slate-800 border border-white/10 shadow-xl shadow-black/30 z-[200]">
+          <div className="px-3.5 py-2.5 border-b border-white/[0.08]">
+            <div className="text-sm font-medium text-white">{displayName}</div>
+            {user.did && (
+              <div className="text-[11px] text-slate-500 truncate mt-0.5">{user.did}</div>
+            )}
+          </div>
+          <button
+            onClick={() => {
+              setOpen(false);
+              fetch('/api/auth/logout', { method: 'POST' })
+                .catch(() => {})
+                .finally(() => window.location.reload());
+            }}
+            className="w-full text-left px-3.5 py-2.5 text-sm text-slate-400 hover:text-white hover:bg-white/[0.05] transition-colors"
+          >
+            Sign Out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
