feat: isolate all four portals with route groups + polished design system

Fix blank /org/login (and /admin/login): the guarded portal layout was
wrapping its own login route, rendering null when unauthenticated. Move
each portal's authed pages into a (authed)/(chapter) route group so login
pages live outside the guard.

Structure:
- app/(chapter)/* — chapter admin pages + guarded layout (was root-level)
- app/org/(authed)/* — org pages + guarded layout; /org/login now free
- app/admin/(authed)/* — admin pages + guarded layout; /admin/login free
- Root layout slimmed to providers only (no shared sidebar)
- Convert moved files' relative imports to @/app alias

Design system:
- PortalShell: shared sidebar shell (brand mark, themed active nav with
  accent bar, avatar dropdown user menu, loading skeletons)
- portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald)
- PortalLoginShell redesigned: two-column with gradient branding panel,
  dotted pattern, value-prop highlights, built-in back link
- New shadcn components: Avatar, DropdownMenu, Skeleton
- Move shared DraftCard to _components/draft-card.tsx (used by 2 portals)
- Portal selector: remove Super Admin card, icon tiles, hover lift
- All 4 login pages use react-hook-form + Zod + themed shell
- Member nav restored to full 11-section list with icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -7,3 +7,4 @@ coverage
 *.env.local
 .env.production
 sessions/
+*.tsbuildinfo

apps/web/app/(chapter)/drafts/page.tsx

@@ -1,7 +1,7 @@
-import { apiFetch } from '../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 import { redirect } from 'next/navigation';
-import { getToken } from '../_lib/api';
-import { DraftCard } from '../admin/drafts/DraftCard';
+import { getToken } from '@/app/_lib/api';
+import { DraftCard } from '@/app/_components/draft-card';
 import Link from 'next/link';
 
 type DraftType = 'EVENT' | 'SEVA_TASK' | 'FAQ_ITEM';

apps/web/app/(chapter)/groups/page.tsx

@@ -1,6 +1,6 @@
 import { RouteManager } from './RouteManager';
 import { GroupsTabs } from './GroupsTabs';
-import { apiFetch } from '../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface Group {
   id: string;

apps/web/app/(chapter)/layout.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useAuth } from '@/app/_lib/auth-context';
+import { PortalShell } from '@/app/_components/portal-shell';
+import { Search, Users, Inbox, FileText, SlidersHorizontal, Bot } from 'lucide-react';
+
+const NAV = [
+  { href: '/search', label: 'Search', icon: <Search /> },
+  { href: '/groups', label: 'Groups & Routes', icon: <Users /> },
+  { href: '/messages/pending', label: 'Pending', icon: <Inbox /> },
+  { href: '/drafts', label: 'AI Drafts', icon: <FileText /> },
+  { href: '/settings/rules', label: 'Rules', icon: <SlidersHorizontal /> },
+  { href: '/settings/bot', label: 'Bot', icon: <Bot /> },
+];
+
+export default function ChapterLayout({ children }: { children: React.ReactNode }) {
+  const { admin, loading, logout } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!loading && !admin) router.replace(`/login?next=${encodeURIComponent(pathname)}`);
+  }, [admin, loading, pathname, router]);
+
+  return (
+    <PortalShell
+      portalName="Chapter"
+      theme="blue"
+      navItems={NAV}
+      loading={loading}
+      authed={!!admin}
+      user={admin ? { email: admin.email, name: admin.name, role: admin.role, subtitle: admin.tenantName } : undefined}
+      onLogout={() => { void logout(); router.replace('/login'); }}
+    >
+      {children}
+    </PortalShell>
+  );
+}

apps/web/app/(chapter)/messages/[id]/page.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface MessageDetail {
   id: string;

apps/web/app/(chapter)/messages/pending/page.tsx

@@ -1,4 +1,4 @@
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface PendingMessage {
   id: string;

apps/web/app/(chapter)/search/page.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { apiFetch } from '../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface MeiliHit {
   id: string;

apps/web/app/(chapter)/settings/bot/page.tsx

@@ -1,5 +1,5 @@
 import { BotSettingsCard } from './BotSettingsCard';
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface BotSummary {
   id: string;

apps/web/app/(chapter)/settings/rules/page.tsx

@@ -1,5 +1,5 @@
 import { RuleManager } from './RuleManager';
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface RuleData {
   id: string;

apps/web/app/(chapter)/threads/[id]/page.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface ThreadMessage {
   id: string;

apps/web/app/(chapter)/threads/page.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { apiFetch } from '../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 
 interface ThreadSummary {
   id: string;

apps/web/app/_components/portal-login-shell.tsx

@@ -1,47 +1,83 @@
+import Link from 'next/link';
 import { cn } from '../_lib/utils';
+import { PORTAL_THEMES, type PortalTheme } from './portal-theme';
+import { Check, ArrowLeft } from 'lucide-react';
 
 interface PortalLoginShellProps {
   title: string;
   subtitle: string;
-  accentClass?: string;
+  theme: PortalTheme;
+  /** Short value-prop bullets shown on the branding panel */
+  highlights?: string[];
   children: React.ReactNode;
   footer?: React.ReactNode;
 }
 
