diff --git a/app/[locale]/(auth)/forgot-password/forgot-password-client.tsx b/app/[locale]/(auth)/forgot-password/forgot-password-client.tsx
new file mode 100644
index 0000000..598b0d9
--- /dev/null
+++ b/app/[locale]/(auth)/forgot-password/forgot-password-client.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { useState, type FormEvent } from 'react'
+import { Link } from '@/i18n/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader } from '@/components/ui/card'
+import { sendResetEmail } from './actions'
+
+export default function ForgotPasswordPage() {
+  const t = useTranslations('auth.forgotPassword')
+  const tCommon = useTranslations('common')
+
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (isLoading) return
+
+    setError(null)
+    setSuccess(false)
+    setIsLoading(true)
+
+    const result = await sendResetEmail({ email: email.trim() })
+    if (result?.error) {
+      setError(result.error)
+    } else {
+      setSuccess(true)
+    }
+
+    setIsLoading(false)
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Left: Branding panel */}
+      <div className="bg-brand relative hidden w-1/2 overflow-hidden lg:block">
+        <div className="grid-pattern absolute inset-0" />
+        <div className="gradient-mesh-dark absolute inset-0" />
+        <div className="noise absolute inset-0" />
+        <div className="relative z-10 flex h-full flex-col justify-between p-12">
+          <Link
+            href="/"
+            className="animate-fade-in font-display text-xl font-bold tracking-tight text-white"
+          >
+            {tCommon('brandName')}
+          </Link>
+          <div className="animate-fade-in-up delay-1">
+            <h2 className="font-display tracking-headline text-4xl leading-[0.95] font-bold text-white xl:text-5xl">
+              {t('title')}
+            </h2>
+            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
+              {t('description')}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Right: Form */}
+      <main id="main-content" className="flex flex-1 items-center justify-center px-6 py-12">
+        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
+          <CardHeader className="lg:hidden">
+            <h2 className="font-display text-text-primary text-2xl">{t('title')}</h2>
+            <CardDescription>{t('description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {success ? (
+              <div className="border-success/20 bg-success/5 space-y-4 rounded-md border p-4">
+                <p className="text-success text-sm font-medium">{t('successTitle')}</p>
+                <p className="text-text-secondary text-sm">{t('successDescription', { email })}</p>
+                <Link
+                  href="/login"
+                  className="text-accent inline-flex text-sm font-medium hover:underline"
+                >
+                  {t('backToLogin')}
+                </Link>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="email" required>
+                    {t('email')}
+                  </Label>
+                  <Input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    placeholder="you@example.com"
+                  />
+                </div>
+                {error && (
+                  <p className="text-error text-sm" role="alert" aria-live="polite">
+                    {error}
+                  </p>
+                )}
+                <Button type="submit" className="w-full" isLoading={isLoading}>
+                  {t('submit')}
+                </Button>
+              </form>
+            )}
+          </CardContent>
+          <CardFooter className="justify-center">
+            <Link href="/login" className="text-text-secondary text-sm hover:underline">
+              {t('backToLogin')}
+            </Link>
+          </CardFooter>
+        </Card>
+      </main>
+    </div>
+  )
+}
diff --git a/app/[locale]/(auth)/forgot-password/page.tsx b/app/[locale]/(auth)/forgot-password/page.tsx
index 83a168b..61bc60d 100644
--- a/app/[locale]/(auth)/forgot-password/page.tsx
+++ b/app/[locale]/(auth)/forgot-password/page.tsx
@@ -1,108 +1,24 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-import { Link } from '@/i18n/navigation'
-import { useTranslations } from 'next-intl'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader } from '@/components/ui/card'
-import { sendResetEmail } from './actions'
+import type { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import { generateNoIndexMetadata } from '@/lib/seo/metadata'
+import ForgotPasswordPageClient from './forgot-password-client'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'metadata' })
+
+  return generateNoIndexMetadata({
+    locale,
+    path: '/forgot-password',
+    title: t('forgotPassword.title'),
+    description: t('forgotPassword.description'),
+  })
+}
 
 export default function ForgotPasswordPage() {
-  const t = useTranslations('auth.forgotPassword')
-  const tCommon = useTranslations('common')
-
-  const [email, setEmail] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-
-  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    if (isLoading) return
-
-    setError(null)
-    setSuccess(false)
-    setIsLoading(true)
-
-    const result = await sendResetEmail({ email: email.trim() })
-    if (result?.error) {
-      setError(result.error)
-    } else {
-      setSuccess(true)
-    }
-
-    setIsLoading(false)
-  }
-
-  return (
-    <div className="flex min-h-screen">
-      {/* Left: Branding panel */}
-      <div className="relative hidden w-1/2 overflow-hidden bg-brand lg:block">
-        <div className="absolute inset-0 grid-pattern" />
-        <div className="absolute inset-0 gradient-mesh-dark" />
-        <div className="noise absolute inset-0" />
-        <div className="relative z-10 flex h-full flex-col justify-between p-12">
-          <Link href="/" className="animate-fade-in font-display text-xl font-bold tracking-tight text-white">
-            {tCommon('brandName')}
-          </Link>
-          <div className="animate-fade-in-up delay-1">
-            <h2 className="font-display text-4xl font-bold leading-[0.95] tracking-headline text-white xl:text-5xl">
-              {t('title')}
-            </h2>
-            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
-              {t('description')}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Right: Form */}
-      <div className="flex flex-1 items-center justify-center px-6 py-12">
-        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
-          <CardHeader className="lg:hidden">
-            <h2 className="font-display text-2xl text-text-primary">{t('title')}</h2>
-            <CardDescription>{t('description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {success ? (
-              <div className="space-y-4 rounded-md border border-success/20 bg-success/5 p-4">
-                <p className="text-sm font-medium text-success">{t('successTitle')}</p>
-                <p className="text-sm text-text-secondary">{t('successDescription', { email })}</p>
-                <Link href="/login" className="inline-flex text-sm font-medium text-accent hover:underline">
-                  {t('backToLogin')}
-                </Link>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="email" required>{t('email')}</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    placeholder="you@example.com"
-                  />
-                </div>
-                {error && (
-                  <p className="text-sm text-error" role="alert" aria-live="polite">{error}</p>
-                )}
-                <Button type="submit" className="w-full" isLoading={isLoading}>
-                  {t('submit')}
-                </Button>
-              </form>
-            )}
-          </CardContent>
-          <CardFooter className="justify-center">
-            <Link href="/login" className="text-sm text-text-secondary hover:underline">
-              {t('backToLogin')}
-            </Link>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  )
+  return <ForgotPasswordPageClient />
 }
