diff --git a/frontend/app/[locale]/forgot-password/page.tsx b/frontend/app/[locale]/forgot-password/page.tsx
index 38dddfc5..90be6e32 100644
--- a/frontend/app/[locale]/forgot-password/page.tsx
+++ b/frontend/app/[locale]/forgot-password/page.tsx
@@ -1,123 +1,7 @@
 "use client";
-import { Link } from "@/i18n/routing";
-import { useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
 
-export default function ForgotPasswordPage() {
-    const searchParams = useSearchParams();
-    const returnTo = searchParams.get("returnTo");
-
-    const [loading, setLoading] = useState(false);
-    const [email, setEmail] = useState("");
-    const [submitted, setSubmitted] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
-
-        try {
-            const res = await fetch("/api/auth/password-reset", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ email }),
-            });
-
-            if (!res.ok) {
-                setError("Something went wrong. Please try again.");
-                return;
-            }
-
-            setSubmitted(true);
-        } catch (err) {
-            console.error("Password reset request failed:", err);
-            setError("Network error. Please check your connection and try again.");
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    return (
-        <div className="mx-auto max-w-sm py-12">
-            <h1 className="mb-6 text-2xl font-semibold">
-                Forgot password
-            </h1>
+import { ForgotPasswordForm } from "@/components/auth/ForgotPasswordForm";
 
-            {submitted ? (
-                <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
-                    <p>
-                        If an account for{" "}
-                        <strong>{email}</strong> exists, we’ve sent a
-                        password reset link.
-                    </p>
-
-                    <p className="mt-2">
-                        Please check your inbox and follow the
-                        instructions to reset your password.
-                    </p>
-
-                    <Link
-                        href={
-                            returnTo
-                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
-                                : "/login"
-                        }
-                        className="mt-4 inline-block underline"
-                    >
-                        Back to login
-                    </Link>
-                </div>
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <p className="text-sm text-gray-600">
-                        Enter your email address and we’ll send
-                        you a link to reset your password.
-                    </p>
-
-                    <input
-                        type="email"
-                        required
-                        placeholder="Email"
-                        value={email}
-                        onChange={e => setEmail(e.target.value)}
-                        className="w-full rounded border px-3 py-2"
-                    />
-
-                    {error && (
-                        <p className="text-sm text-red-600">
-                            {error}
-                        </p>
-                    )}
-
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading
-                            ? "Sending reset link..."
-                            : "Send reset link"}
-                    </Button>
-                </form>
-            )}
-
-            {!submitted && (
-                <p className="mt-4 text-sm text-gray-600">
-                    Remembered your password?{" "}
-                    <Link
-                        href={
-                            returnTo
-                                ? `/login?returnTo=${encodeURIComponent(returnTo)}`
-                                : "/login"
-                        }
-                        className="underline"
-                    >
-                        Log in
-                    </Link>
-                </p>
-            )}
-        </div>
-    );
+export default function ForgotPasswordPage() {
+    return <ForgotPasswordForm />;
 }
\ No newline at end of file
diff --git a/frontend/app/[locale]/login/page.tsx b/frontend/app/[locale]/login/page.tsx
index 7821c4d7..0f3509c6 100644
--- a/frontend/app/[locale]/login/page.tsx
+++ b/frontend/app/[locale]/login/page.tsx
@@ -1,219 +1,22 @@
 "use client";
 
 import { useLocale } from "next-intl";
