diff --git a/services/frontend/src/domains/boards/accent.ts b/services/frontend/src/domains/boards/accent.ts
new file mode 100644
index 000000000..19882c70a
--- /dev/null
+++ b/services/frontend/src/domains/boards/accent.ts
@@ -0,0 +1,67 @@
+/**
+ * A board's colour, and what reads on top of it.
+ *
+ * The accent is a fill rather than an ink: it washes a band, lights a stretch of the timeline
+ * and backs a swatch. So the question a page has to answer is not "is this colour readable" but
+ * "which ink reads on it" — a pale fill takes dark text and a deep fill takes light text. The
+ * colour itself is painted as it was chosen, because it is the board's own.
+ *
+ * Board knowledge rather than layout knowledge, so it lives in the domain beside the other
+ * reading rules and imports nothing (frontend ADR-001). A colour string is the whole input,
+ * which is what lets the rule be read against the accents the boards actually carry.
+ */
+
+/**
+ * The association's blue, which is what a board with no colour of its own is drawn in.
+ *
+ * Spelled out because a luminance cannot be read out of `var(--color-brand)`: the token in
+ * `styles/island.css` is the one this follows, and the two are the same colour by hand. It is
+ * only ever used to answer which ink pairs with the blue, never painted from here.
+ */
+export const BOARD_BLUE = "#3387fa"
+
+/** Which of the two inks reads on a fill: the near-black one, or the near-white one. */
+export type AccentInk = "light" | "dark"
+
+/** The two inks the island paints on a fill: `--color-void`, and the numeral's own white. */
+const DARK_INK = 0.011
+const LIGHT_INK = 0.905
+
+/** The channels of a `#rgb`, `#rrggbb` or `#rrggbbaa` colour, or nothing where none reads. */
+function channelsOf(colour: string): [number, number, number] | null {
+  const written = colour.trim().replace(/^#/, "")
+  if (!/^[0-9a-f]+$/i.test(written)) return null
+  if (written.length === 3) {
+    const [r, g, b] = [...written].map(one => Number.parseInt(one + one, 16) / 255)
+    return [r!, g!, b!]
+  }
+  // An alpha may ride along and nothing here reads it: a fill is painted over the page.
+  if (written.length !== 6 && written.length !== 8) return null
+  const pairs = [written.slice(0, 2), written.slice(2, 4), written.slice(4, 6)]
+  const [r, g, b] = pairs.map(pair => Number.parseInt(pair, 16) / 255)
+  return [r!, g!, b!]
+}
+
+/** How bright a colour is to an eye, on the scale WCAG's contrast ratio is built on. */
+function luminance([r, g, b]: [number, number, number]): number {
+  const linear = (one: number) => (one <= 0.04045 ? one / 12.92 : ((one + 0.055) / 1.055) ** 2.4)
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b)
+}
+
+/**
+ * Which ink reads on a board's colour: whichever of the two the fill contrasts with more.
+ *
+ * That is the whole rule, and it is why it cannot be a threshold on lightness alone — the two
+ * inks are not equally far from the middle of the scale, so the colour where the answer turns
+ * over is where their two ratios cross rather than at any round number.
+ *
+ * A board with no colour of its own is drawn in the association's blue, so that is what the
+ * blank case is answered against — as is a colour written in some notation this cannot read.
+ * The fill is the blue in both cases, so the pairing is right rather than merely safe.
+ */
+export function inkOnAccent(accent?: string | null): AccentInk {
+  const fill = luminance(channelsOf(accent?.trim() || BOARD_BLUE) ?? channelsOf(BOARD_BLUE)!)
+  const onDark = (fill + 0.05) / (DARK_INK + 0.05)
+  const onLight = (LIGHT_INK + 0.05) / (fill + 0.05)
+  return onDark >= onLight ? "dark" : "light"
+}
diff --git a/services/frontend/src/domains/boards/adapters/boards.ts b/services/frontend/src/domains/boards/adapters/boards.ts
index a4116b921..af48d2605 100644
--- a/services/frontend/src/domains/boards/adapters/boards.ts
+++ b/services/frontend/src/domains/boards/adapters/boards.ts
@@ -88,22 +88,39 @@ export async function loadBoards(): Promise<Board[]> {
     .sort((left, right) => right.startDate.localeCompare(left.startDate))
 }
 
-export async function saveBoard(
-  board: {
-    id?: number
-    number: number
-    name?: string | null
-    candidate?: string | null
-    cheer?: string | null
-    accent?: string | null
-    description?: string | null
-    startDate: string
-    endDate?: string | null
-    image?: string | null
-    photo?: string | null
-    version?: number
-  },
-): Promise<Board | null> {
+/**
+ * A board as it is written down: everything the api records, and the key where one exists.
+ *
+ * `candidate` is passed through rather than composed here. The column is `NOT NULL`, nothing
+ * reads it, and the api fills it with the board's name — or with its number where there is no
+ * name — for a write that carries none. A second copy of that rule on this side would be a
+ * second thing to keep in step.
+ */
+export interface BoardWrite {
+  id?: number
+  number: number
+  name?: string | null
+  candidate?: string | null
+  cheer?: string | null
+  accent?: string | null
+  description?: string | null
+  startDate: string
+  endDate?: string | null
+  image?: string | null
+  photo?: string | null
+  version?: number
+}
+
+/**
+ * A board written down, or the api's own words for why it was not.
+ *
+ * A clashing number is the refusal this exists for: the api answers "Board 9 already exists",
+ * and a dialog that could only report that something went wrong would leave whoever typed it
+ * guessing at which field to change.
+ */
+export async function saveBoardOrReason(
+  board: BoardWrite,
+): Promise<{ok: true; board: Board} | Refused> {
   const body = {
     number: board.number,
     name: board.name ?? undefined,
@@ -119,7 +136,15 @@ export async function saveBoard(
   const res = board.id == null
     ? await createBoard({body})
     : await updateBoard({path: {id: board.id}, body: {...body, version: board.version ?? 0}})
-  return res.data ? withPictures(res.data) : null
+  if (res.error || !res.data) {
+    return {ok: false, reason: reasonFor(res.error, "That board could not be saved.")}
+  }
+  return {ok: true, board: withPictures(res.data)}
+}
+
+export async function saveBoard(board: BoardWrite): Promise<Board | null> {
+  const saved = await saveBoardOrReason(board)
+  return saved.ok ? saved.board : null
 }
 
 /**
diff --git a/services/frontend/src/domains/boards/index.ts b/services/frontend/src/domains/boards/index.ts
index a4e391221..a71428b56 100644
--- a/services/frontend/src/domains/boards/index.ts
+++ b/services/frontend/src/domains/boards/index.ts
@@ -33,3 +33,5 @@ export {
   seatsInOrder,
   UNRANKED_SEAT,
 } from "./seatOrder"
+export {type AccentInk, BOARD_BLUE, inkOnAccent} from "./accent"
+export {nextBoardNumber, type Numbered} from "./numbering"
diff --git a/services/frontend/src/domains/boards/island/BoardBand.vue b/services/frontend/src/domains/boards/island/BoardBand.vue
index 664f9e447..711b5e8a2 100644
--- a/services/frontend/src/domains/boards/island/BoardBand.vue
+++ b/services/frontend/src/domains/boards/island/BoardBand.vue
@@ -24,8 +24,17 @@ const props = withDefaults(defineProps<{
   photo?: Picture | null
   /** What the photograph is of, for a reader who is not being shown it. */
   label?: string
+  /**
+   * Whether to offer a photograph on a board that has none.
+   *
+   * Offered in the band itself, which is where its absence is what a reader is looking at.
+   * Decided by the page, which knows who is reading; nothing here is a guard.
+   */
+  mayAddPhoto?: boolean
   testid?: string
-}>(), {photo: null, label: "", testid: "board-band"})
+}>(), {photo: null, label: "", mayAddPhoto: false, testid: "board-band"})
+
+const emit = defineEmits<{(event: "add-photo"): void}>()
 
 const numeral = computed(() => romanNumeral(props.number))
 const srcset = computed(() => srcsetOf(props.photo))
@@ -114,6 +123,21 @@ onBeforeUnmount(() => observer?.disconnect())
         :class="{'board-band__numeral--centred': !photo}"
         data-testid="board-numeral"
       >{{ numeral }}</span>
