diff --git a/apps/web/src/labels.ts b/apps/web/src/labels.ts
index 65b3c0f..9a9bca8 100644
--- a/apps/web/src/labels.ts
+++ b/apps/web/src/labels.ts
@@ -147,3 +147,12 @@ export function changeValue(field: string, value: unknown, scale: RatingScale, m
   else text = String(value);
   return text.length > 160 ? `${text.slice(0, 159)}…` : text;
 }
+
+const MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+/** The Log's month heading: "2026-10…" → "October 2026"; a bare year stays a year. Never through `Date`. */
+export function logMonth(at: string): string {
+  const y = at.slice(0, 4);
+  const m = Number(at.slice(5, 7));
+  return m >= 1 && m <= 12 ? `${MONTH_NAMES[m - 1]} ${y}` : y;
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index c93d481..dc51c3c 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -8,6 +8,7 @@ import { Shell } from "./components/Shell.tsx";
 import { useMe } from "./hooks.ts";
 import { Changes } from "./routes/changes.tsx";
 import { Library } from "./routes/library.tsx";
+import { Log } from "./routes/log.tsx";
 import { Login } from "./routes/login.tsx";
 import { NotYet } from "./routes/not-yet.tsx";
 import { Register } from "./routes/register.tsx";
@@ -59,6 +60,7 @@ function App() {
               <Route path="/">{() => <Library selectedId={null} />}</Route>
               <Route path="/entries/:id">{(p) => <Library selectedId={p.id} />}</Route>
               <Route path="/changes" component={Changes} />
+              <Route path="/log" component={Log} />
               <Route path="/sources" component={Sources} />
               <Route path="/sources/:id">{(p) => <SourceDetail key={p.id} id={p.id} />}</Route>
               <Route path="/:page/*?">{(p) => <NotYet page={p.page} />}</Route>
diff --git a/apps/web/src/routes/log.tsx b/apps/web/src/routes/log.tsx
new file mode 100644
index 0000000..ee1e4ee
--- /dev/null
+++ b/apps/web/src/routes/log.tsx
@@ -0,0 +1,119 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Link } from "wouter";
+import { api, type LogItem } from "../api.ts";
+import { Cover } from "../components/Cover.tsx";
+import { LoadError } from "../components/LoadError.tsx";
+import { describeRating, engagementNouns, formatDateRange, formatRating, mediaTypeLabel, MONTHS, shortDate } from "../format.ts";
+import { logMonth } from "../labels.ts";
+import { useRatingScale } from "../settings.ts";
+
+function listenTime(at: string): string {
+  if (at.length <= 10) return shortDate(at);
+  const d = new Date(at);
+  if (Number.isNaN(d.getTime())) return at;
+  return `${d.getDate()} ${MONTHS[d.getMonth()]}, ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+export function Log() {
+  const scale = useRatingScale();
+  const log = useInfiniteQuery({
+    queryKey: ["log"],
+    queryFn: ({ pageParam }) => api.log(pageParam),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (p) => p.nextCursor ?? undefined,
+  });
+  const items = log.data?.pages.flatMap((p) => p.items) ?? [];
+  const groups: { month: string; items: LogItem[] }[] = [];
+  for (const it of items) {
+    const month = logMonth(it.at);
+    const last = groups[groups.length - 1];
+    if (last && last.month === month) last.items.push(it);
+    else groups.push({ month, items: [it] });
+  }
+
+  return (
+    <div className="screen">
+      <div className="screen-inner narrow">
+        <header className="screen-head">
+          <h1>Log</h1>
+          <p className="lede">Everything you've finished, started and listened to, newest first.</p>
+        </header>
+        {log.error && log.data && <LoadError error={log.error} retry={() => void log.refetch()} stale />}
+        {log.isPending ? (
+          <ul className="log" aria-busy="true" aria-label="Loading your log">
+            {[0, 1, 2, 3, 4].map((i) => (
+              <li key={i} className="log-row skeleton" aria-hidden="true"><div className="cover small" /><div><div className="bar" /><div className="bar" /></div></li>
+            ))}
+          </ul>
+        ) : log.error && !log.data ? (
+          <LoadError error={log.error} retry={() => void log.refetch()} />
+        ) : items.length === 0 ? (
+          <div className="empty-state">
+            <strong>Nothing logged yet</strong>
+            <p>Log a read, watch or play from any entry in your library, or connect a source to bring your history in.</p>
+            <div className="form-actions" style={{ marginTop: 14 }}>
+              <Link href="/" className="btn">Go to library</Link>
+              <Link href="/sources" className="btn ghost">Connect a source</Link>
+            </div>
+          </div>
+        ) : (
+          <>
+            {groups.map((g) => (
+              <section key={g.month} className="log-month" aria-label={g.month}>
+                <h2>{g.month}</h2>
+                <ul className="log">
+                  {g.items.map((it) => (
+                    <li key={`${it.kind}:${it.id}`}>{it.kind === "engagement" ? <EngagementRow it={it} scale={scale} /> : <ListenRow it={it} />}</li>
+                  ))}
+                </ul>
+              </section>
+            ))}
+            {log.hasNextPage && (
+              <button type="button" className="btn small more-btn" disabled={log.isFetchingNextPage} onClick={() => void log.fetchNextPage()}>
+                {log.isFetchingNextPage ? "Loading…" : "Show older"}
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function EngagementRow({ it, scale }: { it: Extract<LogItem, { kind: "engagement" }>; scale: ReturnType<typeof useRatingScale> }) {
+  const nouns = engagementNouns(it.mediaType);
+  const dated = it.startedAt || it.finishedAt;
+  const verb = it.finishedAt ? nouns.past : it.startedAt ? "Started" : "Logged";
+  const when = dated ? formatDateRange(it.startedAt, it.finishedAt).replace(/^Started /, "") : shortDate(it.at);
+  return (
+    <Link href={`/entries/${it.entryId}`} className="log-row">
+      <Cover url={it.coverUrl} mediaType={it.mediaType} draft={false} size="small" />
+      <div className="log-main">
+        <span className="log-title">{it.title}</span>
+        <span className="log-meta">
+          {mediaTypeLabel(it.mediaType)} · {verb} {when}
+          {it.platform ? ` · ${it.platform}` : ""}
+        </span>
+      </div>
+      {it.rating !== null && <span className="stars log-stars" role="img" aria-label={describeRating(it.rating, scale)}>{formatRating(it.rating, scale)}</span>}
+    </Link>
+  );
+}
+
+function ListenRow({ it }: { it: Extract<LogItem, { kind: "listen" }> }) {
+  return (
+    <div className="log-row listen">
+      <div className="cover small listen-cover" aria-hidden="true">
+        <svg viewBox="0 0 24 24" className="icon"><path d="M9 18V5l11-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM20 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" /></svg>
+      </div>
+      <div className="log-main">
+        <span className="log-title">{it.track}</span>
+        <span className="log-meta">
+          {it.artist}
+          {it.album ? ` · ${it.album}` : ""}
+        </span>
+      </div>
+      <time className="log-when" dateTime={it.at}>{listenTime(it.at)}</time>
+    </div>
+  );
+}
diff --git a/apps/web/src/theme.css b/apps/web/src/theme.css
index a603095..b27e65b 100644
--- a/apps/web/src/theme.css
+++ b/apps/web/src/theme.css
@@ -553,3 +553,23 @@ input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px;
   .conn-row .conn-meta { grid-column: 1; }
   .conn-row .badge { grid-row: 1; grid-column: 2; }
 }
+
+/* ---------- Log ---------- */
+.screen-inner.narrow { max-width: 720px; }
+.log-month { margin-top: 22px; }
+.log-month h2 { font-size: 0.78rem; font-weight: 600; color: var(--text-faint); margin-bottom: 4px; position: sticky; top: 0; background: var(--surface-1); padding: 6px 0; z-index: 1; }
+.log { list-style: none; }
+.log-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 10px; margin: 0 -10px; border-radius: var(--r-control); }
+a.log-row { transition: background 0.12s; }
+a.log-row:hover { background: var(--surface-2); }
+.log-main { min-width: 0; display: grid; }
+.log-title { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.log-meta { font-size: 0.76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.log-stars { font-size: 0.72rem; }
+.log-when { font-size: 0.76rem; color: var(--text-faint); white-space: nowrap; }
+.listen-cover { display: grid; place-items: center; background: color-mix(in srgb, var(--media-music) 55%, var(--surface-2)); color: #f6d3e1; }
+.listen-cover .icon { width: 14px; height: 14px; }
+.log-row.skeleton .bar { background: var(--surface-2); height: 10px; border-radius: 4px; width: 60%; }
+.log-row.skeleton .bar + .bar { width: 35%; margin-top: 6px; height: 8px; }
+.log-row.skeleton .cover { background: var(--surface-2); }
+.more-btn { margin-top: 18px; }
diff --git a/apps/web/test/labels.test.ts b/apps/web/test/labels.test.ts
index f4965f7..4e12c67 100644
--- a/apps/web/test/labels.test.ts
+++ b/apps/web/test/labels.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import type { ChangeEvent } from "../src/api.ts";
-import { changeValue, describeChange, groupByRun, scheduleLabel, SCHEDULES } from "../src/labels.ts";
+import { changeValue, describeChange, groupByRun, logMonth, scheduleLabel, SCHEDULES } from "../src/labels.ts";
 
 const base: ChangeEvent = {
   id: "ev1",
@@ -117,3 +117,12 @@ describe("changeValue", () => {
     expect(changeValue("review", "x".repeat(300), "5half")).toHaveLength(160);
   });
 });
+
+describe("logMonth", () => {
+  test("month headings from partial dates and timestamps", () => {
+    expect(logMonth("2026-10-01")).toBe("October 2026");
+    expect(logMonth("2025-03")).toBe("March 2025");
+    expect(logMonth("2019")).toBe("2019");
+    expect(logMonth("2026-01-31T23:59:00.000Z")).toBe("January 2026");
+  });
+});