-import { Link } from "@/i18n/routing";
-import { useState } from "react";
 import { useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { OAuthButtons } from "@/components/auth/OAuthButtons";
-
-function isSafeRedirectUrl(url: string): boolean {
-  if (!url.startsWith("/")) return false;
-  if (url.startsWith("//")) return false;
-  if (url.includes("://")) return false;
-  return true;
-}
+import { LoginForm } from "@/components/auth/LoginForm";
+import { getSafeRedirect } from "@/lib/auth/safe-redirect";
 
 export default function LoginPage() {
-  const searchParams = useSearchParams();
   const locale = useLocale();
+  const searchParams = useSearchParams();
 
-  const returnToParam = searchParams.get("returnTo");
-  const returnTo = returnToParam ?? "";
-
-  const [loading, setLoading] = useState(false);
-  const [errorMessage, setErrorMessage] =
-    useState<string | null>(null);
-  const [errorCode, setErrorCode] =
-    useState<string | null>(null);
-  const [email, setEmail] = useState("");
-  const [verificationSent, setVerificationSent] =
-    useState(false);
-  const [showPassword, setShowPassword] =
-    useState(false);
-
-  async function onSubmit(
-    e: React.FormEvent<HTMLFormElement>
-  ) {
-    e.preventDefault();
-    setLoading(true);
-    setErrorMessage(null);
-    setErrorCode(null);
-    setVerificationSent(false);
-
-    const formData = new FormData(e.currentTarget);
-    const emailValue = String(formData.get("email") || "");
-    setEmail(emailValue);
-
-    try {
-      const res = await fetch("/api/auth/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          email: emailValue,
-          password: formData.get("password"),
-        }),
-      });
-
-      const data = await res.json().catch(() => null);
-
-      if (!res.ok) {
-        setErrorCode(data?.code ?? null);
-
-        if (data?.code === "EMAIL_NOT_VERIFIED") {
-          setErrorMessage(
-            "Your email address is not verified. Please check your inbox."
-          );
-        } else {
-          setErrorMessage("Invalid email or password");
-        }
-        return;
-      }
-
-      const redirectTarget =
-        returnTo && isSafeRedirectUrl(returnTo)
-          ? returnTo
-          : `/${locale}/dashboard`;
-
-      window.location.href = redirectTarget;
-    } catch (err) {
-      console.error("Login request failed:", err);
-      setErrorMessage(
-        "Network error. Please check your connection and try again."
-      );
-      setErrorCode(null);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function resendVerification() {
-    if (!email) return;
-
-    await fetch("/api/auth/resend-verification", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email }),
-    });
-
-    setVerificationSent(true);
-    setErrorCode(null);
-    setErrorMessage(null);
-  }
+  const returnTo = getSafeRedirect(
+    searchParams.get("returnTo")
+  );
 
   return (
-    <div className="mx-auto max-w-sm py-12">
-      <h1 className="mb-6 text-2xl font-semibold">
-        Log in
-      </h1>
-
-      <OAuthButtons />
-
-      <div className="my-4 flex items-center gap-3">
-        <div className="h-px flex-1 bg-gray-200" />
-        <span className="text-xs text-gray-500">
-          or
-        </span>
-        <div className="h-px flex-1 bg-gray-200" />
-      </div>
-
-      <form onSubmit={onSubmit} className="space-y-4">
-        <input
-          name="email"
-          type="email"
-          placeholder="Email"
-          required
-          className="w-full rounded border px-3 py-2"
-          onChange={e => setEmail(e.target.value)}
-        />
-
-        <div className="relative">
-          <input
-            name="password"
-            type={showPassword ? "text" : "password"}
-            placeholder="Password"
-            required
-            className="w-full rounded border px-3 py-2 pr-10"
-          />
-
-          <button
-            type="button"
-            aria-label={
-              showPassword
-                ? "Hide password"
-                : "Show password"
-            }
-            onClick={() =>
-              setShowPassword(v => !v)
-            }
-            className="absolute inset-y-0 right-2 flex items-center text-sm text-gray-500"
-          >
-            {showPassword ? "Hide" : "Show"}
-          </button>
-        </div>
-
-        <div className="text-right">
-          <Link
-            href={
-              returnTo
-                ? `/forgot-password?returnTo=${encodeURIComponent(
-                  returnTo
-                )}`
-                : "/forgot-password"
-            }
-            className="text-sm underline text-gray-600"
-          >
-            Forgot password?
-          </Link>
-        </div>
-
-        {errorMessage && !verificationSent && (
-          <div className="rounded-md border border-yellow-400 bg-yellow-50 p-3 text-sm text-yellow-800">
-            <p>{errorMessage}</p>
-
-            {errorCode === "EMAIL_NOT_VERIFIED" && (
-              <button
-                type="button"
-                onClick={resendVerification}
-                className="mt-2 underline"
-              >
-                Resend verification email
-              </button>
-            )}
-          </div>
-        )}
-
-        {verificationSent && (
-          <div className="rounded-md border border-green-400 bg-green-50 p-3 text-sm text-green-800">
-            Verification successfully sent to{" "}
-            <strong>{email}</strong>
-          </div>
-        )}
-
-        <Button
-          type="submit"
-          disabled={loading}
-          className="w-full"
-        >
-          {loading ? "Logging in..." : "Log in"}
-        </Button>
-      </form>
-
-      <p className="mt-4 text-sm text-gray-600">
-        Don’t have an account?{" "}
-        <Link
-          href={
-            returnTo
-              ? `/signup?returnTo=${encodeURIComponent(
-                returnTo
-              )}`
-              : "/signup"
-          }
-          className="underline"
-        >
-          Sign up
-        </Link>
-      </p>
-    </div>
+    <LoginForm
+      locale={locale}
+      returnTo={returnTo}
+    />
   );
 }
