diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 670b5b9..5354636 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "@tanstack/react-query": "^5.90.21",
+        "i18next": "^26.3.6",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-i18next": "^17.0.9",
         "react-router-dom": "^6.28.2",
         "zod": "^4.3.6"
       },
@@ -264,6 +266,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -2676,6 +2687,43 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "26.3.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.6.tgz",
+      "integrity": "sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3121,6 +3169,33 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.9",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.9.tgz",
+      "integrity": "sha512-buLzOSqHtXxjf+qgSrLWNTXVZ1jSwO6kUv3uJqSP1roGBPgNnbhFm7OmdVwWcgf2gIbUyP0J333uPyx+Btsi3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -3388,7 +3463,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -3470,6 +3545,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -3627,6 +3711,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 176e28c..f2758d5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.21",
+    "i18next": "^26.3.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-i18next": "^17.0.9",
     "react-router-dom": "^6.28.2",
     "zod": "^4.3.6"
   },
diff --git a/frontend/src/components/i18n/language-switcher.tsx b/frontend/src/components/i18n/language-switcher.tsx
new file mode 100644
index 0000000..c6ddde2
--- /dev/null
+++ b/frontend/src/components/i18n/language-switcher.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import { persistLanguage, SUPPORTED_LANGUAGES, type SupportedLanguage } from '../../i18n'
+
+const languageLabels: Record<SupportedLanguage, 'language.spanish' | 'language.english'> = {
+    es: 'language.spanish',
+    en: 'language.english',
+}
+
+export function LanguageSwitcher() {
+    const { i18n, t } = useTranslation()
+    const currentLanguage = (i18n.resolvedLanguage ?? i18n.language) as SupportedLanguage
+
+    const handleLanguageChange = async (language: SupportedLanguage) => {
+        await i18n.changeLanguage(language)
+        persistLanguage(language)
+    }
+
+    return (
+        <label className="language-switcher">
+            <span className="sr-only">{t('language.label')}</span>
+            <select
+                aria-label={t('language.label')}
+                className="input language-select"
+                value={currentLanguage}
+                onChange={(event) => handleLanguageChange(event.target.value as SupportedLanguage)}
+            >
+                {SUPPORTED_LANGUAGES.map((language) => (
+                    <option key={language} value={language}>
+                        {t(languageLabels[language])}
+                    </option>
+                ))}
+            </select>
+        </label>
+    )
+}
diff --git a/frontend/src/components/layout/app-shell.tsx b/frontend/src/components/layout/app-shell.tsx
index 8ba721c..7fbb551 100644
--- a/frontend/src/components/layout/app-shell.tsx
+++ b/frontend/src/components/layout/app-shell.tsx
@@ -1,50 +1,41 @@
-import { useState, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink } from 'react-router-dom'
 import { useAuth } from '../../features/auth/auth-store'
-import { applyTheme, getInitialTheme, type ThemeMode } from '../../lib/utils/theme'
+import { LanguageSwitcher } from '../i18n/language-switcher'
 import { Button } from '../ui/button'
 import { Badge } from '../ui/badge'
