diff --git a/frontend/app/agencies/[id]/edit/page.tsx b/frontend/app/agencies/[id]/edit/page.tsx
new file mode 100644
index 0000000..e62facd
--- /dev/null
+++ b/frontend/app/agencies/[id]/edit/page.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAgency, useUpdateAgency } from "@/hooks/useApi";
+import type { Agency } from "@/types";
+
+export default function AgencyEditPage() {
+  const params = useParams();
+  const router = useRouter();
+  const agencyId = params.id as string;
+
+  const [formData, setFormData] = useState<Partial<Agency>>({});
+
+  const { data: agency, isLoading } = useAgency(agencyId);
+
+  useEffect(() => {
+    if (agency) setFormData(agency);
+  }, [agency]);
+
+  const updateMutation = useUpdateAgency(agencyId);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateMutation.mutate(formData, {
+      onSuccess: () => router.push(`/agencies/${agencyId}`),
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+          <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">Loading…</h1>
+            <button
+              onClick={() => router.back()}
+              className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+            >
+              Back
+            </button>
+          </div>
+        </header>
+        <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+          <div className="animate-pulse">Loading…</div>
+        </main>
+      </div>
+    );
+  }
+
+  if (!agency) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+          <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">Error</h1>
+            <button
+              onClick={() => router.back()}
+              className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+            >
+              Back
+            </button>
+          </div>
+        </header>
+        <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+          <div className="bg-red-50 border border-red-200 rounded p-4 text-red-800">
+            <p>Agency not found.</p>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+        <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+          <h1 className="text-2xl font-bold">Edit {agency.name}</h1>
+          <button
+            onClick={() => router.back()}
+            className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+          >
+            Back
+          </button>
+        </div>
+      </header>
+
+      <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+        <form onSubmit={handleSubmit} className="max-w-2xl space-y-6">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name || ""}
+              onChange={handleChange}
+              className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email || ""}
+                onChange={handleChange}
+                className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+                required
+              />
+            </div>
+
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
+                Phone
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone || ""}
+                onChange={handleChange}
+                className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+              Address
+            </label>
+            <input
+              type="text"
+              id="address"
+              name="address"
+              value={formData.address || ""}
+              onChange={handleChange}
+              className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label htmlFor="city" className="block text-sm font-medium text-gray-700">
+                City
+              </label>
+              <input
+                type="text"
+                id="city"
+                name="city"
+                value={formData.city || ""}
+                onChange={handleChange}
+                className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="province" className="block text-sm font-medium text-gray-700">
+                Province
+              </label>
+              <input
+                type="text"
+                id="province"
+                name="province"
+                value={formData.province || ""}
+                onChange={handleChange}
+                className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+              Description
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              value={formData.description || ""}
+              onChange={handleChange}
+              rows={4}
+              className="mt-1 block w-full rounded-md border-gray-300 border shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2"
+            />
+          </div>
+
+          <div className="flex gap-3 pt-6">
+            <button
+              type="submit"
+              disabled={updateMutation.isPending}
+              className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {updateMutation.isPending ? "Saving…" : "Save Changes"}
+            </button>
+            <button
+              type="button"
+              onClick={() => router.back()}
+              className="px-6 py-2 bg-gray-300 text-gray-900 rounded hover:bg-gray-400 transition"
+            >
+              Cancel
+            </button>
+          </div>
+
+          {updateMutation.error && (
+            <div className="bg-red-50 border border-red-200 rounded p-4 text-red-800">
+              <p>Error saving changes. Please try again.</p>
+            </div>
+          )}
+        </form>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/app/agencies/[id]/page.tsx b/frontend/app/agencies/[id]/page.tsx
new file mode 100644
index 0000000..2e22392
--- /dev/null
+++ b/frontend/app/agencies/[id]/page.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useAgency } from "@/hooks/useApi";
+import type { Agency } from "@/types";
+
+export default function AgencyDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const agencyId = params.id as string;
+
+  const { data: agency, isLoading, error } = useAgency(agencyId);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+          <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">Loading…</h1>
+            <button
+              onClick={() => router.back()}
+              className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+            >
+              Back
+            </button>
+          </div>
+        </header>
+        <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+          <div className="animate-pulse">Loading agency details…</div>
+        </main>
+      </div>
+    );
+  }
+
+  if (error || !agency) {
+    return (
+      <div className="min-h-screen flex flex-col">
+        <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+          <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+            <h1 className="text-2xl font-bold">Error</h1>
+            <button
+              onClick={() => router.back()}
+              className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+            >
+              Back
+            </button>
+          </div>
+        </header>
+        <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+          <div className="bg-red-50 border border-red-200 rounded p-4 text-red-800">
+            <p>Failed to load agency details.</p>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
+        <div className="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
+          <h1 className="text-2xl font-bold">{agency.name}</h1>
+          <div className="flex gap-3">
+            <Link
+              href={`/agencies/${agencyId}/edit`}
+              className="px-4 py-2 bg-amber-500 hover:bg-amber-600 rounded transition"
+            >
+              Edit
+            </Link>
+            <button
+              onClick={() => router.back()}
+              className="px-4 py-2 bg-white/20 rounded hover:bg-white/30 transition"
+            >
+              Back
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700">
+                Email
+              </label>
+              <p className="mt-1 text-gray-900">{agency.email}</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">
+                Phone
+              </label>
+              <p className="mt-1 text-gray-900">{agency.phone}</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">
+                Status
+              </label>
+              <p className="mt-1">
+                <span className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700 border border-blue-200 capitalize">
+                  {agency.status || "unset"}
+                </span>
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700">
+                Address
+              </label>
+              <p className="mt-1 text-gray-900">{agency.address}</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">
+                City
+              </label>
+              <p className="mt-1 text-gray-900">
+                {agency.city}, {agency.province}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {agency.description && (
+          <div className="mt-8">
+            <label className="block text-sm font-medium text-gray-700">
+              Description
+            </label>
+            <p className="mt-1 text-gray-900">{agency.description}</p>
+          </div>
+        )}
+
+        <div className="mt-8 pt-6 border-t">
+          <p className="text-xs text-gray-500">
+            Created: {new Date(agency.created_at).toLocaleDateString()}
+          </p>
+          <p className="text-xs text-gray-500">
+            Updated: {new Date(agency.updated_at).toLocaleDateString()}
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/app/agencies/__tests__/page.test.tsx b/frontend/app/agencies/__tests__/page.test.tsx
new file mode 100644
index 0000000..efdcbc5
--- /dev/null
+++ b/frontend/app/agencies/__tests__/page.test.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import AgenciesPage from "../page";
+import { useAgencies, useDeleteAgency } from "@/hooks/useApi";
+
+jest.mock("@/hooks/useApi");
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+const sample = [
+  {
+    id: "1",
+    name: "Test Agency",
+    email: "a@test.com",
+    phone: "123",
+    address: "",
+    city: "Metropolis",
+    province: "NY",
+    description: null,
+    status: "active",
+    require_pre_payment: false,
+    billing_profiles: null,
+    created_at: "",
+    updated_at: "",
+  },
+];
+
+describe("AgenciesPage integration", () => {
+  beforeEach(() => {
+    (useAgencies as jest.Mock).mockReset();
+    (useDeleteAgency as jest.Mock).mockReturnValue({ mutate: jest.fn() });
+    jest.spyOn(global, "confirm").mockReturnValue(true);
+  });
+
+  it("renders list and allows view action", () => {
+    (useAgencies as jest.Mock).mockReturnValue({
+      data: sample,
+      isLoading: false,
+      error: null,
+    });
+
+    render(<AgenciesPage />);
+
+    expect(screen.getByText("Test Agency")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("action-view-1"));
+    expect(mockPush).toHaveBeenCalledWith("/agencies/1");
+  });
+
+  it("shows empty state when there are no agencies", () => {
+    (useAgencies as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    });
+
+    render(<AgenciesPage />);
+    expect(screen.getByText(/no agencies yet/i)).toBeInTheDocument();
+  });
+
+  it("shows loading skeleton when loading", () => {
+    (useAgencies as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: true,
+      error: null,
+    });
+
+    render(<AgenciesPage />);
+    expect(screen.getByTestId("agencies-list")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/app/agencies/page.tsx b/frontend/app/agencies/page.tsx
index a28d285..6651237 100644
--- a/frontend/app/agencies/page.tsx
+++ b/frontend/app/agencies/page.tsx
@@ -1,10 +1,80 @@
 "use client";
 
 import Link from "next/link";
-import { useAgencies } from "@/hooks/useApi";
+import { useRouter } from "next/navigation";
+import { useAgencies, useDeleteAgency } from "@/hooks/useApi";
+import ResourceList from "@/components/ResourceList";
+import type { Agency, ColumnConfig, RowActionConfig } from "@/types";
+
+const agencyColumns: ColumnConfig<Agency>[] = [
+  {
+    key: "name",
+    label: "Name",
+    type: "text",
+    width: "25%",
+  },
+  {
+    key: "email",
+    label: "Email",
+    type: "email",
+    width: "25%",
+  },
+  {
+    key: "phone",
+    label: "Phone",
+    type: "phone",
+    width: "15%",
+  },
+  {
+    key: "city",
+    label: "City",
+    type: "text",
+    width: "15%",
+    render: (value, row: Agency) => `${row.city}, ${row.province}`,
+  },
+  {
+    key: "status",
+    label: "Status",
+    type: "status",
+    width: "15%",
+  },
+];
 
 export default function AgenciesPage() {
+  const router = useRouter();
   const { data: agencies, isLoading, error } = useAgencies();
+  const { mutate: deleteAgency } = useDeleteAgency();
+
+  const rowActions: RowActionConfig<Agency>[] = [
+    {
+      id: "view",
+      label: "View",
+      className:
+        "text-blue-600 hover:text-blue-800 hover:underline transition",
+      onClick: (agency) => {
+        router.push(`/agencies/${agency.id}`);
+      },
+    },
+    {
+      id: "edit",
+      label: "Edit",
+      className:
+        "text-amber-600 hover:text-amber-800 hover:underline transition",
+      onClick: (agency) => {
+        router.push(`/agencies/${agency.id}/edit`);
+      },
+    },
+    {
+      id: "delete",
+      label: "Delete",
+      className: "text-red-600 hover:text-red-800 hover:underline transition",
+      onClick: (agency) => {
+        if (confirm(`Are you sure you want to delete "${agency.name}"?`)) {
+          deleteAgency(agency.id);
+        }
+      },
+    },
+  ];
 
   return (
     <div className="min-h-screen flex flex-col">
@@ -21,39 +91,15 @@ export default function AgenciesPage() {
       </header>
 
       <main className="flex-1 max-w-6xl mx-auto px-6 py-8 w-full">
-        {isLoading && <p className="text-gray-600">Loading agencies…</p>}
-        {error && (
-          <div className="bg-red-50 border border-red-200 rounded p-4 text-red-800">
-            <p>
-              Failed to load agencies. Is the backend running at{" "}
-              <code className="bg-red-100 px-1 rounded">
-                {process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api"}
-              </code>
-              ?
-            </p>
-          </div>
-        )}
-        {agencies && agencies.length === 0 && (
-          <p className="text-gray-600">
-            No agencies yet. Create one via the API docs.
-          </p>
-        )}
-        {agencies && agencies.length > 0 && (
-          <ul className="space-y-4">
-            {agencies.map((agency) => (
-              <li
-                key={agency.id}
-                className="bg-white rounded-lg shadow p-4 border border-gray-200"
-              >
-                <h2 className="font-semibold text-lg">{agency.name}</h2>
-                <p className="text-gray-600 text-sm">{agency.email}</p>
-                <p className="text-gray-500 text-sm">
-                  {agency.city}, {agency.province}
-                </p>
-              </li>
-            ))}
-          </ul>
-        )}
+        <ResourceList<Agency>
+          columns={agencyColumns}
+          data={agencies || []}
+          loading={isLoading}
+          error={error}
+          rowActions={rowActions}
+          emptyStateMessage="No agencies yet. Create one via the API docs."
+          testId="agencies-list"
+        />
       </main>
     </div>
   );
diff --git a/frontend/components/ResourceList.tsx b/frontend/components/ResourceList.tsx
new file mode 100644
index 0000000..ae9fb6d
--- /dev/null
+++ b/frontend/components/ResourceList.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import React from "react";
+import type { ResourceListProps, CellRendererProps, ResourceListSkeletonProps } from "@/types";
+
+/**
+ * ResourceList Component
+ *
+ * A generic, reusable table component for displaying any resource type.
+ * Supports loading states, empty states, and row actions.
+ *
+ * @example
+ * ```tsx
+ * <ResourceList<Agency>
+ *   columns={agencyColumns}
+ *   data={agencies}
+ *   loading={isLoading}
+ *   rowActions={agencyActions}
+ *   emptyStateMessage="No agencies found"
+ * />
+ * ```
+ */
+export default function ResourceList<T extends { id: string }>({
+  columns,
+  data,
+  loading,
+  error,
+  rowActions,
+  emptyStateMessage = "No items found",
+  testId = "resource-list",
+}: ResourceListProps<T>) {
+  return (
+    <div className="w-full" data-testid={testId}>
+      {/* Error State */}
+      {error && (
+        <div
+          className="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 text-red-800"
+          role="alert"
+        >
+          <p className="font-medium">Error loading data</p>
+          <p className="text-sm mt-1">{error.message}</p>
+        </div>
+      )}
+
+      {/* Loading State */}
+      {loading && <ResourceListSkeleton columns={columns} hasActions={rowActions.length > 0} />}
+
+      {/* Empty State */}
+      {!loading && !error && data.length === 0 && (
+        <div className="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 py-12">
+          <div className="text-center">
+            <svg
+              className="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+              />
+            </svg>
+            <p className="mt-4 text-gray-600">{emptyStateMessage}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      {!loading && !error && data.length > 0 && (
+        <div className="overflow-x-auto rounded-lg border border-gray-200 shadow">
+          <table className="w-full divide-y divide-gray-200">
+            {/* Table Header */}
+            <thead className="bg-gray-50">
+              <tr className="divide-x divide-gray-200">
+                {columns.map((column) => (
+                  <th
+                    key={String(column.key)}
+                    scope="col"
+                    style={{ width: column.width }}
+                    className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700"
+                  >
+                    {column.label}
+                  </th>
+                ))}
+                {rowActions.length > 0 && (
+                  <th
+                    scope="col"
+                    className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700"
+                  >
+                    Actions
+                  </th>
+                )}
+              </tr>
+            </thead>
+
+            {/* Table Body */}
+            <tbody className="divide-y divide-gray-200 bg-white">
+              {data.map((row, rowIndex) => (
+                <tr
+                  key={row.id}
+                  className="divide-x divide-gray-200 hover:bg-gray-50 transition-colors"
+                  data-testid={`resource-row-${rowIndex}`}
+                >
+                  {columns.map((column) => (
+                    <td
+                      key={`${row.id}-${String(column.key)}`}
+                      className="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
+                    >
+                      <CellRenderer
+                        column={column}
+                        row={row}
+                        value={row[column.key]}
+                      />
+                    </td>
+                  ))}
+                  {rowActions.length > 0 && (
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                      <div className="flex gap-2">
+                        {rowActions.map((action) => {
+                          // Check if action should be shown
+                          if (action.show && !action.show(row)) {
+                            return null;
+                          }
+
+                          return (
+                            <button
+                              key={action.id}
+                              onClick={() => action.onClick(row)}
+                              className={
+                                action.className ||
+                                "text-blue-600 hover:text-blue-800 hover:underline transition"
+                              }
+                              title={action.label}
+                              data-testid={`action-${action.id}-${row.id}`}
+                            >
+                              {action.icon && (
+                                <span className="mr-1">{action.icon}</span>
+                              )}
+                              {action.label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * CellRenderer
+ *
+ * Renders cell content with optional custom formatting.
+ * Falls back to default rendering if no custom render function is provided.
+ */
+function CellRenderer<T>({ column, row, value }: CellRendererProps<T>) {
+  if (column.render) {
+    return <>{column.render(value, row)}</>;
+  }
+
+  switch (column.type) {
+    case "email":
+      return (
+        <a
+          href={`mailto:${value}`}
+          className="text-blue-600 hover:underline"
+        >
+          {String(value)}
+        </a>
+      );
+
+    case "phone":
+      return (
+        <a href={`tel:${value}`} className="text-blue-600 hover:underline">
+          {String(value)}
+        </a>
+      );
+
+    case "status":
+      return <StatusBadge status={String(value)} />;
+
+    case "date":
+      return <>{formatDate(value as string)}</>;
+
+    case "text":
+    default:
+      return value != null ? String(value) : "—";
+  }
+}
+
+/**
+ * StatusBadge
+ *
+ * Displays status values with appropriate styling.
+ */
+function StatusBadge({ status }: { status: string }) {
+  const statusStyles: Record<
+    string,
+    { bg: string; text: string; border: string }
+  > = {
+    approved: {
+      bg: "bg-green-50",
+      text: "text-green-700",
+      border: "border-green-200",
+    },
+    active: {
+      bg: "bg-green-50",
+      text: "text-green-700",
+      border: "border-green-200",
+    },
+    pending: {
+      bg: "bg-yellow-50",
+      text: "text-yellow-700",
+      border: "border-yellow-200",
+    },
+    unprocessed: {
+      bg: "bg-yellow-50",
+      text: "text-yellow-700",
+      border: "border-yellow-200",
+    },
+    deactivated: {
+      bg: "bg-red-50",
+      text: "text-red-700",
+      border: "border-red-200",
+    },
+    inactive: {
+      bg: "bg-red-50",
+      text: "text-red-700",
+      border: "border-red-200",
+    },
+  };
+
+  const style = statusStyles[status.toLowerCase()] || {
+    bg: "bg-gray-50",
+    text: "text-gray-700",
+    border: "border-gray-200",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full border ${style.border} ${style.bg} ${style.text} px-3 py-1 text-xs font-medium capitalize`}
+    >
+      {status}
+    </span>
+  );
+}
+
+/**
+ * ResourceListSkeleton
+ *
+ * Loading skeleton that mimics the table structure.
+ */
+function ResourceListSkeleton<T extends { id: string }>({
+  columns,
+  hasActions,
+}: ResourceListSkeletonProps<T>) {
+  const rows = 5;
+
+  return (
+    <div className="overflow-x-auto rounded-lg border border-gray-200 shadow">
+      <table className="w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr className="divide-x divide-gray-200">
+            {columns.map((column) => (
+              <th
+                key={String(column.key)}
+                scope="col"
+                style={{ width: column.width }}
+                className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700"
+              >
+                {column.label}
+              </th>
+            ))}
+            {hasActions && (
+              <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700">
+                Actions
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 bg-white">
+          {Array.from({ length: rows }).map((_, i) => (
+            <tr
+              key={`skeleton-${i}`}
+              className="divide-x divide-gray-200 animate-pulse"
+            >
+              {columns.map((column) => (
+                <td
+                  key={`skeleton-${i}-${String(column.key)}`}
+                  className="px-6 py-4 whitespace-nowrap"
+                >
+                  <div className="h-4 w-24 rounded bg-gray-200" />
+                </td>
+              ))}
+              {hasActions && (
+                <td className="px-6 py-4 whitespace-nowrap">
+                  <div className="flex gap-2">
+                    <div className="h-4 w-12 rounded bg-gray-200" />
+                    <div className="h-4 w-12 rounded bg-gray-200" />
+                  </div>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * formatDate
+ *
+ * Formats ISO date strings to a readable format.
+ */
+function formatDate(dateString: string): string {
+  if (!dateString) return "—";
+
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch {
+    return dateString;
+  }
+}
diff --git a/frontend/components/__tests__/ResourceList.test.tsx b/frontend/components/__tests__/ResourceList.test.tsx
new file mode 100644
index 0000000..c70a304
--- /dev/null
+++ b/frontend/components/__tests__/ResourceList.test.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ResourceList from "../ResourceList";
+import type { ColumnConfig, RowActionConfig } from "@/types";
+
+type Dummy = { id: string; name: string; value?: number; status?: string };
+
+const columns: ColumnConfig<Dummy>[] = [
+  { key: "name", label: "Name" },
+  { key: "value", label: "Value", type: "text" },
+  { key: "status", label: "Status", type: "status" },
+];
+
+const data: Dummy[] = [
+  { id: "1", name: "A", value: 100, status: "active" },
+  { id: "2", name: "B", value: 200, status: "inactive" },
+];
+
+describe("ResourceList", () => {
+  it("renders rows according to data", () => {
+    render(
+      <ResourceList<Dummy>
+        columns={columns}
+        data={data}
+        loading={false}
+        rowActions={[]}
+      />
+    );
+
+    expect(screen.getByText("A")).toBeInTheDocument();
+    expect(screen.getByText("100")).toBeInTheDocument();
+    expect(screen.getByText("active")).toBeInTheDocument();
+  });
+
+  it("shows loading skeleton when loading is true", () => {
+    render(
+      <ResourceList<Dummy>
+        columns={columns}
+        data={[]}
+        loading={true}
+        rowActions={[]}
+      />
+    );
+
+    const skeleton = screen.getByRole("table");
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass("divide-y");
+    expect(screen.queryByText("A")).not.toBeInTheDocument();
+  });
+
+  it("displays empty state message when no data", () => {
+    render(
+      <ResourceList<Dummy>
+        columns={columns}
+        data={[]}
+        loading={false}
+        rowActions={[]}
+        emptyStateMessage="nothing here"
+      />
+    );
+
+    expect(screen.getByText("nothing here")).toBeInTheDocument();
+  });
+
+  it("renders error alert when error prop is provided", () => {
+    render(
+      <ResourceList<Dummy>
+        columns={columns}
+        data={[]}
+        loading={false}
+        error={new Error("oops")}
+        rowActions={[]}
+      />
+    );
+
+    expect(screen.getByRole("alert")).toHaveTextContent("Error loading data");
+  });
+
+  it("calls action callback when button clicked", () => {
+    const onClick = jest.fn();
+    const actions: RowActionConfig<Dummy>[] = [
+      { id: "edit", label: "Edit", onClick },
+    ];
+
+    render(
+      <ResourceList<Dummy>
+        columns={columns}
+        data={data}
+        loading={false}
+        rowActions={actions}
+      />
+    );
+
+    const btn = screen.getByTestId("action-edit-1");
+    fireEvent.click(btn);
+    expect(onClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it("uses custom render function if provided", () => {
+    const customCols: ColumnConfig<Dummy>[] = [
+      {
+        key: "name",
+        label: "Name",
+        render: (value, row) => <span data-testid="custom">{row.name}-foo</span>,
+      },
+    ];
+
+    render(
+      <ResourceList<Dummy>
+        columns={customCols}
+        data={data}
+        loading={false}
+        rowActions={[]}
+      />
+    );
+
+    const elements = screen.getAllByTestId("custom");
+    expect(elements[0]).toHaveTextContent("A-foo");
+    expect(elements[1]).toHaveTextContent("B-foo");
+  });
+});
diff --git a/frontend/hooks/useApi.ts b/frontend/hooks/useApi.ts
index d99fff7..31df977 100644
--- a/frontend/hooks/useApi.ts
+++ b/frontend/hooks/useApi.ts
@@ -97,6 +97,58 @@ export function useFurniture() {
   });
 }
 
+/**
+ * Fetch a single agency by ID
+ */
+export function useAgency(agencyId: string) {
+  return useQuery({
+    queryKey: ["agency", agencyId],
+    queryFn: async () => {
+      const response = await apiClient.get<Agency>(`/agencies/${agencyId}`);
+      return response.data;
+    },
+    staleTime: 1000 * 60 * 5,
+  });
+}
+
+/**
+ * Update an agency by ID
+ *
+ * Automatically invalidates the agency and agencies query cache after success.
+ */
+export function useUpdateAgency(agencyId: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (data: Partial<Agency>) => {
+      const response = await apiClient.put<Agency>(`/agencies/${agencyId}`, data);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agency", agencyId] });
+      queryClient.invalidateQueries({ queryKey: ["agencies"] });
+    },
+  });
+}
+
+/**
+ * Delete an agency by ID
+ *
+ * Automatically invalidates the agencies query cache after success.
+ */
+export function useDeleteAgency() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (agencyId: string) => {
+      await apiClient.delete(`/agencies/${agencyId}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["agencies"] });
+    },
+  });
+}
+
 /**
  * Fetch referrals
  */
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
new file mode 100644
index 0000000..0f04b47
--- /dev/null
+++ b/frontend/jest.config.js
@@ -0,0 +1,18 @@
+/** @type {import("jest").Config} **/
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: "tsconfig.jest.json",
+      },
+    ],
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/$1",
+  },
+  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
+};
\ No newline at end of file
diff --git a/frontend/jest.setup.ts b/frontend/jest.setup.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/frontend/jest.setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7b3c91b..9484244 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "humps": "^2.0.1",
+        "json2csv": "^6.0.0-alpha.2",
         "next": "15.5.12",
         "radix-ui": "^1.0.0",
         "react": "^19.2.4",
@@ -22,8 +23,10 @@
         "zustand": "^4.5.0"
       },
       "devDependencies": {
+        "@testing-library/jest-dom": "^6.0.0",
+        "@testing-library/react": "^16.0.0",
         "@types/humps": "^2.0.6",
-        "@types/jest": "^29.5.0",
+        "@types/jest": "^29.5.14",
         "@types/node": "^20.14.0",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
@@ -35,9 +38,17 @@
         "postcss": "^8.4.0",
         "prettier": "^3.3.0",
         "tailwindcss": "^3.4.0",
-        "typescript": "^5.6.0"
+        "ts-jest": "^29.4.6",
+        "typescript": "^5.9.3"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -81,6 +92,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -511,6 +523,16 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -3400,6 +3422,12 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@streamparser/json": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@streamparser/json/-/json-0.0.6.tgz",
+      "integrity": "sha512-vL9EVn/v+OhZ+Wcs6O4iKE9EUpwHUqHmCtNUMWjqp+6dr85+XPOSGTEsqYNq1Vn04uk9SWlOVmx9J48ggJVT2Q==",
+      "license": "MIT"
+    },
     "node_modules/@supabase/auth-js": {
       "version": "2.95.3",
       "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.95.3.tgz",
@@ -3515,6 +3543,126 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3536,6 +3684,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3683,6 +3838,7 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -3694,6 +3850,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3783,6 +3940,7 @@
       "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.0",
         "@typescript-eslint/types": "8.56.0",
@@ -4297,6 +4455,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4942,6 +5101,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4956,6 +5116,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/bs-logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
+      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-json-stable-stringify": "2.x"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/bser": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
@@ -5309,6 +5482,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5533,6 +5713,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -5594,6 +5784,13 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -5897,6 +6094,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -6066,6 +6264,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6886,6 +7085,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -7121,6 +7342,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -7731,6 +7962,7 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8341,6 +8573,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8452,6 +8685,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json2csv": {
+      "version": "6.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/json2csv/-/json2csv-6.0.0-alpha.2.tgz",
+      "integrity": "sha512-nJ3oP6QxN8z69IT1HmrJdfVxhU1kLTBVgMfRnNZc37YEY+jZ4nU27rBGxT4vaqM/KUCavLRhntmTuBFqZLBUcA==",
+      "license": "MIT",
+      "dependencies": {
+        "@streamparser/json": "^0.0.6",
+        "commander": "^6.2.0",
+        "lodash.get": "^4.4.2"
+      },
+      "bin": {
+        "json2csv": "bin/json2csv.js"
+      },
+      "engines": {
+        "node": ">= 12",
+        "npm": ">= 6.13.0"
+      }
+    },
+    "node_modules/json2csv/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -8579,6 +8839,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "deprecated": "This package is deprecated. Use the optional chaining (?.) operator instead.",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -8609,6 +8883,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -8625,6 +8909,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -8704,6 +8995,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -8786,6 +9087,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/next": {
       "version": "15.5.12",
       "resolved": "https://registry.npmjs.org/next/-/next-15.5.12.tgz",
@@ -9359,6 +9667,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9738,6 +10047,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9747,6 +10057,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9851,6 +10162,20 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -10609,6 +10934,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -10704,6 +11042,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -10854,6 +11193,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10928,6 +11268,72 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "license": "Apache-2.0"
     },
+    "node_modules/ts-jest": {
+      "version": "29.4.6",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.4.6.tgz",
+      "integrity": "sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bs-logger": "^0.2.6",
+        "fast-json-stable-stringify": "^2.1.0",
+        "handlebars": "^4.7.8",
+        "json5": "^2.2.3",
+        "lodash.memoize": "^4.1.2",
+        "make-error": "^1.3.6",
+        "semver": "^7.7.3",
+        "type-fest": "^4.41.0",
+        "yargs-parser": "^21.1.1"
+      },
+      "bin": {
+        "ts-jest": "cli.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/transform": "^29.0.0 || ^30.0.0",
+        "@jest/types": "^29.0.0 || ^30.0.0",
+        "babel-jest": "^29.0.0 || ^30.0.0",
+        "jest": "^29.0.0 || ^30.0.0",
+        "jest-util": "^29.0.0 || ^30.0.0",
+        "typescript": ">=4.3 <6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/transform": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jest-util": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-jest/node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -11090,6 +11496,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11098,6 +11505,20 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -11479,6 +11900,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a65ce87..e2c8aea 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "humps": "^2.0.1",
+    "json2csv": "^6.0.0-alpha.2",
     "next": "15.5.12",
     "radix-ui": "^1.0.0",
     "react": "^19.2.4",
@@ -30,7 +31,7 @@
   },
   "devDependencies": {
     "@types/humps": "^2.0.6",
-    "@types/jest": "^29.5.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.14.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
@@ -42,7 +43,10 @@
     "postcss": "^8.4.0",
     "prettier": "^3.3.0",
     "tailwindcss": "^3.4.0",
-    "typescript": "^5.6.0"
+    "ts-jest": "^29.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "typescript": "^5.9.3"
   },
   "browserslist": {
     "production": [
diff --git a/frontend/tsconfig.jest.json b/frontend/tsconfig.jest.json
new file mode 100644
index 0000000..4fd5045
--- /dev/null
+++ b/frontend/tsconfig.jest.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 1157d6c..8979215 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "types": ["jest", "node"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index ad87425..3a44715 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -6,6 +6,8 @@
  * Auth is handled by Supabase; Admin/Agent link via supabase_user_id.
  */
 
+import type { ReactNode } from "react";
+
 export interface Admin {
   id: string;
   supabase_user_id: string | null;
@@ -175,3 +177,50 @@ export interface Referral {
   created_at: string;
   updated_at: string;
 }
+
+/**
+ * ResourceList Component Types
+ *
+ * Defines interfaces for a reusable list component that can display
+ * any resource (agencies, clients, donors, etc.)
+ */
+
+export type ColumnType = "text" | "email" | "phone" | "status" | "date";
+
+export interface ColumnConfig<T> {
+  key: keyof T;
+  label: string;
+  type?: ColumnType;
+  width?: string;
+  render?: (value: unknown, row: T) => ReactNode;
+}
+
+export interface RowActionConfig<T> {
+  id: string;
+  label: string;
+  icon?: string;
+  className?: string;
+  onClick: (row: T) => void;
+  show?: (row: T) => boolean;
+}
+
+export interface ResourceListProps<T> {
+  columns: ColumnConfig<T>[];
+  data: T[];
+  loading: boolean;
+  error?: Error | null;
+  rowActions: RowActionConfig<T>[];
+  emptyStateMessage?: string;
+  testId?: string;
+}
+
+export interface CellRendererProps<T> {
+  column: ColumnConfig<T>;
+  row: T;
+  value: unknown;
+}
+
+export interface ResourceListSkeletonProps {
+  columns: ColumnConfig<unknown>[];
+  hasActions: boolean;
+}