\ No newline at end of file
diff --git a/frontend/app/[locale]/reset-password/page.tsx b/frontend/app/[locale]/reset-password/page.tsx
index 8cc0006a..a9cfbb79 100644
--- a/frontend/app/[locale]/reset-password/page.tsx
+++ b/frontend/app/[locale]/reset-password/page.tsx
@@ -1,126 +1,11 @@
 "use client";
 
-export const dynamic = "force-dynamic";
-
-
-import { Link } from "@/i18n/routing";
-import { useState } from "react";
 import { useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
+import { ResetPasswordForm } from "@/components/auth/ResetPasswordForm";
 
 export default function ResetPasswordPage() {
     const searchParams = useSearchParams();
-    const token = searchParams.get("token");
-
-    const [loading, setLoading] = useState(false);
-    const [password, setPassword] = useState("");
-    const [confirmed, setConfirmed] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-        setError(null);
-
-        if (!token) {
-            setError("Invalid or missing reset token.");
-            return;
-        }
-
-        setLoading(true);
-
-        try {
-            const res = await fetch(
-                "/api/auth/password-reset/confirm",
-                {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({
-                        token,
-                        password,
-                    }),
-                }
-            );
-
-            if (!res.ok) {
-                setError("Invalid or expired reset link.");
-                return;
-            }
-
-            setConfirmed(true);
-        } catch {
-            setError("Network error, please try again.");
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    if (!token) {
-        return (
-            <div className="mx-auto max-w-sm py-12">
-                <div className="rounded-md border border-red-400 bg-red-50 p-4 text-sm text-red-800">
-                    Invalid or missing reset token.
-                </div>
-
-                <Link
-                    href="/login"
-                    className="mt-4 inline-block underline"
-                >
-                    Back to login
-                </Link>
-            </div>
-        );
-    }
-
-    return (
-        <div className="mx-auto max-w-sm py-12">
-            <h1 className="mb-6 text-2xl font-semibold">
-                Reset password
-            </h1>
-
-            {confirmed ? (
-                <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
-                    <p>Your password has been reset successfully.</p>
-
-                    <Link
-                        href="/login"
-                        className="mt-4 inline-block underline"
-                    >
-                        Go to login
-                    </Link>
-                </div>
-            ) : (
-                <form onSubmit={onSubmit} className="space-y-4">
-                    <p className="text-sm text-gray-600">
-                        Enter a new password for your account.
-                    </p>
-
-                    <input
-                        type="password"
-                        required
-                        minLength={8}
-                        placeholder="New password"
-                        value={password}
-                        onChange={e => setPassword(e.target.value)}
-                        className="w-full rounded border px-3 py-2"
-                    />
-
-                    {error && (
-                        <p className="text-sm text-red-600">
-                            {error}
-                        </p>
-                    )}
+    const token = searchParams.get("token") ?? "";
 
-                    <Button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full"
-                    >
-                        {loading
-                            ? "Resetting password..."
-                            : "Reset password"}
-                    </Button>
-                </form>
-            )}
-        </div>
-    );
+    return <ResetPasswordForm token={token} />;
 }
\ No newline at end of file
diff --git a/frontend/app/[locale]/signup/page.tsx b/frontend/app/[locale]/signup/page.tsx
index adf141e5..e89d9294 100644
--- a/frontend/app/[locale]/signup/page.tsx
+++ b/frontend/app/[locale]/signup/page.tsx
@@ -1,197 +1,22 @@
 "use client";
 
 import { useLocale } from "next-intl";
-import { Link } from "@/i18n/routing";
-import { useState } from "react";
 import { useSearchParams } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { OAuthButtons } from "@/components/auth/OAuthButtons";
-
-/**
- * Prevent open redirect vulnerabilities.
- * Allows only safe relative internal paths.
- */
-function isSafeRedirectUrl(url: string): boolean {
-  if (!url.startsWith("/")) return false;
-  if (url.startsWith("//")) return false;
-  if (url.includes("://")) return false;
-  return true;
-}
+import { SignupForm } from "@/components/auth/SignupForm";
+import { getSafeRedirect } from "@/lib/auth/safe-redirect";
 
 export default function SignupPage() {
   const locale = useLocale();
   const searchParams = useSearchParams();
 
-  const returnToParam = searchParams.get("returnTo");
-  const returnTo = returnToParam ?? "";
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [verificationRequired, setVerificationRequired] =
-    useState(false);
-  const [email, setEmail] = useState("");
-
-  async function onSubmit(
-    e: React.FormEvent<HTMLFormElement>
-  ) {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    const formData = new FormData(e.currentTarget);
-    const emailValue = String(formData.get("email") || "");
-    setEmail(emailValue);
-
-    let res: Response | undefined;
-
-    try {
-      res = await fetch("/api/auth/signup", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: formData.get("name"),
-          email: emailValue,
-          password: formData.get("password"),
-        }),
-      });
-
-      const data = await res.json().catch(() => null);
-
-      if (!res.ok) {
-        setError(
-          data?.error ??
-          "Failed to sign up. Please try again."
-        );
-        return;
-      }
-
-      if (data?.verificationRequired) {
-        setVerificationRequired(true);
-        return;
-      }
-
-      const redirectTarget =
-        returnTo && isSafeRedirectUrl(returnTo)
-          ? returnTo
-          : `/${locale}/dashboard`;
-
-      window.location.href = redirectTarget;
-    } catch {
-      setError(
-        "Network error. Please check your connection and try again."
-      );
-    } finally {
-      setLoading(false);
-    }
-  }
+  const returnTo = getSafeRedirect(
+    searchParams.get("returnTo")
+  );
 
   return (
-    <div className="mx-auto max-w-sm py-12">
-      <h1 className="mb-6 text-2xl font-semibold">
-        Sign up
-      </h1>
-
-      {!verificationRequired && (
-        <>
-          <OAuthButtons />
-
-          <div className="my-4 flex items-center gap-3">
-            <div className="h-px flex-1 bg-gray-200" />
-            <span className="text-xs text-gray-500">
-              or
-            </span>
-            <div className="h-px flex-1 bg-gray-200" />
-          </div>
-        </>
-      )}
-
-      {verificationRequired ? (
-        <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
-          <p>
-            We’ve sent a verification email to{" "}
-            <strong>{email}</strong>.
-          </p>
-
-          <p className="mt-2">
-            Please check your inbox and click the
-            verification link to activate your account.
-          </p>
-
-          <Link
-            href={
-              returnTo
-                ? `/login?returnTo=${encodeURIComponent(
-                  returnTo
-                )}`
-                : "/login"
-            }
-            className="mt-4 inline-block underline"
-          >
-            Go to login
-          </Link>
-        </div>
-      ) : (
-        <form onSubmit={onSubmit} className="space-y-4">
-          <input
-            name="name"
-            type="text"
-            placeholder="Name"
-            required
-            className="w-full rounded border px-3 py-2"
-          />
-
-          <input
-            name="email"
-            type="email"
-            placeholder="Email"
-            required
-            className="w-full rounded border px-3 py-2"
-          />
-
-          <input
-            name="password"
-            type="password"
-            placeholder="Password"
-            required
-            minLength={8}
-            className="w-full rounded border px-3 py-2"
-          />
-
-          {error && (
-            <p className="text-sm text-red-600">
-              {error}
-            </p>
-          )}
-
-          <Button
-            type="submit"
-            disabled={loading}
-            className="w-full"
-          >
-            {loading
-              ? "Signing up..."
-              : "Sign up"}
-          </Button>
-        </form>
-      )}
-
-      {!verificationRequired && (
-        <p className="mt-4 text-sm text-gray-600">
-          Already have an account?{" "}
-          <Link
-            href={
-              returnTo
-                ? `/login?returnTo=${encodeURIComponent(
-                  returnTo
-                )}`
-                : "/login"
-            }
-            className="underline"
-          >
-            Log in
-          </Link>
-        </p>
-      )}
-    </div>
+    <SignupForm
+      locale={locale}
+      returnTo={returnTo}
+    />
   );
 }
