diff --git a/Workflow/app/notes/page.tsx b/Workflow/app/notes/page.tsx
new file mode 100644
index 0000000..03f2fef
--- /dev/null
+++ b/Workflow/app/notes/page.tsx
@@ -0,0 +1,50 @@
+// app/notes/page.tsx
+// Server Component. Loads all notes from PocketBase and hands them to
+// the Client Component <NotesList> which owns the CRUD UI state.
+//
+// Notes live in the ysterbaard_notes collection. If the collection is
+// missing (PB returns 404) the page renders an actionable error so the
+// user knows to create it in the admin UI.
+
+import { fetchCollection } from "@/lib/pb";
+import type { YsterbaardNote } from "@/lib/types";
+import PageHeader from "@/components/PageHeader";
+import NotesList from "./NotesList";
+
+export const dynamic = "force-dynamic";
+
+async function loadNotes(): Promise<YsterbaardNote[]> {
+  try {
+    const list = await fetchCollection<YsterbaardNote>("ysterbaard_notes", {
+      page: 1,
+      perPage: 500,
+      sort: "-created",
+    });
+    return list.items ?? [];
+  } catch (err) {
+    // Surface the failure to the client so the page can show guidance.
+    const msg = err instanceof Error ? err.message : "Unknown PB error";
+    if (msg.includes("404") || msg.toLowerCase().includes("not found")) {
+      throw new Error(
+        "The ysterbaard_notes collection is missing on PocketBase. " +
+          "Open https://pb.agent.apphub.co.za/_/ and create it before " +
+          "using this tab. See docs/superpowers/specs/2026-09-16-notes-tab-design.md for the field spec.",
+      );
+    }
+    throw err;
+  }
+}
+
+export default async function NotesPage() {
+  const notes = await loadNotes();
+  return (
+    <>
+      <PageHeader
+        eyebrow="Quick notes"
+        title="Notes"
+        subtitle="Things to do. Tick when done, edit, or delete."
+      />
+      <NotesList initialNotes={notes} />
+    </>
+  );
+}
\ No newline at end of file