-export function PortalLoginShell({ title, subtitle, accentClass = 'bg-primary', children, footer }: PortalLoginShellProps) {
+export function PortalLoginShell({ title, subtitle, theme, highlights = [], children, footer }: PortalLoginShellProps) {
+  const t = PORTAL_THEMES[theme];
+
   return (
     <div className="min-h-screen grid lg:grid-cols-2">
-      {/* Left branding panel */}
-      <div className={cn('hidden lg:flex flex-col justify-between p-10 text-white', accentClass)}>
-        <div className="flex items-center gap-2">
-          <span className="font-bold text-xl tracking-tight">TOWER</span>
+      {/* Branding panel */}
+      <div className={cn('relative hidden lg:flex flex-col justify-between p-12 text-white overflow-hidden', t.gradient)}>
+        {/* decorative pattern */}
+        <div
+          className="absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+        <div className="relative flex items-center gap-3">
+          <div className="size-9 rounded-xl bg-white/15 backdrop-blur flex items-center justify-center font-bold">T</div>
+          <span className="font-semibold text-lg tracking-tight">TOWER</span>
         </div>
-        <div>
-          <blockquote className="space-y-2">
-            <p className="text-lg font-medium leading-relaxed">
-              "Community knowledge, beautifully organised."
-            </p>
-            <footer className="text-sm opacity-70">Insignia TOWER Platform</footer>
-          </blockquote>
+
+        <div className="relative space-y-6">
+          <h2 className="text-3xl font-bold leading-tight max-w-sm">{title}</h2>
+          {highlights.length > 0 && (
+            <ul className="space-y-3">
+              {highlights.map((h) => (
+                <li key={h} className="flex items-center gap-3 text-sm text-white/90">
+                  <span className="size-5 rounded-full bg-white/15 flex items-center justify-center shrink-0">
+                    <Check className="size-3" />
+                  </span>
+                  {h}
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
+
+        <p className="relative text-sm text-white/60">Community Knowledge Infrastructure Platform</p>
       </div>
 
-      {/* Right form panel */}
-      <div className="flex items-center justify-center p-8 bg-background">
-        <div className="w-full max-w-sm space-y-6">
+      {/* Form panel */}
+      <div className="flex items-center justify-center p-6 sm:p-8 bg-background">
+        <div className="w-full max-w-sm space-y-8">
           {/* Mobile logo */}
           <div className="flex items-center gap-2 lg:hidden">
-            <span className="font-bold text-lg">TOWER</span>
+            <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm', t.gradient)}>T</div>
+            <span className="font-semibold">TOWER</span>
           </div>
 
-          <div className="space-y-1">
+          <div className="space-y-2">
             <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
             <p className="text-sm text-muted-foreground">{subtitle}</p>
           </div>
 
           {children}
 
-          {footer && <div className="text-center text-sm text-muted-foreground">{footer}</div>}
+          <div className="space-y-3 text-center">
+            {footer}
+            <Link
+              href="/"
+              className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="size-3" />
+              Back to portal selector
+            </Link>
+          </div>
         </div>
       </div>
     </div>

apps/web/app/_components/portal-nav.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { cn } from '../_lib/utils';
-import { Button } from './ui/button';
-import { Separator } from './ui/separator';
-import { LogOut } from 'lucide-react';
-
-interface NavItem {
-  href: string;
-  label: string;
-  icon?: React.ReactNode;
-}
-
-interface PortalNavProps {
-  portalName: string;
-  navItems: NavItem[];
-  user?: { name?: string | null; email?: string | null; role?: string };
-  onLogout: () => void;
-  accentClass?: string;
-}
-
-export function PortalNav({ portalName, navItems, user, onLogout, accentClass = 'text-primary' }: PortalNavProps) {
-  const pathname = usePathname();
-
-  return (
-    <nav className="w-56 shrink-0 flex flex-col h-full border-r bg-sidebar">
-      {/* Logo */}
-      <div className="px-4 py-5 flex items-center gap-2">
-        <span className={cn('font-bold text-base', accentClass)}>TOWER</span>
-        <Separator orientation="vertical" className="h-4" />
-        <span className="text-xs text-muted-foreground font-medium">{portalName}</span>
-      </div>
-
-      <Separator />
-
-      {/* Nav links */}
-      <div className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
-        {navItems.map((item) => {
-          const active = item.href === '/'
-            ? pathname === '/'
-            : pathname.startsWith(item.href);
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={cn(
-                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                active
-                  ? 'bg-accent text-accent-foreground font-medium'
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-              )}
-            >
-              {item.icon && <span className="size-4 shrink-0">{item.icon}</span>}
-              {item.label}
-            </Link>
-          );
-        })}
-      </div>
-
-      <Separator />
-
-      {/* User footer */}
-      {user && (
-        <div className="p-3 space-y-2">
-          <div className="px-3 py-2">
-            <p className="text-sm font-medium truncate">{user.name ?? user.email}</p>
-            {user.name && <p className="text-xs text-muted-foreground truncate">{user.email}</p>}
-            {user.role && (
-              <p className="text-xs text-muted-foreground uppercase tracking-wide mt-0.5">{user.role.replace(/_/g, ' ')}</p>
-            )}
-          </div>
-          <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={onLogout}>
-            <LogOut className="size-4" />
-            Sign out
-          </Button>
-        </div>
-      )}
-    </nav>
-  );
-}

apps/web/app/_components/portal-shell.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/app/_lib/utils';
+import { Skeleton } from './ui/skeleton';
+import { Avatar, AvatarFallback } from './ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { PORTAL_THEMES, type PortalTheme, initials } from './portal-theme';
+import { ChevronsUpDown, LogOut } from 'lucide-react';
+
+export interface PortalNavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+interface PortalUser {
+  name?: string | null;
+  email?: string | null;
+  role?: string | null;
+  subtitle?: string | null;
+}
+
+interface PortalShellProps {
+  portalName: string;
+  theme: PortalTheme;
+  navItems: PortalNavItem[];
+  user?: PortalUser;
+  loading: boolean;
+  authed: boolean;
+  onLogout: () => void;
+  children: React.ReactNode;
+}
+
+export function PortalShell({
+  portalName, theme, navItems, user, loading, authed, onLogout, children,
+}: PortalShellProps) {
+  const pathname = usePathname();
+  const t = PORTAL_THEMES[theme];
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      {/* Sidebar */}
+      <aside className="w-60 shrink-0 flex flex-col border-r bg-sidebar">
+        {/* Brand */}
+        <div className="h-16 flex items-center gap-3 px-5 border-b">
+          <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-sm', t.gradient)}>
+            T
+          </div>
+          <div className="flex flex-col leading-none">
+            <span className="font-semibold text-sm tracking-tight">TOWER</span>
+            <span className="text-[11px] text-muted-foreground mt-0.5">{portalName}</span>
+          </div>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 overflow-y-auto p-3 space-y-1">
+          {loading ? (
+            <div className="space-y-2 p-1">
+              {Array.from({ length: navItems.length }).map((_, i) => <Skeleton key={i} className="h-9 w-full" />)}
+            </div>
+          ) : (
+            navItems.map((item) => {
+              // Portal root (e.g. /admin, /org) is a single segment — match exactly so it
+              // doesn't stay highlighted on sub-routes. Deeper items match by prefix.
+              const isRoot = item.href.split('/').filter(Boolean).length === 1;
+              const isActive = isRoot
+                ? pathname === item.href
+                : pathname === item.href || pathname.startsWith(item.href + '/');
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+                    isActive
+                      ? cn(t.activeBg, t.activeText, 'font-medium')
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+                  )}
+                >
+                  {isActive && <span className={cn('absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full', t.bar)} />}
+                  <span className="size-4 shrink-0 [&_svg]:size-4">{item.icon}</span>
+                  {item.label}
+                </Link>
+              );
+            })
+          )}
+        </nav>
+
+        {/* User */}
+        <div className="p-3 border-t">
+          {loading ? (
+            <div className="flex items-center gap-3 px-1">
+              <Skeleton className="size-9 rounded-full" />
+              <div className="flex-1 space-y-1.5">
+                <Skeleton className="h-3 w-24" />
+                <Skeleton className="h-2.5 w-16" />
+              </div>
+            </div>
+          ) : user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger className="w-full flex items-center gap-3 rounded-lg p-2 hover:bg-accent transition-colors text-left outline-none">
+                <Avatar>
+                  <AvatarFallback className={cn(t.gradient, 'text-white')}>{initials(user.name, user.email)}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{user.name ?? user.email}</p>
+                  <p className="text-xs text-muted-foreground truncate">{user.subtitle ?? user.role ?? user.email}</p>
+                </div>
+                <ChevronsUpDown className="size-4 text-muted-foreground shrink-0" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" className="w-52">
+                <DropdownMenuLabel className="flex flex-col">
+                  <span className="text-sm truncate">{user.name ?? user.email}</span>
+                  <span className="text-xs font-normal text-muted-foreground truncate">{user.email}</span>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
+                  <LogOut className="size-4" />
+                  Sign out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main className="flex-1 overflow-auto bg-muted/30">
+        {!loading && authed ? (
+          <div className="p-6 lg:p-8 max-w-6xl mx-auto w-full">{children}</div>
+        ) : (
+          <div className="p-8 space-y-4">
+            <Skeleton className="h-8 w-48" />
+            <div className="grid grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-24" />)}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

apps/web/app/_components/portal-theme.ts

@@ -0,0 +1,58 @@
+export type PortalTheme = 'violet' | 'slate' | 'blue' | 'emerald';
+
+interface ThemeTokens {
+  /** Gradient for the logo mark and login branding panel */
+  gradient: string;
+  /** Text accent for the brand wordmark */
+  text: string;
+  /** Active nav item background */
+  activeBg: string;
+  /** Active nav item text */
+  activeText: string;
+  /** Active left indicator bar */
+  bar: string;
+  /** Ring/border tint used in login branding */
+  soft: string;
+}
+
+export const PORTAL_THEMES: Record<PortalTheme, ThemeTokens> = {
+  violet: {
+    gradient: 'bg-gradient-to-br from-violet-500 to-purple-700',
+    text: 'text-violet-600',
+    activeBg: 'bg-violet-50',
+    activeText: 'text-violet-700',
+    bar: 'bg-violet-600',
+    soft: 'text-violet-100',
+  },
+  slate: {
+    gradient: 'bg-gradient-to-br from-slate-700 to-slate-900',
+    text: 'text-slate-800',
+    activeBg: 'bg-slate-100',
+    activeText: 'text-slate-900',
+    bar: 'bg-slate-800',
+    soft: 'text-slate-200',
+  },
+  blue: {
+    gradient: 'bg-gradient-to-br from-blue-500 to-indigo-700',
+    text: 'text-blue-600',
+    activeBg: 'bg-blue-50',
+    activeText: 'text-blue-700',
+    bar: 'bg-blue-600',
+    soft: 'text-blue-100',
+  },
+  emerald: {
+    gradient: 'bg-gradient-to-br from-emerald-500 to-teal-700',
+    text: 'text-emerald-600',
+    activeBg: 'bg-emerald-50',
+    activeText: 'text-emerald-700',
+    bar: 'bg-emerald-600',
+    soft: 'text-emerald-100',
+  },
+};
+
+export function initials(name?: string | null, email?: string | null): string {
+  const source = (name ?? email ?? '?').trim();
+  const parts = source.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return source.slice(0, 2).toUpperCase();
+}

apps/web/app/_components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@/app/_lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex size-9 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

apps/web/app/_components/ui/dropdown-menu.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '@/app/_lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+};

apps/web/app/_components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/app/_lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };

apps/web/app/_lib/sidebar.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { usePathname, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useAuth } from './auth-context';
-import { PortalNav } from '../_components/portal-nav';
-import {
-  Search, Users, MessageSquare, FileText, Settings, Bot,
-  LayoutDashboard, Building2, Server, Inbox,
-} from 'lucide-react';
-
-// Paths that render their own full-screen layout (no sidebar)
-const FULLSCREEN_PATHS = ['/', '/login', '/member-login', '/onboard', '/admin/login', '/org/login', '/org', '/admin', '/my'];
-
-const CHAPTER_NAV = [
-  { href: '/search', label: 'Search', icon: <Search /> },
-  { href: '/groups', label: 'Groups & Routes', icon: <Users /> },
-  { href: '/messages/pending', label: 'Pending', icon: <Inbox /> },
-  { href: '/drafts', label: 'AI Drafts', icon: <FileText /> },
-  { href: '/settings/rules', label: 'Rules', icon: <Settings /> },
-  { href: '/settings/bot', label: 'Bot', icon: <Bot /> },
-];
-
-export function Sidebar() {
-  const { admin, loading, logout } = useAuth();
-  const pathname = usePathname();
-  const router = useRouter();
-
-  const isFullscreen = FULLSCREEN_PATHS.some((p) =>
-    p === '/' ? pathname === '/' : pathname === p || pathname.startsWith(p + '/'),
-  );
-
-  useEffect(() => {
-    if (loading || isFullscreen) return;
-    if (!admin) router.replace(`/login?next=${encodeURIComponent(pathname)}`);
-  }, [loading, admin, pathname, router, isFullscreen]);
-
-  if (isFullscreen) return null;
-
-  if (loading) {
-    return (
-      <div className="w-56 shrink-0 border-r bg-sidebar animate-pulse" />
-    );
-  }
-
-  if (!admin) return null;
-
-  return (
-    <PortalNav
-      portalName="Chapter"
-      navItems={CHAPTER_NAV}
-      accentClass="text-blue-600"
-      user={{ email: admin.email, name: admin.name ?? undefined, role: admin.role }}
-      onLogout={() => { void logout(); router.replace('/login'); }}
-    />
-  );
-}

apps/web/app/admin/(authed)/bots/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 import { useRouter } from 'next/navigation';
 
 export default function BotsPage() {

apps/web/app/admin/(authed)/drafts/page.tsx

@@ -1,7 +1,7 @@
-import { apiFetch } from '../../_lib/api';
+import { apiFetch } from '@/app/_lib/api';
 import { redirect } from 'next/navigation';
-import { getToken } from '../../_lib/api';
-import { DraftCard } from './DraftCard';
+import { getToken } from '@/app/_lib/api';
+import { DraftCard } from '@/app/_components/draft-card';
 import Link from 'next/link';
 
 type DraftType = 'EVENT' | 'SEVA_TASK' | 'FAQ_ITEM';

apps/web/app/admin/(authed)/layout.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
+import { PortalShell } from '@/app/_components/portal-shell';
+import { LayoutDashboard, Building2, Network, Server, FileText } from 'lucide-react';
+
+const NAV = [
+  { href: '/admin', label: 'Dashboard', icon: <LayoutDashboard /> },
+  { href: '/admin/orgs', label: 'Organisations', icon: <Network /> },
+  { href: '/admin/tenants', label: 'Chapters', icon: <Building2 /> },
+  { href: '/admin/bots', label: 'Bot Pool', icon: <Server /> },
+  { href: '/admin/drafts', label: 'AI Drafts', icon: <FileText /> },
+];
+
+export default function AdminAuthedLayout({ children }: { children: React.ReactNode }) {
+  const { admin, loading, logout } = useSuperAdmin();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !admin) router.replace('/admin/login');
+  }, [admin, loading, router]);
+
+  return (
+    <PortalShell
+      portalName="Super Admin"
+      theme="slate"
+      navItems={NAV}
+      loading={loading}
+      authed={!!admin}
+      user={admin ? { email: admin.email, name: admin.name, role: 'Super Admin' } : undefined}
+      onLogout={() => { void logout(); router.replace('/admin/login'); }}
+    >
+      {children}
+    </PortalShell>
+  );
+}

apps/web/app/admin/(authed)/orgs/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { use, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useSuperAdmin } from '../../../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 
 export default function AdminOrgDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);

apps/web/app/admin/(authed)/orgs/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 

apps/web/app/admin/(authed)/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useSuperAdmin } from '../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 

apps/web/app/admin/(authed)/tenants/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useSuperAdmin } from '../../../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 import { useRouter, useParams } from 'next/navigation';
 
 export default function TenantDetailPage() {

apps/web/app/admin/(authed)/tenants/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { useSuperAdmin } from '@/app/_lib/super-admin-context';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 

apps/web/app/admin/layout.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { useSuperAdmin } from '../_lib/super-admin-context';
-import { PortalNav } from '../_components/portal-nav';
-import { LayoutDashboard, Building2, Server, FileText } from 'lucide-react';
-
-const NAV = [
-  { href: '/admin', label: 'Dashboard', icon: <LayoutDashboard /> },
-  { href: '/admin/orgs', label: 'Organisations', icon: <Building2 /> },
-  { href: '/admin/tenants', label: 'Chapters', icon: <Building2 /> },
-  { href: '/admin/bots', label: 'Bot Pool', icon: <Server /> },
-  { href: '/admin/drafts', label: 'AI Drafts', icon: <FileText /> },
-];
-
-export default function AdminLayout({ children }: { children: React.ReactNode }) {
-  const { admin, loading, logout } = useSuperAdmin();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!loading && !admin) router.replace('/admin/login');
-  }, [admin, loading, router]);
-
-  if (loading) {
-    return (
-      <div className="flex h-screen -m-6">
-        <div className="w-56 shrink-0 border-r bg-sidebar animate-pulse" />
-        <div className="flex-1" />
-      </div>
-    );
-  }
-  if (!admin) return null;
-
-  return (
-    <div className="flex h-screen overflow-hidden -m-6">
-      <PortalNav
-        portalName="Admin"
-        navItems={NAV}
-        accentClass="text-slate-900"
-        user={{ email: admin.email, name: admin.name ?? undefined, role: 'Super Admin' }}
-        onLogout={() => { void logout(); router.replace('/admin/login'); }}
-      />
-      <main className="flex-1 overflow-auto bg-muted/30 p-6">{children}</main>
-    </div>
-  );
-}

