diff --git a/README.md b/README.md
index a47b282..f4e151d 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ Cross-platform desktop and mobile viewer for OpenIPC IP cameras.
 Built with .NET 9 / 10 and Avalonia 12.
 
 [![build](https://github.com/OpenIPC/viewer/actions/workflows/build.yml/badge.svg)](https://github.com/OpenIPC/viewer/actions/workflows/build.yml)
+[![latest release](https://img.shields.io/github/v/release/OpenIPC/viewer?sort=semver&label=release)](https://github.com/OpenIPC/viewer/releases/latest)
+[![downloads](https://img.shields.io/github/downloads/OpenIPC/viewer/total?label=downloads)](https://github.com/OpenIPC/viewer/releases)
 
 > Status: **beta** — releases ship as standalone builds for Windows / Linux /
 > macOS / Android from the [releases page](https://github.com/OpenIPC/viewer/releases).
diff --git a/docs/web-server.md b/docs/web-server.md
index 806a614..da3c64a 100644
--- a/docs/web-server.md
+++ b/docs/web-server.md
@@ -12,6 +12,11 @@ LAN. No cloud, no extra services — one admin password and a port.
 * **Find cameras on the network** — ONVIF, mDNS and an opt-in subnet sweep, then
   add what you found without leaving the browser.
 * **PTZ** — pan/tilt/zoom and presets for cameras that support it.
+* **Snapshots** — grab a still from any camera and download it.
+* **Archive** — record a camera from the browser, then browse by calendar, play,
+  download, and export a marked fragment; seeking works because playback is a
+  ranged file response. Both heads write into the same folders and index, so a
+  clip recorded here shows up in the desktop app too.
 * **Users and permissions** — accounts with permission flags and, if you like, a
   per-user subset of cameras.
 * **H.264 over WebSocket** (fMP4 + MSE); H.265 is transcoded on the fly. One
@@ -66,6 +71,7 @@ there is no TLS at this layer; for anything beyond your trusted LAN, put it
 | Env var                       | Meaning                                          |
 |-------------------------------|--------------------------------------------------|
 | `OPENIPC_WEB_ADMIN_PASSWORD`  | Built-in admin password. Unset → random, logged on start. |
+| `OPENIPC_WEB_SEGMENT_SECONDS` | Length of one recording segment. Default 600 (10 min).   |
 
 ---
 
@@ -104,7 +110,7 @@ Out of the box there is one account: the built-in administrator from
 |----------------|---------------------------------------------------------------|
 | `watch live`   | see the camera list and live video                            |
 | `PTZ`          | move the camera and manage its presets                        |
-| `export`       | reserved for archive export                                   |
+| `export`       | cut and download a fragment of a recording                     |
 | `manage`       | everything that changes the installation — cameras, groups, layouts, discovery, backups, sessions, users |
 
 and, optionally, a **subset of cameras**: leave *All cameras* on for full access,
diff --git a/docs/web-server.ru.md b/docs/web-server.ru.md
index a4ec41f..d85a2b8 100644
--- a/docs/web-server.ru.md
+++ b/docs/web-server.ru.md
@@ -15,6 +15,11 @@ OpenIPC-камерам по локальной сети. Без облака и
 * **Поиск камер в сети** — ONVIF, mDNS и опциональный обход подсети, с добавлением
   найденного прямо из браузера.
 * **PTZ** — поворот, наклон, зум и пресеты для камер, которые это умеют.
+* **Снимки** — кадр с любой камеры, с возможностью скачать.
+* **Архив** — запись камеры прямо из браузера, затем календарь, просмотр, скачивание
+  и экспорт отмеченного фрагмента; перемотка работает, потому что файл отдаётся по
+  диапазонам. Обе морды пишут в одни и те же папки и индекс, так что записанное
+  здесь видно и в десктопе.
 * **Пользователи и права** — учётные записи с флагами прав и, при желании,
   подмножеством камер на каждого.
 * **H.264 по WebSocket** (fMP4 + MSE); H.265 транскодируется на лету. Одна
@@ -69,6 +74,7 @@ OpenIPC-камерам по локальной сети. Без облака и
 | Переменная окружения          | Значение                                             |
 |-------------------------------|------------------------------------------------------|
 | `OPENIPC_WEB_ADMIN_PASSWORD`  | Пароль встроенного админа. Не задан → случайный, печатается в лог. |
+| `OPENIPC_WEB_SEGMENT_SECONDS` | Длина одного сегмента записи. По умолчанию 600 (10 мин). |
 
 ---
 
@@ -108,7 +114,7 @@ OpenIPC-камерам по локальной сети. Без облака и
 |------------------|-------------------------------------------------------------|
 | `смотреть эфир`  | видеть список камер и живое видео                           |
 | `PTZ`            | двигать камеру и управлять её пресетами                     |
-| `экспорт`        | зарезервировано под экспорт архива                          |
+| `экспорт`        | вырезать и скачать фрагмент записи                          |
 | `управление`     | всё, что меняет установку: камеры, группы, раскладки, поиск, бэкапы, сессии, пользователи |
 
 и, при желании, **подмножество камер**: оставьте «Все камеры» для полного доступа
diff --git a/src/OpenIPC.Viewer.Web.Client/src/App.tsx b/src/OpenIPC.Viewer.Web.Client/src/App.tsx
index 3aeedaa..eb37d79 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/App.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/App.tsx
@@ -8,6 +8,9 @@ import { Camera } from './pages/Camera'
 import { Grid } from './pages/Grid'
 import { Discovery } from './pages/Discovery'
 import { Users } from './pages/Users'
+import { RequireManage, Settings, SettingsIndex } from './pages/Settings'
+import { Recordings } from './pages/Recordings'
+import { Snapshots } from './pages/Snapshots'
 import { Groups } from './pages/Groups'
 import { System } from './pages/System'
 
@@ -31,10 +34,34 @@ export function App() {
         <Route path="/cameras" element={<Cameras />} />
         <Route path="/camera/:id" element={<Camera />} />
         <Route path="/grid" element={<Grid />} />
-        <Route path="/discovery" element={<Discovery />} />
-        <Route path="/groups" element={<Groups />} />
-        <Route path="/system" element={<System />} />
-        <Route path="/users" element={<Users />} />
+        <Route path="/recordings" element={<Recordings />} />
+        <Route path="/snapshots" element={<Snapshots />} />
+        <Route
+          path="/discovery"
+          element={
+            <RequireManage>
+              <Discovery />
+            </RequireManage>
+          }
+        />
+        {/* Configuration lives under /settings; the old flat paths still
+            resolve so existing links and bookmarks don't break. */}
+        <Route path="/settings" element={<Settings />}>
+          <Route index element={<SettingsIndex />} />
+          <Route path="groups" element={<Groups />} />
+          <Route
+            path="users"
+            element={
+              <RequireManage>
+                <Users />
+              </RequireManage>
+            }
+          />
+          <Route path="system" element={<System />} />
+        </Route>
+        <Route path="/groups" element={<Navigate to="/settings/groups" replace />} />
+        <Route path="/users" element={<Navigate to="/settings/users" replace />} />
+        <Route path="/system" element={<Navigate to="/settings/system" replace />} />
         <Route path="*" element={<Navigate to="/cameras" replace />} />
       </Route>
     </Routes>
diff --git a/src/OpenIPC.Viewer.Web.Client/src/api.ts b/src/OpenIPC.Viewer.Web.Client/src/api.ts
index 4fa6127..4eb88be 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/api.ts
+++ b/src/OpenIPC.Viewer.Web.Client/src/api.ts
@@ -42,10 +42,71 @@ export type WebUserDto = {
   cameras: string[] | null
 }
 
+// One recorded file. `playable` is false for H.265, which browsers won't decode
+// — the UI then offers a download instead of a dead player.
+export type RecordingDto = {
+  id: string
+  cameraId: string
+  cameraName: string | null
+  fileName: string
+  startedAt: string
+  endedAt: string | null
+  durationSeconds: number | null
+  sizeBytes: number
+  codec: string | null
+  hasMotion: boolean
+  playable: boolean
+}
+
+// One dot on the archive calendar. Deliberately minimal: the browser groups
+// these into days in its own time zone.
+// A page of the archive: the rows plus where they sit in the whole set.
+export type RecordingPageDto = {
+  total: number
+  offset: number
+  limit: number
+  items: RecordingDto[]
+}
+
+export type CalendarPointDto = { startedAt: string; sizeBytes: number }
+
 export type GroupDto = { id: number; name: string; sortOrder: number }
 
 export type PtzPresetDto = { token: string; name: string }
 
+// A snapshot kept in the shared library (same rows the desktop browser reads).
+export type SnapshotDto = {
+  id: string
+  cameraId: string
+  cameraName: string | null
+  takenAt: string
+  width: number
+  height: number
+  hasThumb: boolean
+  source: string
+}
+
+// A Majestic config.json, flattened by the server into whatever scalar knobs the
+// live config actually exposes — the schema drifts between firmware builds, so
+// nothing here is a fixed field list.
+export type MajesticFieldDto = {
+  path: string
+  section: string
+  key: string
+  kind: 'string' | 'bool' | 'int' | 'number' | 'enum'
+  value: string
+  options: string[] | null
+  // Changing this one restarts the video pipeline (the tile will blink).
+  restart: boolean
+}
+
+export type MajesticDto = {
+  info: { model: string | null; firmware: string | null; chip: string | null; uptime: string | null } | null
+  nightMode: 'unknown' | 'day' | 'night' | 'auto'
+  sections: { name: string; fields: MajesticFieldDto[] }[]
+  rawJson: string
+}
+
 export type LayoutDto = {
   id: number
   name: string
@@ -126,6 +187,14 @@ export class ApiError extends Error {
   }
 }
 
+// Drops empty values so the URL only carries the filters that are actually set.
+function query(params: Record<string, string | number | undefined>): string {
+  const pairs = Object.entries(params)
+    .filter(([, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => [k, String(v)] as [string, string])
+  return pairs.length ? '?' + new URLSearchParams(pairs).toString() : ''
+}
+
 async function req<T>(method: string, path: string, body?: unknown): Promise<T> {
   const res = await fetch(path, {
     method,
@@ -174,6 +243,56 @@ export const api = {
     req<CameraDraftDto>('POST', '/api/v1/discovery/probe', body),
   addDiscovered: (body: DiscoveryAdd) => req<CameraDto>('POST', '/api/v1/discovery/add', body),
 
+  // The recorded archive. Playback is a ranged file response, so the URL goes
+  // straight into a <video> and the browser does its own seeking.
+  recordings: (filter: { cameraId?: string; from?: string; to?: string; offset?: number; limit?: number } = {}) =>
+    req<RecordingPageDto>(
+      'GET',
+      '/api/v1/recordings' +
+        query({
+          ...filter,
+          offset: filter.offset ? String(filter.offset) : undefined,
+          limit: filter.limit ? String(filter.limit) : undefined,
+        }),
+    ),
+  // Cut of a recording, as a download URL (start/end are seconds into the file).
+  recordingExportUrl: (id: string, start: number, end: number, precise: boolean) =>
+    `/api/v1/recordings/${id}/export?start=${start.toFixed(2)}&end=${end.toFixed(2)}` +
+    (precise ? '&precise=true' : ''),
+  recordingCalendar: (filter: { cameraId?: string; from?: string; to?: string } = {}) =>
+    req<CalendarPointDto[]>('GET', '/api/v1/recordings/calendar' + query(filter)),
+  recordingStreamUrl: (id: string, download = false) =>
+    `/api/v1/recordings/${id}/stream` + (download ? '?download=true' : ''),
+  deleteRecording: (id: string) => req<void>('DELETE', `/api/v1/recordings/${id}`),
+  // Camera ids currently being recorded by this server.
+  activeRecordings: () => req<string[]>('GET', '/api/v1/recordings/active'),
+  startRecording: (cameraId: string) =>
+    req<{ id: string; startedAt: string }>('POST', `/api/v1/cameras/${cameraId}/recording/start`),
+  stopRecording: (cameraId: string) =>
+    req<{ id: string; sizeBytes: number }>('POST', `/api/v1/cameras/${cameraId}/recording/stop`),
+
+  // A fresh still, straight from the camera (Majestic /image.jpg when available,
+  // otherwise one ffmpeg pull). Used as an <img> src and as a download target,
+  // so it's a URL rather than a fetch wrapper.
+  snapshotUrl: (id: string) => `/api/v1/cameras/${id}/snapshot`,
+
+  // Keep a still: captured the same way as the preview above, but written into
+  // the shared library so the desktop gallery sees it too.
+  saveSnapshot: (cameraId: string) => req<SnapshotDto>('POST', `/api/v1/cameras/${cameraId}/snapshots`),
+  snapshots: (q: { cameraId?: string; offset?: number; limit?: number } = {}) => {
+    const p = new URLSearchParams()
+    if (q.cameraId) p.set('cameraId', q.cameraId)
+    if (q.offset) p.set('offset', String(q.offset))
+    if (q.limit) p.set('limit', String(q.limit))
+    const qs = p.toString()
+    return req<{ total: number; offset: number; limit: number; items: SnapshotDto[] }>(
+      'GET', '/api/v1/snapshots' + (qs ? '?' + qs : ''))
+  },
+  // A URL rather than a fetch: these are <img> sources and download targets.
+  snapshotImageUrl: (id: string, thumb = false, download = false) =>
+    `/api/v1/snapshots/${id}/image` + (thumb ? '?thumb=true' : download ? '?download=true' : ''),
+  deleteSnapshot: (id: string) => req<void>('DELETE', `/api/v1/snapshots/${id}`),
+
   // PTZ. Movement is stateless on the server: each move carries a self-stop
   // timeout, so the caller must repeat it while a direction is held (see PtzPad)
   // and send stop on release. A camera that never gets the stop halts on its own.
@@ -188,6 +307,26 @@ export const api = {
   ptzDeletePreset: (id: string, token: string) =>
     req<void>('DELETE', `/api/v1/cameras/${id}/ptz/presets/${encodeURIComponent(token)}`),
 
+  // Camera settings (Majestic config.json). Manage-only on the server, reads
+  // included: the config carries the camera's own logins.
+  majestic: (id: string) => req<MajesticDto>('GET', `/api/v1/cameras/${id}/majestic`),
+  // Only changed fields travel; the server re-reads the camera's config and
+  // applies them onto it, so a stale tab can't revert someone else's edit.
+  majesticApply: (id: string, edits: { path: string; value: string }[]) =>
+    req<{ applied: number; restart: boolean }>('POST', `/api/v1/cameras/${id}/majestic/config`, { edits }),
+  majesticRaw: (id: string, json: string) =>
+    req<void>('POST', `/api/v1/cameras/${id}/majestic/raw`, { json }),
+  majesticNight: (id: string, mode: 'day' | 'night' | 'auto') =>
+    req<void>('POST', `/api/v1/cameras/${id}/majestic/night`, { mode }),
+  majesticMetrics: (id: string) =>
+    req<{ name: string; value: number }[]>('GET', `/api/v1/cameras/${id}/majestic/metrics`),
+
+  // Can this camera be talked to, and is someone already doing it? A real RTSP
+  // probe, so it costs a round-trip to the camera — the UI asks on press, not
+  // on page load.
+  talkProbe: (id: string) =>
+    req<{ supported: boolean | null; busy: boolean }>('GET', `/api/v1/cameras/${id}/talk`),
+
   system: () =>
     req<{ version: string; cameras: number; groups: number; sessions: number; streams: number }>(
       'GET',
diff --git a/src/OpenIPC.Viewer.Web.Client/src/auth.tsx b/src/OpenIPC.Viewer.Web.Client/src/auth.tsx
index 502ff32..8636bf2 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/auth.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/auth.tsx
@@ -16,7 +16,7 @@ type Auth = {
   logout: () => Promise<void>
 }
 
-export type Permission = 'ViewLive' | 'ViewArchive' | 'Ptz' | 'Export' | 'Manage'
+export type Permission = 'ViewLive' | 'ViewArchive' | 'Ptz' | 'Export' | 'Manage' | 'Talk'
 
 const Ctx = createContext<Auth | null>(null)
 
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveCalendar.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveCalendar.tsx
new file mode 100644
index 0000000..346173c
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveCalendar.tsx
@@ -0,0 +1,137 @@
+import { useMemo } from 'react'
+import type { CalendarPointDto } from '../api'
+import { useI18n } from '../i18n'
+import { Icon } from './Icon'
+
+// A month grid of the archive: which days have footage, and how much.
+//
+// Days are computed from the browser's own clock rather than the server's,
+// because "which day is this recording on" is a question about the viewer's
+// time zone — a phone in another country must not see everything shifted.
+// Grouping local Date objects also gets DST right for free.
+export function ArchiveCalendar({
+  month, points, selected, onPickMonth, onPickDay,
+}: {
+  month: Date
+  points: CalendarPointDto[]
+  selected: string | null
+  onPickMonth: (next: Date) => void
+  onPickDay: (dayKey: string | null) => void
+}) {
+  const { t, lang } = useI18n()
+
+  const byDay = useMemo(() => {
+    const map = new Map<string, { count: number; bytes: number }>()
+    for (const p of points) {
+      const key = dayKey(new Date(p.startedAt))
+      const cur = map.get(key) ?? { count: 0, bytes: 0 }
+      map.set(key, { count: cur.count + 1, bytes: cur.bytes + p.sizeBytes })
+    }
+    return map
+  }, [points])
+
+  const busiest = useMemo(
+    () => Math.max(1, ...[...byDay.values()].map((d) => d.count)),
+    [byDay],
+  )
+
+  const cells = useMemo(() => {
+    const first = new Date(month.getFullYear(), month.getMonth(), 1)
+    // Monday-first, like the desktop calendar and both UI languages expect.
+    const lead = (first.getDay() + 6) % 7
+    const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate()
+    const out: (Date | null)[] = Array.from({ length: lead }, () => null)
+    for (let d = 1; d <= daysInMonth; d++) out.push(new Date(month.getFullYear(), month.getMonth(), d))
+    return out
+  }, [month])
+
+  const monthLabel = month.toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-GB', {
+    month: 'long',
+    year: 'numeric',
+  })
+  const shift = (delta: number) => onPickMonth(new Date(month.getFullYear(), month.getMonth() + delta, 1))
+
+  return (
+    <div className="calendar">
+      <div className="calendar-head">
+        <button title={t('Archive.PrevMonth')} onClick={() => shift(-1)}>
+          <Icon name="chevronLeft" size={14} />
+        </button>
+        <span className="calendar-month">{monthLabel}</span>
+        <button title={t('Archive.NextMonth')} onClick={() => shift(1)}>
+          <Icon name="chevronRight" size={14} />
+        </button>
+        {selected && (
+          <button className="row" onClick={() => onPickDay(null)}>
+            <Icon name="x" size={13} /> {t('Archive.ClearDay')}
+          </button>
+        )}
+      </div>
+
+      <div className="calendar-grid">
+        {weekdayLabels(lang).map((w) => (
+          <span key={w} className="calendar-weekday">
+            {w}
+          </span>
+        ))}
+        {cells.map((date, i) => {
+          if (!date) return <span key={`pad-${i}`} />
+          const key = dayKey(date)
+          const activity = byDay.get(key)
+          const isSelected = key === selected
+          return (
+            <button
+              key={key}
+              className={
+                'calendar-day' +
+                (activity ? ' has-activity' : '') +
+                (isSelected ? ' selected' : '') +
+                (isToday(date) ? ' today' : '')
+              }
+              // Shading tracks how busy the day was against the busiest one,
+              // the same normalisation the desktop calendar uses.
+              style={activity ? { opacity: 0.45 + 0.55 * (activity.count / busiest) } : undefined}
+              disabled={!activity}
+              title={activity ? `${activity.count} · ${(activity.bytes / (1024 * 1024)).toFixed(0)} MB` : undefined}
+              onClick={() => onPickDay(isSelected ? null : key)}
+            >
+              {date.getDate()}
+              {activity && <span className="calendar-dot" />}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// Local-date key (YYYY-MM-DD) — never toISOString(), which would shift the day
+// for anyone east or west of UTC.
+export function dayKey(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+// The [start, end) UTC instants of a local day, for the server's range filter.
+export function dayRange(key: string): { from: string; to: string } {
+  const [y, m, d] = key.split('-').map(Number)
+  const start = new Date(y, m - 1, d)
+  const end = new Date(y, m - 1, d + 1)
+  return { from: start.toISOString(), to: end.toISOString() }
+}
+
+export function monthRange(month: Date): { from: string; to: string } {
+  const start = new Date(month.getFullYear(), month.getMonth(), 1)
+  const end = new Date(month.getFullYear(), month.getMonth() + 1, 1)
+  return { from: start.toISOString(), to: end.toISOString() }
+}
+
+function isToday(date: Date): boolean {
+  return dayKey(date) === dayKey(new Date())
+}
+
+function weekdayLabels(lang: string): string[] {
+  return lang === 'ru'
+    ? ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс']
+    : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveTabs.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveTabs.tsx
new file mode 100644
index 0000000..4d92962
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/ArchiveTabs.tsx
@@ -0,0 +1,19 @@
+import { NavLink } from 'react-router-dom'
+import { useI18n } from '../i18n'
+
+// Recordings and snapshots are two views of the same archive, so they share the
+// one nav entry and switch here instead of taking a sidebar slot each — the nav
+// is four items on purpose (it doubles as the phone tab bar).
+export function ArchiveTabs() {
+  const { t } = useI18n()
+  return (
+    <div className="tabs" style={{ marginBottom: 16 }}>
+      <NavLink to="/recordings" className={({ isActive }) => (isActive ? 'active' : '')}>
+        {t('Recordings.Tab')}
+      </NavLink>
+      <NavLink to="/snapshots" className={({ isActive }) => (isActive ? 'active' : '')}>
+        {t('Snapshots.Title')}
+      </NavLink>
+    </div>
+  )
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/Icon.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/Icon.tsx
new file mode 100644
index 0000000..dda0fd7
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/Icon.tsx
@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+
+// The SPA's icon set: inline SVG in the Lucide style the desktop app already
+// uses (24-unit box, no fill, 2-unit round strokes). Inline rather than a font
+// or an icon package so there's nothing to load and nothing to keep in sync.
+//
+// Never emoji: those render in a system font that differs per platform, ignore
+// the theme colour, and don't scale with the button they sit in. These inherit
+// `currentColor` and take their size from the caller.
+const PATHS: Record<string, ReactNode> = {
+  plus: <path d="M12 5v14M5 12h14" />,
+  minus: <path d="M5 12h14" />,
+  x: <path d="M6 6l12 12M18 6L6 18" />,
+  record: <circle cx="12" cy="12" r="6" fill="currentColor" stroke="none" />,
+  back: <path d="M19 12H5M12 19l-7-7 7-7" />,
+  search: (
+    <>
+      <circle cx="11" cy="11" r="7" />
+      <path d="M20 20l-3.5-3.5" />
+    </>
+  ),
+  play: <path d="M6 4l14 8-14 8V4z" fill="currentColor" stroke="none" />,
+  stop: <rect x="6" y="6" width="12" height="12" rx="1.5" fill="currentColor" stroke="none" />,
+  download: <path d="M12 3v12M7 11l5 5 5-5M4 21h16" />,
+  camera: (
+    <>
+      <path d="M4 8h3l2-2h6l2 2h3v11H4V8z" />
+      <circle cx="12" cy="13" r="3.5" />
+    </>
+  ),
+  maximize: <path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5" />,
+  volumeOn: (
+    <>
+      <path d="M11 5L6 9H3v6h3l5 4V5z" />
+      <path d="M16 9a4 4 0 0 1 0 6M19 6a8 8 0 0 1 0 12" />
+    </>
+  ),
+  volumeOff: (
+    <>
+      <path d="M11 5L6 9H3v6h3l5 4V5z" />
+      <path d="M17 9l4 6M21 9l-4 6" />
+    </>
+  ),
+  chevronLeft: <path d="M15 5l-7 7 7 7" />,
+  chevronRight: <path d="M9 5l7 7-7 7" />,
+  mic: (
+    <>
+      <rect x="9" y="2" width="6" height="11" rx="3" />
+      <path d="M5 10a7 7 0 0 0 14 0M12 17v5" />
+    </>
+  ),
+  refresh: (
+    <>
+      <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+      <path d="M21 3v6h-6" />
+    </>
+  ),
+  chevronUp: <path d="M5 15l7-7 7 7" />,
+  chevronDown: <path d="M5 9l7 7 7-7" />,
+  arrowUpLeft: <path d="M17 17L7 7M7 7v7M7 7h7" />,
+  arrowUpRight: <path d="M7 17L17 7M17 7v7M17 7h-7" />,
+  arrowDownLeft: <path d="M17 7L7 17M7 17v-7M7 17h7" />,
+  arrowDownRight: <path d="M7 7l10 10M17 17v-7M17 17h-7" />,
+}
+
+export type IconName = keyof typeof PATHS
+
+export function Icon({ name, size = 16 }: { name: IconName; size?: number }) {
+  return (
+    <svg
+      className="icon"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      {PATHS[name]}
+    </svg>
+  )
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/LiveTile.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/LiveTile.tsx
index cdd2ff7..06d9dcb 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/components/LiveTile.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/LiveTile.tsx
@@ -1,6 +1,10 @@
-import { memo, useRef, useState } from 'react'
+import { memo, useState } from 'react'
 import type { CameraDto } from '../api'
+import { useDigitalZoom } from '../hooks/useDigitalZoom'
 import { useLiveTile } from '../hooks/useLiveTile'
+import { useI18n } from '../i18n'
+import { Icon } from './Icon'
+import { SnapshotModal } from './SnapshotModal'
 
 // Collapse the raw useLiveTile status string into a small set of visual states:
 // a dot colour + a terse label, plus whether to show the "still connecting"
@@ -23,21 +27,27 @@ export function statusKind(status: string): { kind: Kind; label: string } {
 // borrows a pooled element from live/liveSession.ts, so even an actual unmount
 // (route change, page flip) leaves the stream running for a grace period.
 export const LiveTile = memo(function LiveTile({ camera }: { camera: CameraDto }) {
+  const { t } = useI18n()
   const [slot, setSlot] = useState<HTMLDivElement | null>(null)
-  const cellRef = useRef<HTMLDivElement>(null)
-  const status = useLiveTile(slot, camera.id)
+  const [snapshot, setSnapshot] = useState(false)
+  const [cell, setCell] = useState<HTMLDivElement | null>(null)
+  const { status, session } = useLiveTile(slot, camera.id)
   const { kind, label } = statusKind(status)
+  const zoom = useDigitalZoom(cell)
 
   const toggleFullscreen = () => {
-    const el = cellRef.current
-    if (!el) return
+    if (!cell) return
     if (document.fullscreenElement) void document.exitFullscreen()
-    else void el.requestFullscreen?.()
+    else void cell.requestFullscreen?.()
   }
 
   return (
-    <div className="cell" ref={cellRef} onDoubleClick={toggleFullscreen}>
-      <div className="video-slot" ref={setSlot} />
+    <div
+      className={'cell' + (zoom.zoomed ? ' zoomed' : '')}
+      ref={setCell}
+      onDoubleClick={toggleFullscreen}
+    >
+      <div className="video-slot" ref={setSlot} style={{ transform: zoom.transform }} />
       {kind === 'connecting' && (
         <div className="loading">
           <span className="spinner" />
@@ -48,9 +58,40 @@ export const LiveTile = memo(function LiveTile({ camera }: { camera: CameraDto }
         {label}
       </span>
       <span className="label">{camera.name}</span>
-      <button className="expand" title="Fullscreen" onClick={toggleFullscreen}>
-        ⤢
+      {/* Zoom controls: the wheel does this too, but a wall is often driven by
+          touch, where there is no wheel. Shown zoomed-in regardless of hover so
+          the way out is always visible. */}
+      <div className="zoom-pad">
+        {zoom.zoomed && (
+          <button title={t('Tile.ZoomReset')} onClick={zoom.reset}>
+            <span className="zoom-level">{zoom.zoom.toFixed(1)}×</span>
+          </button>
+        )}
+        <button title={t('Tile.ZoomOut')} onClick={zoom.zoomOut} disabled={!zoom.zoomed}>
+          <Icon name="minus" size={15} />
+        </button>
+        <button title={t('Tile.ZoomIn')} onClick={zoom.zoomIn}>
+          <Icon name="plus" size={15} />
+        </button>
+      </div>
+      {session?.hasAudio && (
+        <button
+          className="listen"
+          title={session.muted ? t('Tile.Listen') : t('Tile.Mute')}
+          onClick={() => session.setMuted(!session.muted)}
+        >
+          <Icon name={session.muted ? 'volumeOff' : 'volumeOn'} size={15} />
+        </button>
+      )}
+      <button className="snap" title={t('Snapshot.Take')} onClick={() => setSnapshot(true)}>
+        <Icon name="camera" size={15} />
+      </button>
+      <button className="expand" title={t('Tile.Fullscreen')} onClick={toggleFullscreen}>
+        <Icon name="maximize" size={15} />
       </button>
+      {snapshot && (
+        <SnapshotModal cameraId={camera.id} cameraName={camera.name} onClose={() => setSnapshot(false)} />
+      )}
     </div>
   )
 })
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/MajesticPanel.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/MajesticPanel.tsx
new file mode 100644
index 0000000..502b6d0
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/MajesticPanel.tsx
@@ -0,0 +1,371 @@
+import { useEffect, useMemo, useState } from 'react'
+import { api, ApiError, type MajesticDto, type MajesticFieldDto } from '../api'
+import { useI18n } from '../i18n'
+import { Icon } from './Icon'
+
+// The camera's own settings, on the camera page.
+//
+// Schema-driven like the desktop editor: the server flattens the live
+// config.json and we render a control per scalar knob, because the Majestic
+// schema drifts between firmware builds and a hardcoded form would show fields
+// that aren't there and hide the ones that are.
+//
+// The ISP section gets its own panel above the rest. Not cosmetic: Majestic
+// re-reads those live, so changing exposure or flip is the one edit that does
+// NOT restart the encoder — and while you're tuning a picture, restarting the
+// stream on every nudge makes the job impossible.
+export function MajesticPanel({ cameraId }: { cameraId: string }) {
+  const { t } = useI18n()
+  const [data, setData] = useState<MajesticDto | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  // A camera that doesn't run Majestic isn't an error to report — there is
+  // simply no panel for it, so the section disappears entirely.
+  const [absent, setAbsent] = useState(false)
+  const [values, setValues] = useState<Record<string, string>>({})
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState<string | null>(null)
+  const [filter, setFilter] = useState('')
+  const [showMetrics, setShowMetrics] = useState(false)
+  const [showRaw, setShowRaw] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const d = await api.majestic(cameraId)
+      setData(d)
+      setValues(Object.fromEntries(d.sections.flatMap((s) => s.fields).map((f) => [f.path, f.value])))
+    } catch (e) {
+      if (e instanceof ApiError && e.code === 'majestic_unavailable') setAbsent(true)
+      else setError(t('Majestic.Unreachable'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+    // Reloading when the camera changes is the whole dependency; `load` is
+    // recreated every render by design.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cameraId])
+
+  const allFields = useMemo(() => data?.sections.flatMap((s) => s.fields) ?? [], [data])
+  const isp = useMemo(() => allFields.filter((f) => f.section === 'isp'), [allFields])
+  const rest = useMemo(() => data?.sections.filter((s) => s.name !== 'isp') ?? [], [data])
+
+  const changed = (f: MajesticFieldDto) => !sameValue(f, values[f.path] ?? f.value)
+  const changedIn = (fields: MajesticFieldDto[]) => fields.filter(changed)
+
+  const apply = async (fields: MajesticFieldDto[]) => {
+    const edits = changedIn(fields).map((f) => ({ path: f.path, value: values[f.path] }))
+    if (edits.length === 0) {
+      setStatus(t('Majestic.NoChanges'))
+      return
+    }
+    setBusy(true)
+    setStatus(null)
+    try {
+      const res = await api.majesticApply(cameraId, edits)
+      setStatus(res.restart ? t('Majestic.AppliedRestart') : t('Majestic.Applied'))
+      // Re-read rather than trust the local copy: the camera normalises values
+      // (and may refuse one), so the panel should show what it actually holds.
+      await load()
+    } catch {
+      setStatus(t('Majestic.ApplyFailed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const revert = () => {
+    if (!data) return
+    setValues(Object.fromEntries(allFields.map((f) => [f.path, f.value])))
+    setStatus(null)
+  }
+
+  const setNight = async (mode: 'day' | 'night' | 'auto') => {
+    setBusy(true)
+    try {
+      await api.majesticNight(cameraId, mode)
+      await load()
+    } catch {
+      setStatus(t('Majestic.ApplyFailed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (absent) return null
+  if (loading) return <div className="spin">{t('Common.Loading')}</div>
+  if (error || !data) return <p className="muted">{error}</p>
+
+  const needle = filter.trim().toLowerCase()
+  const visibleSections = rest
+    .map((s) => ({
+      name: s.name,
+      fields: needle ? s.fields.filter((f) => f.path.toLowerCase().includes(needle)) : s.fields,
+    }))
+    .filter((s) => s.fields.length > 0)
+  const dirty = changedIn(allFields).length
+
+  return (
+    <section className="majestic">
+      <div className="toolbar">
+        <h2 style={{ margin: 0, fontSize: 15 }}>{t('Majestic.Title')}</h2>
+        <span className="muted" style={{ flex: 1, fontSize: 12 }}>
+          {[data.info?.model, data.info?.firmware, data.info?.chip, data.info?.uptime]
+            .filter(Boolean)
+            .join(' · ')}
+        </span>
+        <button className="row" onClick={() => void load()} disabled={busy}>
+          <Icon name="refresh" size={13} /> {t('Majestic.Reload')}
+        </button>
+      </div>
+
+      <div className="row" style={{ marginBottom: 12, flexWrap: 'wrap' }}>
+        <span className="muted" style={{ fontSize: 12 }}>{t('Majestic.NightMode')}:</span>
+        {(['day', 'night', 'auto'] as const).map((m) => (
+          <button
+            key={m}
+            className={data.nightMode === m ? 'active' : ''}
+            disabled={busy}
+            onClick={() => void setNight(m)}
+          >
+            {t('Majestic.Night.' + m)}
+          </button>
+        ))}
+      </div>
+
+      {isp.length > 0 && (
+        <div className="majestic-block">
+          <div className="toolbar">
+            <h3>{t('Majestic.Isp')}</h3>
+            <span className="muted" style={{ flex: 1, fontSize: 12 }}>{t('Majestic.IspHint')}</span>
+            <button className="primary" disabled={busy} onClick={() => void apply(isp)}>
+              {t('Majestic.ApplyIsp')}
+            </button>
+          </div>
+          <div className="fields">
+            {isp.map((f) => (
+              <FieldRow
+                key={f.path}
+                field={f}
+                value={values[f.path] ?? f.value}
+                modified={changed(f)}
+                onChange={(v) => setValues((p) => ({ ...p, [f.path]: v }))}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="majestic-block">
+        <div className="toolbar">
+          <h3>{t('Majestic.Config')}</h3>
+          <input
+            className="filter"
+            placeholder={t('Majestic.Filter')}
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+          />
+          <span style={{ flex: 1 }} />
+          {dirty > 0 && <span className="muted" style={{ fontSize: 12 }}>{t('Majestic.Changed')}: {dirty}</span>}
+          <button disabled={busy || dirty === 0} onClick={revert}>{t('Majestic.Revert')}</button>
+          <button className="primary" disabled={busy} onClick={() => void apply(allFields)}>
+            {t('Common.Save')}
+          </button>
+        </div>
+        {visibleSections.map((s) => (
+          <div key={s.name} className="majestic-section">
+            <h4>{s.name}</h4>
+            <div className="fields">
+              {s.fields.map((f) => (
+                <FieldRow
+                  key={f.path}
+                  field={f}
+                  value={values[f.path] ?? f.value}
+                  modified={changed(f)}
+                  onChange={(v) => setValues((p) => ({ ...p, [f.path]: v }))}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+        {visibleSections.length === 0 && <p className="muted">{t('Majestic.NoMatches')}</p>}
+      </div>
+
+      {status && <p className="muted">{status}</p>}
+
+      <div className="majestic-block">
+        <button className="row" onClick={() => setShowMetrics(!showMetrics)}>
+          <Icon name={showMetrics ? 'chevronDown' : 'chevronRight'} size={13} /> {t('Majestic.Metrics')}
+        </button>
+        {showMetrics && <Metrics cameraId={cameraId} />}
+      </div>
+
+      <div className="majestic-block">
+        <button className="row" onClick={() => setShowRaw(!showRaw)}>
+          <Icon name={showRaw ? 'chevronDown' : 'chevronRight'} size={13} /> {t('Majestic.Raw')}
+        </button>
+        {showRaw && <RawEditor cameraId={cameraId} initial={data.rawJson} onSaved={load} />}
+      </div>
+    </section>
+  )
+}
+
+// One knob. The control follows the field's kind, and the value stays a string
+// end-to-end (the server coerces it back to the right JSON type on write-back).
+function FieldRow({ field, value, modified, onChange }: {
+  field: MajesticFieldDto
+  value: string
+  modified: boolean
+  onChange: (v: string) => void
+}) {
+  const { t } = useI18n()
+  return (
+    <label className={'field' + (modified ? ' modified' : '')}>
+      <span className="k">
+        {field.key}
+        {field.restart && <span className="restart" title={t('Majestic.RestartHint')}>↻</span>}
+      </span>
+      {field.kind === 'bool' ? (
+        <input
+          type="checkbox"
+          checked={value === 'true'}
+          onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
+        />
+      ) : field.kind === 'enum' && field.options ? (
+        <select value={value} onChange={(e) => onChange(e.target.value)}>
+          {/* A live value outside the known set must not be silently rewritten. */}
+          {!field.options.includes(value) && <option value={value}>{value}</option>}
+          {field.options.map((o) => (
+            <option key={o} value={o}>{o}</option>
+          ))}
+        </select>
+      ) : (
+        <input
+          type={field.kind === 'int' || field.kind === 'number' ? 'number' : 'text'}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+    </label>
+  )
+}
+
+// Read-only telemetry from the camera's /metrics. Loaded on expand, never
+// polled: this is a "why is it hot" glance, not a dashboard.
+function Metrics({ cameraId }: { cameraId: string }) {
+  const { t } = useI18n()
+  const [rows, setRows] = useState<{ name: string; value: number }[] | null>(null)
+  const [failed, setFailed] = useState(false)
+
+  const load = async () => {
+    setFailed(false)
+    try {
+      setRows(await api.majesticMetrics(cameraId))
+    } catch {
+      setFailed(true)
+    }
+  }
+
+  useEffect(() => {
+    void load()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cameraId])
+
+  if (failed) return <p className="muted">{t('Majestic.NoMetrics')}</p>
+  if (!rows) return <div className="spin">{t('Common.Loading')}</div>
+  return (
+    <>
+      <button className="row" onClick={() => void load()}>
+        <Icon name="refresh" size={13} /> {t('Majestic.Reload')}
+      </button>
+      <table className="list metrics">
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.name}>
+              <td>{r.name}</td>
+              <td style={{ textAlign: 'right' }}>{r.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  )
+}
+
+// The escape hatch: the whole config.json as text. Parsed locally before it can
+// be sent, so a typo is caught here rather than by a camera that then reboots
+// into a broken config.
+function RawEditor({ cameraId, initial, onSaved }: {
+  cameraId: string
+  initial: string
+  onSaved: () => Promise<void>
+}) {
+  const { t } = useI18n()
+  const [text, setText] = useState(() => pretty(initial))
+  const [status, setStatus] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  const valid = useMemo(() => {
+    try {
+      JSON.parse(text)
+      return true
+    } catch {
+      return false
+    }
+  }, [text])
+
+  const save = async () => {
+    setBusy(true)
+    setStatus(null)
+    try {
+      await api.majesticRaw(cameraId, text)
+      setStatus(t('Majestic.Applied'))
+      await onSaved()
+    } catch {
+      setStatus(t('Majestic.ApplyFailed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <p className="muted" style={{ fontSize: 12 }}>{t('Majestic.RawHint')}</p>
+      <textarea className="raw-json" value={text} onChange={(e) => setText(e.target.value)} rows={18} spellCheck={false} />
+      <div className="row">
+        <button className="primary" disabled={!valid || busy} onClick={() => void save()}>
+          {t('Common.Save')}
+        </button>
+        {!valid && <span className="err">{t('Majestic.BadJson')}</span>}
+        {status && <span className="muted">{status}</span>}
+      </div>
+    </>
+  )
+}
+
+function pretty(json: string): string {
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2)
+  } catch {
+    return json
+  }
+}
+
+// Mirrors the server's kind-aware comparison, so "30" vs "30.0" doesn't light up
+// as an edit and then get dropped as a no-op on save.
+function sameValue(field: MajesticFieldDto, value: string): boolean {
+  const a = (field.value ?? '').trim()
+  const b = (value ?? '').trim()
+  if (field.kind === 'bool') return a.toLowerCase() === b.toLowerCase()
+  if (field.kind === 'int' || field.kind === 'number') {
+    const na = Number(a)
+    const nb = Number(b)
+    if (!Number.isNaN(na) && !Number.isNaN(nb)) return na === nb
+  }
+  return a === b
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/PtzPad.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/PtzPad.tsx
index e9f7841..c0571fd 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/components/PtzPad.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/PtzPad.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { api, type PtzPresetDto } from '../api'
 import { useI18n } from '../i18n'
+import { Icon } from './Icon'
 
 // Hold-to-move PTZ controls plus presets.
 //
@@ -125,22 +126,22 @@ export function PtzPad({ cameraId }: { cameraId: string }) {
   return (
     <div className="ptz">
       <div className="ptz-pad">
-        <button {...hold({ panX: -1, tiltY: 1 })} title={t('Ptz.UpLeft')}>↖</button>
-        <button {...hold({ tiltY: 1 })} title={t('Ptz.Up')}>↑</button>
-        <button {...hold({ panX: 1, tiltY: 1 })} title={t('Ptz.UpRight')}>↗</button>
-        <button {...hold({ panX: -1 })} title={t('Ptz.Left')}>←</button>
-        <button onClick={() => void stop()} title={t('Ptz.Stop')}>■</button>
-        <button {...hold({ panX: 1 })} title={t('Ptz.Right')}>→</button>
-        <button {...hold({ panX: -1, tiltY: -1 })} title={t('Ptz.DownLeft')}>↙</button>
-        <button {...hold({ tiltY: -1 })} title={t('Ptz.Down')}>↓</button>
-        <button {...hold({ panX: 1, tiltY: -1 })} title={t('Ptz.DownRight')}>↘</button>
+        <button {...hold({ panX: -1, tiltY: 1 })} title={t('Ptz.UpLeft')}><Icon name="arrowUpLeft" size={18} /></button>
+        <button {...hold({ tiltY: 1 })} title={t('Ptz.Up')}><Icon name="chevronUp" size={18} /></button>
+        <button {...hold({ panX: 1, tiltY: 1 })} title={t('Ptz.UpRight')}><Icon name="arrowUpRight" size={18} /></button>
+        <button {...hold({ panX: -1 })} title={t('Ptz.Left')}><Icon name="chevronLeft" size={18} /></button>
+        <button onClick={() => void stop()} title={t('Ptz.Stop')}><Icon name="stop" size={18} /></button>
+        <button {...hold({ panX: 1 })} title={t('Ptz.Right')}><Icon name="chevronRight" size={18} /></button>
+        <button {...hold({ panX: -1, tiltY: -1 })} title={t('Ptz.DownLeft')}><Icon name="arrowDownLeft" size={18} /></button>
+        <button {...hold({ tiltY: -1 })} title={t('Ptz.Down')}><Icon name="chevronDown" size={18} /></button>
+        <button {...hold({ panX: 1, tiltY: -1 })} title={t('Ptz.DownRight')}><Icon name="arrowDownRight" size={18} /></button>
       </div>
 
       <div className="ptz-side">
         <div className="ptz-zoom">
-          <button {...hold({ zoom: 1 })} title={t('Ptz.ZoomIn')}>＋</button>
+          <button {...hold({ zoom: 1 })} title={t('Ptz.ZoomIn')}><Icon name="plus" size={18} /></button>
           <span className="muted">{t('Ptz.Zoom')}</span>
-          <button {...hold({ zoom: -1 })} title={t('Ptz.ZoomOut')}>－</button>
+          <button {...hold({ zoom: -1 })} title={t('Ptz.ZoomOut')}><Icon name="minus" size={18} /></button>
         </div>
 
         <label>
@@ -177,7 +178,7 @@ export function PtzPad({ cameraId }: { cameraId: string }) {
                   )
                 }
               >
-                ×
+                <Icon name="x" size={13} />
               </button>
             </span>
           ))}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/Shell.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/Shell.tsx
index 0029db8..cf9540c 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/components/Shell.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/Shell.tsx
@@ -37,38 +37,18 @@ export function Shell() {
             <rect x="1" y="5" width="15" height="14" rx="2" />
           </svg>
         </NavItem>
-        {can('Manage') && (
-        <NavItem to="/discovery" label={t('Nav.Discovery')}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
-            <circle cx="12" cy="12" r="2" />
-            <path d="M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4" />
-            <path d="M19.1 4.9a10 10 0 0 1 0 14.2M4.9 19.1a10 10 0 0 1 0-14.2" />
-          </svg>
-        </NavItem>
-        )}
-        <NavItem to="/groups" label={t('Nav.Groups')}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinejoin="round">
-            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-            <circle cx="9" cy="7" r="4" />
-            <path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-          </svg>
-        </NavItem>
-        {can('Manage') && (
-        <NavItem to="/users" label={t('Nav.Users')}>
+        {can('ViewArchive') && (
+        <NavItem to="/recordings" label={t('Nav.Recordings')}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinejoin="round">
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-            <circle cx="12" cy="7" r="4" />
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
           </svg>
         </NavItem>
         )}
-        <NavItem to="/system" label={t('Nav.System')}>
+        <NavItem to="/settings" label={t('Nav.Settings')}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
-            <line x1="4" y1="6" x2="20" y2="6" />
-            <line x1="4" y1="12" x2="20" y2="12" />
-            <line x1="4" y1="18" x2="20" y2="18" />
-            <circle cx="9" cy="6" r="2" fill="var(--bg0)" />
-            <circle cx="15" cy="12" r="2" fill="var(--bg0)" />
-            <circle cx="9" cy="18" r="2" fill="var(--bg0)" />
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 8.9 19a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 5 8.9a1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9.5a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
           </svg>
         </NavItem>
 
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/SnapshotModal.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/SnapshotModal.tsx
new file mode 100644
index 0000000..259bc90
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/SnapshotModal.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react'
+import { api } from '../api'
+import { useI18n } from '../i18n'
+import { useAuth } from '../auth'
+import { Icon } from './Icon'
+
+// A still, taken on demand and shown full size with a download link.
+//
+// The image is fetched as a blob rather than pointed at with <img src>: the
+// endpoint answers 502 when the camera doesn't respond, and an <img> would just
+// show a broken icon with no way to say why. A blob URL also makes the download
+// keep the name we choose instead of "snapshot".
+export function SnapshotModal({ cameraId, cameraName, onClose }: {
+  cameraId: string
+  cameraName: string
+  onClose: () => void
+}) {
+  const { t } = useI18n()
+  const { can } = useAuth()
+  const [url, setUrl] = useState<string | null>(null)
+  const [error, setError] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState<string | null>(null)
+
+  // Saving re-takes the shot rather than uploading the bytes on screen: the
+  // browser holding a JPEG is not a reason to trust it with what lands in the
+  // library, and the second capture is one HTTP call to a camera that has just
+  // proved it answers.
+  const save = async () => {
+    setSaving(true)
+    try {
+      await api.saveSnapshot(cameraId)
+      setSaved(t('Snapshot.Saved'))
+    } catch {
+      setSaved(t('Snapshot.SaveFailed'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  useEffect(() => {
+    let revoked: string | null = null
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await fetch(api.snapshotUrl(cameraId), { credentials: 'same-origin' })
+        if (!res.ok) throw new Error(String(res.status))
+        const blob = await res.blob()
+        if (cancelled) return
+        revoked = URL.createObjectURL(blob)
+        setUrl(revoked)
+      } catch {
+        if (!cancelled) setError(true)
+      }
+    })()
+    return () => {
+      cancelled = true
+      if (revoked) URL.revokeObjectURL(revoked)
+    }
+  }, [cameraId])
+
+  // Local time in the filename, since that's the clock the viewer thinks in.
+  const stamp = new Date()
+    .toLocaleString('sv-SE')
+    .replace(/[: ]/g, '-')
+  const fileName = `${cameraName.replace(/[^\w.-]+/g, '_')}-${stamp}.jpg`
+
+  return (
+    <div className="backdrop" onClick={onClose}>
+      <div className="modal snapshot-modal" onClick={(e) => e.stopPropagation()}>
+        <h2>{cameraName}</h2>
+        {error ? (
+          <p className="err">{t('Snapshot.Failed')}</p>
+        ) : url ? (
+          <img src={url} alt={cameraName} />
+        ) : (
+          <p className="muted">{t('Snapshot.Taking')}</p>
+        )}
+        {saved && <p className="muted">{saved}</p>}
+        <div className="modal-actions">
+          <button onClick={onClose}>{t('Common.Close')}</button>
+          {url && can('ViewArchive') && (
+            <button onClick={() => void save()} disabled={saving || saved !== null}>
+              {t('Snapshot.Save')}
+            </button>
+          )}
+          {url && (
+            <a className="button-link row" href={url} download={fileName}>
+              <Icon name="download" /> {t('Snapshot.Download')}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/StillTile.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/StillTile.tsx
new file mode 100644
index 0000000..cc85006
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/StillTile.tsx
@@ -0,0 +1,86 @@
+import { memo, useEffect, useState } from 'react'
+import { api, type CameraDto } from '../api'
+import { useI18n } from '../i18n'
+
+// A tile that shows a periodically refreshed still instead of a live stream —
+// the web counterpart of the desktop grid's "stills" mode.
+//
+// The point is cost: a 25-cell wall means 25 ffmpeg sessions and 25 sockets,
+// while a still costs one HTTP GET per camera per interval and the camera
+// itself encodes the JPEG (Majestic /image.jpg). For a wall you glance at,
+// a frame every few seconds is what you actually need.
+//
+// Fetched as a blob rather than pointed at with <img src>, for the same reason
+// as SnapshotModal: the endpoint answers 502 when the camera doesn't respond,
+// and an <img> would only show a broken icon. It also means a failed refresh
+// leaves the previous frame on screen instead of blanking the tile.
+export const StillTile = memo(function StillTile({ camera, intervalSeconds }: {
+  camera: CameraDto
+  intervalSeconds: number
+}) {
+  const { t } = useI18n()
+  const [url, setUrl] = useState<string | null>(null)
+  const [takenAt, setTakenAt] = useState<Date | null>(null)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    let timer: number | undefined
+    // The frame on screen (`shown`) is never revoked while it's displayed: the
+    // one released at the top of a tick is the generation before it, which the
+    // browser stopped referencing an interval ago.
+    let shown: string | null = null
+    let stale: string | null = null
+
+    const tick = async () => {
+      if (stale) {
+        URL.revokeObjectURL(stale)
+        stale = null
+      }
+      try {
+        const res = await fetch(api.snapshotUrl(camera.id), {
+          credentials: 'same-origin',
+          cache: 'no-store',
+        })
+        if (!res.ok) throw new Error(String(res.status))
+        const blob = await res.blob()
+        if (cancelled) return
+        const next = URL.createObjectURL(blob)
+        stale = shown
+        shown = next
+        setUrl(next)
+        setTakenAt(new Date())
+        setFailed(false)
+      } catch {
+        if (!cancelled) setFailed(true)
+      }
+      // Chained rather than setInterval: a camera that takes eight seconds to
+      // answer must not have requests queueing up behind it.
+      if (!cancelled) timer = window.setTimeout(tick, Math.max(1, intervalSeconds) * 1000)
+    }
+
+    void tick()
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+      if (shown) URL.revokeObjectURL(shown)
+      if (stale) URL.revokeObjectURL(stale)
+    }
+  }, [camera.id, intervalSeconds])
+
+  return (
+    <div className="cell">
+      {url ? <img className="still" src={url} alt={camera.name} /> : null}
+      {!url && !failed && (
+        <div className="loading">
+          <span className="spinner" />
+        </div>
+      )}
+      <span className="status">
+        <span className={'dot ' + (failed ? 'error' : url ? 'live' : 'connecting')} />
+        {failed ? t('Grid.StillFailed') : takenAt ? takenAt.toLocaleTimeString() : t('Snapshot.Taking')}
+      </span>
+      <span className="label">{camera.name}</span>
+    </div>
+  )
+})
diff --git a/src/OpenIPC.Viewer.Web.Client/src/components/TalkButton.tsx b/src/OpenIPC.Viewer.Web.Client/src/components/TalkButton.tsx
new file mode 100644
index 0000000..8963a1a
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/components/TalkButton.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react'
+import { api, ApiError } from '../api'
+import { useI18n } from '../i18n'
+import { Icon } from './Icon'
+import { canCaptureMic, startTalking, type TalkHandle } from '../live/talkSession'
+
+// Push-to-talk: held, not toggled. A talk button that latches is a button that
+// gets left on, and the thing on the other end is a speaker in a room with
+// people in it.
+export function TalkButton({ cameraId }: { cameraId: string }) {
+  const { t } = useI18n()
+  const [talking, setTalking] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+  const handle = useRef<TalkHandle | null>(null)
+  const secure = canCaptureMic()
+
+  // Never leave the camera's speaker open because a route changed.
+  useEffect(() => () => void handle.current?.stop(), [])
+
+  const begin = async () => {
+    if (talking || busy) return
+    setBusy(true)
+    setMessage(null)
+    try {
+      // Probe over HTTP first: a refused WebSocket upgrade reaches the browser
+      // as a bare error with no status, so this is the only place the real
+      // reason ("no speaker", "someone else is talking") can come from.
+      const probe = await api.talkProbe(cameraId)
+      if (probe.supported === false) {
+        setMessage(t('Talk.Unsupported'))
+        return
+      }
+      if (probe.busy) {
+        setMessage(t('Talk.Busy'))
+        return
+      }
+      handle.current = await startTalking(cameraId, (reason) => {
+        handle.current = null
+        setTalking(false)
+        if (reason) setMessage(t('Talk.Failed'))
+      })
+      setTalking(true)
+    } catch (e) {
+      if (e instanceof ApiError && e.code === 'talk_unsupported') setMessage(t('Talk.Unsupported'))
+      else if (e instanceof DOMException) setMessage(t('Talk.NoMic'))
+      else setMessage(t('Talk.Failed'))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const end = async () => {
+    const current = handle.current
+    handle.current = null
+    setTalking(false)
+    await current?.stop()
+  }
+
+  if (!secure) {
+    return (
+      <p className="muted" style={{ fontSize: 12 }}>
+        <Icon name="mic" size={13} /> {t('Talk.NeedsHttps')}
+      </p>
+    )
+  }
+
+  return (
+    <div className="row" style={{ flexWrap: 'wrap' }}>
+      <button
+        className={'row talk' + (talking ? ' on' : '')}
+        disabled={busy}
+        // Pointer events rather than mouse/touch pairs, and pointer capture so
+        // sliding a finger off the button still ends the transmission.
+        onPointerDown={(e) => {
+          // Capture is a nicety, not a precondition: it throws for a pointer
+          // that is no longer active (a fast enough tap), and losing the press
+          // because of that would be worse than losing the capture.
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId)
+          } catch { /* no capture — pointerup still ends the transmission */ }
+          void begin()
+        }}
+        onPointerUp={() => void end()}
+        onPointerCancel={() => void end()}
+      >
+        <Icon name="mic" size={15} />
+        {talking ? t('Talk.Talking') : t('Talk.Hold')}
+      </button>
+      {message && <span className="muted">{message}</span>}
+    </div>
+  )
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/hooks/useDigitalZoom.ts b/src/OpenIPC.Viewer.Web.Client/src/hooks/useDigitalZoom.ts
new file mode 100644
index 0000000..f149092
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/hooks/useDigitalZoom.ts
@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const MAX_ZOOM = 8
+const STEP = 1.25
+
+// Digital zoom for a live tile: scale the picture up and drag the visible
+// window around it. Purely client-side — the stream is untouched, so zooming
+// costs nothing on the camera or the server and never restarts anything.
+//
+// The transform goes on the tile's own slot element, NOT on the <video>: the
+// video is pooled and moves between tiles (see live/liveSession.ts), so a
+// transform left on it would follow the camera into the next cell it lands in.
+export function useDigitalZoom(cell: HTMLElement | null) {
+  const [zoom, setZoom] = useState(1)
+  const [pan, setPan] = useState({ x: 0, y: 0 })
+  // Mirrors of the state, written before setState rather than during render:
+  // several wheel notches (or pointer moves) can land inside one frame, and if
+  // each read the last *rendered* zoom they would all compute the same step and
+  // only one would count.
+  const panRef = useRef(pan)
+  const zoomRef = useRef(zoom)
+
+  const applyZoom = useCallback((z: number) => {
+    zoomRef.current = z
+    setZoom(z)
+  }, [])
+  const applyPan = useCallback((p: { x: number; y: number }) => {
+    panRef.current = p
+    setPan(p)
+  }, [])
+
+  // At zoom z the picture is z times the box, so the window can travel at most
+  // half the overhang in each direction before showing empty space.
+  const clamp = useCallback((x: number, y: number, z: number) => {
+    const rect = cell?.getBoundingClientRect()
+    const maxX = rect ? (rect.width * (z - 1)) / 2 : 0
+    const maxY = rect ? (rect.height * (z - 1)) / 2 : 0
+    return {
+      x: Math.max(-maxX, Math.min(maxX, x)),
+      y: Math.max(-maxY, Math.min(maxY, y)),
+    }
+  }, [cell])
+
+  const setZoomTo = useCallback((z: number) => {
+    const next = Math.max(1, Math.min(MAX_ZOOM, z))
+    applyZoom(next)
+    const p = panRef.current
+    applyPan(next === 1 ? { x: 0, y: 0 } : clamp(p.x, p.y, next))
+  }, [applyPan, applyZoom, clamp])
+
+  const zoomIn = useCallback(() => setZoomTo(zoomRef.current * STEP), [setZoomTo])
+  const zoomOut = useCallback(() => setZoomTo(zoomRef.current / STEP), [setZoomTo])
+  const reset = useCallback(() => {
+    applyZoom(1)
+    applyPan({ x: 0, y: 0 })
+  }, [applyPan, applyZoom])
+
+  // Wheel is bound natively rather than through React's onWheel: React's root
+  // listener is passive, so preventDefault there can't stop the page scrolling
+  // under the cursor while you zoom.
+  useEffect(() => {
+    if (!cell) return
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault()
+      setZoomTo(zoomRef.current * (e.deltaY < 0 ? STEP : 1 / STEP))
+    }
+    cell.addEventListener('wheel', onWheel, { passive: false })
+    return () => cell.removeEventListener('wheel', onWheel)
+  }, [cell, setZoomTo])
+
+  // Drag to pan, once zoomed in. Pointer capture so the drag survives the
+  // cursor leaving the tile, and buttons stay clickable.
+  useEffect(() => {
+    if (!cell) return
+    let dragging = false
+    let originX = 0
+    let originY = 0
+    let startPan = { x: 0, y: 0 }
+
+    const onDown = (e: PointerEvent) => {
+      if (zoomRef.current === 1 || e.button !== 0) return
+      if ((e.target as HTMLElement).closest('button')) return
+      dragging = true
+      originX = e.clientX
+      originY = e.clientY
+      startPan = panRef.current
+      cell.setPointerCapture(e.pointerId)
+    }
+    const onMove = (e: PointerEvent) => {
+      if (!dragging) return
+      e.preventDefault()
+      applyPan(clamp(startPan.x + (e.clientX - originX), startPan.y + (e.clientY - originY), zoomRef.current))
+    }
+    const onUp = (e: PointerEvent) => {
+      if (!dragging) return
+      dragging = false
+      try {
+        cell.releasePointerCapture(e.pointerId)
+      } catch { /* pointer already gone */ }
+    }
+
+    cell.addEventListener('pointerdown', onDown)
+    cell.addEventListener('pointermove', onMove)
+    cell.addEventListener('pointerup', onUp)
+    cell.addEventListener('pointercancel', onUp)
+    return () => {
+      cell.removeEventListener('pointerdown', onDown)
+      cell.removeEventListener('pointermove', onMove)
+      cell.removeEventListener('pointerup', onUp)
+      cell.removeEventListener('pointercancel', onUp)
+    }
+  }, [cell, clamp, applyPan])
+
+  return {
+    zoom,
+    zoomed: zoom > 1,
+    transform: zoom === 1 ? undefined : `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+    zoomIn,
+    zoomOut,
+    reset,
+  }
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/hooks/useLiveTile.ts b/src/OpenIPC.Viewer.Web.Client/src/hooks/useLiveTile.ts
index 5762bc9..ebbf62c 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/hooks/useLiveTile.ts
+++ b/src/OpenIPC.Viewer.Web.Client/src/hooks/useLiveTile.ts
@@ -1,27 +1,36 @@
-import { useEffect, useState } from 'react'
-import { acquire, release } from '../live/liveSession'
+import { useEffect, useReducer, useState } from 'react'
+import { acquire, release, type LiveSession } from '../live/liveSession'
 
-// Attaches a pooled live session to a tile's slot and reports its status.
+// Attaches a pooled live session to a tile's slot and exposes it.
 //
 // The tile owns neither the <video> nor the socket (see live/liveSession.ts):
 // it borrows a session for as long as it's mounted and hands it back after.
 // So a tile mounting is no longer the same thing as a stream starting —
 // switching grid size, flipping pages, or navigating to another route and back
 // re-attaches a session that never stopped playing.
-export function useLiveTile(slot: HTMLElement | null, cameraId: string): string {
-  const [status, setStatus] = useState('connecting')
+//
+// The session is returned rather than just its status because it also carries
+// what the tile's controls need (whether the stream has sound, whether it's
+// muted). Every change re-renders through the same subscription.
+export function useLiveTile(slot: HTMLElement | null, cameraId: string): {
+  status: string
+  session: LiveSession | null
+} {
+  const [session, setSession] = useState<LiveSession | null>(null)
+  const [, changed] = useReducer((n: number) => n + 1, 0)
 
   useEffect(() => {
     if (!slot) return
-    const session = acquire(cameraId)
-    slot.appendChild(session.video)
-    setStatus(session.status)
-    const unsubscribe = session.subscribe(setStatus)
+    const acquired = acquire(cameraId)
+    slot.appendChild(acquired.video)
+    setSession(acquired)
+    const unsubscribe = acquired.subscribe(changed)
     return () => {
       unsubscribe()
-      release(session)
+      setSession(null)
+      release(acquired)
     }
   }, [slot, cameraId])
 
-  return status
+  return { status: session?.status ?? 'connecting', session }
 }
diff --git a/src/OpenIPC.Viewer.Web.Client/src/live/liveSession.ts b/src/OpenIPC.Viewer.Web.Client/src/live/liveSession.ts
index c00174e..f17af14 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/live/liveSession.ts
+++ b/src/OpenIPC.Viewer.Web.Client/src/live/liveSession.ts
@@ -56,6 +56,8 @@ export class LiveSession {
   private closed = false
   /** Borrowed by a mounted tile; false means idle and eligible for retention. */
   inUse = false
+  /** True once the init segment turned out to carry an audio track. */
+  hasAudio = false
   idleTimer: number | null = null
 
   constructor(cameraId: string) {
@@ -93,6 +95,18 @@ export class LiveSession {
     return this._status
   }
 
+  get muted(): boolean {
+    return this.video.muted
+  }
+
+  // Tiles start muted — browsers refuse to autoplay anything else — so listening
+  // is always an explicit click, and it survives the tile being re-attached.
+  setMuted(muted: boolean) {
+    this.video.muted = muted
+    if (!muted) this.video.play().catch(() => undefined)
+    this.notify()
+  }
+
   subscribe(fn: Listener): () => void {
     this.listeners.add(fn)
     return () => this.listeners.delete(fn)
@@ -115,7 +129,14 @@ export class LiveSession {
   private say(s: string) {
     if (this.closed) return
     this._status = s
-    for (const fn of this.listeners) fn(s)
+    this.notify()
+  }
+
+  // Subscribers re-read the session, so anything observable — status, audio
+  // presence, mute — goes through here.
+  private notify() {
+    if (this.closed) return
+    for (const fn of this.listeners) fn(this._status)
   }
 
   // transcode=false → copy remux (H.264). If the source turns out to be H.265
@@ -140,7 +161,12 @@ export class LiveSession {
     // plain ArrayBuffer, not the widened ArrayBufferLike (TS 5.7+ typed arrays).
     const queue: Uint8Array<ArrayBuffer>[] = []
     let pending: Uint8Array<ArrayBuffer>[] = []
+    // Video codec string plus, when the camera sends sound, the AAC track the
+    // server transcodes it to. MSE needs BOTH declared on the SourceBuffer or the
+    // init segment is rejected — so the string is built from what's actually in
+    // the box, never assumed.
     let codec: string | null = null
+    let audio = false
     let msOpen = false
     let switching = false
     const say = (s: string) => this.say(s)
@@ -176,7 +202,7 @@ export class LiveSession {
     }
     const setup = () => {
       if (sb || !msOpen || !codec || codec === 'hevc') return
-      const mime = `video/mp4; codecs="${codec}"`
+      const mime = `video/mp4; codecs="${codec}${audio ? ', mp4a.40.2' : ''}"`
       if (!MediaSource.isTypeSupported(mime)) {
         if (!transcode) retryTranscoded()
         else say('unsupported ' + codec)
@@ -204,7 +230,14 @@ export class LiveSession {
       const b = new Uint8Array(e.data as ArrayBuffer)
       if (!sb) {
         pending.push(b)
-        if (codec === null) codec = findCodec(pending)
+        if (codec === null) {
+          codec = findCodec(pending)
+          if (codec !== null && codec !== 'hevc') {
+            audio = hasAudioTrack(pending)
+            this.hasAudio = audio
+            if (audio) this.notify()   // the tile can show its listen button now
+          }
+        }
         if (codec === 'hevc' && !transcode) {
           retryTranscoded()
           return
@@ -279,6 +312,17 @@ function findCodec(chunks: Uint8Array<ArrayBuffer>[]): string | null {
   return null
 }
 
+// An 'mp4a' sample-entry anywhere in the init segment means the stream carries
+// sound. Same crude fourcc scan as findCodec — enough to decide the codec string.
+function hasAudioTrack(chunks: Uint8Array<ArrayBuffer>[]): boolean {
+  for (const c of chunks) {
+    for (let i = 0; i + 4 <= c.length; i++) {
+      if (c[i] === 0x6d && c[i + 1] === 0x70 && c[i + 2] === 0x34 && c[i + 3] === 0x61) return true
+    }
+  }
+  return false
+}
+
 function hx(n: number): string {
   return n.toString(16).padStart(2, '0').toUpperCase()
 }
diff --git a/src/OpenIPC.Viewer.Web.Client/src/live/talkSession.ts b/src/OpenIPC.Viewer.Web.Client/src/live/talkSession.ts
new file mode 100644
index 0000000..ff8d7a1
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/live/talkSession.ts
@@ -0,0 +1,128 @@
+// Browser side of push-to-talk: microphone → 16-bit PCM → WebSocket → the
+// server's RTSP backchannel.
+//
+// The audio graph runs at the rate the CAMERA negotiated, which the server sends
+// as the socket's first message. An AudioContext created with that sampleRate
+// resamples the microphone for us, so there is no resampler to write and no
+// chance of shipping 48 kHz samples that the camera plays back six times too
+// fast.
+//
+// The worklet is built from a blob rather than a separate module file: it is
+// fifteen lines, it must not drift away from the framing the server expects, and
+// this keeps it out of the bundler's asset pipeline entirely.
+const WORKLET_SOURCE = `
+class PcmChunker extends AudioWorkletProcessor {
+  constructor(options) {
+    super()
+    // One RTP packet per chunk. 20 ms is what G.711 telephony uses and what the
+    // camera expects to be fed; the render quantum (128 frames) doesn't divide
+    // into it evenly, so samples are carried across quanta.
+    this.size = options.processorOptions.chunkSamples
+    this.buffer = new Int16Array(this.size)
+    this.filled = 0
+  }
+  process(inputs) {
+    const channel = inputs[0] && inputs[0][0]
+    if (!channel) return true
+    for (let i = 0; i < channel.length; i++) {
+      // Clamp before scaling: a sample slightly outside [-1,1] would wrap around
+      // to the opposite extreme and click.
+      const s = Math.max(-1, Math.min(1, channel[i]))
+      this.buffer[this.filled++] = s < 0 ? s * 0x8000 : s * 0x7fff
+      if (this.filled === this.size) {
+        this.port.postMessage(this.buffer.slice())
+        this.filled = 0
+      }
+    }
+    return true
+  }
+}
+registerProcessor('pcm-chunker', PcmChunker)
+`
+
+export type TalkHandle = {
+  stop: () => Promise<void>
+}
+
+// True when the browser will even hand out a microphone. getUserMedia only
+// exists in a secure context, so a console served over plain HTTP on a LAN has
+// no way to talk — worth saying out loud rather than failing at the press.
+export function canCaptureMic(): boolean {
+  return window.isSecureContext && typeof navigator.mediaDevices?.getUserMedia === 'function'
+}
+
+// Opens the socket, waits for the negotiated format, starts capturing. Resolves
+// once audio is actually flowing; rejects if any step fails, having cleaned up
+// whatever it already opened.
+export async function startTalking(cameraId: string, onEnded: (reason?: string) => void): Promise<TalkHandle> {
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws'
+  const socket = new WebSocket(`${proto}://${location.host}/api/v1/cameras/${cameraId}/talk/stream`)
+  socket.binaryType = 'arraybuffer'
+
+  let stream: MediaStream | null = null
+  let context: AudioContext | null = null
+  let stopped = false
+
+  const cleanup = async () => {
+    if (stopped) return
+    stopped = true
+    stream?.getTracks().forEach((t) => t.stop())
+    try {
+      await context?.close()
+    } catch { /* already closing */ }
+    if (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING) socket.close()
+  }
+
+  try {
+    const format = await new Promise<{ sampleRate: number }>((resolve, reject) => {
+      // A refused upgrade (no permission, camera busy, no backchannel) reaches
+      // the browser as a bare error with no status — the caller probes over HTTP
+      // first, which is where the real reason comes from.
+      socket.onerror = () => reject(new Error('socket'))
+      socket.onclose = () => reject(new Error('closed'))
+      socket.onmessage = (e) => {
+        if (typeof e.data !== 'string') return
+        resolve(JSON.parse(e.data) as { sampleRate: number })
+      }
+    })
+
+    stream = await navigator.mediaDevices.getUserMedia({
+      audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true },
+    })
+
+    context = new AudioContext({ sampleRate: format.sampleRate })
+    const blob = new Blob([WORKLET_SOURCE], { type: 'application/javascript' })
+    const url = URL.createObjectURL(blob)
+    try {
+      await context.audioWorklet.addModule(url)
+    } finally {
+      URL.revokeObjectURL(url)
+    }
+
+    const source = context.createMediaStreamSource(stream)
+    const chunker = new AudioWorkletNode(context, 'pcm-chunker', {
+      numberOfOutputs: 0,
+      processorOptions: { chunkSamples: Math.round(format.sampleRate / 50) },
+    })
+    chunker.port.onmessage = (e) => {
+      if (socket.readyState === WebSocket.OPEN) socket.send((e.data as Int16Array).buffer)
+    }
+    source.connect(chunker)
+
+    // From here on a socket that dies is the end of the conversation, not an
+    // error to reject with — the caller is already talking.
+    socket.onclose = () => {
+      void cleanup()
+      onEnded()
+    }
+    socket.onerror = () => {
+      void cleanup()
+      onEnded('socket')
+    }
+
+    return { stop: cleanup }
+  } catch (e) {
+    await cleanup()
+    throw e
+  }
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Camera.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Camera.tsx
index 97b639a..4110d67 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Camera.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Camera.tsx
@@ -1,12 +1,16 @@
 import { useEffect, useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
-import { api, type CameraDto, type GroupDto } from '../api'
+import { api, ApiError, type CameraDto, type GroupDto } from '../api'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { useAuth } from '../auth'
 import { LiveTile } from '../components/LiveTile'
 import { CameraEditor } from '../components/CameraEditor'
 import { PtzPad } from '../components/PtzPad'
+import { MajesticPanel } from '../components/MajesticPanel'
+import { TalkButton } from '../components/TalkButton'
 import { ConfirmModal } from '../components/Modals'
+import { SnapshotModal } from '../components/SnapshotModal'
 
 // Dedicated single-camera view: one large live tile plus the camera's details
 // and actions. This is the natural shape on a phone (you watch one camera at a
@@ -20,11 +24,43 @@ export function Camera() {
   const [groups, setGroups] = useState<GroupDto[]>([])
   const [editing, setEditing] = useState(false)
   const [deleting, setDeleting] = useState(false)
+  const [snapshot, setSnapshot] = useState(false)
+  const [recording, setRecording] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [recordError, setRecordError] = useState<string | null>(null)
 
   const load = async () => {
     const [cams, grps] = await Promise.all([api.cameras(), api.groups()])
     setCamera(cams.find((c) => c.id === id) ?? null)
     setGroups(grps)
+    // Recording lives on the server, not in this tab: a clip someone else
+    // started must show as running here too.
+    try {
+      setRecording((await api.activeRecordings()).includes(id))
+    } catch {
+      setRecording(false)   // no archive permission — the button stays hidden anyway
+    }
+  }
+
+  const toggleRecording = async () => {
+    setBusy(true)
+    setRecordError(null)
+    try {
+      if (recording) await api.stopRecording(id)
+      else await api.startRecording(id)
+      setRecording(!recording)
+    } catch (e) {
+      // A camera that delivered nothing still stopped recording — say so, and
+      // don't leave the button claiming it's still running.
+      if (e instanceof ApiError && e.code === 'nothing_recorded') {
+        setRecording(false)
+        setRecordError(t('Recording.Nothing'))
+      } else {
+        setRecordError(t('Recording.Failed'))
+      }
+    } finally {
+      setBusy(false)
+    }
   }
 
   useEffect(() => {
@@ -50,10 +86,23 @@ export function Camera() {
   return (
     <div className="wrap" style={{ maxWidth: 1000 }}>
       <div className="toolbar">
-        <Link to="/cameras" className="muted">
-          {t('Live.Back')}
+        <Link to="/cameras" className="muted row">
+          <Icon name="back" /> {t('Live.Back')}
         </Link>
         <h1 style={{ margin: 0, flex: 1 }}>{camera.name}</h1>
+        <button className="row" onClick={() => setSnapshot(true)}>
+          <Icon name="camera" /> {t('Snapshot.Take')}
+        </button>
+        {can('Manage') && (
+          <button
+            className={'row' + (recording ? ' danger' : '')}
+            disabled={busy}
+            onClick={() => void toggleRecording()}
+          >
+            <Icon name={recording ? 'stop' : 'record'} />{' '}
+            {recording ? t('Recording.Stop') : t('Recording.Start')}
+          </button>
+        )}
         {can('Manage') && (
           <>
             <button onClick={() => setEditing(true)}>{t('Cameras.Edit')}</button>
@@ -64,10 +113,21 @@ export function Camera() {
         )}
       </div>
 
+      {recordError && <p className="err">{recordError}</p>}
+
       <div className="videos n1">
         <LiveTile key={camera.id} camera={camera} />
       </div>
 
+      {/* A camera that ONVIF probed and reported no speaker is a definite no;
+          anything else is worth offering, and the press finds out for sure. */}
+      {can('Talk') && !(camera.onvifEnabled && !camera.hasAudioOut) && (
+        <>
+          <h2 style={{ fontSize: 16, fontWeight: 600, marginTop: 24 }}>{t('Talk.Title')}</h2>
+          <TalkButton cameraId={camera.id} />
+        </>
+      )}
+
       {camera.ptzReady && can('Ptz') && (
         <>
           <h2 style={{ fontSize: 16, fontWeight: 600, marginTop: 24 }}>{t('Ptz.Title')}</h2>
@@ -75,6 +135,18 @@ export function Camera() {
         </>
       )}
 
+      {/* Camera settings are Manage-only on the server (config.json carries the
+          camera's own logins), so don't even offer the panel otherwise. The
+          isMajestic flag is NOT the gate: a hand-added camera doesn't have it
+          until something probes it, which is exactly what the panel's first
+          request does. It renders nothing when the camera turns out not to
+          run Majestic. */}
+      {can('Manage') && (
+        <div style={{ marginTop: 24 }}>
+          <MajesticPanel cameraId={camera.id} />
+        </div>
+      )}
+
       <h2 style={{ fontSize: 16, fontWeight: 600, marginTop: 24 }}>{t('Camera.Details')}</h2>
       <table className="details">
         <tbody>
@@ -119,6 +191,9 @@ export function Camera() {
           }}
         />
       )}
+      {snapshot && (
+        <SnapshotModal cameraId={camera.id} cameraName={camera.name} onClose={() => setSnapshot(false)} />
+      )}
       {deleting && (
         <ConfirmModal
           title={t('Cameras.DeleteConfirm')}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Cameras.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Cameras.tsx
index baa4ad5..3176948 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Cameras.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Cameras.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { api, type CameraDto, type GroupDto } from '../api'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { useAuth } from '../auth'
 import { CameraEditor } from '../components/CameraEditor'
 import { ConfirmModal } from '../components/Modals'
@@ -45,9 +46,16 @@ export function Cameras() {
       <div className="toolbar">
         <h1 style={{ margin: 0, flex: 1 }}>{t('Cameras.Title')}</h1>
         {can('Manage') && (
-          <button className="primary" onClick={() => setEditing(null)}>
-            {t('Cameras.Add')}
-          </button>
+          <>
+            {/* Finding cameras on the network is a way to add one, so it sits
+                next to Add rather than in its own nav entry. */}
+            <Link to="/discovery" className="row button-link ghost">
+              <Icon name="search" /> {t('Nav.Discovery')}
+            </Link>
+            <button className="primary row" onClick={() => setEditing(null)}>
+              <Icon name="plus" /> {t('Cameras.Add')}
+            </button>
+          </>
         )}
       </div>
 
@@ -78,7 +86,7 @@ export function Cameras() {
                   </span>
                 </td>
                 <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
-                  <Link to={`/camera/${c.id}`}>{t('Cameras.Live')}</Link>{' '}
+                  <Link to={`/camera/${c.id}`} className="row"><Icon name="play" size={13} /> {t('Cameras.Live')}</Link>{' '}
                   {can('Manage') && (
                     <>
                       <button onClick={() => setEditing(c)}>{t('Cameras.Edit')}</button>{' '}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Discovery.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Discovery.tsx
index d858ea7..b7f911b 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Discovery.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Discovery.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import { api, ApiError, type CameraDraftDto, type DiscoveredDeviceDto, type ScanDto } from '../api'
+import { Link } from 'react-router-dom'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 
 // Find cameras on the LAN and add them without leaving the browser.
 //
@@ -74,6 +76,9 @@ export function Discovery() {
   return (
     <div className="wrap" style={{ maxWidth: 900 }}>
       <div className="toolbar" style={{ flexWrap: 'wrap' }}>
+        <Link to="/cameras" className="muted row">
+          <Icon name="back" /> {t('Nav.Cameras')}
+        </Link>
         <h1 style={{ margin: 0, flex: 1 }}>{t('Discovery.Title')}</h1>
         <label className="row" style={{ flexDirection: 'row', gap: 6 }}>
           <input type="checkbox" checked={deepScan} disabled={running}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Grid.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Grid.tsx
index 1c44902..8baab83 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Grid.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Grid.tsx
@@ -1,14 +1,39 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { api, type CameraDto, type LayoutDto } from '../api'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { useAuth } from '../auth'
 import { EmptyCell, LiveTile } from '../components/LiveTile'
+import { StillTile } from '../components/StillTile'
 import { ConfirmModal, TextPromptModal } from '../components/Modals'
 
 // Grid size is the side N of an NxN grid (matches the backend/desktop model);
 // cells = N*N. The UI labels each option by its cell count (1, 4, 9, 16, 25).
 const SIDES = [1, 2, 3, 4, 5]
 
+// Refresh rates for stills mode, same ladder as the desktop grid.
+const STILL_INTERVALS = [2, 5, 10, 30, 60]
+// How long a kiosk wall holds a page before flipping to the next one.
+const ROTATE_INTERVALS = [10, 30, 60]
+
+// Wall preferences (stills, kiosk rotation) are per viewer, not per install:
+// the same layout is watched on a control-room screen and on someone's laptop,
+// and only one of them wants a full-screen wall of stills. So they live in the
+// browser, unlike layouts, which are shared server state.
+function loadPref<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem('openipc.grid.' + key)
+    return raw === null ? fallback : (JSON.parse(raw) as T)
+  } catch {
+    return fallback
+  }
+}
+function savePref(key: string, value: unknown) {
+  try {
+    localStorage.setItem('openipc.grid.' + key, JSON.stringify(value))
+  } catch { /* private mode / quota — the preference just won't stick */ }
+}
+
 
 // The Live grid, driven by saved layouts (name + grid size + ordered camera
 // tiles). Switching between layouts keeps shared cameras playing. An edit mode
@@ -31,6 +56,14 @@ export function Grid() {
   const [busy, setBusy] = useState(false)
   // Which dialog is open, if any (replaces native prompt/confirm).
   const [dialog, setDialog] = useState<'create' | 'rename' | 'delete' | null>(null)
+  // Wall modes: periodic stills instead of live streams, and a chrome-free
+  // fullscreen wall that can cycle through the layout's pages on its own.
+  const [stills, setStills] = useState(() => loadPref('stills', false))
+  const [stillInterval, setStillInterval] = useState(() => loadPref('stillInterval', 5))
+  const [rotate, setRotate] = useState(() => loadPref('rotate', false))
+  const [rotateInterval, setRotateInterval] = useState(() => loadPref('rotateInterval', 30))
+  const [kiosk, setKiosk] = useState(false)
+  const [stage, setStage] = useState<HTMLDivElement | null>(null)
 
   const camById = useMemo(() => {
     const m = new Map<string, CameraDto>()
@@ -52,6 +85,48 @@ export function Grid() {
     }
   }, [])
 
+  useEffect(() => savePref('stills', stills), [stills])
+  useEffect(() => savePref('stillInterval', stillInterval), [stillInterval])
+  useEffect(() => savePref('rotate', rotate), [rotate])
+  useEffect(() => savePref('rotateInterval', rotateInterval), [rotateInterval])
+
+  // Kiosk is a CSS mode first and a fullscreen request second. The Fullscreen
+  // API is refused outright in an embedded/iframed page, and a wall shown that
+  // way (a kiosk browser, a dashboard frame) still wants the chrome gone — so
+  // the mode never depends on the request being granted.
+  const enterKiosk = () => {
+    setKiosk(true)
+    // Refusal comes back either way depending on the browser — a rejected
+    // promise, or a synchronous throw that would take the click handler (and
+    // the mode with it) down. Both mean the same thing: CSS-only kiosk.
+    try {
+      void stage?.requestFullscreen?.()?.catch(() => { /* CSS-only kiosk, then */ })
+    } catch { /* CSS-only kiosk, then */ }
+  }
+  const exitKiosk = useCallback(() => {
+    setKiosk(false)
+    if (document.fullscreenElement) void document.exitFullscreen()
+  }, [])
+
+  // Leaving fullscreen by the browser's own means (Esc, F11, the tile that went
+  // fullscreen on its own) must drop the mode too, and Esc has to work in the
+  // CSS-only case where the browser has no fullscreen to leave.
+  useEffect(() => {
+    if (!kiosk) return
+    const onFullscreenChange = () => {
+      if (!document.fullscreenElement) setKiosk(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !document.fullscreenElement) setKiosk(false)
+    }
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('fullscreenchange', onFullscreenChange)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [kiosk])
+
   const active = layouts?.find((l) => l.id === activeId) ?? null
 
   // A layout is global, but a restricted user may only see part of it. Drop the
@@ -71,6 +146,17 @@ export function Grid() {
   const safePage = Math.min(page, pageCount - 1)
   const pageStart = safePage * pageSize
 
+  // Auto-flip through the pages of a kiosk wall. Only in kiosk: someone working
+  // in the console wants the page they chose to stay put.
+  useEffect(() => {
+    if (!kiosk || !rotate || pageCount < 2 || editing) return
+    const timer = window.setInterval(
+      () => setPage((p) => (p + 1) % pageCount),
+      Math.max(5, rotateInterval) * 1000,
+    )
+    return () => window.clearInterval(timer)
+  }, [kiosk, rotate, rotateInterval, pageCount, editing])
+
   async function reloadLayouts(): Promise<LayoutDto[]> {
     const ls = await api.layouts()
     ls.sort((a, b) => a.sortOrder - b.sortOrder)
@@ -163,9 +249,38 @@ export function Grid() {
             </button>
           ))}
           {!editing && can('Manage') && !restricted && (
-            <button onClick={() => setDialog('create')}>{t('Grid.NewLayout')}</button>
+            <button className="row" onClick={() => setDialog('create')}>
+              <Icon name="plus" size={13} /> {t('Grid.NewLayout')}
+            </button>
           )}
         </div>
+        {active && !editing && (
+          <div className="row">
+            <button
+              className={stills ? 'active' : ''}
+              title={t('Grid.StillsHint')}
+              onClick={() => setStills(!stills)}
+            >
+              {t('Grid.Stills')}
+            </button>
+            {stills && (
+              <select
+                value={stillInterval}
+                title={t('Grid.StillsInterval')}
+                onChange={(e) => setStillInterval(Number(e.target.value))}
+              >
+                {STILL_INTERVALS.map((s) => (
+                  <option key={s} value={s}>
+                    {s} {t('Common.Seconds')}
+                  </option>
+                ))}
+              </select>
+            )}
+            <button className="row" title={t('Grid.KioskHint')} onClick={enterKiosk}>
+              <Icon name="maximize" size={13} /> {t('Grid.Kiosk')}
+            </button>
+          </div>
+        )}
         {active && !editing && can('Manage') && !restricted && (
           <button onClick={startEdit}>{t('Grid.Edit')}</button>
         )}
@@ -224,18 +339,45 @@ export function Grid() {
         </div>
         </>
       ) : (
-        <>
+        <div className={'stage' + (kiosk ? ' kiosk' : '')} ref={setStage}>
+          {kiosk && (
+            <div className="kiosk-bar">
+              {pageCount > 1 && (
+                <>
+                  <label className="row">
+                    <input type="checkbox" checked={rotate} onChange={(e) => setRotate(e.target.checked)} />
+                    {t('Grid.Rotate')}
+                  </label>
+                  {rotate && (
+                    <select value={rotateInterval} onChange={(e) => setRotateInterval(Number(e.target.value))}>
+                      {ROTATE_INTERVALS.map((s) => (
+                        <option key={s} value={s}>
+                          {s} {t('Common.Seconds')}
+                        </option>
+                      ))}
+                    </select>
+                  )}
+                </>
+              )}
+              <button onClick={exitKiosk}>{t('Grid.KioskExit')}</button>
+            </div>
+          )}
           <div className={`videos n${pageSize}`}>
             {Array.from({ length: pageSize }, (_, i) => {
               const id = tiles[pageStart + i]
               const cam = id ? camById.get(id) : undefined
-              return cam ? <LiveTile key={cam.id} camera={cam} /> : <EmptyCell key={`empty-${i}`} />
+              if (!cam) return <EmptyCell key={`empty-${i}`} />
+              return stills ? (
+                <StillTile key={cam.id} camera={cam} intervalSeconds={stillInterval} />
+              ) : (
+                <LiveTile key={cam.id} camera={cam} />
+              )
             })}
           </div>
           {pageCount > 1 && (
             <div className="pager">
               <button disabled={safePage === 0} title={t('Grid.PrevPage')} onClick={() => setPage(safePage - 1)}>
-                ‹
+                <Icon name="chevronLeft" size={14} />
               </button>
               {Array.from({ length: pageCount }, (_, i) => (
                 <button
@@ -251,11 +393,11 @@ export function Grid() {
                 title={t('Grid.NextPage')}
                 onClick={() => setPage(safePage + 1)}
               >
-                ›
+                <Icon name="chevronRight" size={14} />
               </button>
             </div>
           )}
-        </>
+        </div>
       )}
 
       {dialog === 'create' && (
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Groups.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Groups.tsx
index 6842f2c..3280d94 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Groups.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Groups.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { api, ApiError, type GroupDto } from '../api'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { useAuth } from '../auth'
 import { ConfirmModal, TextPromptModal } from '../components/Modals'
 
@@ -66,8 +67,8 @@ export function Groups() {
           style={{ flex: 1 }}
         />
         {can('Manage') && (
-          <button className="primary" onClick={onAdd}>
-            {t('Groups.Add')}
+          <button className="primary row" onClick={onAdd}>
+            <Icon name="plus" /> {t('Groups.Add')}
           </button>
         )}
       </div>
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Recordings.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Recordings.tsx
new file mode 100644
index 0000000..a07d41a
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Recordings.tsx
@@ -0,0 +1,267 @@
+import { useEffect, useRef, useState } from 'react'
+import { api, type CalendarPointDto, type CameraDto, type RecordingDto } from '../api'
+import { useAuth } from '../auth'
+import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
+import { ConfirmModal } from '../components/Modals'
+import { ArchiveCalendar, dayRange, monthRange } from '../components/ArchiveCalendar'
+import { ArchiveTabs } from '../components/ArchiveTabs'
+
+// The recorded archive: what the desktop head wrote, listed newest-first and
+// played in place. Playback is a plain <video> against a ranged endpoint, so
+// seeking is the browser's own — no player to maintain.
+export function Recordings() {
+  const { t } = useI18n()
+  const { can } = useAuth()
+  const [items, setItems] = useState<RecordingDto[] | null>(null)
+  const [cameras, setCameras] = useState<CameraDto[]>([])
+  const [cameraId, setCameraId] = useState('')
+  const [month, setMonth] = useState(() => new Date())
+  const [day, setDay] = useState<string | null>(null)
+  const [points, setPoints] = useState<CalendarPointDto[]>([])
+  const [page, setPage] = useState(0)
+  const [total, setTotal] = useState(0)
+  const [playing, setPlaying] = useState<RecordingDto | null>(null)
+  const [playhead, setPlayhead] = useState(0)
+  const [clipStart, setClipStart] = useState(0)
+  const [clipEnd, setClipEnd] = useState<number | null>(null)
+  const [precise, setPrecise] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [deleting, setDeleting] = useState<RecordingDto | null>(null)
+
+  // The list shows the selected day (or everything when none is picked); the
+  // calendar always shows the whole displayed month, so the dots stay put while
+  // you click around inside it.
+  const load = async (pageIndex = page) => {
+    const range = day ? dayRange(day) : {}
+    const [result, dots, cams] = await Promise.all([
+      api.recordings({
+        cameraId: cameraId || undefined,
+        ...range,
+        offset: pageIndex * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      }),
+      api.recordingCalendar({ cameraId: cameraId || undefined, ...monthRange(month) }),
+      cameras.length ? Promise.resolve(cameras) : api.cameras(),
+    ])
+    setItems(result.items)
+    setTotal(result.total)
+    setPoints(dots)
+    setCameras(cams)
+  }
+
+  // Changing WHAT is being looked at starts over at the first page; paging
+  // through the same selection does not.
+  useEffect(() => {
+    setPage(0)
+    void load(0)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cameraId, day, month])
+
+  useEffect(() => {
+    void load(page)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page])
+
+  if (items === null) return <div className="spin">{t('Common.Loading')}</div>
+
+  return (
+    <div className="wrap" style={{ maxWidth: 1000 }}>
+      <h1>{t('Nav.Recordings')}</h1>
+      <ArchiveTabs />
+      <div className="toolbar">
+        <span style={{ flex: 1 }} />
+        <select value={cameraId} onChange={(e) => setCameraId(e.target.value)}>
+          <option value="">{t('Recordings.AllCameras')}</option>
+          {cameras.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <ArchiveCalendar
+        month={month}
+        points={points}
+        selected={day}
+        onPickMonth={(next) => {
+          setMonth(next)
+          setDay(null)   // a day from the old month would filter to nothing
+        }}
+        onPickDay={setDay}
+      />
+
+      {playing && (
+        <div className="player">
+          <video
+            ref={videoRef}
+            src={api.recordingStreamUrl(playing.id)}
+            controls
+            autoPlay
+            onTimeUpdate={(e) => setPlayhead(e.currentTarget.currentTime)}
+          />
+          <div className="row" style={{ justifyContent: 'space-between', marginTop: 8 }}>
+            <span className="muted">
+              {playing.cameraName ?? '—'} · {formatStart(playing.startedAt)}
+            </span>
+            <span className="row">
+              <a className="button-link row" href={api.recordingStreamUrl(playing.id, true)}>
+                <Icon name="download" /> {t('Recordings.Download')}
+              </a>
+              <button onClick={() => setPlaying(null)}>{t('Common.Close')}</button>
+            </span>
+          </div>
+
+          {can('Export') && (
+            <div className="export row">
+              {/* Marks come from the playhead: scrub to the moment and press the
+                  button. Typing timecodes would be worse everywhere, phones most. */}
+              <button onClick={() => setClipStart(playhead)}>{t('Export.MarkIn')}</button>
+              <button onClick={() => setClipEnd(playhead)}>{t('Export.MarkOut')}</button>
+              <span className="muted mono">
+                {formatClock(clipStart)} &ndash; {clipEnd === null ? '--:--' : formatClock(clipEnd)}
+              </span>
+              <label className="row" style={{ flexDirection: 'row', gap: 6 }}>
+                <input type="checkbox" checked={precise} onChange={(e) => setPrecise(e.target.checked)} />
+                {t('Export.Precise')}
+              </label>
+              <a
+                className={'button-link row' + (clipEnd !== null && clipEnd > clipStart ? '' : ' disabled')}
+                href={
+                  clipEnd !== null && clipEnd > clipStart
+                    ? api.recordingExportUrl(playing.id, clipStart, clipEnd, precise)
+                    : undefined
+                }
+              >
+                <Icon name="download" /> {t('Export.Save')}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+
+      {items.length === 0 ? (
+        <p className="muted">{day ? t('Archive.EmptyDay') : t('Recordings.Empty')}</p>
+      ) : (
+        <table className="list">
+          <thead>
+            <tr>
+              <th>{t('Recordings.Th.Camera')}</th>
+              <th>{t('Recordings.Th.Started')}</th>
+              <th>{t('Recordings.Th.Duration')}</th>
+              <th>{t('Recordings.Th.Size')}</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((r) => (
+              <tr key={r.id}>
+                <td>
+                  {r.cameraName ?? '—'}
+                  {r.hasMotion && <span className="badge" style={{ marginLeft: 8 }}>{t('Recordings.Motion')}</span>}
+                  {!r.playable && (
+                    <span className="badge" style={{ marginLeft: 8 }} title={t('Recordings.NotPlayableHint')}>
+                      {r.codec ?? 'codec'}
+                    </span>
+                  )}
+                </td>
+                <td className="mono">{formatStart(r.startedAt)}</td>
+                <td>{formatDuration(r.durationSeconds)}</td>
+                <td className="muted">{formatSize(r.sizeBytes)}</td>
+                <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                  {r.playable ? (
+                    <button
+                      className="row"
+                      onClick={() => {
+                        setPlaying(r)
+                        setPlayhead(0)
+                        setClipStart(0)
+                        setClipEnd(null)
+                      }}
+                    >
+                      <Icon name="play" size={13} /> {t('Recordings.Play')}
+                    </button>
+                  ) : (
+                    <a className="muted row" href={api.recordingStreamUrl(r.id, true)}>
+                      <Icon name="download" size={13} /> {t('Recordings.Download')}
+                    </a>
+                  )}{' '}
+                  {can('Manage') && (
+                    <button className="danger" onClick={() => setDeleting(r)}>
+                      {t('Cameras.Delete')}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      {total > PAGE_SIZE && (
+        <div className="pager">
+          <button disabled={page === 0} title={t('Grid.PrevPage')} onClick={() => setPage(page - 1)}>
+            <Icon name="chevronLeft" size={14} />
+          </button>
+          <span className="muted">
+            {page * PAGE_SIZE + 1}&ndash;{Math.min((page + 1) * PAGE_SIZE, total)} / {total}
+          </span>
+          <button
+            disabled={(page + 1) * PAGE_SIZE >= total}
+            title={t('Grid.NextPage')}
+            onClick={() => setPage(page + 1)}
+          >
+            <Icon name="chevronRight" size={14} />
+          </button>
+        </div>
+      )}
+
+      {deleting && (
+        <ConfirmModal
+          title={t('Recordings.DeleteConfirm')}
+          message={`${deleting.cameraName ?? ''} ${formatStart(deleting.startedAt)}`}
+          confirmLabel={t('Cameras.Delete')}
+          danger
+          onConfirm={async () => {
+            const target = deleting
+            setDeleting(null)
+            if (playing?.id === target.id) setPlaying(null)
+            await api.deleteRecording(target.id)
+            await load()
+          }}
+          onCancel={() => setDeleting(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+const PAGE_SIZE = 50
+
+// mm:ss for the in/out marks: a clip offset is seconds into one file, not a date.
+function formatClock(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${m}:${String(s).padStart(2, '0')}`
+}
+
+function formatStart(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+// Null duration = the recording never got an end time (the app died mid-write).
+function formatDuration(seconds: number | null): string {
+  if (seconds === null) return '—'
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`
+}
+
+function formatSize(bytes: number): string {
+  if (bytes <= 0) return '—'
+  const mb = bytes / (1024 * 1024)
+  return mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb.toFixed(1)} MB`
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Settings.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Settings.tsx
new file mode 100644
index 0000000..7cd1e80
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Settings.tsx
@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+import { NavLink, Navigate, Outlet } from 'react-router-dom'
+import { useAuth } from '../auth'
+import { useI18n } from '../i18n'
+
+// Everything you configure rather than watch, behind one nav entry.
+//
+// The sidebar had grown to seven items — too many for the mobile tab strip, and
+// it mixed daily viewing (grid, cameras, archive) with things touched once a
+// month. Groups, users and server status live here now; each tab keeps its own
+// URL, so links and the back button still work.
+export function Settings() {
+  const { t } = useI18n()
+  const { can } = useAuth()
+
+  return (
+    <div className="wrap" style={{ maxWidth: 1000 }}>
+      <h1>{t('Nav.Settings')}</h1>
+      <div className="tabs settings-tabs">
+        <NavLink to="/settings/groups" className={({ isActive }) => (isActive ? 'active' : '')}>
+          {t('Nav.Groups')}
+        </NavLink>
+        {can('Manage') && (
+          <NavLink to="/settings/users" className={({ isActive }) => (isActive ? 'active' : '')}>
+            {t('Nav.Users')}
+          </NavLink>
+        )}
+        <NavLink to="/settings/system" className={({ isActive }) => (isActive ? 'active' : '')}>
+          {t('Nav.System')}
+        </NavLink>
+      </div>
+      <Outlet />
+    </div>
+  )
+}
+
+// Landing on /settings alone should show something rather than an empty frame.
+export function SettingsIndex() {
+  return <Navigate to="/settings/system" replace />
+}
+
+// A hidden tab is not a closed door: typing the URL used to load a page whose
+// first request 403s, leaving it stuck on "Loading…". Send those callers to a
+// tab they can actually use. (The API refuses them regardless — this is about
+// not showing a broken screen.)
+export function RequireManage({ children }: { children: ReactNode }) {
+  const { can } = useAuth()
+  return can('Manage') ? <>{children}</> : <Navigate to="/settings/system" replace />
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Snapshots.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Snapshots.tsx
new file mode 100644
index 0000000..6b5b241
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Snapshots.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react'
+import { api, type CameraDto, type SnapshotDto } from '../api'
+import { useAuth } from '../auth'
+import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
+import { ConfirmModal } from '../components/Modals'
+import { ArchiveTabs } from '../components/ArchiveTabs'
+
+const PAGE_SIZE = 60
+
+// The snapshot library: stills kept on the server, in the same folder and the
+// same table the desktop head writes — so a still taken from a phone shows up in
+// the desktop browser, and the desktop's show up here.
+//
+// Thumbnails are requested for the grid and the full image only when one is
+// opened: a page of sixty 1080p JPEGs is several tens of megabytes, and on a
+// phone over Wi-Fi that is the difference between a gallery and a stall.
+export function Snapshots() {
+  const { t } = useI18n()
+  const { can } = useAuth()
+  const [items, setItems] = useState<SnapshotDto[] | null>(null)
+  const [cameras, setCameras] = useState<CameraDto[]>([])
+  const [cameraId, setCameraId] = useState('')
+  const [page, setPage] = useState(0)
+  const [total, setTotal] = useState(0)
+  const [open, setOpen] = useState<SnapshotDto | null>(null)
+  const [deleting, setDeleting] = useState<SnapshotDto | null>(null)
+
+  const load = async (pageIndex = page) => {
+    const [result, cams] = await Promise.all([
+      api.snapshots({
+        cameraId: cameraId || undefined,
+        offset: pageIndex * PAGE_SIZE,
+        limit: PAGE_SIZE,
+      }),
+      api.cameras(),
+    ])
+    setItems(result.items)
+    setTotal(result.total)
+    setCameras(cams)
+  }
+
+  useEffect(() => {
+    setPage(0)
+    void load(0)
+    // Changing the camera filter restarts at the first page; paging keeps it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cameraId])
+
+  const remove = async () => {
+    if (!deleting) return
+    await api.deleteSnapshot(deleting.id)
+    setDeleting(null)
+    if (open?.id === deleting.id) setOpen(null)
+    await load()
+  }
+
+  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE))
+  const flip = async (next: number) => {
+    setPage(next)
+    await load(next)
+  }
+
+  return (
+    <div className="wrap" style={{ maxWidth: 1000 }}>
+      <h1>{t('Nav.Recordings')}</h1>
+      <ArchiveTabs />
+
+      <div className="toolbar">
+        <span className="muted" style={{ flex: 1 }}>
+          {total > 0 && `${page * PAGE_SIZE + 1}–${Math.min((page + 1) * PAGE_SIZE, total)} / ${total}`}
+        </span>
+        <select value={cameraId} onChange={(e) => setCameraId(e.target.value)}>
+          <option value="">{t('Recordings.AllCameras')}</option>
+          {cameras.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {items === null ? (
+        <div className="spin">{t('Common.Loading')}</div>
+      ) : items.length === 0 ? (
+        <p className="muted">{t('Snapshots.Empty')}</p>
+      ) : (
+        <div className="gallery">
+          {items.map((s) => (
+            <button key={s.id} className="shot" onClick={() => setOpen(s)}>
+              <img src={api.snapshotImageUrl(s.id, true)} alt="" loading="lazy" />
+              <span className="cap">
+                <span className="when">{new Date(s.takenAt).toLocaleString()}</span>
+                <span className="who">{s.cameraName ?? '—'}</span>
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {pageCount > 1 && (
+        <div className="pager">
+          <button disabled={page === 0} onClick={() => void flip(page - 1)}>
+            <Icon name="chevronLeft" size={14} />
+          </button>
+          <span className="muted">{page + 1} / {pageCount}</span>
+          <button disabled={page + 1 >= pageCount} onClick={() => void flip(page + 1)}>
+            <Icon name="chevronRight" size={14} />
+          </button>
+        </div>
+      )}
+
+      {open && (
+        <div className="backdrop" onClick={() => setOpen(null)}>
+          <div className="modal snapshot-modal" onClick={(e) => e.stopPropagation()}>
+            <h2>{open.cameraName ?? '—'}</h2>
+            <img src={api.snapshotImageUrl(open.id)} alt="" />
+            <p className="muted" style={{ fontSize: 12 }}>
+              {new Date(open.takenAt).toLocaleString()}
+              {open.width > 0 && ` · ${open.width}×${open.height}`}
+            </p>
+            <div className="modal-actions">
+              <button onClick={() => setOpen(null)}>{t('Common.Close')}</button>
+              {can('Manage') && (
+                <button className="danger" onClick={() => setDeleting(open)}>
+                  {t('Cameras.Delete')}
+                </button>
+              )}
+              <a className="button-link row" href={api.snapshotImageUrl(open.id, false, true)} download>
+                <Icon name="download" /> {t('Snapshot.Download')}
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {deleting && (
+        <ConfirmModal
+          title={t('Snapshots.Delete')}
+          message={t('Snapshots.DeleteConfirm')}
+          confirmLabel={t('Cameras.Delete')}
+          danger
+          onConfirm={remove}
+          onCancel={() => setDeleting(null)}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/System.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/System.tsx
index 6e7c9d0..2e1058b 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/System.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/System.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { api } from '../api'
 import { useAuth } from '../auth'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { ConfirmModal } from '../components/Modals'
 
 type Status = { version: string; cameras: number; groups: number; sessions: number; streams: number }
@@ -113,7 +114,7 @@ export function System() {
             color: 'var(--text-1)',
           }}
         >
-          {t('System.Export')}
+          <Icon name="download" /> {t('System.Export')}
         </a>
         <div className="row">
           <input
diff --git a/src/OpenIPC.Viewer.Web.Client/src/pages/Users.tsx b/src/OpenIPC.Viewer.Web.Client/src/pages/Users.tsx
index fc30664..424eb6e 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/pages/Users.tsx
+++ b/src/OpenIPC.Viewer.Web.Client/src/pages/Users.tsx
@@ -2,12 +2,15 @@ import { useEffect, useState } from 'react'
 import { api, ApiError, type CameraDto, type WebUserDto } from '../api'
 import { useAuth } from '../auth'
 import { useI18n } from '../i18n'
+import { Icon } from '../components/Icon'
 import { ConfirmModal } from '../components/Modals'
 
 // Web console accounts: who may sign in, what they may do, and which cameras
 // they see. Mirrors the desktop access-config model (permission flags + camera
 // subset) so the two stay conceptually the same product feature.
-const PERMISSIONS = ['ViewLive', 'Ptz', 'Export', 'Manage'] as const
+// Every flag the server knows. ViewArchive was missing here, which quietly made
+// the archive ungrantable to anyone created from the web console.
+const PERMISSIONS = ['ViewLive', 'ViewArchive', 'Ptz', 'Talk', 'Export', 'Manage'] as const
 
 export function Users() {
   const { t } = useI18n()
@@ -35,8 +38,8 @@ export function Users() {
     <div className="wrap" style={{ maxWidth: 900 }}>
       <div className="toolbar">
         <h1 style={{ margin: 0, flex: 1 }}>{t('Users.Title')}</h1>
-        <button className="primary" disabled={!available} onClick={() => setEditing('new')}>
-          {t('Users.Add')}
+        <button className="primary row" disabled={!available} onClick={() => setEditing('new')}>
+          <Icon name="plus" /> {t('Users.Add')}
         </button>
       </div>
 
diff --git a/src/OpenIPC.Viewer.Web.Client/src/strings.ts b/src/OpenIPC.Viewer.Web.Client/src/strings.ts
index bd6f8e5..8f2e10b 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/strings.ts
+++ b/src/OpenIPC.Viewer.Web.Client/src/strings.ts
@@ -14,7 +14,9 @@ export const EN: Dict = {
   'Nav.Grid': 'Grid',
   'Nav.Groups': 'Groups',
   'Nav.Discovery': 'Discovery',
+  'Nav.Recordings': 'Archive',
   'Nav.Users': 'Users',
+  'Nav.Settings': 'Settings',
   'Nav.System': 'System',
   'Nav.SignOut': 'Sign out',
 
@@ -25,7 +27,7 @@ export const EN: Dict = {
   'System.Sessions': 'Active sessions',
   'System.Streams': 'Live streams',
   'System.Backup': 'Backup & restore',
-  'System.Export': '⭳ Export config',
+  'System.Export': 'Export config',
   'System.ImportBtn': 'Import',
   'System.BackupNote':
     'Export writes a JSON backup of cameras, groups and layouts. Camera passwords are never included.',
@@ -36,17 +38,18 @@ export const EN: Dict = {
   'System.RevokeConfirm': 'Sign out every session, including this one?',
 
   'Cameras.Title': 'Cameras',
-  'Cameras.Add': '＋ Add camera',
+  'Cameras.Add': 'Add camera',
   'Cameras.Empty': 'No cameras yet.',
   'Common.Loading': 'Loading…',
   'Common.Save': 'Save',
   'Common.Cancel': 'Cancel',
   'Common.Close': 'Close',
+  'Common.Seconds': 's',
   'Cameras.Th.Name': 'Name',
   'Cameras.Th.Host': 'Host',
   'Cameras.Th.Group': 'Group',
   'Cameras.Th.Grid': 'Grid',
-  'Cameras.Live': '▶ Live',
+  'Cameras.Live': 'Live',
   'Cameras.Edit': 'Edit',
   'Cameras.Delete': 'Delete',
   'Cameras.DeleteConfirm': 'Delete this camera?',
@@ -76,7 +79,7 @@ export const EN: Dict = {
 
   'Grid.Title': 'Grid',
   'Grid.Empty': 'No cameras to show. Add cameras or include them in the grid.',
-  'Grid.NewLayout': '＋ Layout',
+  'Grid.NewLayout': 'Layout',
   'Grid.NewLayoutTitle': 'New layout',
   'Grid.NewLayoutName': 'New layout name',
   'Grid.Edit': 'Edit layout',
@@ -90,9 +93,17 @@ export const EN: Dict = {
   'Grid.PrevPage': 'Previous page',
   'Grid.NextPage': 'Next page',
   'Grid.EditingPage': 'Editing page',
+  'Grid.Stills': 'Stills',
+  'Grid.StillsHint': 'Periodic snapshots instead of live streams — much lighter for a big wall',
+  'Grid.StillsInterval': 'Refresh interval',
+  'Grid.StillFailed': 'no frame',
+  'Grid.Kiosk': 'Kiosk',
+  'Grid.KioskHint': 'Full-screen wall without the interface (Esc to leave)',
+  'Grid.KioskExit': 'Leave kiosk',
+  'Grid.Rotate': 'Cycle pages',
 
   'Groups.Title': 'Groups',
-  'Groups.Add': '＋ Add group',
+  'Groups.Add': 'Add group',
   'Groups.Name': 'Name',
   'Groups.NewName': 'Group name',
   'Groups.Empty': 'No groups yet.',
@@ -101,7 +112,7 @@ export const EN: Dict = {
   'Groups.InUse': 'Group is still used by cameras.',
   'System.Account': 'Account',
 
-  'Live.Back': '← Cameras',
+  'Live.Back': 'Cameras',
   'Camera.Details': 'Details',
   'Camera.Credentials': 'Credentials set',
   'Camera.Capabilities': 'Capabilities',
@@ -156,7 +167,7 @@ export const EN: Dict = {
   'Discovery.AddFailed': 'Could not add the camera.',
 
   'Users.Title': 'Users',
-  'Users.Add': '＋ Add user',
+  'Users.Add': 'Add user',
   'Users.AddTitle': 'Add user',
   'Users.EditTitle': 'Edit user',
   'Users.Empty': 'No users yet — only the built-in administrator can sign in.',
@@ -175,6 +186,89 @@ export const EN: Dict = {
   'Users.Perm.Ptz': 'PTZ',
   'Users.Perm.Export': 'export',
   'Users.Perm.Manage': 'manage',
+
+  'Tile.Listen': 'Listen',
+  'Tile.Mute': 'Mute',
+  'Majestic.Title': 'Camera settings',
+  'Majestic.Reload': 'Reload',
+  'Majestic.NightMode': 'Day/night',
+  'Majestic.Night.day': 'Day',
+  'Majestic.Night.night': 'Night',
+  'Majestic.Night.auto': 'Auto',
+  'Majestic.Isp': 'Image (live)',
+  'Majestic.IspHint': 'Applied on the fly — the stream does not restart',
+  'Majestic.ApplyIsp': 'Apply',
+  'Majestic.Config': 'Configuration',
+  'Majestic.Filter': 'Filter…',
+  'Majestic.Changed': 'Changed',
+  'Majestic.Revert': 'Revert',
+  'Majestic.NoMatches': 'Nothing matches the filter.',
+  'Majestic.NoChanges': 'Nothing changed.',
+  'Majestic.Applied': 'Applied.',
+  'Majestic.AppliedRestart': 'Applied — the camera restarts the stream, the tile will blink.',
+  'Majestic.ApplyFailed': 'The camera rejected the change.',
+  'Majestic.RestartHint': 'Changing this restarts the video stream',
+  'Majestic.Metrics': 'Metrics',
+  'Majestic.NoMetrics': 'This firmware has no /metrics endpoint.',
+  'Majestic.Raw': 'Raw config.json',
+  'Majestic.RawHint': 'The whole file, as the camera holds it. No validation beyond "is it JSON" — same as editing it over SSH.',
+  'Majestic.BadJson': 'Not valid JSON',
+  'Majestic.NotMajestic': 'This camera does not run Majestic.',
+  'Majestic.Unreachable': 'The camera did not answer.',
+  'Recordings.Tab': 'Recordings',
+  'Snapshots.Title': 'Snapshots',
+  'Snapshots.Empty': 'No saved snapshots yet.',
+  'Snapshots.Delete': 'Delete snapshot',
+  'Snapshots.DeleteConfirm': 'Delete this snapshot from the library?',
+  'Snapshot.Save': 'Save to library',
+  'Snapshot.Saved': 'Saved to the library.',
+  'Snapshot.SaveFailed': 'Could not save the snapshot.',
+  'Talk.Title': 'Talk',
+  'Talk.Hold': 'Hold to talk',
+  'Talk.Talking': 'On air…',
+  'Talk.Unsupported': 'This camera has no speaker.',
+  'Talk.Busy': 'Someone else is talking to this camera.',
+  'Talk.Failed': 'The camera did not accept the audio.',
+  'Talk.NoMic': 'No microphone, or access was denied.',
+  'Talk.NeedsHttps': 'Talking needs a microphone, which browsers only allow over HTTPS (or on localhost).',
+  'Users.Perm.Talk': 'talk',
+  'Tile.Fullscreen': 'Fullscreen',
+  'Tile.ZoomIn': 'Zoom in (mouse wheel)',
+  'Tile.ZoomOut': 'Zoom out',
+  'Tile.ZoomReset': 'Reset zoom',
+  'Snapshot.Take': 'Snapshot',
+  'Snapshot.Taking': 'Asking the camera for a still…',
+  'Snapshot.Download': 'Download',
+  'Snapshot.Failed': 'The camera did not return a still.',
+
+  'Recording.Start': 'Record',
+  'Recording.Stop': 'Stop recording',
+  'Recording.Active': 'recording',
+  'Recording.Nothing': 'The camera sent nothing — no clip was saved.',
+  'Recording.Failed': 'Could not start recording.',
+
+  'Export.MarkIn': 'Mark in',
+  'Export.MarkOut': 'Mark out',
+  'Export.Save': 'Export clip',
+  'Export.Precise': 'exact frame (re-encodes)',
+
+  'Archive.PrevMonth': 'Previous month',
+  'Archive.NextMonth': 'Next month',
+  'Archive.ClearDay': 'Whole archive',
+  'Archive.EmptyDay': 'Nothing recorded on this day.',
+
+  'Recordings.Title': 'Archive',
+  'Recordings.AllCameras': 'All cameras',
+  'Recordings.Empty': 'Nothing recorded yet. Recording is started from the desktop app.',
+  'Recordings.Th.Camera': 'Camera',
+  'Recordings.Th.Started': 'Started',
+  'Recordings.Th.Duration': 'Length',
+  'Recordings.Th.Size': 'Size',
+  'Recordings.Play': 'Play',
+  'Recordings.Download': 'Download',
+  'Recordings.Motion': 'motion',
+  'Recordings.NotPlayableHint': 'This codec does not play in most browsers — download the file instead.',
+  'Recordings.DeleteConfirm': 'Delete this recording? The file is removed from disk.',
 }
 
 export const RU: Dict = {
@@ -188,7 +282,9 @@ export const RU: Dict = {
   'Nav.Grid': 'Сетка',
   'Nav.Groups': 'Группы',
   'Nav.Discovery': 'Поиск',
+  'Nav.Recordings': 'Архив',
   'Nav.Users': 'Пользователи',
+  'Nav.Settings': 'Настройки',
   'Nav.System': 'Система',
   'Nav.SignOut': 'Выход',
 
@@ -199,7 +295,7 @@ export const RU: Dict = {
   'System.Sessions': 'Активные сессии',
   'System.Streams': 'Живые потоки',
   'System.Backup': 'Бэкап и восстановление',
-  'System.Export': '⭳ Экспорт конфига',
+  'System.Export': 'Экспорт конфига',
   'System.ImportBtn': 'Импорт',
   'System.BackupNote':
     'Экспорт пишет JSON-бэкап камер, групп и раскладок. Пароли камер не включаются.',
@@ -210,9 +306,10 @@ export const RU: Dict = {
   'System.RevokeConfirm': 'Завершить все сессии, включая текущую?',
 
   'Cameras.Title': 'Камеры',
-  'Cameras.Add': '＋ Добавить камеру',
+  'Cameras.Add': 'Добавить камеру',
   'Cameras.Empty': 'Камер пока нет.',
   'Common.Loading': 'Загрузка…',
+  'Common.Seconds': 'с',
   'Common.Save': 'Сохранить',
   'Common.Cancel': 'Отмена',
   'Common.Close': 'Закрыть',
@@ -220,7 +317,7 @@ export const RU: Dict = {
   'Cameras.Th.Host': 'Хост',
   'Cameras.Th.Group': 'Группа',
   'Cameras.Th.Grid': 'Сетка',
-  'Cameras.Live': '▶ Эфир',
+  'Cameras.Live': 'Эфир',
   'Cameras.Edit': 'Изменить',
   'Cameras.Delete': 'Удалить',
   'Cameras.DeleteConfirm': 'Удалить камеру?',
@@ -249,7 +346,7 @@ export const RU: Dict = {
 
   'Grid.Title': 'Сетка',
   'Grid.Empty': 'Нет камер для показа. Добавьте камеры или включите их в сетку.',
-  'Grid.NewLayout': '＋ Раскладка',
+  'Grid.NewLayout': 'Раскладка',
   'Grid.NewLayoutTitle': 'Новая раскладка',
   'Grid.NewLayoutName': 'Название новой раскладки',
   'Grid.Edit': 'Изменить раскладку',
@@ -263,9 +360,17 @@ export const RU: Dict = {
   'Grid.PrevPage': 'Предыдущая страница',
   'Grid.NextPage': 'Следующая страница',
   'Grid.EditingPage': 'Редактируется страница',
+  'Grid.Stills': 'Стоп-кадры',
+  'Grid.StillsHint': 'Периодические снимки вместо живых потоков — намного легче для большой стены',
+  'Grid.StillsInterval': 'Интервал обновления',
+  'Grid.StillFailed': 'нет кадра',
+  'Grid.Kiosk': 'Киоск',
+  'Grid.KioskHint': 'Полноэкранная стена без интерфейса (выход — Esc)',
+  'Grid.KioskExit': 'Выйти из киоска',
+  'Grid.Rotate': 'Листать страницы',
 
   'Groups.Title': 'Группы',
-  'Groups.Add': '＋ Добавить группу',
+  'Groups.Add': 'Добавить группу',
   'Groups.Name': 'Имя',
   'Groups.NewName': 'Название группы',
   'Groups.Empty': 'Групп пока нет.',
@@ -274,7 +379,7 @@ export const RU: Dict = {
   'Groups.InUse': 'Группа ещё используется камерами.',
   'System.Account': 'Учётная запись',
 
-  'Live.Back': '← Камеры',
+  'Live.Back': 'Камеры',
   'Camera.Details': 'Детали',
   'Camera.Credentials': 'Учётные данные заданы',
   'Camera.Capabilities': 'Возможности',
@@ -329,7 +434,7 @@ export const RU: Dict = {
   'Discovery.AddFailed': 'Не удалось добавить камеру.',
 
   'Users.Title': 'Пользователи',
-  'Users.Add': '＋ Добавить пользователя',
+  'Users.Add': 'Добавить пользователя',
   'Users.AddTitle': 'Добавить пользователя',
   'Users.EditTitle': 'Изменить пользователя',
   'Users.Empty': 'Пользователей пока нет — войти может только встроенный администратор.',
@@ -348,4 +453,87 @@ export const RU: Dict = {
   'Users.Perm.Ptz': 'PTZ',
   'Users.Perm.Export': 'экспорт',
   'Users.Perm.Manage': 'управление',
+
+  'Tile.Listen': 'Слушать',
+  'Tile.Mute': 'Выключить звук',
+  'Majestic.Title': 'Настройки камеры',
+  'Majestic.Reload': 'Обновить',
+  'Majestic.NightMode': 'День/ночь',
+  'Majestic.Night.day': 'День',
+  'Majestic.Night.night': 'Ночь',
+  'Majestic.Night.auto': 'Авто',
+  'Majestic.Isp': 'Изображение (на лету)',
+  'Majestic.IspHint': 'Применяется на лету — поток не перезапускается',
+  'Majestic.ApplyIsp': 'Применить',
+  'Majestic.Config': 'Конфигурация',
+  'Majestic.Filter': 'Фильтр…',
+  'Majestic.Changed': 'Изменено',
+  'Majestic.Revert': 'Вернуть',
+  'Majestic.NoMatches': 'Ничего не найдено.',
+  'Majestic.NoChanges': 'Изменений нет.',
+  'Majestic.Applied': 'Применено.',
+  'Majestic.AppliedRestart': 'Применено — камера перезапускает поток, тайл моргнёт.',
+  'Majestic.ApplyFailed': 'Камера не приняла изменение.',
+  'Majestic.RestartHint': 'Изменение перезапускает видеопоток',
+  'Majestic.Metrics': 'Метрики',
+  'Majestic.NoMetrics': 'В этой прошивке нет эндпоинта /metrics.',
+  'Majestic.Raw': 'Сырой config.json',
+  'Majestic.RawHint': 'Файл целиком, как его хранит камера. Проверяется только то, что это JSON — как при правке по SSH.',
+  'Majestic.BadJson': 'Некорректный JSON',
+  'Majestic.NotMajestic': 'На этой камере нет Majestic.',
+  'Majestic.Unreachable': 'Камера не ответила.',
+  'Recordings.Tab': 'Записи',
+  'Snapshots.Title': 'Снимки',
+  'Snapshots.Empty': 'Сохранённых снимков пока нет.',
+  'Snapshots.Delete': 'Удалить снимок',
+  'Snapshots.DeleteConfirm': 'Удалить этот снимок из библиотеки?',
+  'Snapshot.Save': 'Сохранить в архив',
+  'Snapshot.Saved': 'Сохранено в архив.',
+  'Snapshot.SaveFailed': 'Не удалось сохранить снимок.',
+  'Talk.Title': 'Говорить',
+  'Talk.Hold': 'Удерживайте, чтобы говорить',
+  'Talk.Talking': 'В эфире…',
+  'Talk.Unsupported': 'У этой камеры нет динамика.',
+  'Talk.Busy': 'С этой камерой уже кто-то говорит.',
+  'Talk.Failed': 'Камера не приняла звук.',
+  'Talk.NoMic': 'Микрофона нет, или доступ к нему запрещён.',
+  'Talk.NeedsHttps': 'Для разговора нужен микрофон, а браузер даёт его только по HTTPS (или на localhost).',
+  'Users.Perm.Talk': 'говорить',
+  'Tile.Fullscreen': 'Во весь экран',
+  'Tile.ZoomIn': 'Приблизить (колесо мыши)',
+  'Tile.ZoomOut': 'Отдалить',
+  'Tile.ZoomReset': 'Сбросить зум',
+  'Snapshot.Take': 'Снимок',
+  'Snapshot.Taking': 'Запрашиваем кадр у камеры…',
+  'Snapshot.Download': 'Скачать',
+  'Snapshot.Failed': 'Камера не отдала кадр.',
+
+  'Recording.Start': 'Записать',
+  'Recording.Stop': 'Остановить запись',
+  'Recording.Active': 'идёт запись',
+  'Recording.Nothing': 'Камера ничего не передала — запись не сохранена.',
+  'Recording.Failed': 'Не удалось начать запись.',
+
+  'Export.MarkIn': 'Начало',
+  'Export.MarkOut': 'Конец',
+  'Export.Save': 'Сохранить фрагмент',
+  'Export.Precise': 'точный кадр (перекодирование)',
+
+  'Archive.PrevMonth': 'Предыдущий месяц',
+  'Archive.NextMonth': 'Следующий месяц',
+  'Archive.ClearDay': 'Весь архив',
+  'Archive.EmptyDay': 'В этот день ничего не записано.',
+
+  'Recordings.Title': 'Архив',
+  'Recordings.AllCameras': 'Все камеры',
+  'Recordings.Empty': 'Записей пока нет. Запись запускается из десктоп-приложения.',
+  'Recordings.Th.Camera': 'Камера',
+  'Recordings.Th.Started': 'Начало',
+  'Recordings.Th.Duration': 'Длительность',
+  'Recordings.Th.Size': 'Размер',
+  'Recordings.Play': 'Смотреть',
+  'Recordings.Download': 'Скачать',
+  'Recordings.Motion': 'движение',
+  'Recordings.NotPlayableHint': 'Этот кодек не играет в большинстве браузеров — скачайте файл.',
+  'Recordings.DeleteConfirm': 'Удалить запись? Файл будет удалён с диска.',
 }
diff --git a/src/OpenIPC.Viewer.Web.Client/src/styles.css b/src/OpenIPC.Viewer.Web.Client/src/styles.css
index b42fbd5..d105624 100644
--- a/src/OpenIPC.Viewer.Web.Client/src/styles.css
+++ b/src/OpenIPC.Viewer.Web.Client/src/styles.css
@@ -140,6 +140,48 @@ label input, label select { color:var(--text-1); }
 .cell:hover .expand { opacity:1; }
 .cell .expand:hover { background:var(--accent); }
 
+/* Digital zoom: the slot is scaled and dragged, the cell clips it (it already
+   has overflow:hidden). No transition — panning must track the pointer. */
+.cell .video-slot { transform-origin:center center; }
+.cell.zoomed { cursor:grab; }
+.cell.zoomed:active { cursor:grabbing; }
+.cell .zoom-pad { position:absolute; right:8px; top:8px; display:flex; gap:4px;
+  opacity:0; transition:opacity .15s; }
+.cell:hover .zoom-pad, .cell.zoomed .zoom-pad { opacity:1; }
+.cell .zoom-pad button { width:28px; height:28px; padding:0; display:flex;
+  align-items:center; justify-content:center; background:rgba(0,0,0,.55);
+  border:none; border-radius:var(--r-sm); color:#fff; line-height:1; }
+.cell .zoom-pad button:hover:not(:disabled) { background:var(--accent); }
+.cell .zoom-pad button:disabled { opacity:.35; }
+.cell .zoom-level { font-size:11px; font-variant-numeric:tabular-nums; }
+.cell .zoom-pad button:has(.zoom-level) { width:auto; padding:0 8px; }
+
+/* Stills mode: a JPEG in place of the <video>, framed the same way. */
+.cell img.still { position:absolute; inset:0; width:100%; height:100%;
+  object-fit:contain; background:#000; display:block; }
+
+/* Kiosk: the wall fills the screen, everything else gets out of the way. The
+   grid gets explicit rows so the cells share the height instead of keeping
+   their 16:9 box and leaving a band of background under the wall. */
+/* Fixed rather than sized to the viewport: the mode has to cover the page even
+   when the fullscreen request was refused (embedded/iframed pages), and being
+   fixed makes the fullscreen case identical. */
+.stage.kiosk { position:fixed; inset:0; z-index:20; background:var(--bg0);
+  display:flex; flex-direction:column; padding:8px; box-sizing:border-box; }
+.stage.kiosk .videos { margin-top:0; flex:1; min-height:0; }
+.stage.kiosk .cell { aspect-ratio:auto; height:100%; }
+.stage.kiosk .videos.n4 { grid-template-rows:repeat(2,1fr); }
+.stage.kiosk .videos.n9 { grid-template-rows:repeat(3,1fr); }
+.stage.kiosk .videos.n16 { grid-template-rows:repeat(4,1fr); }
+.stage.kiosk .videos.n25 { grid-template-rows:repeat(5,1fr); }
+.stage.kiosk .pager { justify-content:center; margin-top:8px; }
+/* The kiosk's own controls: dim until pointed at, so a wall left running shows
+   only cameras. */
+.kiosk-bar { display:flex; align-items:center; gap:10px; justify-content:flex-end;
+  padding:0 0 8px; opacity:.15; transition:opacity .15s; }
+.kiosk-bar:hover { opacity:1; }
+.kiosk-bar label { display:flex; align-items:center; gap:6px; font-size:12px; }
+
 /* Login: centered card, no sidebar. */
 .login { max-width:340px; margin:12vh auto 0; padding:24px; }
 .login .card { background:var(--bg2); border:1px solid var(--border-weak);
@@ -190,7 +232,8 @@ label input, label select { color:var(--text-1); }
      of postage stamps is useless. Tiles keep their 16:9 box. */
   .videos.n9, .videos.n16, .videos.n25 { grid-template-columns:repeat(2,1fr); }
   .videos { gap:6px; }
-  .cell .expand { opacity:1; }   /* no hover on touch — always show */
+  .cell .expand, .cell .snap, .cell .listen, .cell .zoom-pad { opacity:1; }   /* no hover on touch — always show */
+  .kiosk-bar { opacity:1; }
 
   /* Wide list tables (the camera list) scroll sideways rather than squashing;
      narrow key/value tables (.details) stack instead — see below. */
@@ -241,3 +284,103 @@ label input, label select { color:var(--text-1); }
 .camera-picker { max-height:200px; overflow-y:auto; margin-top:8px; padding:8px;
   border:1px solid var(--border-weak); border-radius:var(--r-sm); background:var(--bg2);
   display:flex; flex-direction:column; gap:6px; }
+
+/* Snapshot: a second tile affordance next to fullscreen, and the viewer modal. */
+.cell .snap { position:absolute; right:42px; bottom:8px; opacity:0; transition:opacity .15s;
+  width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center;
+  background:rgba(0,0,0,.55); border:none; border-radius:var(--r-sm); color:#fff; font-size:14px; line-height:1; }
+.cell:hover .snap { opacity:1; }
+.cell .snap:hover { background:var(--accent); }
+.snapshot-modal { max-width:900px; }
+.snapshot-modal img { width:100%; height:auto; border-radius:var(--r-sm); background:#000; display:block; }
+.button-link { display:inline-block; padding:8px 10px; border:1px solid var(--accent);
+  border-radius:var(--r-sm); background:var(--accent); color:#fff; }
+.button-link:hover { background:var(--accent-hover); border-color:var(--accent-hover); text-decoration:none; }
+
+/* Archive player: the selected recording, above the list. */
+.player { margin-bottom:18px; }
+.player video { width:100%; max-height:60vh; background:#000; border-radius:var(--r-md); display:block; }
+
+/* Listen toggle — same affordance row as snapshot/fullscreen, shown only when
+   the stream actually carries an audio track. */
+.cell .listen { position:absolute; right:76px; bottom:8px; opacity:0; transition:opacity .15s;
+  width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center;
+  background:rgba(0,0,0,.55); border:none; border-radius:var(--r-sm); color:#fff; font-size:13px; line-height:1; }
+.cell:hover .listen { opacity:1; }
+.cell .listen:hover { background:var(--accent); }
+
+/* Icons sit on the text baseline and take the surrounding colour; a button or
+   link that pairs one with a label gets the gap from .row. */
+.icon { flex:none; }
+button.row, a.row { display:inline-flex; align-items:center; gap:6px; }
+
+/* Archive calendar: a month of days, shaded by how much was recorded. */
+.calendar { margin-bottom:18px; max-width:340px; }
+.calendar-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+.calendar-head button { padding:5px 8px; }
+.calendar-month { flex:1; font-weight:500; text-transform:capitalize; }
+.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
+.calendar-weekday { font-size:11px; color:var(--text-3); text-align:center; padding-bottom:2px; }
+.calendar-day { position:relative; aspect-ratio:1; padding:0; font-size:12px;
+  background:var(--bg2); border:1px solid transparent; border-radius:var(--r-sm); color:var(--text-3); }
+.calendar-day:disabled { opacity:.35; cursor:default; }
+.calendar-day.has-activity { background:var(--accent-tint); color:var(--text-1); cursor:pointer; }
+.calendar-day.has-activity:hover { border-color:var(--accent); }
+.calendar-day.today { border-color:var(--border-med); }
+.calendar-day.selected { background:var(--accent); border-color:var(--accent); color:#fff; opacity:1 !important; }
+.calendar-dot { position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
+  width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.7; }
+
+/* Clip export controls under the archive player. */
+.export { flex-wrap:wrap; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-weak); }
+.button-link.disabled { opacity:.5; pointer-events:none; }
+
+/* Settings sub-tabs sit under the page title, not in the sidebar. */
+.settings-tabs { margin-bottom:18px; }
+.button-link.ghost { background:var(--bg2); border-color:var(--border-med); color:var(--text-1); }
+.button-link.ghost:hover { background:var(--bg3); border-color:var(--text-3); }
+
+/* Camera settings (Majestic). Dense two-column rows: the panel routinely lists
+   a hundred knobs, so a form-grid layout would be a mile of scrolling. */
+.majestic { border:1px solid var(--border-weak); border-radius:var(--r-md);
+  padding:16px; background:var(--bg1); }
+.majestic h3 { margin:0; font-size:13px; }
+.majestic h4 { margin:12px 0 6px; font-size:12px; color:var(--text-3);
+  text-transform:uppercase; letter-spacing:.04em; }
+.majestic .toolbar { margin-bottom:8px; }
+.majestic-block { border-top:1px solid var(--border-weak); padding-top:12px; margin-top:12px; }
+.majestic .filter { width:180px; }
+.fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:6px 16px; }
+/* flex-direction is explicit: the global `label` rule stacks its children, and a
+   knob row wants label and control side by side. */
+.field { display:flex; flex-direction:row; align-items:center; gap:8px; font-size:12px; min-height:28px; }
+.field .k { flex:1; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.field input[type=text], .field input[type=number], .field select { width:120px; }
+.field input[type=checkbox] { margin:0; }
+/* An edited-but-unsaved row, so "what am I about to send" is visible at a glance. */
+.field.modified .k { color:var(--accent); font-weight:600; }
+.field .restart { margin-left:4px; color:var(--warning); cursor:help; }
+.metrics td { font-size:12px; font-variant-numeric:tabular-nums; }
+.raw-json { width:100%; font-family:var(--font-mono, monospace); font-size:12px;
+  background:var(--bg0); color:var(--text-1); border:1px solid var(--border-weak);
+  border-radius:var(--r-sm); padding:8px; resize:vertical; }
+@media (max-width:700px) {
+  .fields { grid-template-columns:1fr; }
+  .majestic .filter { width:120px; }
+}
+
+/* Snapshot library: a thumbnail grid that keeps its rows even, and a caption
+   that never pushes the image around. */
+.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
+.shot { padding:0; border:1px solid var(--border-weak); border-radius:var(--r-md);
+  background:var(--bg2); overflow:hidden; display:flex; flex-direction:column; text-align:left; }
+.shot:hover { border-color:var(--accent); }
+.shot img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block; }
+.shot .cap { display:flex; flex-direction:column; gap:2px; padding:6px 8px; font-size:11px; }
+.shot .when { color:var(--text-1); font-variant-numeric:tabular-nums; }
+.shot .who { color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+/* Push-to-talk: unmistakable while live, since it is an open microphone into
+   someone else's room. */
+.talk.on { background:var(--danger); border-color:var(--danger); color:#fff; }
+.talk.on:hover { border-color:var(--danger); }
diff --git a/src/OpenIPC.Viewer.Web/Api/LiveApi.cs b/src/OpenIPC.Viewer.Web/Api/LiveApi.cs
index ff70bdc..58463cd 100644
--- a/src/OpenIPC.Viewer.Web/Api/LiveApi.cs
+++ b/src/OpenIPC.Viewer.Web/Api/LiveApi.cs
@@ -74,19 +74,31 @@ public static void MapLiveEndpoints(this WebApplication app)
 
     private static async Task PumpAsync(WebSocket socket, LiveSubscription subscription, CancellationToken ct)
     {
+        // A viewer leaving closes the socket, which arrives as a close *frame* —
+        // and a frame is only seen by someone receiving. Without this loop the
+        // send side keeps writing into a socket the browser has already given
+        // up on, so the shared ffmpeg process outlives its last viewer (a grid
+        // switched to stills mode, or a tab navigated away, would leave one
+        // running per camera). We never expect data from the client, so the
+        // first receive to complete means "gone" either way.
+        using var leaving = CancellationTokenSource.CreateLinkedTokenSource(ct);
+        var watchClose = WatchForCloseAsync(socket, leaving);
+
         try
         {
-            await foreach (var chunk in subscription.Reader.ReadAllAsync(ct).ConfigureAwait(false))
+            await foreach (var chunk in subscription.Reader.ReadAllAsync(leaving.Token).ConfigureAwait(false))
             {
                 if (socket.State != WebSocketState.Open)
                     break;
-                await socket.SendAsync(chunk, WebSocketMessageType.Binary, endOfMessage: true, ct).ConfigureAwait(false);
+                await socket.SendAsync(chunk, WebSocketMessageType.Binary, endOfMessage: true, leaving.Token).ConfigureAwait(false);
             }
         }
         catch (OperationCanceledException) { }
         catch (Exception) { /* socket closed by the viewer — normal */ }
         finally
         {
+            leaving.Cancel();
+            try { await watchClose.ConfigureAwait(false); } catch { /* best effort */ }
             if (socket.State == WebSocketState.Open)
             {
                 try { await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, "stream ended", CancellationToken.None); }
@@ -95,6 +107,28 @@ private static async Task PumpAsync(WebSocket socket, LiveSubscription subscript
         }
     }
 
+    // Reads until the client closes (or errors), then trips the token so the
+    // send loop stops and the subscription is disposed.
+    private static async Task WatchForCloseAsync(WebSocket socket, CancellationTokenSource leaving)
+    {
+        var scratch = new byte[256];
+        try
+        {
+            while (socket.State == WebSocketState.Open)
+            {
+                var result = await socket.ReceiveAsync(scratch, leaving.Token).ConfigureAwait(false);
+                if (result.MessageType == WebSocketMessageType.Close)
+                    break;
+            }
+        }
+        catch (OperationCanceledException) { /* we're the ones shutting down */ }
+        catch (Exception) { /* connection gone — same outcome */ }
+        finally
+        {
+            try { leaving.Cancel(); } catch (ObjectDisposedException) { /* already torn down */ }
+        }
+    }
+
     // Injects credentials into the RTSP URL for ffmpeg (they live in the secrets
     // store, not the entity's URI). Never surfaced back to any client.
     private static string BuildRtspUrl(Uri baseUri, CameraCredentials? credentials)
diff --git a/src/OpenIPC.Viewer.Web/Api/LiveFfmpeg.cs b/src/OpenIPC.Viewer.Web/Api/LiveFfmpeg.cs
index e5b2109..cdc47bf 100644
--- a/src/OpenIPC.Viewer.Web/Api/LiveFfmpeg.cs
+++ b/src/OpenIPC.Viewer.Web/Api/LiveFfmpeg.cs
@@ -21,7 +21,18 @@ public static Process Start(string rtspUrl, bool transcode)
             CreateNoWindow = true,
         };
 
-        var args = new List<string> { "-rtsp_transport", "tcp", "-fflags", "nobuffer", "-i", rtspUrl, "-an" };
+        var args = new List<string> { "-rtsp_transport", "tcp", "-fflags", "nobuffer", "-i", rtspUrl };
+
+        // Audio rides along in the same stream instead of getting its own ffmpeg
+        // session: AAC at 64 kbps is around a percent of the video bitrate, so
+        // carrying it for every viewer is cheaper than a second process for the
+        // one who unmutes — and nobody's picture restarts when they do. Tiles
+        // start muted; the browser needs that for autoplay anyway.
+        //
+        // Always re-encoded rather than copied: cameras emit G.711/PCM/Opus more
+        // often than AAC, and only AAC plays in MSE. With no audio track on the
+        // input ffmpeg simply ignores these.
+        args.AddRange(new[] { "-c:a", "aac", "-b:a", "64k", "-ac", "1" });
         if (transcode)
         {
             // Software H.264 (libopenh264 — the LGPL build has no libx264). Output
@@ -63,6 +74,9 @@ public static void Kill(Process? proc)
     }
 
     // Same bundled-then-PATH resolution as FfmpegSubprocessRecorder.
+    // Also used by the snapshot endpoint, which spawns its own one-shot ffmpeg.
+    public static string ResolveExecutable() => Resolve();
+
     private static string Resolve()
     {
         string? rid = null;
diff --git a/src/OpenIPC.Viewer.Web/Api/MajesticApi.cs b/src/OpenIPC.Viewer.Web/Api/MajesticApi.cs
new file mode 100644
index 0000000..57e1a50
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/MajesticApi.cs
@@ -0,0 +1,301 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Majestic;
+using OpenIPC.Viewer.Core.Services;
+using OpenIPC.Viewer.Web.Auth;
+using static OpenIPC.Viewer.Web.Api.ApiHelpers;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// The camera's own settings (Majestic config.json), over HTTP.
+//
+// Everything here is gated on Manage, including the reads — config.json is not
+// a view of the picture, it is the installation: it carries the RTSP/ONVIF
+// logins, and on many builds the Wi-Fi PSK. ViewLive means "may watch this
+// camera", which is not the same permission at all.
+//
+// Writes are read-modify-write against a FRESH copy of the camera's config, not
+// against whatever the browser last saw: the client sends only (path, value)
+// pairs, so a stale tab can't silently revert a field someone else changed, and
+// a malicious one can't post a wholesale payload through the field editor. The
+// raw-JSON endpoint is the deliberate exception — that one is "I know what I'm
+// doing", and it says so in the UI.
+public static class MajesticApi
+{
+    private static readonly TimeSpan CallTimeout = TimeSpan.FromSeconds(8);
+
+    public static void MapMajesticEndpoints(this WebApplication app)
+    {
+        // Everything the panel needs in one round-trip: identity, the parsed
+        // config and the current night mode. Individual failures degrade to
+        // nulls rather than failing the whole read — an older firmware without
+        // /api/v1/info.json still has an editable config.
+        app.MapGet("/api/v1/cameras/{id}/majestic", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            return await InvokeAsync(ctx, "read", ct, async () =>
+            {
+                using var timeout = Timeout(ct);
+                var config = await target!.Value.Client.GetConfigAsync(target.Value.Endpoint, timeout.Token);
+                MajesticInfo? info = null;
+                try
+                {
+                    info = await target.Value.Client.GetInfoAsync(target.Value.Endpoint, timeout.Token);
+                }
+                catch (Exception ex) when (ex is not OperationCanceledException)
+                {
+                    Log(ctx).LogInformation(ex, "Majestic info unavailable for {Host}", target.Value.Endpoint.Host);
+                }
+
+                var model = target.Value.Schema.Parse(config.RawJson);
+                return Results.Json(new
+                {
+                    info = info is null ? null : new
+                    {
+                        model = info.Model,
+                        firmware = info.FirmwareVersion,
+                        chip = info.ChipModel,
+                        uptime = info.Uptime,
+                    },
+                    nightMode = config.NightMode.ToString().ToLowerInvariant(),
+                    sections = model.Sections.Select(s => new
+                    {
+                        name = s.Name,
+                        fields = s.Fields.Select(ToDto).ToList(),
+                    }).ToList(),
+                    rawJson = config.RawJson,
+                });
+            });
+        });
+
+        // Field edits. The body is a list of (path, value); anything that isn't
+        // a field we just parsed is ignored, and values equal to the camera's
+        // current one are dropped — so "save" with nothing changed is a no-op
+        // instead of a needless config POST (which restarts the encoder).
+        app.MapPost("/api/v1/cameras/{id}/majestic/config", async (
+            string id, MajesticEditsRequest? body, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+            if (body?.Edits is null || body.Edits.Count == 0)
+                return ValidationError("no edits supplied");
+
+            return await InvokeAsync(ctx, "apply", ct, async () =>
+            {
+                using var timeout = Timeout(ct);
+                var config = await target!.Value.Client.GetConfigAsync(target.Value.Endpoint, timeout.Token);
+                var model = target.Value.Schema.Parse(config.RawJson);
+
+                var editedByPath = new Dictionary<string, string>(StringComparer.Ordinal);
+                foreach (var edit in body.Edits)
+                {
+                    if (!string.IsNullOrEmpty(edit.Path) && edit.Value is not null)
+                        editedByPath[edit.Path] = edit.Value;
+                }
+
+                var edits = model.ComputeEdits(editedByPath);
+                if (edits.Count == 0)
+                    return Results.Json(new { applied = 0, restart = false });
+
+                var updated = target.Value.Schema.ApplyEdits(config.RawJson, edits);
+                await target.Value.Client.UpdateRawConfigAsync(target.Value.Endpoint, updated, timeout.Token);
+                Audit(ctx, "majestic.config", $"{id}/{string.Join(",", edits.Select(e => e.Section + "." + e.Key))}");
+
+                // Whether the picture is about to blink, so the UI can warn
+                // instead of leaving the viewer wondering why the tile froze.
+                var restart = model.Fields
+                    .Where(f => editedByPath.ContainsKey(f.Path))
+                    .Any(f => f.RequiresRestart);
+                return Results.Json(new { applied = edits.Count, restart });
+            });
+        });
+
+        // The escape hatch: post the whole config.json as typed. Validated as
+        // JSON by the client below us; everything past that is the operator's
+        // call, exactly like editing the file over SSH.
+        app.MapPost("/api/v1/cameras/{id}/majestic/raw", async (
+            string id, MajesticRawRequest? body, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+            if (string.IsNullOrWhiteSpace(body?.Json))
+                return ValidationError("json is required");
+
+            return await InvokeAsync(ctx, "raw", ct, async () =>
+            {
+                using var timeout = Timeout(ct);
+                try
+                {
+                    await target!.Value.Client.UpdateRawConfigAsync(target.Value.Endpoint, body!.Json!, timeout.Token);
+                }
+                catch (ArgumentException)
+                {
+                    return ValidationError("not valid JSON");
+                }
+                Audit(ctx, "majestic.raw", id);
+                return Results.NoContent();
+            });
+        });
+
+        app.MapPost("/api/v1/cameras/{id}/majestic/night", async (
+            string id, MajesticNightRequest? body, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+            if (!Enum.TryParse<NightMode>(body?.Mode, ignoreCase: true, out var mode) || mode == NightMode.Unknown)
+                return ValidationError("mode must be day, night or auto");
+
+            return await InvokeAsync(ctx, "night", ct, async () =>
+            {
+                using var timeout = Timeout(ct);
+                await target!.Value.Client.SetNightModeAsync(target.Value.Endpoint, mode, timeout.Token);
+                Audit(ctx, "majestic.night", $"{id}/{mode}");
+                return Results.NoContent();
+            });
+        });
+
+        // Read-only telemetry. Parsed here rather than in the browser so the
+        // Prometheus text format stays one implementation (Core's parser, which
+        // the desktop uses too).
+        app.MapGet("/api/v1/cameras/{id}/majestic/metrics", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            return await InvokeAsync(ctx, "metrics", ct, async () =>
+            {
+                using var timeout = Timeout(ct);
+                var text = await target!.Value.Client.GetMetricsAsync(target.Value.Endpoint, timeout.Token);
+                var samples = PrometheusTextParser.Parse(text);
+                return Results.Json(samples.Select(s => new { name = s.Display, value = s.Value }).ToList());
+            });
+        });
+    }
+
+    private readonly record struct MajesticTarget(
+        IMajesticClient Client, IMajesticConfigSchema Schema, MajesticEndpoint Endpoint);
+
+    private static async Task<(MajesticTarget? Target, IResult? Error)> TryResolveAsync(
+        HttpContext ctx, string id, CancellationToken ct)
+    {
+        if (ctx.Deny(WebPermission.Manage) is { } forbidden)
+            return (null, forbidden);
+        if (ctx.DenyCamera(id) is { } hidden)
+            return (null, hidden);
+
+        var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+        var majestic = ctx.RequestServices.GetService<IMajesticClient>();
+        var schema = ctx.RequestServices.GetService<IMajesticConfigSchema>();
+        if (dir is null || majestic is null || schema is null)
+            return (null, BackendUnavailable());
+        if (!Guid.TryParse(id, out var guid))
+            return (null, ValidationError("invalid camera id"));
+
+        var camera = await dir.GetAsync(new CameraId(guid), ct);
+        if (camera is null)
+            return (null, NotFound());
+
+        var credentials = await dir.GetCredentialsAsync(camera.Id, ct);
+        var endpoint = new MajesticEndpoint(camera.Host, camera.HttpPort, credentials);
+
+        // The IsMajestic flag is only ever set by the discovery probe, so a
+        // camera added by hand in the web UI would never show a settings panel
+        // even while running Majestic. Ping once and remember the answer — the
+        // same thing SingleCameraPageViewModel.InitMajesticAsync does on the
+        // desktop, so both heads converge on the same flag.
+        if (!camera.IsMajestic)
+        {
+            bool reachable;
+            try
+            {
+                using var ping = Timeout(ct);
+                reachable = await majestic.PingAsync(endpoint, ping.Token);
+            }
+            catch (Exception ex)
+            {
+                Log(ctx).LogInformation(ex, "Majestic ping of {Host} failed", camera.Host);
+                reachable = false;
+            }
+            if (!reachable)
+                return (null, Unavailable());
+            await dir.SetIsMajesticAsync(camera.Id, true, ct);
+        }
+
+        return (new MajesticTarget(majestic, schema, endpoint), null);
+    }
+
+    // Camera-side failures are upstream problems: 502 with a flat code, details
+    // to the log only (the exception text carries host and sometimes body).
+    //
+    // The cancellation case has to be split, or a camera that simply never
+    // answers reads as success: our own call timeout also surfaces as an
+    // OperationCanceledException, and answering 204 to that told the browser
+    // "done" while nothing had happened. Only the caller's token going down
+    // means the request was abandoned.
+    private static async Task<IResult> InvokeAsync(
+        HttpContext ctx, string operation, CancellationToken requestAborted, Func<Task<IResult>> action)
+    {
+        try
+        {
+            return await action();
+        }
+        catch (OperationCanceledException) when (requestAborted.IsCancellationRequested)
+        {
+            return Results.NoContent();
+        }
+        catch (OperationCanceledException)
+        {
+            Log(ctx).LogWarning("Majestic {Operation} timed out", operation);
+            return Results.Json(new { error = "majestic_timeout" }, statusCode: StatusCodes.Status504GatewayTimeout);
+        }
+        catch (Exception ex)
+        {
+            Log(ctx).LogWarning(ex, "Majestic {Operation} failed", operation);
+            return Results.Json(new { error = "majestic_failed" }, statusCode: StatusCodes.Status502BadGateway);
+        }
+    }
+
+    private static IResult Unavailable() =>
+        Results.Json(new { error = "majestic_unavailable" }, statusCode: StatusCodes.Status409Conflict);
+
+    private static CancellationTokenSource Timeout(CancellationToken ct)
+    {
+        var cts = CancellationTokenSource.CreateLinkedTokenSource(ct);
+        cts.CancelAfter(CallTimeout);
+        return cts;
+    }
+
+    private static ILogger Log(HttpContext ctx) =>
+        ctx.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("OpenIPC.Web.Majestic");
+
+    private static object ToDto(MajesticConfigField f) => new
+    {
+        path = f.Path,
+        section = f.Section,
+        key = f.Key,
+        kind = f.Kind.ToString().ToLowerInvariant(),
+        value = f.Value,
+        options = f.Options,
+        restart = f.RequiresRestart,
+    };
+}
+
+public sealed record MajesticFieldEditRequest(string? Path, string? Value);
+public sealed record MajesticEditsRequest(IReadOnlyList<MajesticFieldEditRequest>? Edits);
+public sealed record MajesticRawRequest(string? Json);
+public sealed record MajesticNightRequest(string? Mode);
diff --git a/src/OpenIPC.Viewer.Web/Api/RecordingApi.cs b/src/OpenIPC.Viewer.Web/Api/RecordingApi.cs
new file mode 100644
index 0000000..16b5f1f
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/RecordingApi.cs
@@ -0,0 +1,417 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.IO;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Persistence;
+using OpenIPC.Viewer.Core.Recording;
+using OpenIPC.Viewer.Core.Services;
+using OpenIPC.Viewer.Web.Auth;
+using static OpenIPC.Viewer.Web.Api.ApiHelpers;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// The recordings the desktop head wrote, listed and played back in the browser.
+//
+// Playback is a plain ranged file response, not a stream we re-encode: the
+// recorder writes fragmented MP4 with the camera's own H.264, which every
+// browser plays natively, and `enableRangeProcessing` gives the <video> element
+// real seeking for free. H.265 recordings are the exception — the DTO says so
+// and the UI offers a download instead of pretending it will play.
+//
+// Only files that are indexed in the database can be served: the id is looked
+// up and the path comes from the row, so no request can reach an arbitrary file.
+public static class RecordingApi
+{
+    public static void MapRecordingEndpoints(this WebApplication app)
+    {
+        app.MapGet("/api/v1/recordings", async (
+            string? cameraId, string? from, string? to, int? offset, int? limit,
+            HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var repo = ctx.RequestServices.GetService<IRecordingRepository>();
+            if (repo is null)
+                return BackendUnavailable();
+
+            CameraId? filter = null;
+            if (!string.IsNullOrEmpty(cameraId))
+            {
+                if (!Guid.TryParse(cameraId, out var guid))
+                    return ValidationError("invalid camera id");
+                filter = new CameraId(guid);
+            }
+
+            if (!TryParseRange(from, to, out var since, out var until))
+                return ValidationError("from/to must be ISO-8601 timestamps");
+
+            var names = await LoadCameraNamesAsync(ctx, ct);
+            var matching = (await repo.ListAsync(filter, ct))
+                // Same rule as everywhere else: a camera outside the caller's
+                // subset doesn't exist for them, and neither does its archive.
+                .Where(r => ctx.CanSeeCamera(r.CameraId.ToString()))
+                .Where(r => InRange(r.StartedAt, since, until))
+                .OrderByDescending(r => r.StartedAt)
+                .ToList();
+
+            // Paged rather than capped: the old 200-row ceiling silently hid the
+            // rest of the archive, which is worse than making the client ask for
+            // the next page. Total travels with the page so the UI can say where
+            // it is.
+            var take = limit is > 0 and <= MaxPageSize ? limit.Value : DefaultPageSize;
+            var skip = offset is > 0 ? offset.Value : 0;
+            return Results.Json(new
+            {
+                total = matching.Count,
+                offset = skip,
+                limit = take,
+                items = matching.Skip(skip).Take(take).Select(r => Describe(r, names)).ToList(),
+            });
+        });
+
+        app.MapGet("/api/v1/recordings/{id}/stream", async (
+            string id, bool? download, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var (recording, error) = await ResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            var path = recording!.FilePath;
+            if (!File.Exists(path))
+                return Results.Json(new { error = "file_missing" }, statusCode: StatusCodes.Status410Gone);
+
+            var stream = File.OpenRead(path);
+            return download == true
+                ? Results.File(stream, "video/mp4", Path.GetFileName(path), enableRangeProcessing: true)
+                : Results.File(stream, "video/mp4", enableRangeProcessing: true);
+        });
+
+        // Just the timestamps, for drawing a calendar.
+        //
+        // Aggregation happens in the browser, not here: which day a recording
+        // belongs to depends on the VIEWER's time zone, and a web client may sit
+        // in a different one than the server. Core's CalendarActivity does the
+        // same job for the desktop, where the two are the same machine — its own
+        // comment warns that mixing zones is the classic bug, so the boundary is
+        // drawn where the answer is unambiguous.
+        app.MapGet("/api/v1/recordings/calendar", async (
+            string? cameraId, string? from, string? to, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var repo = ctx.RequestServices.GetService<IRecordingRepository>();
+            if (repo is null)
+                return BackendUnavailable();
+
+            CameraId? filter = null;
+            if (!string.IsNullOrEmpty(cameraId))
+            {
+                if (!Guid.TryParse(cameraId, out var guid))
+                    return ValidationError("invalid camera id");
+                filter = new CameraId(guid);
+            }
+            if (!TryParseRange(from, to, out var since, out var until))
+                return ValidationError("from/to must be ISO-8601 timestamps");
+
+            var days = (await repo.ListAsync(filter, ct))
+                .Where(r => ctx.CanSeeCamera(r.CameraId.ToString()))
+                .Where(r => InRange(r.StartedAt, since, until))
+                .OrderBy(r => r.StartedAt)
+                .Take(CalendarPointCap)
+                .Select(r => new { startedAt = r.StartedAt, sizeBytes = r.SizeBytes })
+                .ToList();
+
+            return Results.Json(days);
+        });
+
+        // Start / stop, plus who is recording right now so the UI can show it
+        // without polling every camera.
+        app.MapGet("/api/v1/recordings/active", (HttpContext ctx) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var recorder = ctx.RequestServices.GetService<WebRecorder>();
+            if (recorder is null)
+                return BackendUnavailable();
+            return Results.Json(recorder.ActiveCameraIds.Where(ctx.CanSeeCamera).ToList());
+        });
+
+        app.MapPost("/api/v1/cameras/{id}/recording/start", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            // Recording writes to the host's disk until someone stops it, so it
+            // sits with the other install-changing operations rather than with
+            // plain viewing.
+            if (ctx.Deny(WebPermission.Manage) is { } denied)
+                return denied;
+            if (ctx.DenyCamera(id) is { } hidden)
+                return hidden;
+
+            var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+            var recorder = ctx.RequestServices.GetService<WebRecorder>();
+            if (dir is null || recorder is null)
+                return BackendUnavailable();
+            if (!Guid.TryParse(id, out var guid))
+                return ValidationError("invalid camera id");
+
+            var camera = await dir.GetAsync(new CameraId(guid), ct);
+            if (camera is null)
+                return NotFound();
+
+            var credentials = await dir.GetCredentialsAsync(camera.Id, ct);
+            var started = await recorder.StartAsync(camera, BuildRtspUrl(camera.RtspMainUri, credentials), ct);
+            if (started is null)
+                return Results.Json(new { error = "already_recording" }, statusCode: StatusCodes.Status409Conflict);
+
+            Audit(ctx, "recording.start", started.Id);
+            return Results.Json(new { id = started.Id.ToString(), startedAt = started.StartedAt });
+        });
+
+        app.MapPost("/api/v1/cameras/{id}/recording/stop", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.Manage) is { } denied)
+                return denied;
+            if (ctx.DenyCamera(id) is { } hidden)
+                return hidden;
+
+            var recorder = ctx.RequestServices.GetService<WebRecorder>();
+            if (recorder is null)
+                return BackendUnavailable();
+
+            var wasRecording = recorder.IsRecording(id);
+            var stopped = await recorder.StopAsync(id, ct);
+            if (stopped is null)
+            {
+                // Recording stopped either way; the distinction is whether the
+                // camera actually gave us anything to keep.
+                return wasRecording
+                    ? Results.Json(new { error = "nothing_recorded" }, statusCode: StatusCodes.Status502BadGateway)
+                    : Results.Json(new { error = "not_recording" }, statusCode: StatusCodes.Status409Conflict);
+            }
+
+            Audit(ctx, "recording.stop", stopped.Id);
+            return Results.Json(new { id = stopped.Id.ToString(), sizeBytes = stopped.SizeBytes });
+        });
+
+        // Cut a fragment out of a recording and hand it back as a file.
+        //
+        // Nothing is stored: the clip is what the person asked for, and keeping a
+        // copy on the server would grow the archive behind their back. Output is
+        // fragmented MP4 straight down the response, because a pipe can't be
+        // rewound to write a normal trailer.
+        app.MapGet("/api/v1/recordings/{id}/export", async (
+            string id, double? start, double? end, bool? precise, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.Export) is { } denied)
+                return denied;
+            var (recording, error) = await ResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+            if (!File.Exists(recording!.FilePath))
+                return Results.Json(new { error = "file_missing" }, statusCode: StatusCodes.Status410Gone);
+
+            var from = Math.Max(0, start ?? 0);
+            var to = end ?? 0;
+            if (to <= from)
+                return ValidationError("end must be greater than start");
+            var duration = Math.Min(to - from, MaxExportSeconds);
+
+            var logger = ctx.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("OpenIPC.Web.Export");
+            var name = Path.GetFileNameWithoutExtension(recording.FilePath)
+                + $"_{(int)from}-{(int)(from + duration)}.mp4";
+
+            var clip = await ClipAsync(recording.FilePath, from, duration, precise == true, logger, ct);
+            if (clip is null || clip.Length == 0)
+                return Results.Json(new { error = "export_failed" }, statusCode: StatusCodes.Status502BadGateway);
+
+            Audit(ctx, "recording.export", $"{recording.Id} {(int)from}+{(int)duration}s");
+            return Results.File(clip, "video/mp4", name);
+        });
+
+        app.MapDelete("/api/v1/recordings/{id}", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            // Deleting footage is destructive and irreversible — management only,
+            // never a plain archive viewer.
+            if (ctx.Deny(WebPermission.Manage) is { } denied)
+                return denied;
+            var (recording, error) = await ResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            var repo = ctx.RequestServices.GetRequiredService<IRecordingRepository>();
+            // Drop the row first: a file we failed to delete is a leftover, but a
+            // row pointing at a deleted file is a broken entry in every client.
+            await repo.RemoveAsync(recording!.Id, ct);
+            try
+            {
+                if (File.Exists(recording.FilePath)) File.Delete(recording.FilePath);
+            }
+            catch (IOException) { /* locked by an in-flight write — the row is gone either way */ }
+
+            Audit(ctx, "recording.delete", recording.Id);
+            return Results.NoContent();
+        });
+    }
+
+    private const int DefaultPageSize = 50;
+    private const int MaxPageSize = 200;
+    // An hour is plenty for "send me this bit"; without a ceiling a stray request
+    // could ask the server to re-encode an entire day.
+    private const double MaxExportSeconds = 3600;
+
+    // Same two ffmpeg shapes the desktop's clip exporter uses: a fast stream copy
+    // that can only start on a keyframe (so the cut lands at or before the asked
+    // point), or a re-encode when the person wants the exact frame.
+    private static async Task<byte[]?> ClipAsync(
+        string sourcePath, double start, double duration, bool precise, ILogger logger, CancellationToken ct)
+    {
+        var psi = new System.Diagnostics.ProcessStartInfo(LiveFfmpeg.ResolveExecutable())
+        {
+            RedirectStandardOutput = true,
+            RedirectStandardError = true,
+            UseShellExecute = false,
+            CreateNoWindow = true,
+        };
+        var startSec = start.ToString("0.###", CultureInfo.InvariantCulture);
+        var durSec = duration.ToString("0.###", CultureInfo.InvariantCulture);
+        void Arg(params string[] args) { foreach (var a in args) psi.ArgumentList.Add(a); }
+
+        Arg("-hide_banner");
+        if (precise)
+        {
+            // Seek after opening so the re-encode starts on the exact frame.
+            Arg("-i", sourcePath, "-ss", startSec, "-t", durSec,
+                "-c:v", "libopenh264", "-b:v", "2M", "-c:a", "copy");
+        }
+        else
+        {
+            Arg("-ss", startSec, "-i", sourcePath, "-t", durSec, "-c", "copy");
+        }
+        // empty_moov/frag_keyframe: the header can't be rewritten on a pipe.
+        Arg("-movflags", "+frag_keyframe+empty_moov+default_base_moof", "-f", "mp4", "pipe:1");
+
+        System.Diagnostics.Process? proc = null;
+        try
+        {
+            proc = System.Diagnostics.Process.Start(psi);
+            if (proc is null)
+                return null;
+            _ = LiveFfmpeg.DrainStderrAsync(proc, logger);
+            using var buffer = new MemoryStream();
+            await proc.StandardOutput.BaseStream.CopyToAsync(buffer, ct);
+            await proc.WaitForExitAsync(ct);
+            return buffer.ToArray();
+        }
+        catch (Exception ex)
+        {
+            logger.LogWarning(ex, "Clip export of {Path} failed", sourcePath);
+            return null;
+        }
+        finally
+        {
+            try { if (proc is { HasExited: false }) proc.Kill(entireProcessTree: true); } catch { /* gone */ }
+            proc?.Dispose();
+        }
+    }
+
+    // A month of a busy install is still small; the cap only stops a pathological
+    // range from serialising the entire archive.
+    private const int CalendarPointCap = 5000;
+
+    private static bool TryParseRange(string? from, string? to, out DateTime? since, out DateTime? until)
+    {
+        since = until = null;
+        if (!string.IsNullOrEmpty(from))
+        {
+            if (!DateTime.TryParse(from, CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal | DateTimeStyles.AssumeUniversal, out var parsed))
+                return false;
+            since = parsed;
+        }
+        if (!string.IsNullOrEmpty(to))
+        {
+            if (!DateTime.TryParse(to, CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal | DateTimeStyles.AssumeUniversal, out var parsed))
+                return false;
+            until = parsed;
+        }
+        return true;
+    }
+
+    // Inclusive lower bound, exclusive upper — so a caller can ask for one day
+    // with [midnight, next midnight) and not double-count the boundary.
+    private static bool InRange(DateTime startedAtUtc, DateTime? since, DateTime? until) =>
+        (since is null || startedAtUtc >= since) && (until is null || startedAtUtc < until);
+
+    // Credentials live in the secrets store, not in the stored URI.
+    private static string BuildRtspUrl(Uri baseUri, CameraCredentials? credentials)
+    {
+        if (credentials is null || string.IsNullOrEmpty(credentials.Username))
+            return baseUri.ToString();
+        return new UriBuilder(baseUri)
+        {
+            UserName = credentials.Username,
+            Password = credentials.Password,
+        }.Uri.ToString();
+    }
+
+    private static async Task<(Recording? Recording, IResult? Error)> ResolveAsync(
+        HttpContext ctx, string id, CancellationToken ct)
+    {
+        var repo = ctx.RequestServices.GetService<IRecordingRepository>();
+        if (repo is null)
+            return (null, BackendUnavailable());
+        if (!Guid.TryParse(id, out var guid))
+            return (null, ValidationError("invalid recording id"));
+
+        // The repository has no get-by-id, so find it in the indexed set. Fine at
+        // self-host scale, and it keeps the Core contract untouched.
+        var all = await repo.ListAsync(null, ct);
+        var recording = all.FirstOrDefault(r => r.Id.Value == guid);
+        if (recording is null || !ctx.CanSeeCamera(recording.CameraId.ToString()))
+            return (null, NotFound());
+
+        return (recording, null);
+    }
+
+    private static async Task<Dictionary<string, string>> LoadCameraNamesAsync(HttpContext ctx, CancellationToken ct)
+    {
+        var names = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
+        var cameras = ctx.RequestServices.GetService<ICameraRepository>();
+        if (cameras is not null)
+        {
+            foreach (var camera in await cameras.GetAllAsync(ct))
+                names[camera.Id.ToString()] = camera.Name;
+        }
+        return names;
+    }
+
+    private static object Describe(Recording r, IReadOnlyDictionary<string, string> cameraNames)
+    {
+        var cameraId = r.CameraId.ToString();
+        return new
+        {
+            id = r.Id.ToString(),
+            cameraId,
+            cameraName = cameraNames.TryGetValue(cameraId, out var name) ? name : null,
+            fileName = Path.GetFileName(r.FilePath),
+            startedAt = r.StartedAt,
+            endedAt = r.EndedAt,
+            durationSeconds = r.EndedAt is { } end ? (int)(end - r.StartedAt).TotalSeconds : (int?)null,
+            sizeBytes = r.SizeBytes,
+            codec = r.Codec,
+            hasMotion = r.HasMotion,
+            // H.265 in an MP4 plays in Safari and nowhere else worth relying on;
+            // tell the client rather than letting the <video> fail silently.
+            playable = !(r.Codec?.Contains("hevc", StringComparison.OrdinalIgnoreCase) == true
+                || r.Codec?.Contains("265", StringComparison.Ordinal) == true),
+        };
+    }
+}
diff --git a/src/OpenIPC.Viewer.Web/Api/SnapshotApi.cs b/src/OpenIPC.Viewer.Web/Api/SnapshotApi.cs
new file mode 100644
index 0000000..17e708c
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/SnapshotApi.cs
@@ -0,0 +1,173 @@
+using System;
+using System.Diagnostics;
+using System.IO;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Majestic;
+using OpenIPC.Viewer.Core.Services;
+using OpenIPC.Viewer.Core.Snapshots;
+using OpenIPC.Viewer.Web.Auth;
+using static OpenIPC.Viewer.Web.Api.ApiHelpers;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// A still from a camera, on demand.
+//
+// Two sources, in the desktop's order of preference: Majestic's own
+// /image.jpg (the camera encodes it, so it costs us nothing and comes at
+// sensor resolution), falling back to one short ffmpeg pull off the RTSP
+// stream for cameras that aren't Majestic or have the HTTP server off.
+//
+// Nothing is stored: this hands the browser the bytes, which is what "take a
+// snapshot" means from a web client. The shared snapshot library the desktop
+// keeps (indexed, thumbnailed, browsable) is a separate slice — it needs the
+// image/thumbnail stack the server head doesn't compose yet.
+public static class SnapshotApi
+{
+    private static readonly TimeSpan MajesticTimeout = TimeSpan.FromSeconds(6);
+    private static readonly TimeSpan FfmpegTimeout = TimeSpan.FromSeconds(15);
+
+    public static void MapSnapshotEndpoints(this WebApplication app)
+    {
+        app.MapGet("/api/v1/cameras/{id}/snapshot", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            // Seeing a still is seeing the camera — same permission as live.
+            if (ctx.Deny(WebPermission.ViewLive) is { } denied)
+                return denied;
+            if (ctx.DenyCamera(id) is { } hidden)
+                return hidden;
+
+            var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+            if (dir is null)
+                return BackendUnavailable();
+            if (!Guid.TryParse(id, out var guid))
+                return ValidationError("invalid camera id");
+
+            var camera = await dir.GetAsync(new CameraId(guid), ct);
+            if (camera is null)
+                return NotFound();
+
+            var credentials = await dir.GetCredentialsAsync(camera.Id, ct);
+            var logger = ctx.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("OpenIPC.Web.Snapshot");
+
+            var (jpeg, _) = await CaptureAsync(ctx, camera, credentials, logger, ct);
+
+            if (jpeg is null || jpeg.Length == 0)
+                return Results.Json(new { error = "snapshot_failed" }, statusCode: StatusCodes.Status502BadGateway);
+
+            // No caching: a still is a point in time, and the next request means
+            // the viewer wants a fresh one.
+            ctx.Response.Headers.CacheControl = "no-store";
+            return Results.File(jpeg, "image/jpeg");
+        });
+    }
+
+    // One capture path for both callers — the transient still above and the
+    // kept one in SnapshotLibraryApi — so the library never ends up with a
+    // different (worse) picture than the preview the viewer just approved. The
+    // source travels with the bytes because the row records it: an HD-always
+    // snapshot must never claim it came off the substream.
+    internal static async Task<(byte[]? Jpeg, SnapshotSource Source)> CaptureAsync(
+        HttpContext ctx, Camera camera, CameraCredentials? credentials, ILogger logger, CancellationToken ct)
+    {
+        var majestic = await TryMajesticAsync(ctx, camera, credentials, logger, ct);
+        if (majestic is { Length: > 0 })
+            return (majestic, SnapshotSource.HttpSnapshot);
+
+        // ffmpeg pulls one keyframe off the mainstream — the same thing the
+        // desktop calls OpenedStream.
+        return (await TryFfmpegAsync(camera, credentials, logger, ct), SnapshotSource.OpenedStream);
+    }
+
+    private static async Task<byte[]?> TryMajesticAsync(
+        HttpContext ctx, Camera camera, CameraCredentials? credentials, ILogger logger, CancellationToken ct)
+    {
+        var majestic = ctx.RequestServices.GetService<IMajesticClient>();
+        if (majestic is null || !camera.IsMajestic)
+            return null;
+
+        try
+        {
+            using var timeout = CancellationTokenSource.CreateLinkedTokenSource(ct);
+            timeout.CancelAfter(MajesticTimeout);
+            var endpoint = new MajesticEndpoint(camera.Host, camera.HttpPort, credentials);
+            return await majestic.SnapshotJpegAsync(endpoint, new MajesticSnapshotOptions(), timeout.Token);
+        }
+        catch (Exception ex)
+        {
+            logger.LogInformation(ex, "Majestic snapshot of {Host} failed — falling back to ffmpeg", camera.Host);
+            return null;
+        }
+    }
+
+    // One frame off the mainstream. Writes to stdout so nothing lands on disk,
+    // and dies with the request if the camera stops answering mid-pull.
+    private static async Task<byte[]?> TryFfmpegAsync(
+        Camera camera, CameraCredentials? credentials, ILogger logger, CancellationToken ct)
+    {
+        var url = BuildRtspUrl(camera.RtspMainUri, credentials);
+        var psi = new ProcessStartInfo(LiveFfmpeg.ResolveExecutable())
+        {
+            RedirectStandardOutput = true,
+            RedirectStandardError = true,
+            UseShellExecute = false,
+            CreateNoWindow = true,
+        };
+        foreach (var arg in new[]
+                 {
+                     "-rtsp_transport", "tcp", "-i", url,
+                     "-frames:v", "1", "-q:v", "3",
+                     "-f", "image2pipe", "-vcodec", "mjpeg", "pipe:1",
+                 })
+        {
+            psi.ArgumentList.Add(arg);
+        }
+
+        Process? proc = null;
+        try
+        {
+            using var timeout = CancellationTokenSource.CreateLinkedTokenSource(ct);
+            timeout.CancelAfter(FfmpegTimeout);
+            proc = Process.Start(psi);
+            if (proc is null)
+                return null;
+
+            _ = LiveFfmpeg.DrainStderrAsync(proc, logger);
+            using var buffer = new MemoryStream();
+            await proc.StandardOutput.BaseStream.CopyToAsync(buffer, timeout.Token);
+            await proc.WaitForExitAsync(timeout.Token);
+            return buffer.Length > 0 ? buffer.ToArray() : null;
+        }
+        catch (Exception ex)
+        {
+            logger.LogWarning(ex, "ffmpeg snapshot of {Host} failed", camera.Host);
+            return null;
+        }
+        finally
+        {
+            try
+            {
+                if (proc is { HasExited: false }) proc.Kill(entireProcessTree: true);
+            }
+            catch { /* already gone */ }
+            proc?.Dispose();
+        }
+    }
+
+    // Credentials live in the secrets store, not in the stored URI.
+    private static string BuildRtspUrl(Uri baseUri, CameraCredentials? credentials)
+    {
+        if (credentials is null || string.IsNullOrEmpty(credentials.Username))
+            return baseUri.ToString();
+        return new UriBuilder(baseUri)
+        {
+            UserName = credentials.Username,
+            Password = credentials.Password,
+        }.Uri.ToString();
+    }
+}
diff --git a/src/OpenIPC.Viewer.Web/Api/SnapshotLibraryApi.cs b/src/OpenIPC.Viewer.Web/Api/SnapshotLibraryApi.cs
new file mode 100644
index 0000000..15ea01a
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/SnapshotLibraryApi.cs
@@ -0,0 +1,365 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Globalization;
+using System.IO;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Platform;
+using OpenIPC.Viewer.Core.Services;
+using OpenIPC.Viewer.Core.Snapshots;
+using OpenIPC.Viewer.Web.Auth;
+using static OpenIPC.Viewer.Web.Api.ApiHelpers;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// The kept snapshots: a still saved into the shared library instead of just
+// handed to the browser (SnapshotApi does that).
+//
+// Storage is deliberately identical to the desktop's SnapshotService —
+// <snapshots>/<cameraId>/yyyy-MM-dd_HH-mm-ss.jpg, thumbnail in .thumbs/<id>.jpg,
+// one row in the same table — so a still taken from a phone shows up in the
+// desktop browser and vice versa. We can't call SnapshotService itself: it
+// depends on LiveStreamCoordinator and the Skia thumbnailer, both in the Video
+// layer the server head doesn't compose (no FFmpeg natives). Same split as
+// WebRecorder, and the same rule: match the layout exactly or the two heads
+// quietly build separate archives.
+//
+// The thumbnail is made with ffmpeg, which this head already shells out to for
+// snapshots and recording — one existing dependency instead of a new imaging
+// one, and it writes where the desktop gallery already looks.
+public static class SnapshotLibraryApi
+{
+    private const int DefaultPageSize = 60;
+    private const int MaxPageSize = 200;
+    private const int ThumbMaxDim = 320;
+    private static readonly TimeSpan ThumbTimeout = TimeSpan.FromSeconds(10);
+
+    public static void MapSnapshotLibraryEndpoints(this WebApplication app)
+    {
+        // Take a still and keep it. ViewArchive rather than Manage: this adds to
+        // the archive the caller can already read, and the picture is one they
+        // are already allowed to watch live. Deleting still needs Manage, like
+        // recordings.
+        app.MapPost("/api/v1/cameras/{id}/snapshots", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            if (ctx.DenyCamera(id) is { } hidden)
+                return hidden;
+
+            var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+            var repo = ctx.RequestServices.GetService<ISnapshotRepository>();
+            var fs = ctx.RequestServices.GetService<IFileSystem>();
+            if (dir is null || repo is null || fs is null)
+                return BackendUnavailable();
+            if (!Guid.TryParse(id, out var guid))
+                return ValidationError("invalid camera id");
+
+            var camera = await dir.GetAsync(new CameraId(guid), ct);
+            if (camera is null)
+                return NotFound();
+
+            var credentials = await dir.GetCredentialsAsync(camera.Id, ct);
+            var logger = Log(ctx);
+            var (jpeg, source) = await SnapshotApi.CaptureAsync(ctx, camera, credentials, logger, ct);
+            if (jpeg is null || jpeg.Length == 0)
+                return Results.Json(new { error = "snapshot_failed" }, statusCode: StatusCodes.Status502BadGateway);
+
+            var snapshotId = SnapshotId.New();
+            var takenAt = DateTime.UtcNow;
+            var folder = Path.Combine(fs.SnapshotsDir.FullName, camera.Id.ToString());
+            Directory.CreateDirectory(folder);
+            var name = takenAt.ToLocalTime().ToString("yyyy-MM-dd_HH-mm-ss", CultureInfo.InvariantCulture) + ".jpg";
+            var path = EnsureUnique(Path.Combine(folder, name));
+            await File.WriteAllBytesAsync(path, jpeg, ct);
+
+            var thumbPath = await TryWriteThumbAsync(fs, snapshotId, path, logger, ct);
+            var (width, height) = JpegSize(jpeg);
+
+            var snapshot = new Snapshot(
+                snapshotId, camera.Id, takenAt, path, thumbPath, width, height, source, SnapshotKind.Manual);
+            await repo.AddAsync(snapshot, ct);
+            Audit(ctx, "snapshot.save", $"{id}/{snapshotId}");
+
+            return Results.Json(Describe(snapshot, camera.Name));
+        });
+
+        app.MapGet("/api/v1/snapshots", async (
+            string? cameraId, string? from, string? to, int? offset, int? limit,
+            HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var repo = ctx.RequestServices.GetService<ISnapshotRepository>();
+            if (repo is null)
+                return BackendUnavailable();
+
+            CameraId? filter = null;
+            if (!string.IsNullOrEmpty(cameraId))
+            {
+                if (!Guid.TryParse(cameraId, out var guid))
+                    return ValidationError("invalid camera id");
+                filter = new CameraId(guid);
+            }
+            if (!TryParseRange(from, to, out var since, out var until))
+                return ValidationError("from/to must be ISO-8601 timestamps");
+
+            var names = await LoadCameraNamesAsync(ctx, ct);
+            // The repository's own limit is a fetch cap, not the page: filtering
+            // by the caller's camera subset happens here, so ask for enough rows
+            // to page through and slice afterwards.
+            var all = (await repo.ListAsync(filter, since, until, MaxFetch, ct))
+                .Where(s => ctx.CanSeeCamera(s.CameraId.ToString()))
+                .ToList();
+
+            var take = limit is > 0 and <= MaxPageSize ? limit.Value : DefaultPageSize;
+            var skip = offset is > 0 ? offset.Value : 0;
+            return Results.Json(new
+            {
+                total = all.Count,
+                offset = skip,
+                limit = take,
+                items = all.Skip(skip).Take(take)
+                    .Select(s => Describe(s, names.TryGetValue(s.CameraId, out var n) ? n : null))
+                    .ToList(),
+            });
+        });
+
+        // The image itself. Only paths that came out of the index are served —
+        // the id is looked up and the path read off the row, so no request can
+        // point at an arbitrary file.
+        app.MapGet("/api/v1/snapshots/{id}/image", async (
+            string id, bool? thumb, bool? download, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.ViewArchive) is { } denied)
+                return denied;
+            var (snapshot, error) = await ResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            // Fall back to the full image when a thumbnail was never made (an
+            // older row, or ffmpeg wasn't there) — a gallery with holes in it is
+            // worse than a gallery that decodes a few big files.
+            var path = thumb == true && !string.IsNullOrEmpty(snapshot!.ThumbPath) && File.Exists(snapshot.ThumbPath)
+                ? snapshot.ThumbPath!
+                : snapshot!.Path;
+            if (!File.Exists(path))
+                return Results.Json(new { error = "file_missing" }, statusCode: StatusCodes.Status410Gone);
+
+            var stream = File.OpenRead(path);
+            return download == true
+                ? Results.File(stream, "image/jpeg", Path.GetFileName(snapshot.Path))
+                : Results.File(stream, "image/jpeg");
+        });
+
+        app.MapDelete("/api/v1/snapshots/{id}", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (ctx.Deny(WebPermission.Manage) is { } denied)
+                return denied;
+            var (snapshot, error) = await ResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            var repo = ctx.RequestServices.GetRequiredService<ISnapshotRepository>();
+            // Row first: a file that outlives its row is invisible clutter, a row
+            // that outlives its file is a broken thumbnail in everyone's gallery.
+            await repo.RemoveAsync(snapshot!.Id, ct);
+            TryDelete(snapshot.Path, ctx);
+            if (!string.IsNullOrEmpty(snapshot.ThumbPath))
+                TryDelete(snapshot.ThumbPath!, ctx);
+            Audit(ctx, "snapshot.delete", id);
+            return Results.NoContent();
+        });
+    }
+
+    // How many rows to pull before the caller's camera subset is applied. Well
+    // past a usable page count, and the response says `total` either way.
+    private const int MaxFetch = 5000;
+
+    private static async Task<(Snapshot? Snapshot, IResult? Error)> ResolveAsync(
+        HttpContext ctx, string id, CancellationToken ct)
+    {
+        var repo = ctx.RequestServices.GetService<ISnapshotRepository>();
+        if (repo is null)
+            return (null, BackendUnavailable());
+        if (!Guid.TryParse(id, out var guid))
+            return (null, ValidationError("invalid snapshot id"));
+
+        var snapshot = await repo.GetAsync(new SnapshotId(guid), ct);
+        if (snapshot is null)
+            return (null, NotFound());
+        // A snapshot of a camera outside the caller's subset doesn't exist for
+        // them — same rule as the live and recorded surfaces.
+        if (!ctx.CanSeeCamera(snapshot.CameraId.ToString()))
+            return (null, NotFound());
+        return (snapshot, null);
+    }
+
+    private static object Describe(Snapshot s, string? cameraName) => new
+    {
+        id = s.Id.ToString(),
+        cameraId = s.CameraId.ToString(),
+        cameraName,
+        takenAt = s.TakenAt,
+        width = s.Width,
+        height = s.Height,
+        hasThumb = !string.IsNullOrEmpty(s.ThumbPath),
+        source = s.Source.ToString(),
+    };
+
+    // Downscale with ffmpeg into the same .thumbs/<id>.jpg the desktop gallery
+    // reads. Failure is not fatal: the row simply carries no thumbnail, exactly
+    // as SnapshotService treats a thumbnailer that throws.
+    private static async Task<string?> TryWriteThumbAsync(
+        IFileSystem fs, SnapshotId id, string sourcePath, ILogger logger, CancellationToken ct)
+    {
+        var thumbDir = Path.Combine(fs.SnapshotsDir.FullName, ".thumbs");
+        var thumbPath = Path.Combine(thumbDir, id + ".jpg");
+        Process? proc = null;
+        try
+        {
+            Directory.CreateDirectory(thumbDir);
+            var psi = new ProcessStartInfo(LiveFfmpeg.ResolveExecutable())
+            {
+                RedirectStandardError = true,
+                UseShellExecute = false,
+                CreateNoWindow = true,
+            };
+            foreach (var arg in new[]
+                     {
+                         "-y", "-i", sourcePath,
+                         // Long edge to ThumbMaxDim, short edge computed and kept
+                         // even (mjpeg wants even dimensions).
+                         "-vf", $"scale=w={ThumbMaxDim}:h={ThumbMaxDim}:force_original_aspect_ratio=decrease",
+                         "-q:v", "5", thumbPath,
+                     })
+            {
+                psi.ArgumentList.Add(arg);
+            }
+
+            using var timeout = CancellationTokenSource.CreateLinkedTokenSource(ct);
+            timeout.CancelAfter(ThumbTimeout);
+            proc = Process.Start(psi);
+            if (proc is null)
+                return null;
+            _ = LiveFfmpeg.DrainStderrAsync(proc, logger);
+            await proc.WaitForExitAsync(timeout.Token);
+            return proc.ExitCode == 0 && File.Exists(thumbPath) ? thumbPath : null;
+        }
+        catch (Exception ex)
+        {
+            logger.LogInformation(ex, "Snapshot thumbnail failed for {Path}", sourcePath);
+            return null;
+        }
+        finally
+        {
+            try
+            {
+                if (proc is { HasExited: false }) proc.Kill(entireProcessTree: true);
+            }
+            catch { /* already gone */ }
+            proc?.Dispose();
+        }
+    }
+
+    // Pixel dimensions straight out of the JPEG's frame header. The desktop
+    // stores these to prove a capture really was full-resolution, and reading
+    // the two bytes is cheaper than decoding the image — which this head has no
+    // library to do anyway.
+    internal static (int Width, int Height) JpegSize(byte[] jpeg)
+    {
+        // SOI, then marker segments: 0xFF <marker> <len:2> <payload>. The SOFn
+        // markers carry the size; everything else is skipped by its length.
+        var i = 2;
+        while (i + 9 < jpeg.Length)
+        {
+            if (jpeg[i] != 0xFF)
+            {
+                i++;
+                continue;
+            }
+            var marker = jpeg[i + 1];
+            // Standalone markers (no length field).
+            if (marker == 0xD8 || marker == 0x01 || (marker >= 0xD0 && marker <= 0xD7))
+            {
+                i += 2;
+                continue;
+            }
+            var length = (jpeg[i + 2] << 8) | jpeg[i + 3];
+            // SOF0..SOF15, minus the DHT/JPG/DAC markers interleaved in that range.
+            if (marker >= 0xC0 && marker <= 0xCF && marker != 0xC4 && marker != 0xC8 && marker != 0xCC)
+            {
+                var height = (jpeg[i + 5] << 8) | jpeg[i + 6];
+                var width = (jpeg[i + 7] << 8) | jpeg[i + 8];
+                return (width, height);
+            }
+            if (length <= 0)
+                break;
+            i += 2 + length;
+        }
+        return (0, 0);
+    }
+
+    private static string EnsureUnique(string path)
+    {
+        if (!File.Exists(path)) return path;
+        var dir = Path.GetDirectoryName(path)!;
+        var stem = Path.GetFileNameWithoutExtension(path);
+        var ext = Path.GetExtension(path);
+        for (var i = 1; ; i++)
+        {
+            var candidate = Path.Combine(dir, $"{stem}_{i}{ext}");
+            if (!File.Exists(candidate)) return candidate;
+        }
+    }
+
+    private static void TryDelete(string path, HttpContext ctx)
+    {
+        try
+        {
+            if (File.Exists(path)) File.Delete(path);
+        }
+        catch (Exception ex)
+        {
+            Log(ctx).LogWarning(ex, "Deleting snapshot file {Path} failed", path);
+        }
+    }
+
+    private static async Task<Dictionary<CameraId, string>> LoadCameraNamesAsync(HttpContext ctx, CancellationToken ct)
+    {
+        var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+        if (dir is null)
+            return new Dictionary<CameraId, string>();
+        var cameras = await dir.ListAsync(ct);
+        return cameras.ToDictionary(c => c.Id, c => c.Name);
+    }
+
+    private static bool TryParseRange(string? from, string? to, out DateTime? since, out DateTime? until)
+    {
+        since = null;
+        until = null;
+        if (!string.IsNullOrEmpty(from))
+        {
+            if (!DateTime.TryParse(from, CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal | DateTimeStyles.AssumeUniversal, out var s))
+                return false;
+            since = s;
+        }
+        if (!string.IsNullOrEmpty(to))
+        {
+            if (!DateTime.TryParse(to, CultureInfo.InvariantCulture, DateTimeStyles.AdjustToUniversal | DateTimeStyles.AssumeUniversal, out var u))
+                return false;
+            until = u;
+        }
+        return true;
+    }
+
+    private static ILogger Log(HttpContext ctx) =>
+        ctx.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("OpenIPC.Web.Snapshot");
+}
diff --git a/src/OpenIPC.Viewer.Web/Api/TalkApi.cs b/src/OpenIPC.Viewer.Web/Api/TalkApi.cs
new file mode 100644
index 0000000..08ca14d
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/TalkApi.cs
@@ -0,0 +1,209 @@
+using System;
+using System.Collections.Concurrent;
+using System.Net.WebSockets;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Audio;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Services;
+using OpenIPC.Viewer.Core.Video;
+using OpenIPC.Viewer.Web.Auth;
+using static OpenIPC.Viewer.Web.Api.ApiHelpers;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// Push-to-talk from the browser: the mic is on the viewer's machine, the RTSP
+// backchannel is ours, and this is the bridge between them.
+//
+// The browser sends 16-bit mono PCM at the negotiated rate over a WebSocket, one
+// binary message per 20 ms chunk; we companded it to G.711, wrap it in RTP and
+// push it into the session. Encoding stays here rather than in JavaScript so the
+// wire format is decided in exactly one place — Core's G711/RtpPacketizer, the
+// same code the desktop talks with.
+//
+// PushToTalkController is deliberately NOT used: it owns an IAudioInput, i.e. a
+// microphone on the machine running it. Here the microphone is three network
+// hops away. Same reason PtzApi skips PtzController.
+//
+// One talker per camera. A speaker is a physical, exclusive thing — two people
+// talking at once would interleave RTP into one stream and come out as noise —
+// so a second attempt is refused rather than mixed.
+public static class TalkApi
+{
+    // 8 kHz G.711: 20 ms = 160 samples = 320 bytes of PCM16. Anything much
+    // larger than a couple of frames is either a confused client or an attempt
+    // to make us allocate; the session is dropped rather than trusted.
+    private const int MaxChunkBytes = 4096;
+    private static readonly TimeSpan ProbeTimeout = TimeSpan.FromSeconds(6);
+    private static readonly ConcurrentDictionary<string, byte> Talking = new(StringComparer.OrdinalIgnoreCase);
+
+    public static void MapTalkEndpoints(this WebApplication app)
+    {
+        // Does this camera even have a speaker? OPTIONS + DESCRIBE only, so the
+        // UI can hide the button instead of offering something that will fail.
+        app.MapGet("/api/v1/cameras/{id}/talk", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            try
+            {
+                using var timeout = CancellationTokenSource.CreateLinkedTokenSource(ct);
+                timeout.CancelAfter(ProbeTimeout);
+                var supported = await target!.Value.Client.ProbeAsync(target.Value.Endpoint, timeout.Token);
+                return Results.Json(new { supported, busy = Talking.ContainsKey(id) });
+            }
+            catch (Exception ex)
+            {
+                // A camera that won't answer the probe isn't a "no" — say so and
+                // let the viewer try, exactly as the desktop treats it.
+                Log(ctx).LogInformation(ex, "Backchannel probe of {Camera} failed", id);
+                return Results.Json(new { supported = (bool?)null, busy = Talking.ContainsKey(id) });
+            }
+        });
+
+        app.Map("/api/v1/cameras/{id}/talk/stream", async (string id, HttpContext ctx, CancellationToken ct) =>
+        {
+            if (!ctx.WebSockets.IsWebSocketRequest)
+                return ValidationError("expected a websocket request");
+
+            var (target, error) = await TryResolveAsync(ctx, id, ct);
+            if (error is not null)
+                return error;
+
+            if (!Talking.TryAdd(id, 0))
+                return Results.Json(new { error = "talk_busy" }, statusCode: StatusCodes.Status409Conflict);
+
+            var logger = Log(ctx);
+            try
+            {
+                IAudioBackchannelSession? session;
+                try
+                {
+                    session = await target!.Value.Client.OpenAsync(target.Value.Endpoint, ct);
+                }
+                catch (Exception ex)
+                {
+                    logger.LogWarning(ex, "Opening backchannel to {Camera} failed", id);
+                    return Results.Json(new { error = "talk_failed" }, statusCode: StatusCodes.Status502BadGateway);
+                }
+
+                // No backchannel track advertised — the common "this camera has
+                // no speaker" case, which is a 409, not a failure.
+                if (session is null)
+                    return Results.Json(new { error = "talk_unsupported" }, statusCode: StatusCodes.Status409Conflict);
+
+                await using (session)
+                {
+                    var socket = await ctx.WebSockets.AcceptWebSocketAsync();
+                    Audit(ctx, "talk.start", id);
+                    await PumpAsync(socket, session, logger, ct);
+                }
+                return Results.Empty;
+            }
+            finally
+            {
+                Talking.TryRemove(id, out _);
+            }
+        });
+    }
+
+    // Read PCM chunks until the viewer stops talking (closes the socket) and
+    // push each one to the camera. Nothing is buffered: a chunk that arrives
+    // late is still played late, and holding it back would only add delay to a
+    // conversation.
+    private static async Task PumpAsync(
+        WebSocket socket, IAudioBackchannelSession session, ILogger logger, CancellationToken ct)
+    {
+        var rtp = new RtpPacketizer(
+            session.ALaw ? RtpPacketizer.PayloadTypePcma : RtpPacketizer.PayloadTypePcmu,
+            ssrc: (uint)Random.Shared.Next());
+
+        // Tell the client what was negotiated, so it can resample to the right
+        // rate instead of guessing 8000 and being wrong on a 16 kHz camera.
+        var hello = System.Text.Encoding.UTF8.GetBytes(
+            $"{{\"sampleRate\":{session.SampleRate},\"codec\":\"{(session.ALaw ? "pcma" : "pcmu")}\"}}");
+        await socket.SendAsync(hello, WebSocketMessageType.Text, endOfMessage: true, ct);
+
+        var buffer = new byte[MaxChunkBytes];
+        while (!ct.IsCancellationRequested)
+        {
+            WebSocketReceiveResult result;
+            try
+            {
+                result = await socket.ReceiveAsync(buffer, ct);
+            }
+            catch (Exception ex)
+            {
+                logger.LogInformation(ex, "Talk socket closed mid-stream");
+                return;
+            }
+
+            if (result.MessageType == WebSocketMessageType.Close)
+                return;
+            if (result.MessageType != WebSocketMessageType.Binary || result.Count == 0)
+                continue;
+            // A chunk split across frames would desynchronise the 16-bit samples;
+            // drop the session rather than emit noise into someone's room.
+            if (!result.EndOfMessage)
+            {
+                logger.LogWarning("Talk chunk exceeded {Max} bytes — dropping the session", MaxChunkBytes);
+                return;
+            }
+
+            // Odd byte counts can't be whole PCM16 samples.
+            var count = result.Count - (result.Count % 2);
+            if (count == 0)
+                continue;
+
+            try
+            {
+                var g711 = G711.Encode(buffer.AsSpan(0, count), session.ALaw);
+                var packet = rtp.Packetize(g711, samplesInPayload: g711.Length);
+                await session.SendRtpAsync(packet, ct);
+            }
+            catch (Exception ex)
+            {
+                logger.LogWarning(ex, "Sending talk audio failed — ending the session");
+                return;
+            }
+        }
+    }
+
+    private readonly record struct TalkTarget(IAudioBackchannelClient Client, BackchannelEndpoint Endpoint);
+
+    private static async Task<(TalkTarget? Target, IResult? Error)> TryResolveAsync(
+        HttpContext ctx, string id, CancellationToken ct)
+    {
+        if (ctx.Deny(WebPermission.Talk) is { } forbidden)
+            return (null, forbidden);
+        if (ctx.DenyCamera(id) is { } hidden)
+            return (null, hidden);
+
+        var dir = ctx.RequestServices.GetService<CameraDirectoryService>();
+        var client = ctx.RequestServices.GetService<IAudioBackchannelClient>();
+        if (dir is null || client is null)
+            return (null, BackendUnavailable());
+        if (!Guid.TryParse(id, out var guid))
+            return (null, ValidationError("invalid camera id"));
+
+        var camera = await dir.GetAsync(new CameraId(guid), ct);
+        if (camera is null)
+            return (null, NotFound());
+        // Mirrors SingleCameraPageViewModel.CanTalk: a probed camera that says it
+        // has no audio output is a definite no; anything else is worth trying.
+        if (camera.OnvifEnabled && !camera.HasAudioOut)
+            return (null, Results.Json(new { error = "talk_unsupported" }, statusCode: StatusCodes.Status409Conflict));
+
+        var credentials = await dir.GetCredentialsAsync(camera.Id, ct);
+        return (new TalkTarget(client, new BackchannelEndpoint(camera.RtspMainUri, credentials)), null);
+    }
+
+    private static ILogger Log(HttpContext ctx) =>
+        ctx.RequestServices.GetRequiredService<ILoggerFactory>().CreateLogger("OpenIPC.Web.Talk");
+}
diff --git a/src/OpenIPC.Viewer.Web/Api/WebRecorder.cs b/src/OpenIPC.Viewer.Web/Api/WebRecorder.cs
new file mode 100644
index 0000000..78febfb
--- /dev/null
+++ b/src/OpenIPC.Viewer.Web/Api/WebRecorder.cs
@@ -0,0 +1,248 @@
+using System;
+using System.Collections.Concurrent;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Globalization;
+using System.IO;
+using System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Logging;
+using OpenIPC.Viewer.Core.Entities;
+using OpenIPC.Viewer.Core.Platform;
+using OpenIPC.Viewer.Core.Recording;
+
+namespace OpenIPC.Viewer.Web.Api;
+
+// Recording started from the browser.
+//
+// The desktop head records through the Video project's libavformat session; the
+// server head doesn't reference Video (no FFmpeg.AutoGen natives to ship), so it
+// records the way it does everything else with video: one ffmpeg process writing
+// the camera's own H.264 straight to disk. Same folder, same database table, so
+// a clip recorded from the browser shows up in the desktop's Recordings page and
+// vice versa.
+//
+// Stopping sends "q" on stdin rather than killing the process: an MP4 needs its
+// trailer written, and a killed ffmpeg leaves a file no player will open.
+//
+// Long recordings are cut into segments (like the desktop's 10-minute chunks):
+// a night-long single file is painful to download, to seek, and to lose — one
+// corrupt tail would take the whole night with it. ffmpeg's segment muxer closes
+// each part properly on its own, so every finished segment is playable even if
+// the server dies mid-recording.
+public sealed class WebRecorder : IAsyncDisposable
+{
+    private static readonly TimeSpan StopGrace = TimeSpan.FromSeconds(5);
+
+    // Matches the desktop's RecordingOptions.SegmentDuration. Overridable so an
+    // operator can trade file count against file size (and so this is testable
+    // without waiting ten minutes).
+    private static readonly TimeSpan SegmentDuration = ResolveSegmentDuration();
+
+    private static TimeSpan ResolveSegmentDuration()
+    {
+        var raw = Environment.GetEnvironmentVariable("OPENIPC_WEB_SEGMENT_SECONDS");
+        return int.TryParse(raw, out var seconds) && seconds is > 0 and <= 3600
+            ? TimeSpan.FromSeconds(seconds)
+            : TimeSpan.FromMinutes(10);
+    }
+
+    private readonly IRecordingRepository _repo;
+    private readonly IFileSystem _fs;
+    private readonly ILogger<WebRecorder> _logger;
+    private readonly ConcurrentDictionary<string, ActiveRecording> _active = new(StringComparer.OrdinalIgnoreCase);
+
+    public WebRecorder(IRecordingRepository repo, IFileSystem fs, ILogger<WebRecorder> logger)
+    {
+        _repo = repo;
+        _fs = fs;
+        _logger = logger;
+    }
+
+    public bool IsRecording(string cameraId) => _active.ContainsKey(cameraId);
+
+    public IReadOnlyList<string> ActiveCameraIds => _active.Keys.ToList();
+
+    public async Task<Recording?> StartAsync(Camera camera, string rtspUrl, CancellationToken ct)
+    {
+        var cameraId = camera.Id.ToString();
+        if (_active.ContainsKey(cameraId))
+            return null;
+
+        // Same layout as the desktop head — <recordings>/<camera-slug>/<date>/ —
+        // so both write into one archive a person can still navigate by hand.
+        var dir = Path.Combine(
+            _fs.RecordingsDir.FullName,
+            Slug(camera.Name),
+            DateTime.Now.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture));
+        Directory.CreateDirectory(dir);
+        // ffmpeg fills in the %03d; the first segment's name is predictable, which
+        // is what gets indexed up front.
+        var baseName = $"cam_{DateTime.Now:yyyyMMdd_HHmmss}";
+        var pattern = Path.Combine(dir, baseName + "_%03d.mp4");
+        var path = Path.Combine(dir, baseName + "_000.mp4");
+
+        var psi = new ProcessStartInfo(LiveFfmpeg.ResolveExecutable())
+        {
+            RedirectStandardInput = true,
+            RedirectStandardOutput = true,
+            RedirectStandardError = true,
+            UseShellExecute = false,
+            CreateNoWindow = true,
+        };
+        foreach (var arg in new[]
+                 {
+                     "-rtsp_transport", "tcp", "-i", rtspUrl,
+                     // Copy, never re-encode: recording must not cost CPU per camera,
+                     // and the archive should hold what the camera actually sent.
+                     "-c", "copy",
+                     "-f", "segment",
+                     "-segment_time", ((int)SegmentDuration.TotalSeconds).ToString(CultureInfo.InvariantCulture),
+                     // Each part starts at zero, so every segment plays as its own
+                     // file instead of pretending to begin hours in.
+                     "-reset_timestamps", "1",
+                     "-segment_format", "mp4",
+                     pattern,
+                 })
+        {
+            psi.ArgumentList.Add(arg);
+        }
+
+        var process = Process.Start(psi);
+        if (process is null)
+            return null;
+        _ = LiveFfmpeg.DrainStderrAsync(process, _logger);
+
+        var recording = new Recording(
+            Id: RecordingId.New(),
+            CameraId: camera.Id,
+            FilePath: path,
+            StartedAt: DateTime.UtcNow,
+            EndedAt: null,
+            SizeBytes: 0,
+            Codec: null,
+            HasMotion: false);
+
+        // Indexed while running, so a server that dies mid-recording still leaves
+        // a row pointing at the partial file instead of an orphan on disk.
+        await _repo.AddAsync(recording, ct);
+        _active[cameraId] = new ActiveRecording(process, recording, baseName, dir);
+        _logger.LogInformation("Recording {Camera} to {Path}", camera.Name, path);
+        return recording;
+    }
+
+    /// Returns the finished recording, or null when there was nothing to stop
+    /// OR the camera produced an empty file (see below) — the caller tells the
+    /// two apart with <see cref="IsRecording"/>.
+    public async Task<Recording?> StopAsync(string cameraId, CancellationToken ct)
+    {
+        if (!_active.TryRemove(cameraId, out var active))
+            return null;
+
+        try
+        {
+            // "q" is ffmpeg's clean shutdown: finish the current packet, write the
+            // trailer, exit. Only if it ignores us does the process get killed.
+            await active.Process.StandardInput.WriteAsync("q");
+            await active.Process.StandardInput.FlushAsync(ct);
+            using var grace = CancellationTokenSource.CreateLinkedTokenSource(ct);
+            grace.CancelAfter(StopGrace);
+            await active.Process.WaitForExitAsync(grace.Token);
+        }
+        catch (Exception ex)
+        {
+            _logger.LogWarning(ex, "ffmpeg did not stop cleanly; killing it (the file may be unplayable)");
+            try { active.Process.Kill(entireProcessTree: true); } catch { /* already gone */ }
+        }
+        finally
+        {
+            active.Process.Dispose();
+        }
+
+        return await ReconcileSegmentsAsync(active, DateTime.UtcNow, ct);
+    }
+
+    // Turns whatever ffmpeg actually wrote into archive rows.
+    //
+    // Only the first segment is indexed at start (its name is predictable), so
+    // the rest are added here, and the first row is updated with its real size.
+    // Timestamps come from the segment index rather than the file's mtime: mtime
+    // is when writing FINISHED, and the archive is browsed by when footage began.
+    private async Task<Recording?> ReconcileSegmentsAsync(
+        ActiveRecording active, DateTime stoppedAt, CancellationToken ct)
+    {
+        var segments = Directory
+            .GetFiles(active.Directory, active.BaseName + "_*.mp4")
+            .OrderBy(f => f, StringComparer.Ordinal)
+            .ToList();
+
+        Recording? first = null;
+        for (var i = 0; i < segments.Count; i++)
+        {
+            var info = new FileInfo(segments[i]);
+            var isFirst = string.Equals(info.FullName, active.Recording.FilePath, StringComparison.OrdinalIgnoreCase);
+
+            if (!info.Exists || info.Length == 0)
+            {
+                // A trailing empty part is normal when the stop lands right on a
+                // segment boundary; an empty first part means the camera gave
+                // nothing at all. Neither belongs in the archive.
+                if (isFirst) await _repo.RemoveAsync(active.Recording.Id, ct);
+                try { if (info.Exists) info.Delete(); } catch (IOException) { /* leave it */ }
+                continue;
+            }
+
+            var startedAt = active.Recording.StartedAt + i * SegmentDuration;
+            var endedAt = i + 1 < segments.Count
+                ? active.Recording.StartedAt + (i + 1) * SegmentDuration
+                : stoppedAt;
+
+            var row = isFirst
+                ? active.Recording with { EndedAt = endedAt, SizeBytes = info.Length }
+                : new Recording(
+                    Id: RecordingId.New(),
+                    CameraId: active.Recording.CameraId,
+                    FilePath: info.FullName,
+                    StartedAt: startedAt,
+                    EndedAt: endedAt,
+                    SizeBytes: info.Length,
+                    Codec: null,
+                    HasMotion: false);
+
+            if (isFirst) await _repo.UpdateAsync(row, ct);
+            else await _repo.AddAsync(row, ct);
+
+            first ??= row;
+        }
+
+        if (first is null)
+            _logger.LogWarning("Recording under {Base} produced no data; discarding it", active.BaseName);
+        return first;
+    }
+
+    // A stopping server should not leave half-written files behind.
+    public async ValueTask DisposeAsync()
+    {
+        foreach (var cameraId in _active.Keys.ToList())
+        {
+            try { await StopAsync(cameraId, CancellationToken.None); }
+            catch (Exception ex) { _logger.LogWarning(ex, "Failed to stop recording for {Camera} on shutdown", cameraId); }
+        }
+    }
+
+    // Mirrors RecordingService.Slug so a camera lands in the same folder no
+    // matter which head recorded it.
+    private static string Slug(string name)
+    {
+        var chars = new List<char>(name.Length);
+        foreach (var raw in name.ToLowerInvariant())
+        {
+            var c = raw == ' ' ? '-' : raw;
+            if ((c >= 'a' && c <= 'z') || (c >= '0' && c <= '9') || c == '-' || c == '_') chars.Add(c);
+        }
+        return chars.Count == 0 ? "camera" : new string(chars.ToArray());
+    }
+
+    private sealed record ActiveRecording(Process Process, Recording Recording, string BaseName, string Directory);
+}
diff --git a/src/OpenIPC.Viewer.Web/Auth/WebPermission.cs b/src/OpenIPC.Viewer.Web/Auth/WebPermission.cs
index f821198..efcad88 100644
--- a/src/OpenIPC.Viewer.Web/Auth/WebPermission.cs
+++ b/src/OpenIPC.Viewer.Web/Auth/WebPermission.cs
@@ -17,6 +17,11 @@ public enum WebPermission
     // Everything that changes the installation: camera/group/layout CRUD,
     // discovery, config import/export, sessions, users.
     Manage = 16,
+    // Speaking through the camera's speaker. Its own flag rather than a reuse:
+    // it is neither "change the installation" nor PTZ, and it is the one action
+    // here that reaches people standing in front of the camera — worth being
+    // able to grant and withhold on its own.
+    Talk = 32,
 
-    All = ViewLive | ViewArchive | Ptz | Export | Manage,
+    All = ViewLive | ViewArchive | Ptz | Export | Manage | Talk,
 }
diff --git a/src/OpenIPC.Viewer.Web/Backend/WebBackend.cs b/src/OpenIPC.Viewer.Web/Backend/WebBackend.cs
index 47094cc..618d2d4 100644
--- a/src/OpenIPC.Viewer.Web/Backend/WebBackend.cs
+++ b/src/OpenIPC.Viewer.Web/Backend/WebBackend.cs
@@ -4,8 +4,12 @@
 using OpenIPC.Viewer.Core.Onvif;
 using OpenIPC.Viewer.Core.Onvif.Discovery;
 using OpenIPC.Viewer.Core.Persistence;
+using OpenIPC.Viewer.Core.Recording;
 using OpenIPC.Viewer.Core.Services;
 using OpenIPC.Viewer.Core.Settings;
+using OpenIPC.Viewer.Core.Snapshots;
+using OpenIPC.Viewer.Core.Video;
+using OpenIPC.Viewer.Devices.Backchannel;
 using OpenIPC.Viewer.Devices.Discovery;
 using OpenIPC.Viewer.Devices.Majestic;
 using OpenIPC.Viewer.Devices.Onvif;
@@ -31,6 +35,16 @@ public static IServiceCollection AddWebBackend(this IServiceCollection services,
         services.AddSingleton<ICameraRepository, SqliteCameraRepository>();
         services.AddSingleton<IGroupRepository, SqliteGroupRepository>();
         services.AddSingleton<ILayoutRepository, SqliteLayoutRepository>();
+        // The archive the desktop head recorded: listed, played and deleted from
+        // the browser. The web server doesn't record yet, it reads the index.
+        services.AddSingleton<IRecordingRepository, SqliteRecordingRepository>();
+        // Recording started from the browser: its own ffmpeg process per camera,
+        // writing into the same folder and table the desktop head uses.
+        services.AddSingleton<WebRecorder>();
+        // Kept snapshots share the desktop's library: same folder layout, same
+        // table. SnapshotService itself can't be reused (it needs the Video
+        // layer), so SnapshotLibraryApi writes the rows against this repo.
+        services.AddSingleton<ISnapshotRepository, SqliteSnapshotRepository>();
         // Browser-safe config export/import (never serializes camera passwords).
         services.AddSingleton<IConfigBackupService, SqliteConfigBackupService>();
         // CRUD goes through the directory service so credentials land in the
@@ -44,6 +58,10 @@ public static IServiceCollection AddWebBackend(this IServiceCollection services,
         // stateless (one short-lived HTTP call per operation), so a singleton is
         // safe and matches the desktop registration in SharedComposition.
         services.AddSingleton<IOnvifClient, SoapOnvifClient>();
+        // Push-to-talk: ffmpeg can't do an ONVIF backchannel, so this opens its
+        // own RTSP session per talker. Stateless between calls, like the ONVIF
+        // client — the session lives for as long as the browser holds the key.
+        services.AddSingleton<IAudioBackchannelClient, RtspBackchannelClient>();
         // Discovery (same source set and aggregator as the desktop dialog) plus
         // the ONVIF probe chain the add flow runs on a chosen candidate.
         services.AddSingleton<OnvifProbeService>();
@@ -53,6 +71,9 @@ public static IServiceCollection AddWebBackend(this IServiceCollection services,
         services.AddSingleton<INetworkInterfaceProvider, SystemNetworkInterfaceProvider>();
         services.AddSingleton<IReachabilityProbe, TcpReachabilityProbe>();
         services.AddSingleton<IMajesticClient, MajesticHttpClient>();
+        // The camera-settings panel renders whatever knobs the live config.json
+        // exposes, so it needs the same schema walk the desktop editor uses.
+        services.AddSingleton<IMajesticConfigSchema, MajesticConfigSchema>();
         services.AddSingleton<IDiscoveryService, WsDiscoveryService>();
         services.AddSingleton<IDiscoverySource, OnvifDiscoverySource>();
         services.AddSingleton<IDiscoverySource, MdnsDiscoverySource>();
diff --git a/src/OpenIPC.Viewer.Web/WebServer.cs b/src/OpenIPC.Viewer.Web/WebServer.cs
index f3def0d..f7f6a25 100644
--- a/src/OpenIPC.Viewer.Web/WebServer.cs
+++ b/src/OpenIPC.Viewer.Web/WebServer.cs
@@ -183,6 +183,11 @@ private static void MapEndpoints(WebApplication app, WebServerOptions options)
         app.MapLayoutEndpoints();
         app.MapLiveEndpoints();
         app.MapPtzEndpoints();
+        app.MapTalkEndpoints();
+        app.MapMajesticEndpoints();
+        app.MapSnapshotEndpoints();
+        app.MapSnapshotLibraryEndpoints();
+        app.MapRecordingEndpoints();
         app.MapDiscoveryEndpoints();
         app.MapSystemEndpoints();
         app.MapUserEndpoints();