diff --git a/src/pages/Login.test.tsx b/src/pages/Login.test.tsx
new file mode 100644
index 0000000..2307942
--- /dev/null
+++ b/src/pages/Login.test.tsx
@@ -0,0 +1,95 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { MemoryRouter, Routes, Route } from "react-router-dom";
+import { Login } from "./Login";
+
+vi.mock("@/auth/useAuth", () => ({ useAuth: vi.fn() }));
+import { useAuth } from "@/auth/useAuth";
+
+function setup() {
+  const login = vi.fn();
+  (useAuth as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+    user: null,
+    status: "unauthenticated",
+    login,
+    logout: vi.fn(),
+    refresh: vi.fn(),
+  });
+  return { login };
+}
+
+describe("Login page", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    cleanup();
+  });
+
+  it("submits username + password", async () => {
+    const { login } = setup();
+    login.mockResolvedValue(undefined);
+    const { getByLabelText, getByRole } = render(
+      <MemoryRouter initialEntries={["/login"]}>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/" element={<div>HOME</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+    fireEvent.change(getByLabelText(/username/i), {
+      target: { value: "alice" },
+    });
+    fireEvent.change(getByLabelText(/password/i), {
+      target: { value: "hunter2hunter2" },
+    });
+    fireEvent.click(getByRole("button", { name: /sign in/i }));
+    await waitFor(() =>
+      expect(login).toHaveBeenCalledWith("alice", "hunter2hunter2")
+    );
+  });
+
+  it("shows error on failed login", async () => {
+    const { login } = setup();
+    login.mockRejectedValue(
+      Object.assign(new Error("401"), { code: "invalid_credentials" })
+    );
+    const { getByLabelText, getByRole, getByText } = render(
+      <MemoryRouter initialEntries={["/login"]}>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </MemoryRouter>
+    );
+    fireEvent.change(getByLabelText(/username/i), {
+      target: { value: "alice" },
+    });
+    fireEvent.change(getByLabelText(/password/i), {
+      target: { value: "wrong" },
+    });
+    fireEvent.click(getByRole("button", { name: /sign in/i }));
+    await waitFor(() =>
+      expect(getByText(/username or password is incorrect/i)).toBeTruthy()
+    );
+  });
+
+  it("redirects to `next` query param on success", async () => {
+    const { login } = setup();
+    login.mockResolvedValue(undefined);
+    const { getByLabelText, getByRole, getByText } = render(
+      <MemoryRouter initialEntries={["/login?next=/claims"]}>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route path="/claims" element={<div>CLAIMS</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+    fireEvent.change(getByLabelText(/username/i), {
+      target: { value: "alice" },
+    });
+    fireEvent.change(getByLabelText(/password/i), {
+      target: { value: "hunter2hunter2" },
+    });
+    fireEvent.click(getByRole("button", { name: /sign in/i }));
+    await waitFor(() => expect(getByText("CLAIMS")).toBeTruthy());
+  });
+});
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..a40dfde
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,104 @@
+import { useState, type FormEvent } from "react";
+import { useNavigate, useSearchParams, Navigate } from "react-router-dom";
+import { useAuth } from "@/auth/useAuth";
+
+/**
+ * Sign-in screen. Mounted by the `/login` route in `App.tsx`, which
+ * sits outside `<RequireAuth>` so unauthenticated operators can reach
+ * it. The page is also reachable via the auto-redirect on a 401 from
+ * `authedFetch` — that path appends `?next=<current>` so the operator
+ * lands back on the page they were trying to view.
+ *
+ * Error mapping is driven by the backend's `error` code on the
+ * `ApiError` thrown from `authApi.login`. The codes are defined in
+ * `backend/src/cyclone/auth/routes.py::login`.
+ */
+export function Login() {
+  const { user, login } = useAuth();
+  const [params] = useSearchParams();
+  const next = params.get("next") ?? "/";
+  const navigate = useNavigate();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Already authenticated — bounce to the original destination (or
+  // dashboard) so we don't show a sign-in form to a logged-in user.
+  if (user) return <Navigate to={next} replace />;
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await login(username, password);
+      navigate(next, { replace: true });
+    } catch (err) {
+      const code = (err as { code?: string })?.code ?? "error";
+      if (code === "invalid_credentials") {
+        setError("Username or password is incorrect.");
+      } else if (code === "account_disabled") {
+        setError("Account is disabled. Contact your administrator.");
+      } else if (code === "rate_limited") {
+        setError("Too many attempts. Try again shortly.");
+      } else {
+        setError("Sign in failed. Try again.");
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background text-foreground p-6">
+      <form
+        onSubmit={onSubmit}
+        className="w-full max-w-sm p-8 rounded-lg border border-border bg-card shadow-lg"
+      >
+        <h1 className="text-2xl font-semibold mb-1 tracking-tight">Cyclone</h1>
+        <p className="text-sm text-muted-foreground mb-6">
+          Sign in to continue.
+        </p>
+        <label className="block mb-4">
+          <span className="text-sm font-medium">Username</span>
+          <input
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+            autoFocus
+            autoComplete="username"
+            className="mt-1 w-full px-3 py-2 rounded bg-background border border-border text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </label>
+        <label className="block mb-5">
+          <span className="text-sm font-medium">Password</span>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="current-password"
+            className="mt-1 w-full py-2 px-3 rounded bg-background border border-border text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+        </label>
+        {error ? (
+          <div
+            className="mb-4 text-sm text-red-400 bg-red-400/10 border border-red-400/30 rounded px-3 py-2"
+            role="alert"
+          >
+            {error}
+          </div>
+        ) : null}
+        <button
+          type="submit"
+          disabled={submitting}
+          className="w-full py-2 rounded bg-primary text-primary-foreground font-medium disabled:opacity-50 hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {submitting ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+    </div>
+  );
+}