diff --git a/app/[locale]/(auth)/login/login-client.tsx b/app/[locale]/(auth)/login/login-client.tsx
new file mode 100644
index 0000000..60db618
--- /dev/null
+++ b/app/[locale]/(auth)/login/login-client.tsx
@@ -0,0 +1,241 @@
+'use client'
+
+import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { Link } from '@/i18n/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { AnalyticsEvents, trackEvent } from '@/lib/analytics/events'
+import { signIn, signInWithOAuth } from './actions'
+
+export default function LoginPage() {
+  const t = useTranslations('auth.login')
+  const tAuth = useTranslations('auth')
+  const tCommon = useTranslations('common')
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [oauthLoading, setOauthLoading] = useState<'google' | 'github' | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (isLoading) return
+    setError(null)
+    setIsLoading(true)
+    trackEvent(AnalyticsEvents.LOGIN_START, { method: 'email' })
+
+    const result = await signIn({ email, password })
+    if (result?.error) {
+      setError(result.error)
+      setIsLoading(false)
+    } else {
+      trackEvent(AnalyticsEvents.LOGIN_COMPLETE, { method: 'email' })
+    }
+  }
+
+  async function handleOAuth(provider: 'google' | 'github') {
+    if (oauthLoading) return
+    setError(null)
+    setOauthLoading(provider)
+    trackEvent(AnalyticsEvents.LOGIN_START, { method: provider })
+    const result = await signInWithOAuth(provider)
+    if (result?.error) {
+      setError(result.error)
+      setOauthLoading(null)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Left: Branding panel */}
+      <div className="bg-brand relative hidden w-1/2 overflow-hidden lg:block">
+        <div className="grid-pattern absolute inset-0" />
+        <div className="gradient-mesh-dark absolute inset-0" />
+        <div className="noise absolute inset-0" />
+        <div className="relative z-10 flex h-full flex-col justify-between p-12">
+          <Link
+            href="/"
+            className="animate-fade-in font-display text-xl font-bold tracking-tight text-white"
+          >
+            {tCommon('brandName')}
+          </Link>
+          <div className="animate-fade-in-up delay-1">
+            <h2 className="font-display tracking-headline text-4xl leading-[0.95] font-bold text-white xl:text-5xl">
+              {t('branding.headline')}
+              <br />
+              <span className="text-white/40">{t('branding.headlineSub')}</span>
+            </h2>
+            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
+              {t('branding.description')}
+            </p>
+          </div>
+          <div className="animate-fade-in-up flex gap-10 delay-3">
+            <div>
+              <div className="font-display text-2xl font-bold tracking-tight text-white">12+</div>
+              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">
+                {t('branding.stats.assets')}
+              </div>
+            </div>
+            <div>
+              <div className="font-display text-2xl font-bold tracking-tight text-white">
+                &lt;60s
+              </div>
+              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">
+                {t('branding.stats.speed')}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right: Form */}
+      <main id="main-content" className="flex flex-1 items-center justify-center px-6 py-12">
+        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
+          <CardHeader>
+            <div className="mb-2 lg:hidden">
+              <Link href="/" className="font-display text-text-primary text-lg font-bold">
+                {tCommon('brandName')}
+              </Link>
+            </div>
+            <CardTitle className="font-display text-2xl">{t('title')}</CardTitle>
+            <CardDescription>{t('subtitle')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email" required>
+                  {t('email')}
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder={t('emailPlaceholder')}
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password" required>
+                    {t('password')}
+                  </Label>
+                  <Link
+                    href="/forgot-password"
+                    className="text-text-tertiary hover:text-accent text-xs transition-colors"
+                    tabIndex={-1}
+                  >
+                    {t('forgotPassword')}
+                  </Link>
+                </div>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? 'text' : 'password'}
+                    placeholder={t('passwordPlaceholder')}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="text-text-tertiary hover:text-text-secondary absolute top-1/2 right-3 -translate-y-1/2 transition-colors"
+                    tabIndex={-1}
+                    aria-label={showPassword ? t('hidePassword') : t('showPassword')}
+                  >
+                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+              </div>
+              {error && (
+                <p className="text-error text-sm" role="alert" aria-live="polite">
+                  {error}
+                </p>
+              )}
+              <Button type="submit" className="w-full" isLoading={isLoading}>
+                {t('submit')}
+              </Button>
+            </form>
+
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <span className="border-border w-full border-t" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-surface text-text-tertiary px-2 font-mono">
+                  {tCommon('or')}
+                </span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <Button
+                variant="outline"
+                onClick={() => handleOAuth('google')}
+                isLoading={oauthLoading === 'google'}
+                disabled={!!oauthLoading || isLoading}
+              >
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    fill="currentColor"
+                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.84.81-.62z"
+                  />
+                  <path
+                    fill="currentColor"
+                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  />
+                </svg>
+                {tAuth('oauth.google')}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => handleOAuth('github')}
+                isLoading={oauthLoading === 'github'}
+                disabled={!!oauthLoading || isLoading}
+              >
+                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    fill="currentColor"
+                    d="M12 .297c6.63 0 12 5.373 12 12 0 5.303-3.438 9.8-8.205 11.385-.6.113-.82-.258-.82-.577 0-.285-.01-1.04-.015-2.04 0 0 3.338.726 4.042-1.417 0 0 .546-1.387 1.333-1.756-4.148-.47-8.516-2.074-8.516-9.225 0-1.31.468-2.381 1.236-3.221-.124-.303-.536-1.524.117-3.176 0 0 .985-.315 3.225 1.23a11.2 11.2 0 0 1 2.98-.4c.997 0 1.998.132 2.923.39 2.239-1.545 3.223-1.23 3.223-1.23.653 1.652.241 2.873.118 3.176.77.84 1.235 1.911 1.235 3.221 0 7.164-4.373 8.75-8.532 9.21.548.472 1.037 1.403 1.037 2.825 0 2.04-.02 3.684-.02 4.184 0 .321-.218.695-.826.577C4.42 23.796 1 19.301 1 14C1 7.373 5.373 1 12 5.373z"
+                  />
+                </svg>
+                {tAuth('oauth.github')}
+              </Button>
+            </div>
+          </CardContent>
+          <CardFooter className="justify-center">
+            <p className="text-text-secondary text-sm">
+              {t('noAccount')}
+              <Link href="/signup" className="text-accent ml-1 font-medium hover:underline">
+                {t('signupLink')}
+              </Link>
+            </p>
+          </CardFooter>
+        </Card>
+      </main>
+    </div>
+  )
+}
diff --git a/app/[locale]/(auth)/login/page.tsx b/app/[locale]/(auth)/login/page.tsx
index 05a9033..35b863c 100644
--- a/app/[locale]/(auth)/login/page.tsx
+++ b/app/[locale]/(auth)/login/page.tsx
@@ -1,195 +1,24 @@
-'use client'
-
-import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
-import { Link } from '@/i18n/navigation'
-import { useTranslations } from 'next-intl'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { signIn, signInWithOAuth } from './actions'
+import type { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import { generateNoIndexMetadata } from '@/lib/seo/metadata'
+import LoginPageClient from './login-client'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'metadata' })
+
+  return generateNoIndexMetadata({
+    locale,
+    path: '/login',
+    title: t('login.title'),
+    description: t('login.description'),
+  })
+}
 
 export default function LoginPage() {
-  const t = useTranslations('auth.login')
-  const tAuth = useTranslations('auth')
-  const tCommon = useTranslations('common')
-
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [oauthLoading, setOauthLoading] = useState<'google' | 'github' | null>(null)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    if (isLoading) return
-    setError(null)
-    setIsLoading(true)
-
-    const result = await signIn({ email, password })
-    if (result?.error) {
-      setError(result.error)
-      setIsLoading(false)
-    }
-  }
-
-  async function handleOAuth(provider: 'google' | 'github') {
-    if (oauthLoading) return
-    setError(null)
-    setOauthLoading(provider)
-    const result = await signInWithOAuth(provider)
-    if (result?.error) {
-      setError(result.error)
-      setOauthLoading(null)
-    }
-  }
-
-  return (
-    <div className="flex min-h-screen">
-      {/* Left: Branding panel */}
-      <div className="relative hidden w-1/2 overflow-hidden bg-brand lg:block">
-        <div className="absolute inset-0 grid-pattern" />
-        <div className="absolute inset-0 gradient-mesh-dark" />
-        <div className="noise absolute inset-0" />
-        <div className="relative z-10 flex h-full flex-col justify-between p-12">
-          <Link href="/" className="animate-fade-in font-display text-xl font-bold tracking-tight text-white">
-            {tCommon('brandName')}
-          </Link>
-          <div className="animate-fade-in-up delay-1">
-            <h2 className="font-display text-4xl font-bold leading-[0.95] tracking-headline text-white xl:text-5xl">
-              {t('branding.headline')}
-              <br />
-              <span className="text-white/40">{t('branding.headlineSub')}</span>
-            </h2>
-            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
-              {t('branding.description')}
-            </p>
-          </div>
-          <div className="animate-fade-in-up delay-3 flex gap-10">
-            <div>
-              <div className="font-display text-2xl font-bold text-white tracking-tight">12+</div>
-              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">{t('branding.stats.assets')}</div>
-            </div>
-            <div>
-              <div className="font-display text-2xl font-bold text-white tracking-tight">&lt;60s</div>
-              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">{t('branding.stats.speed')}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Right: Form */}
-      <div className="flex flex-1 items-center justify-center px-6 py-12">
-        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
-          <CardHeader>
-            <div className="mb-2 lg:hidden">
-              <Link href="/" className="font-display text-lg font-bold text-text-primary">{tCommon('brandName')}</Link>
-            </div>
-            <CardTitle className="font-display text-2xl">{t('title')}</CardTitle>
-            <CardDescription>{t('subtitle')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="email" required>{t('email')}</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder={t('emailPlaceholder')}
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="password" required>{t('password')}</Label>
-                  <Link
-                    href="/forgot-password"
-                    className="text-xs text-text-tertiary transition-colors hover:text-accent"
-                    tabIndex={-1}
-                  >
-                    {t('forgotPassword')}
-                  </Link>
-                </div>
-                <div className="relative">
-                  <Input
-                    id="password"
-                    type={showPassword ? 'text' : 'password'}
-                    placeholder={t('passwordPlaceholder')}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    className="pr-10"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary transition-colors hover:text-text-secondary"
-                    tabIndex={-1}
-                    aria-label={showPassword ? t('hidePassword') : t('showPassword')}
-                  >
-                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                  </button>
-                </div>
-              </div>
-              {error && (
-                <p className="text-sm text-error" role="alert" aria-live="polite">{error}</p>
-              )}
-              <Button type="submit" className="w-full" isLoading={isLoading}>
-                {t('submit')}
-              </Button>
-            </form>
-
-            <div className="relative my-6">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t border-border" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-surface px-2 font-mono text-text-tertiary">{tCommon('or')}</span>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <Button
-                variant="outline"
-                onClick={() => handleOAuth('google')}
-                isLoading={oauthLoading === 'google'}
-                disabled={!!oauthLoading || isLoading}
-              >
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                  <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                  <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.84.81-.62z"/>
-                  <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                </svg>
-                {tAuth('oauth.google')}
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => handleOAuth('github')}
-                isLoading={oauthLoading === 'github'}
-                disabled={!!oauthLoading || isLoading}
-              >
-                <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fill="currentColor" d="M12 .297c6.63 0 12 5.373 12 12 0 5.303-3.438 9.8-8.205 11.385-.6.113-.82-.258-.82-.577 0-.285-.01-1.04-.015-2.04 0 0 3.338.726 4.042-1.417 0 0 .546-1.387 1.333-1.756-4.148-.47-8.516-2.074-8.516-9.225 0-1.31.468-2.381 1.236-3.221-.124-.303-.536-1.524.117-3.176 0 0 .985-.315 3.225 1.23a11.2 11.2 0 0 1 2.98-.4c.997 0 1.998.132 2.923.39 2.239-1.545 3.223-1.23 3.223-1.23.653 1.652.241 2.873.118 3.176.77.84 1.235 1.911 1.235 3.221 0 7.164-4.373 8.75-8.532 9.21.548.472 1.037 1.403 1.037 2.825 0 2.04-.02 3.684-.02 4.184 0 .321-.218.695-.826.577C4.42 23.796 1 19.301 1 14C1 7.373 5.373 1 12 5.373z"/>
-                </svg>
-                {tAuth('oauth.github')}
-              </Button>
-            </div>
-          </CardContent>
-          <CardFooter className="justify-center">
-            <p className="text-sm text-text-secondary">
-              {t('noAccount')}
-              <Link href="/signup" className="ml-1 font-medium text-accent hover:underline">
-                {t('signupLink')}
-              </Link>
-            </p>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  )
+  return <LoginPageClient />
 }
