diff --git a/src/App.tsx b/src/App.tsx
index 5baae9c..00bbecd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import AdoptionTimelinePage from "./pages/AdoptionTimelinePage";
 import ModalPreview from "./pages/ModalPreview";
 import StatusPollingDemo from "./pages/StatusPollingDemo";
 import CustodyTimelinePage from "./pages/CustodyTimelinePage";
+import CustodyListPage from "./pages/CustodyListPage";
 import AdminApprovalQueuePage from "./pages/AdminApprovalQueuePage";
 
 function App() {
@@ -55,6 +56,7 @@ function App() {
         <Route path="/admin/approvals" element={<AdminApprovalQueuePage />} />
 
         {/* Custody Routes */}
+        <Route path="/custody" element={<CustodyListPage />} />
         <Route
           path="/custody/:custodyId/timeline"
           element={<CustodyTimelinePage />}
diff --git a/src/api/custodyService.ts b/src/api/custodyService.ts
index 74ef515..b6f674d 100644
--- a/src/api/custodyService.ts
+++ b/src/api/custodyService.ts
@@ -9,6 +9,16 @@ export interface CustodyTimelineEvent {
 }
 
 export const custodyService = {
+  async getList(params?: { status?: string[] }): Promise<CustodyDetails[]> {
+    const searchParams = new URLSearchParams();
+    if (params?.status?.length) {
+      searchParams.append('status', params.status.join(','));
+    }
+    const query = searchParams.toString();
+    const url = `/custody${query ? `?${query}` : ''}`;
+    return apiClient.get<CustodyDetails[]>(url);
+  },
+
   async getDetails(custodyId: string): Promise<CustodyDetails> {
     return apiClient.get<CustodyDetails>(`/custody/${custodyId}`);
   },
diff --git a/src/components/ui/__tests__/CustodyStatusFilterChips.test.tsx b/src/components/ui/__tests__/CustodyStatusFilterChips.test.tsx
new file mode 100644
index 0000000..ce6b9b3
--- /dev/null
+++ b/src/components/ui/__tests__/CustodyStatusFilterChips.test.tsx
@@ -0,0 +1,225 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import CustodyListPage from "../../../pages/CustodyListPage";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { custodyService } from "../../../api/custodyService";
+
+// Mock the custodyService
+vi.mock("../../../api/custodyService", () => ({
+  custodyService: {
+    getList: vi.fn(),
+  },
+}));
+
+const mockCustodyService = custodyService as {
+  getList: vi.MockedFunction<typeof custodyService.getList>;
+};
+
+// Mock data
+const mockCustodyList = [
+  {
+    id: "1",
+    status: "ACTIVE",
+    petId: "pet-1",
+    custodianId: "user-1",
+    ownerId: "user-2",
+    startDate: "2024-01-01T00:00:00Z",
+    createdAt: "2024-01-01T00:00:00Z",
+    updatedAt: "2024-01-01T00:00:00Z",
+  },
+  {
+    id: "2",
+    status: "EXPIRING_SOON",
+    petId: "pet-2",
+    custodianId: "user-3",
+    ownerId: "user-4",
+    startDate: "2024-01-15T00:00:00Z",
+    endDate: "2024-02-15T00:00:00Z",
+    createdAt: "2024-01-15T00:00:00Z",
+    updatedAt: "2024-01-15T00:00:00Z",
+  },
+];
+
+describe("Custody Status Filter Chips", () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+    vi.clearAllMocks();
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  it("renders all custody status options", () => {
+    mockCustodyService.getList.mockResolvedValue([]);
+
+    render(<CustodyListPage />, { wrapper });
+
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+    expect(screen.getByText("Deposit Pending")).toBeInTheDocument();
+    expect(screen.getByText("Deposit Confirmed")).toBeInTheDocument();
+    expect(screen.getByText("Active")).toBeInTheDocument();
+    expect(screen.getByText("Expiring Soon")).toBeInTheDocument();
+    expect(screen.getByText("Completing")).toBeInTheDocument();
+    expect(screen.getByText("Completed")).toBeInTheDocument();
+    expect(screen.getByText("Disputed")).toBeInTheDocument();
+    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+  });
+
+  it("all chips start unselected", () => {
+    mockCustodyService.getList.mockResolvedValue([]);
+
+    render(<CustodyListPage />, { wrapper });
+
+    expect(screen.getByText("Active")).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByText("Expiring Soon")).toHaveAttribute("aria-pressed", "false");
+    expect(screen.getByText("Completed")).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("selects a chip and triggers API call with status filter", async () => {
+    mockCustodyService.getList
+      .mockResolvedValueOnce([]) // Initial call without filters
+      .mockResolvedValueOnce([mockCustodyList[0]]); // Call with ACTIVE filter
+
+    render(<CustodyListPage />, { wrapper });
+
+    // Click the "Active" chip
+    fireEvent.click(screen.getByText("Active"));
+
+    // Wait for the API call with the filter
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenCalledTimes(2);
+    });
+
+    // Verify the second call includes the status filter
+    expect(mockCustodyService.getList).toHaveBeenLastCalledWith({
+      status: ["ACTIVE"],
+    });
+  });
+
+  it("selects EXPIRING_SOON chip and shows amber highlight", () => {
+    mockCustodyService.getList.mockResolvedValue([]);
+
+    render(<CustodyListPage />, { wrapper });
+
+    const expiringSoonChip = screen.getByText("Expiring Soon");
+    
+    // Initially unselected with amber border
+    expect(expiringSoonChip).toHaveAttribute("aria-pressed", "false");
+    expect(expiringSoonChip).toHaveClass("border-amber-500", "text-amber-600");
+
+    // Click to select
+    fireEvent.click(expiringSoonChip);
+
+    // Should now be selected with amber background
+    expect(expiringSoonChip).toHaveAttribute("aria-pressed", "true");
+    expect(expiringSoonChip).toHaveClass("bg-amber-500", "text-white", "border-amber-600");
+  });
+
+  it("deselects a chip on second click", async () => {
+    mockCustodyService.getList
+      .mockResolvedValueOnce([]) // Initial call
+      .mockResolvedValueOnce([mockCustodyList[0]]) // With ACTIVE filter
+      .mockResolvedValueOnce([]); // Without filter after deselect
+
+    render(<CustodyListPage />, { wrapper });
+
+    const activeChip = screen.getByText("Active");
+
+    // Select the chip
+    fireEvent.click(activeChip);
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenCalledWith({
+        status: ["ACTIVE"],
+      });
+    });
+
+    // Deselect the chip
+    fireEvent.click(activeChip);
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenLastCalledWith(undefined);
+    });
+
+    expect(activeChip).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("can select multiple chips simultaneously", async () => {
+    mockCustodyService.getList
+      .mockResolvedValueOnce([]) // Initial call
+      .mockResolvedValueOnce([mockCustodyList[0]]) // With ACTIVE
+      .mockResolvedValueOnce(mockCustodyList); // With ACTIVE + EXPIRING_SOON
+
+    render(<CustodyListPage />, { wrapper });
+
+    // Select Active
+    fireEvent.click(screen.getByText("Active"));
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenCalledWith({
+        status: ["ACTIVE"],
+      });
+    });
+
+    // Select Expiring Soon
+    fireEvent.click(screen.getByText("Expiring Soon"));
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenLastCalledWith({
+        status: ["ACTIVE", "EXPIRING_SOON"],
+      });
+    });
+
+    expect(screen.getByText("Active")).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByText("Expiring Soon")).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("shows 'Clear all' button when chips are selected", () => {
+    mockCustodyService.getList.mockResolvedValue([]);
+
+    render(<CustodyListPage />, { wrapper });
+
+    expect(screen.queryByText("Clear all")).not.toBeInTheDocument();
+
+    // Select a chip
+    fireEvent.click(screen.getByText("Active"));
+
+    // Should show Clear all button
+    expect(screen.getByText("Clear all")).toBeInTheDocument();
+  });
+
+  it("clears all selections when 'Clear all' is clicked", async () => {
+    mockCustodyService.getList
+      .mockResolvedValueOnce([]) // Initial call
+      .mockResolvedValueOnce([mockCustodyList[0]]) // With filter
+      .mockResolvedValueOnce([]); // After clear
+
+    render(<CustodyListPage />, { wrapper });
+
+    // Select a chip first
+    fireEvent.click(screen.getByText("Active"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Clear all")).toBeInTheDocument();
+    });
+
+    // Click Clear all
+    fireEvent.click(screen.getByText("Clear all"));
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenLastCalledWith(undefined);
+    });
+
+    expect(screen.getByText("Active")).toHaveAttribute("aria-pressed", "false");
+    expect(screen.queryByText("Clear all")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/hooks/__tests__/useCustodyList.test.tsx b/src/hooks/__tests__/useCustodyList.test.tsx
new file mode 100644
index 0000000..680b175
--- /dev/null
+++ b/src/hooks/__tests__/useCustodyList.test.tsx
@@ -0,0 +1,145 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { useCustodyList } from "../useCustodyList";
+import { custodyService } from "../../api/custodyService";
+
+// Mock the custodyService
+vi.mock("../../api/custodyService", () => ({
+  custodyService: {
+    getList: vi.fn(),
+  },
+}));
+
+const mockCustodyService = custodyService as {
+  getList: vi.MockedFunction<typeof custodyService.getList>;
+};
+
+// Mock data
+const mockCustodyList = [
+  {
+    id: "1",
+    status: "ACTIVE",
+    petId: "pet-1",
+    custodianId: "user-1",
+    ownerId: "user-2",
+    startDate: "2024-01-01T00:00:00Z",
+    createdAt: "2024-01-01T00:00:00Z",
+    updatedAt: "2024-01-01T00:00:00Z",
+  },
+  {
+    id: "2",
+    status: "EXPIRING_SOON",
+    petId: "pet-2",
+    custodianId: "user-3",
+    ownerId: "user-4",
+    startDate: "2024-01-15T00:00:00Z",
+    endDate: "2024-02-15T00:00:00Z",
+    createdAt: "2024-01-15T00:00:00Z",
+    updatedAt: "2024-01-15T00:00:00Z",
+  },
+];
+
+describe("useCustodyList", () => {
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+    vi.clearAllMocks();
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  it("should fetch custody list without filters", async () => {
+    mockCustodyService.getList.mockResolvedValue(mockCustodyList);
+
+    const { result } = renderHook(() => useCustodyList(), { wrapper });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(mockCustodyService.getList).toHaveBeenCalledWith(undefined);
+    expect(result.current.data).toEqual(mockCustodyList);
+    expect(result.current.isError).toBe(false);
+  });
+
+  it("should fetch custody list with status filter", async () => {
+    mockCustodyService.getList.mockResolvedValue([mockCustodyList[1]]);
+
+    const { result } = renderHook(() => useCustodyList({ status: ["EXPIRING_SOON"] }), {
+      wrapper,
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(mockCustodyService.getList).toHaveBeenCalledWith({
+      status: ["EXPIRING_SOON"],
+    });
+    expect(result.current.data).toEqual([mockCustodyList[1]]);
+  });
+
+  it("should fetch custody list with multiple status filters", async () => {
+    mockCustodyService.getList.mockResolvedValue(mockCustodyList);
+
+    const { result } = renderHook(
+      () => useCustodyList({ status: ["ACTIVE", "EXPIRING_SOON"] }),
+      { wrapper }
+    );
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(mockCustodyService.getList).toHaveBeenCalledWith({
+      status: ["ACTIVE", "EXPIRING_SOON"],
+    });
+    expect(result.current.data).toEqual(mockCustodyList);
+  });
+
+  it("should handle API errors", async () => {
+    const mockError = new Error("API Error");
+    mockError.status = 500;
+    mockCustodyService.getList.mockRejectedValue(mockError);
+
+    const { result } = renderHook(() => useCustodyList(), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.isError).toBe(true);
+    expect(result.current.error).toEqual(mockError);
+    expect(result.current.data).toBeUndefined();
+  });
+
+  it("should have correct query key", async () => {
+    mockCustodyService.getList.mockResolvedValue(mockCustodyList);
+
+    renderHook(() => useCustodyList({ status: ["ACTIVE"] }), { wrapper });
+
+    await waitFor(() => {
+      expect(mockCustodyService.getList).toHaveBeenCalled();
+    });
+
+    // Verify the query was cached with the correct key
+    const cachedData = queryClient.getQueryData(["custody-list", ["ACTIVE"]]);
+    expect(cachedData).toEqual(mockCustodyList);
+  });
+});
diff --git a/src/hooks/useCustodyList.ts b/src/hooks/useCustodyList.ts
new file mode 100644
index 0000000..495fe99
--- /dev/null
+++ b/src/hooks/useCustodyList.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { custodyService } from "../api/custodyService";
+import { useApiQuery } from "./useApiQuery";
+
+interface UseCustodyListParams {
+  status?: string[];
+}
+
+export function useCustodyList(params?: UseCustodyListParams) {
+  return useApiQuery(
+    ['custody-list', params?.status],
+    () => custodyService.getList(params),
+    {
+      enabled: true,
+    }
+  );
+}
diff --git a/src/pages/CustodyListPage.tsx b/src/pages/CustodyListPage.tsx
new file mode 100644
index 0000000..39cb797
--- /dev/null
+++ b/src/pages/CustodyListPage.tsx
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { StatusFilterChips, type Option } from "../components/ui/StatusFilterChips";
+import { useCustodyList } from "../hooks/useCustodyList";
+import { CustodyStatusBadge } from "../components/custody/CustodyStatusBadge";
+import type { CustodyStatus } from "../types/adoption";
+import { Skeleton } from "../components/ui/Skeleton";
+
+// Define custody status options for filter
+const CUSTODY_STATUS_OPTIONS: Option[] = [
+  { value: "PENDING", label: "Pending" },
+  { value: "DEPOSIT_PENDING", label: "Deposit Pending" },
+  { value: "DEPOSIT_CONFIRMED", label: "Deposit Confirmed" },
+  { value: "ACTIVE", label: "Active" },
+  { value: "EXPIRING_SOON", label: "Expiring Soon" },
+  { value: "COMPLETING", label: "Completing" },
+  { value: "COMPLETED", label: "Completed" },
+  { value: "DISPUTED", label: "Disputed" },
+  { value: "CANCELLED", label: "Cancelled" },
+];
+
+// Special styling for EXPIRING_SOON to show amber highlight
+const getFilterChipClassName = (value: string, isSelected: boolean) => {
+  const baseClasses = "px-3 py-1 rounded-full text-sm transition";
+  
+  if (isSelected) {
+    if (value === "EXPIRING_SOON") {
+      return `${baseClasses} bg-amber-500 text-white border-2 border-amber-600`;
+    }
+    return `${baseClasses} bg-[#E84D2A] text-white`;
+  }
+  
+  if (value === "EXPIRING_SOON") {
+    return `${baseClasses} border-2 border-amber-500 text-amber-600 bg-white hover:bg-amber-50`;
+  }
+  
+  return `${baseClasses} border border-[#E84D2A] text-[#E84D2A] bg-white hover:bg-[#FFF2E5]`;
+};
+
+export default function CustodyListPage() {
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
+
+  const { data: custodyList, isLoading, isError } = useCustodyList({
+    status: selectedStatuses.length > 0 ? selectedStatuses : undefined,
+  });
+
+  const handleStatusChange = (statuses: string[]) => {
+    setSelectedStatuses(statuses);
+  };
+
+  return (
+    <main className="min-h-screen bg-slate-100 px-4 py-10">
+      <div className="mx-auto flex max-w-6xl flex-col gap-8">
+        {/* Page Header */}
+        <section className="rounded-[2rem] bg-slate-900 p-8 text-white shadow-xl">
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-300">
+            Custody
+          </p>
+          <h1 className="mt-2 text-3xl font-semibold">Custody List</h1>
+          <p className="mt-2 text-sm text-slate-400">
+            {custodyList?.length || 0} custody arrangements
+          </p>
+        </section>
+
+        {/* Filters Section */}
+        <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500 mb-4">
+            Filter by Status
+          </p>
+          <CustomStatusFilterChips
+            options={CUSTODY_STATUS_OPTIONS}
+            value={selectedStatuses}
+            onChange={handleStatusChange}
+          />
+        </section>
+
+        {/* Custody List */}
+        <section
+          className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm"
+          data-testid="custody-list-panel"
+        >
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
+            Custody Arrangements
+          </p>
+
+          {isLoading ? (
+            <div className="mt-6 space-y-4" data-testid="custody-list-skeleton">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="border border-slate-200 rounded-2xl p-4">
+                  <Skeleton variant="row" className="rounded-xl mb-2" />
+                  <Skeleton variant="row" className="rounded-xl w-3/4" />
+                </div>
+              ))}
+            </div>
+          ) : isError ? (
+            <div
+              className="mt-6 rounded-2xl border border-red-200 bg-red-50 p-4 text-sm font-medium text-red-900"
+              data-testid="custody-list-error"
+            >
+              Unable to load custody list.
+            </div>
+          ) : !custodyList || custodyList.length === 0 ? (
+            <div
+              className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm font-medium text-slate-700"
+              data-testid="custody-list-empty"
+            >
+              {selectedStatuses.length > 0
+                ? "No custody arrangements found with the selected filters."
+                : "No custody arrangements found."}
+            </div>
+          ) : (
+            <div className="mt-6 space-y-4">
+              {custodyList.map((custody) => (
+                <div
+                  key={custody.id}
+                  className="border border-slate-200 rounded-2xl p-4 hover:border-slate-300 transition-colors"
+                  data-testid={`custody-item-${custody.id}`}
+                >
+                  <div className="flex flex-wrap items-start justify-between gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3 mb-2">
+                        <h3 className="text-lg font-semibold text-slate-900 truncate">
+                          Custody #{custody.id}
+                        </h3>
+                        <CustodyStatusBadge status={custody.status} />
+                      </div>
+                      
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-slate-600">
+                        <div>
+                          <span className="font-medium">Pet ID:</span> {custody.petId}
+                        </div>
+                        <div>
+                          <span className="font-medium">Custodian:</span> {custody.custodianId}
+                        </div>
+                        <div>
+                          <span className="font-medium">Owner:</span> {custody.ownerId}
+                        </div>
+                        <div>
+                          <span className="font-medium">Start Date:</span>{" "}
+                          {new Date(custody.startDate).toLocaleDateString()}
+                        </div>
+                        {custody.endDate && (
+                          <div>
+                            <span className="font-medium">End Date:</span>{" "}
+                            {new Date(custody.endDate).toLocaleDateString()}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-2">
+                      <Link
+                        to={`/custody/${custody.id}/timeline`}
+                        className="px-4 py-2 bg-slate-900 text-white rounded-xl text-sm font-medium hover:bg-slate-800 transition-colors"
+                      >
+                        View Timeline
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </main>
+  );
+}
+
+// Custom StatusFilterChips component with special styling for EXPIRING_SOON
+interface CustomStatusFilterChipsProps {
+  options: Option[];
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}
+
+function CustomStatusFilterChips({
+  options,
+  value = [],
+  onChange,
+}: CustomStatusFilterChipsProps) {
+  const toggle = (val: string) => {
+    if (value.includes(val)) {
+      onChange?.(value.filter((v) => v !== val));
+    } else {
+      onChange?.([...value, val]);
+    }
+  };
+
+  const clearAll = () => onChange?.([]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div
+        role="group"
+        aria-label="Filter by status"
+        className="flex flex-wrap gap-2"
+      >
+        {options.map((opt) => {
+          const isSelected = value.includes(opt.value);
+
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              aria-pressed={isSelected}
+              onClick={() => toggle(opt.value)}
+              className={getFilterChipClassName(opt.value, isSelected)}
+            >
+              {opt.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {value.length > 0 && (
+        <button
+          onClick={clearAll}
+          className="text-sm text-[#E84D2A] underline w-fit"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}