diff --git a/packages/api/src/app.ts b/packages/api/src/app.ts
index ddd88b8..885905b 100644
--- a/packages/api/src/app.ts
+++ b/packages/api/src/app.ts
@@ -9,6 +9,7 @@ import { groupRoutes } from './routes/groups.js';
 import { memberRoutes } from './routes/members.js';
 import { expenseRoutes } from './routes/expenses.js';
 import { balanceRoutes } from './routes/balances.js';
+import { settleRoutes } from './routes/settle.js';
 import { authRoutes } from './routes/auth.js';
 import { userRoutes } from './routes/user.js';
 
@@ -62,6 +63,7 @@ export async function buildApp() {
   await fastify.register(memberRoutes);
   await fastify.register(expenseRoutes);
   await fastify.register(balanceRoutes);
+  await fastify.register(settleRoutes);
 
   fastify.get('/health', async () => ({ status: 'ok' }));
 
diff --git a/packages/api/src/routes/groups.ts b/packages/api/src/routes/groups.ts
index 8e35e24..65c841e 100644
--- a/packages/api/src/routes/groups.ts
+++ b/packages/api/src/routes/groups.ts
@@ -186,6 +186,28 @@ export async function groupRoutes(fastify: FastifyInstance) {
     },
   );
 
+  fastify.delete(
+    '/api/v1/groups/:id',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        tags: ['groups'],
+        summary: 'Delete a group and all its data (owner only)',
+      },
+      preHandler: [requireSession, requireGroupMember, requireOwner],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      // CASCADE on foreign keys cleans up members, expenses, splits, activity logs
+      await db.delete(groups).where(eq(groups.id, id));
+      return reply.status(204).send();
+    },
+  );
+
   fastify.get(
     '/api/v1/groups/:id/activity',
     {
diff --git a/packages/api/src/routes/members.ts b/packages/api/src/routes/members.ts
index fb96eed..9a856dd 100644
--- a/packages/api/src/routes/members.ts
+++ b/packages/api/src/routes/members.ts
@@ -217,4 +217,37 @@ export async function memberRoutes(fastify: FastifyInstance) {
       return reply.status(204).send();
     },
   );
+
+  fastify.post(
+    '/api/v1/groups/:id/leave',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        tags: ['members'],
+        summary: 'Leave a group (non-owner members only)',
+      },
+      preHandler: [requireSession, requireGroupMember],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      const member = request.member!;
+
+      if (member.role === 'owner') {
+        return reply.status(403).send({ error: 'Group owner cannot leave. Delete the group instead.' });
+      }
+
+      await db.update(members).set({ leftAt: new Date() }).where(eq(members.id, member.id));
+
+      await db.insert(activityLog).values({
+        groupId: id,
+        message: `${member.displayName} left the group`,
+      });
+
+      return reply.status(204).send();
+    },
+  );
 }
diff --git a/packages/api/src/routes/settle.ts b/packages/api/src/routes/settle.ts
new file mode 100644
index 0000000..50883a1
--- /dev/null
+++ b/packages/api/src/routes/settle.ts
@@ -0,0 +1,86 @@
+import { FastifyInstance } from 'fastify';
+import { randomUUID } from 'crypto';
+import { db, members, expenses, expenseSplits, groups, activityLog } from '../db/index.js';
+import { eq, and, isNull } from 'drizzle-orm';
+import { requireSession, requireGroupMember } from '../plugins/session.js';
+import { groupExpiresAt } from '../lib/time.js';
+
+export async function settleRoutes(fastify: FastifyInstance) {
+  fastify.post(
+    '/api/v1/groups/:id/settle',
+    {
+      schema: {
+        params: {
+          type: 'object',
+          required: ['id'],
+          properties: { id: { type: 'string' } },
+        },
+        body: {
+          type: 'object',
+          required: ['from', 'to', 'amountCents'],
+          properties: {
+            from: { type: 'string' },
+            to: { type: 'string' },
+            amountCents: { type: 'integer', minimum: 1 },
+          },
+        },
+        tags: ['balances'],
+        summary: 'Record a settlement payment between two members',
+      },
+      preHandler: [requireSession, requireGroupMember],
+    },
+    async (request, reply) => {
+      const { id } = request.params as { id: string };
+      const { from, to, amountCents } = request.body as {
+        from: string;
+        to: string;
+        amountCents: number;
+      };
+
+      const [group] = await db.select().from(groups).where(eq(groups.id, id));
+      if (!group) return reply.status(404).send({ error: 'Group not found' });
+      if (group.expiresAt < new Date()) {
+        return reply.status(410).send({ error: 'Group has expired' });
+      }
+
+      const memberRows = await db
+        .select({ id: members.id, displayName: members.displayName })
+        .from(members)
+        .where(and(eq(members.groupId, id), isNull(members.leftAt)));
+
+      const memberMap = new Map(memberRows.map((m) => [m.id, m.displayName]));
+      if (!memberMap.has(from) || !memberMap.has(to)) {
+        return reply.status(400).send({ error: 'Invalid member IDs' });
+      }
+
+      // Record the settlement as an exact-split expense so the ledger stays
+      // consistent: paidBy=from credits `from`, split on `to` debits `to`.
+      const amount = String(amountCents / 100);
+      const expenseId = randomUUID();
+
+      await db.insert(expenses).values({
+        id: expenseId,
+        groupId: id,
+        paidBy: from,
+        amount,
+        description: '💸 Settlement',
+        splitType: 'exact',
+      });
+
+      await db.insert(expenseSplits).values({
+        expenseId,
+        memberId: to,
+        amount,
+      });
+
+      await db.insert(activityLog).values({
+        groupId: id,
+        message: `${memberMap.get(from)} settled $${(amountCents / 100).toFixed(2)} with ${memberMap.get(to)}`,
+      });
+
+      await db.update(groups).set({ expiresAt: groupExpiresAt() }).where(eq(groups.id, id));
+
+      return reply.status(204).send();
+    },
+  );
+}
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 9acea18..b3d4fee 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -9,6 +9,8 @@ import CreateGroupPage from './pages/CreateGroupPage.js';
 import JoinPage from './pages/JoinPage.js';
 import DashboardPage from './pages/DashboardPage.js';
 import SettingsPage from './pages/SettingsPage.js';
