diff --git a/frontend/src/app/AuthenticatedApp.tsx b/frontend/src/app/AuthenticatedApp.tsx
index aeaa4bc..c6df1d8 100644
--- a/frontend/src/app/AuthenticatedApp.tsx
+++ b/frontend/src/app/AuthenticatedApp.tsx
@@ -5,7 +5,7 @@ import { AppFooter } from '../components/layout/AppFooter'
 import { GoGuessHeader } from '../components/layout/GoGuessHeader'
 import { WorkspaceUtilities } from '../components/layout/WorkspaceUtilities'
 import { NotFound } from '../components/ui/NotFound'
-import { CalendarPage, InboxPage, ScheduledInterviewPage } from '../features/interviews'
+import { InboxPage, ScheduledInterviewPage } from '../features/interviews'
 import { CreateJobPage, JobDetailPage, JobsPage } from '../features/jobs'
 import {
   CreateParticipantPage,
@@ -13,7 +13,7 @@ import {
   ParticipantsPage,
 } from '../features/participants'
 import { QuestionLibraryPage, QuestionPage } from '../features/questions'
-import { ProfilePage, UsersPage } from '../features/users'
+import {CalendarPage, ProfilePage, UsersPage} from '../features/users'
 
 export function AuthenticatedApp({ onLogout }: { onLogout: () => void }) {
   const [open, setOpen] = useState(false)
diff --git a/frontend/src/components/actions/errorMessage.ts b/frontend/src/components/actions/errorMessage.ts
index c2d7205..e2a6b9b 100644
--- a/frontend/src/components/actions/errorMessage.ts
+++ b/frontend/src/components/actions/errorMessage.ts
@@ -5,3 +5,9 @@ export function errorMessage(error: unknown) {
     ? error.message
     : 'Something went wrong'
 }
+
+export function message(error: unknown) {
+  return error instanceof ApiError || error instanceof Error
+      ? error.message
+      : 'Something went wrong'
+}
\ No newline at end of file
diff --git a/frontend/src/components/actions/index.ts b/frontend/src/components/actions/index.ts
index 0965917..e1d29bd 100644
--- a/frontend/src/components/actions/index.ts
+++ b/frontend/src/components/actions/index.ts
@@ -1,4 +1,4 @@
 export { useAuthSession } from './Account'
 export { ErrorAlert } from './ErrorAlert'
-export { errorMessage } from './errorMessage'
+export { errorMessage, message } from './errorMessage'
 export { Loading } from './Loading'
diff --git a/frontend/src/components/layout/SideBar.tsx b/frontend/src/components/layout/SideBar.tsx
index 16aa999..964bf78 100644
--- a/frontend/src/components/layout/SideBar.tsx
+++ b/frontend/src/components/layout/SideBar.tsx
@@ -43,7 +43,6 @@ export function SideBar({
           icon={<CircleHelp size={20} />}
           close={close}
         />
-        <NavItem to="/calendar" label="Calendar" icon={<CalendarDays size={20} />} close={close} />
         <NavItem to="/users" label="Users" icon={<UserRound size={20} />} close={close} />
       </nav>
       <div className="sidebar-bottom">
diff --git a/frontend/src/components/layout/WorkspaceUtilities.tsx b/frontend/src/components/layout/WorkspaceUtilities.tsx
index fcdd84a..e9b3815 100644
--- a/frontend/src/components/layout/WorkspaceUtilities.tsx
+++ b/frontend/src/components/layout/WorkspaceUtilities.tsx
@@ -1,21 +1,25 @@
-import { Inbox } from 'lucide-react'
-import { NavLink } from 'react-router-dom'
-import type { User } from '../../types'
+import {CalendarDays, Inbox, Mail} from 'lucide-react'
+import {NavLink} from 'react-router-dom'
+import type {User} from '../../types'
 
-export function WorkspaceUtilities({ user }: { user: User | null }) {
-  const profileLabel = user?.displayName || user?.email || 'Profile'
-  return (
-    <nav className="workspace-utilities" aria-label="Account navigation">
-      <NavLink className="utility-link" to="/inbox">
-        <Inbox size={18} aria-hidden="true" />
-        <span>Inbox</span>
-      </NavLink>
-      <NavLink className="utility-link profile-utility" to="/profile">
-        <span className="avatar tiny" aria-hidden="true">
-          {profileLabel.slice(0, 2).toUpperCase()}
-        </span>
-        <span>{profileLabel}</span>
-      </NavLink>
-    </nav>
-  )
+export function WorkspaceUtilities({user}: { user: User | null }) {
+    const profileLabel = user?.displayName || user?.email || 'Profile'
+    return (
+        <nav className="workspace-utilities" aria-label="Account navigation">
+            <NavLink className="utility-link" to="/inbox">
+                <Mail size={18} aria-hidden="true"/>
+                <span>Invitations</span>
+            </NavLink>
+            <NavLink className="utility-link" to="/calendar">
+                <CalendarDays size={18} aria-hidden="true"/>
+                <span>Calendar</span>
+            </NavLink>
+            <NavLink className="utility-link profile-utility" to="/profile">
+                <span className="avatar tiny" aria-hidden="true">
+                  {profileLabel.slice(0, 2).toUpperCase()}
+                </span>
+                <span>{profileLabel}</span>
+            </NavLink>
+        </nav>
+    )
 }
diff --git a/frontend/src/components/ui/PageHeader.tsx b/frontend/src/components/ui/PageHeader.tsx
index 0358c41..6333a21 100644
--- a/frontend/src/components/ui/PageHeader.tsx
+++ b/frontend/src/components/ui/PageHeader.tsx
@@ -15,7 +15,6 @@ export function PageHeader({
     <header className="page-header">
       <div>
         <span className="eyebrow">{eyebrow}</span>
-        <h1>{title}</h1>
         {description && <p>{description}</p>}
       </div>
       {action}
diff --git a/frontend/src/config/navigation.ts b/frontend/src/config/navigation.ts
index 1b608ae..a3457ae 100644
--- a/frontend/src/config/navigation.ts
+++ b/frontend/src/config/navigation.ts
@@ -15,13 +15,13 @@ export const footerLinkGroups: FooterLinkGroup[] = [
       { label: 'Jobs', href: '/jobs' },
       { label: 'Participants', href: '/participants' },
       { label: 'Question library', href: '/questions' },
-      { label: 'Calendar', href: '/calendar' },
     ],
   },
   {
     title: 'Useful links',
     links: [
       { label: 'Your inbox', href: '/inbox' },
+      { label: 'Calendar', href: '/calendar' },
       { label: 'Your profile', href: '/profile' },
       { label: 'Interview team', href: '/users' },
     ],
diff --git a/frontend/src/features/interviews/index.ts b/frontend/src/features/interviews/index.ts
index f1f3b98..db7eaa8 100644
--- a/frontend/src/features/interviews/index.ts
+++ b/frontend/src/features/interviews/index.ts
@@ -1,2 +1,2 @@
-export { CalendarPage, InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
+export { InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
 export { ScheduleInterviewForm } from './components/ScheduleInterviewForm'
diff --git a/frontend/src/features/interviews/pages.tsx b/frontend/src/features/interviews/pages.tsx
index 5feab26..3fdadf0 100644
--- a/frontend/src/features/interviews/pages.tsx
+++ b/frontend/src/features/interviews/pages.tsx
@@ -1,453 +1,392 @@
-import { Check, Copy, UsersRound, X } from 'lucide-react'
-import { type FormEvent, useEffect, useMemo, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
-import { api, ApiError } from '../../api/client'
-import type { ParticipantMeeting, ScheduledInterview } from '../../types'
-import { ErrorAlert, Loading } from '../../components/ui/AsyncState'
-import { DateAndPlace, InterviewCard } from './components/InterviewCard'
-
-function message(error: unknown) {
-  return error instanceof ApiError || error instanceof Error
-    ? error.message
-    : 'Something went wrong'
-}
+import {Check, Copy, UsersRound, X} from 'lucide-react'
+import {type FormEvent, useEffect, useState} from 'react'
+import {Link, useParams} from 'react-router-dom'
+import {api} from '../../api/client'
+import type {ParticipantMeeting, ScheduledInterview} from '../../types'
+import {ErrorAlert, Loading} from '../../components/ui/AsyncState'
+import {DateAndPlace, InterviewCard} from './components/InterviewCard'
+import {message} from "../../components/actions";
 
 export function InboxPage() {
-  const [items, setItems] = useState<ScheduledInterview[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
+    const [items, setItems] = useState<ScheduledInterview[]>([])
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    void api.inbox
-      .list()
-      .then(setItems)
-      .catch((value) => setError(message(value)))
-      .finally(() => setLoading(false))
-  }, [])
+    useEffect(() => {
+        void api.inbox
+            .list()
+            .then(setItems)
+            .catch((value) => setError(message(value)))
+            .finally(() => setLoading(false))
+    }, [])
 
-  async function respond(id: number, status: 'accepted' | 'declined') {
-    setError('')
-    try {
-      const updated = await api.inbox.respond(id, status)
-      setItems((current) => current.map((item) => (item.id === id ? updated : item)))
-    } catch (value) {
-      setError(message(value))
+    async function respond(id: number, status: 'accepted' | 'declined') {
+        setError('')
+        try {
+            const updated = await api.inbox.respond(id, status)
+            setItems((current) => current.map((item) => (item.id === id ? updated : item)))
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }
 
-  return (
-    <>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Invitations</span>
-          <h1>Inbox</h1>
-          <p>Respond to interview invitations assigned to you.</p>
-        </div>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      {loading ? (
-        <Loading />
-      ) : (
-        <section className="meeting-list">
-          {items.map((item) => (
-            <InterviewCard interview={item} key={item.id}>
-              <div className="meeting-actions">
-                <button
-                  className="button primary"
-                  type="button"
-                  onClick={() => void respond(item.id, 'accepted')}
-                >
-                  <Check size={17} /> Accept
-                </button>
-                <button
-                  className="button secondary danger"
-                  type="button"
-                  onClick={() => void respond(item.id, 'declined')}
-                >
-                  <X size={17} /> Decline
-                </button>
-              </div>
-            </InterviewCard>
-          ))}
-          {!items.length && (
-            <div className="card empty-state">
-              <h3>Inbox zero</h3>
-              <p>You have no interview invitations.</p>
-            </div>
-          )}
-        </section>
-      )}
-    </>
-  )
+    return (
+        <>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Invitations</span>
+                    <h1>Inbox</h1>
+                    <p>Respond to interview invitations assigned to you.</p>
+                </div>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            {loading ? (
+                <Loading/>
+            ) : (
+                <section className="meeting-list">
+                    {items.map((item) => (
+                        <InterviewCard interview={item} key={item.id}>
+                            <div className="meeting-actions">
+                                <button
+                                    className="button primary"
+                                    type="button"
+                                    onClick={() => void respond(item.id, 'accepted')}
+                                >
+                                    <Check size={17}/> Accept
+                                </button>
+                                <button
+                                    className="button secondary danger"
+                                    type="button"
+                                    onClick={() => void respond(item.id, 'declined')}
+                                >
+                                    <X size={17}/> Decline
+                                </button>
+                            </div>
+                        </InterviewCard>
+                    ))}
+                    {!items.length && (
+                        <div className="card empty-state">
+                            <h3>Inbox zero</h3>
+                            <p>You have no interview invitations.</p>
+                        </div>
+                    )}
+                </section>
+            )}
+        </>
+    )
 }
 
-export function CalendarPage() {
-  const [items, setItems] = useState<ScheduledInterview[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
-  useEffect(() => {
-    void api
-      .calendar()
-      .then(setItems)
-      .catch((value) => setError(message(value)))
-      .finally(() => setLoading(false))
-  }, [])
-  const groups = useMemo(() => {
-    return [...items]
-      .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
-      .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
-        const key = new Date(item.startsAt).toLocaleDateString(undefined, {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        })
-        ;(result[key] ??= []).push(item)
-        return result
-      }, {})
-  }, [items])
-  return (
-    <>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Schedule</span>
-          <h1>Calendar</h1>
-          <p>Your accepted and organized interviews, grouped by date.</p>
-        </div>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      {loading ? (
-        <Loading />
-      ) : (
-        Object.entries(groups).map(([date, interviews]) => (
-          <section className="calendar-day" key={date}>
-            <h2>{date}</h2>
-            <div className="meeting-list">
-              {interviews.map((item) => (
-                <InterviewCard interview={item} key={item.id}>
-                  <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
-                    Open session
-                  </Link>
-                </InterviewCard>
-              ))}
-            </div>
-          </section>
-        ))
-      )}
-    </>
-  )
-}
 
 export function ScheduledInterviewPage() {
-  const id = Number(useParams().id)
-  const [interview, setInterview] = useState<ScheduledInterview>()
-  const [document, setDocument] = useState('')
-  const [notes, setNotes] = useState<ScheduledInterview['notes']>([])
-  const [error, setError] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [linkCopied, setLinkCopied] = useState(false)
-  const loadedInterviewID = interview?.id
+    const id = Number(useParams().id)
+    const [interview, setInterview] = useState<ScheduledInterview>()
+    const [document, setDocument] = useState('')
+    const [notes, setNotes] = useState<ScheduledInterview['notes']>([])
+    const [error, setError] = useState('')
+    const [saving, setSaving] = useState(false)
+    const [linkCopied, setLinkCopied] = useState(false)
+    const loadedInterviewID = interview?.id
 
-  useEffect(() => {
-    let active = true
-    void Promise.all([api.scheduledInterviews.get(id), api.scheduledInterviews.notes(id)])
-      .then(([item, loadedNotes]) => {
-        if (!active) return
-        setInterview(item)
-        setDocument(item.sharedDocument)
-        setNotes(loadedNotes)
-      })
-      .catch((value) => active && setError(message(value)))
-    return () => {
-      active = false
+    useEffect(() => {
+        let active = true
+        void Promise.all([api.scheduledInterviews.get(id), api.scheduledInterviews.notes(id)])
+            .then(([item, loadedNotes]) => {
+                if (!active) return
+                setInterview(item)
+                setDocument(item.sharedDocument)
+                setNotes(loadedNotes)
+            })
+            .catch((value) => active && setError(message(value)))
+        return () => {
+            active = false
+        }
+    }, [id])
+
+    useEffect(() => {
+        if (!loadedInterviewID) return
+        const controller = new AbortController()
+        void api.scheduledInterviews
+            .subscribe(
+                id,
+                (event) => {
+                    if (event.type === 'note.created') {
+                        setNotes((current) =>
+                            current.some((item) => item.id === event.note.id)
+                                ? current
+                                : [...current, event.note],
+                        )
+                    }
+                    if (event.type === 'document.updated') {
+                        setDocument(event.sharedDocument)
+                        setInterview((current) =>
+                            current ? {...current, sharedDocument: event.sharedDocument} : current,
+                        )
+                    }
+                },
+                controller.signal,
+                (value) => setError(message(value)),
+            )
+            .catch((value) => {
+                if (!controller.signal.aborted) setError(message(value))
+            })
+        return () => controller.abort()
+    }, [id, loadedInterviewID])
+
+    async function setStatus(status: string) {
+        setError('')
+        try {
+            setInterview(await api.scheduledInterviews.setStatus(id, status))
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }, [id])
 
-  useEffect(() => {
-    if (!loadedInterviewID) return
-    const controller = new AbortController()
-    void api.scheduledInterviews
-      .subscribe(
-        id,
-        (event) => {
-          if (event.type === 'note.created') {
+    async function saveDocument(event: FormEvent) {
+        event.preventDefault()
+        setSaving(true)
+        setError('')
+        try {
+            setInterview(await api.scheduledInterviews.updateDocument(id, document))
+        } catch (value) {
+            setError(message(value))
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    async function addNote(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault()
+        const form = event.currentTarget
+        const body = String(new FormData(form).get('body')).trim()
+        if (!body) return
+        try {
+            const note = await api.scheduledInterviews.addNote(id, body)
             setNotes((current) =>
-              current.some((item) => item.id === event.note.id)
-                ? current
-                : [...current, event.note],
+                current.some((item) => item.id === note.id) ? current : [...current, note],
             )
-          }
-          if (event.type === 'document.updated') {
-            setDocument(event.sharedDocument)
-            setInterview((current) =>
-              current ? { ...current, sharedDocument: event.sharedDocument } : current,
-            )
-          }
-        },
-        controller.signal,
-        (value) => setError(message(value)),
-      )
-      .catch((value) => {
-        if (!controller.signal.aborted) setError(message(value))
-      })
-    return () => controller.abort()
-  }, [id, loadedInterviewID])
-
-  async function setStatus(status: string) {
-    setError('')
-    try {
-      setInterview(await api.scheduledInterviews.setStatus(id, status))
-    } catch (value) {
-      setError(message(value))
+            form.reset()
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }
 
-  async function saveDocument(event: FormEvent) {
-    event.preventDefault()
-    setSaving(true)
-    setError('')
-    try {
-      setInterview(await api.scheduledInterviews.updateDocument(id, document))
-    } catch (value) {
-      setError(message(value))
-    } finally {
-      setSaving(false)
+    async function copyParticipantLink(url: string) {
+        setError('')
+        try {
+            await navigator.clipboard.writeText(url)
+            setLinkCopied(true)
+        } catch {
+            setError('Could not copy the participant interview link')
+        }
     }
-  }
 
-  async function addNote(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    const form = event.currentTarget
-    const body = String(new FormData(form).get('body')).trim()
-    if (!body) return
-    try {
-      const note = await api.scheduledInterviews.addNote(id, body)
-      setNotes((current) =>
-        current.some((item) => item.id === note.id) ? current : [...current, note],
-      )
-      form.reset()
-    } catch (value) {
-      setError(message(value))
-    }
-  }
-
-  async function copyParticipantLink(url: string) {
-    setError('')
-    try {
-      await navigator.clipboard.writeText(url)
-      setLinkCopied(true)
-    } catch {
-      setError('Could not copy the participant interview link')
-    }
-  }
-
-  if (!interview && !error) return <Loading />
-  if (!interview) return <ErrorAlert error={error} />
-  return (
-    <>
-      <Link className="back-link" to="/calendar">
-        ← Calendar
-      </Link>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Interviewer session</span>
-          <h1>{interview.participantName}</h1>
-          <p>{interview.jobTitle}</p>
-        </div>
-        <span className={`status status-${interview.status}`}>{interview.status}</span>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      <DateAndPlace interview={interview} />
-      <div className="session-actions">
-        <button
-          className="button secondary"
-          type="button"
-          onClick={() => void copyParticipantLink(interview.candidateUrl)}
-          aria-label="Copy participant interview link"
-        >
-          {linkCopied ? <Check size={17} /> : <Copy size={17} />}
-          {linkCopied ? 'Link copied' : 'Copy participant link'}
-        </button>
-        {interview.status !== 'started' && interview.status !== 'completed' && (
-          <button
-            className="button primary"
-            type="button"
-            onClick={() => void setStatus('started')}
-          >
-            Start interview
-          </button>
-        )}
-        {interview.status === 'started' && (
-          <button
-            className="button primary"
-            type="button"
-            onClick={() => void setStatus('completed')}
-          >
-            Complete interview
-          </button>
-        )}
-      </div>
-      <div className="session-grid">
-        <form className="card shared-document" onSubmit={saveDocument}>
-          <div className="section-heading">
-            <div>
-              <span className="eyebrow">Visible to candidate</span>
-              <h2>Shared documentation</h2>
+    if (!interview && !error) return <Loading/>
+    if (!interview) return <ErrorAlert error={error}/>
+    return (
+        <>
+            <Link className="back-link" to="/calendar">
+                ← Calendar
+            </Link>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Interviewer session</span>
+                    <h1>{interview.participantName}</h1>
+                    <p>{interview.jobTitle}</p>
+                </div>
+                <span className={`status status-${interview.status}`}>{interview.status}</span>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            <DateAndPlace interview={interview}/>
+            <div className="session-actions">
+                <button
+                    className="button secondary"
+                    type="button"
+                    onClick={() => void copyParticipantLink(interview.candidateUrl)}
+                    aria-label="Copy participant interview link"
+                >
+                    {linkCopied ? <Check size={17}/> : <Copy size={17}/>}
+                    {linkCopied ? 'Link copied' : 'Copy participant link'}
+                </button>
+                {interview.status !== 'started' && interview.status !== 'completed' && (
+                    <button
+                        className="button primary"
+                        type="button"
+                        onClick={() => void setStatus('started')}
+                    >
+                        Start interview
+                    </button>
+                )}
+                {interview.status === 'started' && (
+                    <button
+                        className="button primary"
+                        type="button"
+                        onClick={() => void setStatus('completed')}
+                    >
+                        Complete interview
+                    </button>
+                )}
             </div>
-          </div>
-          <div className="form-section">
+            <div className="session-grid">
+                <form className="card shared-document" onSubmit={saveDocument}>
+                    <div className="section-heading">
+                        <div>
+                            <span className="eyebrow">Visible to candidate</span>
+                            <h2>Shared documentation</h2>
+                        </div>
+                    </div>
+                    <div className="form-section">
             <textarea
-              aria-label="Shared documentation"
-              rows={18}
-              value={document}
-              onChange={(event) => setDocument(event.target.value)}
+                aria-label="Shared documentation"
+                rows={18}
+                value={document}
+                onChange={(event) => setDocument(event.target.value)}
             />
-            <button className="button primary" type="submit" disabled={saving}>
-              {saving ? 'Saving…' : 'Save shared documentation'}
-            </button>
-          </div>
-        </form>
-        <section className="card notes-panel">
-          <div className="section-heading">
-            <div>
-              <span className="eyebrow">Interviewers only</span>
-              <h2>Live notes</h2>
+                        <button className="button primary" type="submit" disabled={saving}>
+                            {saving ? 'Saving…' : 'Save shared documentation'}
+                        </button>
+                    </div>
+                </form>
+                <section className="card notes-panel">
+                    <div className="section-heading">
+                        <div>
+                            <span className="eyebrow">Interviewers only</span>
+                            <h2>Live notes</h2>
+                        </div>
+                    </div>
+                    <div className="notes-list" aria-live="polite">
+                        {notes.map((note) => (
+                            <article className="note" key={note.id}>
+                                <strong>{note.authorName}</strong>
+                                <time>{new Date(note.createdAt).toLocaleTimeString()}</time>
+                                <p>{note.body}</p>
+                            </article>
+                        ))}
+                    </div>
+                    {interview.status === 'started' ? (
+                        <form className="note-form" onSubmit={addNote}>
+                            <label className="sr-only" htmlFor="interview-note">
+                                Add a note
+                            </label>
+                            <textarea
+                                id="interview-note"
+                                name="body"
+                                rows={3}
+                                required
+                                placeholder="Add a private interviewer note…"
+                            />
+                            <button className="button primary" type="submit">
+                                Post note
+                            </button>
+                        </form>
+                    ) : (
+                        <p className="panel-padding muted">
+                            Notes can be added while the interview is started.
+                        </p>
+                    )}
+                </section>
             </div>
-          </div>
-          <div className="notes-list" aria-live="polite">
-            {notes.map((note) => (
-              <article className="note" key={note.id}>
-                <strong>{note.authorName}</strong>
-                <time>{new Date(note.createdAt).toLocaleTimeString()}</time>
-                <p>{note.body}</p>
-              </article>
-            ))}
-          </div>
-          {interview.status === 'started' ? (
-            <form className="note-form" onSubmit={addNote}>
-              <label className="sr-only" htmlFor="interview-note">
-                Add a note
-              </label>
-              <textarea
-                id="interview-note"
-                name="body"
-                rows={3}
-                required
-                placeholder="Add a private interviewer note…"
-              />
-              <button className="button primary" type="submit">
-                Post note
-              </button>
-            </form>
-          ) : (
-            <p className="panel-padding muted">
-              Notes can be added while the interview is started.
-            </p>
-          )}
-        </section>
-      </div>
-      <section className="card attendee-section">
-        <div className="section-heading">
-          <div>
-            <h2>Attendees</h2>
-            <p>Interview team and response status.</p>
-          </div>
-        </div>
-        <div className="user-list">
-          {interview.attendees.map((attendee) => (
-            <article className="user-row" key={attendee.userId}>
-              <UsersRound />
-              <div>
-                <strong>{attendee.displayName}</strong>
-                <small>{attendee.email}</small>
-              </div>
-              <span className={`status status-${attendee.status}`}>{attendee.status}</span>
-            </article>
-          ))}
-        </div>
-      </section>
-    </>
-  )
+            <section className="card attendee-section">
+                <div className="section-heading">
+                    <div>
+                        <h2>Attendees</h2>
+                        <p>Interview team and response status.</p>
+                    </div>
+                </div>
+                <div className="user-list">
+                    {interview.attendees.map((attendee) => (
+                        <article className="user-row" key={attendee.userId}>
+                            <UsersRound/>
+                            <div>
+                                <strong>{attendee.displayName}</strong>
+                                <small>{attendee.email}</small>
+                            </div>
+                            <span className={`status status-${attendee.status}`}>{attendee.status}</span>
+                        </article>
+                    ))}
+                </div>
+            </section>
+        </>
+    )
 }
 
 export function ParticipantMeetingPage() {
-  const token = useParams().token ?? ''
-  const [meeting, setMeeting] = useState<ParticipantMeeting>()
-  const [error, setError] = useState('')
-  useEffect(() => {
-    let active = true
-    let latestDocument: string | undefined
-    const controller = new AbortController()
-    void api.participantMeetings
-      .subscribe(
-        token,
-        (event) => {
-          if (event.type !== 'document.updated') return
-          latestDocument = event.sharedDocument
-          setMeeting((current) =>
-            current ? { ...current, sharedDocument: event.sharedDocument } : current,
-          )
-        },
-        controller.signal,
-        (value) => {
-          if (active) setError(message(value))
-        },
-      )
-      .catch((value) => {
-        if (active && !controller.signal.aborted) setError(message(value))
-      })
-    void api.participantMeetings
-      .get(token)
-      .then((value) => {
-        if (active) {
-          setMeeting({
-            ...value,
-            sharedDocument: latestDocument ?? value.sharedDocument,
-          })
+    const token = useParams().token ?? ''
+    const [meeting, setMeeting] = useState<ParticipantMeeting>()
+    const [error, setError] = useState('')
+    useEffect(() => {
+        let active = true
+        let latestDocument: string | undefined
+        const controller = new AbortController()
+        void api.participantMeetings
+            .subscribe(
+                token,
+                (event) => {
+                    if (event.type !== 'document.updated') return
+                    latestDocument = event.sharedDocument
+                    setMeeting((current) =>
+                        current ? {...current, sharedDocument: event.sharedDocument} : current,
+                    )
+                },
+                controller.signal,
+                (value) => {
+                    if (active) setError(message(value))
+                },
+            )
+            .catch((value) => {
+                if (active && !controller.signal.aborted) setError(message(value))
+            })
+        void api.participantMeetings
+            .get(token)
+            .then((value) => {
+                if (active) {
+                    setMeeting({
+                        ...value,
+                        sharedDocument: latestDocument ?? value.sharedDocument,
+                    })
+                }
+            })
+            .catch((value) => {
+                if (active) setError(message(value))
+            })
+        return () => {
+            active = false
+            controller.abort()
         }
-      })
-      .catch((value) => {
-        if (active) setError(message(value))
-      })
-    return () => {
-      active = false
-      controller.abort()
-    }
-  }, [token])
-  return (
-    <main className="public-interview">
-      <header>
-        <Link className="logo" to="/" aria-label="Go Guess home">
-          <span className="logo-mark">G</span>
-          <span>
+    }, [token])
+    return (
+        <main className="public-interview">
+            <header>
+                <Link className="logo" to="/" aria-label="Go Guess home">
+                    <span className="logo-mark">G</span>
+                    <span>
             <strong>GO GUESS</strong>
             <small>Talent workspace</small>
           </span>
-        </Link>
-      </header>
-      {!meeting && !error && (
-        <section className="interview-card">
-          <Loading />
-        </section>
-      )}
-      {error && (
-        <section className="interview-card">
-          <ErrorAlert error={error} />
-        </section>
-      )}
-      {meeting && (
-        <section className="interview-card meeting-public-card">
-          <span className="eyebrow">Your scheduled interview</span>
-          <h1>{meeting.jobTitle}</h1>
-          <p>Welcome, {meeting.participantName}.</p>
-          <span className={`status status-${meeting.status}`}>{meeting.status}</span>
-          <DateAndPlace interview={meeting} />
-          <section className="public-document" aria-labelledby="shared-document-title">
-            <h2 id="shared-document-title">Shared documentation</h2>
-            <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>
-          </section>
-        </section>
-      )}
-    </main>
-  )
+                </Link>
+            </header>
+            {!meeting && !error && (
+                <section className="interview-card">
+                    <Loading/>
+                </section>
+            )}
+            {error && (
+                <section className="interview-card">
+                    <ErrorAlert error={error}/>
+                </section>
+            )}
+            {meeting && (
+                <section className="interview-card meeting-public-card">
+                    <span className="eyebrow">Your scheduled interview</span>
+                    <h1>{meeting.jobTitle}</h1>
+                    <p>Welcome, {meeting.participantName}.</p>
+                    <span className={`status status-${meeting.status}`}>{meeting.status}</span>
+                    <DateAndPlace interview={meeting}/>
+                    <section className="public-document" aria-labelledby="shared-document-title">
+                        <h2 id="shared-document-title">Shared documentation</h2>
+                        <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>
+                    </section>
+                </section>
+            )}
+        </main>
+    )
 }
diff --git a/frontend/src/features/jobs/pages.tsx b/frontend/src/features/jobs/pages.tsx
index 935f4bb..eedae82 100644
--- a/frontend/src/features/jobs/pages.tsx
+++ b/frontend/src/features/jobs/pages.tsx
@@ -1,909 +1,901 @@
 import {
-  ArrowLeft,
-  CalendarDays,
-  Check,
-  ChevronRight,
-  CircleHelp,
-  Copy,
-  Plus,
-  Search,
-  Send,
-  Sparkles,
-  Trash2,
-  X,
+    ArrowLeft,
+    CalendarDays,
+    Check,
+    ChevronRight,
+    CircleHelp,
+    Copy,
+    Plus,
+    Search,
+    Send,
+    Sparkles,
+    Trash2,
+    X,
 } from 'lucide-react'
-import { type FormEvent, type ReactNode, useEffect, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
-import { api } from '../../api/client'
-import { ErrorAlert, errorMessage, Loading } from '../../components/actions'
-import { FormActions, FormField } from '../../components/form'
-import { EmptyState, Fact, Metric, StatusBadge } from '../../components/ui/Display'
-import { NotFound } from '../../components/ui/NotFound'
-import { PageHeader } from '../../components/ui/PageHeader'
-import { useData } from '../../app/useData'
-import { CodePanel } from '../assessments/CodeReview'
-import { ScheduleInterviewForm } from '../interviews'
-import { Avatar, SkillList } from '../participants'
-import type {
-  CandidateMatch,
-  Interview,
-  Invitation,
-  Job,
-  JobStatus,
-  Question,
-  ScheduledInterview,
-} from '../../types'
+import {type ReactNode, SyntheticEvent, useEffect, useState} from 'react'
+import {Link, useNavigate, useParams} from 'react-router-dom'
+import {api} from '../../api/client'
+import {ErrorAlert, errorMessage, Loading} from '../../components/actions'
+import {FormActions, FormField} from '../../components/form'
+import {EmptyState, Fact, Metric, StatusBadge} from '../../components/ui/Display'
+import {NotFound} from '../../components/ui/NotFound'
+import {PageHeader} from '../../components/ui/PageHeader'
+import {useData} from '../../app/useData'
+import {CodePanel} from '../assessments/CodeReview'
+import {ScheduleInterviewForm} from '../interviews'
+import {Avatar, SkillList} from '../participants'
+import type {CandidateMatch, Interview, Invitation, Job, JobStatus, Question, ScheduledInterview,} from '../../types'
 
 export function JobsPage() {
-  const { jobs, loading, error, reload } = useData()
-  const [query, setQuery] = useState('')
-  const filtered = jobs.filter((job) =>
-    `${job.title} ${job.position} ${job.seniority} ${job.labels.join(' ')}`
-      .toLowerCase()
-      .includes(query.toLowerCase()),
-  )
-  return (
-    <>
-      <PageHeader
-        eyebrow="Recruitment"
-        title="Job postings"
-        description="Create roles, build assessments, and compare candidate fit."
-        action={
-          <Link to="/jobs/new" className="button primary">
-            <Plus size={18} /> Create job
-          </Link>
-        }
-      />
-      {error && <ErrorAlert message={error} retry={reload} />}
-      <section className="metrics">
-        <Metric label="Job postings" value={String(jobs.length)} />
-        <Metric label="Participants" value="—" />
-        <Metric
-          label="Assessments"
-          value={String(jobs.reduce((sum, job) => sum + job.questions.length, 0))}
-        />
-      </section>
-      <section className="card">
-        <div className="toolbar">
-          <label className="search-field">
-            <Search size={18} />
-            <span className="sr-only">Search jobs</span>
-            <input
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search jobs…"
+    const {jobs, loading, error, reload, participants} = useData()
+    const [query, setQuery] = useState('')
+    const filtered = jobs.filter((job) =>
+        `${job.title} ${job.position} ${job.seniority} ${job.labels.join(' ')}`
+            .toLowerCase()
+            .includes(query.toLowerCase()),
+    )
+    return (
+        <>
+            <PageHeader
+                eyebrow="Recruitment"
+                title="Job postings"
+                description="Create roles, build assessments, and compare candidate fit."
+                action={
+                    <Link to="/jobs/new" className="button primary">
+                        <Plus size={18}/> Create job
+                    </Link>
+                }
             />
-          </label>
-          <span className="result-count">{filtered.length} jobs</span>
-        </div>
-        {loading ? (
-          <Loading />
-        ) : (
-          <div className="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th>Role</th>
-                  <th>Seniority</th>
-                  <th>Position</th>
-                  <th>Status</th>
-                  <th>Questions</th>
-                  <th>
-                    <span className="sr-only">View</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {filtered.map((job) => (
-                  <tr key={job.id}>
-                    <td>
-                      <Link className="table-title" to={`/jobs/${job.id}`}>
-                        {job.title}
-                      </Link>
-                      <small>{job.labels.join(' · ') || 'No labels'}</small>
-                    </td>
-                    <td>
-                      <StatusBadge value={job.seniority} />
-                    </td>
-                    <td>{job.position}</td>
-                    <td>
-                      <StatusBadge value={job.status} />
-                    </td>
-                    <td>{job.questions.length}</td>
-                    <td>
-                      <Link
-                        className="icon-link"
-                        to={`/jobs/${job.id}`}
-                        aria-label={`View ${job.title}`}
-                      >
-                        <ChevronRight />
-                      </Link>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-        {!loading && !filtered.length && !error && (
-          <EmptyState title="No jobs found" description="Create a job or adjust your search." />
-        )}
-      </section>
-    </>
-  )
+            {error && <ErrorAlert message={error} retry={reload}/>}
+            <section className="metrics">
+                <Metric label="Job postings" value={String(jobs.length)}/>
+                <Metric label="Participants" value={String(participants.length)}/>
+                <Metric
+                    label="Assessments"
+                    value={String(jobs.reduce((sum, job) => sum + job.questions.length, 0))}
+                />
+            </section>
+            <section className="card">
+                <div className="toolbar">
+                    <label className="search-field">
+                        <Search size={18}/>
+                        <span className="sr-only">Search jobs</span>
+                        <input
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                            placeholder="Search jobs…"
+                        />
+                    </label>
+                    <span className="result-count">{filtered.length} jobs</span>
+                </div>
+                {loading ? (
+                    <Loading/>
+                ) : (
+                    <div className="table-wrap">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th>Role</th>
+                                <th>Seniority</th>
+                                <th>Position</th>
+                                <th>Status</th>
+                                <th>Questions</th>
+                                <th>
+                                    <span className="sr-only">View</span>
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {filtered.map((job) => (
+                                <tr key={job.id}>
+                                    <td>
+                                        <Link className="table-title" to={`/jobs/${job.id}`}>
+                                            {job.title}
+                                        </Link>
+                                        <small>{job.labels.join(' · ') || 'No labels'}</small>
+                                    </td>
+                                    <td>
+                                        <StatusBadge value={job.seniority}/>
+                                    </td>
+                                    <td>{job.position}</td>
+                                    <td>
+                                        <StatusBadge value={job.status}/>
+                                    </td>
+                                    <td>{job.questions.length}</td>
+                                    <td>
+                                        <Link
+                                            className="icon-link"
+                                            to={`/jobs/${job.id}`}
+                                            aria-label={`View ${job.title}`}
+                                        >
+                                            <ChevronRight/>
+                                        </Link>
+                                    </td>
+                                </tr>
+                            ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+                {!loading && !filtered.length && !error && (
+                    <EmptyState title="No jobs found" description="Create a job or adjust your search."/>
+                )}
+            </section>
+        </>
+    )
 }
 
 export function JobDetailPage() {
-  const id = Number(useParams().jobId)
-  const [job, setJob] = useState<Job>()
-  const [matches, setMatches] = useState<CandidateMatch[]>([])
-  const [invitations, setInvitations] = useState<Invitation[]>([])
-  const [scheduledInterviews, setScheduledInterviews] = useState<ScheduledInterview[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState('')
-  const [tab, setTab] = useState<'overview' | 'questions' | 'candidates' | 'invitations'>(
-    'overview',
-  )
+    const id = Number(useParams().jobId)
+    const [job, setJob] = useState<Job>()
+    const [matches, setMatches] = useState<CandidateMatch[]>([])
+    const [invitations, setInvitations] = useState<Invitation[]>([])
+    const [scheduledInterviews, setScheduledInterviews] = useState<ScheduledInterview[]>([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState('')
+    const [tab, setTab] = useState<'overview' | 'questions' | 'candidates' | 'invitations'>(
+        'overview',
+    )
 
-  async function load() {
-    setLoading(true)
-    setError('')
-    try {
-      const [jobValue, candidates, invitationItems, scheduledItems] = await Promise.all([
-        api.jobs.get(id),
-        api.jobs.candidates(id),
-        api.jobs.invitations(id),
-        api.jobs.interviews(id),
-      ])
-      setJob(jobValue)
-      setMatches(candidates)
-      setInvitations(invitationItems)
-      setScheduledInterviews(scheduledItems)
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    } finally {
-      setLoading(false)
+    async function load() {
+        setLoading(true)
+        setError('')
+        try {
+            const [jobValue, candidates, invitationItems, scheduledItems] = await Promise.all([
+                api.jobs.get(id),
+                api.jobs.candidates(id),
+                api.jobs.invitations(id),
+                api.jobs.interviews(id),
+            ])
+            setJob(jobValue)
+            setMatches(candidates)
+            setInvitations(invitationItems)
+            setScheduledInterviews(scheduledItems)
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        } finally {
+            setLoading(false)
+        }
     }
-  }
 
-  useEffect(() => {
-    let active = true
-    void Promise.all([
-      api.jobs.get(id),
-      api.jobs.candidates(id),
-      api.jobs.invitations(id),
-      api.jobs.interviews(id),
-    ])
-      .then(([jobValue, candidates, invitationItems, scheduledItems]) => {
-        if (!active) return
-        setJob(jobValue)
-        setMatches(candidates)
-        setInvitations(invitationItems)
-        setScheduledInterviews(scheduledItems)
-      })
-      .catch((requestError: unknown) => {
-        if (active) setError(errorMessage(requestError))
-      })
-      .finally(() => {
-        if (active) setLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [id])
-  if (loading) return <Loading />
-  if (error) return <ErrorAlert message={error} retry={load} />
-  if (!job) return <NotFound />
+    useEffect(() => {
+        let active = true
+        void Promise.all([
+            api.jobs.get(id),
+            api.jobs.candidates(id),
+            api.jobs.invitations(id),
+            api.jobs.interviews(id),
+        ])
+            .then(([jobValue, candidates, invitationItems, scheduledItems]) => {
+                if (!active) return
+                setJob(jobValue)
+                setMatches(candidates)
+                setInvitations(invitationItems)
+                setScheduledInterviews(scheduledItems)
+            })
+            .catch((requestError: unknown) => {
+                if (active) setError(errorMessage(requestError))
+            })
+            .finally(() => {
+                if (active) setLoading(false)
+            })
+        return () => {
+            active = false
+        }
+    }, [id])
+    if (loading) return <Loading/>
+    if (error) return <ErrorAlert message={error} retry={load}/>
+    if (!job) return <NotFound/>
 
-  return (
-    <>
-      <Link className="back-link" to="/jobs">
-        <ArrowLeft size={17} /> All jobs
-      </Link>
-      <PageHeader
-        eyebrow={`${job.seniority} · ${job.position}`}
-        title={job.title}
-        description={job.description}
-      />
-      <div className="tabs" role="tablist">
-        {(['overview', 'questions', 'candidates', 'invitations'] as const).map((item) => (
-          <button
-            key={item}
-            role="tab"
-            aria-selected={tab === item}
-            className={tab === item ? 'active' : ''}
-            onClick={() => setTab(item)}
-          >
-            {item === 'overview'
-              ? 'Overview'
-              : item === 'questions'
-                ? `Questions (${job.questions.length})`
-                : item === 'candidates'
-                  ? `Candidate match (${matches.length})`
-                  : `Invitations (${invitations.length})`}
-          </button>
-        ))}
-      </div>
-      {tab === 'overview' && (
-        <div className="detail-grid">
-          <section className="card prose">
-            <h2>About the role</h2>
-            <p>{job.description}</p>
-            <h3>Required skills</h3>
-            <SkillList skills={job.requiredSkills} />
-            <h3>Additional skills</h3>
-            <SkillList skills={job.additionalSkills} />
-          </section>
-          <aside className="card facts">
-            <h2>Job details</h2>
-            <Fact label="Seniority" value={job.seniority} />
-            <Fact label="Position" value={job.position} />
-            <Fact label="Status" value={job.status} />
-            <Fact label="Duration" value={`${job.durationMinutes} minutes`} />
-            <Fact label="Labels" value={job.labels.join(', ') || 'None'} />
-            <Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()} />
-            <JobSettings job={job} onUpdated={setJob} />
-          </aside>
-        </div>
-      )}
-      {tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob} />}
-      {tab === 'candidates' && <CandidateMatchView matches={matches} />}
-      {tab === 'invitations' && (
-        <InvitationsView
-          job={job}
-          matches={matches}
-          invitations={invitations}
-          scheduledInterviews={scheduledInterviews}
-          onInvited={(invitation) => setInvitations((current) => [invitation, ...current])}
-          onInvitationUpdated={(invitation) =>
-            setInvitations((current) =>
-              current.map((item) => (item.id === invitation.id ? invitation : item)),
-            )
-          }
-          onScheduled={(interview) => setScheduledInterviews((current) => [interview, ...current])}
-        />
-      )}
-    </>
-  )
+    return (
+        <>
+            <Link className="back-link" to="/jobs">
+                <ArrowLeft size={17}/> All jobs
+            </Link>
+            <PageHeader
+                eyebrow={`${job.seniority} · ${job.position}`}
+                title={job.title}
+                description={job.description}
+            />
+            <div className="tabs" role="tablist">
+                {(['overview', 'questions', 'candidates', 'invitations'] as const).map((item) => (
+                    <button
+                        key={item}
+                        role="tab"
+                        aria-selected={tab === item}
+                        className={tab === item ? 'active' : ''}
+                        onClick={() => setTab(item)}
+                    >
+                        {item === 'overview'
+                            ? 'Overview'
+                            : item === 'questions'
+                                ? `Questions (${job.questions.length})`
+                                : item === 'candidates'
+                                    ? `Candidate match (${matches.length})`
+                                    : `Invitations (${invitations.length})`}
+                    </button>
+                ))}
+            </div>
+            {tab === 'overview' && (
+                <div className="detail-grid">
+                    <section className="card prose">
+                        <h2>About the role</h2>
+                        <p>{job.description}</p>
+                        <h3>Required skills</h3>
+                        <SkillList skills={job.requiredSkills}/>
+                        <h3>Additional skills</h3>
+                        <SkillList skills={job.additionalSkills}/>
+                    </section>
+                    <aside className="card facts">
+                        <h2>Job details</h2>
+                        <Fact label="Seniority" value={job.seniority}/>
+                        <Fact label="Position" value={job.position}/>
+                        <Fact label="Status" value={job.status}/>
+                        <Fact label="Duration" value={`${job.durationMinutes} minutes`}/>
+                        <Fact label="Labels" value={job.labels.join(', ') || 'None'}/>
+                        <Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()}/>
+                        <JobSettings job={job} onUpdated={setJob}/>
+                    </aside>
+                </div>
+            )}
+            {tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob}/>}
+            {tab === 'candidates' && <CandidateMatchView matches={matches}/>}
+            {tab === 'invitations' && (
+                <InvitationsView
+                    job={job}
+                    matches={matches}
+                    invitations={invitations}
+                    scheduledInterviews={scheduledInterviews}
+                    onInvited={(invitation) => setInvitations((current) => [invitation, ...current])}
+                    onInvitationUpdated={(invitation) =>
+                        setInvitations((current) =>
+                            current.map((item) => (item.id === invitation.id ? invitation : item)),
+                        )
+                    }
+                    onScheduled={(interview) => setScheduledInterviews((current) => [interview, ...current])}
+                />
+            )}
+        </>
+    )
 }
 
-function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
-  const [status, setStatus] = useState<JobStatus>(job.status)
-  const [durationMinutes, setDurationMinutes] = useState(job.durationMinutes)
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState('')
+function JobSettings({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
+    const [status, setStatus] = useState<JobStatus>(job.status)
+    const [durationMinutes, setDurationMinutes] = useState(job.durationMinutes)
+    const [saving, setSaving] = useState(false)
+    const [error, setError] = useState('')
 
-  async function save(event: FormEvent) {
-    event.preventDefault()
-    setSaving(true)
-    setError('')
-    try {
-      onUpdated(await api.jobs.update(job.id, { status, durationMinutes }))
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    } finally {
-      setSaving(false)
+    async function save(event: SyntheticEvent<HTMLFormElement>) {
+        event.preventDefault()
+        setSaving(true)
+        setError('')
+        try {
+            onUpdated(await api.jobs.update(job.id, {status, durationMinutes}))
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        } finally {
+            setSaving(false)
+        }
     }
-  }
 
-  return (
-    <form className="inline-settings" onSubmit={save}>
-      <FormField label="Interview status" htmlFor="job-status">
-        <select
-          id="job-status"
-          value={status}
-          onChange={(event) => setStatus(event.target.value as JobStatus)}
-        >
-          <option value="draft">Draft</option>
-          <option value="published">Published</option>
-          <option value="deprecated">Deprecated</option>
-        </select>
-      </FormField>
-      <FormField label="Duration (minutes)" htmlFor="job-duration">
-        <input
-          id="job-duration"
-          type="number"
-          min="1"
-          required
-          value={durationMinutes}
-          onChange={(event) => setDurationMinutes(Number(event.target.value))}
-        />
-      </FormField>
-      {error && <ErrorAlert message={error} />}
-      <button className="button secondary wide" type="submit" disabled={saving}>
-        {saving ? 'Saving…' : 'Save interview settings'}
-      </button>
-    </form>
-  )
-}
-
-function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState<Question[]>([])
-  const [error, setError] = useState('')
-  const attached = new Set(job.questions.map((question) => question.id))
-
-  useEffect(() => {
-    let active = true
-    const timeout = window.setTimeout(() => {
-      void api.questions
-        .list(query)
-        .then((questions) => {
-          if (active) setResults(questions)
-        })
-        .catch((requestError) => {
-          if (active) setError(errorMessage(requestError))
-        })
-    }, 200)
-    return () => {
-      active = false
-      window.clearTimeout(timeout)
-    }
-  }, [query])
-
-  async function attach(question: Question) {
-    setError('')
-    try {
-      await api.jobs.attachQuestion(job.id, question.id)
-      onUpdated({ ...job, questions: [...job.questions, question] })
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    }
-  }
-
-  async function detach(question: Question) {
-    setError('')
-    try {
-      await api.jobs.detachQuestion(job.id, question.id)
-      onUpdated({
-        ...job,
-        questions: job.questions.filter((item) => item.id !== question.id),
-      })
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    }
-  }
-
-  return (
-    <div className="split-panels">
-      <section className="card">
-        <div className="section-heading">
-          <div>
-            <h2>Assessment questions</h2>
-            <p>Detach removes only this job’s link to the library question.</p>
-          </div>
-        </div>
-        <div className="question-list">
-          {job.questions.map((question, index) => (
-            <QuestionRow
-              key={question.id}
-              question={question}
-              number={index + 1}
-              action={
-                <button
-                  className="button ghost danger"
-                  type="button"
-                  onClick={() => void detach(question)}
-                  aria-label={`Detach ${question.text}`}
+    return (
+        <form className="inline-settings" onSubmit={save}>
+            <FormField label="Interview status" htmlFor="job-status">
+                <select
+                    id="job-status"
+                    value={status}
+                    onChange={(event) => setStatus(event.target.value as JobStatus)}
                 >
-                  <Trash2 size={16} /> Detach
-                </button>
-              }
-            />
-          ))}
-          {!job.questions.length && (
-            <EmptyState
-              title="No questions yet"
-              description="Search the library to attach a question."
-            />
-          )}
+                    <option value="draft">Draft</option>
+                    <option value="published">Published</option>
+                    <option value="deprecated">Deprecated</option>
+                </select>
+            </FormField>
+            <FormField label="Duration (minutes)" htmlFor="job-duration">
+                <input
+                    id="job-duration"
+                    type="number"
+                    min="1"
+                    required
+                    value={durationMinutes}
+                    onChange={(event) => setDurationMinutes(Number(event.target.value))}
+                />
+            </FormField>
+            {error && <ErrorAlert message={error}/>}
+            <button className="button secondary wide" type="submit" disabled={saving}>
+                {saving ? 'Saving…' : 'Save interview settings'}
+            </button>
+        </form>
+    )
+}
+
+function JobQuestionsView({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
+    const [query, setQuery] = useState('')
+    const [results, setResults] = useState<Question[]>([])
+    const [error, setError] = useState('')
+    const attached = new Set(job.questions.map((question) => question.id))
+
+    useEffect(() => {
+        let active = true
+        const timeout = window.setTimeout(() => {
+            void api.questions
+                .list(query)
+                .then((questions) => {
+                    if (active) setResults(questions)
+                })
+                .catch((requestError) => {
+                    if (active) setError(errorMessage(requestError))
+                })
+        }, 200)
+        return () => {
+            active = false
+            window.clearTimeout(timeout)
+        }
+    }, [query])
+
+    async function attach(question: Question) {
+        setError('')
+        try {
+            await api.jobs.attachQuestion(job.id, question.id)
+            onUpdated({...job, questions: [...job.questions, question]})
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        }
+    }
+
+    async function detach(question: Question) {
+        setError('')
+        try {
+            await api.jobs.detachQuestion(job.id, question.id)
+            onUpdated({
+                ...job,
+                questions: job.questions.filter((item) => item.id !== question.id),
+            })
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        }
+    }
+
+    return (
+        <div className="split-panels">
+            <section className="card">
+                <div className="section-heading">
+                    <div>
+                        <h2>Assessment questions</h2>
+                        <p>Detach removes only this job’s link to the library question.</p>
+                    </div>
+                </div>
+                <div className="question-list">
+                    {job.questions.map((question, index) => (
+                        <QuestionRow
+                            key={question.id}
+                            question={question}
+                            number={index + 1}
+                            action={
+                                <button
+                                    className="button ghost danger"
+                                    type="button"
+                                    onClick={() => void detach(question)}
+                                    aria-label={`Detach ${question.text}`}
+                                >
+                                    <Trash2 size={16}/> Detach
+                                </button>
+                            }
+                        />
+                    ))}
+                    {!job.questions.length && (
+                        <EmptyState
+                            title="No questions yet"
+                            description="Search the library to attach a question."
+                        />
+                    )}
+                </div>
+            </section>
+            <section className="card">
+                <div className="section-heading">
+                    <div>
+                        <h2>Question library</h2>
+                        <p>Search reusable, active questions.</p>
+                    </div>
+                    <Link className="button secondary" to="/questions">
+                        Manage library
+                    </Link>
+                </div>
+                <div className="panel-padding">
+                    <label className="search-field">
+                        <Search size={18}/>
+                        <span className="sr-only">Search question library</span>
+                        <input
+                            value={query}
+                            onChange={(event) => setQuery(event.target.value)}
+                            placeholder="Search question library…"
+                        />
+                    </label>
+                    {error && <ErrorAlert message={error}/>}
+                </div>
+                <div className="question-list compact">
+                    {results
+                        .filter((question) => !question.deprecated && !attached.has(question.id))
+                        .map((question) => (
+                            <QuestionRow
+                                key={question.id}
+                                question={question}
+                                action={
+                                    <button
+                                        className="button secondary"
+                                        type="button"
+                                        onClick={() => void attach(question)}
+                                    >
+                                        <Plus size={16}/> Attach
+                                    </button>
+                                }
+                            />
+                        ))}
+                </div>
+            </section>
         </div>
-      </section>
-      <section className="card">
-        <div className="section-heading">
-          <div>
-            <h2>Question library</h2>
-            <p>Search reusable, active questions.</p>
-          </div>
-          <Link className="button secondary" to="/questions">
-            Manage library
-          </Link>
-        </div>
-        <div className="panel-padding">
-          <label className="search-field">
-            <Search size={18} />
-            <span className="sr-only">Search question library</span>
-            <input
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search question library…"
-            />
-          </label>
-          {error && <ErrorAlert message={error} />}
-        </div>
-        <div className="question-list compact">
-          {results
-            .filter((question) => !question.deprecated && !attached.has(question.id))
-            .map((question) => (
-              <QuestionRow
-                key={question.id}
-                question={question}
-                action={
-                  <button
-                    className="button secondary"
-                    type="button"
-                    onClick={() => void attach(question)}
-                  >
-                    <Plus size={16} /> Attach
-                  </button>
-                }
-              />
-            ))}
-        </div>
-      </section>
-    </div>
-  )
+    )
 }
 
 function InvitationsView({
-  job,
-  matches,
-  invitations,
-  scheduledInterviews,
-  onInvited,
-  onInvitationUpdated,
-  onScheduled,
-}: {
-  job: Job
-  matches: CandidateMatch[]
-  invitations: Invitation[]
-  scheduledInterviews: ScheduledInterview[]
-  onInvited: (invitation: Invitation) => void
-  onInvitationUpdated: (invitation: Invitation) => void
-  onScheduled: (interview: ScheduledInterview) => void
+                             job,
+                             matches,
+                             invitations,
+                             scheduledInterviews,
+                             onInvited,
+                             onInvitationUpdated,
+                             onScheduled,
+                         }: {
+    job: Job
+    matches: CandidateMatch[]
+    invitations: Invitation[]
+    scheduledInterviews: ScheduledInterview[]
+    onInvited: (invitation: Invitation) => void
+    onInvitationUpdated: (invitation: Invitation) => void
+    onScheduled: (interview: ScheduledInterview) => void
 }) {
-  const [sendingId, setSendingId] = useState<number>()
-  const [review, setReview] = useState<Interview>()
-  const [reviewingId, setReviewingId] = useState<number>()
-  const [error, setError] = useState('')
-  const [scheduling, setScheduling] = useState<Invitation>()
-  const invitedIds = new Set(invitations.map((invitation) => invitation.participantId))
-  const eligible = matches.filter((match) => !invitedIds.has(match.participant.id))
+    const [sendingId, setSendingId] = useState<number>()
+    const [review, setReview] = useState<Interview>()
+    const [reviewingId, setReviewingId] = useState<number>()
+    const [error, setError] = useState('')
+    const [scheduling, setScheduling] = useState<Invitation>()
+    const invitedIds = new Set(invitations.map((invitation) => invitation.participantId))
+    const eligible = matches.filter((match) => !invitedIds.has(match.participant.id))
 
-  async function send(participantId: number) {
-    setSendingId(participantId)
-    setError('')
-    try {
-      onInvited(await api.jobs.invite(job.id, participantId))
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    } finally {
-      setSendingId(undefined)
+    async function send(participantId: number) {
+        setSendingId(participantId)
+        setError('')
+        try {
+            onInvited(await api.jobs.invite(job.id, participantId))
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        } finally {
+            setSendingId(undefined)
+        }
     }
-  }
 
-  async function copy(url: string) {
-    try {
-      await navigator.clipboard.writeText(url)
-    } catch {
-      setError('Could not copy the participant URL')
+    async function copy(url: string) {
+        try {
+            await navigator.clipboard.writeText(url)
+        } catch {
+            setError('Could not copy the participant URL')
+        }
     }
-  }
 
-  async function reviewAnswers(invitationId: number) {
-    setReviewingId(invitationId)
-    setError('')
-    try {
-      setReview(await api.jobs.invitation(job.id, invitationId))
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    } finally {
-      setReviewingId(undefined)
+    async function reviewAnswers(invitationId: number) {
+        setReviewingId(invitationId)
+        setError('')
+        try {
+            setReview(await api.jobs.invitation(job.id, invitationId))
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        } finally {
+            setReviewingId(undefined)
+        }
     }
-  }
 
-  return (
-    <section className="card">
-      <div className="section-heading">
-        <div>
-          <h2>Interview invitations</h2>
-          <p>Invite an eligible candidate and share their private participant URL.</p>
-        </div>
-      </div>
-      <div className="eligible-list">
-        {eligible.map(({ participant }) => (
-          <article className="eligible-row" key={participant.id}>
-            <Avatar person={participant} />
-            <div>
-              <strong>
-                {participant.firstName} {participant.lastName}
-              </strong>
-              <small>{participant.email}</small>
+    return (
+        <section className="card">
+            <div className="section-heading">
+                <div>
+                    <h2>Interview invitations</h2>
+                    <p>Invite an eligible candidate and share their private participant URL.</p>
+                </div>
             </div>
-            <button
-              className="button primary"
-              type="button"
-              disabled={sendingId === participant.id}
-              onClick={() => void send(participant.id)}
-            >
-              <Send size={16} />{' '}
-              {sendingId === participant.id ? 'Generating…' : 'Generate invitation'}
-            </button>
-          </article>
-        ))}
-        {!eligible.length && <p className="muted">All eligible candidates have been invited.</p>}
-      </div>
-      {error && <ErrorAlert message={error} />}
-      <div className="invitation-list">
-        {invitations.map((invitation) => (
-          <article className="invitation-row" key={invitation.id}>
-            <div>
-              <strong>{invitation.participantName}</strong>
-              <small>{invitation.participantEmail}</small>
+            <div className="eligible-list">
+                {eligible.map(({participant}) => (
+                    <article className="eligible-row" key={participant.id}>
+                        <Avatar person={participant}/>
+                        <div>
+                            <strong>
+                                {participant.firstName} {participant.lastName}
+                            </strong>
+                            <small>{participant.email}</small>
+                        </div>
+                        <button
+                            className="button primary"
+                            type="button"
+                            disabled={sendingId === participant.id}
+                            onClick={() => void send(participant.id)}
+                        >
+                            <Send size={16}/>{' '}
+                            {sendingId === participant.id ? 'Generating…' : 'Generate invitation'}
+                        </button>
+                    </article>
+                ))}
+                {!eligible.length && <p className="muted">All eligible candidates have been invited.</p>}
             </div>
-            <StatusBadge value={invitation.status} />
-            <code>{invitation.participantUrl}</code>
-            <button
-              className="button secondary"
-              type="button"
-              onClick={() => void copy(invitation.participantUrl)}
-              aria-label={`Copy interview URL for ${invitation.participantName}`}
-            >
-              <Copy size={16} /> Copy URL
-            </button>
-            {['accepted', 'completed'].includes(invitation.status) && (
-              <button
-                className="button secondary"
-                type="button"
-                disabled={reviewingId === invitation.id}
-                onClick={() => void reviewAnswers(invitation.id)}
-              >
-                {reviewingId === invitation.id ? 'Loading…' : 'Review answers'}
-              </button>
+            {error && <ErrorAlert message={error}/>}
+            <div className="invitation-list">
+                {invitations.map((invitation) => (
+                    <article className="invitation-row" key={invitation.id}>
+                        <div>
+                            <strong>{invitation.participantName}</strong>
+                            <small>{invitation.participantEmail}</small>
+                        </div>
+                        <StatusBadge value={invitation.status}/>
+                        <code>{invitation.participantUrl}</code>
+                        <button
+                            className="button secondary"
+                            type="button"
+                            onClick={() => void copy(invitation.participantUrl)}
+                            aria-label={`Copy interview URL for ${invitation.participantName}`}
+                        >
+                            <Copy size={16}/> Copy URL
+                        </button>
+                        {['accepted', 'completed'].includes(invitation.status) && (
+                            <button
+                                className="button secondary"
+                                type="button"
+                                disabled={reviewingId === invitation.id}
+                                onClick={() => void reviewAnswers(invitation.id)}
+                            >
+                                {reviewingId === invitation.id ? 'Loading…' : 'Review answers'}
+                            </button>
+                        )}
+                    </article>
+                ))}
+                {!invitations.length && (
+                    <EmptyState title="No invitations" description="Invite a candidate to this interview."/>
+                )}
+            </div>
+            {review && (
+                <InvitationAnswerReview
+                    interview={review}
+                    onClose={() => setReview(undefined)}
+                    onOutcome={(invitation) => {
+                        onInvitationUpdated(invitation)
+                        setReview((current) => current && {...current, invitation})
+                    }}
+                />
             )}
-          </article>
-        ))}
-        {!invitations.length && (
-          <EmptyState title="No invitations" description="Invite a candidate to this interview." />
-        )}
-      </div>
-      {review && (
-        <InvitationAnswerReview
-          interview={review}
-          onClose={() => setReview(undefined)}
-          onOutcome={(invitation) => {
-            onInvitationUpdated(invitation)
-            setReview((current) => current && { ...current, invitation })
-          }}
-        />
-      )}
-      {scheduling && (
-        <ScheduleInterviewForm
-          jobId={job.id}
-          invitation={scheduling}
-          onCancel={() => setScheduling(undefined)}
-          onCreated={(interview) => {
-            onScheduled(interview)
-            setScheduling(undefined)
-          }}
-        />
-      )}
-      <div className="scheduled-list">
-        {invitations
-          .filter((invitation) => invitation.outcome === 'passed')
-          .filter(
-            (invitation) =>
-              !scheduledInterviews.some(
-                (interview) => interview.participantId === invitation.participantId,
-              ),
-          )
-          .map((invitation) => (
-            <button
-              className="button primary"
-              type="button"
-              key={invitation.id}
-              onClick={() => setScheduling(invitation)}
-            >
-              <CalendarDays size={17} /> Schedule {invitation.participantName}
-            </button>
-          ))}
-        {scheduledInterviews.map((interview) => (
-          <Link
-            className="scheduled-summary"
-            to={`/scheduled-interviews/${interview.id}`}
-            key={interview.id}
-          >
+            {scheduling && (
+                <ScheduleInterviewForm
+                    jobId={job.id}
+                    invitation={scheduling}
+                    onCancel={() => setScheduling(undefined)}
+                    onCreated={(interview) => {
+                        onScheduled(interview)
+                        setScheduling(undefined)
+                    }}
+                />
+            )}
+            <div className="scheduled-list">
+                {invitations
+                    .filter((invitation) => invitation.outcome === 'passed')
+                    .filter(
+                        (invitation) =>
+                            !scheduledInterviews.some(
+                                (interview) => interview.participantId === invitation.participantId,
+                            ),
+                    )
+                    .map((invitation) => (
+                        <button
+                            className="button primary"
+                            type="button"
+                            key={invitation.id}
+                            onClick={() => setScheduling(invitation)}
+                        >
+                            <CalendarDays size={17}/> Schedule {invitation.participantName}
+                        </button>
+                    ))}
+                {scheduledInterviews.map((interview) => (
+                    <Link
+                        className="scheduled-summary"
+                        to={`/scheduled-interviews/${interview.id}`}
+                        key={interview.id}
+                    >
             <span>
               <strong>{interview.participantName}</strong>
               <small>
                 {new Date(interview.startsAt).toLocaleString()} · {interview.location}
               </small>
             </span>
-            <StatusBadge value={interview.status} />
-          </Link>
-        ))}
-      </div>
-    </section>
-  )
+                        <StatusBadge value={interview.status}/>
+                    </Link>
+                ))}
+            </div>
+        </section>
+    )
 }
 
 function InvitationAnswerReview({
-  interview,
-  onClose,
-  onOutcome,
-}: {
-  interview: Interview
-  onClose: () => void
-  onOutcome: (invitation: Invitation) => void
+                                    interview,
+                                    onClose,
+                                    onOutcome,
+                                }: {
+    interview: Interview
+    onClose: () => void
+    onOutcome: (invitation: Invitation) => void
 }) {
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState('')
+    const [saving, setSaving] = useState(false)
+    const [error, setError] = useState('')
 
-  async function decide(outcome: 'passed' | 'failed') {
-    setSaving(true)
-    setError('')
-    try {
-      onOutcome(
-        await api.jobs.setInvitationOutcome(
-          interview.invitation.jobId,
-          interview.invitation.id,
-          outcome,
-        ),
-      )
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-    } finally {
-      setSaving(false)
+    async function decide(outcome: 'passed' | 'failed') {
+        setSaving(true)
+        setError('')
+        try {
+            onOutcome(
+                await api.jobs.setInvitationOutcome(
+                    interview.invitation.jobId,
+                    interview.invitation.id,
+                    outcome,
+                ),
+            )
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+        } finally {
+            setSaving(false)
+        }
     }
-  }
 
-  return (
-    <section className="answer-review" aria-labelledby="answer-review-title">
-      <div className="section-heading">
-        <div>
-          <span className="eyebrow">Participant submission</span>
-          <h2 id="answer-review-title">{interview.invitation.participantName}</h2>
-          <p>{interview.invitation.participantEmail}</p>
-        </div>
-        {interview.invitation.status === 'completed' && (
-          <div className="outcome-actions" aria-label="Candidate outcome">
-            <div>
-              <strong>Assessment decision</strong>
-              <p>Record whether this candidate should proceed to a scheduled interview.</p>
-            </div>
-            <button
-              className="button pass"
-              type="button"
-              disabled={saving}
-              onClick={() => void decide('passed')}
-            >
-              <Check size={18} /> Pass candidate
-            </button>
-            <button
-              className="button fail"
-              type="button"
-              disabled={saving}
-              onClick={() => void decide('failed')}
-            >
-              <X size={18} /> Fail candidate
-            </button>
-            {interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome} />}
-          </div>
-        )}
-        {error && <ErrorAlert message={error} />}
-        <div className="review-heading-actions">
-          <StatusBadge value={interview.invitation.status} />
-          <button className="button ghost" type="button" onClick={onClose}>
-            Close review
-          </button>
-        </div>
-      </div>
-      <div className="review-question-list">
-        {interview.job.questions.map((question, index) => {
-          const answer = interview.answers[String(question.id)]?.trim()
-          return (
-            <article className="review-question" key={question.id}>
-              <span className="question-number">{index + 1}</span>
-              <div>
-                <span className="question-type">{question.type.replace('_', ' ')}</span>
-                <h3>{question.text}</h3>
-                {question.type === 'code_review' && question.codeSnippet && (
-                  <CodePanel codeSnippet={question.codeSnippet} />
-                )}
-                {(question.type === 'multiple_choice' || question.type === 'radio') &&
-                  question.options.length > 0 && (
-                    <div className="review-options">
-                      <strong>Possible options</strong>
-                      <span>{question.options.join(' · ')}</span>
-                    </div>
-                  )}
-                {(question.type === 'open' || question.type === 'code_review') &&
-                  question.referenceAnswer && (
-                    <div className="reference-answer">
-                      <strong>Reference answer</strong>
-                      <p>{question.referenceAnswer}</p>
-                    </div>
-                  )}
-                <div className={answer ? 'participant-answer' : 'participant-answer unanswered'}>
-                  <strong>Participant answer</strong>
-                  <p>{answer || 'Unanswered'}</p>
+    return (
+        <section className="answer-review" aria-labelledby="answer-review-title">
+            <div className="section-heading">
+                <div>
+                    <span className="eyebrow">Participant submission</span>
+                    <h2 id="answer-review-title">{interview.invitation.participantName}</h2>
+                    <p>{interview.invitation.participantEmail}</p>
                 </div>
-              </div>
-            </article>
-          )
-        })}
-      </div>
-    </section>
-  )
+                {interview.invitation.status === 'completed' && (
+                    <div className="outcome-actions" aria-label="Candidate outcome">
+                        <div>
+                            <strong>Assessment decision</strong>
+                            <p>Record whether this candidate should proceed to a scheduled interview.</p>
+                        </div>
+                        <button
+                            className="button pass"
+                            type="button"
+                            disabled={saving}
+                            onClick={() => void decide('passed')}
+                        >
+                            <Check size={18}/> Pass candidate
+                        </button>
+                        <button
+                            className="button fail"
+                            type="button"
+                            disabled={saving}
+                            onClick={() => void decide('failed')}
+                        >
+                            <X size={18}/> Fail candidate
+                        </button>
+                        {interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome}/>}
+                    </div>
+                )}
+                {error && <ErrorAlert message={error}/>}
+                <div className="review-heading-actions">
+                    <StatusBadge value={interview.invitation.status}/>
+                    <button className="button ghost" type="button" onClick={onClose}>
+                        Close review
+                    </button>
+                </div>
+            </div>
+            <div className="review-question-list">
+                {interview.job.questions.map((question, index) => {
+                    const answer = interview.answers[String(question.id)]?.trim()
+                    return (
+                        <article className="review-question" key={question.id}>
+                            <span className="question-number">{index + 1}</span>
+                            <div>
+                                <span className="question-type">{question.type.replace('_', ' ')}</span>
+                                <h3>{question.text}</h3>
+                                {question.type === 'code_review' && question.codeSnippet && (
+                                    <CodePanel codeSnippet={question.codeSnippet}/>
+                                )}
+                                {(question.type === 'multiple_choice' || question.type === 'radio') &&
+                                    question.options.length > 0 && (
+                                        <div className="review-options">
+                                            <strong>Possible options</strong>
+                                            <span>{question.options.join(' · ')}</span>
+                                        </div>
+                                    )}
+                                {(question.type === 'open' || question.type === 'code_review') &&
+                                    question.referenceAnswer && (
+                                        <div className="reference-answer">
+                                            <strong>Reference answer</strong>
+                                            <p>{question.referenceAnswer}</p>
+                                        </div>
+                                    )}
+                                <div className={answer ? 'participant-answer' : 'participant-answer unanswered'}>
+                                    <strong>Participant answer</strong>
+                                    <p>{answer || 'Unanswered'}</p>
+                                </div>
+                            </div>
+                        </article>
+                    )
+                })}
+            </div>
+        </section>
+    )
 }
 
 export function QuestionRow({
-  question,
-  number,
-  action,
-}: {
-  question: Question
-  number?: number
-  action?: ReactNode
+                                question,
+                                number,
+                                action,
+                            }: {
+    question: Question
+    number?: number
+    action?: ReactNode
 }) {
-  return (
-    <article className="question-row">
-      {number ? <span className="question-number">{number}</span> : <CircleHelp size={22} />}
-      <div>
-        <div className="question-meta">
-          <h3>{question.type.replace('_', ' ')}</h3>
-          {question.deprecated && <StatusBadge value="deprecated" />}
-        </div>
-        <p>{question.text}</p>
-        {question.options.length > 0 && <small>{question.options.join(' · ')}</small>}
-        {question.type === 'code_review' && question.codeSnippet && (
-          <pre className="interviewer-code-snippet">
+    return (
+        <article className="question-row">
+            {number ? <span className="question-number">{number}</span> : <CircleHelp size={22}/>}
+            <div>
+                <div className="question-meta">
+                    <h3>{question.type.replace('_', ' ')}</h3>
+                    {question.deprecated && <StatusBadge value="deprecated"/>}
+                </div>
+                <p>{question.text}</p>
+                {question.options.length > 0 && <small>{question.options.join(' · ')}</small>}
+                {question.type === 'code_review' && question.codeSnippet && (
+                    <pre className="interviewer-code-snippet">
             <code>{question.codeSnippet}</code>
           </pre>
-        )}
-        {question.referenceAnswer && (
-          <div className="reference-answer">
-            <strong>Reference answer</strong>
-            <p>{question.referenceAnswer}</p>
-          </div>
-        )}
-      </div>
-      {action && <div className="question-action">{action}</div>}
-    </article>
-  )
+                )}
+                {question.referenceAnswer && (
+                    <div className="reference-answer">
+                        <strong>Reference answer</strong>
+                        <p>{question.referenceAnswer}</p>
+                    </div>
+                )}
+            </div>
+            {action && <div className="question-action">{action}</div>}
+        </article>
+    )
 }
 
-function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
-  return (
-    <section className="card">
-      <div className="section-heading">
-        <div>
-          <h2>Candidate match</h2>
-          <p>Trait alignment calculated by the API.</p>
-        </div>
-        <span className="ai-label">
-          <Sparkles size={16} /> Match insight
+function CandidateMatchView({matches}: { matches: CandidateMatch[] }) {
+    return (
+        <section className="card">
+            <div className="section-heading">
+                <div>
+                    <h2>Candidate match</h2>
+                    <p>Trait alignment calculated by the API.</p>
+                </div>
+                <span className="ai-label">
+          <Sparkles size={16}/> Match insight
         </span>
-      </div>
-      <div className="match-list">
-        {matches.map((match, index) => (
-          <article className="match-card" key={match.participant.id}>
-            <span className="rank">{index + 1}</span>
-            <Avatar person={match.participant} />
-            <div className="match-person">
-              <Link to={`/participants/${match.participant.id}`}>
-                {match.participant.firstName} {match.participant.lastName}
-              </Link>
-              <small>{match.participant.email}</small>
             </div>
-            <div className="score">
-              <div>
-                <span>Matched</span>
-                <strong>{match.matchedTraits.length}</strong>
-              </div>
-              <span className="score-track">
-                <span style={{ width: `${Math.min(match.score, 100)}%` }} />
+            <div className="match-list">
+                {matches.map((match, index) => (
+                    <article className="match-card" key={match.participant.id}>
+                        <span className="rank">{index + 1}</span>
+                        <Avatar person={match.participant}/>
+                        <div className="match-person">
+                            <Link to={`/participants/${match.participant.id}`}>
+                                {match.participant.firstName} {match.participant.lastName}
+                            </Link>
+                            <small>{match.participant.email}</small>
+                        </div>
+                        <div className="score">
+                            <div>
+                                <span>Matched</span>
+                                <strong>{match.matchedTraits.length}</strong>
+                            </div>
+                            <span className="score-track">
+                <span style={{width: `${Math.min(match.score, 100)}%`}}/>
               </span>
+                        </div>
+                        <div className="score">
+                            <div>
+                                <span>Missing</span>
+                                <strong>{match.missingTraits.length}</strong>
+                            </div>
+                        </div>
+                        <div className="match-total">
+                            <strong>{Math.round(match.score)}%</strong>
+                            <small>Overall match</small>
+                        </div>
+                    </article>
+                ))}
+                {!matches.length && (
+                    <EmptyState
+                        title="No candidate matches"
+                        description="Matches appear when participants have extractable CV traits."
+                    />
+                )}
             </div>
-            <div className="score">
-              <div>
-                <span>Missing</span>
-                <strong>{match.missingTraits.length}</strong>
-              </div>
-            </div>
-            <div className="match-total">
-              <strong>{Math.round(match.score)}%</strong>
-              <small>Overall match</small>
-            </div>
-          </article>
-        ))}
-        {!matches.length && (
-          <EmptyState
-            title="No candidate matches"
-            description="Matches appear when participants have extractable CV traits."
-          />
-        )}
-      </div>
-    </section>
-  )
+        </section>
+    )
 }
 
 export function CreateJobPage() {
-  const { createJob } = useData()
-  const navigate = useNavigate()
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState('')
+    const {createJob} = useData()
+    const navigate = useNavigate()
+    const [saving, setSaving] = useState(false)
+    const [error, setError] = useState('')
 
-  async function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setSaving(true)
-    setError('')
-    const form = new FormData(event.currentTarget)
-    const split = (name: string) =>
-      String(form.get(name))
-        .split(',')
-        .map((item) => item.trim())
-        .filter(Boolean)
-    try {
-      const job = await createJob({
-        title: String(form.get('title')),
-        description: String(form.get('description')),
-        seniority: String(form.get('seniority')),
-        position: String(form.get('position')),
-        labels: split('labels'),
-        requiredSkills: split('requiredSkills'),
-        additionalSkills: split('additionalSkills'),
-      })
-      navigate(`/jobs/${job.id}`)
-    } catch (requestError) {
-      setError(errorMessage(requestError))
-      setSaving(false)
+    async function submit(event: SyntheticEvent<HTMLFormElement>) {
+        event.preventDefault()
+        setSaving(true)
+        setError('')
+        const form = new FormData(event.currentTarget)
+        const split = (name: string) =>
+            String(form.get(name))
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean)
+        try {
+            const job = await createJob({
+                title: String(form.get('title')),
+                description: String(form.get('description')),
+                seniority: String(form.get('seniority')),
+                position: String(form.get('position')),
+                labels: split('labels'),
+                requiredSkills: split('requiredSkills'),
+                additionalSkills: split('additionalSkills'),
+            })
+            navigate(`/jobs/${job.id}`)
+        } catch (requestError) {
+            setError(errorMessage(requestError))
+            setSaving(false)
+        }
     }
-  }
 
-  return (
-    <>
-      <Link className="back-link" to="/jobs">
-        <ArrowLeft size={17} /> Cancel
-      </Link>
-      <PageHeader
-        eyebrow="New posting"
-        title="Create a job"
-        description="Define the role and skills used for candidate matching."
-      />
-      <form className="card form-card" onSubmit={submit}>
-        <div className="form-section">
-          <h2>Role information</h2>
-          <div className="form-grid">
-            <FormField label="Job title" htmlFor="title">
-              <input id="title" name="title" required />
-            </FormField>
-            <FormField label="Position" htmlFor="position">
-              <input id="position" name="position" required placeholder="e.g. Backend Engineer" />
-            </FormField>
-            <FormField label="Seniority" htmlFor="seniority">
-              <input id="seniority" name="seniority" required placeholder="e.g. Senior" />
-            </FormField>
-            <FormField label="Labels" htmlFor="labels" hint="Comma separated">
-              <input id="labels" name="labels" />
-            </FormField>
-          </div>
-        </div>
-        <div className="form-section">
-          <h2>Role profile</h2>
-          <FormField label="Description" htmlFor="description">
-            <textarea id="description" name="description" required rows={7} />
-          </FormField>
-          <FormField label="Required skills" htmlFor="requiredSkills" hint="Comma separated">
-            <input id="requiredSkills" name="requiredSkills" required />
-          </FormField>
-          <FormField label="Additional skills" htmlFor="additionalSkills" hint="Comma separated">
-            <input id="additionalSkills" name="additionalSkills" />
-          </FormField>
-        </div>
-        {error && <ErrorAlert message={error} />}
-        <FormActions saving={saving} cancelTo="/jobs" label="Create job" />
-      </form>
-    </>
-  )
+    return (
+        <>
+            <Link className="back-link" to="/jobs">
+                <ArrowLeft size={17}/> Cancel
+            </Link>
+            <PageHeader
+                eyebrow="New posting"
+                title="Create a job"
+                description="Define the role and skills used for candidate matching."
+            />
+            <form className="card form-card" onSubmit={submit}>
+                <div className="form-section">
+                    <h2>Role information</h2>
+                    <div className="form-grid">
+                        <FormField label="Job title" htmlFor="title">
+                            <input id="title" name="title" required/>
+                        </FormField>
+                        <FormField label="Position" htmlFor="position">
+                            <input id="position" name="position" required placeholder="e.g. Backend Engineer"/>
+                        </FormField>
+                        <FormField label="Seniority" htmlFor="seniority">
+                            <input id="seniority" name="seniority" required placeholder="e.g. Senior"/>
+                        </FormField>
+                        <FormField label="Labels" htmlFor="labels" hint="Comma separated">
+                            <input id="labels" name="labels"/>
+                        </FormField>
+                    </div>
+                </div>
+                <div className="form-section">
+                    <h2>Role profile</h2>
+                    <FormField label="Description" htmlFor="description">
+                        <textarea id="description" name="description" required rows={7}/>
+                    </FormField>
+                    <FormField label="Required skills" htmlFor="requiredSkills" hint="Comma separated">
+                        <input id="requiredSkills" name="requiredSkills" required/>
+                    </FormField>
+                    <FormField label="Additional skills" htmlFor="additionalSkills" hint="Comma separated">
+                        <input id="additionalSkills" name="additionalSkills"/>
+                    </FormField>
+                </div>
+                {error && <ErrorAlert message={error}/>}
+                <FormActions saving={saving} cancelTo="/jobs" label="Create job"/>
+            </form>
+        </>
+    )
 }
diff --git a/frontend/src/features/users/CalendarPage.tsx b/frontend/src/features/users/CalendarPage.tsx
new file mode 100644
index 0000000..50b57ec
--- /dev/null
+++ b/frontend/src/features/users/CalendarPage.tsx
@@ -0,0 +1,62 @@
+import {ScheduledInterview} from "../../types";
+import {useEffect, useMemo, useState} from "react";
+import {message} from "../../components/actions";
+import {api} from "../../api/client";
+import {ErrorAlert, Loading} from "../../components/ui/AsyncState";
+import {InterviewCard} from "../interviews/components/InterviewCard";
+import {Link} from "react-router-dom";
+
+export function CalendarPage() {
+    const [items, setItems] = useState<ScheduledInterview[]>([])
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
+    useEffect(() => {
+        void api
+            .calendar()
+            .then(setItems)
+            .catch((value) => setError(message(value)))
+            .finally(() => setLoading(false))
+    }, [])
+    const groups = useMemo(() => {
+        return [...items]
+            .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
+            .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
+                const key = new Date(item.startsAt).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                    })
+                ;(result[key] ??= []).push(item)
+                return result
+            }, {})
+    }, [items])
+    return (
+        <>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Schedule</span>
+                </div>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            {loading ? (
+                <Loading/>
+            ) : (
+                Object.entries(groups).map(([date, interviews]) => (
+                    <section className="calendar-day" key={date}>
+                        <h2>{date}</h2>
+                        <div className="meeting-list">
+                            {interviews.map((item) => (
+                                <InterviewCard interview={item} key={item.id}>
+                                    <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
+                                        Open session
+                                    </Link>
+                                </InterviewCard>
+                            ))}
+                        </div>
+                    </section>
+                ))
+            )}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/features/users/index.ts b/frontend/src/features/users/index.ts
index 74e5cbc..7694d6d 100644
--- a/frontend/src/features/users/index.ts
+++ b/frontend/src/features/users/index.ts
@@ -1,2 +1,3 @@
-export { ProfilePage } from './ProfilePage'
-export { UsersPage } from './UsersPage'
+export {ProfilePage} from './ProfilePage';
+export {UsersPage} from './UsersPage';
+export {CalendarPage} from './CalendarPage';
\ No newline at end of file