+import { ThemeToggle } from '../ui/theme-toggle'
 
 type AppShellProps = {
     children: ReactNode
 }
 
 export function AppShell({ children }: AppShellProps) {
+    const { t } = useTranslation()
     const { session, logout } = useAuth()
-    const [theme, setTheme] = useState<ThemeMode>(() => {
-        const initial = getInitialTheme()
-        applyTheme(initial)
-        return initial
-    })
-
-    const toggleTheme = () => {
-        const nextTheme: ThemeMode = theme === 'light' ? 'dark' : 'light'
-        setTheme(nextTheme)
-        applyTheme(nextTheme)
-    }
 
     return (
         <div className="page">
             <header className="topbar app-topbar">
                 <div>
-                    <strong>Prompt Catalog</strong>
-                    <p className="muted">Personal library for prompts that work</p>
+                    <strong>{t('app.name')}</strong>
+                    <p className="muted">{t('app.tagline')}</p>
                 </div>
                 <div className="topbar-actions">
                     <NavLink className="nav-link" to="/app/prompts">
-                        Catalog
+                        {t('nav.catalog')}
                     </NavLink>
                     {session.role === 'admin' || session.role === 'god' ? (
                         <NavLink className="nav-link" to="/app/admin/prompts">
-                            Admin
+                            {t('nav.admin')}
                         </NavLink>
                     ) : null}
                     <Badge tone="accent">{session.username} · {session.role}</Badge>
-                    <Button variant="ghost" onClick={toggleTheme}>
-                        {theme === 'light' ? 'Dark' : 'Light'}
-                    </Button>
+                    <LanguageSwitcher />
+                    <ThemeToggle />
                     <Button variant="ghost" onClick={logout}>
-                        Logout
+                        {t('nav.logout')}
                     </Button>
                 </div>
             </header>
diff --git a/frontend/src/components/prompts/prompt-detail-dialog.tsx b/frontend/src/components/prompts/prompt-detail-dialog.tsx
index 6c0dcab..ddf0b5c 100644
--- a/frontend/src/components/prompts/prompt-detail-dialog.tsx
+++ b/frontend/src/components/prompts/prompt-detail-dialog.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import type { PromptRecord } from '../../features/prompts/prompts-types'
 import { Button } from '../ui/button'
 
@@ -14,6 +15,8 @@ export function PromptDetailDialog({
     onEdit,
     onDelete,
 }: PromptDetailDialogProps) {
+    const { t } = useTranslation()
+
     if (!prompt) return null
 
     const handleEdit = () => {
@@ -35,30 +38,36 @@ export function PromptDetailDialog({
                 aria-labelledby="prompt-detail-title"
                 onMouseDown={(event) => event.stopPropagation()}
             >
-                <h2 id="prompt-detail-title">Prompt details</h2>
+                <h2 id="prompt-detail-title">{t('prompts.detail.title')}</h2>
                 <div className="prompt-detail-body">
-                    <div className="prompt-detail-field">
-                        <span className="label">Model</span>
-                        <p>{prompt.model_name}</p>
+                    <div className="prompt-detail-meta prompt-detail-summary">
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.model')}</span>
+                            <strong>{prompt.model_name}</strong>
+                        </div>
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.category')}</span>
+                            <span className="badge">{prompt.category}</span>
+                        </div>
+                        <div className="prompt-detail-field">
+                            <span className="label">{t('prompts.detail.rating')}</span>
+                            <span>{t('common.rating', { value: prompt.rate })}</span>
+                        </div>
                     </div>
                     <div className="prompt-detail-field">
-                        <span className="label">Prompt</span>
+                        <span className="label">{t('prompts.detail.prompt')}</span>
                         <p className="prompt-detail-text">{prompt.prompt_text}</p>
                     </div>
-                    <div className="prompt-detail-meta">
-                        <span className="badge">{prompt.category}</span>
-                        <span className="muted">Rating {prompt.rate}/5</span>
-                    </div>
                 </div>
                 <div className="dialog-actions">
                     <Button variant="ghost" onClick={onClose}>
-                        Close
+                        {t('common.close')}
                     </Button>
                     <Button variant="ghost" onClick={handleEdit}>
-                        Edit
+                        {t('common.edit')}
                     </Button>
                     <Button variant="danger" onClick={handleDelete}>
-                        Delete
+                        {t('common.delete')}
                     </Button>
                 </div>
             </div>
diff --git a/frontend/src/components/prompts/prompt-form.tsx b/frontend/src/components/prompts/prompt-form.tsx
index e37b666..1d47f9c 100644
--- a/frontend/src/components/prompts/prompt-form.tsx
+++ b/frontend/src/components/prompts/prompt-form.tsx
@@ -1,12 +1,13 @@
 import { useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import type { SelectOption } from '../../features/options/options-types'
 import type { PromptInput, PromptRecord } from '../../features/prompts/prompts-types'
 import { promptSchema } from '../../lib/validation/prompt-schemas'
 import { Button } from '../ui/button'
 import { ComboboxInput } from '../ui/combobox-input'
-import { Input } from '../ui/input'
 import { RatingInput } from '../ui/rating-input'
 import { Select } from '../ui/select'
+import { Textarea } from '../ui/textarea'
 
 type PromptFormProps = {
     initialValue?: PromptRecord | null
@@ -29,6 +30,7 @@ export function PromptForm({
     onSubmit,
     onCancelEdit,
 }: PromptFormProps) {
+    const { t } = useTranslation()
     const [form, setForm] = useState<PromptInput>({
         model_name: initialValue?.model_name ?? '',
         prompt_text: initialValue?.prompt_text ?? '',
@@ -56,13 +58,13 @@ export function PromptForm({
                 }
             }
             setFieldErrors(nextErrors)
-            setError(parsed.error.issues[0]?.message ?? 'Invalid form data')
+            setError(parsed.error.issues[0]?.message ?? t('prompts.form.invalid'))
             return
         }
 
         const selectedModel = modelOptions.find((option) => option.value === parsed.data.model_name)
         if (!selectedModel) {
-            const message = 'Select a known model from the list.'
+            const message = t('prompts.form.knownModel')
             setFieldErrors({ model_name: message })
             setError(message)
             return
@@ -79,29 +81,32 @@ export function PromptForm({
     return (
         <form className="prompt-form" onSubmit={handleSubmit}>
             <ComboboxInput
-                label="Model"
+                label={t('prompts.form.model')}
                 options={modelOptions}
                 value={form.model_name}
                 disabled={optionsLoading || isSaving}
                 onChange={(value) => handleChange('model_name', value)}
                 error={fieldErrors.model_name}
             />
-            <Input
-                label="Prompt"
+            <Textarea
+                label={t('prompts.form.prompt')}
                 value={form.prompt_text}
                 onChange={(e) => handleChange('prompt_text', e.target.value)}
                 error={fieldErrors.prompt_text}
+                placeholder={t('prompts.form.promptPlaceholder')}
+                rows={7}
             />
             <Select
-                label="Category"
+                label={t('prompts.form.category')}
                 options={categoryOptions}
                 value={form.category}
+                placeholder={t('common.selectOption')}
                 disabled={optionsLoading || isSaving}
                 onChange={(e) => handleChange('category', e.target.value)}
                 error={fieldErrors.category}
             />
             <RatingInput
-                label="Rating"
+                label={t('prompts.form.rating')}
                 value={form.rate}
                 onChange={(value) => handleChange('rate', value)}
                 disabled={isSaving}
@@ -112,11 +117,11 @@ export function PromptForm({
 
             <div className="row gap-sm">
                 <Button type="submit" disabled={optionsLoading || isSaving}>
-                    {isSaving ? 'Saving...' : isEdit ? 'Update prompt' : 'Add prompt'}
+                    {isSaving ? t('common.saving') : isEdit ? t('prompts.form.update') : t('prompts.form.add')}
                 </Button>
                 {isEdit ? (
                     <Button type="button" variant="ghost" onClick={onCancelEdit}>
-                        Cancel
+                        {t('common.cancel')}
                     </Button>
                 ) : null}
             </div>
diff --git a/frontend/src/components/prompts/prompt-list.tsx b/frontend/src/components/prompts/prompt-list.tsx
index ba7f2ab..ebb227c 100644
--- a/frontend/src/components/prompts/prompt-list.tsx
+++ b/frontend/src/components/prompts/prompt-list.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import type { PromptRecord } from '../../features/prompts/prompts-types'
 import { EmptyState } from '../ui/empty-state'
 import { PromptDetailDialog } from './prompt-detail-dialog'
@@ -20,13 +21,14 @@ function summarizePromptText(text: string, maxLength = 140) {
 }
 
 export function PromptList({ prompts, onEdit, onDelete }: PromptListProps) {
+    const { t } = useTranslation()
     const [selectedPrompt, setSelectedPrompt] = useState<PromptRecord | null>(null)
 
     if (!prompts.length) {
         return (
             <EmptyState
-                title="No prompts yet"
-                description="Save your first proven prompt to start building your reusable catalog."
+                title={t('prompts.emptyTitle')}
+                description={t('prompts.emptyDescription')}
             />
         )
     }
@@ -44,12 +46,15 @@ export function PromptList({ prompts, onEdit, onDelete }: PromptListProps) {
                             className="prompt-list-item"
                             onClick={() => setSelectedPrompt(prompt)}
                         >
-                            <span className="prompt-list-summary">{summary}</span>
+                            <span className="prompt-list-content">
+                                <strong>{prompt.model_name}</strong>
+                                <span className="prompt-list-summary">{summary}</span>
+                            </span>
                             <span className="prompt-list-meta">
                                 <span className="badge">{prompt.category}</span>
-                                <span className="muted">Rating {prompt.rate}/5</span>
+                                <span className="muted">{t('common.rating', { value: prompt.rate })}</span>
                             </span>
-                            <span className="sr-only">View prompt details</span>
+                            <span className="sr-only">{t('prompts.viewDetails')}</span>
                         </button>
                     )
                 })}
diff --git a/frontend/src/components/ui/confirm-dialog.tsx b/frontend/src/components/ui/confirm-dialog.tsx
index f6419fe..d6f067f 100644
--- a/frontend/src/components/ui/confirm-dialog.tsx
+++ b/frontend/src/components/ui/confirm-dialog.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Button } from './button'
 
 type ConfirmDialogProps = {
@@ -21,6 +22,8 @@ export function ConfirmDialog({
     onConfirm,
     onCancel,
 }: ConfirmDialogProps) {
+    const { t } = useTranslation()
+
     if (!open) return null
 
     return (
@@ -39,7 +42,7 @@ export function ConfirmDialog({
                         {cancelLabel}
                     </Button>
                     <Button variant="danger" onClick={onConfirm} disabled={busy}>
-                        {busy ? 'Working...' : confirmLabel}
+                        {busy ? t('common.working') : confirmLabel}
                     </Button>
                 </div>
             </div>
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7d2612a
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,20 @@
+import type { TextareaHTMLAttributes } from 'react'
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label: string
+    error?: string
+}
+
+export function Textarea({ label, id, error, className = '', ...props }: TextareaProps) {
+    const inputId = id ?? label.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+        <div className="field">
+            <label htmlFor={inputId} className="label">
+                {label}
+            </label>
+            <textarea id={inputId} className={`input textarea ${className}`.trim()} {...props} />
+            {error ? <p className="field-error">{error}</p> : null}
+        </div>
+    )
+}
diff --git a/frontend/src/components/ui/theme-toggle.tsx b/frontend/src/components/ui/theme-toggle.tsx
new file mode 100644
index 0000000..6d51cd1
--- /dev/null
+++ b/frontend/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { applyTheme, getInitialTheme, type ThemeMode } from '../../lib/utils/theme'
+import { Button } from './button'
+
+export function ThemeToggle() {
+    const { t } = useTranslation()
+    const [theme, setTheme] = useState<ThemeMode>(() => getInitialTheme())
+
+    const toggleTheme = () => {
+        const nextTheme: ThemeMode = theme === 'light' ? 'dark' : 'light'
+        setTheme(nextTheme)
+        applyTheme(nextTheme)
+    }
+
+    return (
+        <Button type="button" variant="ghost" onClick={toggleTheme}>
+            {theme === 'light' ? t('theme.dark') : t('theme.light')}
+        </Button>
+    )
+}
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
new file mode 100644
index 0000000..a6e2ccc
--- /dev/null
+++ b/frontend/src/i18n/index.ts
@@ -0,0 +1,53 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import { en } from './locales/en'
+import { es } from './locales/es'
+
+export const STORAGE_KEY = 'app.language'
+export const DEFAULT_LANGUAGE = 'es'
+export const SUPPORTED_LANGUAGES = ['es', 'en'] as const
+
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number]
+
+const resources = {
+    es: { translation: es },
+    en: { translation: en },
+}
+
+function isSupportedLanguage(language: string | null): language is SupportedLanguage {
+    return SUPPORTED_LANGUAGES.includes(language as SupportedLanguage)
+}
+
+export function getInitialLanguage(): SupportedLanguage {
+    const urlLanguage = new URLSearchParams(window.location.search).get('lng')
+    if (isSupportedLanguage(urlLanguage)) {
+        return urlLanguage
+    }
+
+    const savedLanguage = localStorage.getItem(STORAGE_KEY)
+    if (isSupportedLanguage(savedLanguage)) {
+        return savedLanguage
+    }
+
+    return DEFAULT_LANGUAGE
+}
+
+export function persistLanguage(language: SupportedLanguage) {
+    localStorage.setItem(STORAGE_KEY, language)
+    document.documentElement.lang = language
+    document.documentElement.dir = 'ltr'
+}
+
+i18n.use(initReactI18next).init({
+    resources,
+    lng: getInitialLanguage(),
+    fallbackLng: DEFAULT_LANGUAGE,
+    supportedLngs: SUPPORTED_LANGUAGES,
+    interpolation: {
+        escapeValue: false,
+    },
+})
+
+persistLanguage(i18n.resolvedLanguage as SupportedLanguage)
+
+export { i18n }
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
new file mode 100644
index 0000000..5dde42e
--- /dev/null
+++ b/frontend/src/i18n/locales/en.ts
@@ -0,0 +1,206 @@
+export const en = {
+    app: {
+        name: 'Prompt Catalog',
+        tagline: 'Personal library for prompts that work',
+    },
+    language: {
+        label: 'Select language',
+        spanish: 'Español',
+        english: 'English',
+    },
+    nav: {
+        catalog: 'Catalog',
+        admin: 'Admin',
+        signIn: 'Sign in',
+        createAccount: 'Create account',
+        logout: 'Logout',
+        main: 'Main',
+    },
+    theme: {
+        dark: 'Dark',
+        light: 'Light',
+    },
+    common: {
+        loading: 'Loading...',
+        rating: 'Rating {{value}}/5',
+        selectOption: 'Select an option',
+        cancel: 'Cancel',
+        close: 'Close',
+        edit: 'Edit',
+        delete: 'Delete',
+        saving: 'Saving...',
+        working: 'Working...',
+    },
+    landing: {
+        badge: 'Your best prompts, saved for later',
+        title: 'Stop losing the prompts that actually work.',
+        copy: 'Build a personal library for the prompts you trust. Save them by model and category, rate what performs best, and find the right prompt when you need it again.',
+        primaryCta: 'Explore the preview',
+        secondaryCta: 'Create account',
+        previewEyebrow: 'Catalog preview',
+        previewTitle: 'A warmer home for your reusable AI work',
+        previewCopy: 'Preview how saved prompts can be organized with ratings, models, categories, and quick context before you commit them to your own library.',
+        benefitsLabel: 'Prompt library benefits',
+        benefits: [
+            {
+                title: 'Keep what worked',
+                copy: 'Turn one-off AI wins into reusable prompts you can return to instead of rebuilding from memory.',
+            },
+            {
+                title: 'Trust your best versions',
+                copy: 'Rate prompts by usefulness so the strongest versions rise above the experiments.',
+            },
+            {
+                title: 'Find prompts faster',
+                copy: 'Organize by model and category so writing, planning, research, and coding prompts stay easy to scan.',
+            },
+        ],
+        workflowLabel: 'Prompt workflow',
+        workflow: ['Save', 'Rate', 'Find', 'Reuse'],
+        finalCtaTitle: 'Start your prompt library today.',
+        finalCtaCopy: 'Create an account and begin collecting the prompts that save you time every week.',
+        finalCtaButton: 'Create account',
+        footerOwner: 'Built by Luis Felipe Ponce Navarro',
+        footerGithub: 'View on GitHub',
+        samples: {
+            writing: {
+                category: 'Writing',
+                title: 'Clearer first draft',
+                excerpt: 'Rewrite this rough idea into a concise first draft with a friendly, practical tone. Keep the structure skimmable and flag any missing context.',
+                context: 'Saved after producing a useful first draft workflow.',
+            },
+            planning: {
+                category: 'Planning',
+                title: 'Weekly focus planner',
+                excerpt: 'Turn these scattered tasks into a realistic weekly plan. Group related work, identify the highest-leverage next step, and call out risks.',
+                context: 'Reliable for turning messy task lists into weekly focus.',
+            },
+            codeReview: {
+                category: 'Code Review',
+                title: 'API review checklist',
+                excerpt: 'Review this endpoint for authorization gaps, unsafe schemas, missing validation, and regression test coverage. Return findings by severity.',
+                context: 'Useful before merging API changes.',
+            },
+            learning: {
+                category: 'Learning',
+                title: 'Explain and quiz me',
+                excerpt: 'Explain this concept in simple terms, then ask me five progressive questions to check whether I can apply it without memorizing.',
+                context: 'Kept for study sessions and interview prep.',
+            },
+        },
+    },
+    auth: {
+        loginTitle: 'Welcome back',
+        loginDescription: 'Sign in to return to the prompt library you are building.',
+        registered: 'Account created with the default user role. Sign in with your new credentials.',
+        username: 'Username',
+        password: 'Password',
+        signingIn: 'Signing in...',
+        forgotPassword: 'Forgot password?',
+        needAccount: 'Need an account? Create one',
+        registerTitle: 'Create your prompt library',
+        registerDescription: 'Start saving the prompts that save you time every week.',
+        firstName: 'First name',
+        lastName: 'Last name',
+        email: 'Email',
+        creating: 'Creating...',
+        alreadyHaveAccount: 'Already have an account?',
+        invalidCredentials: 'Invalid credentials',
+        unableToLogin: 'Unable to login',
+        checkRegistration: 'Check your registration details',
+        unableToCreate: 'Unable to create account',
+        usernameTaken: 'Username is already taken',
+        backToLanding: 'Back to landing',
+    },
+    recovery: {
+        title: 'Recover access',
+        description: 'Request a recovery key, then redeem it for a temporary password.',
+        requestTitle: 'Request a key',
+        redeemTitle: 'Redeem your key',
+        username: 'Username',
+        key: 'Recovery key',
+        requesting: 'Requesting...',
+        checking: 'Checking...',
+        requestButton: 'Request recovery key',
+        redeemButton: 'Redeem key',
+        temporaryPassword: 'Temporary password',
+        temporaryPasswordHelp: 'Use this password to sign in, then update it.',
+        returnToLogin: 'Return to login',
+        invalidUsername: 'Invalid username',
+        invalidKey: 'Invalid recovery key',
+        unableToRequest: 'Unable to request recovery key',
+        unableToRedeem: 'Unable to redeem recovery key',
+    },
+    prompts: {
+        eyebrow: 'Catalog',
+        title: 'Your prompt library',
+        description: 'Save the prompts that worked, then find and reuse them faster.',
+        edit: 'Edit prompt',
+        create: 'Save a proven prompt',
+        listTitle: 'Saved prompts',
+        listDescription: 'Open any card to review model, category, rating, and full prompt text.',
+        dropdownError: 'Unable to load dropdown options',
+        deleteTitle: 'Delete prompt?',
+        deleteDescription: 'This removes the prompt from your catalog. This action cannot be undone.',
+        deleteConfirm: 'Delete prompt',
+        emptyTitle: 'No prompts yet',
+        emptyDescription: 'Save your first proven prompt to start building your reusable catalog.',
+        viewDetails: 'View prompt details',
+        stats: {
+            total: 'Total prompts',
+            averageRating: 'Average rating',
+            categories: 'Categories',
+            emptyRating: 'No ratings yet',
+        },
+        form: {
+            model: 'Model',
+            prompt: 'Prompt text',
+            category: 'Category',
+            rating: 'Rating',
+            add: 'Add prompt',
+            update: 'Update prompt',
+            knownModel: 'Select a known model from the list.',
+            invalid: 'Invalid form data',
+            promptPlaceholder: 'Paste the prompt that worked, including any constraints or context you want to reuse.',
+        },
+        detail: {
+            title: 'Prompt details',
+            model: 'Model',
+            prompt: 'Prompt',
+            category: 'Category',
+            rating: 'Quality signal',
+        },
+        errors: {
+            sessionUnavailable: 'Session is not available',
+            selectedUnavailable: 'Session or selected prompt is not available',
+            create: 'Unable to create prompt',
+            update: 'Unable to update prompt',
+            delete: 'Unable to delete prompt',
+        },
+    },
+    admin: {
+        title: 'Admin monitor',
+        visibleCount: '{{count}} prompts visible to {{role}}.',
+        filters: {
+            userId: 'User ID',
+            model: 'Model',
+            category: 'Category',
+            rating: 'Rating',
+            clear: 'Clear filters',
+        },
+        editTitle: 'Edit prompt as god',
+        allPrompts: 'All prompts',
+        promptMeta: 'User {{userId}} · {{category}} · Rating {{rating}}/5',
+        noPrompts: 'No prompts found.',
+        deleteTitle: 'Delete this prompt?',
+        deleteDescription: 'This removes the selected prompt from the catalog for every admin view.',
+        deleteConfirm: 'Delete prompt',
+        unableToLoad: 'Unable to load prompts',
+        errors: {
+            selectedUnavailable: 'Session or selected prompt is not available',
+            sessionUnavailable: 'Session is not available',
+            update: 'Unable to update prompt',
+            delete: 'Unable to delete prompt',
+        },
+    },
+} as const
diff --git a/frontend/src/i18n/locales/es.ts b/frontend/src/i18n/locales/es.ts
new file mode 100644
index 0000000..4980d44
--- /dev/null
+++ b/frontend/src/i18n/locales/es.ts
@@ -0,0 +1,206 @@
+export const es = {
+    app: {
+        name: 'Catálogo de Prompts',
+        tagline: 'Biblioteca personal para prompts que funcionan',
+    },
+    language: {
+        label: 'Seleccionar idioma',
+        spanish: 'Español',
+        english: 'English',
+    },
+    nav: {
+        catalog: 'Catálogo',
+        admin: 'Admin',
+        signIn: 'Iniciar sesión',
+        createAccount: 'Crear cuenta',
+        logout: 'Cerrar sesión',
+        main: 'Principal',
+    },
+    theme: {
+        dark: 'Oscuro',
+        light: 'Claro',
+    },
+    common: {
+        loading: 'Cargando...',
+        rating: 'Calificación {{value}}/5',
+        selectOption: 'Selecciona una opción',
+        cancel: 'Cancelar',
+        close: 'Cerrar',
+        edit: 'Editar',
+        delete: 'Eliminar',
+        saving: 'Guardando...',
+        working: 'Trabajando...',
+    },
+    landing: {
+        badge: 'Tus mejores prompts, guardados para después',
+        title: 'Deja de perder los prompts que sí funcionan.',
+        copy: 'Crea una biblioteca personal para los prompts en los que confías. Guárdalos por modelo y categoría, califica los que mejor funcionan y encuentra el prompt correcto cuando lo necesites otra vez.',
+        primaryCta: 'Explorar vista previa',
+        secondaryCta: 'Crear cuenta',
+        previewEyebrow: 'Vista previa del catálogo',
+        previewTitle: 'Un espacio más claro para tu trabajo reutilizable con IA',
+        previewCopy: 'Mira cómo tus prompts guardados pueden organizarse con calificaciones, modelos, categorías y contexto útil antes de llevarlos a tu propia biblioteca.',
+        benefitsLabel: 'Beneficios de la biblioteca de prompts',
+        benefits: [
+            {
+                title: 'Conserva lo que funcionó',
+                copy: 'Convierte aciertos aislados con IA en prompts reutilizables a los que puedes volver sin reconstruirlos de memoria.',
+            },
+            {
+                title: 'Confía en tus mejores versiones',
+                copy: 'Califica los prompts por utilidad para que las versiones más fuertes destaquen sobre los experimentos.',
+            },
+            {
+                title: 'Encuentra prompts más rápido',
+                copy: 'Organiza por modelo y categoría para que tus prompts de escritura, planeación, investigación y código sean fáciles de revisar.',
+            },
+        ],
+        workflowLabel: 'Flujo de prompts',
+        workflow: ['Guardar', 'Calificar', 'Encontrar', 'Reutilizar'],
+        finalCtaTitle: 'Empieza tu biblioteca de prompts hoy.',
+        finalCtaCopy: 'Crea una cuenta y empieza a reunir los prompts que te ahorran tiempo cada semana.',
+        finalCtaButton: 'Crear cuenta',
+        footerOwner: 'Creado por Luis Felipe Ponce Navarro',
+        footerGithub: 'Ver en GitHub',
+        samples: {
+            writing: {
+                category: 'Escritura',
+                title: 'Primer borrador más claro',
+                excerpt: 'Reescribe esta idea inicial como un primer borrador claro, con un tono amable y práctico. Mantén la estructura fácil de escanear y señala el contexto faltante.',
+                context: 'Guardado después de producir un flujo útil para primeros borradores.',
+            },
+            planning: {
+                category: 'Planeación',
+                title: 'Planificador de enfoque semanal',
+                excerpt: 'Convierte estas tareas dispersas en un plan semanal realista. Agrupa el trabajo relacionado, identifica el siguiente paso de mayor impacto y señala riesgos.',
+                context: 'Confiable para convertir listas desordenadas en enfoque semanal.',
+            },
+            codeReview: {
+                category: 'Revisión de código',
+                title: 'Checklist para revisar APIs',
+                excerpt: 'Revisa este endpoint para detectar brechas de autorización, esquemas inseguros, validación faltante y cobertura de pruebas de regresión. Devuelve hallazgos por severidad.',
+                context: 'Útil antes de integrar cambios de API.',
+            },
+            learning: {
+                category: 'Aprendizaje',
+                title: 'Explícame y evalúame',
+                excerpt: 'Explica este concepto con palabras simples y luego hazme cinco preguntas progresivas para verificar si puedo aplicarlo sin memorizar.',
+                context: 'Conservado para sesiones de estudio y preparación de entrevistas.',
+            },
+        },
+    },
+    auth: {
+        loginTitle: 'Bienvenido de vuelta',
+        loginDescription: 'Inicia sesión para volver a la biblioteca de prompts que estás construyendo.',
+        registered: 'Cuenta creada con el rol de usuario predeterminado. Inicia sesión con tus nuevas credenciales.',
+        username: 'Usuario',
+        password: 'Contraseña',
+        signingIn: 'Iniciando sesión...',
+        forgotPassword: '¿Olvidaste tu contraseña?',
+        needAccount: '¿Necesitas una cuenta? Crea una',
+        registerTitle: 'Crea tu biblioteca de prompts',
+        registerDescription: 'Empieza a guardar los prompts que te ahorran tiempo cada semana.',
+        firstName: 'Nombre',
+        lastName: 'Apellido',
+        email: 'Correo electrónico',
+        creating: 'Creando...',
+        alreadyHaveAccount: '¿Ya tienes una cuenta?',
+        invalidCredentials: 'Credenciales inválidas',
+        unableToLogin: 'No se pudo iniciar sesión',
+        checkRegistration: 'Revisa los datos de registro',
+        unableToCreate: 'No se pudo crear la cuenta',
+        usernameTaken: 'El usuario ya está en uso',
+        backToLanding: 'Volver al inicio',
+    },
+    recovery: {
+        title: 'Recuperar acceso',
+        description: 'Solicita una clave de recuperación y canjéala por una contraseña temporal.',
+        requestTitle: 'Solicita una clave',
+        redeemTitle: 'Canjea tu clave',
+        username: 'Usuario',
+        key: 'Clave de recuperación',
+        requesting: 'Solicitando...',
+        checking: 'Verificando...',
+        requestButton: 'Solicitar clave de recuperación',
+        redeemButton: 'Canjear clave',
+        temporaryPassword: 'Contraseña temporal',
+        temporaryPasswordHelp: 'Usa esta contraseña para iniciar sesión y luego actualízala.',
+        returnToLogin: 'Volver al inicio de sesión',
+        invalidUsername: 'Usuario inválido',
+        invalidKey: 'Clave de recuperación inválida',
+        unableToRequest: 'No se pudo solicitar la clave de recuperación',
+        unableToRedeem: 'No se pudo canjear la clave de recuperación',
+    },
+    prompts: {
+        eyebrow: 'Catálogo',
+        title: 'Tu biblioteca de prompts',
+        description: 'Guarda los prompts que funcionaron, luego encuéntralos y reutilízalos más rápido.',
+        edit: 'Editar prompt',
+        create: 'Guardar un prompt probado',
+        listTitle: 'Prompts guardados',
+        listDescription: 'Abre cualquier tarjeta para revisar modelo, categoría, calificación y texto completo del prompt.',
+        dropdownError: 'No se pudieron cargar las opciones desplegables',
+        deleteTitle: '¿Eliminar prompt?',
+        deleteDescription: 'Esto elimina el prompt de tu catálogo. Esta acción no se puede deshacer.',
+        deleteConfirm: 'Eliminar prompt',
+        emptyTitle: 'Aún no hay prompts',
+        emptyDescription: 'Guarda tu primer prompt probado para empezar a construir tu catálogo reutilizable.',
+        viewDetails: 'Ver detalles del prompt',
+        stats: {
+            total: 'Prompts totales',
+            averageRating: 'Calificación promedio',
+            categories: 'Categorías',
+            emptyRating: 'Sin calificaciones aún',
+        },
+        form: {
+            model: 'Modelo',
+            prompt: 'Texto del prompt',
+            category: 'Categoría',
+            rating: 'Calificación',
+            add: 'Agregar prompt',
+            update: 'Actualizar prompt',
+            knownModel: 'Selecciona un modelo conocido de la lista.',
+            invalid: 'Datos del formulario inválidos',
+            promptPlaceholder: 'Pega el prompt que funcionó, incluyendo restricciones o contexto que quieras reutilizar.',
+        },
+        detail: {
+            title: 'Detalles del prompt',
+            model: 'Modelo',
+            prompt: 'Prompt',
+            category: 'Categoría',
+            rating: 'Señal de calidad',
+        },
+        errors: {
+            sessionUnavailable: 'La sesión no está disponible',
+            selectedUnavailable: 'La sesión o el prompt seleccionado no está disponible',
+            create: 'No se pudo crear el prompt',
+            update: 'No se pudo actualizar el prompt',
+            delete: 'No se pudo eliminar el prompt',
+        },
+    },
+    admin: {
+        title: 'Monitor de administración',
+        visibleCount: '{{count}} prompts visibles para {{role}}.',
+        filters: {
+            userId: 'ID de usuario',
+            model: 'Modelo',
+            category: 'Categoría',
+            rating: 'Calificación',
+            clear: 'Limpiar filtros',
+        },
+        editTitle: 'Editar prompt como god',
+        allPrompts: 'Todos los prompts',
+        promptMeta: 'Usuario {{userId}} · {{category}} · Calificación {{rating}}/5',
+        noPrompts: 'No se encontraron prompts.',
+        deleteTitle: '¿Eliminar este prompt?',
+        deleteDescription: 'Esto elimina el prompt seleccionado del catálogo para toda vista de administración.',
+        deleteConfirm: 'Eliminar prompt',
+        unableToLoad: 'No se pudieron cargar los prompts',
+        errors: {
+            selectedUnavailable: 'La sesión o el prompt seleccionado no está disponible',
+            sessionUnavailable: 'La sesión no está disponible',
+            update: 'No se pudo actualizar el prompt',
+            delete: 'No se pudo eliminar el prompt',
+        },
+    },
+} as const
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 3f9e9e4..cf00aa0 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,10 +3,14 @@ import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import { AppProviders } from './app/providers'
 import { router } from './app/router'
+import './i18n'
+import { applyTheme, getInitialTheme } from './lib/utils/theme'
 import './styles/tokens.css'
 import './styles/themes.css'
 import './styles/base.css'
 
+applyTheme(getInitialTheme())
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <AppProviders>
diff --git a/frontend/src/pages/admin/admin-prompts-page.tsx b/frontend/src/pages/admin/admin-prompts-page.tsx
index 3065f96..2ed7eb6 100644
--- a/frontend/src/pages/admin/admin-prompts-page.tsx
+++ b/frontend/src/pages/admin/admin-prompts-page.tsx
@@ -1,8 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { PromptForm } from '../../components/prompts/prompt-form'
 import { Button } from '../../components/ui/button'
 import { Card } from '../../components/ui/card'
+import { ConfirmDialog } from '../../components/ui/confirm-dialog'
 import { InlineError } from '../../components/ui/inline-error'
 import { Input } from '../../components/ui/input'
 import { Select } from '../../components/ui/select'
@@ -28,11 +30,13 @@ const ratingOptions = [1, 2, 3, 4, 5].map((rating) => ({
 }))
 
 export function AdminPromptsPage() {
+    const { t } = useTranslation()
     const { session } = useAuth()
     const queryClient = useQueryClient()
     const [filters, setFilters] = useState<PromptFilters>({})
     const [userFilter, setUserFilter] = useState('')
     const [editingPrompt, setEditingPrompt] = useState<PromptRecord | null>(null)
+    const [promptToDelete, setPromptToDelete] = useState<PromptRecord | null>(null)
     const [error, setError] = useState<string | null>(null)
 
     const token = session.token
@@ -70,7 +74,7 @@ export function AdminPromptsPage() {
     const updateMutation = useMutation({
         mutationFn: async (value: PromptInput) => {
             if (!token || !editingPrompt) {
-                throw new Error('Session or selected prompt is not available')
+                throw new Error(t('admin.errors.selectedUnavailable'))
             }
             return updatePrompt(token, editingPrompt.id, editingPrompt.user_id, value)
         },
@@ -80,14 +84,14 @@ export function AdminPromptsPage() {
             setError(null)
         },
         onError: (err) => {
-            setError(err instanceof Error ? err.message : 'Unable to update prompt')
+            setError(err instanceof Error ? err.message : t('admin.errors.update'))
         },
     })
 
     const deleteMutation = useMutation({
         mutationFn: async (prompt: PromptRecord) => {
             if (!token) {
-                throw new Error('Session is not available')
+                throw new Error(t('admin.errors.sessionUnavailable'))
             }
             return deletePrompt(token, prompt.id)
         },
@@ -96,7 +100,7 @@ export function AdminPromptsPage() {
             setError(null)
         },
         onError: (err) => {
-            setError(err instanceof Error ? err.message : 'Unable to delete prompt')
+            setError(err instanceof Error ? err.message : t('admin.errors.delete'))
         },
     })
 
@@ -108,10 +112,11 @@ export function AdminPromptsPage() {
         }))
     }
 
-    const handleDelete = (prompt: PromptRecord) => {
-        const confirmed = window.confirm('Delete this prompt?')
-        if (!confirmed) return
-        deleteMutation.mutate(prompt)
+    const handleDelete = () => {
+        if (!promptToDelete) return
+        deleteMutation.mutate(promptToDelete, {
+            onSuccess: () => setPromptToDelete(null),
+        })
     }
 
     return (
@@ -119,9 +124,9 @@ export function AdminPromptsPage() {
             <Card className="stack">
                 <div className="section-heading">
                     <div>
-                        <h1>Admin Monitor</h1>
+                        <h1>{t('admin.title')}</h1>
                         <p className="muted">
-                            {promptsQuery.data?.length ?? 0} prompts visible to {session.role}.
+                            {t('admin.visibleCount', { count: promptsQuery.data?.length ?? 0, role: session.role })}
                         </p>
                     </div>
                     <span className="badge">{session.role}</span>
@@ -129,7 +134,7 @@ export function AdminPromptsPage() {
 
                 <div className="filter-grid">
                     <Input
-                        label="User ID"
+                        label={t('admin.filters.userId')}
                         type="number"
                         min="1"
                         value={userFilter}
@@ -137,8 +142,9 @@ export function AdminPromptsPage() {
                         onBlur={applyUserFilter}
                     />
                     <Select
-                        label="Model"
+                        label={t('admin.filters.model')}
                         options={modelsQuery.data?.items ?? []}
+                        placeholder={t('common.selectOption')}
                         value={filters.model_name ?? ''}
                         onChange={(event) =>
                             setFilters((prev) => ({
@@ -148,8 +154,9 @@ export function AdminPromptsPage() {
                         }
                     />
                     <Select
-                        label="Category"
+                        label={t('admin.filters.category')}
                         options={categoriesQuery.data?.items ?? []}
+                        placeholder={t('common.selectOption')}
                         value={filters.category ?? ''}
                         onChange={(event) =>
                             setFilters((prev) => ({
@@ -159,8 +166,9 @@ export function AdminPromptsPage() {
                         }
                     />
                     <Select
-                        label="Rating"
+                        label={t('admin.filters.rating')}
                         options={ratingOptions}
+                        placeholder={t('common.selectOption')}
                         value={filters.rate ? String(filters.rate) : ''}
                         onChange={(event) =>
                             setFilters((prev) => ({
@@ -178,13 +186,13 @@ export function AdminPromptsPage() {
                         setUserFilter('')
                     }}
                 >
-                    Clear filters
+                    {t('admin.filters.clear')}
                 </Button>
             </Card>
 
             {editingPrompt && isGod ? (
                 <Card>
-                    <h2>Edit prompt as god</h2>
+                    <h2>{t('admin.editTitle')}</h2>
                     <PromptForm
                         key={editingPrompt.id}
                         initialValue={editingPrompt}
@@ -201,15 +209,15 @@ export function AdminPromptsPage() {
             ) : null}
 
             <Card>
-                <h2>All prompts</h2>
-                {promptsQuery.isLoading ? <p className="muted">Loading...</p> : null}
+                <h2>{t('admin.allPrompts')}</h2>
+                {promptsQuery.isLoading ? <p className="muted">{t('common.loading')}</p> : null}
                 {error || promptsQuery.error ? (
                     <InlineError
                         message={
                             error ??
                             (promptsQuery.error instanceof Error
                                 ? promptsQuery.error.message
-                                : 'Unable to load prompts')
+                                : t('admin.unableToLoad'))
                         }
                     />
                 ) : null}
@@ -220,24 +228,34 @@ export function AdminPromptsPage() {
                                 <h3>{prompt.model_name}</h3>
                                 <p>{prompt.prompt_text}</p>
                                 <p className="muted">
-                                    User {prompt.user_id} · {prompt.category} · Rating {prompt.rate}/5
+                                    {t('admin.promptMeta', { userId: prompt.user_id, category: prompt.category, rating: prompt.rate })}
                                 </p>
                             </div>
                             {isGod ? (
                                 <div className="row gap-sm">
                                     <Button variant="ghost" onClick={() => setEditingPrompt(prompt)}>
-                                        Edit
+                                        {t('common.edit')}
                                     </Button>
-                                    <Button variant="danger" onClick={() => handleDelete(prompt)}>
-                                        Delete
+                                    <Button variant="danger" onClick={() => setPromptToDelete(prompt)}>
+                                        {t('common.delete')}
                                     </Button>
                                 </div>
                             ) : null}
                         </article>
                     ))}
                 </div>
-                {promptsQuery.data?.length === 0 ? <p className="muted">No prompts found.</p> : null}
+                {promptsQuery.data?.length === 0 ? <p className="muted">{t('admin.noPrompts')}</p> : null}
             </Card>
+            <ConfirmDialog
+                open={Boolean(promptToDelete)}
+                title={t('admin.deleteTitle')}
+                description={t('admin.deleteDescription')}
+                confirmLabel={t('admin.deleteConfirm')}
+                cancelLabel={t('common.cancel')}
+                busy={deleteMutation.isPending}
+                onCancel={() => setPromptToDelete(null)}
+                onConfirm={handleDelete}
+            />
         </section>
     )
 }
diff --git a/frontend/src/pages/landing/landing-page.tsx b/frontend/src/pages/landing/landing-page.tsx
index bc598e7..6df0300 100644
--- a/frontend/src/pages/landing/landing-page.tsx
+++ b/frontend/src/pages/landing/landing-page.tsx
@@ -1,61 +1,115 @@
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import { LanguageSwitcher } from '../../components/i18n/language-switcher'
 import { Badge } from '../../components/ui/badge'
 import { Card } from '../../components/ui/card'
-
-const features = [
-    'Search prompts by content, model, category, and rating',
-    'Reuse proven prompts with copy, edit, duplicate, and delete actions',
-    'Admin-ready RBAC with prompt monitoring and future analytics',
-]
+import { ThemeToggle } from '../../components/ui/theme-toggle'
+import { landingSamples } from './landing-samples'
 
 export function LandingPage() {
+    const { t } = useTranslation()
+    const benefits = t('landing.benefits', { returnObjects: true }) as Array<{ title: string; copy: string }>
+    const workflow = t('landing.workflow', { returnObjects: true }) as string[]
+
     return (
         <main className="marketing-page">
             <nav className="marketing-nav">
-                <strong>Prompt Catalog</strong>
-                <div className="row gap-sm">
-                    <Link className="text-link" to="/login">Sign in</Link>
-                    <Link to="/register" className="button-link">Create account</Link>
+                <Link className="brand-mark" to="/">
+                    <span className="brand-dot" aria-hidden="true" />
+                    <span>{t('app.name')}</span>
+                </Link>
+                <div className="topbar-actions">
+                    <LanguageSwitcher />
+                    <ThemeToggle />
+                    <Link className="text-link" to="/login">{t('nav.signIn')}</Link>
+                    <a href="#preview" className="button-link button-link-secondary">{t('landing.primaryCta')}</a>
                 </div>
             </nav>
             <section className="hero-grid">
-                <div className="stack">
-                    <Badge tone="accent">Portfolio-ready full-stack product</Badge>
-                    <h1 className="hero-title">Build your personal catalog of prompts that actually work.</h1>
+                <div className="stack hero-content">
+                    <Badge tone="accent">{t('landing.badge')}</Badge>
+                    <h1 className="hero-title">{t('landing.title')}</h1>
                     <p className="hero-copy">
-                        Save, classify, rate, and reuse AI prompts with a focused catalog experience backed by FastAPI, JWT auth, MariaDB, Redis, and React Query.
+                        {t('landing.copy')}
                     </p>
                     <div className="row gap-sm wrap">
-                        <Link to="/register" className="button-link">Create account</Link>
-                        <Link to="/login" className="button-link button-link-secondary">Sign in</Link>
+                        <a href="#preview" className="button-link">{t('landing.primaryCta')}</a>
+                        <Link to="/register" className="button-link button-link-secondary">{t('landing.secondaryCta')}</Link>
                     </div>
                 </div>
-                <Card className="showcase-card">
-                    <div className="section-heading">
-                        <Badge tone="accent">GPT-4</Badge>
-                        <span className="badge">Rating 5/5</span>
+                <div className="hero-notebook" aria-hidden="true">
+                    <div className="notebook-line notebook-line-strong" />
+                    <div className="notebook-line" />
+                    <div className="notebook-chip-row">
+                        <span />
+                        <span />
+                        <span />
                     </div>
-                    <h2>Reusable Architecture Reviewer</h2>
-                    <p>
-                        Review this API endpoint for authorization gaps, unsafe schemas, and missing regression tests. Return findings by severity.
-                    </p>
-                    <p className="muted">Category: code-review · Owner: you</p>
-                </Card>
+                    <div className="notebook-card">
+                        <strong>{t('landing.samples.writing.title')}</strong>
+                        <p>{t('landing.samples.writing.context')}</p>
+                    </div>
+                </div>
             </section>
-            <section className="feature-grid">
-                {features.map((feature) => (
-                    <Card key={feature}>
-                        <h3>{feature}</h3>
-                        <p className="muted">Designed to turn a basic CRUD into a product recruiters and users can understand quickly.</p>
+
+            <section id="preview" className="preview-section" aria-labelledby="preview-title" tabIndex={-1}>
+                <div className="section-heading preview-heading">
+                    <div>
+                        <p className="eyebrow">{t('landing.previewEyebrow')}</p>
+                        <h2 id="preview-title">{t('landing.previewTitle')}</h2>
+                    </div>
+                    <p className="muted preview-copy">{t('landing.previewCopy')}</p>
+                </div>
+                <div className="sample-grid">
+                    {landingSamples.map((sample) => (
+                        <Card key={sample.id} className={`sample-card sample-card-${sample.tone}`}>
+                            <div className="section-heading">
+                                <Badge tone="accent">{sample.model}</Badge>
+                                <span className="badge">{t('common.rating', { value: sample.rating })}</span>
+                            </div>
+                            <div className="stack gap-tight">
+                                <p className="sample-category">{t(sample.categoryKey)}</p>
+                                <h3>{t(sample.titleKey)}</h3>
+                                <p>{t(sample.excerptKey)}</p>
+                                <p className="muted">{t(sample.contextKey)}</p>
+                            </div>
+                        </Card>
+                    ))}
+                </div>
+            </section>
+
+            <section className="feature-grid" aria-label={t('landing.benefitsLabel')}>
+                {benefits.map((benefit) => (
+                    <Card key={benefit.title} className="benefit-card">
+                        <h3>{benefit.title}</h3>
+                        <p className="muted">{benefit.copy}</p>
                     </Card>
                 ))}
             </section>
-            <section className="architecture-strip">
-                <span>React + TypeScript + Vite</span>
-                <span>FastAPI JWT APIs</span>
-                <span>MariaDB + Redis</span>
-                <a href="http://127.0.0.1:8000/docs" target="_blank" rel="noreferrer">Local API docs</a>
+
+            <section className="workflow-strip" aria-label={t('landing.workflowLabel')}>
+                {workflow.map((step, index) => (
+                    <span key={step}>
+                        <strong>{index + 1}</strong>
+                        {step}
+                    </span>
+                ))}
+            </section>
+
+            <section className="final-cta">
+                <div>
+                    <h2>{t('landing.finalCtaTitle')}</h2>
+                    <p className="muted">{t('landing.finalCtaCopy')}</p>
+                </div>
+                <Link to="/register" className="button-link">{t('landing.finalCtaButton')}</Link>
             </section>
+
+            <footer className="marketing-footer">
+                <span>{t('landing.footerOwner')}</span>
+                <a href="https://github.com/luisfponce/web_api_knowledge" target="_blank" rel="noreferrer">
+                    {t('landing.footerGithub')}
+                </a>
+            </footer>
         </main>
     )
 }
diff --git a/frontend/src/pages/landing/landing-samples.ts b/frontend/src/pages/landing/landing-samples.ts
new file mode 100644
index 0000000..21fe549
--- /dev/null
+++ b/frontend/src/pages/landing/landing-samples.ts
@@ -0,0 +1,53 @@
+export type LandingSample = {
+    id: string
+    titleKey: string
+    excerptKey: string
+    categoryKey: string
+    contextKey: string
+    model: string
+    rating: number
+    tone: 'amber' | 'coral' | 'violet' | 'blue'
+}
+
+export const landingSamples: LandingSample[] = [
+    {
+        id: 'writing-draft',
+        titleKey: 'landing.samples.writing.title',
+        excerptKey: 'landing.samples.writing.excerpt',
+        categoryKey: 'landing.samples.writing.category',
+        contextKey: 'landing.samples.writing.context',
+        model: 'GPT-4',
+        rating: 5,
+        tone: 'amber',
+    },
+    {
+        id: 'planning-focus',
+        titleKey: 'landing.samples.planning.title',
+        excerptKey: 'landing.samples.planning.excerpt',
+        categoryKey: 'landing.samples.planning.category',
+        contextKey: 'landing.samples.planning.context',
+        model: 'Claude',
+        rating: 5,
+        tone: 'coral',
+    },
+    {
+        id: 'api-review',
+        titleKey: 'landing.samples.codeReview.title',
+        excerptKey: 'landing.samples.codeReview.excerpt',
+        categoryKey: 'landing.samples.codeReview.category',
+        contextKey: 'landing.samples.codeReview.context',
+        model: 'GPT-4',
+        rating: 5,
+        tone: 'violet',
+    },
+    {
+        id: 'learning-quiz',
+        titleKey: 'landing.samples.learning.title',
+        excerptKey: 'landing.samples.learning.excerpt',
+        categoryKey: 'landing.samples.learning.category',
+        contextKey: 'landing.samples.learning.context',
+        model: 'Gemini',
+        rating: 4,
+        tone: 'blue',
+    },
+]
diff --git a/frontend/src/pages/login/login-page.tsx b/frontend/src/pages/login/login-page.tsx
index aaf982f..cbbcce6 100644
--- a/frontend/src/pages/login/login-page.tsx
+++ b/frontend/src/pages/login/login-page.tsx
@@ -1,13 +1,17 @@
 import { useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { Card } from '../../components/ui/card'
 import { InlineError } from '../../components/ui/inline-error'
 import { Button } from '../../components/ui/button'
 import { Input } from '../../components/ui/input'
+import { LanguageSwitcher } from '../../components/i18n/language-switcher'
+import { ThemeToggle } from '../../components/ui/theme-toggle'
 import { useAuth } from '../../features/auth/auth-store'
 import { loginSchema } from '../../lib/validation/auth-schemas'
 
 export function LoginPage() {
+    const { t } = useTranslation()
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const { login } = useAuth()
@@ -21,7 +25,7 @@ export function LoginPage() {
 
         const parsed = loginSchema.safeParse({ username, password })
         if (!parsed.success) {
-            setError(parsed.error.issues[0]?.message ?? 'Invalid credentials')
+            setError(parsed.error.issues[0]?.message ?? t('auth.invalidCredentials'))
             return
         }
 
@@ -31,7 +35,7 @@ export function LoginPage() {
             await login(parsed.data.username, parsed.data.password)
             navigate('/app/prompts', { replace: true })
         } catch (err) {
-            setError(err instanceof Error ? err.message : 'Unable to login')
+            setError(err instanceof Error ? err.message : t('auth.unableToLogin'))
         } finally {
             setLoading(false)
         }
@@ -39,38 +43,55 @@ export function LoginPage() {
 
     return (
         <div className="centered-page auth-gradient">
-            <Card className="auth-card">
-                <h1>Login</h1>
-                <p className="muted">Use your API account credentials.</p>
-                <form className="stack" onSubmit={onSubmit}>
-                    {searchParams.get('registered') ? (
-                        <div className="success-panel">Account created with the default user role. Sign in with your new credentials.</div>
-                    ) : null}
-                    <Input
-                        label="Username"
-                        value={username}
-                        onChange={(event) => setUsername(event.target.value)}
-                        autoComplete="username"
-                    />
-                    <Input
-                        label="Password"
-                        value={password}
-                        type="password"
-                        onChange={(event) => setPassword(event.target.value)}
-                        autoComplete="current-password"
-                    />
-                    {error ? <InlineError message={error} /> : null}
-                    <Button type="submit" disabled={loading}>
-                        {loading ? 'Signing in...' : 'Sign in'}
-                    </Button>
-                    <Link className="text-link" to="/recovery">
-                        Forgot password?
+            <div className="auth-frame">
+                <div className="auth-public-bar">
+                    <Link className="brand-mark" to="/">
+                        <span className="brand-dot" aria-hidden="true" />
+                        <span>{t('app.name')}</span>
                     </Link>
-                    <Link className="text-link" to="/register">
-                        Need an account? Create one
-                    </Link>
-                </form>
-            </Card>
+                    <div className="row gap-sm wrap">
+                        <LanguageSwitcher />
+                        <ThemeToggle />
+                    </div>
+                </div>
+                <Card className="auth-card">
+                    <div>
+                        <h1>{t('auth.loginTitle')}</h1>
+                        <p className="muted">{t('auth.loginDescription')}</p>
+                    </div>
+                    <form className="stack" onSubmit={onSubmit}>
+                        {searchParams.get('registered') ? (
+                            <div className="success-panel">{t('auth.registered')}</div>
+                        ) : null}
+                        <Input
+                            label={t('auth.username')}
+                            value={username}
+                            onChange={(event) => setUsername(event.target.value)}
+                            autoComplete="username"
+                        />
+                        <Input
+                            label={t('auth.password')}
+                            value={password}
+                            type="password"
+                            onChange={(event) => setPassword(event.target.value)}
+                            autoComplete="current-password"
+                        />
+                        {error ? <InlineError message={error} /> : null}
+                        <Button type="submit" disabled={loading}>
+                            {loading ? t('auth.signingIn') : t('nav.signIn')}
+                        </Button>
+                        <Link className="text-link" to="/recovery">
+                            {t('auth.forgotPassword')}
+                        </Link>
+                        <Link className="text-link" to="/register">
+                            {t('auth.needAccount')}
+                        </Link>
+                        <Link className="text-link" to="/">
+                            {t('auth.backToLanding')}
+                        </Link>
+                    </form>
+                </Card>
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/pages/prompts/prompts-page.tsx b/frontend/src/pages/prompts/prompts-page.tsx
index 853521f..92eadb3 100644
--- a/frontend/src/pages/prompts/prompts-page.tsx
+++ b/frontend/src/pages/prompts/prompts-page.tsx
@@ -1,5 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/ui/card'
 import { ConfirmDialog } from '../../components/ui/confirm-dialog'
 import { InlineError } from '../../components/ui/inline-error'
@@ -23,6 +24,7 @@ import type {
 } from '../../features/prompts/prompts-types'
 
 export function PromptsPage() {
+    const { t } = useTranslation()
     const { session } = useAuth()
     const queryClient = useQueryClient()
     const [editingPrompt, setEditingPrompt] = useState<PromptRecord | null>(null)
@@ -68,7 +70,7 @@ export function PromptsPage() {
     const createMutation = useMutation({
         mutationFn: async (value: PromptInput) => {
             if (!token) {
-                throw new Error('Session is not available')
+                throw new Error(t('prompts.errors.sessionUnavailable'))
             }
             return createPrompt(token, userId, value)
         },
@@ -77,14 +79,14 @@ export function PromptsPage() {
             setError(null)
         },
         onError: (err) => {
-            setError(err instanceof Error ? err.message : 'Unable to create prompt')
+            setError(err instanceof Error ? err.message : t('prompts.errors.create'))
         },
     })
 
     const updateMutation = useMutation({
         mutationFn: async (value: PromptInput) => {
             if (!token || userId === null || !editingPrompt) {
-                throw new Error('Session or selected prompt is not available')
+                throw new Error(t('prompts.errors.selectedUnavailable'))
             }
             return updatePrompt(token, editingPrompt.id, userId, value)
         },
@@ -94,14 +96,14 @@ export function PromptsPage() {
             setError(null)
         },
         onError: (err) => {
-            setError(err instanceof Error ? err.message : 'Unable to update prompt')
+            setError(err instanceof Error ? err.message : t('prompts.errors.update'))
         },
     })
 
     const deleteMutation = useMutation({
         mutationFn: async (prompt: PromptRecord) => {
             if (!token) {
-                throw new Error('Session is not available')
+                throw new Error(t('prompts.errors.sessionUnavailable'))
             }
             return deletePrompt(token, prompt.id)
         },
@@ -110,7 +112,7 @@ export function PromptsPage() {
             setError(null)
         },
         onError: (err) => {
-            setError(err instanceof Error ? err.message : 'Unable to delete prompt')
+            setError(err instanceof Error ? err.message : t('prompts.errors.delete'))
         },
     })
 
@@ -130,15 +132,37 @@ export function PromptsPage() {
         })
     }
 
+    const prompts = promptsQuery.data ?? []
+    const averageRating = prompts.length
+        ? prompts.reduce((total, prompt) => total + prompt.rate, 0) / prompts.length
+        : 0
+    const categoryCount = new Set(prompts.map((prompt) => prompt.category)).size
+
     return (
         <section className="stack">
             <PageHeader
-                eyebrow="Catalog"
-                title="Your prompt library"
-                description="Save the prompts that worked, then find and reuse them faster."
+                eyebrow={t('prompts.eyebrow')}
+                title={t('prompts.title')}
+                description={t('prompts.description')}
             />
-            <Card>
-                <h1>{editingPrompt ? 'Edit prompt' : 'Create prompt'}</h1>
+
+            <div className="stats-grid">
+                <Card className="stat-card">
+                    <span className="label">{t('prompts.stats.total')}</span>
+                    <strong>{prompts.length}</strong>
+                </Card>
+                <Card className="stat-card">
+                    <span className="label">{t('prompts.stats.averageRating')}</span>
+                    <strong>{prompts.length ? t('common.rating', { value: averageRating.toFixed(1) }) : t('prompts.stats.emptyRating')}</strong>
+                </Card>
+                <Card className="stat-card">
+                    <span className="label">{t('prompts.stats.categories')}</span>
+                    <strong>{categoryCount}</strong>
+                </Card>
+            </div>
+
+            <Card className="composer-card">
+                <h1>{editingPrompt ? t('prompts.edit') : t('prompts.create')}</h1>
                 <PromptForm
                     key={editingPrompt?.id ?? 'new-prompt'}
                     initialValue={editingPrompt}
@@ -150,17 +174,22 @@ export function PromptsPage() {
                     onCancelEdit={() => setEditingPrompt(null)}
                 />
                 {categoriesQuery.error || modelsQuery.error ? (
-                    <InlineError message="Unable to load dropdown options" />
+                    <InlineError message={t('prompts.dropdownError')} />
                 ) : null}
             </Card>
 
-            <Card>
-                <h2>Your prompts</h2>
-                {promptsQuery.isLoading ? <p className="muted">Loading...</p> : null}
+            <Card className="library-card">
+                <div className="section-heading">
+                    <div>
+                        <h2>{t('prompts.listTitle')}</h2>
+                        <p className="muted">{t('prompts.listDescription')}</p>
+                    </div>
+                </div>
+                {promptsQuery.isLoading ? <p className="muted">{t('common.loading')}</p> : null}
                 {error ? <InlineError message={error} /> : null}
                 {promptsQuery.data ? (
                     <PromptList
-                        prompts={promptsQuery.data}
+                        prompts={prompts}
                         onEdit={setEditingPrompt}
                         onDelete={setPromptToDelete}
                     />
@@ -168,9 +197,10 @@ export function PromptsPage() {
             </Card>
             <ConfirmDialog
                 open={Boolean(promptToDelete)}
-                title="Delete prompt?"
-                description="This removes the prompt from your catalog. This action cannot be undone."
-                confirmLabel="Delete prompt"
+                title={t('prompts.deleteTitle')}
+                description={t('prompts.deleteDescription')}
+                confirmLabel={t('prompts.deleteConfirm')}
+                cancelLabel={t('common.cancel')}
                 busy={deleteMutation.isPending}
                 onCancel={() => setPromptToDelete(null)}
                 onConfirm={handleDelete}
diff --git a/frontend/src/pages/recovery/recovery-page.tsx b/frontend/src/pages/recovery/recovery-page.tsx
index 6b0f9d9..2e6ee41 100644
--- a/frontend/src/pages/recovery/recovery-page.tsx
+++ b/frontend/src/pages/recovery/recovery-page.tsx
@@ -1,9 +1,12 @@
 import { useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
+import { LanguageSwitcher } from '../../components/i18n/language-switcher'
 import { Button } from '../../components/ui/button'
 import { Card } from '../../components/ui/card'
 import { InlineError } from '../../components/ui/inline-error'
 import { Input } from '../../components/ui/input'
+import { ThemeToggle } from '../../components/ui/theme-toggle'
 import { redeemRecoveryKey, requestRecoveryKey } from '../../features/auth/auth-service'
 import {
     recoveryRedeemSchema,
@@ -11,6 +14,7 @@ import {
 } from '../../lib/validation/auth-schemas'
 
 export function RecoveryPage() {
+    const { t } = useTranslation()
     const [username, setUsername] = useState('')
     const [key, setKey] = useState('')
     const [message, setMessage] = useState<string | null>(null)
@@ -22,7 +26,7 @@ export function RecoveryPage() {
         event.preventDefault()
         const parsed = recoveryRequestSchema.safeParse({ username })
         if (!parsed.success) {
-            setError(parsed.error.issues[0]?.message ?? 'Invalid username')
+            setError(parsed.error.issues[0]?.message ?? t('recovery.invalidUsername'))
             return
         }
 
@@ -33,7 +37,7 @@ export function RecoveryPage() {
             const response = await requestRecoveryKey(parsed.data)
             setMessage(response.message)
         } catch (err) {
-            setError(err instanceof Error ? err.message : 'Unable to request recovery key')
+            setError(err instanceof Error ? err.message : t('recovery.unableToRequest'))
         } finally {
             setLoading(false)
         }
@@ -43,7 +47,7 @@ export function RecoveryPage() {
         event.preventDefault()
         const parsed = recoveryRedeemSchema.safeParse({ key })
         if (!parsed.success) {
-            setError(parsed.error.issues[0]?.message ?? 'Invalid recovery key')
+            setError(parsed.error.issues[0]?.message ?? t('recovery.invalidKey'))
             return
         }
 
@@ -53,57 +57,71 @@ export function RecoveryPage() {
             const response = await redeemRecoveryKey(parsed.data)
             setTemporaryPassword(response.password)
         } catch (err) {
-            setError(err instanceof Error ? err.message : 'Unable to redeem recovery key')
+            setError(err instanceof Error ? err.message : t('recovery.unableToRedeem'))
         } finally {
             setLoading(false)
         }
     }
 
     return (
-        <div className="centered-page">
-            <Card className="auth-card stack">
-                <div>
-                    <h1>Recovery</h1>
-                    <p className="muted">Request a recovery key, then redeem it for your temporary password.</p>
+        <div className="centered-page auth-gradient">
+            <div className="auth-frame">
+                <div className="auth-public-bar">
+                    <Link className="brand-mark" to="/">
+                        <span className="brand-dot" aria-hidden="true" />
+                        <span>{t('app.name')}</span>
+                    </Link>
+                    <div className="row gap-sm wrap">
+                        <LanguageSwitcher />
+                        <ThemeToggle />
+                    </div>
                 </div>
+                <Card className="auth-card stack">
+                    <div>
+                        <h1>{t('recovery.title')}</h1>
+                        <p className="muted">{t('recovery.description')}</p>
+                    </div>
 
-                <form className="stack" onSubmit={handleRequest}>
-                    <Input
-                        label="Username"
-                        value={username}
-                        onChange={(event) => setUsername(event.target.value)}
-                        autoComplete="username"
-                    />
-                    <Button type="submit" disabled={loading}>
-                        {loading ? 'Requesting...' : 'Request recovery key'}
-                    </Button>
-                </form>
+                    <form className="stack auth-subcard" onSubmit={handleRequest}>
+                        <h2>{t('recovery.requestTitle')}</h2>
+                        <Input
+                            label={t('recovery.username')}
+                            value={username}
+                            onChange={(event) => setUsername(event.target.value)}
+                            autoComplete="username"
+                        />
+                        <Button type="submit" disabled={loading}>
+                            {loading ? t('recovery.requesting') : t('recovery.requestButton')}
+                        </Button>
+                    </form>
 
-                <form className="stack" onSubmit={handleRedeem}>
-                    <Input
-                        label="Recovery key"
-                        value={key}
-                        onChange={(event) => setKey(event.target.value)}
-                        autoComplete="off"
-                    />
-                    <Button type="submit" disabled={loading} variant="ghost">
-                        {loading ? 'Checking...' : 'Redeem key'}
-                    </Button>
-                </form>
+                    <form className="stack auth-subcard" onSubmit={handleRedeem}>
+                        <h2>{t('recovery.redeemTitle')}</h2>
+                        <Input
+                            label={t('recovery.key')}
+                            value={key}
+                            onChange={(event) => setKey(event.target.value)}
+                            autoComplete="off"
+                        />
+                        <Button type="submit" disabled={loading} variant="ghost">
+                            {loading ? t('recovery.checking') : t('recovery.redeemButton')}
+                        </Button>
+                    </form>
 
-                {message ? <p className="muted">{message}</p> : null}
-                {temporaryPassword ? (
-                    <div className="result-panel">
-                        <span className="label">Temporary password</span>
-                        <strong>{temporaryPassword}</strong>
-                        <p className="muted">Use this password to sign in, then update it.</p>
-                    </div>
-                ) : null}
-                {error ? <InlineError message={error} /> : null}
-                <Link className="text-link" to="/login">
-                    Return to login
-                </Link>
-            </Card>
+                    {message ? <p className="muted">{message}</p> : null}
+                    {temporaryPassword ? (
+                        <div className="result-panel">
+                            <span className="label">{t('recovery.temporaryPassword')}</span>
+                            <strong>{temporaryPassword}</strong>
+                            <p className="muted">{t('recovery.temporaryPasswordHelp')}</p>
+                        </div>
+                    ) : null}
+                    {error ? <InlineError message={error} /> : null}
+                    <Link className="text-link" to="/login">
+                        {t('recovery.returnToLogin')}
+                    </Link>
+                </Card>
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/pages/register/register-page.tsx b/frontend/src/pages/register/register-page.tsx
index 46ae9ad..c62119f 100644
--- a/frontend/src/pages/register/register-page.tsx
+++ b/frontend/src/pages/register/register-page.tsx
@@ -1,14 +1,18 @@
 import { useState, type FormEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link, useNavigate } from 'react-router-dom'
 import { Button } from '../../components/ui/button'
 import { Card } from '../../components/ui/card'
+import { LanguageSwitcher } from '../../components/i18n/language-switcher'
 import { InlineError } from '../../components/ui/inline-error'
 import { Input } from '../../components/ui/input'
+import { ThemeToggle } from '../../components/ui/theme-toggle'
 import { signup } from '../../features/auth/auth-service'
 import { ApiError } from '../../lib/http/api-error'
 import { registerSchema } from '../../lib/validation/auth-schemas'
 
 export function RegisterPage() {
+    const { t } = useTranslation()
     const navigate = useNavigate()
     const [form, setForm] = useState({ name: '', last_name: '', email: '', username: '', password: '' })
     const [error, setError] = useState<string | null>(null)
@@ -22,7 +26,7 @@ export function RegisterPage() {
         event.preventDefault()
         const parsed = registerSchema.safeParse(form)
         if (!parsed.success) {
-            setError(parsed.error.issues[0]?.message ?? 'Check your registration details')
+            setError(parsed.error.issues[0]?.message ?? t('auth.checkRegistration'))
             return
         }
 
@@ -32,8 +36,8 @@ export function RegisterPage() {
             await signup(parsed.data)
             navigate('/login?registered=1', { replace: true })
         } catch (err) {
-            const message = err instanceof Error ? err.message : 'Unable to create account'
-            setError(err instanceof ApiError && err.status === 400 ? 'Username is already taken' : message)
+            const message = err instanceof Error ? err.message : t('auth.unableToCreate')
+            setError(err instanceof ApiError && err.status === 400 ? t('auth.usernameTaken') : message)
         } finally {
             setLoading(false)
         }
@@ -41,20 +45,35 @@ export function RegisterPage() {
 
     return (
         <div className="centered-page auth-gradient">
-            <Card className="auth-card">
-                <h1>Create account</h1>
-                <p className="muted">Start building a catalog of prompts you can trust and reuse.</p>
-                <form className="stack" onSubmit={onSubmit}>
-                    <Input label="First name" value={form.name} onChange={(event) => updateField('name', event.target.value)} autoComplete="given-name" />
-                    <Input label="Last name" value={form.last_name} onChange={(event) => updateField('last_name', event.target.value)} autoComplete="family-name" />
-                    <Input label="Email" value={form.email} onChange={(event) => updateField('email', event.target.value)} autoComplete="email" />
-                    <Input label="Username" value={form.username} onChange={(event) => updateField('username', event.target.value)} autoComplete="username" />
-                    <Input label="Password" type="password" value={form.password} onChange={(event) => updateField('password', event.target.value)} autoComplete="new-password" />
-                    {error ? <InlineError message={error} /> : null}
-                    <Button type="submit" disabled={loading}>{loading ? 'Creating...' : 'Create account'}</Button>
-                    <Link className="text-link" to="/login">Already have an account?</Link>
-                </form>
-            </Card>
+            <div className="auth-frame">
+                <div className="auth-public-bar">
+                    <Link className="brand-mark" to="/">
+                        <span className="brand-dot" aria-hidden="true" />
+                        <span>{t('app.name')}</span>
+                    </Link>
+                    <div className="row gap-sm wrap">
+                        <LanguageSwitcher />
+                        <ThemeToggle />
+                    </div>
+                </div>
+                <Card className="auth-card">
+                    <div>
+                        <h1>{t('auth.registerTitle')}</h1>
+                        <p className="muted">{t('auth.registerDescription')}</p>
+                    </div>
+                    <form className="stack" onSubmit={onSubmit}>
+                        <Input label={t('auth.firstName')} value={form.name} onChange={(event) => updateField('name', event.target.value)} autoComplete="given-name" />
+                        <Input label={t('auth.lastName')} value={form.last_name} onChange={(event) => updateField('last_name', event.target.value)} autoComplete="family-name" />
+                        <Input label={t('auth.email')} value={form.email} onChange={(event) => updateField('email', event.target.value)} autoComplete="email" />
+                        <Input label={t('auth.username')} value={form.username} onChange={(event) => updateField('username', event.target.value)} autoComplete="username" />
+                        <Input label={t('auth.password')} type="password" value={form.password} onChange={(event) => updateField('password', event.target.value)} autoComplete="new-password" />
+                        {error ? <InlineError message={error} /> : null}
+                        <Button type="submit" disabled={loading}>{loading ? t('auth.creating') : t('nav.createAccount')}</Button>
+                        <Link className="text-link" to="/login">{t('auth.alreadyHaveAccount')}</Link>
+                        <Link className="text-link" to="/">{t('auth.backToLanding')}</Link>
+                    </form>
+                </Card>
+            </div>
         </div>
     )
 }
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index 4b6b452..d88c453 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -13,9 +13,11 @@ body {
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
     font-size: var(--font-md);
     background:
-        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30rem),
+        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34rem),
+        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent-strong) 16%, transparent), transparent 30rem),
         var(--bg);
     color: var(--text);
+    line-height: 1.5;
 }
 
 h1,
@@ -26,7 +28,9 @@ p {
 }
 
 h1 {
-    font-size: var(--font-lg);
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    line-height: 1.05;
+    letter-spacing: -0.04em;
     margin-bottom: var(--space-2);
 }
 
@@ -35,10 +39,33 @@ a {
 }
 
 h2 {
-    font-size: 1.125rem;
+    font-size: clamp(1.25rem, 3vw, 1.75rem);
+    line-height: 1.15;
+    letter-spacing: -0.03em;
     margin-bottom: var(--space-3);
 }
 
+h3 {
+    line-height: 1.2;
+}
+
+a,
+button,
+input,
+select,
+textarea {
+    -webkit-tap-highlight-color: transparent;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
+    outline-offset: 3px;
+}
+
 .page {
     max-width: 1120px;
     margin: 0 auto;
@@ -53,11 +80,13 @@ h2 {
     min-height: 100vh;
     display: grid;
     place-items: center;
-    padding: var(--space-4);
+    padding: var(--space-6) var(--space-4);
 }
 
 .auth-gradient {
-    background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent-strong) 20%, transparent), transparent 28rem);
+    background:
+        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30rem),
+        radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--accent-strong) 16%, transparent), transparent 28rem);
 }
 
 .topbar {
@@ -72,10 +101,10 @@ h2 {
     position: sticky;
     top: var(--space-4);
     z-index: 10;
-    padding: var(--space-3);
+    padding: var(--space-3) var(--space-4);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    background: color-mix(in srgb, var(--surface) 90%, transparent);
+    background: color-mix(in srgb, var(--surface) 86%, transparent);
     box-shadow: var(--shadow);
     backdrop-filter: blur(18px);
 }
@@ -92,6 +121,7 @@ h2 {
     color: var(--text);
     font-size: var(--font-sm);
     text-decoration: none;
+    text-underline-offset: 0.25em;
 }
 
 .nav-link {
@@ -100,7 +130,8 @@ h2 {
 }
 
 .nav-link.active,
-.text-link:hover {
+.text-link:hover,
+.text-link:focus-visible {
     color: var(--accent);
 }
 
@@ -112,32 +143,71 @@ h2 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-sm);
+    min-height: var(--control-height);
+    border-radius: 999px;
     border: 1px solid var(--accent);
-    padding: 0.58rem 0.95rem;
+    padding: 0.7rem 1.05rem;
     background: var(--accent);
-    color: #fff;
+    color: var(--accent-contrast);
     font-size: var(--font-sm);
     font-weight: 700;
     text-decoration: none;
+    box-shadow: var(--shadow-soft), var(--inset-highlight);
+    transition:
+        transform var(--transition-fast),
+        border-color var(--transition-fast),
+        background-color var(--transition-fast);
+}
+
+.button-link:hover {
+    transform: translateY(-1px);
 }
 
 .button-link-secondary {
-    background: transparent;
+    background: color-mix(in srgb, var(--surface) 72%, transparent);
     color: var(--text);
     border-color: var(--border);
+    box-shadow: var(--inset-highlight);
 }
 
 .card {
-    background: var(--surface);
+    background: color-mix(in srgb, var(--surface) 96%, transparent);
     border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: var(--space-4);
-    box-shadow: 0 1px 0 rgb(15 23 42 / 0.03);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    box-shadow: var(--shadow-soft), var(--inset-highlight);
 }
 
 .auth-card {
-    width: min(420px, 100%);
+    width: 100%;
+    display: grid;
+    gap: var(--space-5, 1.25rem);
+}
+
+.auth-frame {
+    width: min(480px, 100%);
+    display: grid;
+    gap: var(--space-4);
+}
+
+.auth-public-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+    padding: var(--space-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--surface) 70%, transparent);
+    backdrop-filter: blur(16px);
+}
+
+.auth-subcard {
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-soft);
 }
 
 .stack {
@@ -145,6 +215,10 @@ h2 {
     gap: var(--space-4);
 }
 
+.gap-tight {
+    gap: var(--space-2);
+}
+
 .row {
     display: flex;
     align-items: center;
@@ -159,21 +233,26 @@ h2 {
 }
 
 .btn {
-    border-radius: var(--radius-sm);
+    min-height: var(--control-height);
+    border-radius: 999px;
     border: 1px solid var(--border);
-    padding: 0.55rem 0.9rem;
+    padding: 0.65rem 1rem;
     font-size: var(--font-sm);
+    font-weight: 700;
     cursor: pointer;
+    color: var(--text);
+    background: var(--surface);
     transition:
         border-color var(--transition-fast),
         background-color var(--transition-fast),
-        color var(--transition-fast);
+        color var(--transition-fast),
+        transform var(--transition-fast);
 }
 
 .btn-primary {
     background: var(--accent);
     border-color: var(--accent);
-    color: #fff;
+    color: var(--accent-contrast);
 }
 
 .btn-ghost {
@@ -187,8 +266,9 @@ h2 {
     color: #fff;
 }
 
-.btn:hover {
+.btn:hover:not(:disabled) {
     border-color: var(--accent);
+    transform: translateY(-1px);
 }
 
 .btn:disabled {
@@ -208,16 +288,33 @@ h2 {
 
 .input {
     border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 0.6rem 0.7rem;
+    border-radius: var(--radius-md);
+    min-height: var(--control-height);
+    padding: 0.7rem 0.85rem;
     font: inherit;
     color: var(--text);
-    background: var(--surface);
+    background: color-mix(in srgb, var(--surface) 92%, transparent);
+    box-shadow: var(--inset-highlight);
 }
 
 .input:focus {
-    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
-    outline-offset: 1px;
+    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+}
+
+.textarea {
+    min-height: 11rem;
+    resize: vertical;
+    line-height: 1.55;
+}
+
+.language-switcher {
+    display: inline-flex;
+}
+
+.language-select {
+    min-width: 7.5rem;
+    padding-block: 0.45rem;
+    font-size: var(--font-sm);
 }
 
 .field-combobox {
@@ -235,7 +332,7 @@ h2 {
     overflow: auto;
     padding: var(--space-2);
     border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     background: var(--surface);
     box-shadow: var(--shadow);
 }
@@ -273,12 +370,12 @@ h2 {
     border: 1px solid var(--border);
     border-radius: 999px;
     color: var(--text);
-    background: transparent;
+    background: var(--surface);
     cursor: pointer;
 }
 
 .rating-button-active {
-    color: #fff;
+    color: var(--accent-contrast);
     background: var(--accent);
     border-color: var(--accent);
 }
@@ -306,8 +403,9 @@ h2 {
 
 .list-item {
     border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    padding: var(--space-4);
+    background: color-mix(in srgb, var(--surface) 76%, transparent);
     display: flex;
     justify-content: space-between;
     gap: var(--space-4);
@@ -326,7 +424,7 @@ h2 {
 }
 
 .prompt-list {
-    gap: var(--space-2);
+    gap: var(--space-3);
 }
 
 .prompt-list-item {
@@ -336,10 +434,10 @@ h2 {
     gap: var(--space-3);
     width: 100%;
     border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: var(--space-3);
+    border-radius: var(--radius-md);
+    padding: var(--space-4);
     color: inherit;
-    background: var(--surface);
+    background: color-mix(in srgb, var(--surface) 84%, transparent);
     font: inherit;
     text-align: left;
     cursor: pointer;
@@ -353,6 +451,7 @@ h2 {
 .prompt-list-item:focus-visible {
     border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
     background: color-mix(in srgb, var(--accent) 6%, var(--surface));
+    box-shadow: var(--shadow-soft);
 }
 
 .prompt-list-item:focus-visible {
@@ -368,6 +467,12 @@ h2 {
     white-space: nowrap;
 }
 
+.prompt-list-content {
+    min-width: 0;
+    display: grid;
+    gap: var(--space-1);
+}
+
 .prompt-list-meta,
 .prompt-detail-meta {
     display: flex;
@@ -377,7 +482,7 @@ h2 {
 }
 
 .prompt-detail-dialog {
-    width: min(640px, 100%);
+    width: min(720px, 100%);
 }
 
 .prompt-detail-body {
@@ -393,9 +498,25 @@ h2 {
 .prompt-detail-text {
     max-height: min(46vh, 28rem);
     overflow: auto;
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--surface-soft);
     white-space: pre-wrap;
 }
 
+.prompt-detail-summary {
+    align-items: stretch;
+}
+
+.prompt-detail-summary .prompt-detail-field {
+    min-width: 9rem;
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
+}
+
 .section-heading {
     display: flex;
     justify-content: space-between;
@@ -412,7 +533,7 @@ h2 {
 .badge {
     border: 1px solid var(--border);
     border-radius: 999px;
-    padding: 0.25rem 0.65rem;
+    padding: 0.32rem 0.7rem;
     color: var(--muted);
     font-size: var(--font-sm);
 }
@@ -431,7 +552,7 @@ h2 {
 
 .success-panel {
     border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     padding: var(--space-3);
     color: var(--success);
     background: color-mix(in srgb, var(--success) 10%, transparent);
@@ -453,6 +574,10 @@ h2 {
     gap: var(--space-4);
 }
 
+.page-header > div:first-child {
+    max-width: 58rem;
+}
+
 .page-header-actions {
     display: flex;
     gap: var(--space-2);
@@ -464,7 +589,7 @@ h2 {
     gap: var(--space-2);
     place-items: center;
     border: 1px dashed var(--border);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
     padding: var(--space-8);
     text-align: center;
     background: color-mix(in srgb, var(--accent) 6%, transparent);
@@ -477,7 +602,8 @@ h2 {
     display: grid;
     place-items: center;
     padding: var(--space-4);
-    background: rgb(2 6 23 / 0.55);
+    background: rgb(18 12 8 / 0.62);
+    backdrop-filter: blur(6px);
 }
 
 .dialog-panel {
@@ -485,7 +611,7 @@ h2 {
     display: grid;
     gap: var(--space-4);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
     padding: var(--space-6);
     background: var(--surface);
     box-shadow: var(--shadow);
@@ -504,8 +630,7 @@ h2 {
     padding: var(--space-6) 0 var(--space-12);
 }
 
-.marketing-nav,
-.architecture-strip {
+.marketing-nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -514,21 +639,53 @@ h2 {
 }
 
 .marketing-nav {
-    margin-bottom: var(--space-12);
+    position: sticky;
+    top: var(--space-4);
+    z-index: 10;
+    margin-bottom: var(--section-space);
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    background: color-mix(in srgb, var(--surface) 78%, transparent);
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(18px);
+}
+
+.brand-mark {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--text);
+    font-weight: 900;
+    text-decoration: none;
+    letter-spacing: -0.03em;
+}
+
+.brand-dot {
+    width: 0.85rem;
+    height: 0.85rem;
+    border-radius: 999px;
+    background:
+        linear-gradient(135deg, var(--accent), var(--accent-strong));
+    box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent) 14%, transparent);
 }
 
 .hero-grid {
     display: grid;
-    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
-    gap: var(--space-8);
+    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
+    gap: clamp(2rem, 6vw, 5rem);
     align-items: center;
 }
 
+.hero-content {
+    align-content: center;
+}
+
 .hero-title {
-    max-width: 12ch;
+    max-width: 11ch;
     font-size: var(--font-xl);
-    line-height: 0.95;
-    letter-spacing: -0.06em;
+    line-height: 0.92;
+    letter-spacing: -0.075em;
 }
 
 .hero-copy {
@@ -538,46 +695,255 @@ h2 {
     line-height: 1.75;
 }
 
-.showcase-card {
+.hero-notebook {
+    position: relative;
     display: grid;
     gap: var(--space-4);
-    min-height: 320px;
-    align-content: center;
-    border-radius: var(--radius-lg);
+    min-height: 420px;
+    align-content: end;
+    padding: var(--space-8);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
     background:
-        linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent),
+        linear-gradient(145deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 42%),
+        repeating-linear-gradient(0deg, transparent 0 2.45rem, color-mix(in srgb, var(--border) 58%, transparent) 2.45rem 2.5rem),
         var(--surface);
     box-shadow: var(--shadow);
+    overflow: hidden;
+}
+
+.hero-notebook::before {
+    content: '';
+    position: absolute;
+    inset: 1rem auto 1rem 1.2rem;
+    width: 0.35rem;
+    border-radius: 999px;
+    background: linear-gradient(var(--accent), var(--accent-strong));
+    opacity: 0.75;
+}
+
+.notebook-line {
+    width: min(22rem, 78%);
+    height: 0.85rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--muted) 18%, transparent);
+}
+
+.notebook-line-strong {
+    width: min(18rem, 68%);
+    background: color-mix(in srgb, var(--text) 24%, transparent);
+}
+
+.notebook-chip-row {
+    display: flex;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.notebook-chip-row span {
+    width: 5.25rem;
+    height: 2rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.notebook-card {
+    display: grid;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: color-mix(in srgb, var(--surface) 88%, transparent);
+    box-shadow: var(--shadow-soft);
+}
+
+.notebook-card p {
+    color: var(--muted);
+    font-size: var(--font-sm);
 }
 
 .feature-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--space-4);
-    margin: var(--space-12) 0;
+    margin: var(--section-space) 0;
 }
 
-.architecture-strip {
+.benefit-card {
+    min-height: 13rem;
+}
+
+.preview-section {
+    scroll-margin-top: 8rem;
+    margin-top: var(--section-space);
+    padding: var(--space-8);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
+    background:
+        linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 72%, transparent), transparent),
+        color-mix(in srgb, var(--surface) 78%, transparent);
+    box-shadow: var(--shadow-soft), var(--inset-highlight);
+}
+
+.preview-heading {
+    margin-bottom: var(--space-6);
+}
+
+.preview-copy {
+    max-width: 34rem;
+    line-height: 1.7;
+}
+
+.sample-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--space-4);
+}
+
+.sample-card {
+    position: relative;
+    display: grid;
+    gap: var(--space-4);
+    min-height: 20rem;
+    overflow: hidden;
+}
+
+.sample-card::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto;
+    height: 0.35rem;
+    background: var(--sample-accent, var(--accent));
+}
+
+.sample-card-amber {
+    --sample-accent: #d99225;
+}
+
+.sample-card-coral {
+    --sample-accent: #d86d55;
+}
+
+.sample-card-violet {
+    --sample-accent: var(--accent-strong);
+}
+
+.sample-card-blue {
+    --sample-accent: #4f88c6;
+}
+
+.sample-category {
+    color: var(--sample-accent, var(--accent));
+    font-size: var(--font-sm);
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.workflow-strip {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--space-3);
+    margin-bottom: var(--section-space);
+}
+
+.workflow-strip span {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-height: 4.5rem;
     padding: var(--space-4);
-    background: var(--surface-strong);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface-soft);
+    font-weight: 800;
+}
+
+.workflow-strip strong {
+    display: inline-grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--accent);
+    color: var(--accent-contrast);
+    font-size: var(--font-sm);
+}
+
+.final-cta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    margin-bottom: var(--space-8);
+    padding: var(--space-8);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    background:
+        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 20rem),
+        var(--surface);
+    box-shadow: var(--shadow-soft);
+}
+
+.marketing-footer {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-3);
+    flex-wrap: wrap;
     color: var(--muted);
     font-size: var(--font-sm);
 }
 
+.marketing-footer a {
+    color: var(--text);
+    font-weight: 700;
+    text-decoration: none;
+}
+
 .result-panel {
     display: grid;
     gap: var(--space-2);
     border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     padding: var(--space-3);
     background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 
 .prompt-form {
     display: grid;
-    gap: var(--space-3);
+    gap: var(--space-4);
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--space-4);
+}
+
+.stat-card {
+    display: grid;
+    gap: var(--space-2);
+}
+
+.stat-card strong {
+    font-size: clamp(1.4rem, 3vw, 2rem);
+    line-height: 1.1;
+}
+
+.composer-card,
+.library-card {
+    display: grid;
+    gap: var(--space-4);
+}
+
+@media (max-width: 980px) {
+    .sample-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .workflow-strip {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
 }
 
 @media (max-width: 640px) {
@@ -609,14 +975,45 @@ h2 {
     }
 
     .hero-grid,
-    .feature-grid {
+    .feature-grid,
+    .sample-grid,
+    .workflow-strip,
+    .stats-grid {
         grid-template-columns: 1fr;
     }
 
     .marketing-nav {
+        position: static;
         margin-bottom: var(--space-8);
     }
 
+    .marketing-nav,
+    .auth-public-bar,
+    .final-cta {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .preview-section,
+    .final-cta,
+    .hero-notebook {
+        padding: var(--space-4);
+    }
+
+    .hero-notebook {
+        min-height: 320px;
+    }
+
+    .sample-card {
+        min-height: auto;
+    }
+
+    .dialog-panel {
+        max-height: calc(100vh - 2rem);
+        overflow: auto;
+        padding: var(--space-4);
+    }
+
     .filter-grid {
         grid-template-columns: 1fr;
     }
diff --git a/frontend/src/styles/themes.css b/frontend/src/styles/themes.css
index b1ad375..b57e218 100644
--- a/frontend/src/styles/themes.css
+++ b/frontend/src/styles/themes.css
@@ -1,28 +1,36 @@
 :root,
 :root[data-theme='light'] {
-    --bg: #f4f6f8;
-    --surface: #ffffff;
-    --surface-strong: #eef2ff;
-    --text: #1e293b;
-    --muted: #64748b;
-    --border: #dbe3ea;
-    --accent: #2563eb;
-    --accent-strong: #6d28d9;
-    --danger: #dc2626;
-    --success: #047857;
-    --shadow: 0 24px 70px rgb(30 41 59 / 0.12);
+    --bg: #fbf4e9;
+    --surface: #fffaf2;
+    --surface-strong: #f6ead8;
+    --surface-soft: #fff4df;
+    --text: #2d241d;
+    --muted: #77685d;
+    --border: #ead8c4;
+    --accent: #c96b3c;
+    --accent-strong: #6d5bd0;
+    --accent-contrast: #fffaf2;
+    --danger: #b42318;
+    --success: #24735a;
+    --shadow: 0 24px 70px rgb(104 65 34 / 0.16);
+    --shadow-soft: 0 12px 38px rgb(104 65 34 / 0.10);
+    --inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.75);
 }
 
 :root[data-theme='dark'] {
-    --bg: #111827;
-    --surface: #1f2937;
-    --surface-strong: #172033;
-    --text: #e5e7eb;
-    --muted: #94a3b8;
-    --border: #334155;
-    --accent: #60a5fa;
-    --accent-strong: #a78bfa;
-    --danger: #f87171;
-    --success: #34d399;
-    --shadow: 0 24px 70px rgb(0 0 0 / 0.28);
+    --bg: #1a1716;
+    --surface: #24201e;
+    --surface-strong: #312821;
+    --surface-soft: #2b2522;
+    --text: #f4eadf;
+    --muted: #c4b3a5;
+    --border: #4a3c33;
+    --accent: #f09a67;
+    --accent-strong: #a79bff;
+    --accent-contrast: #231814;
+    --danger: #ff8a80;
+    --success: #7bd7b1;
+    --shadow: 0 24px 70px rgb(0 0 0 / 0.36);
+    --shadow-soft: 0 12px 38px rgb(0 0 0 / 0.24);
+    --inset-highlight: inset 0 1px 0 rgb(255 255 255 / 0.08);
 }
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index bbb7f02..9476c3f 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -5,16 +5,23 @@
     --space-4: 1rem;
     --space-6: 1.5rem;
     --space-8: 2rem;
+    --space-10: 2.5rem;
     --space-12: 3rem;
+    --space-16: 4rem;
 
-    --radius-sm: 0.375rem;
-    --radius-md: 0.625rem;
-    --radius-lg: 1rem;
+    --radius-sm: 0.625rem;
+    --radius-md: 1rem;
+    --radius-lg: 1.35rem;
+    --radius-xl: 2rem;
 
     --font-sm: 0.875rem;
     --font-md: 1rem;
     --font-lg: 1.25rem;
-    --font-xl: clamp(2.2rem, 7vw, 4.75rem);
+    --font-xl: clamp(2.4rem, 7vw, 5.5rem);
+
+    --section-space: clamp(3rem, 8vw, 6rem);
+    --control-height: 2.75rem;
 
     --transition-fast: 120ms ease;
+    --transition-base: 180ms ease;
 }