diff --git a/app/[locale]/(auth)/signup/page.tsx b/app/[locale]/(auth)/signup/page.tsx
index cc0bab2..6c72604 100644
--- a/app/[locale]/(auth)/signup/page.tsx
+++ b/app/[locale]/(auth)/signup/page.tsx
@@ -1,273 +1,24 @@
-'use client'
-
-import { useState } from 'react'
-import { Eye, EyeOff, Check, X } from 'lucide-react'
-import { Link } from '@/i18n/navigation'
-import { useTranslations } from 'next-intl'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { signUp, signUpWithOAuth } from './actions'
-import { AnalyticsEvents, trackEvent } from '@/lib/analytics/events'
+import type { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import { generateNoIndexMetadata } from '@/lib/seo/metadata'
+import SignupPageClient from './signup-client'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'metadata' })
+
+  return generateNoIndexMetadata({
+    locale,
+    path: '/signup',
+    title: t('signup.title'),
+    description: t('signup.description'),
+  })
+}
 
 export default function SignupPage() {
-  const t = useTranslations('auth.signup')
-  const tAuth = useTranslations('auth')
-  const tCommon = useTranslations('common')
-
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [oauthLoading, setOauthLoading] = useState<'google' | 'github' | null>(null)
-  const [isSuccess, setIsSuccess] = useState(false)
-
-  // Password validation
-  const passwordChecks = {
-    length: password.length >= 6,
-    match: password === confirmPassword && confirmPassword.length > 0,
-  }
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    if (isLoading) return
-    setError(null)
-
-    if (password !== confirmPassword) {
-      setError(t('validation.passwordsDoNotMatch', { defaultValue: tAuth('validation.passwordsDoNotMatch') }))
-      return
-    }
-
-    if (password.length < 6) {
-      setError(t('validation.passwordTooShort', { defaultValue: tAuth('validation.passwordTooShort') }))
-      return
-    }
-
-    setIsLoading(true)
-    trackEvent(AnalyticsEvents.SIGNUP_START, { method: 'email' })
-
-    const result = await signUp({ email, password })
-
-    if (result?.error) {
-      setError(result.error)
-      setIsLoading(false)
-    } else {
-      trackEvent(AnalyticsEvents.SIGNUP_COMPLETE, { method: 'email' })
-      setIsSuccess(true)
-      setIsLoading(false)
-    }
-  }
-
-  async function handleOAuth(provider: 'google' | 'github') {
-    if (oauthLoading) return
-    setError(null)
-    setOauthLoading(provider)
-    trackEvent(AnalyticsEvents.SIGNUP_METHOD_SELECT, { method: provider })
-    trackEvent(AnalyticsEvents.SIGNUP_START, { method: provider })
-    const result = await signUpWithOAuth(provider)
-    if (result?.error) {
-      setError(result.error)
-      setOauthLoading(null)
-    }
-  }
-
-  if (isSuccess) {
-    return (
-      <div className="flex min-h-screen items-center justify-center px-6">
-        <Card className="w-full max-w-md">
-          <CardHeader className="text-center">
-            <CardTitle className="font-display text-2xl">{t('success.title')}</CardTitle>
-            <CardDescription>
-              <span>
-                {t('success.description', { email })}
-              </span>
-              <span className="mt-1 block">
-                {t('success.backToLogin')}
-              </span>
-            </CardDescription>
-          </CardHeader>
-          <CardFooter className="justify-center">
-            <Link href="/login">
-              <Button variant="outline">{t('success.backToLogin')}</Button>
-            </Link>
-          </CardFooter>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex min-h-screen">
-      {/* Left: Branding panel */}
-      <div className="relative hidden w-1/2 overflow-hidden bg-brand lg:block">
-        <div className="absolute inset-0 grid-pattern" />
-        <div className="absolute inset-0 gradient-mesh-dark" />
-        <div className="noise absolute inset-0" />
-        <div className="relative z-10 flex h-full flex-col justify-between p-12">
-          <Link href="/" className="animate-fade-in font-display text-xl font-bold tracking-tight text-white">
-            BrandKit
-          </Link>
-          <div className="animate-fade-in-up delay-1">
-            <h2 className="font-display text-4xl font-bold leading-[0.95] tracking-headline text-white xl:text-5xl">
-              {t('branding.headline')}
-              <br />
-              <span className="text-white/40">{t('branding.headlineSub')}</span>
-            </h2>
-            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
-              {t('branding.description')}
-            </p>
-          </div>
-          <div className="animate-fade-in-up delay-3 flex gap-10">
-            <div>
-              <div className="font-display text-2xl font-bold text-white tracking-tight">12+</div>
-              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">{t('branding.stats.start')}</div>
-            </div>
-            <div>
-              <div className="font-display text-2xl font-bold text-white tracking-tight">3/Month</div>
-              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">{t('branding.stats.perMonth')}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Right: Form */}
-      <div className="flex flex-1 items-center justify-center px-6 py-12">
-        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
-          <CardHeader>
-            <div className="mb-2 lg:hidden">
-              <Link href="/" className="font-display text-lg font-bold text-text-primary">BrandKit</Link>
-            </div>
-            <CardTitle className="font-display text-2xl">{t('title')}</CardTitle>
-            <CardDescription>{t('subtitle')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="email" required>{t('email')}</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder={t('emailPlaceholder')}
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="password" required>{t('password')}</Label>
-                <div className="relative">
-                  <Input
-                    id="password"
-                    type={showPassword ? 'text' : 'password'}
-                    placeholder={t('passwordPlaceholder')}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    minLength={6}
-                    className="pr-10"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary transition-colors hover:text-text-secondary"
-                    tabIndex={-1}
-                    aria-label={showPassword ? t('hidePassword') : t('showPassword')}
-                  >
-                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                  </button>
-                </div>
-                {password.length > 0 && (
-                  <div className="flex items-center gap-2 text-xs">
-                    {passwordChecks.length ? (
-                      <span className="flex items-center gap-1 text-success"><Check className="h-3 w-3" /> {t('passwordChecks.length')}</span>
-                    ) : (
-                      <span className="flex items-center gap-1 text-text-tertiary"><X className="h-3 w-3" /> {t('passwordChecks.length')}</span>
-                    )}
-                  </div>
-                )}
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="confirmPassword" required>{t('confirmPassword')}</Label>
-                <div className="relative">
-                  <Input
-                    id="confirmPassword"
-                    type={showConfirmPassword ? 'text' : 'password'}
-                    placeholder={t('confirmPlaceholder')}
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    required
-                    className="pr-10"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary transition-colors hover:text-text-secondary"
-                    tabIndex={-1}
-                    aria-label={showConfirmPassword ? t('hidePassword') : t('showPassword')}
-                  >
-                    {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                  </button>
-                </div>
-                {confirmPassword.length > 0 && (
-                  <div className="flex items-center gap-2 text-xs">
-                    {passwordChecks.match ? (
-                      <span className="flex items-center gap-1 text-success"><Check className="h-3 w-3" /> {t('passwordChecks.match')}</span>
-                    ) : (
-                      <span className="flex items-center gap-1 text-error"><X className="h-3 w-3" /> {t('passwordChecks.mismatch')}</span>
-                    )}
-                  </div>
-                )}
-              </div>
-              {error && (
-                <p className="text-sm text-error" role="alert" aria-live="polite">{error}</p>
-              )}
-              <Button type="submit" className="w-full" isLoading={isLoading}>
-                {t('submit')}
-              </Button>
-            </form>
-
-            <div className="relative my-6">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t border-border" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-surface px-2 font-mono text-text-tertiary">{tCommon('or')}</span>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-3">
-              <Button
-                variant="outline"
-                onClick={() => handleOAuth('google')}
-                isLoading={oauthLoading === 'google'}
-                disabled={!!oauthLoading || isLoading}
-              >
-                {tAuth('oauth.google')}
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => handleOAuth('github')}
-                isLoading={oauthLoading === 'github'}
-                disabled={!!oauthLoading || isLoading}
-              >
-                {tAuth('oauth.github')}
-              </Button>
-            </div>
-          </CardContent>
-          <CardFooter className="justify-center">
-            <p className="text-sm text-text-secondary">
-              {t('hasAccount')}?
-              <Link href="/login" className="ml-1 font-medium text-accent hover:underline">
-                {t('loginLink')}
-              </Link>
-            </p>
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  )
+  return <SignupPageClient />
 }
diff --git a/app/[locale]/(auth)/signup/signup-client.tsx b/app/[locale]/(auth)/signup/signup-client.tsx
new file mode 100644
index 0000000..50b99a6
--- /dev/null
+++ b/app/[locale]/(auth)/signup/signup-client.tsx
@@ -0,0 +1,315 @@
+'use client'
+
+import { useState } from 'react'
+import { Eye, EyeOff, Check, X } from 'lucide-react'
+import { Link } from '@/i18n/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { signUp, signUpWithOAuth } from './actions'
+import { AnalyticsEvents, trackEvent } from '@/lib/analytics/events'
+
+export default function SignupPage() {
+  const t = useTranslations('auth.signup')
+  const tAuth = useTranslations('auth')
+  const tCommon = useTranslations('common')
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [oauthLoading, setOauthLoading] = useState<'google' | 'github' | null>(null)
+  const [isSuccess, setIsSuccess] = useState(false)
+
+  // Password validation
+  const passwordChecks = {
+    length: password.length >= 6,
+    match: password === confirmPassword && confirmPassword.length > 0,
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (isLoading) return
+    setError(null)
+
+    if (password !== confirmPassword) {
+      setError(
+        t('validation.passwordsDoNotMatch', {
+          defaultValue: tAuth('validation.passwordsDoNotMatch'),
+        })
+      )
+      return
+    }
+
+    if (password.length < 6) {
+      setError(
+        t('validation.passwordTooShort', { defaultValue: tAuth('validation.passwordTooShort') })
+      )
+      return
+    }
+
+    setIsLoading(true)
+    trackEvent(AnalyticsEvents.SIGNUP_START, { method: 'email' })
+
+    const result = await signUp({ email, password })
+
+    if (result?.error) {
+      setError(result.error)
+      setIsLoading(false)
+    } else {
+      trackEvent(AnalyticsEvents.SIGNUP_COMPLETE, { method: 'email' })
+      setIsSuccess(true)
+      setIsLoading(false)
+    }
+  }
+
+  async function handleOAuth(provider: 'google' | 'github') {
+    if (oauthLoading) return
+    setError(null)
+    setOauthLoading(provider)
+    trackEvent(AnalyticsEvents.SIGNUP_METHOD_SELECT, { method: provider })
+    trackEvent(AnalyticsEvents.SIGNUP_START, { method: provider })
+    const result = await signUpWithOAuth(provider)
+    if (result?.error) {
+      setError(result.error)
+      setOauthLoading(null)
+    }
+  }
+
+  if (isSuccess) {
+    return (
+      <div className="flex min-h-screen items-center justify-center px-6">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <CardTitle className="font-display text-2xl">{t('success.title')}</CardTitle>
+            <CardDescription>
+              <span>{t('success.description', { email })}</span>
+              <span className="mt-1 block">{t('success.backToLogin')}</span>
+            </CardDescription>
+          </CardHeader>
+          <CardFooter className="justify-center">
+            <Link href="/login">
+              <Button variant="outline">{t('success.backToLogin')}</Button>
+            </Link>
+          </CardFooter>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      {/* Left: Branding panel */}
+      <div className="bg-brand relative hidden w-1/2 overflow-hidden lg:block">
+        <div className="grid-pattern absolute inset-0" />
+        <div className="gradient-mesh-dark absolute inset-0" />
+        <div className="noise absolute inset-0" />
+        <div className="relative z-10 flex h-full flex-col justify-between p-12">
+          <Link
+            href="/"
+            className="animate-fade-in font-display text-xl font-bold tracking-tight text-white"
+          >
+            BrandKit
+          </Link>
+          <div className="animate-fade-in-up delay-1">
+            <h2 className="font-display tracking-headline text-4xl leading-[0.95] font-bold text-white xl:text-5xl">
+              {t('branding.headline')}
+              <br />
+              <span className="text-white/40">{t('branding.headlineSub')}</span>
+            </h2>
+            <p className="mt-6 max-w-sm text-sm leading-relaxed text-white/50">
+              {t('branding.description')}
+            </p>
+          </div>
+          <div className="animate-fade-in-up flex gap-10 delay-3">
+            <div>
+              <div className="font-display text-2xl font-bold tracking-tight text-white">12+</div>
+              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">
+                {t('branding.stats.start')}
+              </div>
+            </div>
+            <div>
+              <div className="font-display text-2xl font-bold tracking-tight text-white">
+                3/Month
+              </div>
+              <div className="mt-1 font-mono text-[10px] tracking-[0.2em] text-white/30 uppercase">
+                {t('branding.stats.perMonth')}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right: Form */}
+      <main id="main-content" className="flex flex-1 items-center justify-center px-6 py-12">
+        <Card className="w-full max-w-md border-0 shadow-none lg:border lg:shadow-sm">
+          <CardHeader>
+            <div className="mb-2 lg:hidden">
+              <Link href="/" className="font-display text-text-primary text-lg font-bold">
+                BrandKit
+              </Link>
+            </div>
+            <CardTitle className="font-display text-2xl">{t('title')}</CardTitle>
+            <CardDescription>{t('subtitle')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email" required>
+                  {t('email')}
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder={t('emailPlaceholder')}
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password" required>
+                  {t('password')}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id="password"
+                    type={showPassword ? 'text' : 'password'}
+                    placeholder={t('passwordPlaceholder')}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    minLength={6}
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="text-text-tertiary hover:text-text-secondary absolute top-1/2 right-3 -translate-y-1/2 transition-colors"
+                    tabIndex={-1}
+                    aria-label={showPassword ? t('hidePassword') : t('showPassword')}
+                  >
+                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                {password.length > 0 && (
+                  <div className="flex items-center gap-2 text-xs">
+                    {passwordChecks.length ? (
+                      <span className="text-success flex items-center gap-1">
+                        <Check className="h-3 w-3" /> {t('passwordChecks.length')}
+                      </span>
+                    ) : (
+                      <span className="text-text-tertiary flex items-center gap-1">
+                        <X className="h-3 w-3" /> {t('passwordChecks.length')}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword" required>
+                  {t('confirmPassword')}
+                </Label>
+                <div className="relative">
+                  <Input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    placeholder={t('confirmPlaceholder')}
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    required
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="text-text-tertiary hover:text-text-secondary absolute top-1/2 right-3 -translate-y-1/2 transition-colors"
+                    tabIndex={-1}
+                    aria-label={showConfirmPassword ? t('hidePassword') : t('showPassword')}
+                  >
+                    {showConfirmPassword ? (
+                      <EyeOff className="h-4 w-4" />
+                    ) : (
+                      <Eye className="h-4 w-4" />
+                    )}
+                  </button>
+                </div>
+                {confirmPassword.length > 0 && (
+                  <div className="flex items-center gap-2 text-xs">
+                    {passwordChecks.match ? (
+                      <span className="text-success flex items-center gap-1">
+                        <Check className="h-3 w-3" /> {t('passwordChecks.match')}
+                      </span>
+                    ) : (
+                      <span className="text-error flex items-center gap-1">
+                        <X className="h-3 w-3" /> {t('passwordChecks.mismatch')}
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+              {error && (
+                <p className="text-error text-sm" role="alert" aria-live="polite">
+                  {error}
+                </p>
+              )}
+              <Button type="submit" className="w-full" isLoading={isLoading}>
+                {t('submit')}
+              </Button>
+            </form>
+
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <span className="border-border w-full border-t" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-surface text-text-tertiary px-2 font-mono">
+                  {tCommon('or')}
+                </span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <Button
+                variant="outline"
+                onClick={() => handleOAuth('google')}
+                isLoading={oauthLoading === 'google'}
+                disabled={!!oauthLoading || isLoading}
+              >
+                {tAuth('oauth.google')}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => handleOAuth('github')}
+                isLoading={oauthLoading === 'github'}
+                disabled={!!oauthLoading || isLoading}
+              >
+                {tAuth('oauth.github')}
+              </Button>
+            </div>
+          </CardContent>
+          <CardFooter className="justify-center">
+            <p className="text-text-secondary text-sm">
+              {t('hasAccount')}?
+              <Link href="/login" className="text-accent ml-1 font-medium hover:underline">
+                {t('loginLink')}
+              </Link>
+            </p>
+          </CardFooter>
+        </Card>
+      </main>
+    </div>
+  )
+}
diff --git a/app/[locale]/demo/page.tsx b/app/[locale]/demo/page.tsx
index 201b2c8..22a1505 100644
--- a/app/[locale]/demo/page.tsx
+++ b/app/[locale]/demo/page.tsx
@@ -1,23 +1,42 @@
-import { setRequestLocale, getTranslations } from 'next-intl/server'
+import type { Metadata } from 'next'
+import { getTranslations, setRequestLocale } from 'next-intl/server'
+import { JsonLd } from '@/components/seo/json-ld'
+import { generateIndexablePageMetadata } from '@/lib/seo/metadata'
+import { generateBreadcrumbSchema } from '@/lib/seo/json-ld'
 import { DemoClient } from './client'
 
-export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}): Promise<Metadata> {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'demo' })
 
-  return {
+  return generateIndexablePageMetadata({
+    locale,
     title: t('meta.title'),
     description: t('meta.description'),
-  }
+    path: '/demo',
+  })
 }
 
-export default async function DemoPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function DemoPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   setRequestLocale(locale)
 
-  return <DemoClient />
+  return (
+    <>
+      <JsonLd
+        data={generateBreadcrumbSchema(
+          [
+            { name: 'BrandKit', url: '' },
+            { name: locale === 'ko' ? '데모' : 'Demo', url: '/demo' },
+          ],
+          locale
+        )}
+      />
+      <DemoClient />
+    </>
+  )
 }
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index f09be7a..10bb6bb 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -9,6 +9,7 @@ import { routing } from '@/i18n/routing'
 import { JsonLd } from '@/components/seo/json-ld'
 import { GoogleAnalytics } from '@/components/analytics/google-analytics'
 import { generateOrganizationSchema, generateWebSiteSchema } from '@/lib/seo/json-ld'
+import { getSiteUrl } from '@/lib/seo/site-url'
 import '../globals.css'
 
 const jetbrainsMono = JetBrains_Mono({
@@ -38,7 +39,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'metadata' })
-  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || (process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://brandkit.app')
+  const baseUrl = getSiteUrl()
 
   return {
     metadataBase: new URL(baseUrl),
@@ -52,52 +53,12 @@ export async function generateMetadata({
     creator: 'BrandKit',
     publisher: 'BrandKit',
     applicationName: 'BrandKit',
-    robots: {
-      index: true,
-      follow: true,
-      googleBot: {
-        index: true,
-        follow: true,
-        'max-video-preview': -1,
-        'max-image-preview': 'large',
-        'max-snippet': -1,
-      },
-    },
     verification: {
       google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION,
       other: {
         'naver-site-verification': process.env.NEXT_PUBLIC_NAVER_SITE_VERIFICATION || '',
       },
     },
-    openGraph: {
-      type: 'website',
-      locale: locale === 'ko' ? 'ko_KR' : 'en_US',
-      url: `${baseUrl}/${locale}`,
-      siteName: 'BrandKit',
-      title: t('title.default'),
-      description: t('description'),
-      images: [
-        {
-          url: `/api/og?locale=${locale}`,
-          width: 1200,
-          height: 630,
-          alt: t('title.default'),
-        },
-      ],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: t('title.default'),
-      description: t('description'),
-      images: [`/api/og?locale=${locale}`],
-    },
-    alternates: {
-      canonical: `${baseUrl}/${locale}`,
-      languages: {
-        en: `${baseUrl}/en`,
-        ko: `${baseUrl}/ko`,
-      },
-    },
   }
 }
 
@@ -123,34 +84,19 @@ export default async function LocaleLayout({
         {/* PWA Manifest */}
         <link rel="manifest" href="/manifest.json" />
         <link rel="apple-touch-icon" href="/icons/icon-192.png" />
-        {/* DNS Prefetch for external resources */}
-        <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
-        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossOrigin="anonymous" />
-        {/* Pretendard Variable Font - 한국어/영어 최적화 */}
-        <link
-          rel="preload"
-          as="style"
-          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
-        />
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
-        />
       </head>
       <body className={`${jetbrainsMono.variable} antialiased`}>
         {/* Skip Link for Accessibility */}
         <a
           href="#main-content"
-          className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-accent focus:px-4 focus:py-2 focus:text-white focus:shadow-lg focus:outline-none"
+          className="focus:bg-accent sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-lg focus:px-4 focus:py-2 focus:text-white focus:shadow-lg focus:outline-none"
         >
           {locale === 'ko' ? '본문으로 건너뛰기' : 'Skip to main content'}
         </a>
         <GoogleAnalytics />
         <JsonLd data={generateOrganizationSchema()} />
         <JsonLd data={generateWebSiteSchema(locale)} />
-        <NextIntlClientProvider messages={messages}>
-          {children}
-        </NextIntlClientProvider>
+        <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
         <Toaster position="bottom-right" richColors closeButton />
       </body>
     </html>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 92d368e..4cc0088 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,4 +1,5 @@
-import { setRequestLocale } from 'next-intl/server'
+import type { Metadata } from 'next'
+import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { Hero } from '@/components/landing/hero'
 import { Features } from '@/components/landing/features'
 import { HowItWorks } from '@/components/landing/how-it-works'
@@ -8,18 +9,40 @@ import { FAQ } from '@/components/landing/faq'
 import { CTA } from '@/components/landing/cta'
 import { Footer } from '@/components/landing/footer'
 import { JsonLd } from '@/components/seo/json-ld'
-import { generateSoftwareApplicationSchema } from '@/lib/seo/json-ld'
+import {
+  generateBreadcrumbSchema,
+  generateFaqPageSchema,
+  generateSoftwareApplicationSchema,
+} from '@/lib/seo/json-ld'
+import { getLandingFaqItems } from '@/lib/seo/faq'
+import { generateIndexablePageMetadata } from '@/lib/seo/metadata'
 
-export default async function Home({
+export async function generateMetadata({
   params,
 }: {
   params: Promise<{ locale: string }>
-}) {
+}): Promise<Metadata> {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'metadata' })
+
+  return generateIndexablePageMetadata({
+    locale,
+    title: t('title.default'),
+    description: t('description'),
+  })
+}
+
+export default async function Home({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   setRequestLocale(locale)
+  const t = await getTranslations({ locale, namespace: 'landing' })
+  const faqItems = getLandingFaqItems(t)
+
   return (
-    <main>
+    <main id="main-content">
+      <JsonLd data={generateBreadcrumbSchema([{ name: 'BrandKit', url: '' }], locale)} />
       <JsonLd data={generateSoftwareApplicationSchema(locale)} />
+      <JsonLd data={generateFaqPageSchema(locale, faqItems)} />
       <Hero />
       <Features />
       <HowItWorks />
diff --git a/app/[locale]/privacy/page.tsx b/app/[locale]/privacy/page.tsx
index 8a85199..8fa35a1 100644
--- a/app/[locale]/privacy/page.tsx
+++ b/app/[locale]/privacy/page.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from 'next'
 import { getTranslations } from 'next-intl/server'
-import { Link } from '@/i18n/navigation'
-import { ArrowLeft } from 'lucide-react'
+import { LegalDocumentPage } from '@/components/legal/legal-document'
+import { getLegalDocument } from '@/lib/legal/documents'
+import { generateIndexablePageMetadata } from '@/lib/seo/metadata'
 
 export async function generateMetadata({
   params,
@@ -11,87 +12,16 @@ export async function generateMetadata({
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'metadata' })
 
-  return {
+  return generateIndexablePageMetadata({
     title: t('privacy.title'),
     description: t('privacy.description'),
-    robots: {
-      index: false,
-      follow: false,
-    },
-  }
+    locale,
+    path: '/privacy',
+  })
 }
 
-export default function PrivacyPage() {
-  return (
-    <div className="min-h-screen bg-surface px-6 py-16 lg:px-8 lg:py-24">
-      <div className="mx-auto max-w-3xl">
-        <Link
-          href="/"
-          className="group mb-8 inline-flex items-center text-sm text-text-secondary transition-colors hover:text-accent"
-        >
-          <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-          홈으로 돌아가기
-        </Link>
-
-        <h1 className="font-display text-3xl font-bold tracking-tight text-text-primary sm:text-4xl">
-          개인정보처리방침
-        </h1>
-        <p className="mt-4 text-text-secondary">최종 수정일: 2024년 1월 1일</p>
-
-        <div className="mt-12 space-y-8 text-text-secondary">
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">1. 수집하는 개인정보</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit은 서비스 제공을 위해 다음과 같은 개인정보를 수집합니다:
-            </p>
-            <ul className="mt-3 list-disc space-y-2 pl-6">
-              <li>이메일 주소 (계정 생성 및 로그인)</li>
-              <li>결제 정보 (유료 구독 시)</li>
-              <li>서비스 이용 기록 (프로젝트 생성, 에셋 생성 등)</li>
-            </ul>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">2. 개인정보의 이용 목적</h2>
-            <p className="mt-3 leading-relaxed">
-              수집된 개인정보는 다음의 목적으로 이용됩니다:
-            </p>
-            <ul className="mt-3 list-disc space-y-2 pl-6">
-              <li>서비스 제공 및 계정 관리</li>
-              <li>결제 처리 및 구독 관리</li>
-              <li>서비스 개선 및 신규 기능 개발</li>
-              <li>고객 지원 및 문의 응대</li>
-            </ul>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">3. 개인정보의 보관 및 파기</h2>
-            <p className="mt-3 leading-relaxed">
-              개인정보는 서비스 이용 기간 동안 보관되며, 계정 삭제 요청 시 30일 이내에 파기됩니다.
-              단, 관련 법령에 따라 일정 기간 보관이 필요한 경우 해당 기간 동안 보관됩니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">4. 개인정보의 제3자 제공</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit은 원칙적으로 이용자의 개인정보를 제3자에게 제공하지 않습니다.
-              다만, 다음의 경우에는 예외로 합니다:
-            </p>
-            <ul className="mt-3 list-disc space-y-2 pl-6">
-              <li>이용자가 사전에 동의한 경우</li>
-              <li>법령의 규정에 의거하거나, 수사 목적으로 법령에 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우</li>
-            </ul>
-          </section>
+export default async function PrivacyPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
 
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">5. 문의</h2>
-            <p className="mt-3 leading-relaxed">
-              개인정보 처리에 관한 문의사항은 support@brandkit.app으로 연락해 주세요.
-            </p>
-          </section>
-        </div>
-      </div>
-    </div>
-  )
+  return <LegalDocumentPage document={getLegalDocument(locale, 'privacy')} />
 }
diff --git a/app/[locale]/terms/page.tsx b/app/[locale]/terms/page.tsx
index 98d3b01..f6dd43d 100644
--- a/app/[locale]/terms/page.tsx
+++ b/app/[locale]/terms/page.tsx
@@ -1,7 +1,8 @@
 import type { Metadata } from 'next'
 import { getTranslations } from 'next-intl/server'
-import { Link } from '@/i18n/navigation'
-import { ArrowLeft } from 'lucide-react'
+import { LegalDocumentPage } from '@/components/legal/legal-document'
+import { getLegalDocument } from '@/lib/legal/documents'
+import { generateIndexablePageMetadata } from '@/lib/seo/metadata'
 
 export async function generateMetadata({
   params,
@@ -11,106 +12,16 @@ export async function generateMetadata({
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'metadata' })
 
-  return {
+  return generateIndexablePageMetadata({
     title: t('terms.title'),
     description: t('terms.description'),
-    robots: {
-      index: false,
-      follow: false,
-    },
-  }
+    locale,
+    path: '/terms',
+  })
 }
 
-export default function TermsPage() {
-  return (
-    <div className="min-h-screen bg-surface px-6 py-16 lg:px-8 lg:py-24">
-      <div className="mx-auto max-w-3xl">
-        <Link
-          href="/"
-          className="group mb-8 inline-flex items-center text-sm text-text-secondary transition-colors hover:text-accent"
-        >
-          <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-          홈으로 돌아가기
-        </Link>
-
-        <h1 className="font-display text-3xl font-bold tracking-tight text-text-primary sm:text-4xl">
-          이용약관
-        </h1>
-        <p className="mt-4 text-text-secondary">최종 수정일: 2024년 1월 1일</p>
-
-        <div className="mt-12 space-y-8 text-text-secondary">
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">1. 서비스 개요</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit은 AI 기반 브랜드 에셋 생성 서비스입니다. 본 약관은 BrandKit 서비스 이용에 관한
-              조건 및 절차, 회사와 회원의 권리, 의무 및 책임사항을 규정합니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">2. 회원가입 및 계정</h2>
-            <p className="mt-3 leading-relaxed">
-              회원가입은 이메일 주소 또는 소셜 로그인(Google, GitHub)을 통해 가능합니다.
-              회원은 정확한 정보를 제공해야 하며, 계정 보안에 대한 책임이 있습니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">3. 서비스 이용</h2>
-            <p className="mt-3 leading-relaxed">
-              회원은 다음 사항을 준수해야 합니다:
-            </p>
-            <ul className="mt-3 list-disc space-y-2 pl-6">
-              <li>서비스를 합법적인 목적으로만 사용</li>
-              <li>타인의 지적재산권을 침해하지 않음</li>
-              <li>서비스의 정상적인 운영을 방해하지 않음</li>
-              <li>계정을 타인과 공유하지 않음</li>
-            </ul>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">4. 지적재산권</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit 서비스를 통해 생성된 에셋의 저작권은 해당 회원에게 귀속됩니다.
-              단, BrandKit 서비스 자체의 소프트웨어, 디자인, 로고 등에 대한 지적재산권은
-              BrandKit에 귀속됩니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">5. 결제 및 환불</h2>
-            <p className="mt-3 leading-relaxed">
-              유료 서비스는 구독 형태로 제공되며, 결제일에 자동으로 갱신됩니다.
-              환불은 결제 후 7일 이내에 요청 시 가능하며, 이미 사용한 서비스에 대해서는
-              환불이 제한될 수 있습니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">6. 서비스 변경 및 중단</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit은 서비스 개선을 위해 서비스 내용을 변경할 수 있으며,
-              중요한 변경 사항은 사전에 공지합니다. 불가피한 사유로 서비스가 중단될 경우
-              회원에게 통지합니다.
-            </p>
-          </section>
-
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">7. 면책조항</h2>
-            <p className="mt-3 leading-relaxed">
-              BrandKit은 서비스 이용으로 발생하는 간접적, 부수적, 결과적 손해에 대해
-              책임지지 않습니다. AI 생성 콘텐츠의 정확성이나 적합성에 대한 보증을 제공하지 않습니다.
-            </p>
-          </section>
+export default async function TermsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
 
-          <section>
-            <h2 className="font-display text-xl font-semibold text-text-primary">8. 문의</h2>
-            <p className="mt-3 leading-relaxed">
-              이용약관에 관한 문의사항은 support@brandkit.app으로 연락해 주세요.
-            </p>
-          </section>
-        </div>
-      </div>
-    </div>
-  )
+  return <LegalDocumentPage document={getLegalDocument(locale, 'terms')} />
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
index aebf64d..7ffbdd5 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,16 +1,16 @@
 import type { MetadataRoute } from 'next'
 import { routing } from '@/i18n/routing'
+import { getSiteUrl } from '@/lib/seo/site-url'
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://brandkit.app'
+  const baseUrl = getSiteUrl()
   const locales = routing.locales
 
   const publicPages = [
     { path: '', changeFrequency: 'weekly' as const, priority: 1.0 },
-    { path: '/login', changeFrequency: 'monthly' as const, priority: 0.6 },
-    { path: '/signup', changeFrequency: 'monthly' as const, priority: 0.7 },
-    { path: '/privacy', changeFrequency: 'yearly' as const, priority: 0.3 },
-    { path: '/terms', changeFrequency: 'yearly' as const, priority: 0.3 },
+    { path: '/demo', changeFrequency: 'weekly' as const, priority: 0.8 },
+    { path: '/privacy', changeFrequency: 'monthly' as const, priority: 0.3 },
+    { path: '/terms', changeFrequency: 'monthly' as const, priority: 0.3 },
   ]
 
   const entries: MetadataRoute.Sitemap = []
diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx
index 97b87f1..020fb1c 100644
--- a/components/landing/faq.tsx
+++ b/components/landing/faq.tsx
@@ -3,30 +3,21 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { ChevronDown, HelpCircle, Mail, ArrowRight } from 'lucide-react'
-
-const faqItems = [
-  { id: '1', questionKey: 'faq.items.1.question', answerKey: 'faq.items.1.answer' },
-  { id: '2', questionKey: 'faq.items.2.question', answerKey: 'faq.items.2.answer' },
-  { id: '3', questionKey: 'faq.items.3.question', answerKey: 'faq.items.3.answer' },
-  { id: '4', questionKey: 'faq.items.4.question', answerKey: 'faq.items.4.answer' },
-  { id: '5', questionKey: 'faq.items.5.question', answerKey: 'faq.items.5.answer' },
-  { id: '6', questionKey: 'faq.items.6.question', answerKey: 'faq.items.6.answer' },
-]
+import { getLandingFaqItems } from '@/lib/seo/faq'
 
 function FAQItem({
-  questionKey,
-  answerKey,
+  question,
+  answer,
   isOpen,
   onToggle,
   index,
 }: {
-  questionKey: string
-  answerKey: string
+  question: string
+  answer: string
   isOpen: boolean
   onToggle: () => void
   index: number
 }) {
-  const t = useTranslations('landing')
   const panelMaxHeightClass = isOpen ? 'max-h-[9999px] opacity-100' : 'max-h-0 opacity-0'
 
   return (
@@ -60,13 +51,8 @@ function FAQItem({
           >
             {index + 1}
           </span>
-          <span
-            className={`
-              text-sm font-medium transition-colors sm:text-base
-              ${isOpen ? 'text-text-primary' : 'text-text-primary'}
-            `}
-          >
-            {t(questionKey)}
+          <span className="text-sm font-medium text-text-primary transition-colors sm:text-base">
+            {question}
           </span>
         </div>
         <div
@@ -91,9 +77,7 @@ function FAQItem({
       >
         <div className="px-6 pb-5">
           <div className="ml-10 border-l-2 border-accent/20 pl-4">
-            <p className="text-sm leading-relaxed text-text-secondary">
-              {t(answerKey)}
-            </p>
+            <p className="text-sm leading-relaxed text-text-secondary">{answer}</p>
           </div>
         </div>
       </div>
@@ -104,6 +88,7 @@ function FAQItem({
 export function FAQ() {
   const t = useTranslations('landing')
   const [openId, setOpenId] = useState<string | null>(null)
+  const faqItems = getLandingFaqItems(t)
 
   const toggle = (id: string) => {
     setOpenId(openId === id ? null : id)
@@ -136,8 +121,8 @@ export function FAQ() {
           {faqItems.map((item, idx) => (
             <FAQItem
               key={item.id}
-              questionKey={item.questionKey}
-              answerKey={item.answerKey}
+              question={item.question}
+              answer={item.answer}
               isOpen={openId === item.id}
               onToggle={() => toggle(item.id)}
               index={idx}
diff --git a/components/legal/legal-document.tsx b/components/legal/legal-document.tsx
new file mode 100644
index 0000000..2ba9a17
--- /dev/null
+++ b/components/legal/legal-document.tsx
@@ -0,0 +1,48 @@
+import { ArrowLeft } from 'lucide-react'
+import { Link } from '@/i18n/navigation'
+import type { LegalDocument } from '@/lib/legal/documents'
+
+export function LegalDocumentPage({ document }: { document: LegalDocument }) {
+  return (
+    <main id="main-content" className="bg-surface min-h-screen px-6 py-16 lg:px-8 lg:py-24">
+      <div className="mx-auto max-w-3xl">
+        <Link
+          href="/"
+          className="group text-text-secondary hover:text-accent mb-8 inline-flex items-center text-sm transition-colors"
+        >
+          <ArrowLeft className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+          {document.backLabel}
+        </Link>
+
+        <h1 className="font-display text-text-primary text-3xl font-bold tracking-tight sm:text-4xl">
+          {document.title}
+        </h1>
+        <p className="text-text-secondary mt-4">
+          {document.lastUpdatedLabel} {document.lastUpdated}
+        </p>
+
+        <div className="text-text-secondary mt-12 space-y-8">
+          {document.sections.map((section) => (
+            <section key={section.title}>
+              <h2 className="font-display text-text-primary text-xl font-semibold">
+                {section.title}
+              </h2>
+              {section.paragraphs.map((paragraph) => (
+                <p key={paragraph} className="mt-3 leading-relaxed">
+                  {paragraph}
+                </p>
+              ))}
+              {section.bullets ? (
+                <ul className="mt-3 list-disc space-y-2 pl-6">
+                  {section.bullets.map((bullet) => (
+                    <li key={bullet}>{bullet}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </section>
+          ))}
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/lib/legal/documents.ts b/lib/legal/documents.ts
new file mode 100644
index 0000000..f5c9018
--- /dev/null
+++ b/lib/legal/documents.ts
@@ -0,0 +1,260 @@
+export type LegalDocumentType = 'privacy' | 'terms'
+
+export interface LegalSection {
+  title: string
+  paragraphs: readonly string[]
+  bullets?: readonly string[]
+}
+
+export interface LegalDocument {
+  backLabel: string
+  title: string
+  lastUpdatedLabel: string
+  lastUpdated: string
+  sections: readonly LegalSection[]
+}
+
+const legalDocuments = {
+  en: {
+    privacy: {
+      backLabel: 'Back to home',
+      title: 'Privacy Policy',
+      lastUpdatedLabel: 'Last updated:',
+      lastUpdated: 'January 1, 2024',
+      sections: [
+        {
+          title: '1. Information We Collect',
+          paragraphs: [
+            'BrandKit collects the following information to provide the service:',
+          ],
+          bullets: [
+            'Email address for account creation and login',
+            'Billing information for paid subscriptions',
+            'Usage data such as project creation and asset generation activity',
+          ],
+        },
+        {
+          title: '2. How We Use Information',
+          paragraphs: [
+            'We use collected information for the following purposes:',
+          ],
+          bullets: [
+            'Delivering the service and managing accounts',
+            'Processing payments and managing subscriptions',
+            'Improving the product and developing new features',
+            'Responding to support requests and customer inquiries',
+          ],
+        },
+        {
+          title: '3. Retention and Deletion',
+          paragraphs: [
+            'Personal information is retained while your account is active and deleted within 30 days of an account deletion request, unless a longer retention period is required by law.',
+          ],
+        },
+        {
+          title: '4. Sharing with Third Parties',
+          paragraphs: [
+            'BrandKit does not share personal information with third parties except in the following cases:',
+          ],
+          bullets: [
+            'When you give prior consent',
+            'When disclosure is required by law or a lawful request from an investigative authority',
+          ],
+        },
+        {
+          title: '5. Contact',
+          paragraphs: [
+            'For privacy-related questions, contact support@brandkit.app.',
+          ],
+        },
+      ],
+    },
+    terms: {
+      backLabel: 'Back to home',
+      title: 'Terms of Service',
+      lastUpdatedLabel: 'Last updated:',
+      lastUpdated: 'January 1, 2024',
+      sections: [
+        {
+          title: '1. Service Overview',
+          paragraphs: [
+            'BrandKit is an AI-powered brand asset generation service. These terms describe the conditions, procedures, rights, obligations, and responsibilities related to using BrandKit.',
+          ],
+        },
+        {
+          title: '2. Accounts and Registration',
+          paragraphs: [
+            'You can create an account using email or social login providers such as Google and GitHub. You are responsible for providing accurate information and maintaining account security.',
+          ],
+        },
+        {
+          title: '3. Acceptable Use',
+          paragraphs: [
+            'You agree to the following while using the service:',
+          ],
+          bullets: [
+            'Use the service only for lawful purposes',
+            'Do not infringe on the intellectual property rights of others',
+            'Do not interfere with the normal operation of the service',
+            'Do not share your account with other people',
+          ],
+        },
+        {
+          title: '4. Intellectual Property',
+          paragraphs: [
+            'Assets generated through BrandKit belong to the member who created them. The BrandKit service itself, including its software, design system, and logos, remains the property of BrandKit.',
+          ],
+        },
+        {
+          title: '5. Billing and Refunds',
+          paragraphs: [
+            'Paid services are offered as subscriptions and renew automatically on the billing date. Refund requests may be made within 7 days of payment, but refunds can be limited for services already used.',
+          ],
+        },
+        {
+          title: '6. Service Changes and Interruptions',
+          paragraphs: [
+            'BrandKit may change the service to improve it. Material changes will be announced in advance when possible, and members will be notified if the service must be interrupted for unavoidable reasons.',
+          ],
+        },
+        {
+          title: '7. Disclaimer',
+          paragraphs: [
+            'BrandKit is not liable for indirect, incidental, or consequential damages arising from use of the service. We do not guarantee the accuracy or fitness of AI-generated content.',
+          ],
+        },
+        {
+          title: '8. Contact',
+          paragraphs: [
+            'For questions about these terms, contact support@brandkit.app.',
+          ],
+        },
+      ],
+    },
+  },
+  ko: {
+    privacy: {
+      backLabel: '홈으로 돌아가기',
+      title: '개인정보처리방침',
+      lastUpdatedLabel: '최종 수정일:',
+      lastUpdated: '2024년 1월 1일',
+      sections: [
+        {
+          title: '1. 수집하는 개인정보',
+          paragraphs: [
+            'BrandKit은 서비스 제공을 위해 다음과 같은 개인정보를 수집합니다:',
+          ],
+          bullets: [
+            '이메일 주소 (계정 생성 및 로그인)',
+            '결제 정보 (유료 구독 시)',
+            '서비스 이용 기록 (프로젝트 생성, 에셋 생성 등)',
+          ],
+        },
+        {
+          title: '2. 개인정보의 이용 목적',
+          paragraphs: [
+            '수집된 개인정보는 다음의 목적으로 이용됩니다:',
+          ],
+          bullets: [
+            '서비스 제공 및 계정 관리',
+            '결제 처리 및 구독 관리',
+            '서비스 개선 및 신규 기능 개발',
+            '고객 지원 및 문의 응대',
+          ],
+        },
+        {
+          title: '3. 개인정보의 보관 및 파기',
+          paragraphs: [
+            '개인정보는 서비스 이용 기간 동안 보관되며, 계정 삭제 요청 시 30일 이내에 파기됩니다. 단, 관련 법령에 따라 일정 기간 보관이 필요한 경우 해당 기간 동안 보관됩니다.',
+          ],
+        },
+        {
+          title: '4. 개인정보의 제3자 제공',
+          paragraphs: [
+            'BrandKit은 원칙적으로 이용자의 개인정보를 제3자에게 제공하지 않습니다. 다만, 다음의 경우에는 예외로 합니다:',
+          ],
+          bullets: [
+            '이용자가 사전에 동의한 경우',
+            '법령의 규정에 의거하거나, 수사 목적으로 법령에 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우',
+          ],
+        },
+        {
+          title: '5. 문의',
+          paragraphs: [
+            '개인정보 처리에 관한 문의사항은 support@brandkit.app으로 연락해 주세요.',
+          ],
+        },
+      ],
+    },
+    terms: {
+      backLabel: '홈으로 돌아가기',
+      title: '이용약관',
+      lastUpdatedLabel: '최종 수정일:',
+      lastUpdated: '2024년 1월 1일',
+      sections: [
+        {
+          title: '1. 서비스 개요',
+          paragraphs: [
+            'BrandKit은 AI 기반 브랜드 에셋 생성 서비스입니다. 본 약관은 BrandKit 서비스 이용에 관한 조건 및 절차, 회사와 회원의 권리, 의무 및 책임사항을 규정합니다.',
+          ],
+        },
+        {
+          title: '2. 회원가입 및 계정',
+          paragraphs: [
+            '회원가입은 이메일 주소 또는 소셜 로그인(Google, GitHub)을 통해 가능합니다. 회원은 정확한 정보를 제공해야 하며, 계정 보안에 대한 책임이 있습니다.',
+          ],
+        },
+        {
+          title: '3. 서비스 이용',
+          paragraphs: [
+            '회원은 다음 사항을 준수해야 합니다:',
+          ],
+          bullets: [
+            '서비스를 합법적인 목적으로만 사용',
+            '타인의 지적재산권을 침해하지 않음',
+            '서비스의 정상적인 운영을 방해하지 않음',
+            '계정을 타인과 공유하지 않음',
+          ],
+        },
+        {
+          title: '4. 지적재산권',
+          paragraphs: [
+            'BrandKit 서비스를 통해 생성된 에셋의 저작권은 해당 회원에게 귀속됩니다. 단, BrandKit 서비스 자체의 소프트웨어, 디자인, 로고 등에 대한 지적재산권은 BrandKit에 귀속됩니다.',
+          ],
+        },
+        {
+          title: '5. 결제 및 환불',
+          paragraphs: [
+            '유료 서비스는 구독 형태로 제공되며, 결제일에 자동으로 갱신됩니다. 환불은 결제 후 7일 이내에 요청 시 가능하며, 이미 사용한 서비스에 대해서는 환불이 제한될 수 있습니다.',
+          ],
+        },
+        {
+          title: '6. 서비스 변경 및 중단',
+          paragraphs: [
+            'BrandKit은 서비스 개선을 위해 서비스 내용을 변경할 수 있으며, 중요한 변경 사항은 사전에 공지합니다. 불가피한 사유로 서비스가 중단될 경우 회원에게 통지합니다.',
+          ],
+        },
+        {
+          title: '7. 면책조항',
+          paragraphs: [
+            'BrandKit은 서비스 이용으로 발생하는 간접적, 부수적, 결과적 손해에 대해 책임지지 않습니다. AI 생성 콘텐츠의 정확성이나 적합성에 대한 보증을 제공하지 않습니다.',
+          ],
+        },
+        {
+          title: '8. 문의',
+          paragraphs: [
+            '이용약관에 관한 문의사항은 support@brandkit.app으로 연락해 주세요.',
+          ],
+        },
+      ],
+    },
+  },
+} as const
+
+export function getLegalDocument(
+  locale: string,
+  type: LegalDocumentType
+): LegalDocument {
+  const normalizedLocale = locale === 'ko' ? 'ko' : 'en'
+  return legalDocuments[normalizedLocale][type]
+}
diff --git a/lib/seo/faq.ts b/lib/seo/faq.ts
new file mode 100644
index 0000000..0202314
--- /dev/null
+++ b/lib/seo/faq.ts
@@ -0,0 +1,17 @@
+export interface LandingFaqItem {
+  id: string
+  question: string
+  answer: string
+}
+
+const landingFaqIds = ['1', '2', '3', '4', '5', '6'] as const
+
+export function getLandingFaqItems(
+  translate: (key: string) => string
+): LandingFaqItem[] {
+  return landingFaqIds.map((id) => ({
+    id,
+    question: translate(`faq.items.${id}.question`),
+    answer: translate(`faq.items.${id}.answer`),
+  }))
+}
diff --git a/lib/seo/json-ld.ts b/lib/seo/json-ld.ts
index a0ab484..ff1f449 100644
--- a/lib/seo/json-ld.ts
+++ b/lib/seo/json-ld.ts
@@ -1,21 +1,31 @@
-import type { Organization, WebSite, SoftwareApplication, BreadcrumbList, WithContext } from 'schema-dts'
+import type {
+  BreadcrumbList,
+  FAQPage,
+  Organization,
+  SoftwareApplication,
+  WebSite,
+  WithContext,
+} from 'schema-dts'
+import { getSiteUrl, getStructuredDataLocale } from './site-url'
 
-const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://brandkit.app'
+const BASE_URL = getSiteUrl()
 
 export function generateOrganizationSchema(): WithContext<Organization> {
+  const sameAs: string[] = []
+
   return {
     '@context': 'https://schema.org',
     '@type': 'Organization',
     name: 'BrandKit',
     url: BASE_URL,
     logo: `${BASE_URL}/logo.png`,
-    sameAs: [],
     contactPoint: {
       '@type': 'ContactPoint',
       email: 'support@brandkit.app',
       contactType: 'customer service',
       availableLanguage: ['English', 'Korean'],
     },
+    ...(sameAs.length > 0 ? { sameAs } : {}),
   }
 }
 
@@ -26,55 +36,81 @@ export function generateWebSiteSchema(locale: string): WithContext<WebSite> {
     name: 'BrandKit',
     url: `${BASE_URL}/${locale}`,
     inLanguage: locale === 'ko' ? 'ko-KR' : 'en-US',
-    description: locale === 'ko'
-      ? 'AI 기반 브랜드 에셋 생성기'
-      : 'AI-powered brand asset generator',
+    description:
+      locale === 'ko' ? 'AI 기반 브랜드 에셋 생성기' : 'AI-powered brand asset generator',
   }
 }
 
-export function generateSoftwareApplicationSchema(locale: string): WithContext<SoftwareApplication> {
+export function generateSoftwareApplicationSchema(
+  locale: string
+): WithContext<SoftwareApplication> {
   const isKorean = locale === 'ko'
+  const localizedUrl = `${BASE_URL}/${locale}`
 
   return {
     '@context': 'https://schema.org',
     '@type': 'SoftwareApplication',
     name: 'BrandKit',
+    url: localizedUrl,
+    inLanguage: getStructuredDataLocale(locale),
     applicationCategory: 'DesignApplication',
+    applicationSubCategory: isKorean
+      ? '브랜드 에셋 생성 워크플로우'
+      : 'Brand asset generation workflow',
     operatingSystem: 'Web',
+    image: `${BASE_URL}/api/og?locale=${locale}`,
     offers: {
       '@type': 'Offer',
       price: '0',
       priceCurrency: 'USD',
+      url: `${localizedUrl}/signup`,
       description: isKorean
-        ? '무료 플랜 - 월 3개 프로젝트, 1개 브랜드 프로필'
-        : 'Free plan - 3 projects/month, 1 brand profile',
-    },
-    aggregateRating: {
-      '@type': 'AggregateRating',
-      ratingValue: '4.8',
-      ratingCount: '100',
-      bestRating: '5',
-      worstRating: '1',
+        ? '무료 플랜 - 월 3개 프로젝트, 브랜드 프로필 2개로 출시 준비를 시작하세요.'
+        : 'Free plan - launch up to 3 projects per month with 2 brand profiles before you upgrade.',
     },
     description: isKorean
-      ? 'AI 기반 브랜드 에셋 생성기. Favicon, OG Image, App Icon 등 모든 플랫폼의 브랜드 에셋을 자동으로 생성합니다.'
-      : 'AI-powered brand asset generator. Automatically generate Favicon, OG Image, App Icon and all platform brand assets.',
+      ? '브랜드 프로필을 한 번 저장하면 Favicon, OG Image, 앱 아이콘, 소셜 미리보기까지 출시용 브랜드 에셋을 자동으로 생성하는 AI 브랜드 에셋 워크플로우입니다.'
+      : 'AI brand asset workflow that turns one brand profile into favicons, OG images, app icons, and social previews for your next launch.',
     featureList: isKorean
       ? [
-          'AI 기반 브랜드 카피 생성',
-          '플랫폼별 에셋 패키지',
-          '브랜드 프로필 관리',
-          '코드 스니펫 제공',
+          '브랜드 프로필 기반 에셋 생성',
+          'Favicon, OG Image, 앱 아이콘 자동 생성',
+          '출시용 ZIP 다운로드와 코드 스니펫 제공',
+          '영문·국문 브랜드 워크플로우 지원',
         ]
       : [
-          'AI-powered brand copy generation',
-          'Platform-specific asset packages',
-          'Brand profile management',
-          'Code snippets included',
+          'Generate assets from a saved brand profile',
+          'Auto-create favicons, OG images, and app icons',
+          'Download launch-ready ZIP files with code snippets',
+          'Support English and Korean brand workflows',
         ],
   }
 }
 
+export interface FaqSchemaItem {
+  question: string
+  answer: string
+}
+
+export function generateFaqPageSchema(
+  locale: string,
+  items: FaqSchemaItem[]
+): WithContext<FAQPage> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    inLanguage: getStructuredDataLocale(locale),
+    mainEntity: items.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: item.answer,
+      },
+    })),
+  }
+}
+
 export interface BreadcrumbItem {
   name: string
   url: string
diff --git a/lib/seo/metadata.ts b/lib/seo/metadata.ts
new file mode 100644
index 0000000..cffe06d
--- /dev/null
+++ b/lib/seo/metadata.ts
@@ -0,0 +1,97 @@
+import type { Metadata } from 'next'
+import { buildLocalizedAlternates, buildLocalizedUrl, getOpenGraphLocale } from './site-url'
+
+interface IndexablePageMetadataOptions {
+  locale: string
+  title: string
+  description: string
+  path?: string
+}
+
+interface NoIndexMetadataOptions {
+  locale: string
+  path: string
+  title: string
+  description: string
+}
+
+export function generateIndexablePageMetadata({
+  locale,
+  title,
+  description,
+  path = '',
+}: IndexablePageMetadataOptions): Metadata {
+  return {
+    title,
+    description,
+    alternates: buildLocalizedAlternates(locale, path),
+    openGraph: {
+      type: 'website',
+      locale: getOpenGraphLocale(locale),
+      url: buildLocalizedUrl(locale, path),
+      siteName: 'BrandKit',
+      title,
+      description,
+      images: [
+        {
+          url: `/api/og?locale=${locale}`,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [`/api/og?locale=${locale}`],
+    },
+  }
+}
+
+export function generateNoIndexMetadata({
+  locale,
+  path,
+  title,
+  description,
+}: NoIndexMetadataOptions): Metadata {
+  return {
+    title,
+    description,
+    alternates: buildLocalizedAlternates(locale, path),
+    openGraph: {
+      type: 'website',
+      locale: getOpenGraphLocale(locale),
+      url: buildLocalizedUrl(locale, path),
+      siteName: 'BrandKit',
+      title,
+      description,
+      images: [
+        {
+          url: `/api/og?locale=${locale}`,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [`/api/og?locale=${locale}`],
+    },
+    robots: {
+      index: false,
+      follow: false,
+      googleBot: {
+        index: false,
+        follow: false,
+        'max-image-preview': 'none',
+        'max-snippet': -1,
+        'max-video-preview': -1,
+      },
+    },
+  }
+}
diff --git a/lib/seo/site-url.ts b/lib/seo/site-url.ts
new file mode 100644
index 0000000..c337b67
--- /dev/null
+++ b/lib/seo/site-url.ts
@@ -0,0 +1,48 @@
+import { routing } from '@/i18n/routing'
+
+const DEFAULT_SITE_URL = 'https://brand-kit.jadru.com'
+
+function normalizePath(path: string): string {
+  if (!path) return ''
+  return path.startsWith('/') ? path : `/${path}`
+}
+
+export function getSiteUrl(): string {
+  if (process.env.NEXT_PUBLIC_APP_URL) {
+    return process.env.NEXT_PUBLIC_APP_URL
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    return 'http://localhost:3000'
+  }
+
+  return DEFAULT_SITE_URL
+}
+
+export function getOpenGraphLocale(locale: string): string {
+  return locale === 'ko' ? 'ko_KR' : 'en_US'
+}
+
+export function getStructuredDataLocale(locale: string): string {
+  return locale === 'ko' ? 'ko-KR' : 'en-US'
+}
+
+export function buildLocalizedUrl(locale: string, path = ''): string {
+  return `${getSiteUrl()}/${locale}${normalizePath(path)}`
+}
+
+export function buildLocalizedAlternates(locale: string, path = '') {
+  const normalizedPath = normalizePath(path)
+  const defaultLocale = routing.defaultLocale ?? routing.locales[0]
+
+  return {
+    canonical: buildLocalizedUrl(locale, normalizedPath),
+    languages: Object.fromEntries([
+      ...routing.locales.map((entryLocale) => [
+        entryLocale,
+        buildLocalizedUrl(entryLocale, normalizedPath),
+      ]),
+      ['x-default', buildLocalizedUrl(defaultLocale, normalizedPath)],
+    ]),
+  }
+}
diff --git a/messages/en.json b/messages/en.json
index dd36b33..4f3ca92 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -729,26 +729,30 @@
 
   "metadata": {
     "title": {
-      "default": "BrandKit - AI Brand Asset Generator",
+      "default": "BrandKit - AI Brand Asset Generator | Favicon, OG Image & App Icons",
       "template": "%s | BrandKit"
     },
-    "description": "Save your brand style and auto-generate all brand assets",
-    "keywords": "brand assets, favicon generator, og image, app icon, brand identity, AI copywriting",
+    "description": "Save one brand profile and let BrandKit generate favicons, OG images, app icons, and social previews for your next launch. Start free and ship a consistent brand system faster.",
+    "keywords": "brand asset generator, favicon generator, og image, app icon, social preview, brand identity, AI copywriting",
     "privacy": {
       "title": "Privacy Policy",
-      "description": "Learn how BrandKit collects, uses, and protects your personal information"
+      "description": "Review how BrandKit handles your data, accounts, and generated assets."
     },
     "terms": {
       "title": "Terms of Service",
-      "description": "Read the terms and conditions for using BrandKit services"
+      "description": "Read the terms for using BrandKit to create and manage launch-ready brand assets."
     },
     "login": {
       "title": "Log in",
-      "description": "Sign in to your BrandKit account to manage your brand assets"
+      "description": "Sign in to keep your brand profiles, launch assets, and downloads in sync."
     },
     "signup": {
       "title": "Sign up",
-      "description": "Create a free BrandKit account and start generating brand assets with AI"
+      "description": "Create a free BrandKit account and generate launch-ready brand assets from one saved brand profile."
+    },
+    "forgotPassword": {
+      "title": "Reset password",
+      "description": "Send a secure reset link and get back to your saved brand profiles and launch assets."
     },
     "dashboard": {
       "title": "Dashboard",
diff --git a/messages/ko.json b/messages/ko.json
index 9070444..132fe34 100644
--- a/messages/ko.json
+++ b/messages/ko.json
@@ -729,26 +729,30 @@
 
   "metadata": {
     "title": {
-      "default": "BrandKit - AI 브랜드 에셋 생성기",
+      "default": "BrandKit - AI 브랜드 에셋 자동 생성 | Favicon, OG Image, 앱 아이콘",
       "template": "%s | BrandKit"
     },
-    "description": "브랜드 스타일을 저장하고 모든 브랜드 에셋을 자동 생성하세요",
-    "keywords": "브랜드 에셋, 파비콘 생성기, OG 이미지, 앱 아이콘, 브랜드 아이덴티티, AI 카피라이팅",
+    "description": "브랜드 프로필을 한 번 저장하면 BrandKit이 Favicon, OG Image, 앱 아이콘, 소셜 미리보기까지 다음 출시용 브랜드 에셋을 자동 생성합니다. 무료로 시작하고 더 빠르게 일관된 브랜드를 출시하세요.",
+    "keywords": "브랜드 에셋 생성기, 파비콘 생성기, OG 이미지, 앱 아이콘, 소셜 미리보기, 브랜드 아이덴티티, AI 카피라이팅",
     "privacy": {
       "title": "개인정보처리방침",
-      "description": "BrandKit이 개인정보를 수집, 사용, 보호하는 방법을 알아보세요"
+      "description": "BrandKit이 데이터, 계정, 생성된 에셋을 어떻게 다루는지 확인하세요."
     },
     "terms": {
       "title": "이용약관",
-      "description": "BrandKit 서비스 이용 약관을 확인하세요"
+      "description": "BrandKit으로 출시용 브랜드 에셋을 생성하고 관리할 때 적용되는 약관을 확인하세요."
     },
     "login": {
       "title": "로그인",
-      "description": "BrandKit 계정에 로그인하여 브랜드 에셋을 관리하세요"
+      "description": "브랜드 프로필, 출시 에셋, 다운로드를 계속 관리하려면 로그인하세요."
     },
     "signup": {
       "title": "회원가입",
-      "description": "무료 BrandKit 계정을 만들고 AI로 브랜드 에셋을 생성하세요"
+      "description": "무료 BrandKit 계정을 만들고 하나의 브랜드 프로필로 출시용 브랜드 에셋을 생성하세요."
+    },
+    "forgotPassword": {
+      "title": "비밀번호 재설정",
+      "description": "안전한 재설정 링크를 받아 저장한 브랜드 프로필과 출시 에셋으로 다시 돌아오세요."
     },
     "dashboard": {
       "title": "대시보드",
diff --git a/tests/app/legal-pages.test.tsx b/tests/app/legal-pages.test.tsx
new file mode 100644
index 0000000..3e9dc62
--- /dev/null
+++ b/tests/app/legal-pages.test.tsx
@@ -0,0 +1,43 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/i18n/navigation', () => ({
+  Link: ({
+    children,
+    href,
+    ...props
+  }: {
+    children: React.ReactNode
+    href: string
+  }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+describe('legal pages', () => {
+  it('renders english privacy content for the english locale', async () => {
+    const module = await import('@/app/[locale]/privacy/page')
+    const element = await module.default({
+      params: Promise.resolve({ locale: 'en' }),
+    } as never)
+    const html = renderToStaticMarkup(element)
+
+    expect(html).toContain('Privacy Policy')
+    expect(html).toContain('Last updated:')
+    expect(html).not.toContain('개인정보처리방침')
+  })
+
+  it('renders english terms content for the english locale', async () => {
+    const module = await import('@/app/[locale]/terms/page')
+    const element = await module.default({
+      params: Promise.resolve({ locale: 'en' }),
+    } as never)
+    const html = renderToStaticMarkup(element)
+
+    expect(html).toContain('Terms of Service')
+    expect(html).toContain('Last updated:')
+    expect(html).not.toContain('이용약관')
+  })
+})
diff --git a/tests/app/page-metadata.test.ts b/tests/app/page-metadata.test.ts
new file mode 100644
index 0000000..b673660
--- /dev/null
+++ b/tests/app/page-metadata.test.ts
@@ -0,0 +1,323 @@
+import { createElement, type ReactNode } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+const dictionary = {
+  en: {
+    metadata: {
+      title: {
+        default: 'BrandKit - AI Brand Asset Generator | Favicon, OG Image & App Icons',
+        template: '%s | BrandKit',
+      },
+      description:
+        'Save one brand profile and let BrandKit generate favicons, OG images, app icons, and social previews for your next launch. Start free and ship a consistent brand system faster.',
+      keywords:
+        'brand asset generator, favicon generator, og image, app icon, social preview, brand identity, AI copywriting',
+      login: {
+        title: 'Log in',
+        description: 'Sign in to keep your brand profiles, launch assets, and downloads in sync.',
+      },
+      signup: {
+        title: 'Sign up',
+        description:
+          'Create a free BrandKit account and generate launch-ready brand assets from one saved brand profile.',
+      },
+      forgotPassword: {
+        title: 'Reset password',
+        description:
+          'Send a secure reset link and get back to your saved brand profiles and launch assets.',
+      },
+      privacy: {
+        title: 'Privacy Policy',
+        description: 'Review how BrandKit handles your data, accounts, and generated assets.',
+      },
+      terms: {
+        title: 'Terms of Service',
+        description:
+          'Read the terms for using BrandKit to create and manage launch-ready brand assets.',
+      },
+    },
+    demo: {
+      meta: {
+        title: 'Try the BrandKit demo',
+        description:
+          'Preview how one brand profile turns into favicons, OG images, app icons, and code-ready brand assets. No signup required.',
+      },
+    },
+  },
+  ko: {
+    metadata: {
+      title: {
+        default: 'BrandKit - AI 브랜드 에셋 자동 생성 | Favicon, OG Image, 앱 아이콘',
+        template: '%s | BrandKit',
+      },
+      description:
+        '브랜드 프로필을 한 번 저장하면 BrandKit이 Favicon, OG Image, 앱 아이콘, 소셜 미리보기까지 다음 출시용 브랜드 에셋을 자동 생성합니다. 무료로 시작하고 더 빠르게 일관된 브랜드를 출시하세요.',
+      keywords:
+        '브랜드 에셋 생성기, 파비콘 생성기, OG 이미지, 앱 아이콘, 소셜 미리보기, 브랜드 아이덴티티, AI 카피라이팅',
+      login: {
+        title: '로그인',
+        description: '브랜드 프로필, 출시 에셋, 다운로드를 계속 관리하려면 로그인하세요.',
+      },
+      signup: {
+        title: '회원가입',
+        description:
+          '무료 BrandKit 계정을 만들고 하나의 브랜드 프로필로 출시용 브랜드 에셋을 생성하세요.',
+      },
+      forgotPassword: {
+        title: '비밀번호 재설정',
+        description:
+          '안전한 재설정 링크를 받아 저장한 브랜드 프로필과 출시 에셋으로 다시 돌아오세요.',
+      },
+      privacy: {
+        title: '개인정보처리방침',
+        description: 'BrandKit이 데이터, 계정, 생성된 에셋을 어떻게 다루는지 확인하세요.',
+      },
+      terms: {
+        title: '이용약관',
+        description:
+          'BrandKit으로 출시용 브랜드 에셋을 생성하고 관리할 때 적용되는 약관을 확인하세요.',
+      },
+    },
+    demo: {
+      meta: {
+        title: 'BrandKit 데모 체험',
+        description:
+          '가입 없이 BrandKit을 체험해보세요. AI가 브랜드 에셋을 즉시 생성하는 과정을 확인하세요.',
+      },
+    },
+  },
+} as const
+
+function getTranslationValue(locale: 'en' | 'ko', namespace: string | undefined, key: string) {
+  const scoped = namespace
+    ? (dictionary[locale] as Record<string, unknown>)[namespace]
+    : dictionary[locale]
+
+  return key.split('.').reduce<unknown>((value, segment) => {
+    if (value && typeof value === 'object') {
+      return (value as Record<string, unknown>)[segment]
+    }
+
+    return undefined
+  }, scoped)
+}
+
+vi.mock('next-intl/server', () => ({
+  getTranslations: vi.fn(
+    async ({ locale, namespace }: { locale: 'en' | 'ko'; namespace?: string }) => {
+      return (key: string) => {
+        const value = getTranslationValue(locale, namespace, key)
+
+        if (typeof value !== 'string') {
+          throw new Error(`Missing translation for ${locale}.${namespace ?? 'root'}.${key}`)
+        }
+
+        return value
+      }
+    }
+  ),
+  getMessages: vi.fn(async () => ({})),
+  setRequestLocale: vi.fn(),
+}))
+
+vi.mock('next/font/google', () => ({
+  JetBrains_Mono: () => ({
+    variable: 'mock-font-variable',
+  }),
+}))
+
+vi.mock('next-intl', () => ({
+  NextIntlClientProvider: ({ children }: { children: ReactNode }) => children,
+}))
+
+vi.mock('@/components/seo/json-ld', () => ({
+  JsonLd: () => null,
+}))
+
+vi.mock('@/components/analytics/google-analytics', () => ({
+  GoogleAnalytics: () => null,
+}))
+
+vi.mock('sonner', () => ({
+  Toaster: () => null,
+}))
+
+vi.mock('@/i18n/routing', () => ({
+  routing: {
+    locales: ['en', 'ko'],
+    defaultLocale: 'en',
+  },
+}))
+
+vi.mock('@/i18n/navigation', () => ({
+  Link: ({ children, href, ...props }: { children: ReactNode; href: string }) =>
+    createElement('a', { href, ...props }, children),
+}))
+
+vi.mock('@/app/[locale]/(auth)/login/actions', () => ({
+  signIn: vi.fn(),
+  signInWithOAuth: vi.fn(),
+}))
+
+vi.mock('@/app/[locale]/(auth)/signup/actions', () => ({
+  signUp: vi.fn(),
+  signUpWithOAuth: vi.fn(),
+}))
+
+vi.mock('@/app/[locale]/(auth)/forgot-password/actions', () => ({
+  sendResetEmail: vi.fn(),
+}))
+
+vi.mock('@/app/[locale]/demo/client', () => ({
+  DemoClient: () => null,
+}))
+
+describe('auth page metadata', () => {
+  const authPages = [
+    {
+      name: 'login',
+      load: () => import('@/app/[locale]/(auth)/login/page'),
+      expected: {
+        title: 'Log in',
+        description: 'Sign in to keep your brand profiles, launch assets, and downloads in sync.',
+      },
+    },
+    {
+      name: 'signup',
+      load: () => import('@/app/[locale]/(auth)/signup/page'),
+      expected: {
+        title: 'Sign up',
+        description:
+          'Create a free BrandKit account and generate launch-ready brand assets from one saved brand profile.',
+      },
+    },
+    {
+      name: 'forgot-password',
+      load: () => import('@/app/[locale]/(auth)/forgot-password/page'),
+      expected: {
+        title: 'Reset password',
+        description:
+          'Send a secure reset link and get back to your saved brand profiles and launch assets.',
+      },
+    },
+  ] as const
+
+  it.each(authPages)('exports noindex metadata for $name', async ({ name, load, expected }) => {
+    const module = await load()
+
+    expect(module.generateMetadata).toBeTypeOf('function')
+
+    const metadata = await module.generateMetadata?.({
+      params: Promise.resolve({ locale: 'en' }),
+    })
+
+    expect(metadata).toMatchObject({
+      title: expected.title,
+      description: expected.description,
+      robots: {
+        index: false,
+        follow: false,
+      },
+    })
+  })
+})
+
+describe('homepage metadata', () => {
+  it('declares canonical, language alternates, and social metadata for the homepage', async () => {
+    const module = await import('@/app/[locale]/page')
+
+    const metadata = await module.generateMetadata({
+      params: Promise.resolve({ locale: 'en' }),
+    })
+
+    expect(metadata).toMatchObject({
+      title: 'BrandKit - AI Brand Asset Generator | Favicon, OG Image & App Icons',
+      description:
+        'Save one brand profile and let BrandKit generate favicons, OG images, app icons, and social previews for your next launch. Start free and ship a consistent brand system faster.',
+      alternates: {
+        canonical: 'https://brand-kit.jadru.com/en',
+        languages: {
+          en: 'https://brand-kit.jadru.com/en',
+          ko: 'https://brand-kit.jadru.com/ko',
+          'x-default': 'https://brand-kit.jadru.com/en',
+        },
+      },
+      openGraph: {
+        url: 'https://brand-kit.jadru.com/en',
+        title: 'BrandKit - AI Brand Asset Generator | Favicon, OG Image & App Icons',
+      },
+      twitter: {
+        card: 'summary_large_image',
+      },
+    })
+  })
+})
+
+describe('legal page metadata', () => {
+  it('keeps privacy and terms pages indexable with explicit canonical metadata', async () => {
+    const privacy = await import('@/app/[locale]/privacy/page')
+    const terms = await import('@/app/[locale]/terms/page')
+
+    const privacyMetadata = await privacy.generateMetadata({
+      params: Promise.resolve({ locale: 'en' }),
+    })
+    const termsMetadata = await terms.generateMetadata({
+      params: Promise.resolve({ locale: 'en' }),
+    })
+
+    expect(privacyMetadata).toMatchObject({
+      title: 'Privacy Policy',
+      description: 'Review how BrandKit handles your data, accounts, and generated assets.',
+      alternates: {
+        canonical: 'https://brand-kit.jadru.com/en/privacy',
+      },
+      openGraph: {
+        url: 'https://brand-kit.jadru.com/en/privacy',
+      },
+    })
+
+    expect(termsMetadata).toMatchObject({
+      title: 'Terms of Service',
+      description:
+        'Read the terms for using BrandKit to create and manage launch-ready brand assets.',
+      alternates: {
+        canonical: 'https://brand-kit.jadru.com/en/terms',
+      },
+      openGraph: {
+        url: 'https://brand-kit.jadru.com/en/terms',
+      },
+    })
+  })
+})
+
+describe('demo page metadata', () => {
+  it('declares explicit alternates and open graph metadata', async () => {
+    const module = await import('@/app/[locale]/demo/page')
+
+    expect(module.generateMetadata).toBeTypeOf('function')
+
+    const metadata = await module.generateMetadata({
+      params: Promise.resolve({ locale: 'en' }),
+    })
+
+    expect(metadata).toMatchObject({
+      title: 'Try the BrandKit demo',
+      description:
+        'Preview how one brand profile turns into favicons, OG images, app icons, and code-ready brand assets. No signup required.',
+      alternates: {
+        canonical: 'https://brand-kit.jadru.com/en/demo',
+        languages: {
+          en: 'https://brand-kit.jadru.com/en/demo',
+          ko: 'https://brand-kit.jadru.com/ko/demo',
+          'x-default': 'https://brand-kit.jadru.com/en/demo',
+        },
+      },
+      openGraph: {
+        url: 'https://brand-kit.jadru.com/en/demo',
+        title: 'Try the BrandKit demo',
+        description:
+          'Preview how one brand profile turns into favicons, OG images, app icons, and code-ready brand assets. No signup required.',
+      },
+    })
+  })
+})
diff --git a/tests/app/sitemap.test.ts b/tests/app/sitemap.test.ts
new file mode 100644
index 0000000..9047b6a
--- /dev/null
+++ b/tests/app/sitemap.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import sitemap from '@/app/sitemap'
+
+describe('sitemap', () => {
+  it('includes only indexable public pages for every locale', () => {
+    const entries = sitemap()
+    const paths = entries.map((entry) => new URL(entry.url).pathname).sort()
+
+    expect(paths).toEqual([
+      '/en',
+      '/en/demo',
+      '/en/privacy',
+      '/en/terms',
+      '/ko',
+      '/ko/demo',
+      '/ko/privacy',
+      '/ko/terms',
+    ])
+  })
+
+  it('excludes auth pages from the sitemap', () => {
+    const paths = sitemap().map((entry) => new URL(entry.url).pathname)
+
+    expect(paths).not.toContain('/en/login')
+    expect(paths).not.toContain('/en/signup')
+    expect(paths).not.toContain('/ko/login')
+    expect(paths).not.toContain('/ko/signup')
+  })
+})
diff --git a/tests/i18n/metadata-copy.test.ts b/tests/i18n/metadata-copy.test.ts
new file mode 100644
index 0000000..2be8a05
--- /dev/null
+++ b/tests/i18n/metadata-copy.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import en from '@/messages/en.json'
+import ko from '@/messages/ko.json'
+
+describe('metadata copy', () => {
+  it('uses more descriptive homepage title copy', () => {
+    expect(en.metadata.title.default.length).toBeGreaterThanOrEqual(50)
+    expect(ko.metadata.title.default.length).toBeGreaterThanOrEqual(35)
+    expect(ko.metadata.title.default).toContain('Favicon')
+    expect(ko.metadata.title.default).toContain('OG Image')
+  })
+
+  it('uses fuller homepage descriptions with a call to action', () => {
+    expect(en.metadata.description.length).toBeGreaterThanOrEqual(120)
+    expect(en.metadata.description.toLowerCase()).toContain('start free')
+    expect(ko.metadata.description.length).toBeGreaterThanOrEqual(55)
+    expect(ko.metadata.description).toContain('무료')
+  })
+
+  it('adds forgot-password metadata copy in both locales', () => {
+    expect(en.metadata).toHaveProperty('forgotPassword.title')
+    expect(en.metadata).toHaveProperty('forgotPassword.description')
+    expect(ko.metadata).toHaveProperty('forgotPassword.title')
+    expect(ko.metadata).toHaveProperty('forgotPassword.description')
+  })
+
+  it('positions the homepage for launch-ready brand assets in both locales', () => {
+    expect(en.metadata.description.toLowerCase()).toContain('brand profile')
+    expect(en.metadata.description.toLowerCase()).toContain('launch')
+    expect(ko.metadata.description).toContain('브랜드 프로필')
+    expect(ko.metadata.description).toContain('출시')
+  })
+
+  it('avoids unverifiable trust-badge claims in public landing copy', () => {
+    expect(en.landing.testimonials.trustBadge1.toLowerCase()).not.toContain('soc 2')
+    expect(en.landing.testimonials.trustBadge2).not.toContain('99.9')
+    expect(ko.landing.testimonials.trustBadge1).not.toContain('SOC 2')
+    expect(ko.landing.testimonials.trustBadge2).not.toContain('99.9')
+  })
+})
diff --git a/tests/lib/seo/json-ld.test.ts b/tests/lib/seo/json-ld.test.ts
new file mode 100644
index 0000000..a188a17
--- /dev/null
+++ b/tests/lib/seo/json-ld.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import * as seoJsonLd from '@/lib/seo/json-ld'
+
+describe('generateOrganizationSchema', () => {
+  it('omits empty sameAs profiles', () => {
+    const schema = seoJsonLd.generateOrganizationSchema()
+
+    expect(schema).not.toHaveProperty('sameAs')
+  })
+})
+
+describe('generateSoftwareApplicationSchema', () => {
+  it('does not include unverifiable aggregate rating data and includes product URLs', () => {
+    const schema = seoJsonLd.generateSoftwareApplicationSchema('en')
+
+    expect(schema).not.toHaveProperty('aggregateRating')
+    expect(schema).toMatchObject({
+      url: 'https://brand-kit.jadru.com/en',
+      offers: {
+        url: 'https://brand-kit.jadru.com/en/signup',
+      },
+    })
+  })
+})
+
+describe('generateFaqPageSchema', () => {
+  it('builds faq rich result data from translated question-answer pairs', () => {
+    expect(typeof seoJsonLd.generateFaqPageSchema).toBe('function')
+
+    const schema = seoJsonLd.generateFaqPageSchema?.('en', [
+      {
+        question: 'What does BrandKit generate?',
+        answer: 'It generates favicons, OG images, app icons, and more.',
+      },
+      {
+        question: 'Can I use the assets commercially?',
+        answer: 'Yes. Commercial use is allowed.',
+      },
+    ])
+
+    expect(schema).toMatchObject({
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      inLanguage: 'en-US',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'What does BrandKit generate?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'It generates favicons, OG images, app icons, and more.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Can I use the assets commercially?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Yes. Commercial use is allowed.',
+          },
+        },
+      ],
+    })
+  })
+})
+
+describe('generateBreadcrumbSchema', () => {
+  it('builds absolute localized urls for breadcrumb items', () => {
+    const schema = seoJsonLd.generateBreadcrumbSchema(
+      [
+        { name: 'Home', url: '' },
+        { name: 'Demo', url: '/demo' },
+      ],
+      'en'
+    )
+
+    expect(schema).toMatchObject({
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'Home',
+          item: 'https://brand-kit.jadru.com/en',
+        },
+        {
+          '@type': 'ListItem',
+          position: 2,
+          name: 'Demo',
+          item: 'https://brand-kit.jadru.com/en/demo',
+        },
+      ],
+    })
+  })
+})