\ No newline at end of file
diff --git a/frontend/components/auth/AuthErrorBanner.tsx b/frontend/components/auth/AuthErrorBanner.tsx
new file mode 100644
index 00000000..74e76c37
--- /dev/null
+++ b/frontend/components/auth/AuthErrorBanner.tsx
@@ -0,0 +1,29 @@
+// import type { ReactNode } from "react";
+
+type AuthErrorBannerProps = {
+    message: string;
+    actionLabel?: string;
+    onAction?: () => void;
+};
+
+export function AuthErrorBanner({
+    message,
+    actionLabel,
+    onAction,
+}: AuthErrorBannerProps) {
+    return (
+        <div className="rounded-md border border-yellow-400 bg-yellow-50 p-3 text-sm text-yellow-800">
+            <p>{message}</p>
+
+            {actionLabel && onAction && (
+                <button
+                    type="button"
+                    onClick={onAction}
+                    className="mt-2 underline"
+                >
+                    {actionLabel}
+                </button>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/AuthProvidersBlock.tsx b/frontend/components/auth/AuthProvidersBlock.tsx
new file mode 100644
index 00000000..e54e3f64
--- /dev/null
+++ b/frontend/components/auth/AuthProvidersBlock.tsx
@@ -0,0 +1,17 @@
+import { OAuthButtons } from "@/components/auth/OAuthButtons";
+
+export function AuthProvidersBlock() {
+    return (
+        <>
+            <OAuthButtons />
+
+            <div className="flex items-center gap-3">
+                <div className="h-px flex-1 bg-gray-200" />
+                <span className="text-xs text-gray-500">
+                    or
+                </span>
+                <div className="h-px flex-1 bg-gray-200" />
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/AuthShell.tsx b/frontend/components/auth/AuthShell.tsx
new file mode 100644
index 00000000..1875133f
--- /dev/null
+++ b/frontend/components/auth/AuthShell.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+type AuthShellProps = {
+    title: string;
+    children: ReactNode;
+    footer?: ReactNode;
+};
+
+export function AuthShell({
+    title,
+    children,
+    footer,
+}: AuthShellProps) {
+    return (
+        <div className="mx-auto max-w-sm py-12">
+            <h1 className="mb-6 text-2xl font-semibold">
+                {title}
+            </h1>
+
+            <div className="space-y-6">
+                {children}
+            </div>
+
+            {footer && (
+                <div className="mt-6">
+                    {footer}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/AuthSuccessBanner.tsx b/frontend/components/auth/AuthSuccessBanner.tsx
new file mode 100644
index 00000000..5524ce35
--- /dev/null
+++ b/frontend/components/auth/AuthSuccessBanner.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+
+type AuthSuccessBannerProps = {
+    message: ReactNode;
+    footer?: ReactNode;
+};
+
+export function AuthSuccessBanner({
+    message,
+    footer,
+}: AuthSuccessBannerProps) {
+    return (
+        <div className="rounded-md border border-green-400 bg-green-50 p-4 text-sm text-green-800">
+            <div>{message}</div>
+
+            {footer && (
+                <div className="mt-3">
+                    {footer}
+                </div>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/ForgotPasswordForm.tsx b/frontend/components/auth/ForgotPasswordForm.tsx
new file mode 100644
index 00000000..1bf6206e
--- /dev/null
+++ b/frontend/components/auth/ForgotPasswordForm.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { AuthShell } from "@/components/auth/AuthShell";
+import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
+import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+import { EmailField } from "@/components/auth/fields/EmailField";
+
+export function ForgotPasswordForm() {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [emailSent, setEmailSent] = useState(false);
+    const [email, setEmail] = useState("");
+
+    async function onSubmit(
+        e: React.FormEvent<HTMLFormElement>
+    ) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        const formData = new FormData(e.currentTarget);
+        const emailValue = String(formData.get("email") || "");
+        setEmail(emailValue);
+
+        try {
+            const res = await fetch(
+                "/api/auth/password-reset",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ email: emailValue }),
+                }
+            );
+
+            if (!res.ok) {
+                setError(
+                    "Failed to send reset email. Please try again."
+                );
+                return;
+            }
+
+            setEmailSent(true);
+        } catch {
+            setError(
+                "Network error. Please check your connection."
+            );
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <AuthShell title="Reset password">
+            {emailSent ? (
+                <AuthSuccessBanner
+                    message={
+                        <>
+                            <p>
+                                We’ve sent a password reset link to{" "}
+                                <strong>{email}</strong>.
+                            </p>
+                            <p className="mt-2">
+                                Please check your inbox.
+                            </p>
+                        </>
+                    }
+                />
+            ) : (
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <EmailField onChange={setEmail} />
+
+                    {error && (
+                        <AuthErrorBanner message={error} />
+                    )}
+
+                    <Button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full"
+                    >
+                        {loading
+                            ? "Sending..."
+                            : "Send reset link"}
+                    </Button>
+                </form>
+            )}
+        </AuthShell>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
new file mode 100644
index 00000000..d6946a4f
--- /dev/null
+++ b/frontend/components/auth/LoginForm.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import { useState } from "react";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
+import { AuthShell } from "@/components/auth/AuthShell";
+import { AuthProvidersBlock } from "@/components/auth/AuthProvidersBlock";
+import { EmailField } from "@/components/auth/fields/EmailField";
+import { PasswordField } from "@/components/auth/fields/PasswordField";
+import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
+import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+
+
+type LoginFormProps = {
+    locale: string;
+    returnTo: string;
+};
+
+export function LoginForm({
+    locale,
+    returnTo,
+}: LoginFormProps) {
+    const [loading, setLoading] = useState(false);
+    const [errorMessage, setErrorMessage] =
+        useState<string | null>(null);
+    const [errorCode, setErrorCode] =
+        useState<string | null>(null);
+    const [email, setEmail] = useState("");
+    const [verificationSent, setVerificationSent] =
+        useState(false);
+
+    async function onSubmit(
+        e: React.FormEvent<HTMLFormElement>
+    ) {
+        e.preventDefault();
+        setLoading(true);
+        setErrorMessage(null);
+        setErrorCode(null);
+        setVerificationSent(false);
+
+        const formData = new FormData(e.currentTarget);
+        const emailValue = String(formData.get("email") || "");
+        setEmail(emailValue);
+
+        try {
+            const res = await fetch("/api/auth/login", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    email: emailValue,
+                    password: formData.get("password"),
+                }),
+            });
+
+            const data = await res.json().catch(() => null);
+
+            if (!res.ok) {
+                setErrorCode(data?.code ?? null);
+
+                if (data?.code === "EMAIL_NOT_VERIFIED") {
+                    setErrorMessage(
+                        "Your email address is not verified. Please check your inbox."
+                    );
+                } else {
+                    setErrorMessage("Invalid email or password");
+                }
+                return;
+            }
+
+            window.location.href =
+                returnTo || `/${locale}/dashboard`;
+        } catch (err) {
+            console.error("Login request failed:", err);
+            setErrorMessage(
+                "Network error. Please check your connection and try again."
+            );
+            setErrorCode(null);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    async function resendVerification() {
+        if (!email) return;
+
+        try {
+            const res = await fetch("/api/auth/resend-verification", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ email }),
+            });
+
+            const data = await res.json().catch(() => null);
+
+            if (!res.ok) {
+                setErrorCode(data?.code ?? "RESEND_FAILED");
+                setErrorMessage(
+                    data?.error ??
+                    "Failed to resend verification email. Please try again."
+                );
+                return;
+            }
+
+            setVerificationSent(true);
+            setErrorCode(null);
+            setErrorMessage(null);
+        } catch (err) {
+            console.error("Resend verification failed:", err);
+            setErrorCode("NETWORK_ERROR");
+            setErrorMessage(
+                "Network error. Please check your connection and try again."
+            );
+        }
+    }
+
+    return (
+        <AuthShell
+            title="Log in"
+            footer={
+                <p className="text-sm text-gray-600">
+                    Don’t have an account?{" "}
+                    <Link
+                        href={
+                            returnTo
+                                ? `/signup?returnTo=${encodeURIComponent(
+                                    returnTo
+                                )}`
+                                : "/signup"
+                        }
+                        className="underline"
+                    >
+                        Sign up
+                    </Link>
+                </p>
+            }
+        >
+            <AuthProvidersBlock />
+
+            <form onSubmit={onSubmit} className="space-y-4">
+                <EmailField onChange={setEmail} />
+
+                <PasswordField />
+
+                <div className="text-right">
+                    <Link
+                        href={
+                            returnTo
+                                ? `/forgot-password?returnTo=${encodeURIComponent(
+                                    returnTo
+                                )}`
+                                : "/forgot-password"
+                        }
+                        className="text-sm underline text-gray-600"
+                    >
+                        Forgot password?
+                    </Link>
+                </div>
+
+                {errorMessage && !verificationSent && (
+                    <AuthErrorBanner
+                        message={errorMessage}
+                        actionLabel={
+                            errorCode === "EMAIL_NOT_VERIFIED"
+                                ? "Resend verification email"
+                                : undefined
+                        }
+                        onAction={
+                            errorCode === "EMAIL_NOT_VERIFIED"
+                                ? resendVerification
+                                : undefined
+                        }
+                    />
+                )}
+
+                {verificationSent && (
+                    <AuthSuccessBanner
+                        message={
+                            <>
+                                Verification successfully sent to{" "}
+                                <strong>{email}</strong>
+                            </>
+                        }
+                    />
+                )}
+
+                <Button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full"
+                >
+                    {loading ? "Logging in..." : "Log in"}
+                </Button>
+            </form>
+        </AuthShell>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/ResetPasswordForm.tsx b/frontend/components/auth/ResetPasswordForm.tsx
new file mode 100644
index 00000000..17dcd505
--- /dev/null
+++ b/frontend/components/auth/ResetPasswordForm.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { AuthShell } from "@/components/auth/AuthShell";
+import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
+import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+import { PasswordField } from "@/components/auth/fields/PasswordField";
+
+type ResetPasswordFormProps = {
+    token: string;
+};
+
+export function ResetPasswordForm({
+    token,
+}: ResetPasswordFormProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    async function onSubmit(
+        e: React.FormEvent<HTMLFormElement>
+    ) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        const formData = new FormData(e.currentTarget);
+
+        try {
+            const res = await fetch(
+                "/api/auth/password-reset/confirm",
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        token,
+                        password: formData.get("password"),
+                    }),
+                }
+            );
+
+            if (!res.ok) {
+                setError(
+                    "Failed to reset password. The link may be invalid or expired."
+                );
+                return;
+            }
+
+            setSuccess(true);
+        } catch {
+            setError(
+                "Network error. Please try again."
+            );
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <AuthShell title="Set new password">
+            {success ? (
+                <AuthSuccessBanner
+                    message="Your password has been updated successfully."
+                />
+            ) : (
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <PasswordField minLength={8} />
+
+                    {error && (
+                        <AuthErrorBanner message={error} />
+                    )}
+
+                    <Button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full"
+                    >
+                        {loading
+                            ? "Updating..."
+                            : "Update password"}
+                    </Button>
+                </form>
+            )}
+        </AuthShell>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/SignupForm.tsx b/frontend/components/auth/SignupForm.tsx
new file mode 100644
index 00000000..96dc4d46
--- /dev/null
+++ b/frontend/components/auth/SignupForm.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { useState } from "react";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
+import { AuthShell } from "@/components/auth/AuthShell";
+import { AuthProvidersBlock } from "@/components/auth/AuthProvidersBlock";
+import { EmailField } from "@/components/auth/fields/EmailField";
+import { PasswordField } from "@/components/auth/fields/PasswordField";
+import { NameField } from "@/components/auth/fields/NameField";
+import { AuthErrorBanner } from "@/components/auth/AuthErrorBanner";
+import { AuthSuccessBanner } from "@/components/auth/AuthSuccessBanner";
+
+type SignupFormProps = {
+    locale: string;
+    returnTo: string;
+};
+
+export function SignupForm({
+    locale,
+    returnTo,
+}: SignupFormProps) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] =
+        useState<string | null>(null);
+    const [verificationRequired, setVerificationRequired] =
+        useState(false);
+    const [email, setEmail] = useState("");
+
+    async function onSubmit(
+        e: React.FormEvent<HTMLFormElement>
+    ) {
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+
+        const formData = new FormData(e.currentTarget);
+        const emailValue = String(formData.get("email") || "");
+        setEmail(emailValue);
+
+        try {
+            const res = await fetch("/api/auth/signup", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    name: formData.get("name"),
+                    email: emailValue,
+                    password: formData.get("password"),
+                }),
+            });
+
+            const data = await res.json().catch(() => null);
+
+            if (!res.ok) {
+                setError(
+                    data?.error ??
+                    "Failed to sign up. Please try again."
+                );
+                return;
+            }
+
+            if (data?.verificationRequired) {
+                setVerificationRequired(true);
+                return;
+            }
+
+            window.location.href =
+                returnTo || `/${locale}/dashboard`;
+        } catch {
+            setError(
+                "Network error. Please check your connection and try again."
+            );
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <AuthShell
+            title="Sign up"
+            footer={
+                !verificationRequired && (
+                    <p className="text-sm text-gray-600">
+                        Already have an account?{" "}
+                        <Link
+                            href={
+                                returnTo
+                                    ? `/login?returnTo=${encodeURIComponent(
+                                        returnTo
+                                    )}`
+                                    : "/login"
+                            }
+                            className="underline"
+                        >
+                            Log in
+                        </Link>
+                    </p>
+                )
+            }
+        >
+            {!verificationRequired && (
+                <AuthProvidersBlock />
+            )}
+
+            {verificationRequired ? (
+                <AuthSuccessBanner
+                    message={
+                        <>
+                            <p>
+                                We’ve sent a verification email to{" "}
+                                <strong>{email}</strong>.
+                            </p>
+
+                            <p className="mt-2">
+                                Please check your inbox and click the
+                                verification link to activate your account.
+                            </p>
+                        </>
+                    }
+                    footer={
+                        <Link
+                            href={
+                                returnTo
+                                    ? `/login?returnTo=${encodeURIComponent(
+                                        returnTo
+                                    )}`
+                                    : "/login"
+                            }
+                            className="inline-block underline"
+                        >
+                            Go to login
+                        </Link>
+                    }
+                />
+            ) : (
+                <form onSubmit={onSubmit} className="space-y-4">
+                    <NameField />
+
+                    <EmailField />
+
+                    <PasswordField minLength={8} />
+
+                    {error && (
+                        <AuthErrorBanner message={error} />
+                    )}
+
+                    <Button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full"
+                    >
+                        {loading ? "Signing up..." : "Sign up"}
+                    </Button>
+                </form>
+            )}
+        </AuthShell>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/fields/EmailField.tsx b/frontend/components/auth/fields/EmailField.tsx
new file mode 100644
index 00000000..86fe4ae0
--- /dev/null
+++ b/frontend/components/auth/fields/EmailField.tsx
@@ -0,0 +1,22 @@
+type EmailFieldProps = {
+    onChange?: (value: string) => void;
+};
+
+export function EmailField({
+    onChange,
+}: EmailFieldProps) {
+    return (
+        <input
+            name="email"
+            type="email"
+            placeholder="Email"
+            required
+            className="w-full rounded border px-3 py-2"
+            onChange={
+                onChange
+                    ? e => onChange(e.target.value)
+                    : undefined
+            }
+        />
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/fields/NameField.tsx b/frontend/components/auth/fields/NameField.tsx
new file mode 100644
index 00000000..db84309c
--- /dev/null
+++ b/frontend/components/auth/fields/NameField.tsx
@@ -0,0 +1,19 @@
+type NameFieldProps = {
+    name?: string;
+    placeholder?: string;
+};
+
+export function NameField({
+    name = "name",
+    placeholder = "Name",
+}: NameFieldProps) {
+    return (
+        <input
+            name={name}
+            type="text"
+            placeholder={placeholder}
+            required
+            className="w-full rounded border px-3 py-2"
+        />
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/auth/fields/PasswordField.tsx b/frontend/components/auth/fields/PasswordField.tsx
new file mode 100644
index 00000000..42a5743f
--- /dev/null
+++ b/frontend/components/auth/fields/PasswordField.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+
+type PasswordFieldProps = {
+    name?: string;
+    placeholder?: string;
+    minLength?: number;
+};
+
+export function PasswordField({
+    name = "password",
+    placeholder = "Password",
+    minLength,
+}: PasswordFieldProps) {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="relative">
+            <input
+                name={name}
+                type={visible ? "text" : "password"}
+                placeholder={placeholder}
+                required
+                minLength={minLength}
+                className="w-full rounded border px-3 py-2 pr-10"
+            />
+
+            <button
+                type="button"
+                aria-label={
+                    visible
+                        ? "Hide password"
+                        : "Show password"
+                }
+                onClick={() => setVisible(v => !v)}
+                className="absolute inset-y-0 right-2 flex items-center text-sm text-gray-500"
+            >
+                {visible ? "Hide" : "Show"}
+            </button>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/lib/auth/safe-redirect.ts b/frontend/lib/auth/safe-redirect.ts
new file mode 100644
index 00000000..e23a8b11
--- /dev/null
+++ b/frontend/lib/auth/safe-redirect.ts
@@ -0,0 +1,13 @@
+export function getSafeRedirect(
+    raw: string | null | undefined
+): string {
+    if (!raw) return "";
+
+    if (raw.includes("\\")) return "";
+
+    if (!raw.startsWith("/")) return "";
+    if (raw.startsWith("//")) return "";
+    if (raw.includes("://")) return "";
+
+    return raw;
+}
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3c41f9d1..06157ba8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7512,7 +7512,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
diff --git a/frontend/project-structure.txt b/frontend/project-structure.txt
index df3e5f36..d0972d47 100644
--- a/frontend/project-structure.txt
+++ b/frontend/project-structure.txt
@@ -70,14 +70,15 @@
           📄 OrderStatusAutoRefresh.tsx
           📄 page.tsx
       📁 orders
-        📄 error.tsx
-        📄 page.tsx
         📁 [id]
           📄 page.tsx
+        📄 error.tsx
+        📄 page.tsx
       📄 page.tsx
       📁 products
         📁 [slug]
           📄 page.tsx
+        📄 page.tsx
     📁 signup
       📄 page.tsx
     📁 terms-of-service
@@ -167,6 +168,7 @@
     📄 StatsSection.tsx
   📁 auth
     📄 OAuthButtons.tsx
+    📄 PostAuthQuizSync.tsx
     📄 ProviderButton.tsx
     📁 icons
       📄 GitHubIcon.tsx
@@ -347,11 +349,13 @@
   📄 0001_add_payment_attempts.sql
   📄 0002_clean_martin_li.sql
   📄 0003_add_stripe_events_claim_lock.sql
+  📄 0004_add_api_rate_limits.sql
   📁 meta
     📄 0000_snapshot.json
     📄 0001_snapshot.json
     📄 0002_snapshot.json
     📄 0003_snapshot.json
+    📄 0004_snapshot.json
     📄 _journal.json
 📄 drizzle.config.ts
 📄 eslint.config.mjs
@@ -408,6 +412,7 @@
   📁 security
     📄 admin-csrf.ts
     📄 csrf.ts
+    📄 rate-limit.ts
   📁 services
     📄 errors.ts
     📄 inventory.ts