apps/web/app/admin/login/page.tsx

@@ -9,7 +9,6 @@ import { PortalLoginShell } from '../../_components/portal-login-shell';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../_components/ui/form';
 import { Input } from '../../_components/ui/input';
 import { Button } from '../../_components/ui/button';
-import Link from 'next/link';
 
 const schema = z.object({
   email: z.string().email('Enter a valid email'),
@@ -36,8 +35,8 @@ export default function SuperAdminLoginPage() {
     <PortalLoginShell
       title="Super Admin"
       subtitle="Platform-wide administration access."
-      accentClass="bg-slate-900"
-      footer={<Link href="/" className="hover:text-foreground transition-colors">← Back to portal selector</Link>}
+      theme="slate"
+      highlights={['Manage organisations & chapters', 'Provision and pair WhatsApp bots', 'Oversee the entire platform']}
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

apps/web/app/layout.tsx

@@ -4,7 +4,6 @@ import { ReactQueryProvider } from './_lib/query-client';
 import { AuthProvider } from './_lib/auth-context';
 import { SuperAdminProvider } from './_lib/super-admin-context';
 import { OrgAdminProvider } from './_lib/org-admin-context';
-import { Sidebar } from './_lib/sidebar';
 
 export const metadata: Metadata = {
   title: 'TOWER',
@@ -14,14 +13,11 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="flex min-h-screen bg-background text-foreground antialiased">
+      <body className="min-h-screen bg-background text-foreground antialiased">
         <ReactQueryProvider>
           <AuthProvider>
             <SuperAdminProvider>
-              <OrgAdminProvider>
-                <Sidebar />
-                <main className="flex-1 overflow-auto p-6">{children}</main>
-              </OrgAdminProvider>
+              <OrgAdminProvider>{children}</OrgAdminProvider>
             </SuperAdminProvider>
           </AuthProvider>
         </ReactQueryProvider>

apps/web/app/login/page.tsx

@@ -10,7 +10,6 @@ import { PortalLoginShell } from '../_components/portal-login-shell';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../_components/ui/form';
 import { Input } from '../_components/ui/input';
 import { Button } from '../_components/ui/button';
-import Link from 'next/link';
 
 const schema = z.object({
   email: z.string().email('Enter a valid email'),
@@ -76,8 +75,8 @@ export default function ChapterLoginPage() {
     <PortalLoginShell
       title="Chapter Portal"
       subtitle="Sign in to manage your chapter's messages and groups."
-      accentClass="bg-blue-600"
-      footer={<Link href="/" className="hover:text-foreground transition-colors">← Back to portal selector</Link>}
+      theme="blue"
+      highlights={['Approve & route group messages', 'Configure hashtag and prefix rules', 'Review AI-generated digests']}
     >
       <Suspense>
         <LoginForm />

apps/web/app/member-login/page.tsx

@@ -55,10 +55,11 @@ export default function MemberLoginPage() {
     <PortalLoginShell
       title="Member Portal"
       subtitle={step === 'phone' ? 'Enter your WhatsApp number to receive a sign-in code.' : `We sent a 6-digit code to ${phone} on WhatsApp.`}
-      accentClass="bg-emerald-600"
+      theme="emerald"
+      highlights={['Read your community digests', 'Manage privacy & consent', 'Discover events and members']}
       footer={
         step === 'phone'
-          ? <><Link href="/onboard" className="hover:text-foreground transition-colors">First time? Use your invite link</Link> · <Link href="/" className="hover:text-foreground transition-colors">Portal selector</Link></>
+          ? <Link href="/onboard" className="text-emerald-600 hover:underline">First time? Use your invite link</Link>
           : undefined
       }
     >

apps/web/app/my/layout.tsx

@@ -7,9 +7,11 @@ export default async function MemberLayout({ children }: { children: React.React
   if (!token) redirect('/member-login');
 
   return (
-    <div className="flex h-screen overflow-hidden -m-6">
+    <div className="flex h-screen overflow-hidden">
       <MemberNav />
-      <main className="flex-1 overflow-auto bg-muted/30 p-6">{children}</main>
+      <main className="flex-1 overflow-auto bg-muted/30">
+        <div className="p-6 lg:p-8 max-w-6xl mx-auto w-full">{children}</div>
+      </main>
     </div>
   );
 }

apps/web/app/my/member-nav.tsx

@@ -3,18 +3,30 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '../_lib/utils';
-import { Separator } from '../_components/ui/separator';
 import { Button } from '../_components/ui/button';
-import { LayoutDashboard, Settings, Users, LogOut } from 'lucide-react';
+import { PORTAL_THEMES } from '../_components/portal-theme';
+import {
+  LayoutDashboard, Newspaper, Calendar, HeartHandshake, Users2,
+  BookOpen, Sparkles, Images, Contact, Settings, LogOut,
+} from 'lucide-react';
 
 const NAV = [
   { href: '/my', label: 'Dashboard', icon: <LayoutDashboard /> },
-  { href: '/my/groups', label: 'My Groups', icon: <Users /> },
+  { href: '/my/digest', label: 'Digest', icon: <Newspaper /> },
+  { href: '/my/ask', label: 'Ask AI', icon: <Sparkles /> },
+  { href: '/my/events', label: 'Events', icon: <Calendar /> },
+  { href: '/my/seva', label: 'Seva & Points', icon: <HeartHandshake /> },
+  { href: '/my/circles', label: 'Circles', icon: <Users2 /> },
+  { href: '/my/directory', label: 'Directory', icon: <Contact /> },
+  { href: '/my/knowledge', label: 'Knowledge', icon: <BookOpen /> },
+  { href: '/my/memories', label: 'Memories', icon: <Images /> },
+  { href: '/my/groups', label: 'My Groups', icon: <Users2 /> },
   { href: '/my/settings', label: 'Settings', icon: <Settings /> },
 ];
 
 export function MemberNav() {
   const pathname = usePathname();
+  const t = PORTAL_THEMES.emerald;
 
   async function logout() {
     await fetch('/api/my/logout', { method: 'POST' });
@@ -22,38 +34,43 @@ export function MemberNav() {
   }
 
   return (
-    <nav className="w-56 shrink-0 flex flex-col h-full border-r bg-sidebar">
-      <div className="px-4 py-5 flex items-center gap-2">
-        <span className="font-bold text-base text-emerald-600">TOWER</span>
-        <Separator orientation="vertical" className="h-4" />
-        <span className="text-xs text-muted-foreground font-medium">Member</span>
+    <aside className="w-60 shrink-0 flex flex-col border-r bg-sidebar">
+      <div className="h-16 flex items-center gap-3 px-5 border-b">
+        <div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm shadow-sm', t.gradient)}>
+          T
+        </div>
+        <div className="flex flex-col leading-none">
+          <span className="font-semibold text-sm tracking-tight">TOWER</span>
+          <span className="text-[11px] text-muted-foreground mt-0.5">Member</span>
+        </div>
       </div>
-      <Separator />
-      <div className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+
+      <nav className="flex-1 overflow-y-auto p-3 space-y-1">
         {NAV.map((item) => {
-          const active = item.href === '/my' ? pathname === '/my' : pathname.startsWith(item.href);
+          const isActive = item.href === '/my' ? pathname === '/my' : pathname.startsWith(item.href);
           return (
             <Link
               key={item.href}
               href={item.href}
               className={cn(
-                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
-                active ? 'bg-accent text-accent-foreground font-medium' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                'group relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
+                isActive ? cn(t.activeBg, t.activeText, 'font-medium') : 'text-muted-foreground hover:bg-accent hover:text-foreground',
               )}
             >
-              <span className="size-4 shrink-0">{item.icon}</span>
+              {isActive && <span className={cn('absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full', t.bar)} />}
+              <span className="size-4 shrink-0 [&_svg]:size-4">{item.icon}</span>
               {item.label}
             </Link>
           );
         })}
-      </div>
-      <Separator />
-      <div className="p-3">
+      </nav>
+
+      <div className="p-3 border-t">
         <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground" onClick={() => void logout()}>
           <LogOut className="size-4" />
           Sign out
         </Button>
       </div>
-    </nav>
+    </aside>
   );
 }

apps/web/app/org/(authed)/layout.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useOrgAdmin } from '@/app/_lib/org-admin-context';
+import { PortalShell } from '@/app/_components/portal-shell';
+import { LayoutDashboard, Building2, Shield } from 'lucide-react';
+
+const NAV = [
+  { href: '/org', label: 'Dashboard', icon: <LayoutDashboard /> },
+  { href: '/org/tenants', label: 'Chapters', icon: <Building2 /> },
+  { href: '/org/rules', label: 'Org Rules', icon: <Shield /> },
+];
+
+export default function OrgAuthedLayout({ children }: { children: React.ReactNode }) {
+  const { orgAdmin, loading, logout } = useOrgAdmin();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !orgAdmin) router.replace('/org/login');
+  }, [orgAdmin, loading, router]);
+
+  return (
+    <PortalShell
+      portalName="Organisation"
+      theme="violet"
+      navItems={NAV}
+      loading={loading}
+      authed={!!orgAdmin}
+      user={orgAdmin ? { email: orgAdmin.email, name: orgAdmin.name, role: orgAdmin.role, subtitle: orgAdmin.organization?.name } : undefined}
+      onLogout={() => { void logout(); router.replace('/org/login'); }}
+    >
+      {children}
+    </PortalShell>
+  );
+}

apps/web/app/org/(authed)/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { useOrgAdmin } from '../_lib/org-admin-context';
+import { useOrgAdmin } from '@/app/_lib/org-admin-context';
 
 export default function OrgDashboardPage() {
   const { orgAdmin, loading } = useOrgAdmin();

apps/web/app/org/(authed)/rules/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useOrgAdmin } from '../../_lib/org-admin-context';
+import { useOrgAdmin } from '@/app/_lib/org-admin-context';
 
 const MATCH_TYPES = ['HASHTAG', 'PREFIX', 'REACTION_EMOJI'];
 const ACTIONS = ['FLAG', 'AUTO_APPROVE', 'SKIP', 'REJECT', 'P1'];

apps/web/app/org/(authed)/tenants/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { use, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useOrgAdmin } from '../../../_lib/org-admin-context';
+import { useOrgAdmin } from '@/app/_lib/org-admin-context';
 
 export default function OrgTenantDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);

apps/web/app/org/(authed)/tenants/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { useOrgAdmin } from '../../_lib/org-admin-context';
+import { useOrgAdmin } from '@/app/_lib/org-admin-context';
 
 export default function OrgTenantsPage() {
   const { orgAdmin, loading } = useOrgAdmin();

apps/web/app/org/layout.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { useOrgAdmin } from '../_lib/org-admin-context';
-import { PortalNav } from '../_components/portal-nav';
-import { LayoutDashboard, Building2, Shield } from 'lucide-react';
-
-const NAV = [
-  { href: '/org', label: 'Dashboard', icon: <LayoutDashboard /> },
-  { href: '/org/tenants', label: 'Chapters', icon: <Building2 /> },
-  { href: '/org/rules', label: 'Org Rules', icon: <Shield /> },
-];
-
-export default function OrgLayout({ children }: { children: React.ReactNode }) {
-  const { orgAdmin, loading, logout } = useOrgAdmin();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!loading && !orgAdmin) router.replace('/org/login');
-  }, [orgAdmin, loading, router]);
-
-  if (loading) {
-    return (
-      <div className="flex h-screen -m-6">
-        <div className="w-56 shrink-0 border-r bg-sidebar animate-pulse" />
-        <div className="flex-1" />
-      </div>
-    );
-  }
-  if (!orgAdmin) return null;
-
-  return (
-    <div className="flex h-screen overflow-hidden -m-6">
-      <PortalNav
-        portalName="Org"
-        navItems={NAV}
-        accentClass="text-violet-600"
-        user={{ email: orgAdmin.email, name: orgAdmin.name ?? undefined, role: orgAdmin.role }}
-        onLogout={() => { void logout(); router.replace('/org/login'); }}
-      />
-      <main className="flex-1 overflow-auto bg-muted/30 p-6">{children}</main>
-    </div>
-  );
-}

apps/web/app/org/login/page.tsx

@@ -9,7 +9,6 @@ import { PortalLoginShell } from '../../_components/portal-login-shell';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../_components/ui/form';
 import { Input } from '../../_components/ui/input';
 import { Button } from '../../_components/ui/button';
-import Link from 'next/link';
 
 const schema = z.object({
   email: z.string().email('Enter a valid email'),
@@ -36,8 +35,8 @@ export default function OrgLoginPage() {
     <PortalLoginShell
       title="Organisation Portal"
       subtitle="Manage your chapters, admins and org-wide rules."
-      accentClass="bg-violet-600"
-      footer={<Link href="/" className="hover:text-foreground transition-colors">← Back to portal selector</Link>}
+      theme="violet"
+      highlights={['Create and oversee chapters', 'Set org-wide routing rules', 'Provision chapter admins']}
     >
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

apps/web/app/page.tsx

@@ -1,71 +1,67 @@
 import Link from 'next/link';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, Building2, Network, UserRound } from 'lucide-react';
 
 const PORTALS = [
   {
     href: '/org/login',
-    title: 'Organisation Portal',
-    description: 'Manage multiple chapters, org-wide routing rules and admin access.',
-    badge: 'Org Admin',
-    accent: 'border-l-4 border-l-violet-500',
-    badgeClass: 'bg-violet-100 text-violet-700',
-    hoverClass: 'hover:border-violet-300',
+    title: 'Organisation',
+    description: 'Manage chapters, org-wide rules and admin access.',
+    icon: Network,
+    iconWrap: 'bg-violet-100 text-violet-600',
+    ring: 'hover:ring-violet-200 hover:border-violet-300',
   },
   {
     href: '/login',
-    title: 'Chapter Portal',
-    description: 'Approve messages, manage groups, configure routing rules and AI drafts.',
-    badge: 'Chapter Admin',
-    accent: 'border-l-4 border-l-blue-500',
-    badgeClass: 'bg-blue-100 text-blue-700',
-    hoverClass: 'hover:border-blue-300',
+    title: 'Chapter',
+    description: 'Approve messages, manage groups and routing rules.',
+    icon: Building2,
+    iconWrap: 'bg-blue-100 text-blue-600',
+    ring: 'hover:ring-blue-200 hover:border-blue-300',
   },
   {
     href: '/member-login',
-    title: 'Member Portal',
-    description: 'View digests, manage your privacy settings and explore your community.',
-    badge: 'Member',
-    accent: 'border-l-4 border-l-emerald-500',
-    badgeClass: 'bg-emerald-100 text-emerald-700',
-    hoverClass: 'hover:border-emerald-300',
-  },
-  {
-    href: '/admin/login',
-    title: 'Super Admin',
-    description: 'Platform-wide administration — orgs, chapters, bots and system settings.',
-    badge: 'Platform',
-    accent: 'border-l-4 border-l-slate-500',
-    badgeClass: 'bg-slate-100 text-slate-700',
-    hoverClass: 'hover:border-slate-300',
+    title: 'Member',
+    description: 'View digests, manage privacy and explore your community.',
+    icon: UserRound,
+    iconWrap: 'bg-emerald-100 text-emerald-600',
+    ring: 'hover:ring-emerald-200 hover:border-emerald-300',
   },
 ];
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-6">
-      <div className="w-full max-w-md space-y-8">
-        <div className="text-center space-y-2">
-          <h1 className="text-3xl font-bold tracking-tight">TOWER</h1>
-          <p className="text-muted-foreground text-sm">Community Knowledge Infrastructure Platform</p>
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/40 to-background p-6">
+      <div className="w-full max-w-md space-y-10">
+        <div className="text-center space-y-3">
+          <div className="inline-flex size-12 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 items-center justify-center text-white font-bold text-xl shadow-lg mx-auto">
+            T
+          </div>
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Welcome to TOWER</h1>
+            <p className="text-sm text-muted-foreground">Choose how you want to sign in</p>
+          </div>
         </div>
 
         <div className="space-y-3">
-          {PORTALS.map((p) => (
-            <Link
-              key={p.href}
-              href={p.href}
-              className={`group flex items-start gap-4 bg-card rounded-xl border p-5 transition-colors ${p.accent} ${p.hoverClass}`}
-            >
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="font-semibold text-sm">{p.title}</span>
-                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${p.badgeClass}`}>{p.badge}</span>
+          {PORTALS.map((p) => {
+            const Icon = p.icon;
+            return (
+              <Link
+                key={p.href}
+                href={p.href}
+                className={`group flex items-center gap-4 bg-card rounded-2xl border p-4 shadow-sm ring-1 ring-transparent transition-all hover:shadow-md ${p.ring}`}
+              >
+                <div className={`size-11 rounded-xl flex items-center justify-center shrink-0 ${p.iconWrap}`}>
+                  <Icon className="size-5" />
                 </div>
-                <p className="text-xs text-muted-foreground leading-relaxed">{p.description}</p>
-              </div>
-              <ArrowRight className="size-4 text-muted-foreground shrink-0 mt-0.5 transition-transform group-hover:translate-x-0.5" />
-            </Link>
-          ))}
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold text-sm">{p.title} Portal</p>
+                  <p className="text-xs text-muted-foreground leading-relaxed mt-0.5">{p.description}</p>
+                </div>
+                <ArrowRight className="size-4 text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5" />
+              </Link>
+            );
+          })}
         </div>
 
         <p className="text-center text-xs text-muted-foreground">