diff --git a/src/app/assignments/page.tsx b/src/app/assignments/page.tsx
new file mode 100644
index 0000000..e685c19
--- /dev/null
+++ b/src/app/assignments/page.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useApiList } from "@/hooks/use-api-list";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+// Shape returned by GET /api/assignments — snake_case per this repo's
+// API-boundary convention (see src/lib/assignments.ts's toRecord()).
+interface AssignmentRecord {
+  id: string;
+  employee_id: string;
+  asset_item_id: string | null;
+  license_id: string | null;
+  assigned_at: string;
+  returned_at: string | null;
+  signed_at: string | null;
+  created_at: string;
+}
+
+// Shape returned by GET /api/employees — only the field used to populate the
+// employeeId <Select> here (see src/app/employees/page.tsx's EmployeeRecord
+// for the full shape).
+interface EmployeeRecord {
+  id: string;
+  name: string;
+}
+
+// Shape returned by GET /api/assets — only the field used to populate the
+// assetItemId <Select> here (see src/app/assets/page.tsx's AssetItemRecord
+// for the full shape).
+interface AssetItemRecord {
+  id: string;
+  serial_number: string;
+}
+
+// Shape returned by GET /api/licenses — only the field used to populate the
+// licenseId <Select> here (see src/app/licenses/page.tsx's LicenseRecord for
+// the full shape).
+interface LicenseRecord {
+  id: string;
+  name: string;
+}
+
+// The create form's XOR toggle — mirrors the server's own XOR rule in
+// src/lib/assignments.ts's createAssignmentSchema .refine() (exactly one of
+// assetItemId/licenseId must be set). This is purely a UI convenience to
+// decide which single <Select> to show/submit — the actual business rule is
+// still enforced server-side, this doesn't reimplement it.
+type TargetKind = "asset_item" | "license";
+
+export default function AssignmentsPage() {
+  const {
+    data: assignments,
+    loading,
+    error,
+    refetch,
+  } = useApiList<AssignmentRecord>("/api/assignments");
+
+  const { data: employees } = useApiList<EmployeeRecord>("/api/employees");
+  const { data: assetItems } = useApiList<AssetItemRecord>("/api/assets");
+  const { data: licenses } = useApiList<LicenseRecord>("/api/licenses");
+
+  const [employeeId, setEmployeeId] = useState("");
+  const [targetKind, setTargetKind] = useState<TargetKind>("asset_item");
+  const [assetItemId, setAssetItemId] = useState("");
+  const [licenseId, setLicenseId] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // Per-row error surfaced next to the "Return" button that was clicked, keyed
+  // by assignment id — kept simple (no modal) per task scope.
+  const [returnErrors, setReturnErrors] = useState<Record<string, string>>({});
+  const [returningId, setReturningId] = useState<string | null>(null);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setSubmitError(null);
+    setSubmitting(true);
+
+    try {
+      const response = await fetch("/api/assignments", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          employeeId,
+          // Only the one FK relevant to the selected toggle is sent — mirrors
+          // the server's XOR rule (see createAssignmentSchema's .refine()).
+          ...(targetKind === "asset_item" ? { assetItemId } : { licenseId }),
+        }),
+      });
+
+      let body: unknown;
+      try {
+        body = await response.json();
+      } catch {
+        body = null;
+      }
+
+      if (!response.ok) {
+        const message =
+          body !== null &&
+          typeof body === "object" &&
+          "error" in body &&
+          typeof (body as { error: unknown }).error === "string"
+            ? (body as { error: string }).error
+            : "Request failed";
+        setSubmitError(message);
+        return;
+      }
+
+      setEmployeeId("");
+      setTargetKind("asset_item");
+      setAssetItemId("");
+      setLicenseId("");
+      refetch();
+    } catch {
+      setSubmitError("Request failed");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleReturn(id: string) {
+    setReturningId(id);
+    setReturnErrors((previous) => {
+      const next = { ...previous };
+      delete next[id];
+      return next;
+    });
+
+    try {
+      // PATCH /api/assignments/[id]'s body is `{returnedAt?: string}` — see
+      // src/lib/assignments.ts's validateReturnAssignmentInput(). returnedAt
+      // is optional and defaults to "now" server-side (returnAssignment()),
+      // so an empty body is sent here rather than guessing a timestamp
+      // client-side.
+      const response = await fetch(`/api/assignments/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+
+      let body: unknown;
+      try {
+        body = await response.json();
+      } catch {
+        body = null;
+      }
+
+      if (!response.ok) {
+        const message =
+          body !== null &&
+          typeof body === "object" &&
+          "error" in body &&
+          typeof (body as { error: unknown }).error === "string"
+            ? (body as { error: string }).error
+            : "Request failed";
+        setReturnErrors((previous) => ({ ...previous, [id]: message }));
+        return;
+      }
+
+      refetch();
+    } catch {
+      setReturnErrors((previous) => ({ ...previous, [id]: "Request failed" }));
+    } finally {
+      setReturningId(null);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-8 p-6">
+      <h1 className="text-xl font-semibold">Assignments</h1>
+
+      <section className="flex flex-col gap-3">
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : error ? (
+          <p className="text-sm text-destructive">{error}</p>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>ID</TableHead>
+                <TableHead>Employee ID</TableHead>
+                <TableHead>Asset Item ID</TableHead>
+                <TableHead>License ID</TableHead>
+                <TableHead>Assigned At</TableHead>
+                <TableHead>Returned At</TableHead>
+                <TableHead>Signed At</TableHead>
+                <TableHead>Created At</TableHead>
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {assignments.map((assignment) => (
+                <TableRow key={assignment.id}>
+                  <TableCell>{assignment.id}</TableCell>
+                  <TableCell>{assignment.employee_id}</TableCell>
+                  <TableCell>{assignment.asset_item_id ?? "-"}</TableCell>
+                  <TableCell>{assignment.license_id ?? "-"}</TableCell>
+                  <TableCell>{assignment.assigned_at}</TableCell>
+                  <TableCell>{assignment.returned_at ?? "-"}</TableCell>
+                  <TableCell>{assignment.signed_at ?? "-"}</TableCell>
+                  <TableCell>{assignment.created_at}</TableCell>
+                  <TableCell>
+                    {assignment.returned_at === null ? (
+                      <div className="flex flex-col gap-1">
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          disabled={returningId === assignment.id}
+                          onClick={() => handleReturn(assignment.id)}
+                        >
+                          {returningId === assignment.id ? "Returning..." : "Return"}
+                        </Button>
+                        {returnErrors[assignment.id] ? (
+                          <p className="text-xs text-destructive">
+                            {returnErrors[assignment.id]}
+                          </p>
+                        ) : null}
+                      </div>
+                    ) : (
+                      "-"
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </section>
+
+      <section className="flex max-w-sm flex-col gap-4">
+        <h2 className="text-lg font-semibold">New Assignment</h2>
+
+        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="employeeId">Employee</Label>
+            <Select value={employeeId} onValueChange={setEmployeeId} required>
+              <SelectTrigger id="employeeId" className="w-full">
+                <SelectValue placeholder="Select an employee" />
+              </SelectTrigger>
+              <SelectContent>
+                {employees.map((employee) => (
+                  <SelectItem key={employee.id} value={employee.id}>
+                    {employee.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="targetKind">Assign</Label>
+            <Select
+              value={targetKind}
+              onValueChange={(value) => setTargetKind(value as TargetKind)}
+            >
+              <SelectTrigger id="targetKind" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="asset_item">Asset Item</SelectItem>
+                <SelectItem value="license">License</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {targetKind === "asset_item" ? (
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="assetItemId">Asset Item</Label>
+              <Select value={assetItemId} onValueChange={setAssetItemId} required>
+                <SelectTrigger id="assetItemId" className="w-full">
+                  <SelectValue placeholder="Select an asset item" />
+                </SelectTrigger>
+                <SelectContent>
+                  {assetItems.map((assetItem) => (
+                    <SelectItem key={assetItem.id} value={assetItem.id}>
+                      {assetItem.serial_number}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="licenseId">License</Label>
+              <Select value={licenseId} onValueChange={setLicenseId} required>
+                <SelectTrigger id="licenseId" className="w-full">
+                  <SelectValue placeholder="Select a license" />
+                </SelectTrigger>
+                <SelectContent>
+                  {licenses.map((license) => (
+                    <SelectItem key={license.id} value={license.id}>
+                      {license.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}
+
+          <Button type="submit" disabled={submitting}>
+            {submitting ? "Creating..." : "Create Assignment"}
+          </Button>
+        </form>
+      </section>
+    </div>
+  );
+}