diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
new file mode 100644
index 00000000..ea35e142
--- /dev/null
+++ b/frontend/src/pages/Login.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { authApi } from '../api/mailApi'
+import { useMailStore } from '../store/mailStore'
+
+export default function Login() {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const setToken = useMailStore(s => s.setToken)
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(''); setLoading(true)
+    try {
+      const data = await authApi.login(username, password)
+      setToken(data.access_token, data.username, data.display_name)
+    } catch (err: any) {
+      setError(err.response?.data?.detail || '로그인에 실패했습니다')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <div className="login-box">
+        <div className="login-logo">
+          <span className="logo-mark">✉</span>
+          <div>
+            <div className="logo-title">지오정보기술</div>
+            <div className="logo-sub">메일 서비스</div>
+          </div>
+        </div>
+        <form onSubmit={submit} className="login-form">
+          <div className="form-group">
+            <label>이메일</label>
+            <input
+              type="email" value={username} onChange={e => setUsername(e.target.value)}
+              placeholder="user@zioinfo.co.kr" required autoFocus
+            />
+          </div>
+          <div className="form-group">
+            <label>비밀번호</label>
+            <input
+              type="password" value={password} onChange={e => setPassword(e.target.value)}
+              placeholder="비밀번호 입력" required
+            />
+          </div>
+          {error && <div className="login-error">{error}</div>}
+          <button type="submit" className="btn-login" disabled={loading}>
+            {loading ? '로그인 중...' : '로그인'}
+          </button>
+        </form>
+        <div className="login-footer">zioinfo.co.kr 메일 계정으로 로그인하세요</div>
+      </div>
+    </div>
+  )
+}