diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..19d22ba
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+import { Button } from '../components/Button';
+
+export const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const { login, loading, error } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (await login(email, password)) navigate('/');
+  };
+
+  return (
+    <main style={{ maxWidth: 400, margin: '80px auto', padding: '0 16px' }}>
+      <h1>Sign in</h1>
+      {error && <p style={{ color: 'var(--color-error)' }}>{error}</p>}
+      <form onSubmit={handleSubmit}>
+        <label>Email<input type="email" value={email} onChange={e => setEmail(e.target.value)} required /></label>
+        <label>Password<input type="password" value={password} onChange={e => setPassword(e.target.value)} required /></label>
+        <Button label="Sign in" onClick={() => {}} loading={loading} />
+      </form>
+    </main>
+  );
+};