+
+      <!--
+        Half the history has no photograph, so the way to add one belongs in the band that is
+        standing in for it rather than behind a pencil somewhere else. Only where there is
+        none: a photograph that is wrong is replaced in the dialog, beside the crop.
+      -->
+      <button
+        v-if="!photo && mayAddPhoto"
+        class="board-band__add"
+        data-testid="board-band-add-photo"
+        type="button"
+        @click="emit('add-photo')"
+      >
+        Add a photograph
+      </button>
     </div>
   </section>
 </template>
@@ -199,6 +223,35 @@ onBeforeUnmount(() => observer?.disconnect())
   text-shadow: 0 2px 24px oklch(0 0 0 / 45%);
 }
 
+/*
+ * The way to a photograph on a board that has none, under the numeral it stands beside.
+ *
+ * Written rather than drawn: the band is the largest empty space on the page and a bare plus
+ * in the middle of it would read as decoration. Set on the chalk of the theme, which the
+ * band's own fill is washed into, so it is legible whatever colour the board chose.
+ */
+.board-band__add {
+  position: absolute;
+  bottom: 14%;
+  left: 50%;
+  translate: -50%;
+  padding: 0.5rem 1.1rem;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  font-style: italic;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-chalk);
+  cursor: pointer;
+  background: color-mix(in oklab, var(--color-chalk) 10%, transparent);
+  border: 1px solid color-mix(in oklab, var(--color-chalk) 34%, transparent);
+  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
+}
+
+.board-band__add:hover {
+  background: color-mix(in oklab, var(--color-chalk) 20%, transparent);
+}
+
 /* No photograph, no lower left to hold: the numeral is the whole band, so it takes the middle. */
 .board-band__numeral--centred {
   bottom: auto;
diff --git a/services/frontend/src/domains/boards/island/BoardDialog.vue b/services/frontend/src/domains/boards/island/BoardDialog.vue
new file mode 100644
index 000000000..51955732a
--- /dev/null
+++ b/services/frontend/src/domains/boards/island/BoardDialog.vue
@@ -0,0 +1,527 @@
+<script lang="ts" setup>
+import {computed, ref, watch} from "vue"
+import IslandDialog from "@/components/island/IslandDialog.vue"
+import ConfirmDialog from "@/components/island/ConfirmDialog.vue"
+import ImagePicker from "@/components/island/ImagePicker.vue"
+import type {Picture} from "@/components/island/pictures"
+import {dropBoard, saveBoardOrReason, storeBoardPhoto, type Board} from "../adapters/boards"
+import {inkOnAccent} from "../accent"
+import {boardName, romanNumeral} from "../reading"
+
+/**
+ * A board written down or corrected, from the page it is read on.
+ *
+ * Everything a board is: its number, the name it chose, the line it shouted, its colour, what
+ * the year was about, the stretch it ran, and the photograph of the people who ran it. One
+ * dialog for adding and for correcting, because they are the same fields — what changes is
+ * whether a number is suggested and whether there is anything to remove.
+ *
+ * A refusal keeps what was typed, the way the esports dialogs do. Losing five fields because
+ * the number was already taken would mean typing them again to find out what the objection
+ * was.
+ *
+ * `candidate` is not a field here. The column is `NOT NULL` and nothing reads it, and the api
+ * fills it from the name — or from the number where the board has no name — for a write that
+ * carries none, which is exactly what this sends.
+ */
+defineOptions({name: "BoardDialog"})
+
+const props = withDefaults(defineProps<{
+  open: boolean
+  /** The board being corrected, or nothing where one is being added. */
+  board: Board | null
+  /**
+   * The number a board being added is suggested.
+   *
+   * Read off the boards recorded by the page rather than worked out here: which board comes
+   * next is a fact about the line, and the dialog is handed one board at a time.
+   */
+  nextNumber?: number
+  accent?: string
+}>(), {nextNumber: 1, accent: undefined})
+
+const emit = defineEmits<{
+  (event: "update:open", open: boolean): void
+  (event: "saved", board: Board): void
+  (event: "removed", board: Board): void
+}>()
+
+/** Adding rather than correcting, which is what decides the title and the suggested number. */
+const adding = computed(() => props.board == null)
+
+const number = ref(1)
+const name = ref("")
+const cheer = ref("")
+/** The board's own colour, which is not the island accent this dialog is drawn on. */
+const colour = ref("")
+const description = ref("")
+const startDate = ref("")
+const endDate = ref("")
+/**
+ * The photograph now held.
+ *
+ * Chosen bytes go into storage as they are chosen and reach the board only when this dialog
+ * is saved, which is what lets cancelling leave the board on the photograph it had. The
+ * picker's own doc comment is the long version.
+ */
+const photo = ref<Picture | null>(null)
+const failure = ref<string | null>(null)
+const saving = ref(false)
+
+/** The day part of a date, so a stored timestamp still fills a date field. */
+const dayOf = (date?: string | null): string => (date ?? "").trim().slice(0, 10)
+
+// Opening fills the form from the board as it stands; a reopen after a refusal starts clean.
+watch(
+  () => [props.open, props.board] as const,
+  ([open]) => {
+    if (!open) return
+    const board = props.board
+    number.value = board?.number ?? props.nextNumber
+    name.value = board?.name ?? ""
+    cheer.value = board?.cheer ?? ""
+    colour.value = board?.accent ?? ""
+    description.value = board?.description ?? ""
+    startDate.value = dayOf(board?.startDate)
+    endDate.value = dayOf(board?.endDate)
+    photo.value = board?.photo ?? null
+    failure.value = null
+  },
+  {immediate: true},
+)
+
+const title = computed(() =>
+  (props.board ? `Edit ${boardName(props.board.number, props.board.name)}` : "Add a board"))
+
+/** The numeral the band would set, which is what the swatch previews the colour under. */
+const numeral = computed(() => romanNumeral(number.value))
+
+/**
+ * The colour as it will be painted, and the ink that reads on it.
+ *
+ * The accent is a fill rather than an ink, so the swatch is a filled block and its label is
+ * set in whichever ink the fill takes — the swatch demonstrates the pairing rather than
+ * describing it. A blank field paints nothing and the stylesheet's own blue shows through,
+ * which is the same colour the page would draw the board in.
+ */
+const fill = computed(() => colour.value.trim())
+const ink = computed(() => (inkOnAccent(fill.value) === "light" ? "#f4f6f8" : "#1c1c1c"))
+
+/** The api wants a number and a first day; everything else about a board may be unknown. */
+const complete = computed(() => Number.isInteger(number.value) && number.value > 0 && startDate.value !== "")
+
+const confirming = ref(false)
+const removing = ref(false)
+const removalFailure = ref<string | null>(null)
+
+const seats = computed(() => props.board?.members.length ?? 0)
+
+/**
+ * What removing this board would take with it, said before the question is put.
+ *
+ * The seats are already in hand — the page read the board whole — so nothing has to be asked
+ * of the api to say how many people are in the way. Whether that is a refusal is still the
+ * api's answer rather than this dialog's guess.
+ */
+const question = computed(() => {
+  const board = props.board
+  if (!board) return ""
+  const named = boardName(board.number, board.name)
+  if (seats.value === 0) return `${named} holds no seats. Removing it takes it off the timeline.`
+  return `${named} holds ${seats.value} seat${seats.value === 1 ? "" : "s"}, and every one of them `
+    + "is somebody's place in the association's history."
+})
+
+const askToRemove = () => {
+  if (!props.board) return
+  failure.value = null
+  removalFailure.value = null
+  confirming.value = true
+}
+
+const removeBoard = async () => {
+  const board = props.board
+  if (!board || removing.value) return
+  removing.value = true
+  removalFailure.value = null
+  try {
+    const result = await dropBoard(board.id)
+    if (!result.ok) {
+      // Nothing has gone, so the question stands and says how many seats are in the way.
+      removalFailure.value = result.reason
+      return
+    }
+    emit("removed", board)
+    confirming.value = false
+    emit("update:open", false)
+  } finally {
+    removing.value = false
+  }
+}
+
+const submit = async () => {
+  if (!complete.value || saving.value) return
+  saving.value = true
+  failure.value = null
+  try {
+    const result = await saveBoardOrReason({
+      id: props.board?.id,
+      number: number.value,
+      name: name.value.trim() || null,
+      cheer: cheer.value.trim() || null,
+      accent: colour.value.trim() || null,
+      description: description.value.trim() || null,
+      startDate: startDate.value,
+      endDate: endDate.value || null,
+      // The asset file name the early history still points at, carried through rather than
+      // shown: a save replaces every field, so leaving it out would quietly clear it.
+      image: props.board?.image ?? null,
+      photo: photo.value?.path ?? null,
+      version: props.board?.version,
+    })
+    if (!result.ok) {
+      failure.value = result.reason
+      return
+    }
+    emit("saved", result.board)
+    emit("update:open", false)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <island-dialog
+    :accent="accent"
+    :open="open"
+    testid="board-dialog"
+    :title="title"
+    @update:open="emit('update:open', $event)"
+  >
+    <form
+      id="board-dialog-form"
+      class="board-form"
+      @submit.prevent="submit"
+    >
+      <div class="board-form__row">
+        <label class="board-form__field board-form__field--narrow">
+          <span class="board-form__label">Number</span>
+          <input
+            v-model.number="number"
+            class="board-form__input"
+            data-testid="board-dialog-number"
+            min="1"
+            required
+            type="number"
+          >
+        </label>
+        <label class="board-form__field">
+          <span class="board-form__label">Name</span>
+          <input
+            v-model="name"
+            class="board-form__input"
+            data-testid="board-dialog-name"
+            maxlength="255"
+            type="text"
+          >
+          <span class="board-form__hint">
+            <!-- A board is free to have chosen no name, and half the history has not. -->
+            Leave empty for a board with no name of its own; it reads as
+            Board {{ numeral }}
+          </span>
+        </label>
+      </div>
+
+      <span
+        v-if="adding"
+        class="board-form__hint"
+        data-testid="board-dialog-suggested"
+      >Board {{ numeral }} is the next one recorded. Type over it if it is not.</span>
+
+      <label class="board-form__field">
+        <span class="board-form__label">Cheer</span>
+        <input
+          v-model="cheer"
+          class="board-form__input"
+          data-testid="board-dialog-cheer"
+          maxlength="255"
+          type="text"
+        >
+        <span class="board-form__hint">The line the board shouted, where it had one</span>
+      </label>
+
+      <div class="board-form__row">
+        <label class="board-form__field">
+          <span class="board-form__label">Colour</span>
+          <span class="board-form__colour">
+            <input
+              v-model="colour"
+              class="board-form__input"
+              data-testid="board-dialog-accent"
+              maxlength="32"
+              placeholder="#3387fa"
+              type="text"
+            >
+            <!--
+              The colour is a fill, so the swatch is filled with it and its numeral is set in
+              whichever ink reads on it. A preview of the field beside it rather than a fact of
+              its own, which is why it is not spoken: the value is what the input says.
+            -->
+            <span
+              aria-hidden="true"
+              class="board-form__swatch"
+              data-testid="board-dialog-swatch"
+              :style="{background: fill || undefined, color: ink}"
+            >{{ numeral }}</span>
+          </span>
+          <span class="board-form__hint">
+            Leave empty to draw the board in the association's blue
+          </span>
+        </label>
+      </div>
+
+      <label class="board-form__field">
+        <span class="board-form__label">Description</span>
+        <textarea
+          v-model="description"
+          class="board-form__input board-form__input--tall"
+          data-testid="board-dialog-description"
+          maxlength="4000"
+          rows="4"
+        />
+      </label>
+
+      <div class="board-form__row">
+        <label class="board-form__field">
+          <span class="board-form__label">Takes office</span>
+          <input
+            v-model="startDate"
+            class="board-form__input"
+            data-testid="board-dialog-start"
+            required
+            type="date"
+          >
+        </label>
+        <label class="board-form__field">
+          <span class="board-form__label">Hands over</span>
+          <input
+            v-model="endDate"
+            class="board-form__input"
+            data-testid="board-dialog-end"
+            type="date"
+          >
+          <span class="board-form__hint">Empty while a board is still in office</span>
+        </label>
+      </div>
+
+      <!-- Held until Save, like every other field here: closing without saving leaves the
+           board on the photograph it was drawn with. -->
+      <image-picker
+        label="Board photo"
+        :picture="photo"
+        :store="storeBoardPhoto"
+        testid="board-dialog-photo"
+        @update:picture="photo = $event"
+      />
+
+      <p
+        v-if="failure"
+        class="board-form__failure"
+        data-testid="board-dialog-failure"
+        role="alert"
+      >
+        {{ failure }}
+      </p>
+    </form>
+
+    <!-- In the footer, like the other dialogs on the island. Save names the form it submits
+         rather than sitting inside it, which is what lets it stand out here. -->
+    <template #footer>
+      <div class="board-form__actions">
+        <button
+          v-if="board"
+          class="board-form__button board-form__button--drop"
+          data-testid="board-dialog-remove"
+          type="button"
+          @click="askToRemove"
+        >
+          Remove
+        </button>
+        <button
+          class="board-form__button board-form__button--ghost"
+          data-testid="board-dialog-cancel"
+          type="button"
+          @click="emit('update:open', false)"
+        >
+          Cancel
+        </button>
+        <button
+          class="board-form__button board-form__button--go"
+          data-testid="board-dialog-save"
+          :disabled="!complete || saving"
+          form="board-dialog-form"
+          type="submit"
+        >
+          {{ saving ? "Saving" : "Save" }}
+        </button>
+      </div>
+    </template>
+  </island-dialog>
+
+  <confirm-dialog
+    :accent="accent"
+    confirm-label="Remove the board"
+    :failure="removalFailure"
+    :open="confirming"
+    :question="question"
+    testid="board-remove-dialog"
+    title="Remove this board?"
+    :working="removing"
+    @confirm="removeBoard"
+    @update:open="confirming = $event"
+  />
+</template>
+
+<style>
+/* Unscoped: the dialog is portalled out of this component's subtree. */
+.board-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding-bottom: 0.35rem;
+}
+
+.board-form__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+}
+
+.board-form__field {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.board-form__field--narrow {
+  flex: 0 0 5.5rem;
+}
+
+.board-form__label {
+  padding: 0;
+  font-family: var(--font-display);
+  font-size: 0.62rem;
+  color: var(--color-ash);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.board-form__hint {
+  font-size: 0.72rem;
+  color: color-mix(in oklab, var(--color-ash) 80%, transparent);
+  word-break: break-word;
+}
+
+/* One field style across the island: flat, square, and lit by the focus ring rather than by
+   a border that competes with the labels above it. */
+.board-form__input {
+  width: 100%;
+  padding: 0.55rem 0.75rem;
+  font-family: inherit;
+  font-size: 0.92rem;
+  color: var(--color-chalk);
+  background-color: color-mix(in oklab, var(--color-chalk) 7%, transparent);
+  border: 0;
+}
+
+.board-form__input::placeholder {
+  color: var(--color-ash);
+}
+
+.board-form__input--tall {
+  resize: vertical;
+}
+
+.board-form__input:focus-visible {
+  outline: none;
+  border-color: var(--dialog-accent, var(--color-brand));
+}
+
+/* The field and its swatch on one line, so the colour is beside the value it is. */
+.board-form__colour {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+/*
+ * The colour as the page paints it: a fill with the board's numeral on it, which is exactly
+ * what the band is for a board with no photograph. The blue shows through while the field is
+ * empty and while it holds something no browser can read as a colour — both of which are a
+ * board drawn in the association's blue.
+ */
+.board-form__swatch {
+  display: grid;
+  flex: 0 0 3.25rem;
+  place-items: center;
+  background: var(--color-brand);
+  font-family: var(--font-display);
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.board-form__failure {
+  margin: 0;
+  color: var(--color-danger);
+  font-size: 0.85rem;
+}
+
+/* Its own rule and its own spacing: see the footer in IslandDialog. */
+.board-form__actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid color-mix(in oklab, var(--color-chalk) 12%, transparent);
+}
+
+.board-form__button {
+  padding: 0.45rem 0.9rem;
+  border: 1px solid color-mix(in oklab, var(--color-chalk) 16%, transparent);
+  color: var(--color-chalk);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.85rem;
+}
+
+.board-form__button--ghost {
+  background: transparent;
+}
+
+/* First in the row and set apart, the way the esports dialogs set their own removal apart. */
+.board-form__button--drop {
+  margin-right: auto;
+  background: color-mix(in oklab, var(--color-danger-tint) 18%, transparent);
+  color: var(--color-danger-ink);
+}
+
+.board-form__button--drop:hover {
+  background: color-mix(in oklab, var(--color-danger-tint) 34%, transparent);
+  color: var(--color-danger-ink-strong);
+}
+
+.board-form__button--go {
+  background: var(--dialog-accent, var(--color-brand));
+  border-color: transparent;
+  color: var(--color-void);
+}
+
+.board-form__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>
diff --git a/services/frontend/src/domains/boards/island/useMayEditBoards.ts b/services/frontend/src/domains/boards/island/useMayEditBoards.ts
new file mode 100644
index 000000000..f1c50b00f
--- /dev/null
+++ b/services/frontend/src/domains/boards/island/useMayEditBoards.ts
@@ -0,0 +1,20 @@
+import {computed, type ComputedRef} from "vue"
+import {useStore} from "vuex"
+
+/**
+ * Whether the viewer may change the association's history.
+ *
+ * The rule the api enforces is `hasPermission(..., 'Board', 'write')`, which is BOARD and
+ * anything above it, and the login response carries inherited roles — so an admin arrives
+ * holding BOARD and this needs to ask only the one question. The same question the esports
+ * island asks, deliberately: one rule, asked per domain, so a page never reaches into
+ * another domain to find out who is reading (frontend ADR-001).
+ *
+ * Nothing here is a guard: a refused request is still refused. It decides whether to offer
+ * the affordance at all, because a page covered in pencils that answer 403 is worse than a
+ * page without them — and a visitor is shown the history rather than the machinery.
+ */
+export function useMayEditBoards(): ComputedRef<boolean> {
+  const store = useStore()
+  return computed<boolean>(() => store.getters.isBoard === true)
+}
diff --git a/services/frontend/src/domains/boards/numbering.ts b/services/frontend/src/domains/boards/numbering.ts
new file mode 100644
index 000000000..e1a761d1c
--- /dev/null
+++ b/services/frontend/src/domains/boards/numbering.ts
@@ -0,0 +1,33 @@
+/**
+ * Which board comes next.
+ *
+ * A board's number is its place in the line, so the number of a board being written down
+ * follows from the boards already recorded: ten of them exist, so the eleventh is derivable
+ * and nobody has to remember it. Suggested rather than imposed — the field is still typed
+ * over, because a board added out of order is a correction somebody may be making on purpose.
+ *
+ * Board knowledge rather than form knowledge, so it lives in the domain beside the other
+ * reading rules and imports nothing (frontend ADR-001).
+ */
+
+/** The least of a board this rule reads. */
+export interface Numbered {
+  number: number
+}
+
+/**
+ * One past the highest number recorded, and the first board where none is.
+ *
+ * The highest rather than the count: a history with a gap in it — a board nobody wrote down,
+ * one removed since — would otherwise suggest a number that is already taken, and the api
+ * refuses a number twice over. A number that is not a whole number above nought is not a
+ * place in the line and is passed over.
+ */
+export function nextBoardNumber(boards: readonly Numbered[]): number {
+  const highest = boards.reduce(
+    (top, board) =>
+      (Number.isInteger(board.number) && board.number > top ? board.number : top),
+    0,
+  )
+  return highest + 1
+}
diff --git a/services/frontend/src/pages/Board.vue b/services/frontend/src/pages/Board.vue
index 36f7f0ef7..aee0f3c60 100644
--- a/services/frontend/src/pages/Board.vue
+++ b/services/frontend/src/pages/Board.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed} from "vue"
+import {computed, ref} from "vue"
 import {useRoute, useRouter} from "vue-router"
 import {Motion} from "motion-v"
 import Island from "@/components/island/Island.vue"
@@ -9,14 +9,17 @@ import {useMotionAllowed} from "@/components/island/useMotionAllowed"
 import SeatRows from "@/components/island/SeatRows.vue"
 import {srcsetOf} from "@/components/island/pictures"
 import BoardBand from "@/domains/boards/island/BoardBand.vue"
+import BoardDialog from "@/domains/boards/island/BoardDialog.vue"
 import {BOARD_CALL} from "@/domains/boards/island/boardCall"
 import {useBoards} from "@/domains/boards/island/useBoards"
+import {useMayEditBoards} from "@/domains/boards/island/useMayEditBoards"
 import {
   academicYear,
   boardEyebrow,
   boardInRoute,
   boardName,
   boardStops,
+  nextBoardNumber,
   seatsInOrder,
 } from "@/domains/boards"
 import {seatTitle, type Board, type BoardSeat} from "@/domains/boards/adapters/boards"
@@ -36,7 +39,7 @@ const route = useRoute()
 const router = useRouter()
 const motion = useMotionAllowed()
 
-const {boards, loading, inOffice} = useBoards()
+const {boards, loading, inOffice, refresh} = useBoards()
 
 /**
  * The board being read: the one the url names, else the one in office.
@@ -138,6 +141,60 @@ const entrance = computed(() => ({
   animate: {opacity: 1, y: 0},
   transition: {duration: motion.duration(0.45), ease: [0.22, 1, 0.36, 1] as const},
 }))
+
+/**
+ * Whether this reader may correct the history, which decides what is offered and nothing else.
+ *
+ * A visitor is shown the years and none of the machinery. The api refuses what it refuses
+ * either way — hiding a pencil is not a guard, and this page does not treat it as one.
+ */
+const mayEdit = useMayEditBoards()
+
+/** The number a board added would take, read off the line rather than remembered. */
+const nextNumber = computed(() => nextBoardNumber(boards.value))
+
+/** The board being corrected, or nothing while one is being added. */
+const editing = ref<Board | null>(null)
+const editorOpen = ref(false)
+
+const editBoard = (number: number) => {
+  editing.value = boards.value.find(board => board.number === number) ?? null
+  editorOpen.value = true
+}
+
+// Nothing to fill the form from: the dialog opens on the suggested number and writes a board.
+const addBoard = () => {
+  editing.value = null
+  editorOpen.value = true
+}
+
+/**
+ * A board saved is a board re-read: the timeline, the band and the identity all draw from the
+ * one list, so asking again is the whole of showing the correction.
+ *
+ * A board nobody was looking at — one just written down, or one whose number has just changed
+ * — is then shown, because somebody who has just described a board wants to see it.
+ */
+const boardSaved = async (saved: Board) => {
+  await refresh()
+  if (saved.number !== shown.value?.number) {
+    void router.push({query: {...route.query, board: String(saved.number)}})
+  }
+}
+
+/**
+ * A board that has gone takes its stop on the timeline with it.
+ *
+ * The url is emptied of it first: a board named in the url that nobody has recorded falls
+ * through to the board in office, so the page would recover either way — but a link left
+ * pointing at a board that has been removed is a link that lies.
+ */
+const boardRemoved = async () => {
+  const query = {...route.query}
+  delete query.board
+  void router.push({query})
+  await refresh()
+}
 </script>
 
 <template>
@@ -167,18 +224,25 @@ const entrance = computed(() => ({
 
       <!-- No room of its own above or below: the strip is a slice of the page, and a slice
            meets the one before it. -->
+      <!-- To somebody who may edit, the strip is where a board is added, so it stands even for
+           a line of one or of none. To a visitor a strip of one says nothing the page below it
+           does not already say. -->
       <section
-        v-if="stops.length > 1"
+        v-if="stops.length > 1 || mayEdit"
         class="w-full"
         data-testid="board-boards"
       >
         <timeline
           :accent="accent"
+          add-label="Add a board"
+          :may-edit="mayEdit"
           pan-back-label="Show earlier boards"
           pan-on-label="Show later boards"
           :selected-id="shown?.number ?? null"
           :stops="stops"
           testid-prefix="board"
+          @add="addBoard"
+          @edit="editBoard"
           @select="chooseBoard"
         />
       </section>
@@ -210,8 +274,10 @@ const entrance = computed(() => ({
         >
           <board-band
             :label="photoLabel"
+            :may-add-photo="mayEdit"
             :number="shown.number"
             :photo="shown.photo"
+            @add-photo="editBoard(shown.number)"
           />
 
           <section
@@ -271,6 +337,20 @@ const entrance = computed(() => ({
         </Motion>
       </div>
 
+      <!-- One dialog for the board being corrected and for a board being added: which it is
+           follows from whether there is a board in it. Outside the band and the identity, so
+           it is not unmounted by the board it just changed arriving. -->
+      <board-dialog
+        v-if="mayEdit"
+        :accent="accent"
+        :board="editing"
+        :next-number="nextNumber"
+        :open="editorOpen"
+        @removed="boardRemoved"
+        @saved="boardSaved"
+        @update:open="editorOpen = $event"
+      />
+
       <call-band v-bind="BOARD_CALL" />
     </island>
   </v-main>
diff --git a/services/frontend/tests/e2e/board-edit.spec.ts b/services/frontend/tests/e2e/board-edit.spec.ts
new file mode 100644
index 000000000..1efc94288
--- /dev/null
+++ b/services/frontend/tests/e2e/board-edit.spec.ts
@@ -0,0 +1,507 @@
+import {Buffer} from "node:buffer"
+import type {Locator, Page} from "@playwright/test"
+import {expect, test} from "./test"
+import {installApiMocks, loginAsBoard, loginAsMember, preferLightTheme} from "./mocks"
+
+/**
+ * A board written down and corrected on the page it is read on.
+ *
+ * The affordances are offered by the same rule the api enforces, so what is asserted here is
+ * that they appear for somebody who may take them up, that a save carries what was typed, that
+ * a cancelled dialog changes nothing at all, and that a refusal arrives in words. None of it is
+ * a guard: the api refuses what it refuses whether or not a pencil was drawn.
+ */
+
+/** A photograph as the api answers with one, at the widths a board photo is stored at. */
+const photo = (name: string) => ({
+  path: `board-photos/${name}.webp`,
+  url: `/files/public/board-photos/${name}.webp`,
+  width: 2560,
+  height: 1440,
+  renditions: [320, 640, 960, 1280, 1920, 2560].map((width) => ({
+    url: `/files/public/board-photos/${name}-${width}.webp`,
+    width,
+  })),
+})
+
+const seat = (id: number, boardId: number, name: string, role: string) => ({
+  id, boardId, userId: null, role, name, nickname: null,
+  description: null, image: null, portrait: null,
+  startDate: "2025-09-01", endDate: "2026-08-31", version: 0,
+  createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z",
+})
+
+const board = (over: Record<string, unknown>) => ({
+  id: 1, number: 1, name: null, candidate: "Board", cheer: null, accent: null, description: null,
+  startDate: "2017-09-01", endDate: "2018-08-31", image: null, photo: null, version: 0,
+  createdAt: "2026-01-01T00:00:00Z", updatedAt: "2026-01-01T00:00:00Z", members: [],
+  ...over,
+})
+
+/**
+ * The line as the association has it, with the colours the boards actually chose.
+ *
+ * Two of them are pale and one is deep, which is what makes the ink rule testable: a fill is
+ * painted as it was chosen and what adapts is whatever is drawn on top of it. Board X is
+ * elected and not yet sitting, has no photograph and nobody seated, so it is the board an
+ * empty removal can be tried on; board IX is in office and holds three seats, so it is the
+ * one a removal is refused for.
+ */
+const history = [
+  board({
+    id: 10, number: 10, name: "Rainbow road", accent: "#65c6cd",
+    startDate: "2099-09-01", endDate: "2100-08-31", members: [],
+  }),
+  board({
+    id: 9, number: 9, name: "Eeveelutions", cheer: "RNG, Be With Me!",
+    startDate: "2025-09-01", endDate: null, photo: photo("board9"),
+    members: [
+      seat(91, 9, "Emma Dokter", "Chair"),
+      seat(92, 9, "Viktor Petrov", "Treasurer"),
+      seat(93, 9, "Roos Kruk", "Commissioner of Internal Affairs"),
+    ],
+  }),
+  board({
+    id: 7, number: 7, name: "Overcooked", cheer: "Krijg de tering!", accent: "#b00b69",
+    startDate: "2023-09-01", endDate: "2024-08-31", photo: photo("board7"),
+    members: [seat(71, 7, "Thijs Lieverse", "Chairman")],
+  }),
+  board({
+    id: 6, number: 6, name: "Don't starve together", cheer: "Never alone!", accent: "#eaa4b6",
+    startDate: "2022-09-01", endDate: "2023-08-31",
+    members: [seat(61, 6, "Anne Schrader", "Chairman")],
+  }),
+  board({
+    id: 4, number: 4, name: null, startDate: "2020-09-01", endDate: "2021-08-31",
+    members: [seat(41, 4, "Bram Bakker", "Chairman")],
+  }),
+]
+
+/** A one-pixel PNG, which is the smallest thing that is genuinely the type it claims. */
+const PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
+  "base64",
+)
+
+/** What a person does: bring the pointer to the board, then take up what it reveals. */
+const openEditor = async (page: Page, number: number) => {
+  await page.getByTestId(`board-node-${number}`).hover()
+  await page.getByTestId(`board-edit-${number}`).click()
+  await expect(page.getByTestId("board-dialog")).toBeVisible()
+}
+
+const choosePhoto = (page: Page) =>
+  page.getByTestId("board-dialog-photo-file").setInputFiles({
+    name: "board.png",
+    mimeType: "image/png",
+    buffer: PNG,
+  })
+
+const styleOf = (target: Locator, property: string) =>
+  target.evaluate(
+    (node, name) => getComputedStyle(node).getPropertyValue(name),
+    property,
+  )
+
+/**
+ * A colour as it is really painted, in sRGB channels.
+ *
+ * Asked of a canvas rather than parsed out of the computed value: a colour mixed in oklab is
+ * serialised as `oklab(...)`, so reading the numbers out of the string reads three components
+ * of another space as if they were channels — which is a contrast measurement of nothing.
+ * Painting one pixel and reading it back is the browser's own conversion.
+ */
+const painted = (page: Page, colour: string) =>
+  page.evaluate((value) => {
+    const canvas = document.createElement("canvas")
+    canvas.width = 1
+    canvas.height = 1
+    const ctx = canvas.getContext("2d")!
+    ctx.fillStyle = value
+    ctx.fillRect(0, 0, 1, 1)
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
+    return [r, g, b] as [number, number, number]
+  }, colour)
+
+/** How readable one colour is on another, as WCAG counts it. */
+const contrast = (ink: [number, number, number], ground: [number, number, number]) => {
+  const luminance = ([r, g, b]: [number, number, number]) => {
+    const linear = (channel: number) => {
+      const scaled = channel / 255
+      return scaled <= 0.04045 ? scaled / 12.92 : ((scaled + 0.055) / 1.055) ** 2.4
+    }
+    return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b)
+  }
+  const [high, low] = [luminance(ink), luminance(ground)].sort((a, b) => b - a)
+  return (high! + 0.05) / (low! + 0.05)
+}
+
+test.describe("a board is corrected on the page it is read on", () => {
+  test("a visitor is offered none of it", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+
+    await page.goto("/board")
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD IX · 2025-2026")
+
+    // Not hidden and reachable: not there at all. The api still refuses a visitor's write.
+    await expect(page.locator('[data-testid^="board-edit-"]')).toHaveCount(0)
+    await expect(page.getByTestId("board-add")).toHaveCount(0)
+    await expect(page.getByTestId("board-dialog")).toHaveCount(0)
+
+    await page.goto("/board?board=4")
+    // The board with no photograph is the one where an editor is offered a way to add one.
+    await expect(page.getByTestId("board-numeral")).toHaveText("IV")
+    await expect(page.getByTestId("board-band-add-photo")).toHaveCount(0)
+  })
+
+  test("a member who is not on the board is offered none of it either", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsMember(page.context())
+
+    await page.goto("/board")
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD IX · 2025-2026")
+
+    await expect(page.locator('[data-testid^="board-edit-"]')).toHaveCount(0)
+    await expect(page.getByTestId("board-add")).toHaveCount(0)
+  })
+
+  test("every board is reachable, and every one of them can be corrected", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board")
+
+    // Complete or not, sitting or elected: a board has to be reachable before it can be
+    // worked on, so the strip carries all five and offers each of them a pencil.
+    for (const number of [4, 6, 7, 9, 10]) {
+      await expect(page.getByTestId(`board-node-${number}`)).toHaveCount(1)
+      await expect(page.getByTestId(`board-edit-${number}`)).toHaveCount(1)
+    }
+    await expect(page.getByTestId("board-add")).toBeVisible()
+  })
+
+  test("the number of a new board is suggested rather than remembered", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board")
+    await page.getByTestId("board-add").click()
+
+    await expect(page.getByTestId("board-dialog")).toBeVisible()
+    // Ten boards have not all been recorded here, but the highest is X, so the next is XI.
+    await expect(page.getByTestId("board-dialog-number")).toHaveValue("11")
+    await expect(page.getByTestId("board-dialog-suggested")).toContainText("Board XI")
+  })
+
+  test("writes a board down from the end of the timeline", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board")
+    await page.getByTestId("board-add").click()
+
+    await page.getByTestId("board-dialog-name").fill("Rocket surgery")
+    await page.getByTestId("board-dialog-cheer").fill("To the moon!")
+    await page.getByTestId("board-dialog-accent").fill("#65c6cd")
+    await page.getByTestId("board-dialog-description").fill("The year the lounge opened.")
+    await page.getByTestId("board-dialog-start").fill("2100-09-01")
+    await page.getByTestId("board-dialog-end").fill("2101-08-31")
+
+    const written = page.waitForRequest(
+      (request) => request.method() === "POST" && /\/boards$/.test(new URL(request.url()).pathname),
+    )
+    await page.getByTestId("board-dialog-save").click()
+
+    expect(JSON.parse((await written).postData() ?? "{}")).toMatchObject({
+      number: 11,
+      name: "Rocket surgery",
+      cheer: "To the moon!",
+      accent: "#65c6cd",
+      description: "The year the lounge opened.",
+      startDate: "2100-09-01",
+      endDate: "2101-08-31",
+    })
+
+    // Somebody who has just described a board is shown it, and its stop joins the line.
+    await expect(page).toHaveURL(/\?board=11$/)
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD XI · 2100-2101")
+    await expect(page.getByTestId("board-name")).toHaveText("Rocket surgery")
+    await expect(page.getByTestId("board-node-11")).toContainText("Rocket surgery")
+  })
+
+  test("corrects a board's number, name, cheer, colour, description and dates", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=7")
+    await openEditor(page, 7)
+
+    // Opening it fills the form from the board as it stands, colour included.
+    await expect(page.getByTestId("board-dialog-name")).toHaveValue("Overcooked")
+    await expect(page.getByTestId("board-dialog-cheer")).toHaveValue("Krijg de tering!")
+    await expect(page.getByTestId("board-dialog-accent")).toHaveValue("#b00b69")
+    await expect(page.getByTestId("board-dialog-start")).toHaveValue("2023-09-01")
+    await expect(page.getByTestId("board-dialog-end")).toHaveValue("2024-08-31")
+
+    await page.getByTestId("board-dialog-number").fill("8")
+    await page.getByTestId("board-dialog-name").fill("Overcooked 2")
+    await page.getByTestId("board-dialog-cheer").fill("Krijg de tering, opnieuw!")
+    await page.getByTestId("board-dialog-accent").fill("#9100d0")
+    await page.getByTestId("board-dialog-description").fill("The year the kitchen burned.")
+    await page.getByTestId("board-dialog-start").fill("2023-09-15")
+    await page.getByTestId("board-dialog-end").fill("2024-09-14")
+
+    const saved = page.waitForRequest(
+      (request) => request.method() === "PUT" && /\/boards\/7$/.test(new URL(request.url()).pathname),
+    )
+    await page.getByTestId("board-dialog-save").click()
+
+    expect(JSON.parse((await saved).postData() ?? "{}")).toMatchObject({
+      number: 8,
+      name: "Overcooked 2",
+      cheer: "Krijg de tering, opnieuw!",
+      accent: "#9100d0",
+      description: "The year the kitchen burned.",
+      startDate: "2023-09-15",
+      endDate: "2024-09-14",
+    })
+
+    // The correction is shown where it was made: the board's number changed, so the page
+    // follows it rather than falling back to the board in office.
+    await expect(page).toHaveURL(/\?board=8$/)
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD VIII · 2023-2024")
+    await expect(page.getByTestId("board-name")).toHaveText("Overcooked 2")
+    await expect(page.getByTestId("board-cheer")).toHaveText("Krijg de tering, opnieuw!")
+    await expect(page.getByTestId("board-description")).toHaveText("The year the kitchen burned.")
+  })
+
+  test("the colour field shows a live swatch, in the ink that reads on it", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=6")
+    await openEditor(page, 6)
+
+    const swatch = page.getByTestId("board-dialog-swatch")
+    // The colour the board already carries, painted as it was chosen. It is pale, so what is
+    // drawn on it is the near-black ink.
+    await expect(page.getByTestId("board-dialog-accent")).toHaveValue("#eaa4b6")
+    expect(await styleOf(swatch, "background-color")).toBe("rgb(234, 164, 182)")
+    expect(await styleOf(swatch, "color")).toBe("rgb(28, 28, 28)")
+
+    // A deep fill takes the other ink, and the swatch follows the field as it is typed.
+    await page.getByTestId("board-dialog-accent").fill("#b00b69")
+    await expect.poll(() => styleOf(swatch, "background-color")).toBe("rgb(176, 11, 105)")
+    expect(await styleOf(swatch, "color")).toBe("rgb(244, 246, 248)")
+
+    // Left blank, the board is drawn in the association's blue — which the swatch says.
+    await page.getByTestId("board-dialog-accent").fill("")
+    await expect.poll(() => styleOf(swatch, "background-color")).toBe("rgb(51, 135, 250)")
+    expect(await styleOf(swatch, "color")).toBe("rgb(28, 28, 28)")
+  })
+
+  test("a pale colour still reads in light mode, where it is the ink that has to move", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await preferLightTheme(page)
+
+    await page.goto("/board?board=6")
+
+    const cheer = page.getByTestId("board-cheer")
+    await expect(cheer).toHaveText("Never alone!")
+    const ink = await painted(page, await styleOf(cheer, "color"))
+    const ground = await painted(page, await styleOf(page.getByTestId("board-island"), "background-color"))
+
+    // #eaa4b6 is 1.57:1 against the light ground: drawn raw the cheer would be invisible, so
+    // the ink is mixed towards the near-black the light half reads as.
+    expect(ink).not.toEqual([234, 164, 182])
+    expect(contrast(ink, ground)).toBeGreaterThanOrEqual(3)
+  })
+
+  test("a deep colour still reads in dark mode, where the ink moves the other way", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+
+    await page.goto("/board?board=7")
+
+    const cheer = page.getByTestId("board-cheer")
+    await expect(cheer).toHaveText("Krijg de tering!")
+    const ink = await painted(page, await styleOf(cheer, "color"))
+    const ground = await painted(page, await styleOf(page.getByTestId("board-island"), "background-color"))
+
+    // #b00b69 is 2.51:1 against the dark ground, so here the mix goes the other way: towards
+    // the near-white the dark half reads as. One formula, two directions.
+    expect(ink).not.toEqual([176, 11, 105])
+    expect(contrast(ink, ground)).toBeGreaterThanOrEqual(3)
+  })
+
+  test("uploads a photograph from the dialog, and shows it before it is saved", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=4")
+    await openEditor(page, 4)
+
+    await expect(page.getByTestId("board-dialog-photo-empty")).toBeVisible()
+    await choosePhoto(page)
+
+    // Shown before it is committed, so a wrong crop is visible while it can still be changed.
+    const preview = page.getByTestId("board-dialog-photo-preview")
+    await expect(preview).toHaveAttribute("src", /\/files\/public\/board-photos\/[^/]+\.webp/)
+    const chosen = (await preview.getAttribute("src"))!
+
+    const saved = page.waitForRequest(
+      (request) => request.method() === "PUT" && /\/boards\/4$/.test(new URL(request.url()).pathname),
+    )
+    await page.getByTestId("board-dialog-save").click()
+
+    const body = JSON.parse((await saved).postData() ?? "{}") as {photo?: string}
+    expect(chosen).toContain(body.photo!)
+
+    // The band a visitor reads draws it, at the widths it is stored at.
+    const band = page.getByTestId("board-photo")
+    await expect(band).toBeVisible()
+    await expect(band).toHaveAttribute("srcset", /320w/)
+  })
+
+  test("replaces a photograph that is wrong", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=7")
+    await openEditor(page, 7)
+
+    const preview = page.getByTestId("board-dialog-photo-preview")
+    await expect(preview).toHaveAttribute("src", /board7\.webp$/)
+    await expect(page.getByTestId("board-dialog-photo-replace")).toHaveCount(1)
+
+    await choosePhoto(page)
+    await expect(preview).not.toHaveAttribute("src", /board7\.webp$/)
+
+    const saved = page.waitForRequest(
+      (request) => request.method() === "PUT" && /\/boards\/7$/.test(new URL(request.url()).pathname),
+    )
+    await page.getByTestId("board-dialog-save").click()
+
+    const body = JSON.parse((await saved).postData() ?? "{}") as {photo?: string}
+    expect(body.photo).not.toBe("board-photos/board7.webp")
+    await expect(page.getByTestId("board-photo")).not.toHaveAttribute("src", /board7\.webp$/)
+  })
+
+  test("offers a photograph in the band of a board that has none", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=4")
+
+    // Half the history has no photograph, so the way to one is in the band standing in for it.
+    const add = page.getByTestId("board-band-add-photo")
+    await expect(add).toBeVisible()
+    await add.click()
+
+    await expect(page.getByTestId("board-dialog")).toBeVisible()
+    await expect(page.getByTestId("board-dialog-number")).toHaveValue("4")
+    await expect(page.getByTestId("board-dialog-photo-empty")).toBeVisible()
+
+    // A board that has one is corrected in the dialog, beside the crop, rather than here.
+    await page.goto("/board?board=7")
+    await expect(page.getByTestId("board-photo")).toBeVisible()
+    await expect(page.getByTestId("board-band-add-photo")).toHaveCount(0)
+  })
+
+  test("cancelling leaves the board exactly as it was, picture and all", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    let writes = 0
+    await page.route("**/boards/**", async (route) => {
+      if (route.request().method() !== "GET") writes += 1
+      await route.fallback()
+    })
+
+    await page.goto("/board?board=7")
+    await openEditor(page, 7)
+
+    await page.getByTestId("board-dialog-name").fill("A name nobody keeps")
+    await page.getByTestId("board-dialog-accent").fill("#000000")
+    await choosePhoto(page)
+    await expect(page.getByTestId("board-dialog-photo-preview")).not.toHaveAttribute("src", /board7/)
+
+    await page.getByTestId("board-dialog-cancel").click()
+    await expect(page.getByTestId("board-dialog")).toBeHidden()
+
+    // Nothing was written: the bytes are in storage and the board is untouched, which is what
+    // holding a picture until the save is for.
+    expect(writes).toBe(0)
+    await expect(page.getByTestId("board-name")).toHaveText("Overcooked")
+    await expect(page.getByTestId("board-photo")).toHaveAttribute("src", /board7\.webp$/)
+
+    // And reopening it shows the board rather than what was abandoned.
+    await openEditor(page, 7)
+    await expect(page.getByTestId("board-dialog-name")).toHaveValue("Overcooked")
+    await expect(page.getByTestId("board-dialog-accent")).toHaveValue("#b00b69")
+    await expect(page.getByTestId("board-dialog-photo-preview")).toHaveAttribute("src", /board7\.webp$/)
+  })
+
+  test("refuses to remove a board that still has seats, and says how many are in the way", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board")
+    await openEditor(page, 9)
+
+    await page.getByTestId("board-dialog-remove").click()
+    const asking = page.getByTestId("board-remove-dialog")
+    await expect(asking).toBeVisible()
+    // Asked first, because a board's seats are nine people's place in the history.
+    await expect(asking.getByTestId("confirm-question")).toContainText("holds 3 seats")
+
+    await asking.getByTestId("confirm-go").click()
+
+    // The api refused it and the refusal is what a reader is shown, in the api's own count.
+    await expect(asking.getByTestId("confirm-failure")).toContainText("still has 3 seats on it")
+    await expect(asking.getByTestId("confirm-failure")).toContainText("Remove the seats first")
+    await expect(page.getByTestId("board-node-9")).toHaveCount(1)
+  })
+
+  test("removes a board nobody is seated on", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=10")
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD X · 2099-2100")
+    await openEditor(page, 10)
+
+    await page.getByTestId("board-dialog-remove").click()
+    const asking = page.getByTestId("board-remove-dialog")
+    await expect(asking.getByTestId("confirm-question")).toContainText("holds no seats")
+
+    const removed = page.waitForRequest(
+      (request) => request.method() === "DELETE" && /\/boards\/10$/.test(new URL(request.url()).pathname),
+    )
+    await asking.getByTestId("confirm-go").click()
+    await removed
+
+    // Its stop goes with it, the url stops naming it, and the page falls back to the board in
+    // office rather than to a blank page.
+    await expect(page.getByTestId("board-node-10")).toHaveCount(0)
+    await expect(page).toHaveURL(/\/board$/)
+    await expect(page.getByTestId("board-eyebrow")).toHaveText("BOARD IX · 2025-2026")
+  })
+
+  test("a failed save says why", async ({page}) => {
+    await installApiMocks(page, {boards: history})
+    await loginAsBoard(page.context())
+
+    await page.goto("/board?board=4")
+    await openEditor(page, 4)
+
+    // A board's number is its identity, and board IX holds this one.
+    await page.getByTestId("board-dialog-number").fill("9")
+    await page.getByTestId("board-dialog-save").click()
+
+    await expect(page.getByTestId("board-dialog-failure")).toContainText("Board 9 already exists")
+    // The dialog stands with what was typed, so the number can be corrected without retyping
+    // the rest of the board.
+    await expect(page.getByTestId("board-dialog")).toBeVisible()
+    await expect(page.getByTestId("board-dialog-number")).toHaveValue("9")
+  })
+})
diff --git a/services/frontend/tests/e2e/mocks.ts b/services/frontend/tests/e2e/mocks.ts
index f3a86ee87..ad9f669cb 100644
--- a/services/frontend/tests/e2e/mocks.ts
+++ b/services/frontend/tests/e2e/mocks.ts
@@ -195,6 +195,8 @@ const DIRECTORY_OF: Record<string, string> = {
   ROSTER_ICON: "roster-icons",
   GAME_ICON: "game-icons",
   GAME_BANNER: "game-banners",
+  BOARD_PHOTO: "board-photos",
+  BOARD_PORTRAIT: "board-portraits",
 }
 
 /**
@@ -211,6 +213,10 @@ const LADDER_OF: Record<string, {width: number; height: number; widths: number[]
   TEAM_ICON: {width: 256, height: 256, widths: [128, 256]},
   GAME_ICON: {width: 256, height: 256, widths: [128, 256]},
   ROSTER_ICON: {width: 256, height: 256, widths: [128, 256]},
+  // A board's group photograph is a game banner's twin, at the ceiling FileType gives it.
+  BOARD_PHOTO: {width: 2560, height: 1440, widths: [320, 640, 960, 1280, 1920, 2560]},
+  // A portrait is taller than it is wide, and its ladder tops out well below an upload.
+  BOARD_PORTRAIT: {width: 640, height: 960, widths: [160, 320, 640]},
 }
 
 type MockImage = {
@@ -339,6 +345,45 @@ export async function installApiMocks(page: Page, fixtures: Fixtures = {}) {
   /** The picture a save names, or nothing where the save names none. */
   const pictureNamed = (picture: unknown): MockImage | null =>
     (typeof picture === "string" ? stored.get(picture) ?? null : null)
