diff --git a/editor/backend/pom.xml b/editor/backend/pom.xml
index ba50b3c..4be68d9 100644
--- a/editor/backend/pom.xml
+++ b/editor/backend/pom.xml
@@ -13,7 +13,7 @@
 
     <groupId>com.engine</groupId>
     <artifactId>editor-backend</artifactId>
-    <version>0.3.0-RELEASE</version>
+    <version>0.4.0-RELEASE</version>
     <name>editor-backend</name>
     <description>Arvexis - Editor Backend</description>
 
diff --git a/editor/backend/src/main/resources/bundled/runtime.jar b/editor/backend/src/main/resources/bundled/runtime.jar
index bb61c50..432af5a 100644
Binary files a/editor/backend/src/main/resources/bundled/runtime.jar and b/editor/backend/src/main/resources/bundled/runtime.jar differ
diff --git a/editor/frontend/src/api/localization.ts b/editor/frontend/src/api/localization.ts
new file mode 100644
index 0000000..008826f
--- /dev/null
+++ b/editor/frontend/src/api/localization.ts
@@ -0,0 +1,65 @@
+import apiClient from './client'
+import type { Locale, SubtitleEntry, DecisionTranslation } from '@/types'
+
+// ── Locales ──────────────────────────────────────────────────────────────────
+
+export function listLocales(): Promise<Locale[]> {
+  return apiClient.get('/locales')
+}
+
+export function addLocale(code: string, name: string): Promise<Locale> {
+  return apiClient.post('/locales', { code, name })
+}
+
+export function deleteLocale(code: string): Promise<{ deleted: string }> {
+  return apiClient.delete(`/locales/${encodeURIComponent(code)}`)
+}
+
+// ── Subtitles ────────────────────────────────────────────────────────────────
+
+export function getSubtitles(params?: { sceneId?: string; locale?: string }): Promise<SubtitleEntry[]> {
+  const q = new URLSearchParams()
+  if (params?.sceneId) q.set('sceneId', params.sceneId)
+  if (params?.locale) q.set('locale', params.locale)
+  const qs = q.toString()
+  return apiClient.get(`/subtitles${qs ? '?' + qs : ''}`)
+}
+
+export function upsertSubtitle(entry: {
+  id?: string
+  sceneId: string
+  localeCode: string
+  startTime: number
+  endTime: number
+  text: string
+}): Promise<SubtitleEntry> {
+  return apiClient.post('/subtitles', entry)
+}
+
+export function deleteSubtitle(id: string): Promise<{ deleted: string }> {
+  return apiClient.delete(`/subtitles/${encodeURIComponent(id)}`)
+}
+
+// ── Decision Translations ────────────────────────────────────────────────────
+
+export function getDecisionTranslations(params?: { sceneId?: string; locale?: string }): Promise<DecisionTranslation[]> {
+  const q = new URLSearchParams()
+  if (params?.sceneId) q.set('sceneId', params.sceneId)
+  if (params?.locale) q.set('locale', params.locale)
+  const qs = q.toString()
+  return apiClient.get(`/decision-translations${qs ? '?' + qs : ''}`)
+}
+
+export function upsertDecisionTranslation(entry: {
+  id?: string
+  decisionKey: string
+  sceneId: string
+  localeCode: string
+  label: string
+}): Promise<DecisionTranslation> {
+  return apiClient.post('/decision-translations', entry)
+}
+
+export function deleteDecisionTranslation(id: string): Promise<{ deleted: string }> {
+  return apiClient.delete(`/decision-translations/${encodeURIComponent(id)}`)
+}
diff --git a/editor/frontend/src/components/editor/LocalizationPanel.tsx b/editor/frontend/src/components/editor/LocalizationPanel.tsx
index 23b2326..835f1ff 100644
--- a/editor/frontend/src/components/editor/LocalizationPanel.tsx
+++ b/editor/frontend/src/components/editor/LocalizationPanel.tsx
@@ -1,124 +1,567 @@
-import { useState } from 'react'
-import type { Locale } from '@/types'
+import { useState, useEffect, useCallback, type ReactNode } from 'react'
+import type { Locale, SubtitleEntry, DecisionTranslation, GraphNode } from '@/types'
+import {
+  listLocales, addLocale, deleteLocale,
+  getSubtitles, upsertSubtitle, deleteSubtitle,
+  getDecisionTranslations, upsertDecisionTranslation, deleteDecisionTranslation,
+} from '@/api/localization'
+import { listNodes } from '@/api/graph'
+import { useEditorStore } from '@/store'
 
