diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index acbc512..b53fecb 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -18,10 +18,25 @@ export default function LoginPage() {
   const base = import.meta.env.VITE_SUPEROAUTH_URL;
   const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
 
-  const [email, setEmail]       = useState('');
-  const [password, setPassword] = useState('');
-  const [loading, setLoading]   = useState(false);
-  const [error, setError]       = useState<string | null>(null);
+  const [email, setEmail]         = useState('');
+  const [password, setPassword]   = useState('');
+  const [loading, setLoading]     = useState(false);
+  const [error, setError]         = useState<string | null>(null);
+  const [oauthLoading, setOauthLoading] = useState<string | null>(null);
+
+  async function handleOAuth(providerId: string) {
+    if (oauthLoading) return;
+    setOauthLoading(providerId);
+    try {
+      const res = await fetch(`${base}/api/v1/oauth/${providerId}?redirectUrl=${redirectUrl}`);
+      const data = await res.json() as { success: boolean; data?: { authUrl?: string } };
+      if (data.data?.authUrl) {
+        window.location.href = data.data.authUrl;
+      }
+    } catch {
+      setOauthLoading(null);
+    }
+  }
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -89,13 +104,14 @@ export default function LoginPage() {
         {/* OAuth providers */}
         <div className="flex flex-col gap-2">
           {PROVIDERS.map(({ id, label }) => (
-            <a
+            <button
               key={id}
-              href={`${base}/api/v1/oauth/${id}?redirectUrl=${redirectUrl}`}
-              className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent"
+              onClick={() => handleOAuth(id)}
+              disabled={oauthLoading === id}
+              className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent disabled:opacity-40"
             >
-              {label}
-            </a>
+              {oauthLoading === id ? '…' : label}
+            </button>
           ))}
         </div>