+  /**
+   * Boards written down, corrected and removed during a test, so a page that reads again is
+   * answered the way the api would rather than told the history never changed.
+   */
+  const boardsMade: Array<Record<string, unknown>> = []
+  const boardsEdited = new Map<number, Record<string, unknown>>()
+  const boardsGone = new Set<number>()
+  let nextBoardId = 700
+  /** Every board as it now stands: the fixtures, corrected, plus whatever was added. */
+  const boardsNow = (): Array<Record<string, unknown>> =>
+    [...(fixtures.boards ?? boardFixtures), ...boardsMade]
+      .filter(one => !boardsGone.has(Number(one.id)))
+      .map(one => ({...one, ...(boardsEdited.get(Number(one.id)) ?? {})}))
+  /**
+   * A board as the api answers with one after a write.
+   *
+   * A write replaces every field the way the api's own does, so a field the save left out is
+   * cleared rather than kept — the case a merge would quietly get wrong. The save named where
+   * its photograph is stored and the answer carries the picture itself, so the path is
+   * resolved here exactly as the api resolves it; naming none clears the photograph.
+   */
+  const boardWritten = (
+    base: Record<string, unknown>,
+    body: Record<string, unknown>,
+  ): Record<string, unknown> => ({
+    ...base,
+    ...body,
+    name: body.name ?? null,
+    // `NOT NULL` and nothing reads it: filled from the name, or from the number where a board
+    // has none, for a write that carries no candidate of its own.
+    candidate: body.candidate ?? body.name ?? `Board ${body.number}`,
+    cheer: body.cheer ?? null,
+    accent: body.accent ?? null,
+    description: body.description ?? null,
+    endDate: body.endDate ?? null,
+    image: body.image ?? null,
+    photo: pictureNamed(body.photo),
+    updatedAt: "2026-01-02T00:00:00Z",
+  })
   /**
    * The line-up of the seeded team, as the admin reads and writes it. The public page builds
    * that team's members from it, so an edit here is visible there — which is the whole of
@@ -927,18 +972,58 @@ export async function installApiMocks(page: Page, fixtures: Fixtures = {}) {
       ])
     }
     if (method === "GET" && path === "/boards") {
-      return fulfillJson(route, fixtures.boards ?? boardFixtures)
+      return fulfillJson(route, boardsNow())
     }
     if (method === "GET" && /^\/boards\/\d+$/.test(path)) {
       const id = Number(path.split("/")[2])
-      const board = (fixtures.boards ?? boardFixtures).find((b) => b.id === id)
+      const board = boardsNow().find((b) => Number(b.id) === id)
       return fulfillJson(route, board ?? {}, board ? 200 : 404)
     }
-    if (method === "PUT" && /^\/boards\/\d+$/.test(path)) {
-      const id = Number(path.split("/")[2])
+    // A board's number is its identity, so the api refuses a number another board holds and
+    // says which one it is — the refusal a dialog has to be able to report.
+    if ((method === "PUT" || method === "POST") && /^\/boards(\/\d+)?$/.test(path)) {
+      const id = method === "PUT" ? Number(path.split("/")[2]) : null
       const body = JSON.parse(request.postData() ?? "{}") as Record<string, unknown>
-      const board = (fixtures.boards ?? boardFixtures).find((b) => b.id === id)
-      return fulfillJson(route, {...(board ?? {}), ...body, id, version: 1})
+      const taken = boardsNow().some(
+        (b) => Number(b.number) === Number(body.number) && Number(b.id) !== id,
+      )
+      if (taken) {
+        return fulfillJson(route, {
+          title: "Conflict",
+          detail: `Board ${body.number} already exists`,
+        }, 409)
+      }
+      if (id != null) {
+        const board = boardsNow().find((b) => Number(b.id) === id)
+        const saved = {...boardWritten(board ?? {}, body), id, version: 1}
+        boardsEdited.set(id, saved)
+        return fulfillJson(route, saved)
+      }
+      nextBoardId += 1
+      const made = boardWritten({
+        id: nextBoardId,
+        members: [],
+        version: 0,
+        createdAt: "2026-01-02T00:00:00Z",
+      }, body)
+      boardsMade.push(made)
+      return fulfillJson(route, made, 201)
+    }
+    if (method === "DELETE" && /^\/boards\/\d+$/.test(path)) {
+      const id = Number(path.split("/")[2])
+      const board = boardsNow().find((b) => Number(b.id) === id)
+      const members = board?.members
+      const seats = Array.isArray(members) ? members.length : 0
+      if (seats > 0) {
+        return fulfillJson(route, {
+          detail: "That board cannot be removed.",
+          code: "BoardHoldsSeats",
+          number: board?.number,
+          seats,
+        }, 409)
+      }
+      boardsGone.add(id)
+      return route.fulfill({status: 204, body: ""})
     }
     if (method === "POST" && /^\/boards\/\d+\/members$/.test(path)) {
       const body = JSON.parse(request.postData() ?? "{}") as Record<string, unknown>
diff --git a/services/frontend/tests/unit/domains/boards/accent.test.ts b/services/frontend/tests/unit/domains/boards/accent.test.ts
new file mode 100644
index 000000000..51f135b61
--- /dev/null
+++ b/services/frontend/tests/unit/domains/boards/accent.test.ts
@@ -0,0 +1,62 @@
+import {describe, expect, it} from "vitest"
+import {BOARD_BLUE, inkOnAccent} from "@/domains/boards/accent"
+
+/**
+ * Which ink reads on a board's colour, read against the colours the boards actually carry.
+ *
+ * Four of the ten have one recorded and they split two pale and two deep, so between them they
+ * catch a rule that only ever answers one way. The contrast ratios below are the ones that made
+ * the pairing: every accent clears 4.5:1 under the ink this answers with, and none of them
+ * clears 3:1 under the other.
+ */
+const ACCENTS = {
+  /** Board VI, Don't starve together. 2.00:1 under white, 9.60:1 under near-black. */
+  pink: "#eaa4b6",
+  /** Board VII, Overcooked. 6.78:1 under white, 2.84:1 under near-black. */
+  magenta: "#b00b69",
+  /** Board VIII, Wasted. 6.74:1 under white, 2.85:1 under near-black. */
+  purple: "#9100d0",
+  /** Board X, Rainbow road, whose colour fills a whole band: it has no photograph. */
+  cyan: "#65c6cd",
+} as const
+
+describe("inkOnAccent", () => {
+  it("puts dark ink on a pale fill", () => {
+    expect(inkOnAccent(ACCENTS.pink)).toBe("dark")
+    expect(inkOnAccent(ACCENTS.cyan)).toBe("dark")
+  })
+
+  it("puts light ink on a deep fill", () => {
+    expect(inkOnAccent(ACCENTS.magenta)).toBe("light")
+    expect(inkOnAccent(ACCENTS.purple)).toBe("light")
+  })
+
+  it("answers for the association's blue, which is what a board with no colour is drawn in", () => {
+    // 3.51:1 under white against 5.48:1 under near-black, so the blue takes dark ink too.
+    expect(inkOnAccent(BOARD_BLUE)).toBe("dark")
+    expect(inkOnAccent(null)).toBe(inkOnAccent(BOARD_BLUE))
+    expect(inkOnAccent("")).toBe(inkOnAccent(BOARD_BLUE))
+    expect(inkOnAccent("   ")).toBe(inkOnAccent(BOARD_BLUE))
+  })
+
+  it("reads the ends of the scale the way they are drawn", () => {
+    expect(inkOnAccent("#ffffff")).toBe("dark")
+    expect(inkOnAccent("#000000")).toBe("light")
+  })
+
+  it("reads a three-digit colour, which is how a colour is often written down", () => {
+    expect(inkOnAccent("#fff")).toBe(inkOnAccent("#ffffff"))
+    expect(inkOnAccent("#000")).toBe(inkOnAccent("#000000"))
+  })
+
+  it("ignores an alpha riding along, because a fill is painted over the page", () => {
+    expect(inkOnAccent("#eaa4b6ff")).toBe("dark")
+  })
+
+  it("falls back to the blue's answer for a colour it cannot read", () => {
+    // A free string is what the column holds, so the notation is not this rule's to insist on.
+    for (const written of ["rebeccapurple", "rgb(234 164 182)", "#12", "not a colour"]) {
+      expect(inkOnAccent(written)).toBe(inkOnAccent(BOARD_BLUE))
+    }
+  })
+})
diff --git a/services/frontend/tests/unit/domains/boards/numbering.test.ts b/services/frontend/tests/unit/domains/boards/numbering.test.ts
new file mode 100644
index 000000000..31fecadf4
--- /dev/null
+++ b/services/frontend/tests/unit/domains/boards/numbering.test.ts
@@ -0,0 +1,31 @@
+import {describe, expect, it} from "vitest"
+import {nextBoardNumber} from "@/domains/boards/numbering"
+
+/** The ten boards as they are recorded, which is the case the suggestion exists for. */
+const history = Array.from({length: 10}, (_, index) => ({number: index + 1}))
+
+describe("nextBoardNumber", () => {
+  it("suggests the eleventh board after the ten there are", () => {
+    expect(nextBoardNumber(history)).toBe(11)
+  })
+
+  it("suggests the first board where none is recorded", () => {
+    expect(nextBoardNumber([])).toBe(1)
+  })
+
+  it("goes by the highest number rather than by the count", () => {
+    // A board nobody wrote down, or one removed since: counting would suggest a taken number,
+    // and the api refuses a number twice over.
+    expect(nextBoardNumber([{number: 1}, {number: 2}, {number: 9}])).toBe(10)
+  })
+
+  it("reads the boards in whatever order they arrive in", () => {
+    // The adapter answers newest first, which is the order the page holds them in.
+    expect(nextBoardNumber([{number: 10}, {number: 9}, {number: 1}])).toBe(11)
+  })
+
+  it("passes over a number that is not a place in the line", () => {
+    expect(nextBoardNumber([{number: 4}, {number: Number.NaN}])).toBe(5)
+    expect(nextBoardNumber([{number: -3}])).toBe(1)
+  })
+})
diff --git a/services/frontend/tests/unit/pages/Board.test.ts b/services/frontend/tests/unit/pages/Board.test.ts
index 1564ea328..1e008d131 100644
--- a/services/frontend/tests/unit/pages/Board.test.ts
+++ b/services/frontend/tests/unit/pages/Board.test.ts
@@ -78,7 +78,10 @@ interface Page {
 }
 
 const mountPage = async () => {
-  const wrapper = shallowMount(Board)
+  // The page asks the store whether the reader may correct the history, so a mount answers.
+  const wrapper = shallowMount(Board, {
+    global: {provide: {store: {getters: {isBoard: false}}}},
+  })
   await flushPromises()
   await nextTick()
   return wrapper.vm as never as Page