diff --git a/src/pages/members.astro b/src/pages/members.astro
new file mode 100644
index 0000000..ec949ad
--- /dev/null
+++ b/src/pages/members.astro
@@ -0,0 +1,222 @@
+---
+import AppLayout from '../layouts/AppLayout.astro';
+import Avatar from '../components/Avatar.astro';
+import { getAllCabMembers } from '../lib/db';
+import { pigmentForId, readFocusTags } from '../lib/format';
+
+const user = Astro.locals.user;
+const members = getAllCabMembers();
+
+function memberSinceLabel(member: { cab_joined_date: string | null; created_at: string }): string {
+  const iso = member.cab_joined_date ?? member.created_at;
+  const normalised = iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z';
+  return new Intl.DateTimeFormat('en-GB', {
+    month: 'long', year: 'numeric', timeZone: 'Europe/Copenhagen',
+  }).format(new Date(normalised));
+}
+---
+<AppLayout title="Members" user={user}>
+  <div class="page">
+
+    <header class="members-head">
+      <p class="label-sm members-eyebrow">Members</p>
+      <h1 class="members-title"><em>The council.</em></h1>
+      <p class="members-sub">
+        An invited circle of operators shaping what Project Bifrost becomes.
+      </p>
+    </header>
+
+    <hr class="members-rule" />
+
+    <ul class="members-list" aria-label="Council members">
+      {members.map(m => {
+        const pigment = pigmentForId(m.id);
+        const tags = readFocusTags(m.focus_tags);
+        const isMe = m.id === user.id;
+        const metaParts = [m.title, m.organisation, `Member since ${memberSinceLabel(m)}`].filter(Boolean);
+        return (
+          <li
+            class:list={['m-row', { 'm-row--me': isMe }]}
+            style={`--row-pigment: ${pigment.token}; --row-pigment-hex: ${pigment.hex};`}
+          >
+            <div class="m-col-avatar">
+              <Avatar id={m.id} name={m.name} size={52} />
+            </div>
+
+            <div class="m-col-body">
+              <h2 class="m-name">
+                <span class="m-name-text">{m.name}</span>
+                {isMe && <span class="m-you label-sm">You</span>}
+              </h2>
+
+              <p class="m-meta">{metaParts.join(' · ')}</p>
+
+              {m.pull_quote && (
+                <blockquote class="m-quote">{m.pull_quote}</blockquote>
+              )}
+            </div>
+
+            {tags.length > 0 && (
+              <ul class="m-tags" aria-label="Focus areas">
+                {tags.map(t => <li class="m-tag">{t}</li>)}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+
+      {members.length === 0 && (
+        <li class="m-empty body-md">The council is still being formed.</li>
+      )}
+    </ul>
+
+  </div>
+</AppLayout>
+
+<style>
+  .page {
+    padding: var(--space-12) var(--space-20) var(--space-16);
+    max-width: var(--content-max);
+    margin: 0 auto;
+  }
+
+  .members-head { margin-bottom: var(--space-6); max-width: 46rem; }
+
+  .members-eyebrow {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--on-surface-variant);
+    margin-bottom: var(--space-3);
+  }
+
+  .members-title {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: var(--text-display-md);
+    letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-tight);
+    color: var(--on-surface);
+    margin: 0;
+  }
+  .members-title em { font-style: italic; }
+
+  .members-sub {
+    color: var(--on-surface-variant);
+    margin-top: var(--space-3);
+    max-width: 29rem;
+  }
+
+  .members-rule {
+    border: none;
+    height: 0.5px;
+    background: var(--surface-card-border);
+    margin: 0 0 var(--space-8) 0;
+  }
+
+  .members-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .m-row {
+    display: grid;
+    grid-template-columns: 60px 1fr 130px;
+    gap: 18px;
+    padding: var(--space-5) var(--space-3);
+    border-bottom: 0.5px solid var(--surface-card-border);
+    align-items: start;
+    transition: background var(--duration-fast) var(--ease-standard);
+  }
+
+  .m-row--me {
+    background: color-mix(in oklab, var(--row-pigment) 4%, transparent);
+    border-radius: var(--radius-md);
+    border-bottom-color: transparent;
+  }
+
+  .m-col-avatar { display: flex; justify-content: center; padding-top: 2px; }
+  .m-col-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+
+  .m-name {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 1.375rem;
+    line-height: 1.2;
+    color: var(--on-surface);
+    margin: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-3);
+  }
+
+  .m-you {
+    font-family: var(--font-sans);
+    font-style: normal;
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--pigment-terracotta);
+    font-weight: 600;
+    position: relative;
+    top: -2px;
+  }
+
+  .m-meta {
+    margin: 0;
+    color: var(--on-surface-variant);
+    font-size: 0.75rem;
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .m-quote {
+    margin: var(--space-2) 0 0;
+    padding-left: 12px;
+    border-left: 2px solid color-mix(in oklab, var(--row-pigment) 40%, transparent);
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--on-surface);
+    max-width: 38rem;
+  }
+  .m-row--me .m-quote {
+    border-left-color: color-mix(in oklab, var(--row-pigment) 50%, transparent);
+  }
+
+  .m-tags {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-end;
+  }
+  .m-tag {
+    background: color-mix(in oklab, var(--row-pigment) 15%, transparent);
+    color: var(--row-pigment);
+    padding: 3px 9px;
+    border-radius: 999px;
+    font-family: var(--font-sans);
+    font-size: var(--text-label-sm);
+    letter-spacing: var(--tracking-wide);
+    white-space: nowrap;
+  }
+
+  .m-empty {
+    color: var(--on-surface-muted);
+    padding: var(--space-6) 0;
+  }
+
+  @media (max-width: 720px) {
+    .m-row { grid-template-columns: 52px 1fr; }
+    .m-tags {
+      grid-column: 1 / -1;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      margin-top: var(--space-2);
+    }
+  }
+</style>