diff --git a/web/src/app/(app)/notes/[noteId]/page.tsx b/web/src/app/(app)/notes/[noteId]/page.tsx
index ace9b28..9aee76f 100644
--- a/web/src/app/(app)/notes/[noteId]/page.tsx
+++ b/web/src/app/(app)/notes/[noteId]/page.tsx
@@ -9,7 +9,7 @@ import { LinkedNotesPanel } from "@/components/LinkedNotesPanel";
 import { TaskReviewPanel } from "@/components/TaskReviewPanel";
 import { ArtifactPanel } from "@/components/ArtifactPanel";
 import { AgentTimeline } from "@/components/AgentTimeline";
-import { createNoteArtifact, getNoteDetail, updateNoteDetail } from "@/lib/notes-client";
+import { createNoteArtifact, createNoteTask, getNoteDetail, updateNoteDetail } from "@/lib/notes-client";
 import type { NoteDetail } from "@/lib/types";
 
 export default function NoteDetailPage() {
@@ -17,6 +17,7 @@ export default function NoteDetailPage() {
   const noteId = params.noteId;
   const [note, setNote] = useState<NoteDetail | null>(null);
   const [isSaving, setIsSaving] = useState(false);
+  const [isCreatingTask, setIsCreatingTask] = useState(false);
   const [isCreatingArtifact, setIsCreatingArtifact] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -81,6 +82,32 @@ export default function NoteDetailPage() {
     }
   }
 
+  async function handleCreateTask(input: { title: string; description?: string }) {
+    if (!note) {
+      return;
+    }
+
+    setIsCreatingTask(true);
+
+    try {
+      await createNoteTask({
+        id: crypto.randomUUID(),
+        workspaceId: note.workspaceId,
+        noteId: note.id,
+        title: input.title,
+        description: input.description,
+        source: "manual",
+      });
+      const refreshed = await getNoteDetail(note.id);
+      setNote(refreshed);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unable to create task");
+    } finally {
+      setIsCreatingTask(false);
+    }
+  }
+
   if (!note) {
     return (
       <AppShell
@@ -108,7 +135,7 @@ export default function NoteDetailPage() {
           {error ? <div className="surface-card" style={{ padding: "var(--ml-space-4)", color: "var(--ml-text-secondary)" }}>{error}</div> : null}
           <MetadataPanel note={note} />
           <LinkedNotesPanel linkedNotes={note.linkedNotes} />
-          <TaskReviewPanel tasks={note.tasks} />
+          <TaskReviewPanel tasks={note.tasks} onCreate={handleCreateTask} isCreating={isCreatingTask} />
           <ArtifactPanel artifacts={note.artifacts} onCreate={handleCreateArtifact} isCreating={isCreatingArtifact} />
           <AgentTimeline items={note.timeline} />
         </aside>
diff --git a/web/src/components/TaskReviewPanel.tsx b/web/src/components/TaskReviewPanel.tsx
index e3a1400..2a06e50 100644
--- a/web/src/components/TaskReviewPanel.tsx
+++ b/web/src/components/TaskReviewPanel.tsx
@@ -1,11 +1,77 @@
+import { useState } from "react";
 import type { NoteTask } from "@/lib/types";
 
-export function TaskReviewPanel({ tasks }: { tasks: NoteTask[] }) {
+export function TaskReviewPanel({
+  tasks,
+  onCreate,
+  isCreating = false,
+}: {
+  tasks: NoteTask[];
+  onCreate: (input: { title: string; description?: string }) => Promise<void>;
+  isCreating?: boolean;
+}) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  async function handleCreateTask() {
+    if (!title.trim()) {
+      return;
+    }
+
+    await onCreate({
+      title: title.trim(),
+      description: description.trim() || undefined,
+    });
+
+    setTitle("");
+    setDescription("");
+  }
+
   return (
     <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}>
       <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
         <div style={{ fontWeight: 700 }}>Task extraction review</div>
-        <span className="badge">mock extraction</span>
+        <span className="badge">backend-backed review</span>
+      </div>
+      <div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}>
+        <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
+          <label htmlFor="task-title" style={{ color: "var(--ml-text-secondary)" }}>
+            Add task
+          </label>
+          <input
+            id="task-title"
+            className="input-shell"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Task title"
+          />
+        </div>
+        <textarea
+          className="input-shell"
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+          placeholder="Description"
+          style={{ minHeight: 96, resize: "vertical" }}
+        />
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <button
+            type="button"
+            disabled={isCreating}
+            onClick={() => {
+              void handleCreateTask();
+            }}
+            style={{
+              border: "none",
+              borderRadius: "var(--ml-radius-md)",
+              padding: "8px 12px",
+              background: "var(--ml-accent-primary)",
+              color: "var(--ml-text-primary)",
+              fontWeight: 600,
+            }}
+          >
+            {isCreating ? "Adding…" : "Add task"}
+          </button>
+        </div>
       </div>
       {tasks.map((task) => (
         <div key={task.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
diff --git a/web/src/lib/notes-client.ts b/web/src/lib/notes-client.ts
index adc17c8..70f085a 100644
--- a/web/src/lib/notes-client.ts
+++ b/web/src/lib/notes-client.ts
@@ -282,6 +282,22 @@ export async function createNoteArtifact(input: {
   });
 }
 
+export async function createNoteTask(input: {
+  id: string;
+  workspaceId: string;
+  noteId: string;
+  title: string;
+  description?: string;
+  dueAt?: string;
+  source?: "manual" | "extracted";
+}): Promise<void> {
+  const api = createNotesApiClient();
+  await api.fetch("/note-tasks", {
+    method: "POST",
+    body: JSON.stringify(input),
+  });
+}
+
 export async function getNoteDetail(noteId: string): Promise<NoteDetail | null> {
   const api = createNotesApiClient();
   const [workspaceResponse, noteResponse] = await Promise.all([