diff --git a/driver-pwa/frontend/src/pages/HistoryPage.test.tsx b/driver-pwa/frontend/src/pages/HistoryPage.test.tsx
new file mode 100644
index 0000000..f866132
--- /dev/null
+++ b/driver-pwa/frontend/src/pages/HistoryPage.test.tsx
@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("@/api/driver", () => ({
+  getPayments: vi.fn(async () => ({ payments: [
+    { order_id: "o1", bucket: "Долг аренда", amount: 1000, commission: 52, method: "qr", status: "PAID", created_at: "2026-06-18T09:00:00Z", paid_at: "2026-06-18T09:01:00Z" },
+  ] })),
+}));
+import { HistoryPage } from "./HistoryPage";
+
+function wrap() {
+  const qc = new QueryClient();
+  return render(<QueryClientProvider client={qc}><MemoryRouter><HistoryPage /></MemoryRouter></QueryClientProvider>);
+}
+
+describe("HistoryPage", () => {
+  it("lists payments with amount + status", async () => {
+    wrap();
+    expect(await screen.findByText("Долг аренда")).toBeInTheDocument();
+    expect(screen.getByText("1 000 ₽")).toBeInTheDocument();
+    expect(screen.getByText(/Оплачено/i)).toBeInTheDocument();
+  });
+});
diff --git a/driver-pwa/frontend/src/pages/HistoryPage.tsx b/driver-pwa/frontend/src/pages/HistoryPage.tsx
index e963843..39bcf11 100644
--- a/driver-pwa/frontend/src/pages/HistoryPage.tsx
+++ b/driver-pwa/frontend/src/pages/HistoryPage.tsx
@@ -1 +1,39 @@
-export function HistoryPage() { return null; }
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { getPayments } from "@/api/driver";
+import { formatMoney } from "@/lib/format";
+import { Spinner } from "@/components/Spinner";
+
+const STATUS_RU: Record<string, string> = {
+  PAID: "Оплачено", NEW: "Ожидает", FORM: "Ожидает", CONFIRMED: "Оплачено", REJECTED: "Отклонён",
+};
+
+export function HistoryPage() {
+  const nav = useNavigate();
+  const { data, isLoading } = useQuery({ queryKey: ["payments"], queryFn: getPayments });
+  const rows = data?.payments ?? [];
+
+  return (
+    <div className="pt-2">
+      <button className="text-muted text-xs mb-3" onClick={() => nav("/")}>‹ Назад</button>
+      <h1 className="text-lg font-extrabold mb-4">История пополнений</h1>
+      {isLoading ? (
+        <div className="flex justify-center py-10"><Spinner /></div>
+      ) : rows.length === 0 ? (
+        <p className="text-muted text-sm">Пока нет пополнений</p>
+      ) : (
+        rows.map((p) => (
+          <div key={p.order_id} className="flex justify-between items-center py-3 border-b border-line">
+            <div>
+              <p className="text-sm">{p.bucket}</p>
+              <p className="text-muted text-xs">
+                {p.created_at ? new Date(p.created_at).toLocaleDateString("ru-RU") : ""} · {STATUS_RU[p.status] ?? p.status}
+              </p>
+            </div>
+            <b>{formatMoney(p.amount)}</b>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}