diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
new file mode 100644
index 0000000..9c4cec4
--- /dev/null
+++ b/frontend/src/routes/Login.tsx
@@ -0,0 +1,43 @@
+import { useState, FormEvent } from 'react'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import TextField from '@mui/material/TextField'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Alert from '@mui/material/Alert'
+import { authApi } from '../api'
+
+export default function Login() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setError('')
+    try {
+      await authApi.login(username, password)
+      window.location.href = '/configs'
+    } catch {
+      setError('Invalid username or password')
+    }
+  }
+
+  return (
+    <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: '#f5f7fa' }}>
+      <Card sx={{ width: 380, boxShadow: 3 }}>
+        <CardContent sx={{ p: 4 }}>
+          <Typography variant="h5" fontWeight={700} gutterBottom>Shorefront</Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>Sign in to manage your Shorewall configs</Typography>
+          {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+          <Box component="form" onSubmit={handleSubmit}>
+            <TextField fullWidth label="Username" value={username} onChange={(e) => setUsername(e.target.value)} sx={{ mb: 2 }} size="small" required />
+            <TextField fullWidth label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} sx={{ mb: 3 }} size="small" required />
+            <Button type="submit" variant="contained" fullWidth>Sign In</Button>
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
+  )
+}