-const PLACEHOLDER_LOCALES: Locale[] = [
-  { code: 'en', name: 'English' },
-  { code: 'fr', name: 'French' },
-  { code: 'de', name: 'German' },
-]
+type Tab = 'subtitles' | 'decisions'
 
 export default function LocalizationPanel() {
-  const [locales] = useState<Locale[]>(PLACEHOLDER_LOCALES)
-  const [activeLocale, setActiveLocale] = useState<string>(PLACEHOLDER_LOCALES[0].code)
-  const [newCode, setNewCode]   = useState('')
-  const [newName, setNewName]   = useState('')
-  const [showAdd, setShowAdd]   = useState(false)
-
-  function handleAddLocale() {
-    if (!newCode.trim() || !newName.trim()) return
-    // TODO: wire to backend when locale API is available
-    setNewCode('')
-    setNewName('')
-    setShowAdd(false)
+  const togglePanel = useEditorStore(s => s.toggleLocalizationPanel)
+
+  const [locales, setLocales]             = useState<Locale[]>([])
+  const [activeLocale, setActiveLocale]   = useState<string>('')
+  const [newCode, setNewCode]             = useState('')
+  const [newName, setNewName]             = useState('')
+  const [showAdd, setShowAdd]             = useState(false)
+  const [scenes, setScenes]               = useState<GraphNode[]>([])
+  const [selectedScene, setSelectedScene] = useState<string>('')
+  const [tab, setTab]                     = useState<Tab>('subtitles')
+  const [error, setError]                 = useState<string | null>(null)
+
+  // Subtitle state
+  const [subs, setSubs]               = useState<SubtitleEntry[]>([])
+  const [subsLoading, setSubsLoading] = useState(false)
+  const [newSubStart, setNewSubStart] = useState('')
+  const [newSubEnd, setNewSubEnd]     = useState('')
+  const [newSubText, setNewSubText]   = useState('')
+
+  // Decision translation state
+  const [translations, setTranslations]             = useState<DecisionTranslation[]>([])
+  const [transLoading, setTransLoading]             = useState(false)
+  const [sceneDecisionKeys, setSceneDecisionKeys]   = useState<string[]>([])
+
+  // ── Load locales + scenes on mount ──────────────────────────────────────
+
+  useEffect(() => {
+    Promise.all([listLocales(), listNodes()])
+      .then(([locs, nodes]) => {
+        setLocales(locs)
+        if (locs.length > 0) setActiveLocale(prev => prev || locs[0].code)
+        const sceneNodes = nodes.filter(n => n.type === 'scene')
+        setScenes(sceneNodes)
+        if (sceneNodes.length > 0) setSelectedScene(prev => prev || sceneNodes[0].id)
+      })
+      .catch(e => setError(e instanceof Error ? e.message : 'Load failed'))
+  }, [])
+
+  // ── Load subtitles when scene/locale changes ───────────────────────────
+
+  const loadSubs = useCallback(async () => {
+    if (!selectedScene || !activeLocale) { setSubs([]); return }
+    setSubsLoading(true)
+    try {
+      const data = await getSubtitles({ sceneId: selectedScene, locale: activeLocale })
+      setSubs(data)
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to load subtitles') }
+    finally { setSubsLoading(false) }
+  }, [selectedScene, activeLocale])
+
+  useEffect(() => { if (tab === 'subtitles') loadSubs() }, [loadSubs, tab])
+
+  // ── Load decision translations when scene/locale changes ───────────────
+
+  const loadTranslations = useCallback(async () => {
+    if (!selectedScene || !activeLocale) { setTranslations([]); return }
+    setTransLoading(true)
+    try {
+      const data = await getDecisionTranslations({ sceneId: selectedScene, locale: activeLocale })
+      setTranslations(data)
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to load translations') }
+    finally { setTransLoading(false) }
+  }, [selectedScene, activeLocale])
+
+  useEffect(() => { if (tab === 'decisions') loadTranslations() }, [loadTranslations, tab])
+
+  // ── Compute decision keys for the selected scene ───────────────────────
+
+  useEffect(() => {
+    const scene = scenes.find(s => s.id === selectedScene)
+    if (scene) {
+      setSceneDecisionKeys(scene.exits.filter(e => e.key !== 'CONTINUE').map(e => e.key))
+    } else {
+      setSceneDecisionKeys([])
+    }
+  }, [selectedScene, scenes])
+
+  // ── Locale CRUD ─────────────────────────────────────────────────────────
+
+  async function handleAddLocale() {
+    const code = newCode.trim().toLowerCase()
+    const name = newName.trim()
+    if (!code || !name) {
+      setError('Both locale code and name are required')
+      return
+    }
+    setError(null)
+    try {
+      const loc = await addLocale(code, name)
+      setLocales(prev => [...prev.filter(l => l.code !== loc.code), loc])
+      if (!activeLocale) setActiveLocale(loc.code)
+      setNewCode('')
+      setNewName('')
+      setShowAdd(false)
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to add locale') }
+  }
+
+  async function handleDeleteLocale(code: string) {
+    try {
+      await deleteLocale(code)
+      setLocales(prev => {
+        const remaining = prev.filter(l => l.code !== code)
+        if (activeLocale === code) {
+          setActiveLocale(remaining.length > 0 ? remaining[0].code : '')
+        }
+        return remaining
+      })
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to delete locale') }
+  }
+
+  // ── Subtitle CRUD ───────────────────────────────────────────────────────
+
+  async function handleAddSubtitle() {
+    const start = parseFloat(newSubStart)
+    const end   = parseFloat(newSubEnd)
+    const text  = newSubText.trim()
+    if (isNaN(start) || isNaN(end) || !text || !selectedScene || !activeLocale) return
+    try {
+      await upsertSubtitle({ sceneId: selectedScene, localeCode: activeLocale, startTime: start, endTime: end, text })
+      setNewSubStart('')
+      setNewSubEnd('')
+      setNewSubText('')
+      loadSubs()
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to add subtitle') }
+  }
+
+  async function handleUpdateSubtitle(entry: SubtitleEntry) {
+    try {
+      await upsertSubtitle(entry)
+      loadSubs()
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to update subtitle') }
+  }
+
+  async function handleDeleteSubtitle(id: string) {
+    try {
+      await deleteSubtitle(id)
+      setSubs(prev => prev.filter(s => s.id !== id))
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to delete subtitle') }
+  }
+
+  // ── Decision translation CRUD ──────────────────────────────────────────
+
+  async function handleUpsertTranslation(decisionKey: string, label: string, existingId?: string) {
+    if (!label.trim() || !selectedScene || !activeLocale) return
+    try {
+      await upsertDecisionTranslation({
+        id: existingId,
+        decisionKey, sceneId: selectedScene, localeCode: activeLocale, label: label.trim(),
+      })
+      loadTranslations()
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to save translation') }
+  }
+
+  async function handleDeleteTranslation(id: string) {
+    try {
+      await deleteDecisionTranslation(id)
+      setTranslations(prev => prev.filter(t => t.id !== id))
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to delete translation') }
   }
 
   return (
-    <div className="flex flex-col shrink-0 border-l border-border bg-card overflow-hidden h-full" style={{ width: 420 }}>
+    <div className="flex flex-col w-full border-l border-border bg-card overflow-hidden h-full">
       {/* Header */}
-      <div className="flex items-center gap-2 px-5 py-4 border-b border-border shrink-0">
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="text-emerald-400 shrink-0">
-          <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.2"/>
-          <path d="M7 1.5C5.5 3.5 4.5 5.2 4.5 7s1 3.5 2.5 5.5M7 1.5C8.5 3.5 9.5 5.2 9.5 7s-1 3.5-2.5 5.5M1.5 7h11" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
-        </svg>
-        <span className="text-sm font-semibold text-emerald-400 uppercase tracking-wider">Localization</span>
-        <span className="ml-auto text-xs text-muted-foreground italic">Data model preview</span>
+      <div className="flex items-center border-b border-border shrink-0 bg-emerald-500/5" style={{ padding: '18px 24px', gap: 12 }}>
+        <div className="flex-1 min-w-0">
+          <span className="font-semibold uppercase tracking-wider text-emerald-400 opacity-70" style={{ fontSize: 12 }}>
+            Localization
+          </span>
+          <p className="font-medium text-foreground" style={{ fontSize: 18, marginTop: 4 }}>Subtitles &amp; Translations</p>
+        </div>
+        <button
+          onClick={togglePanel}
+          className="text-muted-foreground hover:text-foreground leading-none shrink-0"
+          style={{ fontSize: 22, padding: 4 }}
+        >
+          ×
+        </button>
       </div>
 
-      {/* Locale selector */}
-      <div className="px-4 pt-4 pb-3 border-b border-border/50">
-        <div className="flex items-center gap-1.5 mb-2">
-          <span className="text-xs text-muted-foreground font-medium uppercase tracking-wider">Locales</span>
-          <button
-            onClick={() => setShowAdd(v => !v)}
-            className="ml-auto text-xs px-2.5 py-1 rounded border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-primary transition-colors"
-          >
-            + Add
-          </button>
+      {/* Error */}
+      {error && (
+        <div className="text-sm text-destructive-foreground bg-destructive rounded-md flex items-center gap-2" style={{ margin: '12px 20px 0', padding: '8px 12px' }}>
+          <span className="flex-1">{error}</span>
+          <button onClick={() => setError(null)} className="opacity-70 hover:opacity-100 shrink-0" style={{ fontSize: 18 }}>×</button>
         </div>
+      )}
+
+      {/* Scrollable body */}
+      <div className="flex-1 overflow-y-auto" style={{ padding: 20 }}>
+        <div className="flex flex-col gap-5">
+
+          {/* ── Locales section ── */}
+          <Field label="Locales" hint="Define languages available in your project">
+            <div className="flex flex-col gap-3">
+              {locales.length === 0 && !showAdd && (
+                <p className="text-sm text-muted-foreground">No locales defined yet.</p>
+              )}
+              {locales.length > 0 && (
+                <div className="flex flex-wrap gap-1.5">
+                  {locales.map(l => (
+                    <div key={l.code} className="relative group">
+                      <button
+                        type="button"
+                        onClick={() => setActiveLocale(l.code)}
+                        className={[
+                          'font-medium rounded-md border transition-colors',
+                          activeLocale === l.code
+                            ? 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
+                            : 'text-muted-foreground border-border hover:text-foreground hover:bg-accent',
+                        ].join(' ')}
+                        style={{ padding: '6px 28px 6px 12px', fontSize: 13 }}
+                      >
+                        {l.code.toUpperCase()} · {l.name}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={(e) => { e.stopPropagation(); handleDeleteLocale(l.code) }}
+                        className="absolute top-1/2 -translate-y-1/2 text-muted-foreground hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity leading-none"
+                        style={{ right: 8, fontSize: 14 }}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
 
-        {showAdd && (
-          <div className="flex flex-col gap-1.5 mb-2">
-            <div className="flex gap-1.5">
-              <input
-                value={newCode}
-                onChange={e => setNewCode(e.target.value)}
-                placeholder="Code (e.g. fr)"
-                className="input-base text-xs py-1 w-20 shrink-0"
-              />
-              <input
-                value={newName}
-                onChange={e => setNewName(e.target.value)}
-                onKeyDown={e => { if (e.key === 'Enter') handleAddLocale(); if (e.key === 'Escape') setShowAdd(false) }}
-                placeholder="Name (e.g. French)"
-                className="input-base text-xs py-1 flex-1"
-              />
+              {showAdd && (
+                <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
+                  <div className="grid grid-cols-[80px_1fr] gap-2">
+                    <input
+                      value={newCode}
+                      onChange={e => setNewCode(e.target.value)}
+                      placeholder="fr"
+                      className="input-base"
+                    />
+                    <input
+                      value={newName}
+                      onChange={e => setNewName(e.target.value)}
+                      onKeyDown={e => { if (e.key === 'Enter') handleAddLocale(); if (e.key === 'Escape') { setShowAdd(false); setNewCode(''); setNewName('') } }}
+                      placeholder="French"
+                      className="input-base"
+                    />
+                  </div>
+                  <div className="flex items-center gap-2 justify-end">
+                    <button
+                      type="button"
+                      onClick={() => { setShowAdd(false); setNewCode(''); setNewName('') }}
+                      className="font-medium text-muted-foreground hover:text-foreground transition-colors"
+                      style={{ padding: '6px 12px', fontSize: 13 }}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleAddLocale}
+                      className="font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-40 transition-opacity"
+                      style={{ padding: '6px 16px', fontSize: 13 }}
+                    >
+                      Add
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {!showAdd && (
+                <button
+                  type="button"
+                  onClick={() => setShowAdd(true)}
+                  className="font-medium text-muted-foreground hover:text-foreground border border-dashed border-border hover:border-primary rounded-lg transition-colors self-start"
+                  style={{ padding: '6px 16px', fontSize: 13 }}
+                >
+                  + Add Locale
+                </button>
+              )}
             </div>
-            <button
-              onClick={handleAddLocale}
-              className="text-xs px-3 py-1 rounded bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
+          </Field>
+
+          {/* ── Scene selector ── */}
+          <Field label="Scene">
+            <select
+              value={selectedScene}
+              onChange={e => setSelectedScene(e.target.value)}
+              className="input-base"
             >
-              Add locale
-            </button>
+              {scenes.length === 0 && <option value="">No scenes</option>}
+              {scenes.map(s => (
+                <option key={s.id} value={s.id}>{s.name}</option>
+              ))}
+            </select>
+          </Field>
+
+          {/* ── Tab selector ── */}
+          <div className="flex rounded-lg border border-border overflow-hidden">
+            {(['subtitles', 'decisions'] as Tab[]).map(t => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => setTab(t)}
+                className={[
+                  'flex-1 font-medium transition-colors capitalize',
+                  tab === t
+                    ? 'bg-emerald-500/15 text-emerald-400'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
+                ].join(' ')}
+                style={{ padding: '8px 0', fontSize: 13 }}
+              >
+                {t}
+              </button>
+            ))}
           </div>
-        )}
 
-        <div className="flex flex-wrap gap-1">
-          {locales.map(l => (
+          {/* ── No locale prompt ── */}
+          {!activeLocale && (
+            <p className="text-sm text-muted-foreground text-center" style={{ padding: '16px 0' }}>
+              Add a locale above to begin editing.
+            </p>
+          )}
+
+          {/* ── Subtitles Tab ── */}
+          {activeLocale && tab === 'subtitles' && (
+            <div className="flex flex-col gap-3">
+              {subsLoading ? (
+                <p className="text-sm text-muted-foreground text-center" style={{ padding: '16px 0' }}>Loading…</p>
+              ) : (
+                <>
+                  {subs.length === 0 && (
+                    <p className="text-sm text-muted-foreground text-center" style={{ padding: '8px 0' }}>
+                      No subtitles for this scene and locale.
+                    </p>
+                  )}
+                  {subs.map(s => (
+                    <SubtitleRow key={s.id} entry={s} onUpdate={handleUpdateSubtitle} onDelete={handleDeleteSubtitle} />
+                  ))}
+
+                  {/* Add new subtitle */}
+                  <div className="rounded-lg border border-dashed border-border p-4 flex flex-col gap-3">
+                    <span className="text-sm font-medium text-foreground">New Subtitle</span>
+                    <div className="grid grid-cols-2 gap-3">
+                      <Field label="Start (s)">
+                        <input
+                          type="number" step="0.1" min="0"
+                          value={newSubStart}
+                          onChange={e => setNewSubStart(e.target.value)}
+                          className="input-base"
+                          placeholder="0.0"
+                        />
+                      </Field>
+                      <Field label="End (s)">
+                        <input
+                          type="number" step="0.1" min="0"
+                          value={newSubEnd}
+                          onChange={e => setNewSubEnd(e.target.value)}
+                          className="input-base"
+                          placeholder="3.0"
+                        />
+                      </Field>
+                    </div>
+                    <Field label="Text">
+                      <textarea
+                        value={newSubText}
+                        onChange={e => setNewSubText(e.target.value)}
+                        onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) handleAddSubtitle() }}
+                        placeholder="Subtitle text…"
+                        className="input-base resize-none"
+                        rows={2}
+                      />
+                    </Field>
+                    <div className="flex justify-end">
+                      <button
+                        type="button"
+                        onClick={handleAddSubtitle}
+                        disabled={!newSubText.trim() || !newSubStart || !newSubEnd}
+                        className="font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+                        style={{ padding: '8px 20px', fontSize: 13 }}
+                      >
+                        Add Subtitle
+                      </button>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
+          {/* ── Decision Translations Tab ── */}
+          {activeLocale && tab === 'decisions' && (
+            <div className="flex flex-col gap-3">
+              {transLoading ? (
+                <p className="text-sm text-muted-foreground text-center" style={{ padding: '16px 0' }}>Loading…</p>
+              ) : (
+                <>
+                  {sceneDecisionKeys.length === 0 && (
+                    <p className="text-sm text-muted-foreground text-center" style={{ padding: '8px 0' }}>
+                      This scene has no explicit decisions.
+                    </p>
+                  )}
+                  {sceneDecisionKeys.map(key => {
+                    const existing = translations.find(t => t.decisionKey === key)
+                    return (
+                      <DecisionTranslationRow
+                        key={key}
+                        decisionKey={key}
+                        existing={existing}
+                        onSave={(label) => handleUpsertTranslation(key, label, existing?.id)}
+                        onDelete={existing ? () => handleDeleteTranslation(existing.id) : undefined}
+                      />
+                    )
+                  })}
+                </>
+              )}
+            </div>
+          )}
+
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────────────
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label className="text-sm font-medium text-foreground">{label}</label>
+      {children}
+      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+    </div>
+  )
+}
+
+function SubtitleRow({ entry, onUpdate, onDelete }: {
+  entry: SubtitleEntry
+  onUpdate: (e: SubtitleEntry) => void
+  onDelete: (id: string) => void
+}) {
+  const [editing, setEditing] = useState(false)
+  const [text, setText]       = useState(entry.text)
+  const [start, setStart]     = useState(String(entry.startTime))
+  const [end, setEnd]         = useState(String(entry.endTime))
+
+  useEffect(() => {
+    setText(entry.text)
+    setStart(String(entry.startTime))
+    setEnd(String(entry.endTime))
+  }, [entry])
+
+  function save() {
+    onUpdate({ ...entry, startTime: parseFloat(start) || 0, endTime: parseFloat(end) || 0, text })
+    setEditing(false)
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-muted/40 flex flex-col" style={{ padding: 12 }}>
+      <div className="flex items-center gap-2">
+        <span className="text-emerald-400 font-mono shrink-0" style={{ fontSize: 12 }}>
+          {Number(entry.startTime).toFixed(1)}s – {Number(entry.endTime).toFixed(1)}s
+        </span>
+        <span className="flex-1 text-sm text-foreground truncate">{entry.text}</span>
+        <button
+          type="button"
+          onClick={() => setEditing(e => !e)}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+          style={{ fontSize: 12, padding: '2px 6px' }}
+        >
+          {editing ? 'cancel' : 'edit'}
+        </button>
+        <button
+          type="button"
+          onClick={() => onDelete(entry.id)}
+          className="text-muted-foreground hover:text-red-400 transition-colors leading-none"
+          style={{ fontSize: 16, padding: '2px 4px' }}
+        >
+          ×
+        </button>
+      </div>
+      {editing && (
+        <div className="flex flex-col gap-2 border-t border-border/30" style={{ paddingTop: 10, marginTop: 10 }}>
+          <div className="grid grid-cols-2 gap-2">
+            <Field label="Start (s)">
+              <input type="number" step="0.1" value={start} onChange={e => setStart(e.target.value)} className="input-base" />
+            </Field>
+            <Field label="End (s)">
+              <input type="number" step="0.1" value={end} onChange={e => setEnd(e.target.value)} className="input-base" />
+            </Field>
+          </div>
+          <Field label="Text">
+            <textarea value={text} onChange={e => setText(e.target.value)} className="input-base resize-none" rows={2} />
+          </Field>
+          <div className="flex justify-end">
             <button
-              key={l.code}
-              onClick={() => setActiveLocale(l.code)}
-              className={[
-                'text-sm px-3 py-1.5 rounded-md border transition-colors',
-                activeLocale === l.code
-                  ? 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
-                  : 'text-muted-foreground border-border hover:text-foreground hover:bg-accent',
-              ].join(' ')}
+              type="button"
+              onClick={save}
+              className="font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
+              style={{ padding: '6px 16px', fontSize: 13 }}
             >
-              {l.code.toUpperCase()} · {l.name}
+              Save
             </button>
-          ))}
+          </div>
         </div>
-      </div>
+      )}
+    </div>
+  )
+}
 
-      {/* Info */}
-      <div className="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-4">
-        <div className="rounded-lg border border-border/50 bg-muted/30 px-4 py-3 flex flex-col gap-1.5">
-          <p className="text-xs font-medium text-foreground">Subtitles</p>
-          <p className="text-[11px] text-muted-foreground leading-relaxed">
-            Per-scene timed subtitle entries for locale <span className="text-emerald-400 font-medium">{activeLocale}</span>.
-            Each entry has a start/end time and text.
-          </p>
-          <p className="text-[10px] text-muted-foreground/60 italic mt-1">
-            Full subtitle editor coming in a future release.
-          </p>
-        </div>
+function DecisionTranslationRow({ decisionKey, existing, onSave, onDelete }: {
+  decisionKey: string
+  existing?: DecisionTranslation
+  onSave: (label: string) => void
+  onDelete?: () => void
+}) {
+  const [label, setLabel] = useState(existing?.label ?? '')
 
-        <div className="rounded-lg border border-border/50 bg-muted/30 px-4 py-3 flex flex-col gap-1.5">
-          <p className="text-xs font-medium text-foreground">Decision Labels</p>
-          <p className="text-[11px] text-muted-foreground leading-relaxed">
-            Translated button labels for each decision key per scene for locale <span className="text-emerald-400 font-medium">{activeLocale}</span>.
-          </p>
-          <p className="text-[10px] text-muted-foreground/60 italic mt-1">
-            Full translation editor coming in a future release.
-          </p>
-        </div>
+  useEffect(() => { setLabel(existing?.label ?? '') }, [existing])
 
-        <div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-4 py-3">
-          <p className="text-[11px] text-emerald-400/80">
-            The localization data model (locales, subtitles, decision translations) is stored in the database.
-            The project default locale is set in <span className="font-medium">Project Settings</span>.
-          </p>
-        </div>
+  return (
+    <div className="rounded-lg border border-border bg-muted/40 flex flex-col gap-2" style={{ padding: 12 }}>
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-sm text-foreground">{decisionKey}</span>
+        {existing && <span className="text-emerald-400" style={{ fontSize: 11 }}>translated</span>}
+        {!existing && <span className="text-muted-foreground/60 italic" style={{ fontSize: 11 }}>not translated</span>}
+        {existing && onDelete && (
+          <button
+            type="button"
+            onClick={onDelete}
+            className="ml-auto text-muted-foreground hover:text-red-400 transition-colors leading-none"
+            style={{ fontSize: 16, padding: '2px 4px' }}
+          >
+            ×
+          </button>
+        )}
+      </div>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={label}
+          onChange={e => setLabel(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') onSave(label) }}
+          placeholder="Translated label…"
+          className="input-base flex-1"
+        />
+        <button
+          type="button"
+          onClick={() => onSave(label)}
+          disabled={!label.trim()}
+          className="font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0"
+          style={{ padding: '6px 16px', fontSize: 13 }}
+        >
+          Save
+        </button>
       </div>
     </div>
   )
diff --git a/editor/frontend/src/pages/CanvasPage.tsx b/editor/frontend/src/pages/CanvasPage.tsx
index cc4364d..59e26bd 100644
--- a/editor/frontend/src/pages/CanvasPage.tsx
+++ b/editor/frontend/src/pages/CanvasPage.tsx
@@ -161,7 +161,9 @@ function GraphCanvas() {
       )}
       {validationPanelOpen && !selectedNodeData && !selectedEdgeId && <ValidationPanel />}
       {localizationPanelOpen && !selectedNodeData && !selectedEdgeId && (
-        <LocalizationPanel />
+        <ResizableSidePanel side="right" initialWidth={460} minWidth={360} maxWidth={720}>
+          <LocalizationPanel />
+        </ResizableSidePanel>
       )}
       {projectSettingsPanelOpen && (
         <ResizableSidePanel side="right" initialWidth={460} minWidth={360} maxWidth={720}>
diff --git a/runtime/src/main/java/com/engine/runtime/RuntimeServer.java b/runtime/src/main/java/com/engine/runtime/RuntimeServer.java
index bdbdd09..e613217 100644
--- a/runtime/src/main/java/com/engine/runtime/RuntimeServer.java
+++ b/runtime/src/main/java/com/engine/runtime/RuntimeServer.java
@@ -72,6 +72,7 @@ public void start() throws Exception {
         server.createContext("/api/game/decide",   this::handleDecide);
         server.createContext("/api/game/restart",  this::handleRestart);
         server.createContext("/api/game/has-save", this::handleHasSave);
+        server.createContext("/api/game/locales",  this::handleLocales);
         server.createContext("/hls/",              this::handleHls);
         server.createContext("/assets/",           this::handleAssets);
         server.createContext("/",                  this::handleStatic);
@@ -85,8 +86,9 @@ private void handleState(HttpExchange ex) throws IOException {
         if ("OPTIONS".equals(ex.getRequestMethod())) { RequestHelper.handleOptions(ex); return; }
         if (!"GET".equals(ex.getRequestMethod())) { RequestHelper.sendError(ex, 405, "Method not allowed"); return; }
 
+        String locale = queryParam(ex, "locale");
         synchronized (stateLock) {
-            RequestHelper.sendJson(ex, 200, buildStateResponse(state));
+            RequestHelper.sendJson(ex, 200, buildStateResponse(state, locale));
         }
     }
 
@@ -104,6 +106,7 @@ private void handleDecide(HttpExchange ex) throws IOException {
                 RequestHelper.sendError(ex, 400, "decisionKey is required"); return;
             }
 
+            String locale = queryParam(ex, "locale");
             synchronized (stateLock) {
                 if (state.gameOver) {
                     RequestHelper.sendError(ex, 409, "Game is over. Call /api/game/restart to play again."); return;
@@ -122,7 +125,7 @@ private void handleDecide(HttpExchange ex) throws IOException {
                 } else {
                     resp.put("transition", null);
                 }
-                resp.put("nextState", buildStateResponse(state));
+                resp.put("nextState", buildStateResponse(state, locale));
                 RequestHelper.sendJson(ex, 200, resp);
             }
 
@@ -140,10 +143,11 @@ private void handleRestart(HttpExchange ex) throws IOException {
         if ("OPTIONS".equals(ex.getRequestMethod())) { RequestHelper.handleOptions(ex); return; }
         if (!"POST".equals(ex.getRequestMethod())) { RequestHelper.sendError(ex, 405, "Method not allowed"); return; }
 
+        String locale = queryParam(ex, "locale");
         synchronized (stateLock) {
             state = new GameState(manifest.rootNodeId);
             stateStore.save(state);
-            RequestHelper.sendJson(ex, 200, buildStateResponse(state));
+            RequestHelper.sendJson(ex, 200, buildStateResponse(state, locale));
         }
     }
 
@@ -158,6 +162,23 @@ private void handleHasSave(HttpExchange ex) throws IOException {
         RequestHelper.sendJson(ex, 200, Map.of("hasSave", hasSave));
     }
 
+    // ── GET /api/game/locales ─────────────────────────────────────────────────
+
+    private void handleLocales(HttpExchange ex) throws IOException {
+        if ("OPTIONS".equals(ex.getRequestMethod())) { RequestHelper.handleOptions(ex); return; }
+        if (!"GET".equals(ex.getRequestMethod())) { RequestHelper.sendError(ex, 405, "Method not allowed"); return; }
+
+        Map<String, Object> resp = new LinkedHashMap<>();
+        resp.put("defaultLocaleCode", engine.defaultLocaleCode());
+        resp.put("locales", engine.availableLocales().stream().map(l -> {
+            Map<String, Object> lm = new LinkedHashMap<>();
+            lm.put("code", l.code);
+            lm.put("name", l.name);
+            return lm;
+        }).toList());
+        RequestHelper.sendJson(ex, 200, resp);
+    }
+
     // ── GET /hls/{path} — serve HLS files from outputDir ─────────────────────
 
     private void handleHls(HttpExchange ex) throws IOException {
@@ -226,7 +247,7 @@ private void handleStatic(HttpExchange ex) throws IOException {
 
     // ── Helpers ───────────────────────────────────────────────────────────────
 
-    private Map<String, Object> buildStateResponse(GameState s) {
+    private Map<String, Object> buildStateResponse(GameState s, String locale) {
         Manifest.NodeData scene = engine.nodeById(s.currentSceneId);
         List<GameEngine.DecisionInfo> decisions = engine.availableDecisions(s.currentSceneId);
 
@@ -264,9 +285,39 @@ private Map<String, Object> buildStateResponse(GameState s) {
         }
 
         resp.put("variables",         Map.copyOf(s.variables));
+
+        // Localization: subtitles + decision translations for the current scene
+        if (locale != null && !locale.isBlank()) {
+            resp.put("subtitles", engine.getSubtitlesForScene(s.currentSceneId, locale).stream().map(sub -> {
+                Map<String, Object> sm = new LinkedHashMap<>();
+                sm.put("startTime", sub.startTime);
+                sm.put("endTime",   sub.endTime);
+                sm.put("text",      sub.text);
+                return sm;
+            }).toList());
+
+            Map<String, String> dtMap = new LinkedHashMap<>();
+            for (Manifest.DecisionTranslationEntry dt : engine.getDecisionTranslationsForScene(s.currentSceneId, locale)) {
+                dtMap.put(dt.decisionKey, dt.label);
+            }
+            resp.put("decisionTranslations", dtMap);
+        }
+
         return resp;
     }
 
+    private String queryParam(HttpExchange ex, String name) {
+        String query = ex.getRequestURI().getQuery();
+        if (query == null) return null;
+        for (String pair : query.split("&")) {
+            String[] kv = pair.split("=", 2);
+            if (kv.length == 2 && name.equals(kv[0])) {
+                return java.net.URLDecoder.decode(kv[1], java.nio.charset.StandardCharsets.UTF_8);
+            }
+        }
+        return null;
+    }
+
     private static String mimeFor(String filename) {
         if (filename.endsWith(".m3u8")) return "application/vnd.apple.mpegurl";
         if (filename.endsWith(".ts"))   return "video/MP2T";
diff --git a/runtime/src/main/java/com/engine/runtime/game/GameEngine.java b/runtime/src/main/java/com/engine/runtime/game/GameEngine.java
index b0209e1..5bc31c6 100644
--- a/runtime/src/main/java/com/engine/runtime/game/GameEngine.java
+++ b/runtime/src/main/java/com/engine/runtime/game/GameEngine.java
@@ -165,6 +165,34 @@ public List<String> preloadUrlsForScene(String sceneId) {
             .toList();
     }
 
+    // ── Localization helpers ────────────────────────────────────────────────────
+
+    public String defaultLocaleCode() {
+        return manifest.project != null ? manifest.project.defaultLocaleCode : null;
+    }
+
+    public List<Manifest.LocaleEntry> availableLocales() {
+        if (manifest.localization == null || manifest.localization.locales == null) return List.of();
+        return manifest.localization.locales;
+    }
+
+    public List<Manifest.SubtitleEntry> getSubtitlesForScene(String sceneId, String localeCode) {
+        if (manifest.localization == null || manifest.localization.subtitles == null
+            || sceneId == null || localeCode == null) return List.of();
+        return manifest.localization.subtitles.stream()
+            .filter(s -> sceneId.equals(s.sceneId) && localeCode.equals(s.localeCode))
+            .sorted(Comparator.comparingDouble(s -> s.startTime))
+            .toList();
+    }
+
+    public List<Manifest.DecisionTranslationEntry> getDecisionTranslationsForScene(String sceneId, String localeCode) {
+        if (manifest.localization == null || manifest.localization.decisionTranslations == null
+            || sceneId == null || localeCode == null) return List.of();
+        return manifest.localization.decisionTranslations.stream()
+            .filter(dt -> sceneId.equals(dt.sceneId) && localeCode.equals(dt.localeCode))
+            .toList();
+    }
+
     // ── SpEL: state-node assignments ──────────────────────────────────────────
 
     private void executeAssignments(Manifest.NodeData stateNode, GameState gameState) {
diff --git a/runtime/src/main/java/com/engine/runtime/game/Manifest.java b/runtime/src/main/java/com/engine/runtime/game/Manifest.java
index b2336bc..a6d4460 100644
--- a/runtime/src/main/java/com/engine/runtime/game/Manifest.java
+++ b/runtime/src/main/java/com/engine/runtime/game/Manifest.java
@@ -4,7 +4,6 @@
 import com.fasterxml.jackson.annotation.JsonProperty;
 
 import java.util.List;
-import java.util.Map;
 
 /** Deserializes manifest.json written by ManifestService. */
 @JsonIgnoreProperties(ignoreUnknown = true)
@@ -14,6 +13,7 @@ public class Manifest {
     @JsonProperty("project")      public ProjectConfig project;
     @JsonProperty("nodes")        public List<NodeData> nodes;
     @JsonProperty("edges")        public List<EdgeData> edges;
+    @JsonProperty("localization") public LocalizationData localization;
 
     // ── Project config ─────────────────────────────────────────────────────────
 
@@ -80,4 +80,38 @@ public static class TransitionData {
         @JsonProperty("type")     public String type;
         @JsonProperty("duration") public double duration;
     }
+
+    // ── Localization ──────────────────────────────────────────────────────────
+
+    @JsonIgnoreProperties(ignoreUnknown = true)
+    public static class LocalizationData {
+        @JsonProperty("locales")              public List<LocaleEntry>              locales;
+        @JsonProperty("subtitles")            public List<SubtitleEntry>            subtitles;
+        @JsonProperty("decisionTranslations") public List<DecisionTranslationEntry> decisionTranslations;
+    }
+
+    @JsonIgnoreProperties(ignoreUnknown = true)
+    public static class LocaleEntry {
+        @JsonProperty("code") public String code;
+        @JsonProperty("name") public String name;
+    }
+
+    @JsonIgnoreProperties(ignoreUnknown = true)
+    public static class SubtitleEntry {
+        @JsonProperty("id")         public String id;
+        @JsonProperty("sceneId")    public String sceneId;
+        @JsonProperty("localeCode") public String localeCode;
+        @JsonProperty("startTime")  public double startTime;
+        @JsonProperty("endTime")    public double endTime;
+        @JsonProperty("text")       public String text;
+    }
+
+    @JsonIgnoreProperties(ignoreUnknown = true)
+    public static class DecisionTranslationEntry {
+        @JsonProperty("id")          public String id;
+        @JsonProperty("decisionKey") public String decisionKey;
+        @JsonProperty("sceneId")     public String sceneId;
+        @JsonProperty("localeCode")  public String localeCode;
+        @JsonProperty("label")       public String label;
+    }
 }
diff --git a/runtime/src/main/resources/client/default.css b/runtime/src/main/resources/client/default.css
index 7ce9867..bcdb93d 100644
--- a/runtime/src/main/resources/client/default.css
+++ b/runtime/src/main/resources/client/default.css
@@ -23,6 +23,8 @@
  *       │   │   ├─ #video-el           — main scene <video>
  *       │   │   ├─ #transition-el      — transition overlay <video>
  *       │   │   ├─ #freeze-canvas      — freeze-frame <canvas>
+ *       │   │   ├─ #subtitle-container — subtitle display area
+ *       │   │   │   └─ #subtitle-text  — the visible subtitle span
  *       │   │   ├─ #pause-btn          — pause button (top-left)
  *       │   │   ├─ #countdown          — decision countdown timer
  *       │   │   │   ├─ #countdown-arc  — circular arc <canvas>
@@ -218,7 +220,35 @@ body {
   z-index: 3;
 }
 
-/* ── Pause Button ────────────────────────────────────────────────────────── */
+/* ── Subtitle Display ────────────────────────────────────────────────── */
+
+#subtitle-container {
+  position: absolute;
+  bottom: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 8;
+  pointer-events: none;
+  max-width: 80%;
+  text-align: center;
+  transition: opacity 0.2s;
+}
+#subtitle-container.hidden { opacity: 0; }
+
+#subtitle-text {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 18px;
+  line-height: 1.4;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  white-space: pre-wrap;
+}
+#subtitle-text:empty { display: none; }
+
+/* ── Pause Button ────────────────────────────────────────────────────── */
 
 #pause-btn {
   position: absolute;
diff --git a/runtime/src/main/resources/client/game.js b/runtime/src/main/resources/client/game.js
index 1a962c9..cf6b28c 100644
--- a/runtime/src/main/resources/client/game.js
+++ b/runtime/src/main/resources/client/game.js
@@ -47,6 +47,8 @@ const errorMsg          = $('error-msg');
 const endScreen         = $('end-screen');
 const musicEl           = $('music-el');
 const pauseBtn          = $('pause-btn');
+const subtitleContainer = $('subtitle-container');
+const subtitleText      = $('subtitle-text');
 
 // Settings controls
 const settingMusicVol       = $('setting-music-vol');
@@ -56,6 +58,8 @@ const settingBtnBg          = $('setting-btn-bg');
 const settingBtnText        = $('setting-btn-text');
 const settingBtnPos         = $('setting-btn-pos');
 const settingResolution     = $('setting-resolution');
+const settingSubtitlesEnabled = $('setting-subtitles-enabled');
+const settingLocale         = $('setting-locale');
 const musicVolDisplay       = $('music-vol-display');
 const videoVolDisplay       = $('video-vol-display');
 const btnBgDisplay          = $('btn-bg-display');
@@ -73,6 +77,8 @@ const defaultSettings = {
   btnText:       '#ffffff',
   btnPosition:   'bottom',
   resolution:    'auto',
+  subtitlesEnabled: true,
+  locale:        '',
 };
 
 let settings = { ...defaultSettings };
@@ -109,6 +115,11 @@ function applySettings() {
   // Button position
   decisionOverlay.setAttribute('data-position', settings.btnPosition);
 
+  // Subtitles visibility
+  if (subtitleContainer) {
+    subtitleContainer.classList.toggle('hidden', !settings.subtitlesEnabled);
+  }
+
   // Sync settings UI
   settingMusicVol.value     = Math.round(settings.musicVolume * 100);
   settingVideoVol.value     = Math.round(settings.videoVolume * 100);
@@ -117,6 +128,8 @@ function applySettings() {
   settingBtnText.value      = settings.btnText;
   settingBtnPos.value       = settings.btnPosition;
   settingResolution.value   = settings.resolution;
+  if (settingSubtitlesEnabled) settingSubtitlesEnabled.checked = settings.subtitlesEnabled;
+  if (settingLocale) settingLocale.value = settings.locale;
   musicVolDisplay.textContent = Math.round(settings.musicVolume * 100) + '%';
   videoVolDisplay.textContent = Math.round(settings.videoVolume * 100) + '%';
   btnBgDisplay.textContent  = settings.btnBg;
@@ -170,6 +183,19 @@ settingResolution.addEventListener('change', () => {
   settings.resolution = settingResolution.value;
 });
 
+if (settingSubtitlesEnabled) {
+  settingSubtitlesEnabled.addEventListener('change', () => {
+    settings.subtitlesEnabled = settingSubtitlesEnabled.checked;
+    applySettings();
+  });
+}
+
+if (settingLocale) {
+  settingLocale.addEventListener('change', () => {
+    settings.locale = settingLocale.value;
+  });
+}
+
 // ── Screen management ────────────────────────────────────────────────────────
 
 function showScreen(screen) {
@@ -191,7 +217,7 @@ $('btn-continue').addEventListener('click', async () => {
   showScreen('game');
   showSpinner('Loading…');
   try {
-    const state = await apiFetch('/api/game/state');
+    const state = await apiFetch('/api/game/state' + localeQueryString());
     await loadScene(state);
   } catch (e) {
     showError('Failed to load: ' + (e.message || e));
@@ -265,6 +291,7 @@ function pauseGame() {
   videoEl.pause();
   musicEl.pause();
   clearCountdown();
+  stopSubtitleSync();
   showScreen('paused');
 }
 
@@ -273,6 +300,7 @@ function resumeGame() {
   showScreen('game');
   videoEl.play().catch(() => {});
   if (settings.musicEnabled && musicEl.src) musicEl.play().catch(() => {});
+  startSubtitleSync();
 }
 
 function pauseVideo() {
@@ -309,13 +337,71 @@ function stopMusic() {
   currentMusicUrl = null;
 }
 
+// ── Subtitle engine ─────────────────────────────────────────────────────────
+
+let currentSubtitles = [];  // [{startTime, endTime, text}] for current scene
+let subtitleRafId    = null;
+
+function setSubtitles(subs) {
+  currentSubtitles = (subs || []).slice().sort((a, b) => a.startTime - b.startTime);
+  if (subtitleText) subtitleText.textContent = '';
+}
+
+function startSubtitleSync() {
+  stopSubtitleSync();
+  if (!currentSubtitles.length || !settings.subtitlesEnabled) return;
+
+  function tick() {
+    const t = videoEl.currentTime;
+    let found = '';
+    for (const s of currentSubtitles) {
+      if (t >= s.startTime && t < s.endTime) { found = s.text; break; }
+    }
+    if (subtitleText) subtitleText.textContent = found;
+    subtitleRafId = requestAnimationFrame(tick);
+  }
+  subtitleRafId = requestAnimationFrame(tick);
+}
+
+function stopSubtitleSync() {
+  if (subtitleRafId) { cancelAnimationFrame(subtitleRafId); subtitleRafId = null; }
+  if (subtitleText) subtitleText.textContent = '';
+}
+
+// ── Locale helpers ──────────────────────────────────────────────────────────
+
+function localeQueryString() {
+  return settings.locale ? '?locale=' + encodeURIComponent(settings.locale) : '';
+}
+
+async function loadLocales() {
+  try {
+    const data = await apiFetch('/api/game/locales');
+    const select = settingLocale;
+    if (!select) return;
+    // Preserve first "None" option, clear the rest
+    while (select.options.length > 1) select.remove(1);
+    (data.locales || []).forEach(l => {
+      const opt = document.createElement('option');
+      opt.value = l.code;
+      opt.textContent = l.name + ' (' + l.code + ')';
+      select.appendChild(opt);
+    });
+    // Auto-select default locale if user hasn't chosen one
+    if (!settings.locale && data.defaultLocaleCode) {
+      settings.locale = data.defaultLocaleCode;
+    }
+    select.value = settings.locale;
+  } catch { /* no locales available */ }
+}
+
 // ── Boot ───────────────────────────────────────────────────────────────────────
 
 (async function boot() {
   loadSettings();
   applySettings();
   showScreen('menu');
-  await checkContinue();
+  await Promise.all([checkContinue(), loadLocales()]);
 })();
 
 async function checkContinue() {
@@ -335,6 +421,7 @@ async function loadScene(state) {
 
   hideDecisions();
   hideCountdown();
+  stopSubtitleSync();
   endScreen.classList.remove('visible');
 
   showSpinner('Loading scene…');
@@ -358,10 +445,16 @@ async function loadScene(state) {
   // Update background music
   updateMusic(state.musicUrl);
 
+  // Load subtitles for this scene
+  setSubtitles(state.subtitles || []);
+
   hideSpinner();
 
   videoEl.play().catch(() => {});
 
+  // Start subtitle sync loop
+  startSubtitleSync();
+
   const decisions  = state.decisions || [];
   const timeout    = state.decisionTimeoutSecs || 5;
   const isEnd      = state.isEnd;
@@ -484,10 +577,13 @@ function showDecisions(decisions, timeoutSecs) {
 
   const defaultDecision = decisions.find(d => d.isDefault) || decisions[0];
 
+  // Decision translations from the current state response
+  const dtMap = (currentState && currentState.decisionTranslations) || {};
+
   for (const d of decisions) {
     const btn = document.createElement('button');
     btn.className = 'decision-btn' + (d.isDefault ? ' default' : '');
-    btn.textContent = d.key;
+    btn.textContent = dtMap[d.key] || d.key;
     btn.addEventListener('click', () => {
       if (decisionMade) return;
       decisionMade = true;
@@ -567,8 +663,9 @@ function hideFreeze() {
 
 async function makeDecision(decisionKey) {
   showSpinner('Deciding…');
+  stopSubtitleSync();
   try {
-    const result = await apiFetch('/api/game/decide', { method: 'POST',
+    const result = await apiFetch('/api/game/decide' + localeQueryString(), { method: 'POST',
       body: JSON.stringify({ decisionKey }) });
 
     if (result.transition) {
@@ -639,7 +736,7 @@ async function restartGame() {
   stopMusic();
 
   try {
-    const state = await apiFetch('/api/game/restart', { method: 'POST', body: '{}' });
+    const state = await apiFetch('/api/game/restart' + localeQueryString(), { method: 'POST', body: '{}' });
     await loadScene(state);
   } catch (e) {
     showError('Restart failed: ' + (e.message || e));
diff --git a/runtime/src/main/resources/client/index.html b/runtime/src/main/resources/client/index.html
index 78b3514..2ca6630 100644
--- a/runtime/src/main/resources/client/index.html
+++ b/runtime/src/main/resources/client/index.html
@@ -35,6 +35,11 @@ <h1 class="menu-title">Arvexis</h1>
       <!-- Freeze frame canvas -->
       <canvas id="freeze-canvas"></canvas>
 
+      <!-- Subtitle display -->
+      <div id="subtitle-container">
+        <span id="subtitle-text"></span>
+      </div>
+
       <!-- Pause button (top-left during gameplay) -->
       <button id="pause-btn" title="Pause">⏸</button>
 
@@ -150,6 +155,26 @@ <h2 class="settings-title">Settings</h2>
         </div>
       </div>
 
+      <!-- Subtitles On/Off -->
+      <div class="settings-group">
+        <div class="settings-control">
+          <label>
+            <input type="checkbox" id="setting-subtitles-enabled" checked/>
+            Enable subtitles
+          </label>
+        </div>
+      </div>
+
+      <!-- Locale -->
+      <div class="settings-group" id="locale-group">
+        <span class="settings-label">Language / Locale</span>
+        <div class="settings-control">
+          <select id="setting-locale">
+            <option value="">None</option>
+          </select>
+        </div>
+      </div>
+
       <!-- Resolution (set once) -->
       <div class="settings-group" id="resolution-group">
         <span class="settings-label">Resolution (applied on next scene)</span>