diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index ba5b453..b6382ad 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,3 +1,41 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useNavigate } from "react-router-dom";
+
 export default function LoginPage() {
-  return <div>Login</div>;
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleLogin() {
+    setError(null);
+    setLoading(true);
+    try {
+      await invoke("login", { email });
+      navigate("/workspaces");
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: 400, margin: "100px auto", padding: 24 }}>
+      <h1>Rustification</h1>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && handleLogin()}
+        placeholder="Email address"
+        style={{ display: "block", width: "100%", marginBottom: 12, padding: 8, boxSizing: "border-box" }}
+      />
+      <button onClick={handleLogin} disabled={loading || !email}>
+        {loading ? "Logging in…" : "Login"}
+      </button>
+      {error && <p style={{ color: "red" }}>{error}</p>}
+    </div>
+  );
 }