+import GroupSettingsPage from './pages/GroupSettingsPage.js';
+import AccountPage from './pages/AccountPage.js';
 
 export default function App() {
   return (
@@ -21,6 +23,8 @@ export default function App() {
             <Route path="/g/:inviteCode" element={<JoinPage />} />
             <Route path="/groups/:id" element={<DashboardPage />} />
             <Route path="/groups/:id/settings" element={<SettingsPage />} />
+            <Route path="/groups/:id/settings/group" element={<GroupSettingsPage />} />
+            <Route path="/groups/:id/settings/account" element={<AccountPage />} />
             <Route path="/create" element={<CreateGroupPage />} />
           </Routes>
         </BrowserRouter>
diff --git a/packages/web/src/components/AddExpenseModal.tsx b/packages/web/src/components/AddExpenseModal.tsx
index da4b018..7978060 100644
--- a/packages/web/src/components/AddExpenseModal.tsx
+++ b/packages/web/src/components/AddExpenseModal.tsx
@@ -1,8 +1,6 @@
-import { useState, FormEvent } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import type { Member, Expense, SplitType, ExactSplitInput, PercentageSplitInput } from '@tabby/shared';
-import { Modal } from './Modal.js';
-import { Button } from './Button.js';
-import { Input } from './Input.js';
+import { Avatar } from './Avatar.js';
 
 interface AddExpenseModalProps {
   open: boolean;
@@ -19,6 +17,80 @@ interface AddExpenseModalProps {
   }) => Promise<void>;
 }
 
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function CheckIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="4 12 10 18 20 6" />
+    </svg>
+  );
+}
+
+function PencilIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M15.232 5.232l3.536 3.536M16.732 3.732a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+      <path d="M6 6l12 12M6 18L18 6" />
+    </svg>
+  );
+}
+
+// ─── Step header ─────────────────────────────────────────────────────────────
+
+interface StepHeaderProps {
+  idx: number;
+  label: string;
+  summary: string | null;
+  expanded: boolean;
+  done: boolean;
+  disabled: boolean;
+  onClick: () => void;
+}
+
+function StepHeader({ idx, label, summary, expanded, done, disabled, onClick }: StepHeaderProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="w-full flex items-center gap-3 text-left disabled:cursor-default"
+    >
+      <div
+        className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 transition-colors text-xs font-bold ${
+          done
+            ? 'bg-emerald-500 text-white'
+            : expanded
+            ? 'bg-primary text-white'
+            : 'bg-stone-200 text-stone-500'
+        }`}
+      >
+        {done ? <CheckIcon size={12} /> : idx}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="tabby-eyebrow text-stone-500">{label}</p>
+        {!expanded && summary && (
+          <p className="text-sm font-semibold text-stone-900 mt-1 truncate">{summary}</p>
+        )}
+      </div>
+      {!expanded && summary && (
+        <span className="text-stone-400 shrink-0">
+          <PencilIcon />
+        </span>
+      )}
+    </button>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
 export function AddExpenseModal({
   open,
   onClose,
@@ -28,10 +100,13 @@ export function AddExpenseModal({
   onSave,
 }: AddExpenseModalProps) {
   const isEditing = !!initialExpense;
-  const [description, setDescription] = useState(initialExpense?.description ?? '');
+
+  const [step, setStep] = useState<1 | 2 | 3>(1);
   const [amount, setAmount] = useState(initialExpense ? String(Number(initialExpense.amount)) : '');
+  const [description, setDescription] = useState(initialExpense?.description ?? '');
+  const [paidBy, setPaidBy] = useState(initialExpense?.paidBy ?? currentMemberId);
   const [splitType, setSplitType] = useState<SplitType>(initialExpense?.splitType ?? 'equal');
-  const [selectedIds, setSelectedIds] = useState<string[]>(
+  const [included, setIncluded] = useState<string[]>(
     initialExpense ? initialExpense.splits.map((s) => s.memberId) : members.map((m) => m.id),
   );
   const [exactAmounts, setExactAmounts] = useState<Record<string, string>>(
@@ -49,37 +124,96 @@ export function AddExpenseModal({
         )
       : {},
   );
-  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const amountInputRef = useRef<HTMLInputElement>(null);
 
-  const toggleMember = (id: string) => {
-    setSelectedIds((prev) =>
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (open) {
+      document.addEventListener('keydown', handler);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      document.removeEventListener('keydown', handler);
+      document.body.style.overflow = '';
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open && step === 1) {
+      setTimeout(() => amountInputRef.current?.focus(), 50);
+    }
+  }, [open, step]);
+
+  if (!open) return null;
+
+  // ─ Derived state ─────────────────────────────────────────────────────────
+
+  const amountNum = parseFloat(amount) || 0;
+  const amountCents = Math.round(amountNum * 100);
+
+  let assignedCents = 0;
+  if (splitType === 'exact') {
+    assignedCents = included.reduce(
+      (sum, id) => sum + Math.round((parseFloat(exactAmounts[id] ?? '0') || 0) * 100),
+      0,
     );
+  } else if (splitType === 'percentage') {
+    const totalPct = included.reduce((sum, id) => sum + (parseFloat(percentages[id] ?? '0') || 0), 0);
+    assignedCents = Math.round((totalPct / 100) * amountCents);
+  } else {
+    assignedCents = amountCents;
+  }
+  const remainderCents = amountCents - assignedCents;
+  const equalShareCents = included.length > 0 ? Math.floor(amountCents / included.length) : 0;
+
+  const step1Done = amountNum > 0 && description.trim().length > 0;
+  const step2Done = step1Done && !!paidBy;
+  const splitValid = included.length > 0 && (splitType === 'equal' || remainderCents === 0);
+  const canSubmit = step2Done && splitValid;
+
+  const fmtCents = (c: number) =>
+    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Math.abs(c) / 100);
+
+  // ─ Helpers ───────────────────────────────────────────────────────────────
+
+  const toggleMember = (id: string) => {
+    setIncluded((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
   };
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setError('');
-    const amountNum = parseFloat(amount);
-    if (isNaN(amountNum) || amountNum <= 0) {
-      setError('Enter a valid amount');
-      return;
-    }
-    if (selectedIds.length === 0) {
-      setError('Select at least one member');
-      return;
+  const applyPreset = (preset: 'all' | 'just-them' | 'just-me') => {
+    if (preset === 'all') setIncluded(members.map((m) => m.id));
+    else if (preset === 'just-me') setIncluded([currentMemberId]);
+    else if (preset === 'just-them')
+      setIncluded(members.filter((m) => m.id !== currentMemberId).map((m) => m.id));
+  };
+
+  const distributeEvenly = () => {
+    if (included.length === 0 || amountNum === 0) return;
+    if (splitType === 'exact') {
+      const each = (amountNum / included.length).toFixed(2);
+      setExactAmounts(Object.fromEntries(included.map((id) => [id, each])));
+    } else if (splitType === 'percentage') {
+      const each = String(Math.round(100 / included.length));
+      setPercentages(Object.fromEntries(included.map((id) => [id, each])));
     }
+  };
 
-    let splits: ExactSplitInput[] | PercentageSplitInput[] | undefined;
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+    setError('');
 
+    let splits: ExactSplitInput[] | PercentageSplitInput[] | undefined;
     if (splitType === 'exact') {
-      splits = selectedIds.map((id) => ({
+      splits = included.map((id) => ({
         memberId: id,
         amount: parseFloat(exactAmounts[id] ?? '0'),
       }));
     } else if (splitType === 'percentage') {
-      splits = selectedIds.map((id) => ({
+      splits = included.map((id) => ({
         memberId: id,
         percentage: parseFloat(percentages[id] ?? '0'),
       }));
@@ -87,13 +221,7 @@ export function AddExpenseModal({
 
     setLoading(true);
     try {
-      await onSave({ description, amount: amountNum, splitType, memberIds: selectedIds, splits });
-      setDescription('');
-      setAmount('');
-      setSplitType('equal');
-      setSelectedIds(members.map((m) => m.id));
-      setExactAmounts({});
-      setPercentages({});
+      await onSave({ description, amount: amountNum, splitType, memberIds: included, splits });
       onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to save expense');
@@ -102,107 +230,336 @@ export function AddExpenseModal({
     }
   };
 
+  // ─ Summary lines for collapsed steps ─────────────────────────────────────
+
+  const step1Summary = step1Done ? `${fmtCents(amountCents)} · ${description}` : null;
+  const paidByName = members.find((m) => m.id === paidBy)?.displayName ?? '';
+  const step2Summary = paidBy
+    ? paidBy === currentMemberId
+      ? 'You paid'
+      : `${paidByName.split(' ')[0]} paid`
+    : null;
+  const step3Summary =
+    included.length > 0
+      ? splitType === 'equal'
+        ? `Equally between ${included.length}`
+        : `${splitType === 'exact' ? 'Custom $' : '%'} · ${included.length} people`
+      : null;
+
+  // ─ Render ─────────────────────────────────────────────────────────────────
+
   return (
-    <Modal open={open} onClose={onClose} title={isEditing ? 'Edit expense' : 'Add expense'}>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <Input
-          label="Description"
-          placeholder="e.g. Dinner at Moose Lodge"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          required
-          maxLength={200}
-          autoFocus
-        />
-        <Input
-          label="Amount ($)"
-          type="number"
-          step="0.01"
-          min="0.01"
-          max="10000"
-          placeholder="0.00"
-          value={amount}
-          onChange={(e) => setAmount(e.target.value)}
-          required
-        />
-
-        <div>
-          <label className="text-sm font-medium text-stone-700 block mb-2">Split type</label>
-          <div className="bg-stone-100 rounded-xl p-1 flex gap-1">
-            {(['equal', 'exact', 'percentage'] as SplitType[]).map((t) => (
-              <button
-                key={t}
-                type="button"
-                onClick={() => setSplitType(t)}
-                className={`flex-1 py-1.5 rounded-lg text-sm font-medium transition-colors capitalize
-                  ${splitType === t
-                    ? 'bg-orange-500 text-white shadow-sm'
-                    : 'text-stone-500 hover:text-stone-700'
-                  }`}
-              >
-                {t.charAt(0).toUpperCase() + t.slice(1)}
-              </button>
-            ))}
-          </div>
+    <div
+      className="fixed inset-0 z-50 flex items-end sm:items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label={isEditing ? 'Edit expense' : 'New expense'}
+    >
+      <div className="fixed inset-0 bg-black/40" onClick={onClose} aria-hidden="true" />
+
+      <div className="relative w-full sm:max-w-lg sm:mx-auto bg-white rounded-t-3xl sm:rounded-2xl flex flex-col max-h-[92vh] sm:max-h-[85vh]">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-stone-100 shrink-0">
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-9 h-9 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-500 transition-colors"
+            aria-label="Close"
+          >
+            <CloseIcon />
+          </button>
+          <h2 className="text-[15px] font-semibold text-stone-900">
+            {isEditing ? 'Edit expense' : 'New expense'}
+          </h2>
+          <div className="w-9" />
         </div>
 
-        <div>
-          <label className="text-sm font-medium text-stone-700 block mb-2">Split between</label>
-          <div className="space-y-2">
-            {members.map((m) => (
-              <div key={m.id} className="flex items-center gap-3">
-                <input
-                  type="checkbox"
-                  id={`member-${m.id}`}
-                  checked={selectedIds.includes(m.id)}
-                  onChange={() => toggleMember(m.id)}
-                  className="rounded border-stone-300 text-orange-500 focus:ring-orange-500"
-                  aria-label={m.displayName}
-                />
-                <label htmlFor={`member-${m.id}`} className="flex-1 text-sm text-stone-700">
-                  {m.displayName} {m.id === currentMemberId && <span className="text-stone-400">(you)</span>}
-                </label>
-                {splitType === 'exact' && selectedIds.includes(m.id) && (
-                  <input
-                    type="number"
-                    step="0.01"
-                    min="0"
-                    value={exactAmounts[m.id] ?? ''}
-                    onChange={(e) => setExactAmounts((prev) => ({ ...prev, [m.id]: e.target.value }))}
-                    className="w-24 rounded-lg border border-stone-200 px-2.5 py-1.5 text-sm focus:ring-2 focus:ring-orange-500 focus:border-transparent"
-                    placeholder="$0.00"
-                    aria-label={`Amount for ${m.displayName}`}
-                  />
-                )}
-                {splitType === 'percentage' && selectedIds.includes(m.id) && (
+        {/* Scrollable step cards */}
+        <div className="flex-1 overflow-y-auto px-4 pt-4 pb-4 space-y-3">
+
+          {/* Step 1 — Amount */}
+          <section className="tabby-card p-4">
+            <StepHeader
+              idx={1}
+              label="Amount"
+              summary={step1Summary}
+              expanded={step === 1}
+              done={step !== 1 && step1Done}
+              disabled={false}
+              onClick={() => setStep(1)}
+            />
+            {step === 1 && (
+              <div className="mt-4">
+                <div className="flex items-baseline justify-center gap-1 py-2">
+                  <span className="text-4xl font-bold text-stone-400 tabular-nums select-none">$</span>
                   <input
-                    type="number"
-                    step="1"
-                    min="0"
-                    max="100"
-                    value={percentages[m.id] ?? ''}
-                    onChange={(e) => setPercentages((prev) => ({ ...prev, [m.id]: e.target.value }))}
-                    className="w-20 rounded-lg border border-stone-200 px-2.5 py-1.5 text-sm focus:ring-2 focus:ring-orange-500 focus:border-transparent"
-                    placeholder="0%"
-                    aria-label={`Percentage for ${m.displayName}`}
+                    ref={amountInputRef}
+                    inputMode="decimal"
+                    value={amount}
+                    onChange={(e) => setAmount(e.target.value.replace(/[^\d.]/g, ''))}
+                    placeholder="0.00"
+                    className="bg-transparent border-0 outline-none text-center font-extrabold text-stone-900 tabular-nums w-[7ch]"
+                    style={{ fontSize: 56, lineHeight: 1, letterSpacing: -1 }}
+                    aria-label="Amount"
                   />
+                </div>
+                <input
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="What was it for?"
+                  className="w-full text-center text-[15px] text-stone-700 placeholder:text-stone-300 bg-transparent border-0 border-b border-stone-200 focus:border-primary outline-none py-2 transition-colors"
+                  maxLength={80}
+                  aria-label="Description"
+                />
+                <button
+                  type="button"
+                  onClick={() => setStep(2)}
+                  disabled={!step1Done}
+                  className="mt-4 w-full bg-primary hover:bg-primary-hover disabled:opacity-40 disabled:cursor-not-allowed text-white font-semibold py-3 rounded-xl text-sm transition-colors"
+                >
+                  Continue
+                </button>
+              </div>
+            )}
+          </section>
+
+          {/* Step 2 — Paid by */}
+          <section className={`tabby-card p-4 ${!step1Done ? 'opacity-50 pointer-events-none' : ''}`}>
+            <StepHeader
+              idx={2}
+              label="Paid by"
+              summary={step2Summary}
+              expanded={step === 2}
+              done={step !== 2 && step2Done}
+              disabled={!step1Done}
+              onClick={() => step1Done && setStep(2)}
+            />
+            {step === 2 && (
+              <div className="mt-4 space-y-1">
+                {members.map((m) => (
+                  <button
+                    key={m.id}
+                    type="button"
+                    onClick={() => setPaidBy(m.id)}
+                    className={`w-full flex items-center gap-3 p-2.5 rounded-xl transition-colors ${
+                      paidBy === m.id ? 'bg-orange-50 ring-1 ring-orange-200' : 'hover:bg-stone-50'
+                    }`}
+                  >
+                    <Avatar name={m.displayName} size={36} />
+                    <span className="flex-1 text-left text-sm font-medium text-stone-900">
+                      {m.displayName}{' '}
+                      {m.id === currentMemberId && (
+                        <span className="text-stone-400 font-normal">(you)</span>
+                      )}
+                    </span>
+                    <div
+                      className={`w-5 h-5 rounded-full flex items-center justify-center transition-all ${
+                        paidBy === m.id ? 'bg-primary text-white' : 'ring-1 ring-stone-300'
+                      }`}
+                    >
+                      {paidBy === m.id && <CheckIcon size={11} />}
+                    </div>
+                  </button>
+                ))}
+                <button
+                  type="button"
+                  onClick={() => setStep(3)}
+                  className="mt-3 w-full bg-primary hover:bg-primary-hover text-white font-semibold py-3 rounded-xl text-sm transition-colors"
+                >
+                  Continue
+                </button>
+              </div>
+            )}
+          </section>
+
+          {/* Step 3 — Split */}
+          <section className={`tabby-card p-4 ${!step2Done ? 'opacity-50 pointer-events-none' : ''}`}>
+            <StepHeader
+              idx={3}
+              label="Split"
+              summary={step3Summary}
+              expanded={step === 3}
+              done={step !== 3 && splitValid && step2Done}
+              disabled={!step2Done}
+              onClick={() => step2Done && setStep(3)}
+            />
+            {step === 3 && (
+              <div className="mt-4 space-y-3">
+                {/* Split type tabs */}
+                <div className="pill-tab-track">
+                  {([['equal', 'Equal'], ['exact', 'Custom $'], ['percentage', '%']] as const).map(
+                    ([t, label]) => (
+                      <button
+                        key={t}
+                        type="button"
+                        onClick={() => setSplitType(t)}
+                        className={`flex-1 rounded-lg py-1.5 text-[12.5px] font-semibold transition-colors ${
+                          splitType === t ? 'pill-tab-active' : 'text-stone-500'
+                        }`}
+                      >
+                        {label}
+                      </button>
+                    ),
+                  )}
+                </div>
+
+                {/* Quick preset chips */}
+                <div className="flex gap-1.5 flex-wrap">
+                  {(
+                    [
+                      ['all', 'Everyone'],
+                      ['just-them', 'Just them'],
+                      ['just-me', 'Just me'],
+                    ] as const
+                  ).map(([k, label]) => (
+                    <button
+                      key={k}
+                      type="button"
+                      onClick={() => applyPreset(k)}
+                      className="text-xs font-semibold text-stone-600 bg-stone-100 hover:bg-stone-200 px-3 py-1.5 rounded-full transition-colors"
+                    >
+                      {label}
+                    </button>
+                  ))}
+                  {splitType !== 'equal' && (
+                    <button
+                      type="button"
+                      onClick={distributeEvenly}
+                      className="text-xs font-semibold text-orange-600 bg-orange-50 hover:bg-orange-100 px-3 py-1.5 rounded-full transition-colors"
+                    >
+                      Distribute evenly
+                    </button>
+                  )}
+                </div>
+
+                {/* Member rows */}
+                <div className="space-y-1">
+                  {members.map((m) => {
+                    const on = included.includes(m.id);
+                    return (
+                      <div
+                        key={m.id}
+                        className={`flex items-center gap-3 p-2 rounded-xl ${on ? '' : 'opacity-40'}`}
+                      >
+                        <button
+                          type="button"
+                          onClick={() => toggleMember(m.id)}
+                          className={`w-5 h-5 rounded-md flex items-center justify-center shrink-0 transition-all ${
+                            on ? 'bg-primary text-white' : 'ring-1 ring-stone-300'
+                          }`}
+                          aria-label={`${on ? 'Remove' : 'Include'} ${m.displayName}`}
+                        >
+                          {on && <CheckIcon size={11} />}
+                        </button>
+                        <Avatar name={m.displayName} size={32} />
+                        <span className="flex-1 text-sm font-medium text-stone-900 truncate">
+                          {m.displayName.split(' ')[0]}
+                          {m.id === currentMemberId && (
+                            <span className="text-stone-400 font-normal text-xs"> (you)</span>
+                          )}
+                        </span>
+                        {splitType === 'equal' && on && (
+                          <span className="text-xs text-stone-500 tabular-nums shrink-0">
+                            {fmtCents(equalShareCents)}
+                          </span>
+                        )}
+                        {splitType === 'exact' && on && (
+                          <input
+                            type="number"
+                            step="0.01"
+                            min="0"
+                            value={exactAmounts[m.id] ?? ''}
+                            onChange={(e) =>
+                              setExactAmounts((prev) => ({ ...prev, [m.id]: e.target.value }))
+                            }
+                            placeholder="0.00"
+                            className="w-20 text-right rounded-lg ring-1 ring-stone-200 focus:ring-primary outline-none px-2 py-1 text-sm tabular-nums"
+                            aria-label={`Amount for ${m.displayName}`}
+                          />
+                        )}
+                        {splitType === 'percentage' && on && (
+                          <div className="flex items-center gap-1">
+                            <input
+                              type="number"
+                              step="1"
+                              min="0"
+                              max="100"
+                              value={percentages[m.id] ?? ''}
+                              onChange={(e) =>
+                                setPercentages((prev) => ({ ...prev, [m.id]: e.target.value }))
+                              }
+                              placeholder="0"
+                              className="w-14 text-right rounded-lg ring-1 ring-stone-200 focus:ring-primary outline-none px-2 py-1 text-sm tabular-nums"
+                              aria-label={`Percentage for ${m.displayName}`}
+                            />
+                            <span className="text-sm text-stone-500">%</span>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {/* Live remainder pill */}
+                {splitType !== 'equal' && (
+                  <div
+                    className={`flex items-center justify-between rounded-xl px-3.5 py-2.5 ring-1 transition-colors ${
+                      remainderCents === 0
+                        ? 'bg-success-subtle ring-emerald-200'
+                        : 'bg-warning-subtle ring-amber-200'
+                    }`}
+                  >
+                    <span
+                      className={`text-xs font-semibold ${
+                        remainderCents === 0 ? 'text-emerald-700' : 'text-amber-700'
+                      }`}
+                    >
+                      {remainderCents === 0
+                        ? 'Splits add up perfectly'
+                        : remainderCents > 0
+                        ? 'Still to assign'
+                        : 'Over by'}
+                    </span>
+                    <span
+                      className={`text-sm font-bold tabular-nums ${
+                        remainderCents === 0 ? 'text-emerald-700' : 'text-amber-800'
+                      }`}
+                    >
+                      {remainderCents === 0 ? (
+                        <CheckIcon size={14} />
+                      ) : (
+                        fmtCents(remainderCents)
+                      )}
+                    </span>
+                  </div>
                 )}
               </div>
-            ))}
-          </div>
-        </div>
+            )}
+          </section>
 
-        {error && <p className="text-sm text-red-600">{error}</p>}
+          {error && <p className="text-sm text-red-600 px-1">{error}</p>}
+        </div>
 
-        <div className="flex gap-3 pt-2">
-          <Button type="button" variant="secondary" onClick={onClose} className="flex-1">
-            Cancel
-          </Button>
-          <Button type="submit" loading={loading} className="flex-1">
-            {isEditing ? 'Save changes' : 'Add expense'}
-          </Button>
+        {/* Sticky footer */}
+        <div className="shrink-0 border-t border-stone-100 bg-white px-4 pt-3 pb-7">
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!canSubmit || loading}
+            className="w-full bg-primary hover:bg-primary-hover disabled:bg-stone-200 disabled:text-stone-400 text-white font-bold py-3.5 rounded-xl text-[15px] transition-colors flex items-center justify-center gap-2"
+          >
+            {loading && (
+              <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+            )}
+            {canSubmit
+              ? `${isEditing ? 'Save' : 'Add'} ${fmtCents(amountCents)} expense`
+              : 'Fill all 3 steps'}
+          </button>
         </div>
-      </form>
-    </Modal>
+      </div>
+    </div>
   );
 }
diff --git a/packages/web/src/components/Avatar.tsx b/packages/web/src/components/Avatar.tsx
index 13d97d1..5ead59c 100644
--- a/packages/web/src/components/Avatar.tsx
+++ b/packages/web/src/components/Avatar.tsx
@@ -1,6 +1,7 @@
 interface AvatarProps {
   name: string;
-  size?: 'sm' | 'md' | 'lg';
+  /** Named size token or explicit pixel size (e.g. 22, 36, 56) */
+  size?: 'sm' | 'md' | 'lg' | number;
 }
 
 // Warm color pool — no cool blues or grays
@@ -16,7 +17,7 @@ const colors = [
   'bg-indigo-400',
 ];
 
-const sizeClasses = {
+const namedSizeClasses: Record<string, string> = {
   sm: 'w-7 h-7 text-xs',
   md: 'w-9 h-9 text-sm',
   lg: 'w-12 h-12 text-base',
@@ -28,6 +29,14 @@ function colorForName(name: string): string {
   return colors[Math.abs(hash) % colors.length]!;
 }
 
+function textClassForPx(px: number): string {
+  if (px <= 22) return 'text-[9px]';
+  if (px <= 28) return 'text-[10px]';
+  if (px <= 36) return 'text-xs';
+  if (px <= 48) return 'text-sm';
+  return 'text-base';
+}
+
 export function Avatar({ name, size = 'md' }: AvatarProps) {
   const initials = name
     .split(' ')
@@ -37,9 +46,14 @@ export function Avatar({ name, size = 'md' }: AvatarProps) {
     .join('')
     .toUpperCase();
 
+  const isNumeric = typeof size === 'number';
+  const sizeClass = isNumeric ? textClassForPx(size) : namedSizeClasses[size];
+  const sizeStyle = isNumeric ? { width: size, height: size } : undefined;
+
   return (
     <div
-      className={`${sizeClasses[size]} ${colorForName(name)} rounded-full flex items-center justify-center text-white font-semibold select-none shrink-0`}
+      className={`${sizeClass} ${colorForName(name)} rounded-full flex items-center justify-center text-white font-semibold select-none shrink-0`}
+      style={sizeStyle}
       aria-label={name}
     >
       {initials}
diff --git a/packages/web/src/components/DesktopRail.tsx b/packages/web/src/components/DesktopRail.tsx
new file mode 100644
index 0000000..9129590
--- /dev/null
+++ b/packages/web/src/components/DesktopRail.tsx
@@ -0,0 +1,90 @@
+import { Link } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api.js';
+import { queryKeys } from '../lib/queryKeys.js';
+import { Avatar } from './Avatar.js';
+import { TabbyLogo } from './TabbyLogo.js';
+import { useAuth } from '../lib/auth.js';
+
+interface Props {
+  activeGroupId?: string;
+}
+
+function PlusSmIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+export function DesktopRail({ activeGroupId }: Props) {
+  const { user } = useAuth();
+  const myGroupsQuery = useQuery({
+    queryKey: queryKeys.myGroups(),
+    queryFn: () => api.getMyGroups(),
+  });
+  const groups = myGroupsQuery.data ?? [];
+
+  return (
+    <aside className="hidden lg:flex w-[260px] bg-white border-r border-stone-100 flex-col shrink-0 overflow-hidden">
+      <div className="px-4 py-4 flex items-center gap-2.5 border-b border-stone-100">
+        <TabbyLogo size={26} />
+        <span className="text-[18px] font-extrabold text-stone-900 tracking-tight">Tabby</span>
+      </div>
+
+      <div className="px-3 pt-4 pb-2 flex items-center justify-between">
+        <p className="text-[10px] font-bold text-stone-400 uppercase tracking-wider px-1">Your groups</p>
+        <Link to="/create">
+          <button className="w-6 h-6 rounded-md hover:bg-stone-100 flex items-center justify-center text-stone-500" title="New group">
+            <PlusSmIcon />
+          </button>
+        </Link>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-2 pb-3 space-y-1">
+        {groups.map(({ group, memberCount }) => {
+          const active = group.id === activeGroupId;
+          const initials = group.name.split(' ').map((w) => w[0]).slice(0, 2).join('');
+          return (
+            <Link key={group.id} to={`/groups/${group.id}`} className="block">
+              <div className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors cursor-pointer ${active ? 'bg-orange-50 ring-1 ring-orange-200' : 'hover:bg-stone-100'}`}>
+                <div className={`w-9 h-9 rounded-lg flex items-center justify-center text-[13px] font-bold shrink-0 ${active ? 'bg-primary text-white' : 'bg-stone-200 text-stone-600'}`}>
+                  {initials}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className={`text-[13.5px] font-semibold truncate leading-tight ${active ? 'text-orange-900' : 'text-stone-800'}`}>
+                    {group.name}
+                  </p>
+                  <p className="text-[11px] text-stone-400 leading-tight mt-0.5">{memberCount} members</p>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+
+      <div className="border-t border-stone-100 p-3 flex items-center gap-3 min-w-0">
+        {user ? (
+          <>
+            <Avatar name={user.name} size={32} />
+            <div className="flex-1 min-w-0">
+              <p className="text-[13px] font-semibold text-stone-900 truncate">{user.name}</p>
+              <p className="text-[11px] text-stone-400 truncate">{user.email}</p>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="w-8 h-8 rounded-full bg-stone-200 flex items-center justify-center text-stone-500 font-bold text-[13px] shrink-0">
+              G
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-[13px] font-semibold text-stone-900">Guest</p>
+              <p className="text-[11px] text-stone-400">Not signed in</p>
+            </div>
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 81090c6..c418d1e 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -4,6 +4,28 @@
 
 @layer base {
   body {
-    @apply bg-gray-50 text-gray-900 antialiased;
+    @apply bg-stone-50 text-stone-900 antialiased;
+  }
+}
+
+@layer components {
+  /* White card with ring + rounded corners — the shared card vocabulary */
+  .tabby-card {
+    @apply bg-white ring-1 ring-black/[0.06] rounded-2xl;
+  }
+
+  /* 11px bold uppercase section label */
+  .tabby-eyebrow {
+    @apply text-[11px] font-bold uppercase tracking-wider;
+  }
+
+  /* Segmented pill-tab container */
+  .pill-tab-track {
+    @apply bg-stone-100 rounded-xl p-1 flex gap-1;
+  }
+
+  /* Active pill inside the track */
+  .pill-tab-active {
+    @apply bg-orange-500 text-white shadow-sm rounded-lg;
   }
 }
diff --git a/packages/web/src/lib/api.ts b/packages/web/src/lib/api.ts
index 4f59f5a..0df52d0 100644
--- a/packages/web/src/lib/api.ts
+++ b/packages/web/src/lib/api.ts
@@ -100,12 +100,24 @@ export const api = {
   getBalances: (groupId: string) =>
     request<BalancesResponse>(`/api/v1/groups/${groupId}/balances`),
 
+  settleSettlement: (groupId: string, body: { from: string; to: string; amountCents: number }) =>
+    request<void>(`/api/v1/groups/${groupId}/settle`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }),
+
   updateGroupSettings: (groupId: string, body: UpdateGroupSettingsRequest) =>
     request<Group>(`/api/v1/groups/${groupId}/settings`, {
       method: 'PATCH',
       body: JSON.stringify(body),
     }),
 
+  leaveGroup: (groupId: string) =>
+    request<void>(`/api/v1/groups/${groupId}/leave`, { method: 'POST' }),
+
+  deleteGroup: (groupId: string) =>
+    request<void>(`/api/v1/groups/${groupId}`, { method: 'DELETE' }),
+
   getActivity: (groupId: string) =>
     request<ActivityLogEntry[]>(`/api/v1/groups/${groupId}/activity`),
 
diff --git a/packages/web/src/pages/AccountPage.tsx b/packages/web/src/pages/AccountPage.tsx
new file mode 100644
index 0000000..5b1fc05
--- /dev/null
+++ b/packages/web/src/pages/AccountPage.tsx
@@ -0,0 +1,206 @@
+import { useParams, Link } from 'react-router-dom';
+import { useAuth } from '../lib/auth.js';
+import { Avatar } from '../components/Avatar.js';
+import { DesktopRail } from '../components/DesktopRail.js';
+import { appPageStyle } from '../components/CatBackground.js';
+
+function BackIcon() {
+  return (
+    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+      <path d="M15 6l-6 6 6 6" />
+    </svg>
+  );
+}
+
+function GoogleG({ size = 18 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
+      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 11-3.4-13l5.7-5.7A20 20 0 1044 24c0-1.2-.1-2.3-.4-3.5z" />
+      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8A12 12 0 0124 12c3 0 5.8 1.2 7.9 3l5.7-5.7A20 20 0 006.3 14.7z" />
+      <path fill="#4CAF50" d="M24 44c5.2 0 10-2 13.6-5.3l-6.3-5.3A12 12 0 0124 36a12 12 0 01-11.3-8l-6.5 5A20 20 0 0024 44z" />
+      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 01-4.1 5.4l6.3 5.3C40 35.5 44 30.3 44 24c0-1.2-.1-2.3-.4-3.5z" />
+    </svg>
+  );
+}
+
+function SyncIcon() {
+  return (
+    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17.5 19a4.5 4.5 0 100-9h-1.3A7 7 0 103 14" /><path d="M14 14l3 3 3-3M17 17v-7" />
+    </svg>
+  );
+}
+
+function LogoutIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" />
+    </svg>
+  );
+}
+
+export default function AccountPage() {
+  const { id } = useParams<{ id: string }>();
+  const { user, login, logout } = useAuth();
+  const isGuest = !user;
+
+  return (
+    <div className="min-h-screen lg:flex lg:h-screen lg:overflow-hidden" style={appPageStyle}>
+      <DesktopRail activeGroupId={id} />
+
+      {/* Main column */}
+      <div className="flex-1 min-w-0 lg:flex lg:flex-col lg:overflow-hidden">
+
+        {/* Mobile header */}
+        <header className="bg-white border-b border-stone-100 sticky top-0 z-10 lg:hidden">
+          <div className="max-w-2xl mx-auto px-2 py-3 flex items-center gap-1">
+            <Link to={`/groups/${id}/settings`}>
+              <button className="w-9 h-9 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-700 transition-colors" aria-label="Back">
+                <BackIcon />
+              </button>
+            </Link>
+            <div className="flex-1 min-w-0 px-1">
+              <p className="text-[11px] font-semibold text-stone-400 leading-none">Settings</p>
+              <h1 className="text-[15px] font-bold text-stone-900 leading-tight mt-0.5">Account</h1>
+            </div>
+          </div>
+        </header>
+
+        {/* Desktop header */}
+        <header className="hidden lg:block bg-white border-b border-stone-100 px-8 py-5 shrink-0">
+          <div className="flex items-center gap-2 text-[12.5px] text-stone-400 mb-1.5">
+            <span>Settings</span>
+            <span>›</span>
+            <span className="text-stone-700 font-medium">Account</span>
+          </div>
+          <h1 className="text-[22px] font-bold text-stone-900 tracking-tight">Account</h1>
+        </header>
+
+        {/* Scrollable content */}
+        <div className="lg:flex-1 lg:overflow-y-auto">
+          <main className="max-w-2xl mx-auto px-4 pt-5 pb-8 lg:max-w-[760px] lg:px-8 lg:py-7">
+
+            {/* Identity card */}
+            <section className="tabby-card p-5 mb-5 flex items-center gap-4 lg:p-5">
+              {isGuest ? (
+                <>
+                  <div className="w-14 h-14 rounded-full bg-stone-200 flex items-center justify-center text-stone-500 font-bold text-xl shrink-0">
+                    G
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-base font-bold text-stone-900 leading-tight">Guest</p>
+                    <p className="text-xs text-stone-500 mt-0.5 leading-snug lg:text-[13px]">
+                      Your data lives only on this device. Sign in to sync across devices &amp; recover if you lose access.
+                    </p>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <Avatar name={user.name} size={56} />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-base font-bold text-stone-900 leading-tight truncate lg:text-[18px]">{user.name}</p>
+                    <p className="text-[12.5px] text-stone-500 truncate mt-0.5 flex items-center gap-1.5 lg:text-[13px]">
+                      <GoogleG size={13} />
+                      {user.email}
+                    </p>
+                  </div>
+                </>
+              )}
+            </section>
+
+            {/* Guest: sign-in prompt */}
+            {isGuest && (
+              <>
+                <p className="tabby-eyebrow text-stone-500 mb-2 px-1">Sign in to sync</p>
+                <section className="tabby-card overflow-hidden mb-3">
+                  <div className="px-5 py-5">
+                    <div className="lg:grid lg:grid-cols-3 lg:gap-4 mb-5">
+                      <div className="flex gap-3 mb-5 lg:hidden">
+                        <span className="w-8 h-8 rounded-lg bg-orange-50 text-orange-600 flex items-center justify-center shrink-0">
+                          <SyncIcon />
+                        </span>
+                        <div>
+                          <p className="text-sm font-semibold text-stone-900">Why sign in?</p>
+                          <ul className="text-xs text-stone-600 mt-1.5 space-y-1 leading-snug">
+                            <li>· Sync groups across your phone &amp; web</li>
+                            <li>· Recover your data if you lose this device</li>
+                            <li>· Friends can find &amp; invite you by email</li>
+                          </ul>
+                        </div>
+                      </div>
+                      {[
+                        ['Sync', 'Phone & web stay in step'],
+                        ['Recover', 'Restore your data on a new device'],
+                        ['Find', 'Friends invite you by email'],
+                      ].map(([t, d]) => (
+                        <div key={t} className="hidden lg:block text-left">
+                          <p className="text-[13px] font-bold text-stone-900">{t}</p>
+                          <p className="text-[11.5px] text-stone-500 mt-1 leading-snug">{d}</p>
+                        </div>
+                      ))}
+                    </div>
+                    <button
+                      onClick={() => login(`/groups/${id}`)}
+                      className="w-full bg-white ring-1 ring-stone-300 hover:bg-stone-50 active:bg-stone-100 rounded-xl py-3 flex items-center justify-center gap-2.5 font-semibold text-sm text-stone-800 transition-colors"
+                    >
+                      <GoogleG size={18} />
+                      Sign in with Google
+                    </button>
+                  </div>
+                </section>
+                <p className="text-[11px] text-stone-400 text-center px-6 leading-snug">
+                  By signing in you agree to Tabby&apos;s Terms &amp; Privacy.
+                </p>
+              </>
+            )}
+
+            {/* Signed in: connected accounts + sign out */}
+            {!isGuest && (
+              <>
+                <p className="tabby-eyebrow text-stone-500 mb-2 px-1">Connected accounts</p>
+                <section className="tabby-card overflow-hidden mb-5">
+                  <div className="px-4 py-3.5 flex items-center gap-3 border-b border-stone-100 lg:px-5 lg:py-4">
+                    <span className="w-9 h-9 rounded-xl bg-stone-50 ring-1 ring-stone-200 flex items-center justify-center shrink-0 lg:w-10 lg:h-10">
+                      <GoogleG size={20} />
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-semibold text-stone-900 leading-tight lg:text-[14px]">Google</p>
+                      <p className="text-xs text-stone-500 truncate leading-tight mt-0.5 lg:text-[12.5px]">{user.email}</p>
+                    </div>
+                    <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full shrink-0">
+                      Active
+                    </span>
+                  </div>
+                  <div className="px-4 py-3 flex items-center justify-between lg:px-5 lg:py-3.5">
+                    <span className="text-xs text-stone-500 lg:text-[12.5px]">Last synced just now</span>
+                    <button
+                      onClick={() => window.location.reload()}
+                      className="text-xs font-semibold text-primary lg:text-[12.5px]"
+                    >
+                      Sync now
+                    </button>
+                  </div>
+                </section>
+
+                <p className="tabby-eyebrow text-stone-500 mb-2 px-1">Session</p>
+                <section className="tabby-card overflow-hidden">
+                  <button
+                    onClick={() => logout()}
+                    className="w-full flex items-center gap-3 px-4 py-3.5 text-left hover:bg-rose-50 transition-colors lg:px-5 lg:py-4"
+                  >
+                    <span className="text-rose-500"><LogoutIcon /></span>
+                    <span className="text-sm font-medium text-rose-600 lg:text-[14px]">Sign out</span>
+                    <span className="hidden lg:block ml-auto text-[12px] text-stone-400">Local data stays on this device</span>
+                  </button>
+                </section>
+                <p className="text-[11px] text-stone-400 text-center mt-4 px-6 leading-snug">
+                  Signing out keeps your local data on this device.
+                </p>
+              </>
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/pages/DashboardPage.tsx b/packages/web/src/pages/DashboardPage.tsx
index 51f8b30..3051ac5 100644
--- a/packages/web/src/pages/DashboardPage.tsx
+++ b/packages/web/src/pages/DashboardPage.tsx
@@ -1,27 +1,230 @@
-import { useState, useSyncExternalStore } from 'react';
+import { useState, useEffect, useRef, useSyncExternalStore } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient, onlineManager } from '@tanstack/react-query';
-import type { Member, Expense, BalancesResponse, UpdateExpenseRequest } from '@tabby/shared';
+import type {
+  Member,
+  Expense,
+  Settlement,
+  BalancesResponse,
+  ActivityLogEntry,
+  UpdateExpenseRequest,
+} from '@tabby/shared';
 import { api, ApiError } from '../lib/api.js';
 import { queryKeys } from '../lib/queryKeys.js';
-import { Button } from '../components/Button.js';
 import { Avatar } from '../components/Avatar.js';
-import { Badge } from '../components/Badge.js';
 import { AddExpenseModal } from '../components/AddExpenseModal.js';
 import { ConfirmDialog } from '../components/ConfirmDialog.js';
 import { TabbyLogo } from '../components/TabbyLogo.js';
+import { DesktopRail } from '../components/DesktopRail.js';
 import { appPageStyle } from '../components/CatBackground.js';
 
+type DashboardTab = 'activity' | 'expenses' | 'who-owes-who';
+
 function fmt(cents: number): string {
   return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
     Math.abs(cents) / 100,
   );
 }
 
-function fmtDate(iso: string): string {
+function fmtExpenseDate(iso: string): string {
   return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
 }
 
+function timeAgo(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days === 1) return 'yesterday';
+  if (days < 7) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+// ─── Icons ───────────────────────────────────────────────────────────────────
+
+function GearIcon() {
+  return (
+    <svg className="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg className="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+function ReceiptIcon() {
+  return (
+    <svg className="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m-6 4h6m-6 4h4m4-12H7a2 2 0 00-2 2v14l3-3 2 2 2-2 2 2 2-2 3 3V5a2 2 0 00-2-2z" />
+    </svg>
+  );
+}
+
+// ─── Offline banner ───────────────────────────────────────────────────────────
+
+function CloudOffIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2 2l20 20M5.8 8.5A7 7 0 0119 12.5a4 4 0 011 7.4M9.8 4.5A7 7 0 0119 9" />
+      <path d="M16 16H7a4 4 0 01-1.5-7.7" />
+    </svg>
+  );
+}
+
+function OfflineBanner({ lastSynced }: { lastSynced: string }) {
+  return (
+    <div className="bg-amber-50 ring-1 ring-amber-200 rounded-xl px-3.5 py-2.5 flex items-center gap-2.5">
+      <span className="w-7 h-7 rounded-full bg-amber-100 flex items-center justify-center text-amber-700 shrink-0">
+        <CloudOffIcon />
+      </span>
+      <div className="flex-1 min-w-0">
+        <p className="text-[12.5px] font-semibold text-amber-900 leading-tight">You&apos;re offline</p>
+        <p className="text-[11px] text-amber-700/90 leading-tight mt-0.5">
+          Last synced {lastSynced}. Changes are queued.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Undo toast ───────────────────────────────────────────────────────────────
+
+interface UndoToastProps {
+  message: string;
+  onUndo: () => void;
+  onDismiss: () => void;
+}
+
+function UndoToast({ message, onUndo, onDismiss }: UndoToastProps) {
+  return (
+    <div className="fixed bottom-24 left-4 right-4 z-30 flex justify-center lg:left-auto lg:right-6 lg:bottom-6 lg:max-w-sm lg:w-full">
+      <div className="bg-stone-900 text-white rounded-2xl shadow-toast pl-4 pr-1.5 py-1.5 flex items-center gap-3 w-full" style={{ minWidth: 280 }}>
+        <span className="text-[13px] font-medium flex-1 min-w-0 truncate">{message}</span>
+        <button
+          onClick={onUndo}
+          className="shrink-0 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl px-3.5 py-2 text-[12.5px] transition-colors"
+        >
+          Undo
+        </button>
+        <button
+          onClick={onDismiss}
+          className="w-7 h-7 rounded-full hover:bg-white/10 flex items-center justify-center text-white/60 mr-1 shrink-0"
+          aria-label="Dismiss"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
+            <path d="M6 6l12 12M6 18L18 6" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Hero status card ─────────────────────────────────────────────────────────
+
+interface HeroStatusCardProps {
+  settlements: Settlement[];
+  currentMemberId: string;
+  memberNames: Map<string, string>;
+  onPrimary: () => void;
+}
+
+function HeroStatusCard({ settlements, currentMemberId, memberNames, onPrimary }: HeroStatusCardProps) {
+  const credit = settlements
+    .filter((s) => s.to === currentMemberId)
+    .reduce((sum, s) => sum + s.amountCents, 0);
+  const debit = settlements
+    .filter((s) => s.from === currentMemberId)
+    .reduce((sum, s) => sum + s.amountCents, 0);
+  const net = credit - debit;
+
+  if (net === 0) {
+    return (
+      <section className="rounded-3xl p-5 bg-white ring-1 ring-black/[0.06] lg:flex lg:items-center lg:gap-5 lg:p-6">
+        <div className="w-12 h-12 rounded-2xl bg-emerald-50 hidden lg:flex items-center justify-center text-emerald-500 text-2xl shrink-0">
+          ✓
+        </div>
+        <div className="flex-1">
+          <p className="tabby-eyebrow text-emerald-700">All settled</p>
+          <p className="text-2xl font-extrabold text-stone-900 tracking-tight mt-2 leading-tight lg:mt-0.5 lg:text-[20px]">
+            You&apos;re square with everyone
+          </p>
+          <p className="text-sm text-stone-500 mt-1 lg:hidden">
+            Nobody owes anybody anything. Add the next expense whenever.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  const owed = net > 0;
+  const chips = settlements.filter((s) =>
+    owed ? s.to === currentMemberId : s.from === currentMemberId,
+  );
+
+  return (
+    <section
+      className={`rounded-3xl p-5 ring-1 lg:flex lg:items-center lg:gap-6 lg:p-6 ${
+        owed
+          ? 'bg-gradient-to-br from-orange-50 to-amber-50/40 ring-orange-200/60 lg:bg-gradient-to-r lg:from-orange-50 lg:via-amber-50 lg:to-orange-50/50'
+          : 'bg-gradient-to-br from-rose-50 to-pink-50/40 ring-rose-200/60 lg:bg-gradient-to-r lg:from-rose-50 lg:via-pink-50 lg:to-rose-50/50'
+      }`}
+    >
+      <div className="lg:shrink-0">
+        <p className={`tabby-eyebrow ${owed ? 'text-orange-700' : 'text-rose-700'}`}>
+          {owed ? "You're owed" : 'You owe'}
+        </p>
+        <p className="text-xxl-display font-extrabold text-stone-900 mt-1.5 tabular-nums leading-none">
+          {fmt(net)}
+        </p>
+      </div>
+
+      {chips.length > 0 && (
+        <div className="flex items-center gap-1.5 mt-3 flex-wrap flex-1 lg:mt-0">
+          {chips.map((s) => {
+            const otherId = owed ? s.from : s.to;
+            const name = memberNames.get(otherId) ?? 'Unknown';
+            return (
+              <div
+                key={`${s.from}-${s.to}`}
+                className="flex items-center gap-1.5 bg-white/80 backdrop-blur-sm rounded-full pl-1 pr-2.5 py-1"
+              >
+                <Avatar name={name} size={20} />
+                <span className="text-xs font-semibold text-stone-700 tabular-nums">
+                  {fmt(s.amountCents)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <button
+        onClick={onPrimary}
+        className={`mt-4 w-full font-semibold py-3 rounded-xl text-sm transition-colors lg:mt-0 lg:w-auto lg:shrink-0 lg:px-5 ${
+          owed
+            ? 'bg-primary hover:bg-primary-hover text-white'
+            : 'bg-stone-900 hover:bg-stone-800 text-white'
+        }`}
+      >
+        {owed ? 'Send a friendly reminder' : 'Settle up'}
+      </button>
+    </section>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
 export default function DashboardPage() {
   const { id } = useParams<{ id: string }>();
   const isOnline = useSyncExternalStore(
@@ -33,7 +236,32 @@ export default function DashboardPage() {
   const [showAddExpense, setShowAddExpense] = useState(false);
   const [editingExpense, setEditingExpense] = useState<Expense | null>(null);
   const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<'expenses' | 'balances'>('expenses');
+  const [activeTab, setActiveTab] = useState<DashboardTab>('activity');
+  const [undoToast, setUndoToast] = useState<{ id: string; label: string } | null>(null);
+  const [lastSyncedAt, setLastSyncedAt] = useState<Date>(() => new Date());
+  const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (isOnline) setLastSyncedAt(new Date());
+  }, [isOnline]);
+
+  const showUndoToast = (id: string, label: string) => {
+    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    setUndoToast({ id, label });
+    toastTimerRef.current = setTimeout(() => setUndoToast(null), 5000);
+  };
+
+  const dismissToast = () => {
+    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    setUndoToast(null);
+  };
+
+  const lastSyncedLabel = (() => {
+    const diff = Math.floor((Date.now() - lastSyncedAt.getTime()) / 1000);
+    if (diff < 60) return 'just now';
+    const mins = Math.floor(diff / 60);
+    return `${mins}m ago`;
+  })();
 
   const sharedQueryOptions = {
     refetchInterval: 12_000,
@@ -58,6 +286,12 @@ export default function DashboardPage() {
     ...sharedQueryOptions,
   });
 
+  const activityQuery = useQuery({
+    queryKey: queryKeys.activity(id!),
+    queryFn: () => api.getActivity(id!),
+    ...sharedQueryOptions,
+  });
+
   const currentMemberQuery = useQuery({
     queryKey: queryKeys.currentMember(id!),
     queryFn: () => api.getCurrentMember(id!),
@@ -71,35 +305,29 @@ export default function DashboardPage() {
   const members: Member[] = membersQuery.data ?? [];
   const expenses: Expense[] = expensesQuery.data ?? [];
   const balances: BalancesResponse | null = balancesQuery.data ?? null;
+  const activity: ActivityLogEntry[] = activityQuery.data ?? [];
   const currentMember: Member | null = currentMemberQuery.data ?? null;
   const groupName = groupQuery.data?.name ?? '';
 
-  const memberNames = new Map<string, string>(
-    members.map((m) => [m.id, m.displayName]),
-  );
+  const memberNames = new Map<string, string>(members.map((m) => [m.id, m.displayName]));
   if (balances) {
     for (const b of balances.balances) {
-      if (!memberNames.has(b.memberId)) {
-        memberNames.set(b.memberId, b.displayName);
-      }
+      if (!memberNames.has(b.memberId)) memberNames.set(b.memberId, b.displayName);
     }
   }
 
   const anyError = membersQuery.error ?? expensesQuery.error ?? balancesQuery.error;
   const isExpired = !!anyError && (anyError as ApiError)?.status === 410;
   const sessionError = !!anyError && (anyError as ApiError)?.status === 401;
-
   const isLoading = membersQuery.isLoading;
-  const lastUpdated = membersQuery.dataUpdatedAt
-    ? new Date(membersQuery.dataUpdatedAt)
-    : null;
 
   const addExpenseMutation = useMutation({
-    mutationFn: (data: Parameters<typeof api.createExpense>[1]) =>
-      api.createExpense(id!, data),
-    onSuccess: () => {
+    mutationFn: (data: Parameters<typeof api.createExpense>[1]) => api.createExpense(id!, data),
+    onSuccess: (expense) => {
       queryClient.invalidateQueries({ queryKey: queryKeys.expenses(id!) });
       queryClient.invalidateQueries({ queryKey: queryKeys.balances(id!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.activity(id!) });
+      showUndoToast(expense.id, `${expense.description} · $${Number(expense.amount).toFixed(2)} added`);
     },
   });
 
@@ -108,6 +336,36 @@ export default function DashboardPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: queryKeys.expenses(id!) });
       queryClient.invalidateQueries({ queryKey: queryKeys.balances(id!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.activity(id!) });
+    },
+  });
+
+  const settleMutation = useMutation({
+    mutationFn: (s: Settlement) =>
+      api.settleSettlement(id!, { from: s.from, to: s.to, amountCents: s.amountCents }),
+    onMutate: async (settlement) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.balances(id!) });
+      const previous = queryClient.getQueryData<BalancesResponse>(queryKeys.balances(id!));
+      queryClient.setQueryData<BalancesResponse>(queryKeys.balances(id!), (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          settlements: old.settlements.filter(
+            (s) => !(s.from === settlement.from && s.to === settlement.to),
+          ),
+        };
+      });
+      return { previous };
+    },
+    onError: (_err, _vars, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(queryKeys.balances(id!), context.previous);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.balances(id!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.activity(id!) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.expenses(id!) });
     },
   });
 
@@ -127,44 +385,94 @@ export default function DashboardPage() {
     });
   };
 
+  const canAddExpense = isOnline && !isExpired && !!currentMember;
+
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#FAFAF8]">
-        <div className="animate-spin h-8 w-8 border-4 border-orange-500 border-t-transparent rounded-full" />
+      <div className="min-h-screen flex items-center justify-center bg-stone-50">
+        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
       </div>
     );
   }
 
-  const canAddExpense = isOnline && !isExpired && currentMember;
+  const tabs: { key: DashboardTab; label: string }[] = [
+    { key: 'activity', label: 'Activity' },
+    { key: 'expenses', label: 'Expenses' },
+    { key: 'who-owes-who', label: 'Who owes who' },
+  ];
 
   return (
-    <div className="min-h-screen" style={appPageStyle}>
-      <header className="bg-white border-b border-stone-100 sticky top-0 z-10">
-        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between">
-          <div className="flex items-center gap-3 min-w-0">
-            <Link to="/" className="shrink-0 hover:opacity-80 transition-opacity">
-              <TabbyLogo size={24} />
+    <div className="min-h-screen lg:flex lg:h-screen lg:overflow-hidden" style={appPageStyle}>
+      <DesktopRail activeGroupId={id} />
+
+      {/* Middle column */}
+      <div className="flex-1 min-w-0 lg:flex lg:flex-col lg:overflow-hidden">
+
+      {/* Header */}
+      <header className="bg-white border-b border-stone-100 sticky top-0 z-10 lg:static">
+        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between lg:max-w-none lg:px-6">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <Link to="/" className="shrink-0 hover:opacity-80 transition-opacity lg:hidden">
+              <TabbyLogo size={22} />
             </Link>
-            <h1 className="text-base font-semibold text-stone-900 truncate">{groupName}</h1>
-            {!isOnline && (
-              <span className="text-xs text-amber-600 shrink-0">
-                Offline{lastUpdated && ` · ${lastUpdated.toLocaleTimeString()}`}
-              </span>
+            <div className="min-w-0">
+              <h1 className="text-[15px] font-semibold text-stone-900 leading-tight truncate lg:text-[18px] lg:font-bold lg:tracking-tight">
+                {groupName}
+              </h1>
+              {!isOnline ? (
+                <p className="text-[11px] text-amber-600 leading-tight mt-0.5 flex items-center gap-1 font-medium">
+                  <CloudOffIcon /> Offline · synced {lastSyncedLabel}
+                </p>
+              ) : (
+                <p className="text-[11px] text-stone-400 leading-tight mt-0.5">
+                  {members.length} member{members.length !== 1 ? 's' : ''} · {expenses.length} expense{expenses.length !== 1 ? 's' : ''}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            {/* Desktop: member avatar stack */}
+            <div className="hidden lg:flex items-center -space-x-2 mr-1">
+              {members.slice(0, 4).map((m) => (
+                <div key={m.id} className="ring-2 ring-white rounded-full">
+                  <Avatar name={m.displayName} size={26} />
+                </div>
+              ))}
+              {members.length > 4 && (
+                <div className="w-[26px] h-[26px] rounded-full bg-stone-200 ring-2 ring-white flex items-center justify-center text-[10px] font-bold text-stone-600">
+                  +{members.length - 4}
+                </div>
+              )}
+            </div>
+            {/* Desktop: New expense button */}
+            {canAddExpense && (
+              <button
+                onClick={() => setShowAddExpense(true)}
+                className="hidden lg:flex bg-primary hover:bg-primary-hover text-white rounded-lg pl-3 pr-4 py-2 items-center gap-1.5 font-semibold text-[13px] transition-colors"
+              >
+                <PlusIcon />
+                New expense
+              </button>
             )}
+            <Link to={`/groups/${id}/settings`} className="shrink-0">
+              <button
+                className="w-9 h-9 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-500 transition-colors"
+                aria-label="Settings"
+              >
+                <GearIcon />
+              </button>
+            </Link>
           </div>
-          <Link to={`/groups/${id}/settings`} className="shrink-0">
-            <Button variant="ghost" size="sm" aria-label="Settings">
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round"
-                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              </svg>
-            </Button>
-          </Link>
         </div>
       </header>
 
-      <main className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+      {!isOnline && (
+        <div className="px-4 pt-3 lg:px-6 lg:pt-4">
+          <OfflineBanner lastSynced={lastSyncedLabel} />
+        </div>
+      )}
+
+      <main className="max-w-2xl mx-auto px-4 pt-4 pb-28 space-y-4 lg:max-w-none lg:flex-1 lg:overflow-y-auto lg:px-6 lg:pt-5 lg:pb-6">
         {sessionError && (
           <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
             Session expired. Open the group link again to rejoin.
@@ -176,159 +484,185 @@ export default function DashboardPage() {
           </div>
         )}
 
-        {/* Members */}
-        <section>
-          <h2 className="text-xs font-semibold text-stone-500 uppercase tracking-wider mb-3">Members</h2>
-          <div className="flex flex-wrap gap-2">
-            {members.map((m) => (
-              <div key={m.id} className="flex items-center gap-2 bg-white rounded-full px-3 py-1.5 ring-1 ring-black/[0.06]">
-                <Avatar name={m.displayName} size="sm" />
-                <span className="text-sm font-medium text-stone-700">{m.displayName}</span>
-                {m.role !== 'member' && <Badge variant="orange">{m.role}</Badge>}
-              </div>
-            ))}
-          </div>
-        </section>
+        {/* Hero */}
+        {currentMember && balances && (
+          <HeroStatusCard
+            settlements={balances.settlements}
+            currentMemberId={currentMember.id}
+            memberNames={memberNames}
+            onPrimary={() => {/* settle/remind flow — step 3 */}}
+          />
+        )}
 
-        {/* Pill tabs */}
-        <div className="bg-stone-100 rounded-xl p-1 flex gap-1">
-          {(['expenses', 'balances'] as const).map((tab) => (
+        {/* Tabs — "Who owes who" hidden at lg: (shown in right rail) */}
+        <div className="pill-tab-track">
+          {tabs.map(({ key, label }) => (
             <button
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={`flex-1 rounded-lg px-4 py-1.5 text-sm font-medium transition-colors capitalize
-                ${activeTab === tab
-                  ? 'bg-orange-500 text-white shadow-sm'
-                  : 'text-stone-500 hover:text-stone-700'
-                }`}
+              key={key}
+              onClick={() => setActiveTab(key)}
+              className={`flex-1 px-2 py-1.5 text-[12.5px] font-semibold transition-colors rounded-lg ${
+                activeTab === key ? 'pill-tab-active' : 'text-stone-500'
+              } ${key === 'who-owes-who' ? 'lg:hidden' : ''}`}
             >
-              {tab}
+              {label}
             </button>
           ))}
         </div>
 
-        {activeTab === 'expenses' && (
-          <section className="space-y-3">
-            <div className="flex items-center justify-between">
-              <h2 className="text-xs font-semibold text-stone-500 uppercase tracking-wider">Expenses</h2>
-              {canAddExpense && (
-                <Button size="sm" onClick={() => setShowAddExpense(true)}>
-                  + Add expense
-                </Button>
-              )}
-              {!isOnline && (
-                <span className="text-xs text-stone-400">Offline — unavailable</span>
-              )}
-            </div>
+        {/* Activity tab */}
+        {activeTab === 'activity' && (
+          <section className="space-y-2">
+            {activity.length === 0 ? (
+              <p className="text-sm text-stone-400 text-center py-12">No activity yet.</p>
+            ) : (
+              activity.map((entry) => (
+                <div key={entry.id} className="tabby-card p-3.5 flex items-start gap-3">
+                  <div className="w-9 h-9 rounded-xl bg-orange-50 flex items-center justify-center text-orange-400 shrink-0">
+                    <ReceiptIcon />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-stone-900 leading-snug">{entry.message}</p>
+                    <p className="text-xs text-stone-400 mt-0.5">{timeAgo(entry.createdAt)}</p>
+                  </div>
+                </div>
+              ))
+            )}
+          </section>
+        )}
 
+        {/* Expenses tab */}
+        {activeTab === 'expenses' && (
+          <section className="space-y-2">
             {expenses.length === 0 && (
-              <p className="text-sm text-stone-400 text-center py-12">No expenses yet. Add the first one!</p>
+              <p className="text-sm text-stone-400 text-center py-12">
+                No expenses yet. Tap + to add the first one.
+              </p>
             )}
-
-            <div className="space-y-2">
-              {expenses.map((exp) => {
-                const payerName = memberNames.get(exp.paidBy) ?? 'Unknown';
-                const canEdit =
-                  currentMember &&
-                  (exp.paidBy === currentMember.id || currentMember.role === 'owner');
-                return (
-                  <div key={exp.id} className="bg-white rounded-2xl p-4 ring-1 ring-black/[0.06]">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium text-stone-900 truncate">{exp.description}</p>
-                        <p className="text-xs text-stone-400 mt-0.5 flex items-center gap-1.5">
-                          <span>{payerName} paid</span>
-                          <span>·</span>
-                          <span>{fmtDate(exp.createdAt)}</span>
-                          <span>·</span>
-                          <Badge variant="gray">{exp.splitType}</Badge>
-                        </p>
-                      </div>
-                      <div className="flex items-center gap-1.5 shrink-0">
-                        <span className="font-semibold text-stone-900">
-                          ${Number(exp.amount).toFixed(2)}
-                        </span>
-                        {canEdit && (
-                          <>
-                            <button
-                              onClick={() => setEditingExpense(exp)}
-                              className="p-1.5 text-stone-300 hover:text-orange-500 transition-colors rounded-lg"
-                              aria-label="Edit expense"
-                            >
-                              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                              </svg>
-                            </button>
-                            <button
-                              onClick={() => setPendingDeleteId(exp.id)}
-                              disabled={deleteExpenseMutation.isPending}
-                              className="p-1.5 text-stone-300 hover:text-red-400 transition-colors rounded-lg disabled:opacity-50"
-                              aria-label="Delete expense"
-                            >
-                              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                              </svg>
-                            </button>
-                          </>
-                        )}
-                      </div>
-                    </div>
+            {expenses.map((exp) => {
+              const payerName = memberNames.get(exp.paidBy) ?? 'Unknown';
+              const isMe = exp.paidBy === currentMember?.id;
+              const canEdit =
+                currentMember &&
+                (exp.paidBy === currentMember.id || currentMember.role === 'owner');
+              return (
+                <div key={exp.id} className="tabby-card p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-400 shrink-0">
+                    <ReceiptIcon />
                   </div>
-                );
-              })}
-            </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-semibold text-stone-900 truncate">
+                      {exp.description}
+                    </p>
+                    <p className="text-xs text-stone-500 mt-0.5">
+                      {isMe ? 'You' : payerName} paid · {fmtExpenseDate(exp.createdAt)} · split {exp.splits.length} ways
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <span className="text-[15px] font-bold text-stone-900 tabular-nums">
+                      ${Number(exp.amount).toFixed(2)}
+                    </span>
+                    {canEdit && (
+                      <>
+                        <button
+                          onClick={() => setEditingExpense(exp)}
+                          className="p-1.5 text-stone-300 hover:text-primary transition-colors rounded-lg"
+                          aria-label="Edit expense"
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                          </svg>
+                        </button>
+                        <button
+                          onClick={() => setPendingDeleteId(exp.id)}
+                          disabled={deleteExpenseMutation.isPending}
+                          className="p-1.5 text-stone-300 hover:text-red-400 transition-colors rounded-lg disabled:opacity-50"
+                          aria-label="Delete expense"
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                          </svg>
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
           </section>
         )}
 
-        {activeTab === 'balances' && balances && (
-          <section className="space-y-5">
-            <div>
-              <h2 className="text-xs font-semibold text-stone-500 uppercase tracking-wider mb-3">Net balances</h2>
-              <div className="space-y-2">
-                {balances.balances.map((b) => (
-                  <div key={b.memberId} className="bg-white rounded-2xl p-4 ring-1 ring-black/[0.06] flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <Avatar name={b.displayName} />
-                      <span className="font-medium text-stone-900">{b.displayName}</span>
-                    </div>
-                    <span className={`font-semibold text-sm ${b.netCents >= 0 ? 'text-green-600' : 'text-red-600'}`}>
-                      {b.netCents >= 0 ? '+' : '-'}{fmt(b.netCents)}
-                    </span>
-                  </div>
-                ))}
+        {/* Who owes who tab */}
+        {activeTab === 'who-owes-who' && (
+          <section className="space-y-2">
+            {!balances || balances.settlements.length === 0 ? (
+              <div className="tabby-card p-10 text-center">
+                <p className="text-4xl leading-none">🎉</p>
+                <p className="text-base font-bold text-stone-900 mt-3">All settled up</p>
+                <p className="text-sm text-stone-500 mt-1">Nobody owes anyone anything.</p>
               </div>
-            </div>
-
-            {balances.settlements.length > 0 && (
-              <div>
-                <h2 className="text-xs font-semibold text-stone-500 uppercase tracking-wider mb-3">Settle up</h2>
-                <div className="space-y-2">
-                  {balances.settlements.map((s) => {
-                    const fromName = memberNames.get(s.from) ?? 'Unknown';
-                    const toName = memberNames.get(s.to) ?? 'Unknown';
-                    return (
-                      <div key={`${s.from}-${s.to}`} className="bg-white rounded-2xl p-4 ring-1 ring-black/[0.06] flex items-center gap-3">
-                        <Avatar name={fromName} size="sm" />
-                        <span className="text-sm text-stone-700 flex-1">
-                          <span className="font-medium">{fromName}</span>
-                          <span className="text-stone-400"> pays </span>
-                          <span className="font-medium">{toName}</span>
-                        </span>
-                        <span className="font-semibold text-stone-900">${(s.amountCents / 100).toFixed(2)}</span>
+            ) : (
+              <>
+                <p className="tabby-eyebrow text-stone-500 mb-1 px-1">
+                  {balances.settlements.length} payment{balances.settlements.length === 1 ? '' : 's'} clears all debts
+                </p>
+                {balances.settlements.map((s) => {
+                  const fromName = memberNames.get(s.from) ?? 'Unknown';
+                  const toName = memberNames.get(s.to) ?? 'Unknown';
+                  return (
+                    <div key={`${s.from}-${s.to}`} className="tabby-card p-4">
+                      <div className="flex items-center gap-3">
+                        <Avatar name={fromName} size={36} />
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm text-stone-900 leading-tight">
+                            <span className="font-semibold">{fromName}</span>
+                            <span className="text-stone-500"> pays </span>
+                            <span className="font-semibold">{toName}</span>
+                          </p>
+                          <p className="text-lg font-extrabold text-stone-900 mt-0.5 tabular-nums leading-tight">
+                            ${(s.amountCents / 100).toFixed(2)}
+                          </p>
+                        </div>
+                        <Avatar name={toName} size={36} />
                       </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            {balances.settlements.length === 0 && (
-              <p className="text-sm text-stone-400 text-center py-6">All settled up!</p>
+                      <button
+                        onClick={() => settleMutation.mutate(s)}
+                        disabled={settleMutation.isPending}
+                        className="mt-3 w-full text-sm font-semibold text-stone-700 bg-stone-100 hover:bg-stone-200 active:bg-stone-300 py-2 rounded-lg transition-colors disabled:opacity-50"
+                      >
+                        Mark as settled
+                      </button>
+                    </div>
+                  );
+                })}
+              </>
             )}
           </section>
         )}
       </main>
 
+      {undoToast && (
+        <UndoToast
+          message={undoToast.label}
+          onUndo={() => {
+            dismissToast();
+            deleteExpenseMutation.mutate(undoToast.id);
+          }}
+          onDismiss={dismissToast}
+        />
+      )}
+
+      {/* FAB — mobile only */}
+      {canAddExpense && (
+        <button
+          onClick={() => setShowAddExpense(true)}
+          className="lg:hidden fixed bottom-7 right-4 z-20 bg-primary hover:bg-primary-hover text-white rounded-full pl-4 pr-5 py-3.5 flex items-center gap-2 font-semibold text-sm transition-colors shadow-fab"
+          aria-label="Add expense"
+        >
+          <PlusIcon />
+          Add expense
+        </button>
+      )}
+
       <ConfirmDialog
         open={!!pendingDeleteId}
         onClose={() => setPendingDeleteId(null)}
@@ -348,7 +682,9 @@ export default function DashboardPage() {
             onClose={() => setShowAddExpense(false)}
             members={members}
             currentMemberId={currentMember.id}
-            onSave={async (data) => { await addExpenseMutation.mutateAsync(data); }}
+            onSave={async (data) => {
+              await addExpenseMutation.mutateAsync(data);
+            }}
           />
           <AddExpenseModal
             key={editingExpense?.id ?? 'edit-closed'}
@@ -364,6 +700,63 @@ export default function DashboardPage() {
           />
         </>
       )}
+      </div>{/* end middle column */}
+
+      {/* Right rail — desktop only: persistent "Who owes who" */}
+      <aside className="hidden lg:flex w-[300px] border-l border-stone-100 bg-white flex-col shrink-0">
+        <div className="px-5 py-4 border-b border-stone-100">
+          <h2 className="text-[14px] font-bold text-stone-900">Who owes who</h2>
+          {balances && (
+            <p className="text-[11px] text-stone-400 mt-0.5">
+              {balances.settlements.length} payment{balances.settlements.length === 1 ? '' : 's'} clears all debts
+            </p>
+          )}
+        </div>
+        <div className="flex-1 overflow-y-auto p-3 space-y-2">
+          {!balances || balances.settlements.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="text-[28px]">🎉</div>
+              <p className="text-[13px] font-bold text-stone-900 mt-2">All settled up</p>
+              <p className="text-[11px] text-stone-500 mt-1">Nobody owes anyone anything.</p>
+            </div>
+          ) : (
+            balances.settlements.map((s) => {
+              const fromName = memberNames.get(s.from) ?? 'Unknown';
+              const toName = memberNames.get(s.to) ?? 'Unknown';
+              return (
+                <div key={`${s.from}-${s.to}`} className="bg-stone-50 rounded-xl p-3">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Avatar name={fromName} size={26} />
+                    <span className="text-[12px] text-stone-400">→</span>
+                    <Avatar name={toName} size={26} />
+                    <span className="ml-auto text-[14px] font-extrabold text-stone-900 tabular-nums">
+                      ${(s.amountCents / 100).toFixed(2)}
+                    </span>
+                  </div>
+                  <p className="text-[11.5px] text-stone-600 leading-tight">
+                    <span className="font-semibold">
+                      {s.from === currentMember?.id ? 'You' : fromName.split(' ')[0]}
+                    </span>
+                    <span className="text-stone-400">
+                      {' '}pay{s.from === currentMember?.id ? '' : 's'}{' '}
+                    </span>
+                    <span className="font-semibold">
+                      {s.to === currentMember?.id ? 'you' : toName.split(' ')[0]}
+                    </span>
+                  </p>
+                  <button
+                    onClick={() => settleMutation.mutate(s)}
+                    disabled={settleMutation.isPending}
+                    className="mt-2 w-full text-[11.5px] font-semibold text-stone-700 bg-white hover:bg-stone-100 ring-1 ring-stone-200 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+                  >
+                    Mark settled
+                  </button>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </aside>
     </div>
   );
 }
diff --git a/packages/web/src/pages/GroupSettingsPage.tsx b/packages/web/src/pages/GroupSettingsPage.tsx
new file mode 100644
index 0000000..766243e
--- /dev/null
+++ b/packages/web/src/pages/GroupSettingsPage.tsx
@@ -0,0 +1,600 @@
+import { useState, useEffect, useRef, FormEvent } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { Member, UpdateGroupSettingsRequest } from '@tabby/shared';
+import { api, ApiError } from '../lib/api.js';
+import { queryKeys } from '../lib/queryKeys.js';
+import { Avatar } from '../components/Avatar.js';
+import { ConfirmDialog } from '../components/ConfirmDialog.js';
+import { DesktopRail } from '../components/DesktopRail.js';
+import { appPageStyle } from '../components/CatBackground.js';
+
+// ─── Icons ────────────────────────────────────────────────────────────────────
+
+function BackIcon() {
+  return (
+    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+      <path d="M15 6l-6 6 6 6" />
+    </svg>
+  );
+}
+
+function CopyIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 012-2h10" />
+    </svg>
+  );
+}
+
+function RefreshIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 12a9 9 0 11-3-6.7M21 4v5h-5" />
+    </svg>
+  );
+}
+
+function ShareIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7M16 6l-4-4-4 4M12 2v13" />
+    </svg>
+  );
+}
+
+function TrashIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14" />
+    </svg>
+  );
+}
+
+function DotsIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
+    </svg>
+  );
+}
+
+// ─── Section wrapper ──────────────────────────────────────────────────────────
+
+function Section({ title, hint, children }: {
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-5">
+      <div className="flex items-baseline justify-between px-1 mb-2">
+        <h2 className="tabby-eyebrow text-stone-500">{title}</h2>
+        {hint && <span className="text-[11px] text-stone-400">{hint}</span>}
+      </div>
+      <div className="tabby-card overflow-hidden">{children}</div>
+    </section>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function GroupSettingsPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [editingName, setEditingName] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
+  const [pendingRemoveMemberId, setPendingRemoveMemberId] = useState<string | null>(null);
+  const [showLeaveConfirm, setShowLeaveConfirm] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [error, setError] = useState('');
+  const [desktopTab, setDesktopTab] = useState<'general' | 'members' | 'invites' | 'danger'>('general');
+  const nameInputRef = useRef<HTMLInputElement>(null);
+
+  const groupQuery = useQuery({
+    queryKey: queryKeys.group(id!),
+    queryFn: () => api.getGroup(id!),
+  });
+
+  const membersQuery = useQuery({
+    queryKey: queryKeys.members(id!),
+    queryFn: () => api.getMembers(id!),
+  });
+
+  const currentMemberQuery = useQuery({
+    queryKey: queryKeys.currentMember(id!),
+    queryFn: () => api.getCurrentMember(id!),
+  });
+
+  const members: Member[] = membersQuery.data ?? [];
+  const currentMember: Member | null = currentMemberQuery.data ?? null;
+  const isOwner = currentMember?.role === 'owner';
+
+  useEffect(() => {
+    if (groupQuery.data?.name && !nameValue) setNameValue(groupQuery.data.name);
+  }, [groupQuery.data?.name, nameValue]);
+
+  useEffect(() => {
+    if (editingName) nameInputRef.current?.focus();
+  }, [editingName]);
+
+  const inviteCode = groupQuery.data?.inviteCode ?? '';
+  const inviteUrl = inviteCode ? `${window.location.origin}/g/${inviteCode}` : '';
+  const expiresAt = groupQuery.data?.expiresAt;
+  const daysLeft = expiresAt
+    ? Math.max(0, Math.ceil((new Date(expiresAt).getTime() - Date.now()) / 86_400_000))
+    : null;
+
+  const updateSettingsMutation = useMutation({
+    mutationFn: (body: UpdateGroupSettingsRequest) => api.updateGroupSettings(id!, body),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKeys.group(id!) }),
+  });
+
+  const removeMemberMutation = useMutation({
+    mutationFn: (memberId: string) => api.removeMember(id!, memberId),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKeys.members(id!) }),
+  });
+
+  const leaveMutation = useMutation({
+    mutationFn: () => api.leaveGroup(id!),
+    onSuccess: () => navigate('/'),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => api.deleteGroup(id!),
+    onSuccess: () => navigate('/'),
+  });
+
+  const handleSaveName = async (e?: FormEvent) => {
+    e?.preventDefault();
+    if (!nameValue.trim()) return;
+    setEditingName(false);
+    try {
+      await updateSettingsMutation.mutateAsync({ name: nameValue.trim() });
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : 'Failed to update name');
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!inviteUrl) return;
+    await navigator.clipboard.writeText(inviteUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const handleRegenerate = async () => {
+    try {
+      await updateSettingsMutation.mutateAsync({ regenerateInviteCode: true });
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : 'Failed to regenerate link');
+    } finally {
+      setShowRegenerateConfirm(false);
+    }
+  };
+
+  const handleRemoveMember = async () => {
+    if (!pendingRemoveMemberId) return;
+    try {
+      await removeMemberMutation.mutateAsync(pendingRemoveMemberId);
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : 'Failed to remove member');
+    } finally {
+      setPendingRemoveMemberId(null);
+    }
+  };
+
+  const groupName = groupQuery.data?.name ?? nameValue;
+
+  const desktopTabs = [
+    { key: 'general' as const, label: 'General' },
+    { key: 'members' as const, label: `Members · ${members.length}` },
+    { key: 'invites' as const, label: 'Invite link' },
+    { key: 'danger' as const, label: 'Danger zone' },
+  ];
+
+  return (
+    <div className="min-h-screen lg:flex lg:h-screen lg:overflow-hidden" style={appPageStyle}>
+      <DesktopRail activeGroupId={id} />
+
+      {/* Main column */}
+      <div className="flex-1 min-w-0 lg:flex lg:flex-col lg:overflow-hidden">
+
+      {/* Mobile header */}
+      <header className="bg-white border-b border-stone-100 sticky top-0 z-10 lg:hidden">
+        <div className="max-w-2xl mx-auto px-2 py-3 flex items-center gap-1">
+          <Link to={`/groups/${id}/settings`}>
+            <button className="w-9 h-9 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-700 transition-colors" aria-label="Back">
+              <BackIcon />
+            </button>
+          </Link>
+          <div className="flex-1 min-w-0 px-1">
+            <p className="text-[11px] font-semibold text-stone-400 leading-none">Group settings</p>
+            <h1 className="text-[15px] font-bold text-stone-900 leading-tight mt-0.5 truncate">{groupName}</h1>
+          </div>
+          <Link to={`/groups/${id}`}>
+            <button className="text-sm font-semibold text-primary px-3 py-2">Done</button>
+          </Link>
+        </div>
+      </header>
+
+      {/* Desktop header */}
+      <header className="hidden lg:block bg-white border-b border-stone-100 px-8 py-5 shrink-0">
+        <div className="flex items-center gap-2 text-[12.5px] text-stone-400 mb-1.5">
+          <Link to={`/groups/${id}`} className="hover:text-stone-600 transition-colors">{groupName}</Link>
+          <span>›</span>
+          <span className="text-stone-700 font-medium">Settings</span>
+        </div>
+        <h1 className="text-[22px] font-bold text-stone-900 tracking-tight">Group settings</h1>
+      </header>
+
+      {/* Mobile main — all sections stacked */}
+      <main className="max-w-2xl mx-auto px-4 pt-4 pb-10 lg:hidden">
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 rounded-xl p-3 text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
+        {/* Group */}
+        <Section title="Group">
+          <div className="px-4 py-3.5 border-b border-stone-100">
+            <p className="tabby-eyebrow text-stone-400 mb-1.5">Name</p>
+            {isOwner && editingName ? (
+              <form onSubmit={handleSaveName}>
+                <input
+                  ref={nameInputRef}
+                  value={nameValue}
+                  onChange={(e) => setNameValue(e.target.value)}
+                  onBlur={() => handleSaveName()}
+                  className="w-full text-base font-semibold text-stone-900 bg-transparent border-0 border-b-2 border-primary outline-none pb-0.5"
+                  maxLength={100}
+                  aria-label="Group name"
+                />
+              </form>
+            ) : (
+              <div className="flex items-center justify-between">
+                <span className="text-base font-semibold text-stone-900">{groupName}</span>
+                {isOwner && (
+                  <button
+                    onClick={() => setEditingName(true)}
+                    className="text-xs font-semibold text-primary"
+                  >
+                    Edit
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </Section>
+
+        {/* Members */}
+        <Section title="Members" hint={`${members.length} people`}>
+          {members.map((m, i) => (
+            <div
+              key={m.id}
+              className={`flex items-center gap-3 px-4 py-3 ${
+                i < members.length - 1 ? 'border-b border-stone-100' : ''
+              }`}
+            >
+              <Avatar name={m.displayName} size={36} />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold text-stone-900 truncate leading-tight">
+                  {m.displayName}
+                  {m.id === currentMember?.id && (
+                    <span className="text-stone-400 font-normal text-xs"> (you)</span>
+                  )}
+                </p>
+              </div>
+              {m.role === 'owner' && (
+                <span className="text-[10px] font-bold uppercase tracking-wider text-orange-700 bg-orange-50 px-2 py-0.5 rounded-full shrink-0">
+                  Admin
+                </span>
+              )}
+              {isOwner && m.id !== currentMember?.id && m.role !== 'owner' && (
+                <button
+                  onClick={() => setPendingRemoveMemberId(m.id)}
+                  className="w-7 h-7 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-400 shrink-0"
+                  aria-label={`Remove ${m.displayName}`}
+                >
+                  <DotsIcon />
+                </button>
+              )}
+            </div>
+          ))}
+        </Section>
+
+        {/* Invite link */}
+        <Section title="Invite link">
+          <div className="px-4 py-3.5 border-b border-stone-100">
+            {inviteUrl ? (
+              <>
+                <div className="bg-stone-50 ring-1 ring-stone-200 rounded-xl px-3 py-2.5 flex items-center gap-2">
+                  <span className="text-stone-400 shrink-0"><ShareIcon /></span>
+                  <span className="flex-1 text-xs font-mono text-stone-700 truncate">
+                    {inviteUrl.replace(/^https?:\/\//, '')}
+                  </span>
+                  <button
+                    onClick={handleCopy}
+                    className={`shrink-0 text-xs font-semibold px-2.5 py-1 rounded-lg flex items-center gap-1.5 transition-colors ${
+                      copied
+                        ? 'bg-emerald-500 text-white'
+                        : 'bg-primary hover:bg-primary-hover text-white'
+                    }`}
+                  >
+                    {copied ? '✓ Copied' : <><CopyIcon /> Copy</>}
+                  </button>
+                </div>
+                <p className="text-[11.5px] text-stone-500 mt-2 leading-snug">
+                  Anyone with the link can join.{daysLeft !== null ? ` Expires in ${daysLeft} days.` : ''}
+                </p>
+              </>
+            ) : (
+              <p className="text-sm text-stone-400">Loading…</p>
+            )}
+          </div>
+          {isOwner && (
+            <button
+              onClick={() => setShowRegenerateConfirm(true)}
+              className="w-full flex items-center gap-2 px-4 py-3 hover:bg-stone-50 transition-colors text-left"
+            >
+              <span className="text-stone-500"><RefreshIcon /></span>
+              <span className="text-sm font-medium text-stone-900">Regenerate link</span>
+              <span className="ml-auto text-[11.5px] text-stone-400">Old link stops working</span>
+            </button>
+          )}
+        </Section>
+
+        {/* Danger zone */}
+        <Section title="Danger zone">
+          {!isOwner && (
+            <button
+              onClick={() => setShowLeaveConfirm(true)}
+              className="w-full flex items-center gap-3 px-4 py-3.5 text-left hover:bg-rose-50 transition-colors border-b border-stone-100"
+            >
+              <span className="flex-1 text-sm font-medium text-rose-600">Leave group</span>
+            </button>
+          )}
+          {isOwner && (
+            <button
+              onClick={() => setShowDeleteConfirm(true)}
+              className="w-full flex items-center gap-3 px-4 py-3.5 text-left hover:bg-rose-50 transition-colors"
+            >
+              <span className="text-rose-500"><TrashIcon /></span>
+              <span className="flex-1 text-sm font-medium text-rose-600">Delete group</span>
+            </button>
+          )}
+        </Section>
+
+        <p className="text-center text-[10.5px] text-stone-400 pt-2">
+          Group ID {id?.slice(0, 8)}
+        </p>
+      </main>
+
+      {/* Desktop main — tabbed layout */}
+      <div className="hidden lg:flex lg:flex-1 lg:overflow-hidden lg:flex-col">
+        <div className="flex-1 overflow-y-auto">
+          <div className="max-w-[760px] mx-auto px-8 py-7">
+
+            {/* Desktop tab bar */}
+            <div className="flex gap-1 border-b border-stone-200 mb-7">
+              {desktopTabs.map(({ key, label }) => (
+                <button
+                  key={key}
+                  onClick={() => setDesktopTab(key)}
+                  className={`relative px-4 py-3 text-[13px] font-semibold transition-colors ${
+                    desktopTab === key ? 'text-primary' : 'text-stone-500 hover:text-stone-800'
+                  }`}
+                >
+                  {label}
+                  {desktopTab === key && (
+                    <span className="absolute bottom-0 left-2 right-2 h-[2px] bg-primary rounded-full" />
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {error && (
+              <div className="mb-5 bg-red-50 border border-red-200 rounded-xl p-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            {/* General tab */}
+            {desktopTab === 'general' && (
+              <Section title="Group">
+                <div className="px-4 py-3.5">
+                  <p className="tabby-eyebrow text-stone-400 mb-1.5">Name</p>
+                  {isOwner ? (
+                    <form onSubmit={handleSaveName}>
+                      <input
+                        ref={nameInputRef}
+                        value={nameValue}
+                        onChange={(e) => setNameValue(e.target.value)}
+                        onBlur={() => handleSaveName()}
+                        className="w-full text-base font-semibold text-stone-900 bg-stone-50 ring-1 ring-stone-200 focus:ring-primary outline-none rounded-lg px-3 py-2.5"
+                        maxLength={100}
+                        aria-label="Group name"
+                      />
+                    </form>
+                  ) : (
+                    <span className="text-base font-semibold text-stone-900">{groupName}</span>
+                  )}
+                </div>
+              </Section>
+            )}
+
+            {/* Members tab */}
+            {desktopTab === 'members' && (
+              <Section title="People in this group" hint={`${members.length} members`}>
+                {members.map((m, i) => (
+                  <div
+                    key={m.id}
+                    className={`flex items-center gap-3 px-4 py-3 ${
+                      i < members.length - 1 ? 'border-b border-stone-100' : ''
+                    }`}
+                  >
+                    <Avatar name={m.displayName} size={36} />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-semibold text-stone-900 truncate leading-tight">
+                        {m.displayName}
+                        {m.id === currentMember?.id && (
+                          <span className="text-stone-400 font-normal text-xs"> (you)</span>
+                        )}
+                      </p>
+                    </div>
+                    {m.role === 'owner' && (
+                      <span className="text-[10px] font-bold uppercase tracking-wider text-orange-700 bg-orange-50 px-2 py-0.5 rounded-full shrink-0">
+                        Admin
+                      </span>
+                    )}
+                    {isOwner && m.id !== currentMember?.id && m.role !== 'owner' && (
+                      <button
+                        onClick={() => setPendingRemoveMemberId(m.id)}
+                        className="w-7 h-7 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-400 shrink-0"
+                        aria-label={`Remove ${m.displayName}`}
+                      >
+                        <DotsIcon />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </Section>
+            )}
+
+            {/* Invite link tab */}
+            {desktopTab === 'invites' && (
+              <Section title="Invite link">
+                <div className="px-5 py-5 border-b border-stone-100">
+                  {inviteUrl ? (
+                    <>
+                      <p className="text-[13px] text-stone-600 mb-3 leading-snug">
+                        Anyone with the link can join <span className="font-semibold text-stone-900">{groupName}</span>.
+                      </p>
+                      <div className="bg-stone-50 ring-1 ring-stone-200 rounded-xl px-4 py-3 flex items-center gap-3">
+                        <span className="text-stone-400 shrink-0"><ShareIcon /></span>
+                        <span className="flex-1 text-[14px] font-mono text-stone-700 truncate">
+                          {inviteUrl.replace(/^https?:\/\//, '')}
+                        </span>
+                        <button
+                          onClick={handleCopy}
+                          className={`shrink-0 text-[13px] font-semibold px-3.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors ${
+                            copied ? 'bg-emerald-500 text-white' : 'bg-primary hover:bg-primary-hover text-white'
+                          }`}
+                        >
+                          {copied ? '✓ Copied' : <><CopyIcon /> Copy link</>}
+                        </button>
+                      </div>
+                      {daysLeft !== null && (
+                        <p className="text-[12px] text-stone-500 mt-3 leading-snug">Expires in {daysLeft} days.</p>
+                      )}
+                    </>
+                  ) : (
+                    <p className="text-sm text-stone-400">Loading…</p>
+                  )}
+                </div>
+                {isOwner && (
+                  <button
+                    onClick={() => setShowRegenerateConfirm(true)}
+                    className="w-full flex items-center gap-2.5 px-5 py-4 hover:bg-stone-50 text-left transition-colors"
+                  >
+                    <span className="text-stone-500"><RefreshIcon /></span>
+                    <span className="text-[14px] font-medium text-stone-900">Regenerate link</span>
+                    <span className="ml-auto text-[12px] text-stone-400">Old link stops working immediately</span>
+                  </button>
+                )}
+              </Section>
+            )}
+
+            {/* Danger zone tab */}
+            {desktopTab === 'danger' && (
+              <div className="bg-rose-50/60 ring-1 ring-rose-200 rounded-2xl overflow-hidden">
+                {!isOwner && (
+                  <div className="px-5 py-4 border-b border-rose-100 flex items-start gap-4">
+                    <div className="flex-1">
+                      <p className="text-[14px] font-semibold text-stone-900">Leave group</p>
+                      <p className="text-[12px] text-stone-600 mt-1 leading-snug">You&apos;ll be removed from the group. Settle your balances first.</p>
+                    </div>
+                    <button
+                      onClick={() => setShowLeaveConfirm(true)}
+                      className="text-[13px] font-semibold text-rose-600 bg-white ring-1 ring-rose-200 hover:bg-rose-50 px-4 py-2 rounded-lg shrink-0"
+                    >
+                      Leave
+                    </button>
+                  </div>
+                )}
+                {isOwner && (
+                  <div className="px-5 py-4 flex items-start gap-4">
+                    <div className="flex-1">
+                      <p className="text-[14px] font-semibold text-rose-700">Delete group</p>
+                      <p className="text-[12px] text-stone-600 mt-1 leading-snug">Permanently remove this group and all its expenses. This cannot be undone.</p>
+                    </div>
+                    <button
+                      onClick={() => setShowDeleteConfirm(true)}
+                      className="text-[13px] font-semibold text-white bg-rose-500 hover:bg-rose-600 px-4 py-2 rounded-lg shrink-0 flex items-center gap-1.5"
+                    >
+                      <TrashIcon /> Delete
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <p className="text-center text-[10.5px] text-stone-400 pt-4">
+              Group ID {id?.slice(0, 8)}
+            </p>
+          </div>
+        </div>
+      </div>
+      </div>{/* end main column */}
+
+      <ConfirmDialog
+        open={showRegenerateConfirm}
+        onClose={() => setShowRegenerateConfirm(false)}
+        onConfirm={handleRegenerate}
+        title="Regenerate invite link"
+        message="The current invite link will stop working. Anyone with the old link won't be able to join."
+        confirmLabel="Regenerate"
+        variant="danger"
+        loading={updateSettingsMutation.isPending}
+      />
+
+      <ConfirmDialog
+        open={!!pendingRemoveMemberId}
+        onClose={() => setPendingRemoveMemberId(null)}
+        onConfirm={handleRemoveMember}
+        title="Remove member"
+        message="Are you sure you want to remove this member from the group?"
+        confirmLabel="Remove"
+        variant="danger"
+        loading={removeMemberMutation.isPending}
+      />
+
+      <ConfirmDialog
+        open={showLeaveConfirm}
+        onClose={() => setShowLeaveConfirm(false)}
+        onConfirm={() => leaveMutation.mutate()}
+        title="Leave group"
+        message="You'll lose access to this group. Your expenses will remain in the group history."
+        confirmLabel="Leave"
+        variant="danger"
+        loading={leaveMutation.isPending}
+      />
+
+      <ConfirmDialog
+        open={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        onConfirm={() => deleteMutation.mutate()}
+        title="Delete group"
+        message="This permanently deletes the group and all its expenses, members, and history. This cannot be undone."
+        confirmLabel="Delete"
+        variant="danger"
+        loading={deleteMutation.isPending}
+      />
+    </div>
+  );
+}
diff --git a/packages/web/src/pages/SettingsPage.tsx b/packages/web/src/pages/SettingsPage.tsx
index fc184be..c4e0406 100644
--- a/packages/web/src/pages/SettingsPage.tsx
+++ b/packages/web/src/pages/SettingsPage.tsx
@@ -1,250 +1,121 @@
-import { useState, useEffect, FormEvent } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import type { Member, ActivityLogEntry, UpdateGroupSettingsRequest } from '@tabby/shared';
-import { api, ApiError } from '../lib/api.js';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../lib/api.js';
 import { queryKeys } from '../lib/queryKeys.js';
-import { Button } from '../components/Button.js';
-import { Input } from '../components/Input.js';
-import { ConfirmDialog } from '../components/ConfirmDialog.js';
 import { TabbyLogo } from '../components/TabbyLogo.js';
+import { DesktopRail } from '../components/DesktopRail.js';
 import { appPageStyle } from '../components/CatBackground.js';
+import { useAuth } from '../lib/auth.js';
+
+function ChevronRight() {
+  return (
+    <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round">
+      <path d="M9 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+function BackIcon() {
+  return (
+    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+      <path d="M15 6l-6 6 6 6" />
+    </svg>
+  );
+}
+
+function UserIcon() {
+  return (
+    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" />
+    </svg>
+  );
+}
+
+function GearIcon() {
+  return (
+    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
 
 export default function SettingsPage() {
   const { id } = useParams<{ id: string }>();
-  const queryClient = useQueryClient();
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState('');
-  const [copied, setCopied] = useState(false);
-  const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
-  const [pendingRemoveMemberId, setPendingRemoveMemberId] = useState<string | null>(null);
+  const { user } = useAuth();
 
   const groupQuery = useQuery({
     queryKey: queryKeys.group(id!),
     queryFn: () => api.getGroup(id!),
   });
 
-  const membersQuery = useQuery({
-    queryKey: queryKeys.members(id!),
-    queryFn: () => api.getMembers(id!),
-  });
-
-  const activityQuery = useQuery({
-    queryKey: queryKeys.activity(id!),
-    queryFn: () => api.getActivity(id!),
-  });
-
-  const currentMemberQuery = useQuery({
-    queryKey: queryKeys.currentMember(id!),
-    queryFn: () => api.getCurrentMember(id!),
-  });
-
-  const members: Member[] = membersQuery.data ?? [];
-  const activityLog: ActivityLogEntry[] = activityQuery.data ?? [];
-  const currentMember: Member | null = currentMemberQuery.data ?? null;
-
-  const [name, setName] = useState('');
-  useEffect(() => {
-    if (groupQuery.data?.name && !name) setName(groupQuery.data.name);
-  }, [groupQuery.data?.name, name]);
+  const groupName = groupQuery.data?.name ?? '';
 
-  const inviteCode = groupQuery.data?.inviteCode ?? '';
-  const inviteUrl = inviteCode ? `${window.location.origin}/g/${inviteCode}` : '';
-
-  const updateSettingsMutation = useMutation({
-    mutationFn: (body: UpdateGroupSettingsRequest) => api.updateGroupSettings(id!, body),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.group(id!) });
+  const rows = [
+    {
+      key: 'account',
+      to: `/groups/${id}/settings/account`,
+      icon: <UserIcon />,
+      label: 'Account',
+      description: user ? user.name : 'Guest · not synced',
     },
-  });
-
-  const removeMemberMutation = useMutation({
-    mutationFn: (memberId: string) => api.removeMember(id!, memberId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: queryKeys.members(id!) });
+    {
+      key: 'group',
+      to: `/groups/${id}/settings/group`,
+      icon: <GearIcon />,
+      label: 'Group settings',
+      description: groupName,
     },
-  });
-
-  const handleCopy = async () => {
-    if (!inviteUrl) return;
-    await navigator.clipboard.writeText(inviteUrl);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleSaveName = async (e: FormEvent) => {
-    e.preventDefault();
-    setError('');
-    try {
-      await updateSettingsMutation.mutateAsync({ name });
-      setSuccess('Group name updated');
-      setTimeout(() => setSuccess(''), 3000);
-    } catch (err) {
-      setError(err instanceof ApiError ? err.message : 'Failed to update');
-    }
-  };
-
-  const handleRegenerateLink = async () => {
-    setError('');
-    try {
-      await updateSettingsMutation.mutateAsync({ regenerateInviteCode: true });
-      setSuccess('Invite link regenerated');
-      setTimeout(() => setSuccess(''), 3000);
-    } catch (err) {
-      setError(err instanceof ApiError ? err.message : 'Failed to regenerate');
-    } finally {
-      setShowRegenerateConfirm(false);
-    }
-  };
-
-  const handleRemoveMember = async () => {
-    if (!pendingRemoveMemberId) return;
-    try {
-      await removeMemberMutation.mutateAsync(pendingRemoveMemberId);
-    } catch (err) {
-      setError(err instanceof ApiError ? err.message : 'Failed to remove member');
-    } finally {
-      setPendingRemoveMemberId(null);
-    }
-  };
-
-  const isOwner = currentMember?.role === 'owner';
+  ] as const;
 
   return (
-    <div className="min-h-screen" style={appPageStyle}>
-      <header className="bg-white border-b border-stone-100 sticky top-0 z-10">
-        <div className="max-w-2xl mx-auto px-4 py-3 flex items-center gap-3">
-          <Link to="/" className="hover:opacity-80 transition-opacity">
-            <TabbyLogo size={24} />
-          </Link>
-          <Link to={`/groups/${id}`} className="text-sm text-orange-500 hover:text-orange-600 font-medium">
-            ← Back
-          </Link>
-          <h1 className="text-base font-semibold text-stone-900">Settings</h1>
-        </div>
-      </header>
-
-      <main className="max-w-2xl mx-auto px-4 py-6 space-y-4">
-        {error && <p className="text-sm text-red-600">{error}</p>}
-        {success && <p className="text-sm text-green-600">{success}</p>}
-
-        {isOwner && (
-          <section className="bg-white rounded-2xl p-5 ring-1 ring-black/[0.06] space-y-4">
-            <h2 className="font-semibold text-stone-900">Group name</h2>
-            <form onSubmit={handleSaveName} className="flex gap-3">
-              <Input
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Group name"
-                className="flex-1"
-                maxLength={100}
-                required
-                aria-label="Group name"
-              />
-              <Button type="submit" loading={updateSettingsMutation.isPending}>Save</Button>
-            </form>
-          </section>
-        )}
-
-        <section className="bg-white rounded-2xl p-5 ring-1 ring-black/[0.06] space-y-3">
-          <h2 className="font-semibold text-stone-900">Invite link</h2>
-          {inviteUrl ? (
-            <>
-              <div className="flex gap-2">
-                <input
-                  readOnly
-                  value={inviteUrl}
-                  className="flex-1 rounded-xl border border-stone-200 px-3.5 py-2.5 text-sm bg-stone-50 text-stone-500"
-                  aria-label="Invite link"
-                />
-                <Button variant="secondary" onClick={handleCopy}>
-                  {copied ? 'Copied!' : 'Copy'}
-                </Button>
-              </div>
-              {isOwner && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowRegenerateConfirm(true)}
-                  loading={updateSettingsMutation.isPending}
-                  className="text-stone-400"
-                >
-                  Regenerate link
-                </Button>
-              )}
-            </>
-          ) : (
-            <p className="text-sm text-stone-400">Loading invite link…</p>
-          )}
-        </section>
-
-        {isOwner && (
-          <section className="bg-white rounded-2xl p-5 ring-1 ring-black/[0.06] space-y-3">
-            <h2 className="font-semibold text-stone-900">Members</h2>
-            <div className="space-y-2">
-              {members.map((m) => (
-                <div key={m.id} className="flex items-center justify-between py-1">
-                  <span className="text-sm text-stone-700">
-                    {m.displayName}{' '}
-                    <span className="text-stone-400 capitalize">({m.role})</span>
-                  </span>
-                  {m.id !== currentMember?.id && m.role !== 'owner' && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setPendingRemoveMemberId(m.id)}
-                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
-                    >
-                      Remove
-                    </Button>
-                  )}
-                </div>
-              ))}
+    <div className="min-h-screen lg:flex lg:h-screen lg:overflow-hidden" style={appPageStyle}>
+      <DesktopRail activeGroupId={id} />
+
+      <div className="flex-1 min-w-0 lg:flex lg:flex-col lg:overflow-hidden">
+        <header className="bg-white border-b border-stone-100 sticky top-0 z-10 lg:static lg:shrink-0">
+          <div className="max-w-2xl mx-auto px-2 py-3 flex items-center gap-1 lg:max-w-none lg:px-6 lg:py-5">
+            <Link to={`/groups/${id}`} className="lg:hidden">
+              <button className="w-9 h-9 rounded-full hover:bg-stone-100 flex items-center justify-center text-stone-700 transition-colors" aria-label="Back">
+                <BackIcon />
+              </button>
+            </Link>
+            <div className="flex items-center gap-2.5 px-1 lg:px-0 lg:block">
+              <span className="lg:hidden"><TabbyLogo size={22} /></span>
+              <h1 className="text-[15px] font-semibold text-stone-900 lg:text-[22px] lg:font-bold lg:tracking-tight">Settings</h1>
             </div>
-          </section>
-        )}
-
-        {activityLog.length > 0 && (
-          <section className="bg-white rounded-2xl p-5 ring-1 ring-black/[0.06] space-y-3">
-            <h2 className="font-semibold text-stone-900">Activity</h2>
-            <div className="space-y-3">
-              {activityLog.map((entry) => (
-                <div key={entry.id} className="flex items-start gap-3">
-                  <span className="text-xs text-stone-400 shrink-0 mt-0.5">
-                    {new Date(entry.createdAt).toLocaleDateString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                    })}
+          </div>
+        </header>
+
+        <div className="lg:flex-1 lg:overflow-y-auto">
+          <main className="max-w-2xl mx-auto px-4 pt-5 pb-8 lg:max-w-[760px] lg:px-8 lg:py-7">
+            <section className="tabby-card overflow-hidden">
+              {rows.map(({ key, to, icon, label, description }, i) => (
+                <Link
+                  key={key}
+                  to={to}
+                  className={`flex items-center gap-3 px-4 py-3.5 hover:bg-stone-50 transition-colors ${
+                    i < rows.length - 1 ? 'border-b border-stone-100' : ''
+                  }`}
+                >
+                  <div className="w-8 h-8 rounded-lg bg-stone-100 flex items-center justify-center text-stone-500 shrink-0">
+                    {icon}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-semibold text-stone-900">{label}</p>
+                    {description && (
+                      <p className="text-xs text-stone-500 truncate mt-0.5">{description}</p>
+                    )}
+                  </div>
+                  <span className="text-stone-300 shrink-0">
+                    <ChevronRight />
                   </span>
-                  <span className="text-sm text-stone-600">{entry.message}</span>
-                </div>
+                </Link>
               ))}
-            </div>
-          </section>
-        )}
-      </main>
-
-      <ConfirmDialog
-        open={showRegenerateConfirm}
-        onClose={() => setShowRegenerateConfirm(false)}
-        onConfirm={handleRegenerateLink}
-        title="Regenerate invite link"
-        message="The current invite link will stop working. Anyone with the old link won't be able to join."
-        confirmLabel="Regenerate"
-        variant="danger"
-        loading={updateSettingsMutation.isPending}
-      />
-
-      <ConfirmDialog
-        open={!!pendingRemoveMemberId}
-        onClose={() => setPendingRemoveMemberId(null)}
-        onConfirm={handleRemoveMember}
-        title="Remove member"
-        message="Are you sure you want to remove this member from the group?"
-        confirmLabel="Remove"
-        variant="danger"
-        loading={removeMemberMutation.isPending}
-      />
+            </section>
+          </main>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index ffbf500..ac2e024 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -6,6 +6,40 @@ export default {
       fontFamily: {
         sans: ['"Plus Jakarta Sans"', 'system-ui', '-apple-system', 'sans-serif'],
       },
+      colors: {
+        // Brand orange — replaces #F97316 / #EA580C / #FFF7ED in prototype
+        primary: {
+          DEFAULT: '#F97316',
+          hover: '#EA580C',
+          soft: '#FFF7ED',
+        },
+        // Semantic state backgrounds — replaces bare hex in prototype
+        success: {
+          DEFAULT: '#10B981',
+          subtle: '#ECFDF5',
+        },
+        warning: {
+          DEFAULT: '#B45309',
+          subtle: '#FFFBEB',
+        },
+        danger: {
+          DEFAULT: '#E11D48',
+          subtle: '#FFF1F2',
+          soft: '#FFF1F2',
+        },
+      },
+      fontSize: {
+        // 10px for tiny labels / metadata
+        xxs: ['0.625rem', { lineHeight: '1rem' }],
+        // 44px hero numerals (pair with tabular-nums tracking-tight font-extrabold)
+        'xxl-display': ['2.75rem', { lineHeight: '1', letterSpacing: '-0.025em' }],
+      },
+      boxShadow: {
+        // Orange-glow FAB
+        fab: '0 10px 28px rgba(249,115,22,0.45)',
+        // Elevated toast / sheets
+        toast: '0 20px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10)',
+      },
     },
   },
   plugins: [],