diff --git a/src/islands/draw/DbDiagram.tsx b/src/islands/draw/DbDiagram.tsx
index 862a50e..5e0e778 100644
--- a/src/islands/draw/DbDiagram.tsx
+++ b/src/islands/draw/DbDiagram.tsx
@@ -12,8 +12,80 @@ import { downloadService } from '@/services/download';
 import { exportSql, DIALECTS, type Dialect } from '@/tools/draw/sql-export.lib';
 import { exportDiagramImage, type ImageFormat } from '@/tools/draw/diagram-image.lib';
 import { addRef, removeRef, type RefColumn } from '@/tools/draw/refs.lib';
+import type { Lang } from '@/i18n/config';
 import '@xyflow/react/dist/style.css';
 
+const TR: Record<Lang, {
+  loading: string;
+  descPre: string;
+  descPost: string;
+  saveProject: string;
+  exportDbml: string;
+  open: string;
+  saving: string;
+  saved: string;
+  sqlDialect: string;
+  exportSql: string;
+  image: string;
+  scale: string;
+  exportImage: string;
+  expand: string;
+  showNavbar: string;
+  hideNavbarSpace: string;
+  hideNavbar: string;
+  exit: string;
+  copySql: string;
+  downloadSql: string;
+  exportFailed: string;
+}> = {
+  en: {
+    loading: 'Loading diagram…',
+    descPre: 'Write your schema in ',
+    descPost: ' on the left; the ER diagram updates live. Drag tables to arrange them — your layout and schema are saved in your browser.',
+    saveProject: 'Save project',
+    exportDbml: 'Export .dbml',
+    open: 'Open…',
+    saving: 'Saving…',
+    saved: 'Saved',
+    sqlDialect: 'SQL dialect',
+    exportSql: 'Export SQL',
+    image: 'Image',
+    scale: 'Scale',
+    exportImage: 'Export image',
+    expand: 'Expand',
+    showNavbar: 'Show navbar',
+    hideNavbarSpace: 'Hide navbar for more space',
+    hideNavbar: 'Hide navbar',
+    exit: 'Exit',
+    copySql: 'Copy SQL',
+    downloadSql: 'Download .sql',
+    exportFailed: 'Export failed',
+  },
+  id: {
+    loading: 'Memuat diagram…',
+    descPre: 'Tulis skema Anda dalam ',
+    descPost: ' di sebelah kiri; diagram ER diperbarui secara langsung. Seret tabel untuk menatanya — tata letak dan skema Anda disimpan di browser Anda.',
+    saveProject: 'Simpan proyek',
+    exportDbml: 'Ekspor .dbml',
+    open: 'Buka…',
+    saving: 'Menyimpan…',
+    saved: 'Tersimpan',
+    sqlDialect: 'Dialek SQL',
+    exportSql: 'Ekspor SQL',
+    image: 'Gambar',
+    scale: 'Skala',
+    exportImage: 'Ekspor gambar',
+    expand: 'Perbesar',
+    showNavbar: 'Tampilkan navbar',
+    hideNavbarSpace: 'Sembunyikan navbar untuk ruang lebih',
+    hideNavbar: 'Sembunyikan navbar',
+    exit: 'Keluar',
+    copySql: 'Salin SQL',
+    downloadSql: 'Unduh .sql',
+    exportFailed: 'Ekspor gagal',
+  },
+};
+
 const SEED = `Table users {
   id int [pk, increment]
   email varchar [not null, unique]
@@ -33,7 +105,8 @@ Ref: posts.user_id > users.id
 const nodeTypes = { table: TableNode };
 const edgeTypes = { relation: RelationEdge };
 
-export default function DbDiagram() {
+export default function DbDiagram({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   // react-flow is browser-only and heavy — load it after mount (like Whiteboard).
   const [RF, setRF] = useState<{
     ReactFlow: ComponentType<Record<string, unknown>>;
@@ -201,7 +274,7 @@ export default function DbDiagram() {
     try {
       setSql(exportSql(dbml, dialect));
     } catch (e) {
-      setSqlErr(e instanceof Error ? e.message : 'Export failed');
+      setSqlErr(e instanceof Error ? e.message : t.exportFailed);
     }
   };
 
@@ -263,7 +336,7 @@ export default function DbDiagram() {
   const onNodeMouseLeave = useCallback(() => setHoveredId(null), []);
 
   const diagram = useMemo(() => {
-    if (!RF) return <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Loading diagram…</div>;
+    if (!RF) return <div className="flex h-full items-center justify-center text-sm text-muted-foreground">{t.loading}</div>;
     const { ReactFlow, Background, Controls, MiniMap } = RF;
 
     // Derive hover emphasis: connected edges + neighbour tables pop; the rest dim.
@@ -315,18 +388,18 @@ export default function DbDiagram() {
         <MiniMap pannable zoomable />
       </ReactFlow>
     );
-  }, [RF, nodes, edges, onNodesChange, onEdgesChange, onConnect, onEdgesDelete, hoveredId, onNodeMouseEnter, onNodeMouseLeave]);
+  }, [RF, nodes, edges, onNodesChange, onEdgesChange, onConnect, onEdgesDelete, hoveredId, onNodeMouseEnter, onNodeMouseLeave, t]);
 
   return (
     <div className="space-y-3">
       <p className="max-w-3xl text-sm text-muted-foreground">
-        Write your schema in <a href="https://dbml.dbdiagram.io/docs/" target="_blank" rel="noopener noreferrer" className="font-bold underline underline-offset-2">DBML</a> on the left; the ER diagram updates live. Drag tables to arrange them — your layout and schema are saved in your browser.
+        {t.descPre}<a href="https://dbml.dbdiagram.io/docs/" target="_blank" rel="noopener noreferrer" className="font-bold underline underline-offset-2">DBML</a>{t.descPost}
       </p>
 
       <div className="flex flex-wrap items-center gap-2">
-        <Button variant="secondary" onClick={saveProject}><Save className="h-4 w-4" />Save project</Button>
-        <Button variant="secondary" onClick={exportDbmlFile}>Export .dbml</Button>
-        <Button variant="secondary" onClick={() => fileInputRef.current?.click()}><FolderOpen className="h-4 w-4" />Open…</Button>
+        <Button variant="secondary" onClick={saveProject}><Save className="h-4 w-4" />{t.saveProject}</Button>
+        <Button variant="secondary" onClick={exportDbmlFile}>{t.exportDbml}</Button>
+        <Button variant="secondary" onClick={() => fileInputRef.current?.click()}><FolderOpen className="h-4 w-4" />{t.open}</Button>
         <input
           ref={fileInputRef}
           type="file"
@@ -336,24 +409,24 @@ export default function DbDiagram() {
         />
         <span className="ml-1 flex items-center gap-1 text-xs font-bold uppercase tracking-wide">
           {saveState === 'saving' ? (
-            <span className="flex items-center gap-1.5 text-amber-600"><span className="inline-block h-2 w-2 rounded-full bg-amber-500" />Saving…</span>
+            <span className="flex items-center gap-1.5 text-amber-600"><span className="inline-block h-2 w-2 rounded-full bg-amber-500" />{t.saving}</span>
           ) : (
-            <span className="flex items-center gap-1 text-muted-foreground"><Check className="h-3.5 w-3.5" />Saved</span>
+            <span className="flex items-center gap-1 text-muted-foreground"><Check className="h-3.5 w-3.5" />{t.saved}</span>
           )}
         </span>
       </div>
 
       <div className="flex flex-wrap items-end gap-4 border-2 border-border bg-muted/40 p-3">
         <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">SQL dialect</span>
+          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.sqlDialect}</span>
           <select value={dialect} onChange={(e) => setDialect(e.target.value as Dialect)} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
             {DIALECTS.map((d) => <option key={d.key} value={d.key}>{d.label}</option>)}
           </select>
         </div>
-        <Button onClick={runSqlExport} disabled={!!error}>Export SQL</Button>
+        <Button onClick={runSqlExport} disabled={!!error}>{t.exportSql}</Button>
 
         <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">Image</span>
+          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.image}</span>
           <select value={imgFormat} onChange={(e) => setImgFormat(e.target.value as ImageFormat)} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
             <option value="png">PNG</option>
             <option value="jpeg">JPEG</option>
@@ -362,14 +435,14 @@ export default function DbDiagram() {
           </select>
         </div>
         <div className="space-y-1">
-          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">Scale</span>
+          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">{t.scale}</span>
           <select value={imgScale} onChange={(e) => setImgScale(Number(e.target.value))} className="border-2 border-border bg-background px-2 py-1.5 text-sm">
             <option value={1}>1×</option><option value={2}>2×</option><option value={3}>3×</option>
           </select>
         </div>
-        <Button variant="secondary" onClick={runImageExport}>Export image</Button>
+        <Button variant="secondary" onClick={runImageExport}>{t.exportImage}</Button>
         {!expanded && (
-          <Button variant="secondary" onClick={() => setExpandedPersist(true)}><Maximize2 className="h-4 w-4" />Expand</Button>
+          <Button variant="secondary" onClick={() => setExpandedPersist(true)}><Maximize2 className="h-4 w-4" />{t.expand}</Button>
         )}
       </div>
 
@@ -397,15 +470,15 @@ export default function DbDiagram() {
         <>
           <button
             onClick={() => setNavHiddenPersist(!navHidden)}
-            title={navHidden ? 'Show navbar' : 'Hide navbar for more space'}
-            aria-label={navHidden ? 'Show navbar' : 'Hide navbar'}
+            title={navHidden ? t.showNavbar : t.hideNavbarSpace}
+            aria-label={navHidden ? t.showNavbar : t.hideNavbar}
             className={`fixed left-1/2 z-50 -translate-x-1/2 rounded-b-md border-2 border-t-0 border-border bg-background px-5 py-0.5 shadow-brutal-sm hover:bg-muted ${navHidden ? '' : '-translate-y-full'}`}
             style={{ top: topOffset }}
           >
             {navHidden ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
           </button>
           <div className="fixed right-4 z-40 flex items-center gap-3" style={{ top: topOffset + 8 }}>
-            <Button variant="secondary" onClick={() => setExpandedPersist(false)} className="shadow-brutal"><Minimize2 className="h-4 w-4" />Exit</Button>
+            <Button variant="secondary" onClick={() => setExpandedPersist(false)} className="shadow-brutal"><Minimize2 className="h-4 w-4" />{t.exit}</Button>
           </div>
         </>
       )}
@@ -414,8 +487,8 @@ export default function DbDiagram() {
       {sql && (
         <div className="space-y-2">
           <div className="flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={() => navigator.clipboard?.writeText(sql)}>Copy SQL</Button>
-            <Button variant="secondary" onClick={() => downloadService.download(new Blob([sql], { type: 'text/sql' }), `schema-${dialect}.sql`)}>Download .sql</Button>
+            <Button variant="secondary" onClick={() => navigator.clipboard?.writeText(sql)}>{t.copySql}</Button>
+            <Button variant="secondary" onClick={() => downloadService.download(new Blob([sql], { type: 'text/sql' }), `schema-${dialect}.sql`)}>{t.downloadSql}</Button>
           </div>
           <pre className="max-h-[40vh] overflow-auto border-2 border-border bg-background p-3 font-mono text-xs">{sql}</pre>
         </div>
diff --git a/src/islands/draw/SignaturePad.tsx b/src/islands/draw/SignaturePad.tsx
index 88178ac..027a5f9 100644
--- a/src/islands/draw/SignaturePad.tsx
+++ b/src/islands/draw/SignaturePad.tsx
@@ -5,8 +5,42 @@ import { Button } from '@/components/ui/Button';
 import { CopyImageButton } from '@/components/ui/CopyImageButton';
 import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
 import { downloadService } from '@/services/download';
+import type { Lang } from '@/i18n/config';
 
-export default function SignaturePad() {
+const TR: Record<Lang, {
+  penColor: string;
+  pen: string;
+  width: string;
+  transparentBg: string;
+  hint: string;
+  downloadPng: string;
+  downloadSvg: string;
+  clear: string;
+}> = {
+  en: {
+    penColor: 'Pen color',
+    pen: 'Pen',
+    width: 'Width',
+    transparentBg: 'Transparent background',
+    hint: 'Sign with a mouse, trackpad, or finger. Everything stays in your browser.',
+    downloadPng: 'Download PNG',
+    downloadSvg: 'Download SVG',
+    clear: 'Clear',
+  },
+  id: {
+    penColor: 'Warna pena',
+    pen: 'Pena',
+    width: 'Lebar',
+    transparentBg: 'Latar transparan',
+    hint: 'Tanda tangani dengan mouse, trackpad, atau jari. Semuanya tetap di browser Anda.',
+    downloadPng: 'Unduh PNG',
+    downloadSvg: 'Unduh SVG',
+    clear: 'Bersihkan',
+  },
+};
+
+export default function SignaturePad({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const padRef = useRef<SignaturePadLib | null>(null);
   const [color, setColor] = useState('#0a0a0a');
@@ -78,39 +112,39 @@ export default function SignaturePad() {
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-4">
-        <label className="flex items-center gap-2 text-sm" title="Pen color">
-          <span className="font-bold uppercase tracking-wide text-muted-foreground">Pen</span>
+        <label className="flex items-center gap-2 text-sm" title={t.penColor}>
+          <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.pen}</span>
           <input type="color" value={color} onChange={e => setColor(e.target.value)} className="h-9 w-10 cursor-pointer border-2 border-border bg-muted" />
         </label>
         <label className="flex items-center gap-2 text-sm">
-          <span className="text-muted-foreground">Width</span>
+          <span className="text-muted-foreground">{t.width}</span>
           <input type="range" min={1} max={8} value={width} onChange={e => setWidth(Number(e.target.value))} className="w-24 accent-accent" />
         </label>
         <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-1.5 text-sm">
           <input type="checkbox" checked={transparent} onChange={() => setTransparent(t => !t)} className="accent-accent" />
-          Transparent background
+          {t.transparentBg}
         </label>
       </div>
 
       <div className={`inline-block w-full max-w-2xl border-2 border-border ${transparent ? 'gwt-checkerboard' : 'bg-white'}`}>
         <canvas ref={canvasRef} className="block h-64 w-full touch-none" style={{ cursor: 'crosshair' }} />
       </div>
-      <p className="text-xs text-muted-foreground">Sign with a mouse, trackpad, or finger. Everything stays in your browser.</p>
+      <p className="text-xs text-muted-foreground">{t.hint}</p>
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={downloadPng} disabled={empty}>
           <Download className="h-4 w-4" />
-          Download PNG
+          {t.downloadPng}
         </Button>
         <Button variant="secondary" onClick={downloadSvg} disabled={empty}>
           <Download className="h-4 w-4" />
-          Download SVG
+          {t.downloadSvg}
         </Button>
         <CopyImageButton blob={empty ? null : toPngBlob} disabled={empty} />
         <EditInAnnotatorButton blob={empty ? null : toPngBlob} filename="signature.png" disabled={empty} />
         <Button variant="ghost" onClick={clear} disabled={empty}>
           <Eraser className="h-4 w-4" />
-          Clear
+          {t.clear}
         </Button>
       </div>
     </div>
diff --git a/src/islands/draw/Whiteboard.tsx b/src/islands/draw/Whiteboard.tsx
index 146207a..4489559 100644
--- a/src/islands/draw/Whiteboard.tsx
+++ b/src/islands/draw/Whiteboard.tsx
@@ -2,17 +2,66 @@ import { useEffect, useRef, useState, type ComponentType } from 'react';
 import { Maximize2, Minimize2, Check, ChevronUp, ChevronDown } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { loadScene, saveScene, type WhiteboardScene } from '@/tools/draw/whiteboard.store';
+import type { Lang } from '@/i18n/config';
 import '@excalidraw/excalidraw/index.css';
 
 const SAVE_INTERVAL = 30; // seconds between autosaves
 
+const TR: Record<Lang, {
+  saveNow: string;
+  unsavedSaveNow: (n: number) => string;
+  saved: string;
+  loadError: string;
+  loading: string;
+  descPre: string;
+  descMid: string;
+  descPost: string;
+  expand: string;
+  showNavbar: string;
+  hideNavbarSpace: string;
+  hideNavbar: string;
+  exit: string;
+}> = {
+  en: {
+    saveNow: 'Save now',
+    unsavedSaveNow: (n) => `Unsaved · save now (${n}s)`,
+    saved: 'Saved',
+    loadError: "Couldn't load the whiteboard. Please refresh the page.",
+    loading: 'Loading whiteboard…',
+    descPre: 'A full whiteboard for sketches, diagrams, flowcharts, and mind maps. Everything stays in your browser — export as PNG/SVG or a reusable ',
+    descMid: ' file from the menu. Powered by ',
+    descPost: ' — you can also use it at excalidraw.com.',
+    expand: 'Expand',
+    showNavbar: 'Show navbar',
+    hideNavbarSpace: 'Hide navbar for more space',
+    hideNavbar: 'Hide navbar',
+    exit: 'Exit',
+  },
+  id: {
+    saveNow: 'Simpan sekarang',
+    unsavedSaveNow: (n) => `Belum tersimpan · simpan sekarang (${n}s)`,
+    saved: 'Tersimpan',
+    loadError: 'Tidak dapat memuat whiteboard. Silakan muat ulang halaman.',
+    loading: 'Memuat whiteboard…',
+    descPre: 'Whiteboard lengkap untuk sketsa, diagram, flowchart, dan mind map. Semuanya tetap di browser Anda — ekspor sebagai PNG/SVG atau file ',
+    descMid: ' yang dapat digunakan ulang dari menu. Didukung oleh ',
+    descPost: ' — Anda juga dapat menggunakannya di excalidraw.com.',
+    expand: 'Perbesar',
+    showNavbar: 'Tampilkan navbar',
+    hideNavbarSpace: 'Sembunyikan navbar untuk ruang lebih',
+    hideNavbar: 'Sembunyikan navbar',
+    exit: 'Keluar',
+  },
+};
+
 // Serve Excalidraw's fonts from our own origin (copied to public/excalidraw)
 // instead of its default esm.sh CDN — keeps the zero-external-request promise.
 if (typeof window !== 'undefined') {
   (window as unknown as { EXCALIDRAW_ASSET_PATH: string }).EXCALIDRAW_ASSET_PATH = '/excalidraw/';
 }
 
-export default function Whiteboard() {
+export default function Whiteboard({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   // Excalidraw is a large, browser-only React component — load it after mount
   // so it never runs during SSR.
   const [Excalidraw, setExcalidraw] = useState<ComponentType<Record<string, unknown>> | null>(null);
@@ -154,27 +203,27 @@ export default function Whiteboard() {
   const statusIndicator = countdown > 0 ? (
     <button
       onClick={flushSave}
-      title="Save now"
+      title={t.saveNow}
       className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-amber-600 underline underline-offset-2 hover:text-amber-700"
     >
       <span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
-      Unsaved · save now ({countdown}s)
+      {t.unsavedSaveNow(countdown)}
     </button>
   ) : (
     <span className="flex items-center gap-1 text-xs font-bold uppercase tracking-wide text-muted-foreground">
-      <Check className="h-3.5 w-3.5" /> Saved
+      <Check className="h-3.5 w-3.5" /> {t.saved}
     </span>
   );
 
   const canvas = failed ? (
     <div className="flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground">
-      Couldn&apos;t load the whiteboard. Please refresh the page.
+      {t.loadError}
     </div>
   ) : Excalidraw ? (
     <Excalidraw initialData={initialDataRef.current} onChange={onChange} />
   ) : (
     <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
-      Loading whiteboard…
+      {t.loading}
     </div>
   );
 
@@ -185,8 +234,7 @@ export default function Whiteboard() {
     <div className="space-y-3">
       <div className="flex flex-wrap items-center justify-between gap-3">
         <p className="max-w-3xl text-sm text-muted-foreground">
-          A full whiteboard for sketches, diagrams, flowcharts, and mind maps. Everything stays in your
-          browser — export as PNG/SVG or a reusable <code>.excalidraw</code> file from the menu. Powered by{' '}
+          {t.descPre}<code>.excalidraw</code>{t.descMid}
           <a
             href="https://excalidraw.com"
             target="_blank"
@@ -194,15 +242,15 @@ export default function Whiteboard() {
             className="font-bold text-foreground underline underline-offset-2 hover:text-accent"
           >
             Excalidraw
-          </a>{' '}
-          — you can also use it at excalidraw.com.
+          </a>
+          {t.descPost}
         </p>
         <div className="flex items-center gap-3">
           {statusIndicator}
           {!expanded && (
             <Button variant="secondary" onClick={() => setExpandedPersist(true)}>
               <Maximize2 className="h-4 w-4" />
-              Expand
+              {t.expand}
             </Button>
           )}
         </div>
@@ -227,8 +275,8 @@ export default function Whiteboard() {
       {expanded && (
         <button
           onClick={() => setNavHiddenPersist(!navHidden)}
-          title={navHidden ? 'Show navbar' : 'Hide navbar for more space'}
-          aria-label={navHidden ? 'Show navbar' : 'Hide navbar'}
+          title={navHidden ? t.showNavbar : t.hideNavbarSpace}
+          aria-label={navHidden ? t.showNavbar : t.hideNavbar}
           className={`fixed left-1/2 z-50 !mt-0 -translate-x-1/2 rounded-b-md border-2 border-t-0 border-border bg-background px-5 py-0.5 shadow-brutal-sm hover:bg-muted ${navHidden ? '' : '-translate-y-full'}`}
           style={{ top: topOffset }}
         >
@@ -243,7 +291,7 @@ export default function Whiteboard() {
           </div>
           <Button variant="secondary" onClick={() => setExpandedPersist(false)} className="shadow-brutal">
             <Minimize2 className="h-4 w-4" />
-            Exit
+            {t.exit}
           </Button>
         </div>
       )}
diff --git a/src/islands/files/ArchiveExtract.tsx b/src/islands/files/ArchiveExtract.tsx
index 2777715..1080d38 100644
--- a/src/islands/files/ArchiveExtract.tsx
+++ b/src/islands/files/ArchiveExtract.tsx
@@ -4,6 +4,45 @@ import { Dropzone } from '@/components/ui/Dropzone';
 import { Alert } from '@/components/ui/Alert';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  noFiles: string;
+  couldNotRead: string;
+  couldNotExtract: (name: string) => string;
+  dropArchive: string;
+  dropHint: string;
+  footer: string;
+  reading: (name: string) => string;
+  archiveWord: string;
+  fileCount: (n: number) => string;
+  download: string;
+}> = {
+  en: {
+    noFiles: 'No files found in this archive.',
+    couldNotRead: 'Could not read this archive. It may be corrupt, password-protected, or an unsupported format.',
+    couldNotExtract: (name) => `Could not extract "${name}".`,
+    dropArchive: 'Drop an archive or click to browse',
+    dropHint: 'Extract RAR, 7z, TAR, GZ, ZIP and more — decoded in your browser',
+    footer: "Extract-only. Creating .rar/.7z isn't possible client-side (proprietary formats). The first open loads a ~1 MB decoder, then it's cached.",
+    reading: (name) => `Reading ${name}…`,
+    archiveWord: 'archive',
+    fileCount: (n) => `${n} file${n === 1 ? '' : 's'}`,
+    download: 'Download',
+  },
+  id: {
+    noFiles: 'Tidak ada file yang ditemukan dalam arsip ini.',
+    couldNotRead: 'Tidak dapat membaca arsip ini. Mungkin rusak, dilindungi kata sandi, atau format yang tidak didukung.',
+    couldNotExtract: (name) => `Tidak dapat mengekstrak "${name}".`,
+    dropArchive: 'Letakkan arsip atau klik untuk menjelajah',
+    dropHint: 'Ekstrak RAR, 7z, TAR, GZ, ZIP dan lainnya — didekode di browser Anda',
+    footer: "Hanya ekstrak. Membuat .rar/.7z tidak mungkin di sisi klien (format proprietari). Pembukaan pertama memuat dekoder ~1 MB, lalu di-cache.",
+    reading: (name) => `Membaca ${name}…`,
+    archiveWord: 'arsip',
+    fileCount: (n) => `${n} file`,
+    download: 'Unduh',
+  },
+};
 
 interface Entry {
   name: string;
@@ -27,7 +66,8 @@ async function loadArchive() {
 const ACCEPT =
   '.rar,.7z,.zip,.tar,.gz,.tgz,.bz2,.tbz2,.xz,.txz,.zst,.cab,.iso,.cpio,.ar,.lha';
 
-export default function ArchiveExtract() {
+export default function ArchiveExtract({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [archiveName, setArchiveName] = useState('');
   const [entries, setEntries] = useState<Entry[]>([]);
   const [busy, setBusy] = useState(false);
@@ -53,12 +93,12 @@ export default function ArchiveExtract() {
         // Hide macOS archive cruft (__MACOSX/, AppleDouble ._ files).
         .filter(e => !e.name.includes('__MACOSX/') && !(e.name.split('/').pop() || '').startsWith('._'));
       setEntries(mapped);
-      if (mapped.length === 0) setError('No files found in this archive.');
+      if (mapped.length === 0) setError(t.noFiles);
     } catch (e) {
       setError(
         e instanceof Error && e.message
           ? e.message
-          : 'Could not read this archive. It may be corrupt, password-protected, or an unsupported format.'
+          : t.couldNotRead
       );
     } finally {
       setBusy(false);
@@ -72,7 +112,7 @@ export default function ArchiveExtract() {
       const name = entry.name.split('/').pop() || extracted.name || 'file';
       await downloadService.download(extracted, name);
     } catch {
-      setError(`Could not extract "${entry.name}".`);
+      setError(t.couldNotExtract(entry.name));
     }
   };
 
@@ -80,24 +120,22 @@ export default function ArchiveExtract() {
     <div className="space-y-4">
       <Dropzone onDrop={open} accept={ACCEPT} multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an archive or click to browse</p>
+          <p className="text-lg font-bold">{t.dropArchive}</p>
           <p className="text-sm text-muted-foreground">
-            Extract RAR, 7z, TAR, GZ, ZIP and more — decoded in your browser
+            {t.dropHint}
           </p>
         </div>
       </Dropzone>
 
       <p className="text-xs text-muted-foreground">
-        Extract-only. Creating .rar/.7z isn't possible client-side (proprietary formats). The first
-        open loads a ~1&nbsp;MB decoder, then it's cached.
+        {t.footer}
       </p>
 
-      {busy && <p className="text-sm text-muted-foreground">Reading {archiveName || 'archive'}…</p>}
+      {busy && <p className="text-sm text-muted-foreground">{t.reading(archiveName || t.archiveWord)}</p>}
 
       {archiveName && !busy && !error && (
         <p className="text-sm text-muted-foreground">
-          <span className="font-bold text-foreground">{archiveName}</span> — {entries.length} file
-          {entries.length === 1 ? '' : 's'}
+          <span className="font-bold text-foreground">{archiveName}</span> — {t.fileCount(entries.length)}
         </p>
       )}
 
@@ -111,7 +149,7 @@ export default function ArchiveExtract() {
               )}
               <button
                 onClick={() => download(entry)}
-                title="Download"
+                title={t.download}
                 className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal"
               >
                 <Download className="h-4 w-4" />
diff --git a/src/islands/files/FileCrypt.tsx b/src/islands/files/FileCrypt.tsx
index 26c0ac7..45b041e 100644
--- a/src/islands/files/FileCrypt.tsx
+++ b/src/islands/files/FileCrypt.tsx
@@ -11,10 +11,86 @@ import {
   encryptedName,
   decryptedName,
 } from '@/tools/files/crypto.lib';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'encrypt' | 'decrypt';
 
-export default function FileCrypt() {
+const TR: Record<Lang, {
+  encrypt: string;
+  decrypt: string;
+  chooseFileFirst: string;
+  enterPassword: string;
+  operationFailed: string;
+  dropFile: string;
+  encryptHint: string;
+  decryptHint: string;
+  passwordLabel: string;
+  placeholderEncrypt: string;
+  placeholderDecrypt: string;
+  hidePassword: string;
+  showPassword: string;
+  weakWarning: string;
+  encrypting: string;
+  decrypting: string;
+  encryptFile: string;
+  decryptFile: string;
+  clear: string;
+  encrypted: string;
+  decrypted: string;
+  footer: string;
+}> = {
+  en: {
+    encrypt: 'Encrypt',
+    decrypt: 'Decrypt',
+    chooseFileFirst: 'Choose a file first.',
+    enterPassword: 'Enter a password.',
+    operationFailed: 'Operation failed.',
+    dropFile: 'Drop a file or click to browse',
+    encryptHint: 'Any file — locked with AES-256, never leaves your device',
+    decryptHint: 'Choose a .gwtenc file to unlock',
+    passwordLabel: 'Password',
+    placeholderEncrypt: 'Choose a strong password',
+    placeholderDecrypt: 'Enter the password',
+    hidePassword: 'Hide password',
+    showPassword: 'Show password',
+    weakWarning: 'Short passwords are easy to guess — use 8+ characters (a passphrase is best).',
+    encrypting: 'Encrypting…',
+    decrypting: 'Decrypting…',
+    encryptFile: 'Encrypt file',
+    decryptFile: 'Decrypt file',
+    clear: 'Clear',
+    encrypted: 'Encrypted',
+    decrypted: 'Decrypted',
+    footer: 'AES-256-GCM with a PBKDF2 key (250,000 iterations, SHA-256). Everything runs in your browser — the file and password never leave your device. There is no password recovery: lose the password and the file is unrecoverable.',
+  },
+  id: {
+    encrypt: 'Enkripsi',
+    decrypt: 'Dekripsi',
+    chooseFileFirst: 'Pilih file terlebih dahulu.',
+    enterPassword: 'Masukkan kata sandi.',
+    operationFailed: 'Operasi gagal.',
+    dropFile: 'Letakkan file atau klik untuk menjelajah',
+    encryptHint: 'File apa pun — dikunci dengan AES-256, tidak pernah meninggalkan perangkat Anda',
+    decryptHint: 'Pilih file .gwtenc untuk membuka kunci',
+    passwordLabel: 'Kata Sandi',
+    placeholderEncrypt: 'Pilih kata sandi yang kuat',
+    placeholderDecrypt: 'Masukkan kata sandi',
+    hidePassword: 'Sembunyikan kata sandi',
+    showPassword: 'Tampilkan kata sandi',
+    weakWarning: 'Kata sandi pendek mudah ditebak — gunakan 8+ karakter (frasa sandi lebih baik).',
+    encrypting: 'Mengenkripsi…',
+    decrypting: 'Mendekripsi…',
+    encryptFile: 'Enkripsi file',
+    decryptFile: 'Dekripsi file',
+    clear: 'Bersihkan',
+    encrypted: 'Terenkripsi',
+    decrypted: 'Terdekripsi',
+    footer: 'AES-256-GCM dengan kunci PBKDF2 (250.000 iterasi, SHA-256). Semuanya berjalan di browser Anda — file dan kata sandi tidak pernah meninggalkan perangkat Anda. Tidak ada pemulihan kata sandi: jika kata sandi hilang, file tidak dapat dipulihkan.',
+  },
+};
+
+export default function FileCrypt({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [mode, setMode] = useState<Mode>('encrypt');
   const [file, setFile] = useState<File | null>(null);
   const [password, setPassword] = useState('');
@@ -31,7 +107,7 @@ export default function FileCrypt() {
 
   const run = async () => {
     if (!file || !password) {
-      setError(!file ? 'Choose a file first.' : 'Enter a password.');
+      setError(!file ? t.chooseFileFirst : t.enterPassword);
       return;
     }
     setBusy(true);
@@ -50,7 +126,7 @@ export default function FileCrypt() {
         setResult({ blob: new Blob([out]), name: decryptedName(file.name) });
       }
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Operation failed.');
+      setError(e instanceof Error ? e.message : t.operationFailed);
     } finally {
       setBusy(false);
     }
@@ -67,7 +143,7 @@ export default function FileCrypt() {
           onClick={() => { setMode('encrypt'); setResult(null); setError(''); }}
         >
           <Lock className="h-4 w-4" />
-          Encrypt
+          {t.encrypt}
         </Button>
         <Button
           variant={mode === 'decrypt' ? 'primary' : 'secondary'}
@@ -75,17 +151,15 @@ export default function FileCrypt() {
           onClick={() => { setMode('decrypt'); setResult(null); setError(''); }}
         >
           <Unlock className="h-4 w-4" />
-          Decrypt
+          {t.decrypt}
         </Button>
       </div>
 
       <Dropzone onDrop={onDrop} multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a file or click to browse</p>
+          <p className="text-lg font-bold">{t.dropFile}</p>
           <p className="text-sm text-muted-foreground">
-            {mode === 'encrypt'
-              ? 'Any file — locked with AES-256, never leaves your device'
-              : 'Choose a .gwtenc file to unlock'}
+            {mode === 'encrypt' ? t.encryptHint : t.decryptHint}
           </p>
         </div>
       </Dropzone>
@@ -98,7 +172,7 @@ export default function FileCrypt() {
 
       <label className="block space-y-1.5">
         <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Password
+          {t.passwordLabel}
         </span>
         <div className="flex items-stretch gap-2">
           <input
@@ -107,14 +181,14 @@ export default function FileCrypt() {
             onChange={e => setPassword(e.target.value)}
             onKeyDown={e => { if (e.key === 'Enter') run(); }}
             autoComplete="off"
-            placeholder={mode === 'encrypt' ? 'Choose a strong password' : 'Enter the password'}
+            placeholder={mode === 'encrypt' ? t.placeholderEncrypt : t.placeholderDecrypt}
             className="w-full max-w-md border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm"
           />
           <button
             type="button"
             onClick={() => setShow(s => !s)}
-            title={show ? 'Hide password' : 'Show password'}
-            aria-label={show ? 'Hide password' : 'Show password'}
+            title={show ? t.hidePassword : t.showPassword}
+            aria-label={show ? t.hidePassword : t.showPassword}
             className="border-2 border-border bg-muted p-2 shadow-brutal-sm press-brutal"
           >
             {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -122,7 +196,7 @@ export default function FileCrypt() {
         </div>
         {weak && (
           <span className="text-xs text-amber-600 dark:text-amber-400">
-            Short passwords are easy to guess — use 8+ characters (a passphrase is best).
+            {t.weakWarning}
           </span>
         )}
       </label>
@@ -130,11 +204,11 @@ export default function FileCrypt() {
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || !password || busy}>
           {busy
-            ? mode === 'encrypt' ? 'Encrypting…' : 'Decrypting…'
-            : mode === 'encrypt' ? 'Encrypt file' : 'Decrypt file'}
+            ? mode === 'encrypt' ? t.encrypting : t.decrypting
+            : mode === 'encrypt' ? t.encryptFile : t.decryptFile}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setPassword(''); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -143,7 +217,7 @@ export default function FileCrypt() {
       {result && (
         <div className="space-y-2">
           <Alert variant="success">
-            {mode === 'encrypt' ? 'Encrypted' : 'Decrypted'} — {formatBytes(result.blob.size)}
+            {mode === 'encrypt' ? t.encrypted : t.decrypted} — {formatBytes(result.blob.size)}
           </Alert>
           <ResultActions blob={result.blob} filename={result.name} />
         </div>
@@ -151,9 +225,7 @@ export default function FileCrypt() {
 
       <p className="flex items-start gap-2 text-xs text-muted-foreground">
         <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
-        AES-256-GCM with a PBKDF2 key (250,000 iterations, SHA-256). Everything runs in your
-        browser — the file and password never leave your device. There is no password recovery:
-        lose the password and the file is unrecoverable.
+        {t.footer}
       </p>
     </div>
   );
diff --git a/src/islands/files/FileSplit.tsx b/src/islands/files/FileSplit.tsx
index 547a5bf..adf45a6 100644
--- a/src/islands/files/FileSplit.tsx
+++ b/src/islands/files/FileSplit.tsx
@@ -6,9 +6,66 @@ import { Alert } from '@/components/ui/Alert';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { splitRanges, partName, joinedName, naturalCompare } from '@/tools/files/split.lib';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'split' | 'join';
 
+const TR: Record<Lang, {
+  split: string;
+  join: string;
+  partTooLarge: string;
+  couldNotSplit: string;
+  addTwoParts: string;
+  dropFile: string;
+  splitHint: string;
+  partSize: string;
+  splitInto: (n: number) => string;
+  dropParts: string;
+  joinHint: string;
+  download: string;
+  moveUp: string;
+  moveDown: string;
+  remove: string;
+  joinLabel: (n: number) => string;
+}> = {
+  en: {
+    split: 'Split',
+    join: 'Join',
+    partTooLarge: 'The part size is larger than the file — nothing to split.',
+    couldNotSplit: 'Could not split the file.',
+    addTwoParts: 'Add at least two parts to join.',
+    dropFile: 'Drop a file or click to browse',
+    splitHint: 'Cut a large file into fixed-size parts — all in your browser',
+    partSize: 'Part size (MB)',
+    splitInto: (n) => `Split into ${n} part${n === 1 ? '' : 's'}`,
+    dropParts: 'Drop the parts or click to browse',
+    joinHint: "They're ordered by name automatically — reorder below if needed",
+    download: 'Download',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    remove: 'Remove',
+    joinLabel: (n) => `Join ${n || ''} part${n === 1 ? '' : 's'}`,
+  },
+  id: {
+    split: 'Pisah',
+    join: 'Gabung',
+    partTooLarge: 'Ukuran bagian lebih besar dari file — tidak ada yang bisa dipisah.',
+    couldNotSplit: 'Tidak dapat memisah file.',
+    addTwoParts: 'Tambahkan minimal dua bagian untuk digabung.',
+    dropFile: 'Letakkan file atau klik untuk menjelajah',
+    splitHint: 'Potong file besar menjadi beberapa bagian berukuran tetap — semua di browser Anda',
+    partSize: 'Ukuran bagian (MB)',
+    splitInto: (n) => `Pisah menjadi ${n} bagian`,
+    dropParts: 'Letakkan bagian-bagiannya atau klik untuk menjelajah',
+    joinHint: 'Bagian diurutkan berdasarkan nama secara otomatis — susun ulang di bawah jika perlu',
+    download: 'Unduh',
+    moveUp: 'Naikkan',
+    moveDown: 'Turunkan',
+    remove: 'Hapus',
+    joinLabel: (n) => `Gabung ${n || ''} bagian`,
+  },
+};
+
 interface Part {
   name: string;
   blob: Blob;
@@ -16,7 +73,8 @@ interface Part {
 
 let counter = 0;
 
-export default function FileSplit() {
+export default function FileSplit({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [mode, setMode] = useState<Mode>('split');
   const [error, setError] = useState('');
 
@@ -52,7 +110,7 @@ export default function FileSplit() {
     try {
       const ranges = splitRanges(file.size, chunkBytes);
       if (ranges.length <= 1) {
-        setError('The part size is larger than the file — nothing to split.');
+        setError(t.partTooLarge);
         return;
       }
       setParts(
@@ -62,7 +120,7 @@ export default function FileSplit() {
         }))
       );
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not split the file.');
+      setError(e instanceof Error ? e.message : t.couldNotSplit);
     }
   };
 
@@ -87,7 +145,7 @@ export default function FileSplit() {
 
   const doJoin = async () => {
     if (pieces.length < 2) {
-      setError('Add at least two parts to join.');
+      setError(t.addTwoParts);
       return;
     }
     setError('');
@@ -100,11 +158,11 @@ export default function FileSplit() {
       <div className="flex gap-2">
         <Button variant={mode === 'split' ? 'primary' : 'secondary'} aria-pressed={mode === 'split'} onClick={() => switchMode('split')}>
           <Scissors className="h-4 w-4" />
-          Split
+          {t.split}
         </Button>
         <Button variant={mode === 'join' ? 'primary' : 'secondary'} aria-pressed={mode === 'join'} onClick={() => switchMode('join')}>
           <Combine className="h-4 w-4" />
-          Join
+          {t.join}
         </Button>
       </div>
 
@@ -112,8 +170,8 @@ export default function FileSplit() {
         <>
           <Dropzone onDrop={onDropSplit} multiple={false}>
             <div className="space-y-1">
-              <p className="text-lg font-bold">Drop a file or click to browse</p>
-              <p className="text-sm text-muted-foreground">Cut a large file into fixed-size parts — all in your browser</p>
+              <p className="text-lg font-bold">{t.dropFile}</p>
+              <p className="text-sm text-muted-foreground">{t.splitHint}</p>
             </div>
           </Dropzone>
 
@@ -124,7 +182,7 @@ export default function FileSplit() {
               </p>
               <div className="flex flex-wrap items-end gap-4">
                 <label className="space-y-1.5 text-sm">
-                  <span className="block font-bold uppercase tracking-wide text-muted-foreground">Part size (MB)</span>
+                  <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.partSize}</span>
                   <input
                     type="number"
                     min={1}
@@ -134,7 +192,7 @@ export default function FileSplit() {
                   />
                 </label>
                 <Button onClick={doSplit} disabled={partCount <= 1}>
-                  Split into {partCount} part{partCount === 1 ? '' : 's'}
+                  {t.splitInto(partCount)}
                 </Button>
               </div>
             </>
@@ -146,7 +204,7 @@ export default function FileSplit() {
                 <li key={i} className="flex items-center gap-3 border-2 border-border bg-muted p-2">
                   <span className="min-w-0 flex-1 truncate text-sm">{part.name}</span>
                   <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(part.blob.size)}</span>
-                  <button onClick={() => downloadService.download(part.blob, part.name)} title="Download" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
+                  <button onClick={() => downloadService.download(part.blob, part.name)} title={t.download} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
                     <Download className="h-4 w-4" />
                   </button>
                 </li>
@@ -158,8 +216,8 @@ export default function FileSplit() {
         <>
           <Dropzone onDrop={onDropJoin} multiple>
             <div className="space-y-1">
-              <p className="text-lg font-bold">Drop the parts or click to browse</p>
-              <p className="text-sm text-muted-foreground">They're ordered by name automatically — reorder below if needed</p>
+              <p className="text-lg font-bold">{t.dropParts}</p>
+              <p className="text-sm text-muted-foreground">{t.joinHint}</p>
             </div>
           </Dropzone>
 
@@ -170,13 +228,13 @@ export default function FileSplit() {
                   <span className="w-6 text-center text-sm font-bold text-muted-foreground">{i + 1}</span>
                   <span className="min-w-0 flex-1 truncate text-sm">{p.file.name}</span>
                   <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(p.file.size)}</span>
-                  <button onClick={() => move(i, -1)} disabled={i === 0} title="Move up" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30">
+                  <button onClick={() => move(i, -1)} disabled={i === 0} title={t.moveUp} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30">
                     <ArrowUp className="h-4 w-4" />
                   </button>
-                  <button onClick={() => move(i, 1)} disabled={i === pieces.length - 1} title="Move down" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30">
+                  <button onClick={() => move(i, 1)} disabled={i === pieces.length - 1} title={t.moveDown} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal disabled:opacity-30">
                     <ArrowDown className="h-4 w-4" />
                   </button>
-                  <button onClick={() => removePiece(p.id)} title="Remove" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
+                  <button onClick={() => removePiece(p.id)} title={t.remove} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
                     <X className="h-4 w-4" />
                   </button>
                 </li>
@@ -185,7 +243,7 @@ export default function FileSplit() {
           )}
 
           <Button onClick={doJoin} disabled={pieces.length < 2}>
-            Join {pieces.length || ''} part{pieces.length === 1 ? '' : 's'}
+            {t.joinLabel(pieces.length)}
           </Button>
         </>
       )}
diff --git a/src/islands/files/FileTransfer.tsx b/src/islands/files/FileTransfer.tsx
index 94deab3..8cafa68 100644
--- a/src/islands/files/FileTransfer.tsx
+++ b/src/islands/files/FileTransfer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Send, Download, ShieldCheck, Settings } from 'lucide-react';
 import { Dropzone } from '@/components/ui/Dropzone';
 import { Button } from '@/components/ui/Button';
@@ -10,6 +10,7 @@ import { useFileTransfer } from '@/hooks/useFileTransfer';
 import { makeRoomId, roomLink, roomIdFromHash } from '@/tools/webrtc/signal.lib';
 import { formatBytes } from '@/tools/webrtc/file-transfer.lib';
 import { effectiveIceServers } from '@/tools/webrtc/ice.lib';
+import type { Lang } from '@/i18n/config';
 
 type Signaling = 'auto' | 'manual';
 type ManualRole = 'send' | 'receive';
@@ -17,8 +18,141 @@ type ManualRole = 'send' | 'receive';
 const ICE_KEY = 'gwt.webrtc.ice';
 const SIGNALING_KEY = 'gwt.webrtc.signaling';
 
-export default function FileTransfer() {
+const TR: Record<Lang, {
+  beforeConnect: string;
+  introAuto: ReactNode; introManual: ReactNode; bestEffort: string;
+  advancedSettings: string; connMethod: string; autoMethod: string; manualMethod: string;
+  stunLabel: string; stunHint: string; continue: string;
+  copyCode: string; copyLink: string; shareLink: string;
+  pickRole: string; imSending: string; imReceiving: string;
+  step1Offer: string; preparing: string; step2Answer: string; connect: string;
+  step1PasteOffer: string; genAnswer: string; step2SendAnswer: string;
+  chooseDifferent: string; pickFile: string; sentDirectly: string; pickItNow: string;
+  readyToSend: (name: string) => string; sending: (name: string) => string;
+  transferring: string; receiving: string; downloadFile: string;
+  footerLine: string; footerManual: string; footerAuto: string;
+  stConnecting: string; stWaitingManual: string; stWaitingAuto: string;
+  stConnectedSend: string; stConnectedRecv: string; stTransferring: string;
+  stSent: string; stReceived: string;
+  errCreateOffer: string; errInvalidAnswer: string; errInvalidOffer: string;
+}> = {
+  en: {
+    beforeConnect: 'Before you connect',
+    introAuto: (
+      <>To introduce your two devices, GoodWebTools uses a small <strong>signaling server</strong> to
+      exchange connection details (about 2&nbsp;KB). Your files transfer <strong>directly,
+      peer-to-peer</strong>, and never pass through our server.</>
+    ),
+    introManual: (
+      <><strong>Manual mode uses no server at all.</strong> You&apos;ll copy-paste a connection code to the
+      other person yourself. Files transfer directly, peer-to-peer.</>
+    ),
+    bestEffort: 'Connections are best-effort and may fail on restrictive networks unless you add your own TURN server.',
+    advancedSettings: 'Advanced connection settings',
+    connMethod: 'Connection method',
+    autoMethod: 'Automatic (share a link)',
+    manualMethod: 'Manual (copy-paste · no server)',
+    stunLabel: 'Your STUN / TURN servers (optional)',
+    stunHint: 'One per line. Leave empty to use public STUN. A TURN server makes connections work on strict networks.',
+    continue: 'Continue',
+    copyCode: 'Copy code',
+    copyLink: 'Copy link',
+    shareLink: 'Share this link with the other device',
+    pickRole: 'Manual connection — pick a role',
+    imSending: 'I’m sending',
+    imReceiving: 'I’m receiving',
+    step1Offer: 'Step 1 — send this offer code to the other person',
+    preparing: 'Preparing…',
+    step2Answer: 'Step 2 — paste the answer code they send back',
+    connect: 'Connect',
+    step1PasteOffer: 'Step 1 — paste the offer code from the sender',
+    genAnswer: 'Generate answer',
+    step2SendAnswer: 'Step 2 — send this answer code back to the sender',
+    chooseDifferent: 'Choose a different file',
+    pickFile: 'Pick a file to send',
+    sentDirectly: 'Sent directly to the other device.',
+    pickItNow: 'Pick it now — it sends automatically once the other device connects.',
+    readyToSend: (name) => `Ready to send: ${name} — waiting for the other device…`,
+    sending: (name) => `Sending ${name}`,
+    transferring: 'Transferring',
+    receiving: 'Receiving',
+    downloadFile: 'Download file',
+    footerLine: 'Files transfer directly between devices (peer-to-peer).',
+    footerManual: 'Manual mode uses no server at all.',
+    footerAuto: 'A minimal signaling server is used only to introduce the two devices (~2 KB handshake) — your files never pass through it.',
+    stConnecting: 'Connecting…',
+    stWaitingManual: 'Waiting to connect…',
+    stWaitingAuto: 'Waiting for the other device to join…',
+    stConnectedSend: 'Connected — choose a file to send.',
+    stConnectedRecv: 'Connected — waiting for a file…',
+    stTransferring: 'Transferring…',
+    stSent: 'Sent!',
+    stReceived: 'Received!',
+    errCreateOffer: 'Could not create the offer.',
+    errInvalidAnswer: 'Invalid answer code.',
+    errInvalidOffer: 'Invalid offer code.',
+  },
+  id: {
+    beforeConnect: 'Sebelum Anda terhubung',
+    introAuto: (
+      <>Untuk mengenalkan kedua perangkat Anda, GoodWebTools memakai sebuah <strong>signaling server</strong> kecil
+      untuk bertukar detail koneksi (sekitar 2&nbsp;KB). File Anda ditransfer <strong>langsung,
+      peer-to-peer</strong>, dan tidak pernah melewati server kami.</>
+    ),
+    introManual: (
+      <><strong>Mode manual tidak memakai server sama sekali.</strong> Anda menyalin-tempel kode koneksi ke
+      orang lain sendiri. File ditransfer langsung, peer-to-peer.</>
+    ),
+    bestEffort: 'Koneksi bersifat best-effort dan bisa gagal di jaringan yang ketat kecuali Anda menambahkan server TURN sendiri.',
+    advancedSettings: 'Pengaturan koneksi lanjutan',
+    connMethod: 'Metode koneksi',
+    autoMethod: 'Otomatis (bagikan tautan)',
+    manualMethod: 'Manual (salin-tempel · tanpa server)',
+    stunLabel: 'Server STUN / TURN Anda (opsional)',
+    stunHint: 'Satu per baris. Kosongkan untuk memakai STUN publik. Server TURN membuat koneksi berfungsi di jaringan ketat.',
+    continue: 'Lanjutkan',
+    copyCode: 'Salin kode',
+    copyLink: 'Salin tautan',
+    shareLink: 'Bagikan tautan ini dengan perangkat lain',
+    pickRole: 'Koneksi manual — pilih peran',
+    imSending: 'Saya mengirim',
+    imReceiving: 'Saya menerima',
+    step1Offer: 'Langkah 1 — kirim kode offer ini ke orang lain',
+    preparing: 'Menyiapkan…',
+    step2Answer: 'Langkah 2 — tempel kode answer yang mereka kirim balik',
+    connect: 'Hubungkan',
+    step1PasteOffer: 'Langkah 1 — tempel kode offer dari pengirim',
+    genAnswer: 'Buat answer',
+    step2SendAnswer: 'Langkah 2 — kirim kode answer ini balik ke pengirim',
+    chooseDifferent: 'Pilih file lain',
+    pickFile: 'Pilih file untuk dikirim',
+    sentDirectly: 'Dikirim langsung ke perangkat lain.',
+    pickItNow: 'Pilih sekarang — file terkirim otomatis begitu perangkat lain terhubung.',
+    readyToSend: (name) => `Siap dikirim: ${name} — menunggu perangkat lain…`,
+    sending: (name) => `Mengirim ${name}`,
+    transferring: 'Mentransfer',
+    receiving: 'Menerima',
+    downloadFile: 'Unduh file',
+    footerLine: 'File ditransfer langsung antar perangkat (peer-to-peer).',
+    footerManual: 'Mode manual tidak memakai server sama sekali.',
+    footerAuto: 'Signaling server minimal hanya dipakai untuk mengenalkan kedua perangkat (handshake ~2 KB) — file Anda tidak pernah melewatinya.',
+    stConnecting: 'Menghubungkan…',
+    stWaitingManual: 'Menunggu untuk terhubung…',
+    stWaitingAuto: 'Menunggu perangkat lain bergabung…',
+    stConnectedSend: 'Terhubung — pilih file untuk dikirim.',
+    stConnectedRecv: 'Terhubung — menunggu file…',
+    stTransferring: 'Mentransfer…',
+    stSent: 'Terkirim!',
+    stReceived: 'Diterima!',
+    errCreateOffer: 'Tidak bisa membuat offer.',
+    errInvalidAnswer: 'Kode answer tidak valid.',
+    errInvalidOffer: 'Kode offer tidak valid.',
+  },
+};
+
+export default function FileTransfer({ lang = 'en' }: { lang?: Lang }) {
   const t = useFileTransfer();
+  const tr = TR[lang] ?? TR.en;
   const [acked, setAcked] = useState(false);
   const [signaling, setSignaling] = useState<Signaling>('auto');
   const [iceText, setIceText] = useState('');
@@ -97,7 +231,7 @@ export default function FileTransfer() {
     try {
       setOfferCode(await t.manualCreateOffer(ice()));
     } catch (e) {
-      setManualErr(e instanceof Error ? e.message : 'Could not create the offer.');
+      setManualErr(e instanceof Error ? e.message : tr.errCreateOffer);
     } finally {
       setManualBusy(false);
     }
@@ -105,7 +239,7 @@ export default function FileTransfer() {
   const submitAnswer = async () => {
     setManualErr('');
     try { await t.manualAcceptAnswer(pastedAnswer.trim()); }
-    catch (e) { setManualErr(e instanceof Error ? e.message : 'Invalid answer code.'); }
+    catch (e) { setManualErr(e instanceof Error ? e.message : tr.errInvalidAnswer); }
   };
 
   // Manual: receiver
@@ -116,7 +250,7 @@ export default function FileTransfer() {
     try {
       setAnswerCode(await t.manualAcceptOffer(pastedOffer.trim(), ice()));
     } catch (e) {
-      setManualErr(e instanceof Error ? e.message : 'Invalid offer code.');
+      setManualErr(e instanceof Error ? e.message : tr.errInvalidOffer);
     } finally {
       setManualBusy(false);
     }
@@ -130,18 +264,11 @@ export default function FileTransfer() {
       <div className="space-y-4">
         <div className="space-y-3 border-2 border-border p-4">
           <p className="flex items-center gap-2 text-lg font-bold">
-            <ShieldCheck className="h-5 w-5" /> Before you connect
+            <ShieldCheck className="h-5 w-5" /> {tr.beforeConnect}
           </p>
           <p className="text-sm text-muted-foreground">
-            {signaling === 'auto' ? (
-              <>To introduce your two devices, GoodWebTools uses a small <strong>signaling server</strong> to
-              exchange connection details (about 2&nbsp;KB). Your files transfer <strong>directly,
-              peer-to-peer</strong>, and never pass through our server.</>
-            ) : (
-              <><strong>Manual mode uses no server at all.</strong> You&apos;ll copy-paste a connection code to the
-              other person yourself. Files transfer directly, peer-to-peer.</>
-            )}{' '}
-            Connections are best-effort and may fail on restrictive networks unless you add your own TURN server.
+            {signaling === 'auto' ? tr.introAuto : tr.introManual}{' '}
+            {tr.bestEffort}
           </p>
 
           <button
@@ -149,27 +276,27 @@ export default function FileTransfer() {
             onClick={() => setShowAdvanced(v => !v)}
             className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground hover:text-foreground"
           >
-            <Settings className="h-4 w-4" /> Advanced connection settings
+            <Settings className="h-4 w-4" /> {tr.advancedSettings}
           </button>
 
           {showAdvanced && (
             <div className="space-y-3 border-2 border-border bg-muted/40 p-3">
               {!joining && (
                 <div className="space-y-1.5">
-                  <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Connection method</span>
+                  <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.connMethod}</span>
                   <div className="flex flex-wrap gap-2">
                     <Button variant={signaling === 'auto' ? 'primary' : 'secondary'} onClick={() => persistSignaling('auto')}>
-                      Automatic (share a link)
+                      {tr.autoMethod}
                     </Button>
                     <Button variant={signaling === 'manual' ? 'primary' : 'secondary'} onClick={() => persistSignaling('manual')}>
-                      Manual (copy-paste · no server)
+                      {tr.manualMethod}
                     </Button>
                   </div>
                 </div>
               )}
               <label className="block space-y-1.5">
                 <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-                  Your STUN / TURN servers (optional)
+                  {tr.stunLabel}
                 </span>
                 <textarea
                   value={iceText}
@@ -180,30 +307,30 @@ export default function FileTransfer() {
                   className="w-full resize-y border-2 border-border bg-background p-2 font-mono text-xs outline-none focus:shadow-brutal-sm"
                 />
                 <span className="block text-xs text-muted-foreground">
-                  One per line. Leave empty to use public STUN. A TURN server makes connections work on strict networks.
+                  {tr.stunHint}
                 </span>
               </label>
             </div>
           )}
 
-          <Button onClick={start}>Continue</Button>
+          <Button onClick={start}>{tr.continue}</Button>
         </div>
       </div>
     );
   }
 
   const statusLabel: Record<string, string> = {
-    connecting: 'Connecting…',
-    waiting: signaling === 'manual' ? 'Waiting to connect…' : 'Waiting for the other device to join…',
-    connected: isSending ? 'Connected — choose a file to send.' : 'Connected — waiting for a file…',
-    transferring: 'Transferring…',
-    done: isSending ? 'Sent!' : 'Received!',
+    connecting: tr.stConnecting,
+    waiting: signaling === 'manual' ? tr.stWaitingManual : tr.stWaitingAuto,
+    connected: isSending ? tr.stConnectedSend : tr.stConnectedRecv,
+    transferring: tr.stTransferring,
+    done: isSending ? tr.stSent : tr.stReceived,
   };
 
   const codeBox = (value: string) => (
     <div className="space-y-1.5">
       <textarea readOnly value={value} rows={3} className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs" />
-      <CopyButton value={value} label="Copy code" />
+      <CopyButton value={value} label={tr.copyCode} />
     </div>
   );
 
@@ -212,10 +339,10 @@ export default function FileTransfer() {
       {/* ----- Manual mode ----- */}
       {signaling === 'manual' && !manualRole && (
         <div className="space-y-2">
-          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Manual connection — pick a role</p>
+          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.pickRole}</p>
           <div className="flex flex-wrap gap-2">
-            <Button onClick={chooseSend} disabled={manualBusy}>I&apos;m sending</Button>
-            <Button variant="secondary" onClick={chooseReceive}>I&apos;m receiving</Button>
+            <Button onClick={chooseSend} disabled={manualBusy}>{tr.imSending}</Button>
+            <Button variant="secondary" onClick={chooseReceive}>{tr.imReceiving}</Button>
           </div>
         </div>
       )}
@@ -223,11 +350,11 @@ export default function FileTransfer() {
       {signaling === 'manual' && manualRole === 'send' && t.status !== 'connected' && t.status !== 'transferring' && t.status !== 'done' && (
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 1 — send this offer code to the other person</p>
-            {manualBusy && !offerCode ? <p className="text-sm text-muted-foreground">Preparing…</p> : codeBox(offerCode)}
+            <p className="text-sm font-bold">{tr.step1Offer}</p>
+            {manualBusy && !offerCode ? <p className="text-sm text-muted-foreground">{tr.preparing}</p> : codeBox(offerCode)}
           </div>
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 2 — paste the answer code they send back</p>
+            <p className="text-sm font-bold">{tr.step2Answer}</p>
             <textarea
               value={pastedAnswer}
               onChange={e => setPastedAnswer(e.target.value)}
@@ -235,7 +362,7 @@ export default function FileTransfer() {
               spellCheck={false}
               className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs outline-none focus:shadow-brutal-sm"
             />
-            <Button onClick={submitAnswer} disabled={!pastedAnswer.trim()}>Connect</Button>
+            <Button onClick={submitAnswer} disabled={!pastedAnswer.trim()}>{tr.connect}</Button>
           </div>
         </div>
       )}
@@ -243,7 +370,7 @@ export default function FileTransfer() {
       {signaling === 'manual' && manualRole === 'receive' && t.status !== 'connected' && t.status !== 'transferring' && t.status !== 'done' && (
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 1 — paste the offer code from the sender</p>
+            <p className="text-sm font-bold">{tr.step1PasteOffer}</p>
             <textarea
               value={pastedOffer}
               onChange={e => setPastedOffer(e.target.value)}
@@ -251,11 +378,11 @@ export default function FileTransfer() {
               spellCheck={false}
               className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs outline-none focus:shadow-brutal-sm"
             />
-            <Button onClick={submitOffer} disabled={!pastedOffer.trim() || manualBusy}>Generate answer</Button>
+            <Button onClick={submitOffer} disabled={!pastedOffer.trim() || manualBusy}>{tr.genAnswer}</Button>
           </div>
           {answerCode && (
             <div className="space-y-1.5">
-              <p className="text-sm font-bold">Step 2 — send this answer code back to the sender</p>
+              <p className="text-sm font-bold">{tr.step2SendAnswer}</p>
               {codeBox(answerCode)}
             </div>
           )}
@@ -267,10 +394,10 @@ export default function FileTransfer() {
       {/* ----- Auto mode: shareable link ----- */}
       {signaling === 'auto' && !joining && (t.status === 'connecting' || t.status === 'waiting') && (
         <div className="space-y-2">
-          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Share this link with the other device</p>
+          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.shareLink}</p>
           <div className="flex flex-wrap items-center gap-2">
             <code className="break-all border-2 border-border bg-muted px-3 py-2 text-sm">{link}</code>
-            <CopyButton value={link} label="Copy link" />
+            <CopyButton value={link} label={tr.copyLink} />
           </div>
         </div>
       )}
@@ -286,32 +413,30 @@ export default function FileTransfer() {
           <Dropzone onDrop={onDrop} multiple={false}>
             <div className="space-y-1">
               <p className="flex items-center justify-center gap-2 text-lg font-bold">
-                <Send className="h-5 w-5" /> {queuedName ? 'Choose a different file' : 'Pick a file to send'}
+                <Send className="h-5 w-5" /> {queuedName ? tr.chooseDifferent : tr.pickFile}
               </p>
               <p className="text-sm text-muted-foreground">
-                {t.status === 'connected'
-                  ? 'Sent directly to the other device.'
-                  : 'Pick it now — it sends automatically once the other device connects.'}
+                {t.status === 'connected' ? tr.sentDirectly : tr.pickItNow}
               </p>
             </div>
           </Dropzone>
           {queuedName && (t.status === 'connecting' || t.status === 'waiting') && (
-            <p className="text-sm font-bold">Ready to send: {queuedName} — waiting for the other device…</p>
+            <p className="text-sm font-bold">{tr.readyToSend(queuedName)}</p>
           )}
         </div>
       )}
 
       {(t.status === 'transferring' || (t.status === 'done' && isSending)) && (
-        <ProgressBar percent={t.progress} label={isSending ? `Sending ${sentName.current}` : 'Transferring'} />
+        <ProgressBar percent={t.progress} label={isSending ? tr.sending(sentName.current) : tr.transferring} />
       )}
 
       {!isSending && t.incoming && (
         <div className="space-y-2 border-2 border-border p-3">
           <p className="text-sm font-bold">{t.incoming.name} · {formatBytes(t.incoming.size)}</p>
-          {t.status === 'transferring' && <ProgressBar percent={t.progress} label="Receiving" />}
+          {t.status === 'transferring' && <ProgressBar percent={t.progress} label={tr.receiving} />}
           {t.status === 'done' && t.receivedBlob && (
             <Button onClick={downloadReceived}>
-              <Download className="h-4 w-4" /> Download file
+              <Download className="h-4 w-4" /> {tr.downloadFile}
             </Button>
           )}
         </div>
@@ -319,10 +444,8 @@ export default function FileTransfer() {
 
       <p className="border-t border-border pt-3 text-xs text-muted-foreground">
         <ShieldCheck className="mr-1 inline h-3.5 w-3.5" />
-        Files transfer directly between devices (peer-to-peer).{' '}
-        {signaling === 'manual'
-          ? 'Manual mode uses no server at all.'
-          : 'A minimal signaling server is used only to introduce the two devices (~2 KB handshake) — your files never pass through it.'}
+        {tr.footerLine}{' '}
+        {signaling === 'manual' ? tr.footerManual : tr.footerAuto}
       </p>
     </div>
   );
diff --git a/src/islands/files/ZipTool.tsx b/src/islands/files/ZipTool.tsx
index f36f8d9..58f9a3d 100644
--- a/src/islands/files/ZipTool.tsx
+++ b/src/islands/files/ZipTool.tsx
@@ -6,12 +6,70 @@ import { Alert } from '@/components/ui/Alert';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { createZip, extractZip, type ZipEntry } from '@/tools/files/zip.lib';
+import type { Lang } from '@/i18n/config';
 
 type Mode = 'create' | 'extract';
 
+const TR: Record<Lang, {
+  createZip: string;
+  extractZip: string;
+  couldNotCreate: string;
+  couldNotRead: string;
+  dropFiles: string;
+  bundleHint: string;
+  remove: string;
+  zipping: string;
+  createZipCount: (n: number) => string;
+  total: (s: string) => string;
+  clear: string;
+  dropZip: string;
+  listHint: string;
+  reading: string;
+  fileCount: (n: number) => string;
+  download: string;
+}> = {
+  en: {
+    createZip: 'Create ZIP',
+    extractZip: 'Extract ZIP',
+    couldNotCreate: 'Could not create the archive.',
+    couldNotRead: 'Could not read the archive.',
+    dropFiles: 'Drop files or click to browse',
+    bundleHint: 'Bundle any files into a single .zip — all in your browser',
+    remove: 'Remove',
+    zipping: 'Zipping…',
+    createZipCount: (n) => `Create ZIP (${n} file${n === 1 ? '' : 's'})`,
+    total: (s) => `${s} total`,
+    clear: 'Clear',
+    dropZip: 'Drop a .zip or click to browse',
+    listHint: 'List its contents and download any file',
+    reading: 'reading…',
+    fileCount: (n) => `${n} file${n === 1 ? '' : 's'}`,
+    download: 'Download',
+  },
+  id: {
+    createZip: 'Buat ZIP',
+    extractZip: 'Ekstrak ZIP',
+    couldNotCreate: 'Tidak dapat membuat arsip.',
+    couldNotRead: 'Tidak dapat membaca arsip.',
+    dropFiles: 'Letakkan file atau klik untuk menjelajah',
+    bundleHint: 'Gabungkan file apa pun ke dalam satu .zip — semua di browser Anda',
+    remove: 'Hapus',
+    zipping: 'Membuat ZIP…',
+    createZipCount: (n) => `Buat ZIP (${n} file)`,
+    total: (s) => `${s} total`,
+    clear: 'Bersihkan',
+    dropZip: 'Letakkan file .zip atau klik untuk menjelajah',
+    listHint: 'Tampilkan isinya dan unduh file mana pun',
+    reading: 'membaca…',
+    fileCount: (n) => `${n} file`,
+    download: 'Unduh',
+  },
+};
+
 let counter = 0;
 
-export default function ZipTool() {
+export default function ZipTool({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [mode, setMode] = useState<Mode>('create');
   // Create mode: files queued for zipping.
   const [items, setItems] = useState<{ id: string; file: File }[]>([]);
@@ -46,7 +104,7 @@ export default function ZipTool() {
       const zipped = createZip(zipEntries);
       await downloadService.download(new Blob([zipped], { type: 'application/zip' }), 'archive.zip');
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not create the archive.');
+      setError(e instanceof Error ? e.message : t.couldNotCreate);
     } finally {
       setBusy(false);
     }
@@ -62,7 +120,7 @@ export default function ZipTool() {
     try {
       setEntries(extractZip(new Uint8Array(await file.arrayBuffer())));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read the archive.');
+      setError(e instanceof Error ? e.message : t.couldNotRead);
     } finally {
       setBusy(false);
     }
@@ -80,11 +138,11 @@ export default function ZipTool() {
       <div className="flex gap-2">
         <Button variant={mode === 'create' ? 'primary' : 'secondary'} aria-pressed={mode === 'create'} onClick={() => setMode('create')}>
           <FileArchive className="h-4 w-4" />
-          Create ZIP
+          {t.createZip}
         </Button>
         <Button variant={mode === 'extract' ? 'primary' : 'secondary'} aria-pressed={mode === 'extract'} onClick={() => setMode('extract')}>
           <Download className="h-4 w-4" />
-          Extract ZIP
+          {t.extractZip}
         </Button>
       </div>
 
@@ -92,8 +150,8 @@ export default function ZipTool() {
         <>
           <Dropzone onDrop={addFiles} multiple>
             <div className="space-y-1">
-              <p className="text-lg font-bold">Drop files or click to browse</p>
-              <p className="text-sm text-muted-foreground">Bundle any files into a single .zip — all in your browser</p>
+              <p className="text-lg font-bold">{t.dropFiles}</p>
+              <p className="text-sm text-muted-foreground">{t.bundleHint}</p>
             </div>
           </Dropzone>
 
@@ -103,7 +161,7 @@ export default function ZipTool() {
                 <li key={id} className="flex items-center gap-3 border-2 border-border bg-muted p-2">
                   <span className="min-w-0 flex-1 truncate text-sm">{file.name}</span>
                   <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(file.size)}</span>
-                  <button onClick={() => removeItem(id)} title="Remove" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
+                  <button onClick={() => removeItem(id)} title={t.remove} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
                     <X className="h-4 w-4" />
                   </button>
                 </li>
@@ -113,12 +171,12 @@ export default function ZipTool() {
 
           <div className="flex flex-wrap items-center gap-3">
             <Button onClick={makeZip} disabled={items.length === 0 || busy}>
-              {busy ? 'Zipping…' : `Create ZIP (${items.length} file${items.length === 1 ? '' : 's'})`}
+              {busy ? t.zipping : t.createZipCount(items.length)}
             </Button>
             {items.length > 0 && (
               <>
-                <span className="text-sm text-muted-foreground">{formatBytes(totalSize)} total</span>
-                <Button variant="ghost" onClick={() => setItems([])}>Clear</Button>
+                <span className="text-sm text-muted-foreground">{t.total(formatBytes(totalSize))}</span>
+                <Button variant="ghost" onClick={() => setItems([])}>{t.clear}</Button>
               </>
             )}
           </div>
@@ -127,14 +185,14 @@ export default function ZipTool() {
         <>
           <Dropzone onDrop={openArchive} accept=".zip,application/zip,application/x-zip-compressed" multiple={false}>
             <div className="space-y-1">
-              <p className="text-lg font-bold">Drop a .zip or click to browse</p>
-              <p className="text-sm text-muted-foreground">List its contents and download any file</p>
+              <p className="text-lg font-bold">{t.dropZip}</p>
+              <p className="text-sm text-muted-foreground">{t.listHint}</p>
             </div>
           </Dropzone>
 
           {archiveName && !error && (
             <p className="text-sm text-muted-foreground">
-              <span className="font-bold text-foreground">{archiveName}</span> — {busy ? 'reading…' : `${entries.length} file${entries.length === 1 ? '' : 's'}`}
+              <span className="font-bold text-foreground">{archiveName}</span> — {busy ? t.reading : t.fileCount(entries.length)}
             </p>
           )}
 
@@ -144,7 +202,7 @@ export default function ZipTool() {
                 <li key={i} className="flex items-center gap-3 border-2 border-border bg-muted p-2">
                   <span className="min-w-0 flex-1 truncate text-sm">{entry.name}</span>
                   <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(entry.data.length)}</span>
-                  <button onClick={() => downloadEntry(entry)} title="Download" className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
+                  <button onClick={() => downloadEntry(entry)} title={t.download} className="border-2 border-border bg-muted p-1.5 shadow-brutal-sm press-brutal">
                     <Download className="h-4 w-4" />
                   </button>
                 </li>
diff --git a/src/islands/maps/CoordConvert.tsx b/src/islands/maps/CoordConvert.tsx
index d51c755..c88d052 100644
--- a/src/islands/maps/CoordConvert.tsx
+++ b/src/islands/maps/CoordConvert.tsx
@@ -3,6 +3,7 @@ import { LocateFixed } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { CopyButton } from '@/components/ui/CopyButton';
+import type { Lang } from '@/i18n/config';
 import {
   parseLatLng,
   formatDd,
@@ -24,7 +25,37 @@ const FORMATS: { value: Fmt; label: string }[] = [
   { value: 'utm', label: 'UTM' },
 ];
 
-export default function CoordConvert() {
+const TR: Record<Lang, {
+  inputFormat: string;
+  locating: string;
+  myLocation: string;
+  mapLink: string;
+  geoUnavailable: string;
+  geoDenied: string;
+  emptyHint: string;
+}> = {
+  en: {
+    inputFormat: 'Input format',
+    locating: 'Locating…',
+    myLocation: 'My location',
+    mapLink: 'Map link',
+    geoUnavailable: 'Geolocation isn’t available in this browser.',
+    geoDenied: 'Couldn’t get your location (permission denied or unavailable).',
+    emptyHint: 'Enter a valid coordinate to see every format.',
+  },
+  id: {
+    inputFormat: 'Format input',
+    locating: 'Melokasikan…',
+    myLocation: 'Lokasi saya',
+    mapLink: 'Tautan peta',
+    geoUnavailable: 'Geolocation tidak tersedia di browser ini.',
+    geoDenied: 'Tidak bisa mendapatkan lokasi Anda (izin ditolak atau tidak tersedia).',
+    emptyHint: 'Masukkan koordinat yang valid untuk melihat setiap format.',
+  },
+};
+
+export default function CoordConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [fmt, setFmt] = useState<Fmt>('dd');
   const [dd, setDd] = useState('-6.2088, 106.8456');
   const [dmsLat, setDmsLat] = useState('');
@@ -52,12 +83,12 @@ export default function CoordConvert() {
   })();
 
   const useMyLocation = () => {
-    if (!navigator.geolocation) { setError('Geolocation isn’t available in this browser.'); return; }
+    if (!navigator.geolocation) { setError(t.geoUnavailable); return; }
     setLocating(true);
     setError('');
     navigator.geolocation.getCurrentPosition(
       pos => { setFmt('dd'); setDd(formatDd(pos.coords.latitude, pos.coords.longitude)); setLocating(false); },
-      () => { setError('Couldn’t get your location (permission denied or unavailable).'); setLocating(false); },
+      () => { setError(t.geoDenied); setLocating(false); },
       { enableHighAccuracy: true, timeout: 10000 },
     );
   };
@@ -71,7 +102,7 @@ export default function CoordConvert() {
           { label: 'DMS', value: `${dms.lat} ${dms.lng}` },
           { label: 'UTM', value: `${utm.zone}${utm.hemisphere} ${Math.round(utm.easting)}E ${Math.round(utm.northing)}N` },
           { label: 'Geohash', value: encodeGeohash(point.lat, point.lng, 10) },
-          { label: 'Map link', value: `https://www.openstreetmap.org/?mlat=${point.lat}&mlon=${point.lng}#map=15/${point.lat}/${point.lng}` },
+          { label: t.mapLink, value: `https://www.openstreetmap.org/?mlat=${point.lat}&mlon=${point.lng}#map=15/${point.lat}/${point.lng}` },
         ];
       })()
     : [];
@@ -81,7 +112,7 @@ export default function CoordConvert() {
   return (
     <div className="space-y-4">
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Input format</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.inputFormat}</span>
         <div className="flex flex-wrap gap-2">
           {FORMATS.map(f => (
             <Button key={f.value} variant={fmt === f.value ? 'primary' : 'secondary'} aria-pressed={fmt === f.value} onClick={() => { setFmt(f.value); setError(''); }}>
@@ -89,7 +120,7 @@ export default function CoordConvert() {
             </Button>
           ))}
           <Button variant="secondary" onClick={useMyLocation} disabled={locating}>
-            <LocateFixed className="h-4 w-4" /> {locating ? 'Locating…' : 'My location'}
+            <LocateFixed className="h-4 w-4" /> {locating ? t.locating : t.myLocation}
           </Button>
         </div>
       </div>
@@ -155,7 +186,7 @@ export default function CoordConvert() {
           ))}
         </div>
       ) : (
-        <p className="text-sm text-muted-foreground">Enter a valid coordinate to see every format.</p>
+        <p className="text-sm text-muted-foreground">{t.emptyHint}</p>
       )}
     </div>
   );
diff --git a/src/islands/maps/GeoViewer.tsx b/src/islands/maps/GeoViewer.tsx
index ee1fbef..b156d33 100644
--- a/src/islands/maps/GeoViewer.tsx
+++ b/src/islands/maps/GeoViewer.tsx
@@ -9,11 +9,51 @@ import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
 import { resolveStyle, MAP_STYLES, type StyleChoice } from '@/tools/geo/map-styles.lib';
 import { parseGeoFile, computeBbox } from '@/tools/geo/geo-parse.lib';
+import type { Lang } from '@/i18n/config';
 
 const STYLE_KEY = 'gwt.map.style';
 const EMPTY: FeatureCollection = { type: 'FeatureCollection', features: [] };
 
-export default function GeoViewer() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSub: string;
+  style: string;
+  fitToData: string;
+  noFeatures: string;
+  readError: string;
+  attribution: string;
+  featureProps: string;
+  noProps: string;
+  countHint: (n: number) => string;
+}> = {
+  en: {
+    dropTitle: 'Drop a GeoJSON, GPX or KML file',
+    dropSub: 'View tracks & features on a map · the file stays on your device',
+    style: 'Style',
+    fitToData: 'Fit to data',
+    noFeatures: 'No map features found in this file (expected GeoJSON, GPX or KML).',
+    readError: 'Could not read this file.',
+    attribution: 'Maps © OpenFreeMap / OpenStreetMap contributors.',
+    featureProps: 'Feature properties',
+    noProps: '(no properties)',
+    countHint: n => `${n} feature${n === 1 ? '' : 's'} · click one to see its properties. `,
+  },
+  id: {
+    dropTitle: 'Letakkan file GeoJSON, GPX atau KML',
+    dropSub: 'Lihat jalur & fitur di peta · file tetap di perangkat Anda',
+    style: 'Gaya',
+    fitToData: 'Paskan ke data',
+    noFeatures: 'Tidak ada fitur peta yang ditemukan di file ini (diharapkan GeoJSON, GPX atau KML).',
+    readError: 'Tidak bisa membaca file ini.',
+    attribution: 'Peta © OpenFreeMap / OpenStreetMap contributors.',
+    featureProps: 'Properti fitur',
+    noProps: '(tidak ada properti)',
+    countHint: n => `${n} fitur · klik salah satu untuk melihat propertinya. `,
+  },
+};
+
+export default function GeoViewer({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const theme = useStore(themeAtom);
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<MlMap | null>(null);
@@ -77,13 +117,13 @@ export default function GeoViewer() {
     setSelected(null);
     try {
       const fc = await parseGeoFile(await file.text(), file.name);
-      if (!fc || fc.features.length === 0) { setError('No map features found in this file (expected GeoJSON, GPX or KML).'); return; }
+      if (!fc || fc.features.length === 0) { setError(t.noFeatures); return; }
       fcRef.current = fc;
       setCount(fc.features.length);
       renderGeo();
       fit();
     } catch {
-      setError('Could not read this file.');
+      setError(t.readError);
     }
   };
 
@@ -91,17 +131,17 @@ export default function GeoViewer() {
     <div className="space-y-3">
       <Dropzone onDrop={onDrop} accept=".geojson,.json,.gpx,.kml,application/geo+json,application/gpx+xml,application/vnd.google-earth.kml+xml" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a GeoJSON, GPX or KML file</p>
-          <p className="text-sm text-muted-foreground">View tracks &amp; features on a map · the file stays on your device</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSub}</p>
         </div>
       </Dropzone>
 
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Style</span>
+        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.style}</span>
         {MAP_STYLES.map(s => (
           <Button key={s.id} variant={style === s.id ? 'primary' : 'secondary'} aria-pressed={style === s.id} onClick={() => pickStyle(s.id)}>{s.label}</Button>
         ))}
-        {count > 0 && <Button variant="ghost" onClick={fit}>Fit to data</Button>}
+        {count > 0 && <Button variant="ghost" onClick={fit}>{t.fitToData}</Button>}
       </div>
 
       {error && <Alert variant="error">{error}</Alert>}
@@ -109,14 +149,14 @@ export default function GeoViewer() {
       <div ref={containerRef} className="h-[60vh] w-full border-2 border-border" />
 
       <p className="text-xs text-muted-foreground">
-        {count > 0 ? `${count} feature${count === 1 ? '' : 's'} · click one to see its properties. ` : ''}
-        Maps © OpenFreeMap / OpenStreetMap contributors.
+        {count > 0 ? t.countHint(count) : ''}
+        {t.attribution}
       </p>
 
       {selected && (
         <div className="space-y-1 border-2 border-border p-3">
-          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Feature properties</p>
-          {Object.keys(selected).length === 0 && <p className="text-sm text-muted-foreground">(no properties)</p>}
+          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.featureProps}</p>
+          {Object.keys(selected).length === 0 && <p className="text-sm text-muted-foreground">{t.noProps}</p>}
           {Object.entries(selected).map(([k, v]) => (
             <div key={k} className="flex flex-wrap gap-2 text-sm">
               <span className="font-bold">{k}</span>
diff --git a/src/islands/maps/MapExplorer.tsx b/src/islands/maps/MapExplorer.tsx
index 5aa8d14..9647e2e 100644
--- a/src/islands/maps/MapExplorer.tsx
+++ b/src/islands/maps/MapExplorer.tsx
@@ -8,11 +8,48 @@ import { Button } from '@/components/ui/Button';
 import { CopyButton } from '@/components/ui/CopyButton';
 import { resolveStyle, MAP_STYLES, haversineMeters, formatDistance, type StyleChoice } from '@/tools/geo/map-styles.lib';
 import { ddToDms, ddToUtm, encodeGeohash, formatDd, type LatLng } from '@/tools/geo/coord.lib';
+import type { Lang } from '@/i18n/config';
 
 const STYLE_KEY = 'gwt.map.style';
 type SearchHit = { name: string; lat: number; lng: number };
 
-export default function MapExplorer() {
+const TR: Record<Lang, {
+  searchPlace: string;
+  style: string;
+  measuring: string;
+  measure: string;
+  clear: string;
+  hintMeasure: string;
+  hintPin: string;
+  attribution: string;
+  distance: (dist: string, n: number) => string;
+}> = {
+  en: {
+    searchPlace: 'Search a place…',
+    style: 'Style',
+    measuring: 'Measuring…',
+    measure: 'Measure',
+    clear: 'Clear',
+    hintMeasure: 'Click points on the map to measure distance.',
+    hintPin: 'Click anywhere on the map to drop a pin and read its coordinates.',
+    attribution: 'Maps © OpenFreeMap / OpenStreetMap contributors.',
+    distance: (dist, n) => `Distance: ${dist} (${n} points)`,
+  },
+  id: {
+    searchPlace: 'Cari tempat…',
+    style: 'Gaya',
+    measuring: 'Mengukur…',
+    measure: 'Ukur',
+    clear: 'Bersihkan',
+    hintMeasure: 'Klik titik di peta untuk mengukur jarak.',
+    hintPin: 'Klik di mana saja pada peta untuk menandai pin dan membaca koordinatnya.',
+    attribution: 'Peta © OpenFreeMap / OpenStreetMap contributors.',
+    distance: (dist, n) => `Jarak: ${dist} (${n} titik)`,
+  },
+};
+
+export default function MapExplorer({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const theme = useStore(themeAtom);
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<MlMap | null>(null);
@@ -161,7 +198,7 @@ export default function MapExplorer() {
             value={query}
             onChange={e => setQuery(e.target.value)}
             onKeyDown={e => { if (e.key === 'Enter') search(); }}
-            placeholder="Search a place…"
+            placeholder={t.searchPlace}
             className="w-full border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm"
           />
           <Button variant="secondary" onClick={search} disabled={searching}><Search className="h-4 w-4" /></Button>
@@ -177,23 +214,23 @@ export default function MapExplorer() {
       </div>
 
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Style</span>
+        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.style}</span>
         {MAP_STYLES.map(s => (
           <Button key={s.id} variant={style === s.id ? 'primary' : 'secondary'} aria-pressed={style === s.id} onClick={() => pickStyle(s.id)}>{s.label}</Button>
         ))}
-        <Button variant={measuring ? 'primary' : 'secondary'} onClick={toggleMeasure}><Ruler className="h-4 w-4" /> {measuring ? 'Measuring…' : 'Measure'}</Button>
-        {measuring && measureRef.current.length > 0 && <Button variant="ghost" onClick={clearMeasure}><X className="h-4 w-4" /> Clear</Button>}
+        <Button variant={measuring ? 'primary' : 'secondary'} onClick={toggleMeasure}><Ruler className="h-4 w-4" /> {measuring ? t.measuring : t.measure}</Button>
+        {measuring && measureRef.current.length > 0 && <Button variant="ghost" onClick={clearMeasure}><X className="h-4 w-4" /> {t.clear}</Button>}
       </div>
 
       <div ref={containerRef} className="h-[60vh] w-full border-2 border-border" />
 
       <p className="text-xs text-muted-foreground">
-        {measuring ? 'Click points on the map to measure distance.' : 'Click anywhere on the map to drop a pin and read its coordinates.'}
-        {' '}Maps © OpenFreeMap / OpenStreetMap contributors.
+        {measuring ? t.hintMeasure : t.hintPin}
+        {' '}{t.attribution}
       </p>
 
       {measuring && measureRef.current.length > 1 && (
-        <p className="text-sm font-bold">Distance: {formatDistance(measureDist)} ({measureRef.current.length} points)</p>
+        <p className="text-sm font-bold">{t.distance(formatDistance(measureDist), measureRef.current.length)}</p>
       )}
 
       {pin && !measuring && (
diff --git a/src/islands/maps/StaticMap.tsx b/src/islands/maps/StaticMap.tsx
index 293dbc6..59bd5db 100644
--- a/src/islands/maps/StaticMap.tsx
+++ b/src/islands/maps/StaticMap.tsx
@@ -7,11 +7,36 @@ import { themeAtom } from '@/stores/theme.store';
 import { Button } from '@/components/ui/Button';
 import { downloadService } from '@/services/download';
 import { resolveStyle, MAP_STYLES, type StyleChoice } from '@/tools/geo/map-styles.lib';
+import type { Lang } from '@/i18n/config';
 
 const STYLE_KEY = 'gwt.map.style';
 type SearchHit = { name: string; lat: number; lng: number };
 
-export default function StaticMap() {
+const TR: Record<Lang, {
+  searchPlace: string;
+  style: string;
+  centerPin: string;
+  downloadPng: string;
+  hint: string;
+}> = {
+  en: {
+    searchPlace: 'Search a place…',
+    style: 'Style',
+    centerPin: 'Center pin',
+    downloadPng: 'Download PNG',
+    hint: 'Pan & zoom to frame your map, then export the current view. Maps © OpenFreeMap / OpenStreetMap.',
+  },
+  id: {
+    searchPlace: 'Cari tempat…',
+    style: 'Gaya',
+    centerPin: 'Pin tengah',
+    downloadPng: 'Unduh PNG',
+    hint: 'Geser & perbesar untuk membingkai peta Anda, lalu ekspor tampilan saat ini. Peta © OpenFreeMap / OpenStreetMap.',
+  },
+};
+
+export default function StaticMap({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const theme = useStore(themeAtom);
   const containerRef = useRef<HTMLDivElement>(null);
   const mapRef = useRef<MlMap | null>(null);
@@ -111,7 +136,7 @@ export default function StaticMap() {
     <div className="space-y-3">
       <div className="flex flex-wrap items-center gap-2">
         <div className="relative flex flex-1 items-center gap-2">
-          <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') search(); }} placeholder="Search a place…" className="w-full border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm" />
+          <input value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') search(); }} placeholder={t.searchPlace} className="w-full border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm" />
           <Button variant="secondary" onClick={search} disabled={searching}><Search className="h-4 w-4" /></Button>
           {results.length > 0 && (
             <div className="absolute left-0 top-full z-20 mt-1 max-h-64 w-full overflow-y-auto border-2 border-border bg-background shadow-brutal">
@@ -123,16 +148,16 @@ export default function StaticMap() {
       </div>
 
       <div className="flex flex-wrap items-center gap-2">
-        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Style</span>
+        <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.style}</span>
         {MAP_STYLES.map(s => <Button key={s.id} variant={style === s.id ? 'primary' : 'secondary'} aria-pressed={style === s.id} onClick={() => pickStyle(s.id)}>{s.label}</Button>)}
-        <Button variant={pinCenter ? 'primary' : 'secondary'} onClick={() => setPinCenter(p => !p)}><MapPin className="h-4 w-4" /> Center pin</Button>
+        <Button variant={pinCenter ? 'primary' : 'secondary'} onClick={() => setPinCenter(p => !p)}><MapPin className="h-4 w-4" /> {t.centerPin}</Button>
       </div>
 
       <div ref={containerRef} className="h-[60vh] w-full border-2 border-border" />
 
       <div className="flex flex-wrap items-center gap-3">
-        <Button onClick={downloadPng}><Download className="h-4 w-4" /> Download PNG</Button>
-        <span className="text-xs text-muted-foreground">Pan &amp; zoom to frame your map, then export the current view. Maps © OpenFreeMap / OpenStreetMap.</span>
+        <Button onClick={downloadPng}><Download className="h-4 w-4" /> {t.downloadPng}</Button>
+        <span className="text-xs text-muted-foreground">{t.hint}</span>
       </div>
     </div>
   );
diff --git a/src/islands/media/AudioConvert.tsx b/src/islands/media/AudioConvert.tsx
index c489b26..82e0312 100644
--- a/src/islands/media/AudioConvert.tsx
+++ b/src/islands/media/AudioConvert.tsx
@@ -7,6 +7,7 @@ import { ProgressBar } from '@/components/ui/ProgressBar';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { loadFFmpeg, fileToU8 } from '@/services/ffmpeg.service';
+import type { Lang } from '@/i18n/config';
 
 type Fmt = 'mp3' | 'm4a' | 'wav' | 'opus' | 'flac';
 const FORMATS: { id: Fmt; label: string; mime: string; codec: string[]; ext: string; lossless?: boolean }[] = [
@@ -18,7 +19,64 @@ const FORMATS: { id: Fmt; label: string; mime: string; codec: string[]; ext: str
 ];
 const BITRATES = [96, 128, 160, 192, 256, 320];
 
-export default function AudioConvert() {
+const TR: Record<Lang, {
+  loadEngine: string;
+  converting: string;
+  convertError: string;
+  dropTitle: string;
+  dropSubtitle: string;
+  format: string;
+  bitrate: string;
+  start: string;
+  length: string;
+  privacy: string;
+  convertingBtn: string;
+  convert: string;
+  clear: string;
+  working: string;
+  result: string;
+  download: (fmt: string) => string;
+}> = {
+  en: {
+    loadEngine: 'Loading audio engine (first run downloads ~31 MB)…',
+    converting: 'Converting audio…',
+    convertError: 'Could not convert this audio.',
+    dropTitle: 'Drop an audio file or click to browse',
+    dropSubtitle: 'Convert between formats, re-encode bitrate, or trim — all in your browser',
+    format: 'Format',
+    bitrate: 'Bitrate',
+    start: 'Start (s)',
+    length: 'Length (s)',
+    privacy: 'Runs entirely in your browser via ffmpeg.wasm — the file never leaves your device.',
+    convertingBtn: 'Converting…',
+    convert: 'Convert',
+    clear: 'Clear',
+    working: 'Working…',
+    result: 'Result',
+    download: (fmt) => `Download ${fmt}`,
+  },
+  id: {
+    loadEngine: 'Memuat mesin audio (unduhan pertama ~31 MB)…',
+    converting: 'Mengonversi audio…',
+    convertError: 'Tidak dapat mengonversi audio ini.',
+    dropTitle: 'Letakkan file audio atau klik untuk memilih',
+    dropSubtitle: 'Konversi antar format, encode ulang bitrate, atau potong — semua di browser Anda',
+    format: 'Format',
+    bitrate: 'Bitrate',
+    start: 'Mulai (dtk)',
+    length: 'Durasi (dtk)',
+    privacy: 'Berjalan sepenuhnya di browser Anda via ffmpeg.wasm — file tidak pernah keluar dari perangkat Anda.',
+    convertingBtn: 'Mengonversi…',
+    convert: 'Konversi',
+    clear: 'Bersihkan',
+    working: 'Memproses…',
+    result: 'Hasil',
+    download: (fmt) => `Unduh ${fmt}`,
+  },
+};
+
+export default function AudioConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [fmt, setFmt] = useState<Fmt>('mp3');
   const [bitrate, setBitrate] = useState(192);
@@ -50,7 +108,7 @@ export default function AudioConvert() {
     setResult(null);
     setPercent(0);
     try {
-      setStage('Loading audio engine (first run downloads ~31 MB)…');
+      setStage(t.loadEngine);
       const ffmpeg = await loadFFmpeg();
       const onProgress = ({ progress }: { progress: number }) =>
         setPercent(Math.min(100, Math.round(progress * 100)));
@@ -67,7 +125,7 @@ export default function AudioConvert() {
       const out = `out.${spec.ext}`;
       args.push(out);
 
-      setStage('Converting audio…');
+      setStage(t.converting);
       await ffmpeg.exec(args);
 
       const data = await ffmpeg.readFile(out);
@@ -79,7 +137,7 @@ export default function AudioConvert() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not convert this audio.');
+      setError(e instanceof Error ? e.message : t.convertError);
     } finally {
       setBusy(false);
       setStage('');
@@ -95,8 +153,8 @@ export default function AudioConvert() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="audio/*,video/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop an audio file or click to browse</p>
-          <p className="text-sm text-muted-foreground">Convert between formats, re-encode bitrate, or trim — all in your browser</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
@@ -108,51 +166,51 @@ export default function AudioConvert() {
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Format</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.format}</span>
           <select value={fmt} onChange={e => setFmt(e.target.value as Fmt)} className="border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm">
             {FORMATS.map(f => <option key={f.id} value={f.id}>{f.label}</option>)}
           </select>
         </label>
         {!spec.lossless && (
           <label className="space-y-1 text-sm">
-            <span className="block font-bold uppercase tracking-wide text-muted-foreground">Bitrate</span>
+            <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.bitrate}</span>
             <select value={bitrate} onChange={e => setBitrate(Number(e.target.value))} className="border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm">
               {BITRATES.map(b => <option key={b} value={b}>{b} kbps</option>)}
             </select>
           </label>
         )}
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Start (s)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.start}</span>
           <input type="number" min={0} step={0.5} value={start} onChange={e => setStart(e.target.value)} placeholder="0" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Length (s)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.length}</span>
           <input type="number" min={0} step={0.5} value={duration} onChange={e => setDuration(e.target.value)} placeholder="all" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser via ffmpeg.wasm — the file never leaves your device.
+        {t.privacy}
       </p>
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={run} disabled={!file || busy}>{busy ? 'Converting…' : 'Convert'}</Button>
-        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>Clear</Button>
+        <Button onClick={run} disabled={!file || busy}>{busy ? t.convertingBtn : t.convert}</Button>
+        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>{t.clear}</Button>
       </div>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
           <audio src={resultUrl} controls className="block w-full max-w-md" />
           <Button onClick={download}>
             <Download className="h-4 w-4" />
-            Download {fmt.toUpperCase()}
+            {t.download(fmt.toUpperCase())}
           </Button>
         </div>
       )}
diff --git a/src/islands/media/ScreenRecorder.tsx b/src/islands/media/ScreenRecorder.tsx
index 7e2fd95..b85d98d 100644
--- a/src/islands/media/ScreenRecorder.tsx
+++ b/src/islands/media/ScreenRecorder.tsx
@@ -14,6 +14,57 @@ import {
   getRecordingStartedAt,
   saveRecorderSettings,
 } from '@/services/global-recording';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  introPart1: string;
+  introLocal: string;
+  introPart2: string;
+  notSupported: string;
+  micLabel: string;
+  startRecording: string;
+  saving: string;
+  stop: string;
+  processing: string;
+  recordingLabel: string;
+  download: string;
+  errCancelled: string;
+  errCouldNotStart: string;
+  errStopFailed: string;
+}> = {
+  en: {
+    introPart1: 'Record a tab, window, or your whole screen. The browser asks what to share, and everything is captured and encoded ',
+    introLocal: 'locally',
+    introPart2: ' — nothing is uploaded. System/tab audio is included when the browser allows it.',
+    notSupported: "Your browser doesn't support screen recording (getDisplayMedia / MediaRecorder).",
+    micLabel: 'Also record microphone',
+    startRecording: 'Start recording',
+    saving: 'Saving...',
+    stop: 'Stop',
+    processing: 'Processing...',
+    recordingLabel: 'Recording',
+    download: 'Download',
+    errCancelled: 'Screen sharing was cancelled.',
+    errCouldNotStart: 'Could not start screen recording.',
+    errStopFailed: 'Failed to stop recording.',
+  },
+  id: {
+    introPart1: 'Rekam sebuah tab, jendela, atau seluruh layar Anda. Browser akan menanyakan apa yang ingin dibagikan, dan semuanya ditangkap serta dikodekan ',
+    introLocal: 'secara lokal',
+    introPart2: ' — tidak ada yang diunggah. Audio sistem/tab disertakan bila browser mengizinkannya.',
+    notSupported: 'Browser Anda tidak mendukung perekaman layar (getDisplayMedia / MediaRecorder).',
+    micLabel: 'Rekam juga mikrofon',
+    startRecording: 'Mulai merekam',
+    saving: 'Menyimpan...',
+    stop: 'Hentikan',
+    processing: 'Memproses...',
+    recordingLabel: 'Rekaman',
+    download: 'Unduh',
+    errCancelled: 'Berbagi layar dibatalkan.',
+    errCouldNotStart: 'Tidak dapat memulai perekaman layar.',
+    errStopFailed: 'Gagal menghentikan perekaman.',
+  },
+};
 
 async function blobToDataUrl(blob: Blob): Promise<string> {
   const buf = await blob.arrayBuffer();
@@ -39,7 +90,8 @@ function pickMime(): { mime: string; ext: string } {
   return { mime: '', ext: 'webm' };
 }
 
-export default function ScreenRecorder() {
+export default function ScreenRecorder({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   // Start as false for SSR, then check in useEffect
   const [supported, setSupported] = useState(false);
   const [recording, setRecording] = useState(false);
@@ -207,8 +259,8 @@ export default function ScreenRecorder() {
         countdown: inTauriApp,
       });
     } catch (e) {
-      if (e instanceof DOMException && e.name === 'NotAllowedError') setError('Screen sharing was cancelled.');
-      else setError(e instanceof Error ? e.message : 'Could not start screen recording.');
+      if (e instanceof DOMException && e.name === 'NotAllowedError') setError(t.errCancelled);
+      else setError(e instanceof Error ? e.message : t.errCouldNotStart);
     }
   };
 
@@ -219,7 +271,7 @@ export default function ScreenRecorder() {
       // Result + recording=false arrive via the gwt:recording-* events.
       await stopManaged();
     } catch (e) {
-      const message = e instanceof Error ? e.message : 'Failed to stop recording.';
+      const message = e instanceof Error ? e.message : t.errStopFailed;
       // A "Captured N frames" message is informational, not a hard error.
       if (message.includes('Captured') && message.includes('frames')) setError(`✅ ${message}`);
       else setError(message);
@@ -285,16 +337,15 @@ export default function ScreenRecorder() {
   const mmss = `${String(Math.floor(elapsed / 60)).padStart(2, '0')}:${String(elapsed % 60).padStart(2, '0')}`;
 
   if (!supported) {
-    return <Alert variant="error">Your browser doesn&apos;t support screen recording (getDisplayMedia / MediaRecorder).</Alert>;
+    return <Alert variant="error">{t.notSupported}</Alert>;
   }
 
   return (
     <div className="space-y-4">
       <div className="border-2 border-border bg-muted p-4">
         <p className="text-sm text-muted-foreground">
-          Record a tab, window, or your whole screen. The browser asks what to share, and everything is
-          captured and encoded <span className="font-bold text-foreground">locally</span> — nothing is uploaded.
-          System/tab audio is included when the browser allows it.
+          {t.introPart1}
+          <span className="font-bold text-foreground">{t.introLocal}</span>{t.introPart2}
         </p>
       </div>
 
@@ -393,7 +444,7 @@ export default function ScreenRecorder() {
 
       <label className="flex items-center gap-2 text-sm">
         <input type="checkbox" checked={withMic} disabled={recording || stopping} onChange={e => setWithMic(e.target.checked)} className="h-4 w-4 accent-violet-600" />
-        <span className="font-bold uppercase tracking-wide text-muted-foreground">Also record microphone</span>
+        <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.micLabel}</span>
       </label>
 
       {inTauriApp && (
@@ -407,23 +458,23 @@ export default function ScreenRecorder() {
         {!recording ? (
           <Button onClick={start}>
             <Circle className="h-4 w-4 fill-red-500 text-red-500" />
-            Start recording
+            {t.startRecording}
           </Button>
         ) : stopping ? (
           <Button disabled variant="secondary" className="border-yellow-600 bg-yellow-600 text-white">
             <Loader2 className="h-4 w-4 animate-spin" />
-            Saving...
+            {t.saving}
           </Button>
         ) : (
           <Button onClick={stop} variant="secondary" className="border-red-600 bg-red-600 text-white hover:bg-red-700">
             <Square className="h-4 w-4 fill-current" />
-            Stop
+            {t.stop}
           </Button>
         )}
         {(recording || stopping) && (
           <span className="flex items-center gap-2 font-mono text-sm font-bold">
             {stopping ? (
-              <span className="text-yellow-600">Processing...</span>
+              <span className="text-yellow-600">{t.processing}</span>
             ) : (
               <>
                 <span className="inline-block h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
@@ -439,13 +490,13 @@ export default function ScreenRecorder() {
       {result && resultUrl && !recording && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Recording</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.recordingLabel}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
           <video src={resultUrl} controls className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <Button onClick={download}>
             <Download className="h-4 w-4" />
-            Download {extRef.current.toUpperCase()}
+            {t.download} {extRef.current.toUpperCase()}
           </Button>
         </div>
       )}
diff --git a/src/islands/media/Screenshot.tsx b/src/islands/media/Screenshot.tsx
index a2bf15d..cec955c 100644
--- a/src/islands/media/Screenshot.tsx
+++ b/src/islands/media/Screenshot.tsx
@@ -9,10 +9,101 @@ import { detectCompanion, companionCapture } from '@/services/companion';
 import { captureService } from '@/services/capture';
 import type { DisplayInfo } from '@/services/capture';
 import { isTauri } from '@/services/platform';
+import type { Lang } from '@/i18n/config';
 
 type Rect = { x: number; y: number; w: number; h: number };
 
-export default function Screenshot() {
+const TR: Record<Lang, {
+  ssIntro1: string;
+  ssIntroLocal: string;
+  ssIntro2: string;
+  notSupported: string;
+  countdownLabel: string;
+  captureScreen: string;
+  capturingIn: (n: number) => string;
+  capturingEllipsis: string;
+  enhancedCapture: string;
+  companionDetectedBold: string;
+  companionDetectedRest: string;
+  companionCta1: string;
+  companionCta2: string;
+  cropHint: string;
+  screenshotAlt: string;
+  formatLabel: string;
+  exportCrop: string;
+  exportFull: string;
+  retake: string;
+  resultLabel: string;
+  resultAlt: string;
+  download: string;
+  errCaptureCancelled: string;
+  errCouldNotCapture: string;
+  errExtCancelled: string;
+  errLoadImage: string;
+  errExtFailed: (m: string) => string;
+}> = {
+  en: {
+    ssIntro1: 'Pick a screen, window, or tab; a countdown gives you time to arrange it, then a frame is grabbed and drawn to a canvas ',
+    ssIntroLocal: 'locally',
+    ssIntro2: ". DRM-protected content captures as black — that's a browser rule, not a bug.",
+    notSupported: "Your browser doesn't support screen capture (getDisplayMedia).",
+    countdownLabel: 'Countdown (s)',
+    captureScreen: 'Capture screen',
+    capturingIn: (n) => `Capturing in ${n}…`,
+    capturingEllipsis: 'Capturing…',
+    enhancedCapture: 'Enhanced capture',
+    companionDetectedBold: 'Companion extension detected.',
+    companionDetectedRest: ' Enhanced capture skips the countdown and can be triggered by a global hotkey even while another window is focused.',
+    companionCta1: 'Want a global hotkey and cross-window capture? Install the optional ',
+    companionCta2: ' extension — the tool works fully without it.',
+    cropHint: 'Drag on the image to select a crop region, or export the whole screenshot.',
+    screenshotAlt: 'Screenshot',
+    formatLabel: 'Format',
+    exportCrop: 'Export crop',
+    exportFull: 'Export full',
+    retake: 'Retake',
+    resultLabel: 'Result',
+    resultAlt: 'Screenshot result',
+    download: 'Download',
+    errCaptureCancelled: 'Screen capture was cancelled.',
+    errCouldNotCapture: 'Could not capture the screen.',
+    errExtCancelled: 'Capture was cancelled.',
+    errLoadImage: 'Failed to load captured image',
+    errExtFailed: (m) => `Extension capture failed (${m}).`,
+  },
+  id: {
+    ssIntro1: 'Pilih sebuah layar, jendela, atau tab; hitung mundur memberi Anda waktu untuk menatanya, lalu satu frame diambil dan digambar ke kanvas ',
+    ssIntroLocal: 'secara lokal',
+    ssIntro2: '. Konten yang dilindungi DRM tertangkap sebagai hitam — itu aturan browser, bukan bug.',
+    notSupported: 'Browser Anda tidak mendukung tangkapan layar (getDisplayMedia).',
+    countdownLabel: 'Hitung mundur (d)',
+    captureScreen: 'Tangkap layar',
+    capturingIn: (n) => `Menangkap dalam ${n}…`,
+    capturingEllipsis: 'Menangkap…',
+    enhancedCapture: 'Tangkapan lanjutan',
+    companionDetectedBold: 'Ekstensi Companion terdeteksi.',
+    companionDetectedRest: ' Tangkapan lanjutan melewati hitung mundur dan dapat dipicu oleh hotkey global bahkan saat jendela lain sedang fokus.',
+    companionCta1: 'Ingin hotkey global dan tangkapan lintas jendela? Pasang ekstensi opsional ',
+    companionCta2: ' — tool ini berfungsi penuh tanpanya.',
+    cropHint: 'Seret pada gambar untuk memilih area potongan, atau ekspor seluruh tangkapan layar.',
+    screenshotAlt: 'Tangkapan layar',
+    formatLabel: 'Format',
+    exportCrop: 'Ekspor potongan',
+    exportFull: 'Ekspor penuh',
+    retake: 'Ambil ulang',
+    resultLabel: 'Hasil',
+    resultAlt: 'Hasil tangkapan layar',
+    download: 'Unduh',
+    errCaptureCancelled: 'Tangkapan layar dibatalkan.',
+    errCouldNotCapture: 'Tidak dapat menangkap layar.',
+    errExtCancelled: 'Tangkapan dibatalkan.',
+    errLoadImage: 'Gagal memuat gambar yang ditangkap',
+    errExtFailed: (m) => `Tangkapan ekstensi gagal (${m}).`,
+  },
+};
+
+export default function Screenshot({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   // Start as false for SSR, then check in useEffect
   const [supported, setSupported] = useState(false);
   const [delay, setDelay] = useState(3);
@@ -135,7 +226,7 @@ export default function Screenshot() {
       loadDataUrl(cap.dataUrl, cap.width, cap.height);
     } catch (e) {
       const m = e instanceof Error ? e.message : 'capture-failed';
-      setError(m === 'cancelled' ? 'Capture was cancelled.' : `Extension capture failed (${m}).`);
+      setError(m === 'cancelled' ? t.errExtCancelled : t.errExtFailed(m));
     }
   };
 
@@ -212,7 +303,7 @@ export default function Screenshot() {
       });
     } catch (e) {
       console.error('[Screenshot] Region capture failed:', e);
-      setError(e instanceof Error ? e.message : 'Could not capture the screen.');
+      setError(e instanceof Error ? e.message : t.errCouldNotCapture);
     } finally {
       // Always restore main window
       if (isTauri()) {
@@ -253,7 +344,7 @@ export default function Screenshot() {
 
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();
-        img.onerror = () => reject(new Error('Failed to load captured image'));
+        img.onerror = () => reject(new Error(t.errLoadImage));
         img.src = dataUrl;
       });
 
@@ -269,8 +360,8 @@ export default function Screenshot() {
       setPreviewUrl(prev => { if (prev) URL.revokeObjectURL(prev); return canvas.toDataURL('image/png'); });
     } catch (e) {
       console.error('[Screenshot] Capture failed:', e);
-      if (e instanceof DOMException && e.name === 'NotAllowedError') setError('Screen capture was cancelled.');
-      else setError(e instanceof Error ? e.message : 'Could not capture the screen.');
+      if (e instanceof DOMException && e.name === 'NotAllowedError') setError(t.errCaptureCancelled);
+      else setError(e instanceof Error ? e.message : t.errCouldNotCapture);
     } finally {
       setCapturing(false);
       setCountdown(0);
@@ -330,7 +421,7 @@ export default function Screenshot() {
   };
 
   if (!supported) {
-    return <Alert variant="error">Your browser doesn&apos;t support screen capture (getDisplayMedia).</Alert>;
+    return <Alert variant="error">{t.notSupported}</Alert>;
   }
 
   return (
@@ -339,14 +430,13 @@ export default function Screenshot() {
         <>
           <div className="border-2 border-border bg-muted p-4">
             <p className="text-sm text-muted-foreground">
-              Pick a screen, window, or tab; a countdown gives you time to arrange it, then a frame is grabbed
-              and drawn to a canvas <span className="font-bold text-foreground">locally</span>. DRM-protected
-              content captures as black — that&apos;s a browser rule, not a bug.
+              {t.ssIntro1}
+              <span className="font-bold text-foreground">{t.ssIntroLocal}</span>{t.ssIntro2}
             </p>
           </div>
           <div className="flex flex-wrap items-end gap-4">
             <label className="space-y-1 text-sm">
-              <span className="block font-bold uppercase tracking-wide text-muted-foreground">Countdown (s)</span>
+              <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.countdownLabel}</span>
               <input type="number" min={0} max={15} value={delay} onChange={e => setDelay(Math.max(0, Number(e.target.value)))} className="w-24 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
             </label>
             {displays.length > 0 && (
@@ -367,7 +457,7 @@ export default function Screenshot() {
             )}
             <Button onClick={capture} disabled={capturing}>
               <Camera className="h-4 w-4" />
-              {capturing ? (countdown > 0 ? `Capturing in ${countdown}…` : 'Capturing…') : 'Capture screen'}
+              {capturing ? (countdown > 0 ? t.capturingIn(countdown) : t.capturingEllipsis) : t.captureScreen}
             </Button>
             {isTauri() && (
               <Button variant="secondary" onClick={captureRegion} disabled={capturing}>
@@ -378,20 +468,18 @@ export default function Screenshot() {
             {ext && (
               <Button variant="secondary" onClick={captureViaExtension} disabled={capturing}>
                 <Puzzle className="h-4 w-4" />
-                Enhanced capture
+                {t.enhancedCapture}
               </Button>
             )}
           </div>
           {ext ? (
             <p className="text-xs text-muted-foreground">
-              <span className="font-bold text-foreground">Companion extension detected.</span> Enhanced capture
-              skips the countdown and can be triggered by a global hotkey even while another window is focused.
+              <span className="font-bold text-foreground">{t.companionDetectedBold}</span>{t.companionDetectedRest}
             </p>
           ) : (
             <p className="text-xs text-muted-foreground">
-              Want a global hotkey and cross-window capture? Install the optional{' '}
-              <span className="font-bold text-foreground">GoodWebTools Companion</span> extension — the tool
-              works fully without it.
+              {t.companionCta1}
+              <span className="font-bold text-foreground">GoodWebTools Companion</span>{t.companionCta2}
             </p>
           )}
           {capturing && countdown > 0 && (
@@ -407,13 +495,13 @@ export default function Screenshot() {
       {shot && previewUrl && (
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground">
-            Drag on the image to select a crop region, or export the whole screenshot.
+            {t.cropHint}
           </p>
           <div className="relative inline-block max-w-full select-none border-2 border-border" style={{ touchAction: 'none' }}>
             <img
               ref={imgRef}
               src={previewUrl}
-              alt="Screenshot"
+              alt={t.screenshotAlt}
               draggable={false}
               onPointerDown={onDown}
               onPointerMove={onMove}
@@ -443,27 +531,27 @@ export default function Screenshot() {
 
           <div className="flex flex-wrap items-end gap-3">
             <label className="space-y-1 text-sm">
-              <span className="block font-bold uppercase tracking-wide text-muted-foreground">Format</span>
+              <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.formatLabel}</span>
               <select value={fmt} onChange={e => setFmt(e.target.value as 'png' | 'jpg')} className="border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm">
                 <option value="png">PNG</option>
                 <option value="jpg">JPG</option>
               </select>
             </label>
-            <Button onClick={() => buildOutput(true)} disabled={!sel || sel.w < 4}>Export crop</Button>
-            <Button variant="secondary" onClick={() => buildOutput(false)}>Export full</Button>
-            <Button variant="ghost" onClick={reset}>Retake</Button>
+            <Button onClick={() => buildOutput(true)} disabled={!sel || sel.w < 4}>{t.exportCrop}</Button>
+            <Button variant="secondary" onClick={() => buildOutput(false)}>{t.exportFull}</Button>
+            <Button variant="ghost" onClick={reset}>{t.retake}</Button>
           </div>
         </div>
       )}
 
       {result && resultUrl && (
         <div className="space-y-2">
-          <span className="block font-bold uppercase tracking-wide text-sm text-muted-foreground">Result</span>
-          <img src={resultUrl} alt="Screenshot result" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <span className="block font-bold uppercase tracking-wide text-sm text-muted-foreground">{t.resultLabel}</span>
+          <img src={resultUrl} alt={t.resultAlt} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <div className="flex flex-wrap gap-2">
             <Button onClick={() => downloadService.download(result, `screenshot.${fmt}`)}>
               <Download className="h-4 w-4" />
-              Download {fmt.toUpperCase()}
+              {t.download} {fmt.toUpperCase()}
             </Button>
             <CopyImageButton blob={result} />
             <EditInAnnotatorButton blob={result} filename={`screenshot.${fmt}`} />
diff --git a/src/islands/media/VideoConvert.tsx b/src/islands/media/VideoConvert.tsx
index 8bae05a..6c8b514 100644
--- a/src/islands/media/VideoConvert.tsx
+++ b/src/islands/media/VideoConvert.tsx
@@ -7,6 +7,7 @@ import { ProgressBar } from '@/components/ui/ProgressBar';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { loadFFmpeg, fileToU8 } from '@/services/ffmpeg.service';
+import type { Lang } from '@/i18n/config';
 
 type Fmt = 'mp4' | 'webm' | 'mov';
 const FORMATS: { id: Fmt; label: string; mime: string; vcodec: string; acodec: string }[] = [
@@ -15,7 +16,85 @@ const FORMATS: { id: Fmt; label: string; mime: string; vcodec: string; acodec: s
   { id: 'mov', label: 'MOV (H.264)', mime: 'video/quicktime', vcodec: 'libx264', acodec: 'aac' },
 ];
 
-export default function VideoConvert() {
+const TR: Record<Lang, {
+  loadEngine: string;
+  transcoding: string;
+  convertError: string;
+  dropTitle: string;
+  dropSubtitle: string;
+  format: string;
+  quality: (crf: number) => string;
+  qualityHelp: string;
+  width: string;
+  widthKeep: string;
+  widthHelp: string;
+  start: string;
+  length: string;
+  audio: string;
+  dropAudio: string;
+  privacy: string;
+  converting: string;
+  convert: string;
+  clear: string;
+  working: string;
+  result: string;
+  ofOriginal: (pct: number) => string;
+  download: (fmt: string) => string;
+}> = {
+  en: {
+    loadEngine: 'Loading video engine (first run downloads ~31 MB)…',
+    transcoding: 'Transcoding…',
+    convertError: 'Could not convert this video.',
+    dropTitle: 'Drop a video or click to browse',
+    dropSubtitle: 'Convert, compress, trim or resize — all in your browser',
+    format: 'Format',
+    quality: (crf) => `Quality (CRF ${crf})`,
+    qualityHelp: 'lower = better/larger',
+    width: 'Width (px)',
+    widthKeep: 'keep',
+    widthHelp: '0 = original',
+    start: 'Start (s)',
+    length: 'Length (s)',
+    audio: 'Audio',
+    dropAudio: 'Drop audio',
+    privacy: 'Runs entirely in your browser via ffmpeg.wasm — the video never leaves your device. Transcoding is CPU-bound; long or high-resolution clips can take a while.',
+    converting: 'Converting…',
+    convert: 'Convert',
+    clear: 'Clear',
+    working: 'Working…',
+    result: 'Result',
+    ofOriginal: (pct) => `(${pct}% of original)`,
+    download: (fmt) => `Download ${fmt}`,
+  },
+  id: {
+    loadEngine: 'Memuat mesin video (unduhan pertama ~31 MB)…',
+    transcoding: 'Transcoding…',
+    convertError: 'Tidak dapat mengonversi video ini.',
+    dropTitle: 'Letakkan video atau klik untuk memilih',
+    dropSubtitle: 'Konversi, kompres, potong, atau ubah ukuran — semua di browser Anda',
+    format: 'Format',
+    quality: (crf) => `Kualitas (CRF ${crf})`,
+    qualityHelp: 'lebih rendah = lebih baik/lebih besar',
+    width: 'Lebar (px)',
+    widthKeep: 'tetap',
+    widthHelp: '0 = asli',
+    start: 'Mulai (dtk)',
+    length: 'Durasi (dtk)',
+    audio: 'Audio',
+    dropAudio: 'Hapus audio',
+    privacy: 'Berjalan sepenuhnya di browser Anda via ffmpeg.wasm — video tidak pernah keluar dari perangkat Anda. Transcoding bergantung pada CPU; klip yang panjang atau beresolusi tinggi bisa memakan waktu.',
+    converting: 'Mengonversi…',
+    convert: 'Konversi',
+    clear: 'Bersihkan',
+    working: 'Memproses…',
+    result: 'Hasil',
+    ofOriginal: (pct) => `(${pct}% dari asli)`,
+    download: (fmt) => `Unduh ${fmt}`,
+  },
+};
+
+export default function VideoConvert({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [fmt, setFmt] = useState<Fmt>('mp4');
   const [crf, setCrf] = useState(28);
@@ -48,7 +127,7 @@ export default function VideoConvert() {
     setPercent(0);
     const spec = FORMATS.find(f => f.id === fmt)!;
     try {
-      setStage('Loading video engine (first run downloads ~31 MB)…');
+      setStage(t.loadEngine);
       const ffmpeg = await loadFFmpeg();
       const onProgress = ({ progress }: { progress: number }) =>
         setPercent(Math.min(100, Math.round(progress * 100)));
@@ -70,7 +149,7 @@ export default function VideoConvert() {
       const out = `out.${spec.id}`;
       args.push(out);
 
-      setStage('Transcoding…');
+      setStage(t.transcoding);
       await ffmpeg.exec(args);
 
       const data = await ffmpeg.readFile(out);
@@ -82,7 +161,7 @@ export default function VideoConvert() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not convert this video.');
+      setError(e instanceof Error ? e.message : t.convertError);
     } finally {
       setBusy(false);
       setStage('');
@@ -98,8 +177,8 @@ export default function VideoConvert() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="video/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a video or click to browse</p>
-          <p className="text-sm text-muted-foreground">Convert, compress, trim or resize — all in your browser</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
@@ -113,66 +192,65 @@ export default function VideoConvert() {
           the same baseline, whether or not it has helper text below it. */}
       <div className="flex flex-wrap items-start gap-4 text-sm">
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Format</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.format}</span>
           <select value={fmt} onChange={e => setFmt(e.target.value as Fmt)} className="h-9 border-2 border-border bg-muted px-2 outline-none focus:shadow-brutal-sm">
             {FORMATS.map(f => <option key={f.id} value={f.id}>{f.label}</option>)}
           </select>
           <span className="h-4" />
         </label>
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Quality (CRF {crf})</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.quality(crf)}</span>
           <span className="flex h-9 items-center"><input type="range" min={18} max={40} value={crf} onChange={e => setCrf(Number(e.target.value))} className="w-40 accent-violet-600" /></span>
-          <span className="flex h-4 items-center text-[11px] text-muted-foreground">lower = better/larger</span>
+          <span className="flex h-4 items-center text-[11px] text-muted-foreground">{t.qualityHelp}</span>
         </label>
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Width (px)</span>
-          <input type="number" min={0} max={3840} step={2} value={scale} onChange={e => setScale(Math.max(0, Number(e.target.value)))} placeholder="keep" className="h-9 w-24 border-2 border-border bg-muted px-2 outline-none focus:shadow-brutal-sm" />
-          <span className="flex h-4 items-center text-[11px] text-muted-foreground">0 = original</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.width}</span>
+          <input type="number" min={0} max={3840} step={2} value={scale} onChange={e => setScale(Math.max(0, Number(e.target.value)))} placeholder={t.widthKeep} className="h-9 w-24 border-2 border-border bg-muted px-2 outline-none focus:shadow-brutal-sm" />
+          <span className="flex h-4 items-center text-[11px] text-muted-foreground">{t.widthHelp}</span>
         </label>
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Start (s)</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.start}</span>
           <input type="number" min={0} step={0.5} value={start} onChange={e => setStart(e.target.value)} placeholder="0" className="h-9 w-20 border-2 border-border bg-muted px-2 outline-none focus:shadow-brutal-sm" />
           <span className="h-4" />
         </label>
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Length (s)</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.length}</span>
           <input type="number" min={0} step={0.5} value={duration} onChange={e => setDuration(e.target.value)} placeholder="all" className="h-9 w-20 border-2 border-border bg-muted px-2 outline-none focus:shadow-brutal-sm" />
           <span className="h-4" />
         </label>
         <label className="flex flex-col gap-1">
-          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">Audio</span>
+          <span className="flex h-4 items-center font-bold uppercase tracking-wide text-muted-foreground">{t.audio}</span>
           <span className="flex h-9 items-center gap-2">
             <input type="checkbox" checked={muted} onChange={e => setMuted(e.target.checked)} className="h-4 w-4 accent-violet-600" />
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Drop audio</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.dropAudio}</span>
           </span>
           <span className="h-4" />
         </label>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser via ffmpeg.wasm — the video never leaves your device. Transcoding is
-        CPU-bound; long or high-resolution clips can take a while.
+        {t.privacy}
       </p>
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={run} disabled={!file || busy}>{busy ? 'Converting…' : 'Convert'}</Button>
-        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>Clear</Button>
+        <Button onClick={run} disabled={!file || busy}>{busy ? t.converting : t.convert}</Button>
+        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>{t.clear}</Button>
       </div>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
-            {file && <span className="font-mono text-muted-foreground">({Math.round((result.size / file.size) * 100)}% of original)</span>}
+            {file && <span className="font-mono text-muted-foreground">{t.ofOriginal(Math.round((result.size / file.size) * 100))}</span>}
           </div>
           <video src={resultUrl} controls className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <Button onClick={download}>
             <Download className="h-4 w-4" />
-            Download {fmt.toUpperCase()}
+            {t.download(fmt.toUpperCase())}
           </Button>
         </div>
       )}
diff --git a/src/islands/media/VideoToAudio.tsx b/src/islands/media/VideoToAudio.tsx
index 7d1bb0b..2b41e2f 100644
--- a/src/islands/media/VideoToAudio.tsx
+++ b/src/islands/media/VideoToAudio.tsx
@@ -7,6 +7,7 @@ import { ProgressBar } from '@/components/ui/ProgressBar';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { loadFFmpeg, fileToU8 } from '@/services/ffmpeg.service';
+import type { Lang } from '@/i18n/config';
 
 type Fmt = 'mp3' | 'm4a' | 'wav' | 'opus';
 const FORMATS: { id: Fmt; label: string; mime: string; args: string[]; ext: string }[] = [
@@ -16,7 +17,61 @@ const FORMATS: { id: Fmt; label: string; mime: string; args: string[]; ext: stri
   { id: 'opus', label: 'Opus', mime: 'audio/ogg', args: ['-c:a', 'libopus', '-b:a', '128k'], ext: 'opus' },
 ];
 
-export default function VideoToAudio() {
+const TR: Record<Lang, {
+  loadEngine: string;
+  extracting: string;
+  extractError: string;
+  dropTitle: string;
+  dropSubtitle: string;
+  format: string;
+  start: string;
+  length: string;
+  privacy: string;
+  extractingBtn: string;
+  extractAudio: string;
+  clear: string;
+  working: string;
+  result: string;
+  download: (fmt: string) => string;
+}> = {
+  en: {
+    loadEngine: 'Loading audio engine (first run downloads ~31 MB)…',
+    extracting: 'Extracting audio…',
+    extractError: 'Could not extract audio from this file.',
+    dropTitle: 'Drop a video or click to browse',
+    dropSubtitle: 'Rip the audio track out of a video — all in your browser',
+    format: 'Format',
+    start: 'Start (s)',
+    length: 'Length (s)',
+    privacy: 'Runs entirely in your browser via ffmpeg.wasm — the file never leaves your device.',
+    extractingBtn: 'Extracting…',
+    extractAudio: 'Extract audio',
+    clear: 'Clear',
+    working: 'Working…',
+    result: 'Result',
+    download: (fmt) => `Download ${fmt}`,
+  },
+  id: {
+    loadEngine: 'Memuat mesin audio (unduhan pertama ~31 MB)…',
+    extracting: 'Mengekstrak audio…',
+    extractError: 'Tidak dapat mengekstrak audio dari file ini.',
+    dropTitle: 'Letakkan video atau klik untuk memilih',
+    dropSubtitle: 'Ambil trek audio dari sebuah video — semua di browser Anda',
+    format: 'Format',
+    start: 'Mulai (dtk)',
+    length: 'Durasi (dtk)',
+    privacy: 'Berjalan sepenuhnya di browser Anda via ffmpeg.wasm — file tidak pernah keluar dari perangkat Anda.',
+    extractingBtn: 'Mengekstrak…',
+    extractAudio: 'Ekstrak audio',
+    clear: 'Bersihkan',
+    working: 'Memproses…',
+    result: 'Hasil',
+    download: (fmt) => `Unduh ${fmt}`,
+  },
+};
+
+export default function VideoToAudio({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [fmt, setFmt] = useState<Fmt>('mp3');
   const [start, setStart] = useState('');
@@ -46,7 +101,7 @@ export default function VideoToAudio() {
     setPercent(0);
     const spec = FORMATS.find(f => f.id === fmt)!;
     try {
-      setStage('Loading audio engine (first run downloads ~31 MB)…');
+      setStage(t.loadEngine);
       const ffmpeg = await loadFFmpeg();
       const onProgress = ({ progress }: { progress: number }) =>
         setPercent(Math.min(100, Math.round(progress * 100)));
@@ -59,7 +114,7 @@ export default function VideoToAudio() {
       if (duration && Number(duration) > 0) trim.push('-t', String(Number(duration)));
 
       const out = `out.${spec.ext}`;
-      setStage('Extracting audio…');
+      setStage(t.extracting);
       await ffmpeg.exec([...trim, '-i', 'in', '-vn', ...spec.args, out]);
 
       const data = await ffmpeg.readFile(out);
@@ -71,7 +126,7 @@ export default function VideoToAudio() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not extract audio from this file.');
+      setError(e instanceof Error ? e.message : t.extractError);
     } finally {
       setBusy(false);
       setStage('');
@@ -87,8 +142,8 @@ export default function VideoToAudio() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="video/*,audio/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a video or click to browse</p>
-          <p className="text-sm text-muted-foreground">Rip the audio track out of a video — all in your browser</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
@@ -100,43 +155,43 @@ export default function VideoToAudio() {
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Format</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.format}</span>
           <select value={fmt} onChange={e => setFmt(e.target.value as Fmt)} className="border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm">
             {FORMATS.map(f => <option key={f.id} value={f.id}>{f.label}</option>)}
           </select>
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Start (s)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.start}</span>
           <input type="number" min={0} step={0.5} value={start} onChange={e => setStart(e.target.value)} placeholder="0" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Length (s)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.length}</span>
           <input type="number" min={0} step={0.5} value={duration} onChange={e => setDuration(e.target.value)} placeholder="all" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser via ffmpeg.wasm — the file never leaves your device.
+        {t.privacy}
       </p>
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={run} disabled={!file || busy}>{busy ? 'Extracting…' : 'Extract audio'}</Button>
-        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>Clear</Button>
+        <Button onClick={run} disabled={!file || busy}>{busy ? t.extractingBtn : t.extractAudio}</Button>
+        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>{t.clear}</Button>
       </div>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
           <audio src={resultUrl} controls className="block w-full max-w-md" />
           <Button onClick={download}>
             <Download className="h-4 w-4" />
-            Download {fmt.toUpperCase()}
+            {t.download(fmt.toUpperCase())}
           </Button>
         </div>
       )}
diff --git a/src/islands/media/VideoToGif.tsx b/src/islands/media/VideoToGif.tsx
index 33c75f4..10492a8 100644
--- a/src/islands/media/VideoToGif.tsx
+++ b/src/islands/media/VideoToGif.tsx
@@ -7,8 +7,46 @@ import { ProgressBar } from '@/components/ui/ProgressBar';
 import { downloadService } from '@/services/download';
 import { formatBytes } from '@/tools/image/canvas.lib';
 import { loadFFmpeg, fileToU8 } from '@/services/ffmpeg.service';
-
-export default function VideoToGif() {
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  stageLoading: string; stagePalette: string; stageEncoding: string;
+  errConvert: string; dropTitle: string; dropDesc: string;
+  fps: string; width: string; start: string; length: string;
+  allPh: string; browserNote: string;
+  converting: string; convert: string; clear: string; working: string;
+  result: string; gifAlt: string; downloadGif: string;
+}> = {
+  en: {
+    stageLoading: 'Loading video engine (first run downloads ~31 MB)…',
+    stagePalette: 'Building color palette…',
+    stageEncoding: 'Encoding GIF…',
+    errConvert: 'Could not convert this video.',
+    dropTitle: 'Drop a video or click to browse',
+    dropDesc: 'Convert a clip to an animated GIF — all in your browser',
+    fps: 'FPS', width: 'Width (px)', start: 'Start (s)', length: 'Length (s)',
+    allPh: 'all',
+    browserNote: 'Runs entirely in your browser via ffmpeg.wasm — the video never leaves your device. Keep clips short and the width modest; long or large videos can be slow.',
+    converting: 'Converting…', convert: 'Convert to GIF', clear: 'Clear', working: 'Working…',
+    result: 'Result', gifAlt: 'GIF result', downloadGif: 'Download GIF',
+  },
+  id: {
+    stageLoading: 'Memuat mesin video (jalannya pertama mengunduh ~31 MB)…',
+    stagePalette: 'Menyusun palet warna…',
+    stageEncoding: 'Mengodekan GIF…',
+    errConvert: 'Tidak dapat mengonversi video ini.',
+    dropTitle: 'Letakkan video atau klik untuk menelusuri',
+    dropDesc: 'Konversi klip menjadi GIF animasi — semuanya di browser Anda',
+    fps: 'FPS', width: 'Lebar (px)', start: 'Mulai (dtk)', length: 'Durasi (dtk)',
+    allPh: 'semua',
+    browserNote: 'Berjalan sepenuhnya di browser Anda lewat ffmpeg.wasm — video tidak pernah meninggalkan perangkat Anda. Buat klip tetap pendek dan lebar secukupnya; video yang panjang atau besar bisa lambat.',
+    converting: 'Mengonversi…', convert: 'Konversi ke GIF', clear: 'Bersihkan', working: 'Memproses…',
+    result: 'Hasil', gifAlt: 'Hasil GIF', downloadGif: 'Unduh GIF',
+  },
+};
+
+export default function VideoToGif({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [fps, setFps] = useState(12);
   const [width, setWidth] = useState(480);
@@ -38,7 +76,7 @@ export default function VideoToGif() {
     setResult(null);
     setPercent(0);
     try {
-      setStage('Loading video engine (first run downloads ~31 MB)…');
+      setStage(t.stageLoading);
       const ffmpeg = await loadFFmpeg();
       const onProgress = ({ progress }: { progress: number }) =>
         setPercent(Math.min(100, Math.round(progress * 100)));
@@ -51,10 +89,10 @@ export default function VideoToGif() {
 
       await ffmpeg.writeFile('in', await fileToU8(file));
 
-      setStage('Building color palette…');
+      setStage(t.stagePalette);
       await ffmpeg.exec([...trim, '-i', 'in', '-vf', `${filters},palettegen`, 'palette.png']);
 
-      setStage('Encoding GIF…');
+      setStage(t.stageEncoding);
       await ffmpeg.exec([
         ...trim, '-i', 'in', '-i', 'palette.png',
         '-lavfi', `${filters} [x]; [x][1:v] paletteuse`,
@@ -70,7 +108,7 @@ export default function VideoToGif() {
         return URL.createObjectURL(blob);
       });
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not convert this video.');
+      setError(e instanceof Error ? e.message : t.errConvert);
     } finally {
       setBusy(false);
       setStage('');
@@ -86,8 +124,8 @@ export default function VideoToGif() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="video/*" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a video or click to browse</p>
-          <p className="text-sm text-muted-foreground">Convert a clip to an animated GIF — all in your browser</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropDesc}</p>
         </div>
       </Dropzone>
 
@@ -99,46 +137,45 @@ export default function VideoToGif() {
 
       <div className="flex flex-wrap items-end gap-4">
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">FPS</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.fps}</span>
           <input type="number" min={2} max={30} value={fps} onChange={e => setFps(Math.max(2, Number(e.target.value)))} className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Width (px)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.width}</span>
           <input type="number" min={80} max={1280} step={20} value={width} onChange={e => setWidth(Math.max(80, Number(e.target.value)))} className="w-24 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Start (s)</span>
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.start}</span>
           <input type="number" min={0} step={0.5} value={start} onChange={e => setStart(e.target.value)} placeholder="0" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
         <label className="space-y-1 text-sm">
-          <span className="block font-bold uppercase tracking-wide text-muted-foreground">Length (s)</span>
-          <input type="number" min={0} step={0.5} value={duration} onChange={e => setDuration(e.target.value)} placeholder="all" className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
+          <span className="block font-bold uppercase tracking-wide text-muted-foreground">{t.length}</span>
+          <input type="number" min={0} step={0.5} value={duration} onChange={e => setDuration(e.target.value)} placeholder={t.allPh} className="w-20 border-2 border-border bg-muted px-2 py-1.5 text-sm outline-none focus:shadow-brutal-sm" />
         </label>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Runs entirely in your browser via ffmpeg.wasm — the video never leaves your device. Keep
-        clips short and the width modest; long or large videos can be slow.
+        {t.browserNote}
       </p>
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={run} disabled={!file || busy}>{busy ? 'Converting…' : 'Convert to GIF'}</Button>
-        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>Clear</Button>
+        <Button onClick={run} disabled={!file || busy}>{busy ? t.converting : t.convert}</Button>
+        <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>{t.clear}</Button>
       </div>
 
-      {busy && <ProgressBar percent={percent} label={stage || 'Working…'} />}
+      {busy && <ProgressBar percent={percent} label={stage || t.working} />}
       {error && <Alert variant="error">{error}</Alert>}
 
       {result && resultUrl && !busy && (
         <div className="space-y-2">
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono text-muted-foreground">{formatBytes(result.size)}</span>
           </div>
-          <img src={resultUrl} alt="GIF result" className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
+          <img src={resultUrl} alt={t.gifAlt} className="block max-h-[70vh] w-auto max-w-full border-2 border-border" />
           <Button onClick={download}>
             <Download className="h-4 w-4" />
-            Download GIF
+            {t.downloadGif}
           </Button>
         </div>
       )}
diff --git a/src/islands/media/VoiceToText.tsx b/src/islands/media/VoiceToText.tsx
index 0228507..f7dacd5 100644
--- a/src/islands/media/VoiceToText.tsx
+++ b/src/islands/media/VoiceToText.tsx
@@ -19,6 +19,85 @@ import {
   formatClock,
   type TranscriptSegment,
 } from '@/tools/media/stt.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  models: Record<string, { label: string; note: string }>;
+  languages: Record<string, string>;
+  stop: (clock: string) => string; record: string; or: string;
+  dropTitle: string; dropDesc: string; restored: string;
+  model: string; language: string; languageHint: string;
+  transcribing: string; transcribe: string;
+  pressStop: string; recordOrDrop: string;
+  loadingCache: string; downloading: string;
+  onDevice: (clock: string) => string; slowSmall: string; takesMoment: string;
+  errTranscribe: string;
+  text: string; timestamped: string; subtitles: string;
+  downloadTxt: string; downloadSrt: string; downloadVtt: string;
+}> = {
+  en: {
+    models: {
+      'onnx-community/whisper-tiny.en': { label: 'English · Fast', note: 'smallest download' },
+      'onnx-community/whisper-base.en': { label: 'English · Accurate', note: 'larger, more accurate' },
+      'onnx-community/whisper-base': { label: 'Multilingual', note: 'auto-detects language' },
+      'onnx-community/whisper-small': { label: 'Multilingual · Better', note: 'much better for non-English (e.g. Bahasa); larger download' },
+    },
+    languages: {
+      '': 'Auto-detect', indonesian: 'Indonesian (Bahasa)', malay: 'Malay', javanese: 'Javanese',
+      sundanese: 'Sundanese', english: 'English', chinese: 'Chinese', japanese: 'Japanese',
+      korean: 'Korean', arabic: 'Arabic', hindi: 'Hindi', tagalog: 'Tagalog', thai: 'Thai',
+      vietnamese: 'Vietnamese', spanish: 'Spanish', portuguese: 'Portuguese', french: 'French',
+      german: 'German', italian: 'Italian', dutch: 'Dutch', russian: 'Russian', turkish: 'Turkish',
+    },
+    stop: c => `Stop (${c})`, record: 'Record', or: 'or',
+    dropTitle: 'Drop an audio or video file',
+    dropDesc: 'mp3, wav, m4a, mp4… · transcribed on your device',
+    restored: 'Restored your last recording.',
+    model: 'Model', language: 'Language',
+    languageHint: 'Pick the spoken language for best accuracy — auto-detect often mis-guesses shorter clips.',
+    transcribing: 'Transcribing…', transcribe: 'Transcribe',
+    pressStop: 'Press Stop to finish the recording first.',
+    recordOrDrop: 'Record or drop a file to enable this.',
+    loadingCache: 'Loading model from cache…', downloading: 'Downloading model (first time only)…',
+    onDevice: c => `Transcribing on your device… (${c})`,
+    slowSmall: ' — the “Better” model is much slower, especially on phones; a short clip can take a few minutes.',
+    takesMoment: ' this can take a moment.',
+    errTranscribe: 'Transcription failed',
+    text: 'Text', timestamped: 'Timestamped', subtitles: 'Subtitles',
+    downloadTxt: 'Download .txt', downloadSrt: 'Download .srt', downloadVtt: 'Download .vtt',
+  },
+  id: {
+    models: {
+      'onnx-community/whisper-tiny.en': { label: 'Inggris · Cepat', note: 'unduhan terkecil' },
+      'onnx-community/whisper-base.en': { label: 'Inggris · Akurat', note: 'lebih besar, lebih akurat' },
+      'onnx-community/whisper-base': { label: 'Multibahasa', note: 'mendeteksi bahasa otomatis' },
+      'onnx-community/whisper-small': { label: 'Multibahasa · Lebih Baik', note: 'jauh lebih baik untuk non-Inggris (mis. Bahasa Indonesia); unduhan lebih besar' },
+    },
+    languages: {
+      '': 'Deteksi otomatis', indonesian: 'Indonesia (Bahasa)', malay: 'Melayu', javanese: 'Jawa',
+      sundanese: 'Sunda', english: 'Inggris', chinese: 'Mandarin', japanese: 'Jepang',
+      korean: 'Korea', arabic: 'Arab', hindi: 'Hindi', tagalog: 'Tagalog', thai: 'Thai',
+      vietnamese: 'Vietnam', spanish: 'Spanyol', portuguese: 'Portugis', french: 'Prancis',
+      german: 'Jerman', italian: 'Italia', dutch: 'Belanda', russian: 'Rusia', turkish: 'Turki',
+    },
+    stop: c => `Berhenti (${c})`, record: 'Rekam', or: 'atau',
+    dropTitle: 'Letakkan berkas audio atau video',
+    dropDesc: 'mp3, wav, m4a, mp4… · ditranskripsi di perangkat Anda',
+    restored: 'Rekaman terakhir Anda dipulihkan.',
+    model: 'Model', language: 'Bahasa',
+    languageHint: 'Pilih bahasa yang diucapkan untuk akurasi terbaik — deteksi otomatis sering salah menebak klip yang pendek.',
+    transcribing: 'Mentranskripsi…', transcribe: 'Transkripsi',
+    pressStop: 'Tekan Berhenti untuk menyelesaikan rekaman dulu.',
+    recordOrDrop: 'Rekam atau letakkan berkas untuk mengaktifkan ini.',
+    loadingCache: 'Memuat model dari cache…', downloading: 'Mengunduh model (hanya pertama kali)…',
+    onDevice: c => `Mentranskripsi di perangkat Anda… (${c})`,
+    slowSmall: ' — model “Lebih Baik” jauh lebih lambat, terutama di ponsel; klip pendek bisa memakan beberapa menit.',
+    takesMoment: ' ini bisa memakan waktu sejenak.',
+    errTranscribe: 'Transkripsi gagal',
+    text: 'Teks', timestamped: 'Berstempel waktu', subtitles: 'Subtitel',
+    downloadTxt: 'Unduh .txt', downloadSrt: 'Unduh .srt', downloadVtt: 'Unduh .vtt',
+  },
+};
 
 const MODELS: { value: SttModelId; label: string; note: string; multilingual?: boolean }[] = [
   { value: 'onnx-community/whisper-tiny.en', label: 'English · Fast', note: 'smallest download' },
@@ -56,7 +135,8 @@ const LANGUAGES: { value: string; label: string }[] = [
 
 type Tab = 'text' | 'timestamped' | 'subtitles';
 
-export default function VoiceToText() {
+export default function VoiceToText({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const recorder = useAudioRecorder();
   const wakeLock = useWakeLock();
   const [restored, setRestored] = useState(false);
@@ -183,7 +263,7 @@ export default function VoiceToText() {
       setEditedText(segmentsToText(segs));
       setTab('text');
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Transcription failed');
+      setError(e instanceof Error ? e.message : t.errTranscribe);
     } finally {
       setTranscribing(false);
       setModelProgress(null);
@@ -215,17 +295,17 @@ export default function VoiceToText() {
       <div className="flex flex-wrap items-center gap-3">
         <Button onClick={toggleRecord} disabled={busy}>
           {recorder.recording ? <Square className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
-          {recorder.recording ? `Stop (${formatClock(recorder.seconds)})` : 'Record'}
+          {recorder.recording ? t.stop(formatClock(recorder.seconds)) : t.record}
         </Button>
-        <span className="text-sm text-muted-foreground">or</span>
+        <span className="text-sm text-muted-foreground">{t.or}</span>
       </div>
 
       <Dropzone onDrop={onDrop} accept="audio/*,video/*" multiple={false}>
         <div className="space-y-1">
           <p className="flex items-center justify-center gap-2 text-lg font-bold">
-            <Upload className="h-5 w-5" /> Drop an audio or video file
+            <Upload className="h-5 w-5" /> {t.dropTitle}
           </p>
-          <p className="text-sm text-muted-foreground">mp3, wav, m4a, mp4… · transcribed on your device</p>
+          <p className="text-sm text-muted-foreground">{t.dropDesc}</p>
         </div>
       </Dropzone>
 
@@ -234,13 +314,13 @@ export default function VoiceToText() {
       {audioUrl && (
         <div className="space-y-1">
           <audio ref={audioRef} controls src={audioUrl} onLoadedMetadata={fixAudioDuration} className="w-full" />
-          {restored && <p className="text-xs text-muted-foreground">Restored your last recording.</p>}
+          {restored && <p className="text-xs text-muted-foreground">{t.restored}</p>}
         </div>
       )}
 
       {/* Model + run */}
       <div className="space-y-1.5">
-        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Model</span>
+        <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.model}</span>
         <div className="flex flex-wrap gap-2">
           {MODELS.map(m => (
             <Button
@@ -249,9 +329,9 @@ export default function VoiceToText() {
               aria-pressed={model === m.value}
               onClick={() => setModel(m.value)}
               disabled={busy}
-              title={m.note}
+              title={t.models[m.value]?.note ?? m.note}
             >
-              {m.label}
+              {t.models[m.value]?.label ?? m.label}
             </Button>
           ))}
         </div>
@@ -259,39 +339,39 @@ export default function VoiceToText() {
 
       {MODELS.find(m => m.value === model)?.multilingual && (
         <label className="block space-y-1.5">
-          <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Language</span>
+          <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{t.language}</span>
           <select
             value={language}
             onChange={e => setLanguage(e.target.value)}
             disabled={busy}
             className="w-full border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm"
           >
-            {LANGUAGES.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
+            {LANGUAGES.map(l => <option key={l.value} value={l.value}>{t.languages[l.value] ?? l.label}</option>)}
           </select>
-          <span className="block text-xs text-muted-foreground">Pick the spoken language for best accuracy — auto-detect often mis-guesses shorter clips.</span>
+          <span className="block text-xs text-muted-foreground">{t.languageHint}</span>
         </label>
       )}
 
       <div className="flex flex-wrap items-center gap-3">
         <Button onClick={transcribe} disabled={!audioBlob || busy}>
-          {busy ? 'Transcribing…' : 'Transcribe'}
+          {busy ? t.transcribing : t.transcribe}
         </Button>
         {!audioBlob && !busy && (
           <span className="text-sm text-muted-foreground">
-            {recorder.recording ? 'Press Stop to finish the recording first.' : 'Record or drop a file to enable this.'}
+            {recorder.recording ? t.pressStop : t.recordOrDrop}
           </span>
         )}
       </div>
 
       {modelProgress !== null && (
-        <ProgressBar percent={modelProgress * 100} label={modelCached ? 'Loading model from cache…' : 'Downloading model (first time only)…'} />
+        <ProgressBar percent={modelProgress * 100} label={modelCached ? t.loadingCache : t.downloading} />
       )}
       {busy && modelProgress === null && (
         <p className="text-sm text-muted-foreground">
-          Transcribing on your device… ({formatClock(elapsed)})
+          {t.onDevice(formatClock(elapsed))}
           {MODELS.find(m => m.value === model)?.value === 'onnx-community/whisper-small'
-            ? ' — the “Better” model is much slower, especially on phones; a short clip can take a few minutes.'
-            : ' this can take a moment.'}
+            ? t.slowSmall
+            : t.takesMoment}
         </p>
       )}
 
@@ -301,9 +381,9 @@ export default function VoiceToText() {
       {segments && (
         <div className="space-y-3 border-2 border-border p-3">
           <div className="flex flex-wrap items-center gap-2">
-            <Button variant={tab === 'text' ? 'primary' : 'secondary'} onClick={() => setTab('text')}>Text</Button>
-            <Button variant={tab === 'timestamped' ? 'primary' : 'secondary'} onClick={() => setTab('timestamped')}>Timestamped</Button>
-            <Button variant={tab === 'subtitles' ? 'primary' : 'secondary'} onClick={() => setTab('subtitles')}>Subtitles</Button>
+            <Button variant={tab === 'text' ? 'primary' : 'secondary'} onClick={() => setTab('text')}>{t.text}</Button>
+            <Button variant={tab === 'timestamped' ? 'primary' : 'secondary'} onClick={() => setTab('timestamped')}>{t.timestamped}</Button>
+            <Button variant={tab === 'subtitles' ? 'primary' : 'secondary'} onClick={() => setTab('subtitles')}>{t.subtitles}</Button>
             <div className="ml-auto">
               <CopyButton value={copyValue} />
             </div>
@@ -333,9 +413,9 @@ export default function VoiceToText() {
           )}
 
           <div className="flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={() => download('txt')}>Download .txt</Button>
-            <Button variant="secondary" onClick={() => download('srt')}>Download .srt</Button>
-            <Button variant="secondary" onClick={() => download('vtt')}>Download .vtt</Button>
+            <Button variant="secondary" onClick={() => download('txt')}>{t.downloadTxt}</Button>
+            <Button variant="secondary" onClick={() => download('srt')}>{t.downloadSrt}</Button>
+            <Button variant="secondary" onClick={() => download('vtt')}>{t.downloadVtt}</Button>
           </div>
         </div>
       )}
diff --git a/src/islands/network/OpticalTransfer.tsx b/src/islands/network/OpticalTransfer.tsx
index 7fa2edc..4c3e2f4 100644
--- a/src/islands/network/OpticalTransfer.tsx
+++ b/src/islands/network/OpticalTransfer.tsx
@@ -9,6 +9,7 @@ import { useCamera } from '@/hooks/useCamera';
 import { renderQr, decodeQr } from '@/tools/optical/qr.lib';
 import { encodeFrame, decodeFrame, fnv1a, packFile, unpackFile } from '@/tools/optical/frame.lib';
 import { bytesToBlocks, blocksToBytes, LtEncoder, LtDecoder } from '@/tools/optical/fountain.lib';
+import type { Lang } from '@/i18n/config';
 
 type Role = 'send' | 'receive' | null;
 
@@ -17,35 +18,95 @@ const SEND_FPS = 8;
 const BIG_FILE = 256 * 1024; // warn beyond this — the optical channel is slow
 const CAPTURE_W = 720; // downscale camera frames for faster decoding
 
+const TR: Record<Lang, {
+  introA: string; introBold: string; introB: string;
+  send: string; receive: string; back: string;
+  dropBeam: string; dropHint: string;
+  blocks: (k: number) => string;
+  bigWarn: string; pointHere: string; chooseAnother: string;
+  pointCamera: string;
+  receiving: (k: number) => string;
+  framesCaptured: (n: number) => string;
+  checksumFail: string;
+  receivedPre: string; receivedPost: (bytes: string) => string;
+  downloadFile: string; receiveAnother: string;
+}> = {
+  en: {
+    introA: 'Transfer a file between two devices with ',
+    introBold: 'just a screen and a camera',
+    introB: ' — no network, no accounts, nothing sent to any server. One device shows animated QR codes; the other reads them.',
+    send: 'Send a file',
+    receive: 'Receive a file',
+    back: '← Back',
+    dropBeam: 'Drop a file to beam',
+    dropHint: 'Best for small files (text, keys, docs, small images) · stays on your device',
+    blocks: (k) => `${k} blocks`,
+    bigWarn: '⚠️ This file is on the large side for an optical transfer — it may take several minutes. Keep both devices steady.',
+    pointHere: 'Point the other device’s camera at this code. It loops until the file is received.',
+    chooseAnother: 'Choose another file',
+    pointCamera: 'Point your camera at the other device’s animated QR code and hold steady.',
+    receiving: (k) => `Receiving — ${k} blocks`,
+    framesCaptured: (n) => `${n} frames captured`,
+    checksumFail: 'Received the file but its checksum didn’t match — try again.',
+    receivedPre: 'Received ',
+    receivedPost: (bytes) => ` (${bytes} bytes).`,
+    downloadFile: 'Download file',
+    receiveAnother: 'Receive another',
+  },
+  id: {
+    introA: 'Transfer file antara dua perangkat dengan ',
+    introBold: 'hanya layar dan kamera',
+    introB: ' — tanpa jaringan, tanpa akun, tidak ada yang dikirim ke server mana pun. Satu perangkat menampilkan kode QR beranimasi; yang satunya membacanya.',
+    send: 'Kirim file',
+    receive: 'Terima file',
+    back: '← Kembali',
+    dropBeam: 'Jatuhkan file untuk dipancarkan',
+    dropHint: 'Paling cocok untuk file kecil (teks, kunci, dokumen, gambar kecil) · tetap di perangkat Anda',
+    blocks: (k) => `${k} blok`,
+    bigWarn: '⚠️ File ini tergolong besar untuk transfer optik — mungkin butuh beberapa menit. Jaga kedua perangkat tetap stabil.',
+    pointHere: 'Arahkan kamera perangkat lain ke kode ini. Kode akan terus berulang sampai file diterima.',
+    chooseAnother: 'Pilih file lain',
+    pointCamera: 'Arahkan kamera Anda ke kode QR beranimasi perangkat lain dan tahan dengan stabil.',
+    receiving: (k) => `Menerima — ${k} blok`,
+    framesCaptured: (n) => `${n} frame tertangkap`,
+    checksumFail: 'File diterima tetapi checksum-nya tidak cocok — coba lagi.',
+    receivedPre: 'Menerima ',
+    receivedPost: (bytes) => ` (${bytes} byte).`,
+    downloadFile: 'Unduh file',
+    receiveAnother: 'Terima lagi',
+  },
+};
+
 function randU16(): number {
   return Math.floor((crypto.getRandomValues(new Uint16Array(1))[0]));
 }
 
-export default function OpticalTransfer() {
+export default function OpticalTransfer({ lang = 'en' }: { lang?: Lang }) {
   const [role, setRole] = useState<Role>(null);
+  const tr = TR[lang] ?? TR.en;
 
   return (
     <div className="space-y-4">
       {role === null && (
         <div className="space-y-3">
           <p className="text-sm text-muted-foreground">
-            Transfer a file between two devices with <strong>just a screen and a camera</strong> — no network, no
-            accounts, nothing sent to any server. One device shows animated QR codes; the other reads them.
+            {tr.introA}<strong>{tr.introBold}</strong>{tr.introB}
           </p>
           <div className="flex flex-wrap gap-2">
-            <Button onClick={() => setRole('send')}><Upload className="h-4 w-4" /> Send a file</Button>
-            <Button variant="secondary" onClick={() => setRole('receive')}><Camera className="h-4 w-4" /> Receive a file</Button>
+            <Button onClick={() => setRole('send')}><Upload className="h-4 w-4" /> {tr.send}</Button>
+            <Button variant="secondary" onClick={() => setRole('receive')}><Camera className="h-4 w-4" /> {tr.receive}</Button>
           </div>
         </div>
       )}
 
-      {role === 'send' && <Sender onBack={() => setRole(null)} />}
-      {role === 'receive' && <Receiver onBack={() => setRole(null)} />}
+      {role === 'send' && <Sender onBack={() => setRole(null)} lang={lang} />}
+      {role === 'receive' && <Receiver onBack={() => setRole(null)} lang={lang} />}
     </div>
   );
 }
 
-function Sender({ onBack }: { onBack: () => void }) {
+function Sender({ onBack, lang }: { onBack: () => void; lang: Lang }) {
+  const tr = TR[lang] ?? TR.en;
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const encoderRef = useRef<LtEncoder | null>(null);
   const metaRef = useRef<{ session: number; k: number; size: number; hash: number } | null>(null);
@@ -86,31 +147,32 @@ function Sender({ onBack }: { onBack: () => void }) {
 
   return (
     <div className="space-y-4">
-      <Button variant="ghost" onClick={() => { stop(); onBack(); }}>← Back</Button>
+      <Button variant="ghost" onClick={() => { stop(); onBack(); }}>{tr.back}</Button>
       {!info && (
         <Dropzone onDrop={onDrop} multiple={false}>
           <div className="space-y-1">
-            <p className="text-lg font-bold">Drop a file to beam</p>
-            <p className="text-sm text-muted-foreground">Best for small files (text, keys, docs, small images) · stays on your device</p>
+            <p className="text-lg font-bold">{tr.dropBeam}</p>
+            <p className="text-sm text-muted-foreground">{tr.dropHint}</p>
           </div>
         </Dropzone>
       )}
       {info && (
         <div className="space-y-3">
-          <p className="text-sm font-bold">{info.name} · {info.k} blocks</p>
-          {big && <p className="border-2 border-border bg-muted px-3 py-2 text-sm">⚠️ This file is on the large side for an optical transfer — it may take several minutes. Keep both devices steady.</p>}
+          <p className="text-sm font-bold">{info.name} · {tr.blocks(info.k)}</p>
+          {big && <p className="border-2 border-border bg-muted px-3 py-2 text-sm">{tr.bigWarn}</p>}
           <div className="flex justify-center border-2 border-border bg-white p-2">
             <canvas ref={canvasRef} className="h-auto w-full max-w-md" style={{ imageRendering: 'pixelated' }} />
           </div>
-          <p className="text-center text-sm text-muted-foreground">Point the other device&apos;s camera at this code. It loops until the file is received.</p>
-          <Button variant="secondary" onClick={() => { stop(); setInfo(null); }}>Choose another file</Button>
+          <p className="text-center text-sm text-muted-foreground">{tr.pointHere}</p>
+          <Button variant="secondary" onClick={() => { stop(); setInfo(null); }}>{tr.chooseAnother}</Button>
         </div>
       )}
     </div>
   );
 }
 
-function Receiver({ onBack }: { onBack: () => void }) {
+function Receiver({ onBack, lang }: { onBack: () => void; lang: Lang }) {
+  const tr = TR[lang] ?? TR.en;
   const { videoRef, stream, error, start, stop } = useCamera();
   const captureRef = useRef<HTMLCanvasElement | null>(null);
   const decoderRef = useRef<LtDecoder | null>(null);
@@ -162,7 +224,7 @@ function Receiver({ onBack }: { onBack: () => void }) {
     const finish = () => {
       const meta = metaRef.current!;
       const container = blocksToBytes(decoderRef.current!.recover(), meta.size);
-      if (fnv1a(container) !== meta.hash) { setFailed('Received the file but its checksum didn’t match — try again.'); return; }
+      if (fnv1a(container) !== meta.hash) { setFailed(tr.checksumFail); return; }
       const { name, data } = unpackFile(container);
       setResult({ blob: new Blob([data]), name: name || 'received-file' });
       stop();
@@ -176,18 +238,18 @@ function Receiver({ onBack }: { onBack: () => void }) {
 
   return (
     <div className="space-y-4">
-      <Button variant="ghost" onClick={() => { stop(); onBack(); }}>← Back</Button>
+      <Button variant="ghost" onClick={() => { stop(); onBack(); }}>{tr.back}</Button>
       {error && <Alert variant="error">{error.message}</Alert>}
       {failed && <Alert variant="error">{failed}</Alert>}
 
       {!result && (
         <>
           <video ref={videoRef} playsInline muted className="max-h-96 w-full border-2 border-border bg-black object-contain" />
-          <p className="text-sm text-muted-foreground">Point your camera at the other device&apos;s animated QR code and hold steady.</p>
+          <p className="text-sm text-muted-foreground">{tr.pointCamera}</p>
           {metaRef.current && (
             <div className="space-y-1">
-              <ProgressBar percent={progress * 100} label={`Receiving — ${metaRef.current.k} blocks`} />
-              <p className="text-xs text-muted-foreground">{frames} frames captured</p>
+              <ProgressBar percent={progress * 100} label={tr.receiving(metaRef.current.k)} />
+              <p className="text-xs text-muted-foreground">{tr.framesCaptured(frames)}</p>
             </div>
           )}
         </>
@@ -195,10 +257,10 @@ function Receiver({ onBack }: { onBack: () => void }) {
 
       {result && (
         <div className="space-y-2 border-2 border-border p-3">
-          <Alert variant="success">Received <strong>{result.name}</strong> ({result.blob.size.toLocaleString()} bytes).</Alert>
+          <Alert variant="success">{tr.receivedPre}<strong>{result.name}</strong>{tr.receivedPost(result.blob.size.toLocaleString())}</Alert>
           <div className="flex flex-wrap gap-2">
-            <Button onClick={download}>Download file</Button>
-            <Button variant="secondary" onClick={() => location.reload()}><RefreshCw className="h-4 w-4" /> Receive another</Button>
+            <Button onClick={download}>{tr.downloadFile}</Button>
+            <Button variant="secondary" onClick={() => location.reload()}><RefreshCw className="h-4 w-4" /> {tr.receiveAnother}</Button>
           </div>
         </div>
       )}
diff --git a/src/islands/network/VideoCall.tsx b/src/islands/network/VideoCall.tsx
index afb96f1..da59630 100644
--- a/src/islands/network/VideoCall.tsx
+++ b/src/islands/network/VideoCall.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Video, VideoOff, Mic, MicOff, MonitorUp, SwitchCamera, PhoneOff, Send, ShieldCheck, Settings,
 } from 'lucide-react';
@@ -8,6 +8,7 @@ import { CopyButton } from '@/components/ui/CopyButton';
 import { useVideoCall } from '@/hooks/useVideoCall';
 import { makeRoomId, roomLink, roomIdFromHash } from '@/tools/webrtc/signal.lib';
 import { effectiveIceServers } from '@/tools/webrtc/ice.lib';
+import type { Lang } from '@/i18n/config';
 
 type Signaling = 'auto' | 'manual';
 type ManualRole = 'call' | 'answer';
@@ -16,6 +17,137 @@ const ICE_KEY = 'gwt.webrtc.ice';
 const SIGNALING_KEY = 'gwt.webrtc.signaling';
 const ROUTE = '/tools/video-call';
 
+const TR: Record<Lang, {
+  beforeConnect: string;
+  introAuto: ReactNode; introManual: ReactNode; askAccess: string;
+  advancedSettings: string; connMethod: string; autoMethod: string; manualMethod: string;
+  stunLabel: string; stunHint: string; continue: string;
+  callEnded: string; startNew: string;
+  overlayShare: string; overlayWaiting: string; overlayConnecting: string; overlaySettingUp: string;
+  mute: string; unmute: string; camOff: string; camOn: string;
+  stopSharing: string; shareScreen: string; flip: string; chat: string; hangUp: string;
+  shareInvite: string; copyLink: string;
+  pickRole: string; imCalling: string; imAnswering: string;
+  step1Invite: string; preparing: string; step2Answer: string; connect: string;
+  step1PasteInvite: string; genAnswer: string; step2SendAnswer: string; copyCode: string;
+  noMessages: string; typeMessage: string;
+  footerLine: string; footerManual: string; footerAuto: string;
+  errCreateInvite: string; errInvalidAnswer: string; errInvalidInvite: string;
+}> = {
+  en: {
+    beforeConnect: 'Before you connect',
+    introAuto: (
+      <>To introduce your two devices, GoodWebTools uses a small <strong>signaling server</strong> to exchange
+      connection details (about 2&nbsp;KB). Your video, audio, and chat travel <strong>directly, peer-to-peer</strong>,
+      and never pass through our server.</>
+    ),
+    introManual: (
+      <><strong>Manual mode uses no server at all.</strong> You&apos;ll copy-paste an invite code to the other person
+      yourself. Video, audio and chat travel directly, peer-to-peer.</>
+    ),
+    askAccess: 'You’ll be asked for camera and microphone access. Connections are best-effort and may fail on restrictive networks unless you add your own TURN server.',
+    advancedSettings: 'Advanced connection settings',
+    connMethod: 'Connection method',
+    autoMethod: 'Automatic (share a link)',
+    manualMethod: 'Manual (copy-paste · no server)',
+    stunLabel: 'Your STUN / TURN servers (optional)',
+    stunHint: 'One per line. Leave empty to use public STUN. A TURN server makes calls work on strict networks.',
+    continue: 'Continue',
+    callEnded: 'Call ended',
+    startNew: 'Start a new call',
+    overlayShare: 'Share the link below to invite someone…',
+    overlayWaiting: 'Waiting to connect…',
+    overlayConnecting: 'Connecting…',
+    overlaySettingUp: 'Setting up your camera…',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    camOff: 'Camera off',
+    camOn: 'Camera on',
+    stopSharing: 'Stop sharing',
+    shareScreen: 'Share screen',
+    flip: 'Flip',
+    chat: 'Chat',
+    hangUp: 'Hang up',
+    shareInvite: 'Share this link to invite someone',
+    copyLink: 'Copy link',
+    pickRole: 'Manual connection — pick a role',
+    imCalling: 'I’m calling',
+    imAnswering: 'I’m answering',
+    step1Invite: 'Step 1 — send this invite code to the other person',
+    preparing: 'Preparing…',
+    step2Answer: 'Step 2 — paste the answer code they send back',
+    connect: 'Connect',
+    step1PasteInvite: 'Step 1 — paste the invite code from the caller',
+    genAnswer: 'Generate answer',
+    step2SendAnswer: 'Step 2 — send this answer code back to the caller',
+    copyCode: 'Copy code',
+    noMessages: 'No messages yet.',
+    typeMessage: 'Type a message…',
+    footerLine: 'Video, audio and chat travel directly between devices (peer-to-peer).',
+    footerManual: 'Manual mode uses no server at all.',
+    footerAuto: 'A minimal signaling server only introduces the two devices — your media never passes through it.',
+    errCreateInvite: 'Could not create the invite.',
+    errInvalidAnswer: 'Invalid answer code.',
+    errInvalidInvite: 'Invalid invite code.',
+  },
+  id: {
+    beforeConnect: 'Sebelum Anda terhubung',
+    introAuto: (
+      <>Untuk mengenalkan kedua perangkat Anda, GoodWebTools memakai sebuah <strong>signaling server</strong> kecil untuk
+      bertukar detail koneksi (sekitar 2&nbsp;KB). Video, audio, dan chat Anda berjalan <strong>langsung, peer-to-peer</strong>,
+      dan tidak pernah melewati server kami.</>
+    ),
+    introManual: (
+      <><strong>Mode manual tidak memakai server sama sekali.</strong> Anda menyalin-tempel kode undangan ke orang lain
+      sendiri. Video, audio, dan chat berjalan langsung, peer-to-peer.</>
+    ),
+    askAccess: 'Anda akan diminta izin akses kamera dan mikrofon. Koneksi bersifat best-effort dan bisa gagal di jaringan yang ketat kecuali Anda menambahkan server TURN sendiri.',
+    advancedSettings: 'Pengaturan koneksi lanjutan',
+    connMethod: 'Metode koneksi',
+    autoMethod: 'Otomatis (bagikan tautan)',
+    manualMethod: 'Manual (salin-tempel · tanpa server)',
+    stunLabel: 'Server STUN / TURN Anda (opsional)',
+    stunHint: 'Satu per baris. Kosongkan untuk memakai STUN publik. Server TURN membuat panggilan berfungsi di jaringan ketat.',
+    continue: 'Lanjutkan',
+    callEnded: 'Panggilan berakhir',
+    startNew: 'Mulai panggilan baru',
+    overlayShare: 'Bagikan tautan di bawah untuk mengundang seseorang…',
+    overlayWaiting: 'Menunggu untuk terhubung…',
+    overlayConnecting: 'Menghubungkan…',
+    overlaySettingUp: 'Menyiapkan kamera Anda…',
+    mute: 'Bisukan',
+    unmute: 'Aktifkan suara',
+    camOff: 'Matikan kamera',
+    camOn: 'Nyalakan kamera',
+    stopSharing: 'Berhenti berbagi',
+    shareScreen: 'Bagikan layar',
+    flip: 'Balik',
+    chat: 'Chat',
+    hangUp: 'Tutup',
+    shareInvite: 'Bagikan tautan ini untuk mengundang seseorang',
+    copyLink: 'Salin tautan',
+    pickRole: 'Koneksi manual — pilih peran',
+    imCalling: 'Saya memanggil',
+    imAnswering: 'Saya menjawab',
+    step1Invite: 'Langkah 1 — kirim kode undangan ini ke orang lain',
+    preparing: 'Menyiapkan…',
+    step2Answer: 'Langkah 2 — tempel kode answer yang mereka kirim balik',
+    connect: 'Hubungkan',
+    step1PasteInvite: 'Langkah 1 — tempel kode undangan dari pemanggil',
+    genAnswer: 'Buat answer',
+    step2SendAnswer: 'Langkah 2 — kirim kode answer ini balik ke pemanggil',
+    copyCode: 'Salin kode',
+    noMessages: 'Belum ada pesan.',
+    typeMessage: 'Ketik pesan…',
+    footerLine: 'Video, audio, dan chat berjalan langsung antar perangkat (peer-to-peer).',
+    footerManual: 'Mode manual tidak memakai server sama sekali.',
+    footerAuto: 'Signaling server minimal hanya mengenalkan kedua perangkat — media Anda tidak pernah melewatinya.',
+    errCreateInvite: 'Tidak bisa membuat undangan.',
+    errInvalidAnswer: 'Kode answer tidak valid.',
+    errInvalidInvite: 'Kode undangan tidak valid.',
+  },
+};
+
 function VideoTile({ stream, muted, mirror, className }: { stream: MediaStream | null; muted?: boolean; mirror?: boolean; className?: string }) {
   const ref = useRef<HTMLVideoElement>(null);
   useEffect(() => {
@@ -32,8 +164,9 @@ function VideoTile({ stream, muted, mirror, className }: { stream: MediaStream |
   );
 }
 
-export default function VideoCall() {
+export default function VideoCall({ lang = 'en' }: { lang?: Lang }) {
   const c = useVideoCall();
+  const tr = TR[lang] ?? TR.en;
   const [acked, setAcked] = useState(false);
   const [signaling, setSignaling] = useState<Signaling>('auto');
   const [iceText, setIceText] = useState('');
@@ -79,19 +212,19 @@ export default function VideoCall() {
   const chooseCall = async () => {
     setManualRole('call'); setManualErr(''); setManualBusy(true);
     try { setOfferCode(await c.manualCreateOffer(ice())); }
-    catch (e) { setManualErr(e instanceof Error ? e.message : 'Could not create the invite.'); }
+    catch (e) { setManualErr(e instanceof Error ? e.message : tr.errCreateInvite); }
     finally { setManualBusy(false); }
   };
   const submitAnswer = async () => {
     setManualErr('');
     try { await c.manualAcceptAnswer(pastedAnswer.trim()); }
-    catch (e) { setManualErr(e instanceof Error ? e.message : 'Invalid answer code.'); }
+    catch (e) { setManualErr(e instanceof Error ? e.message : tr.errInvalidAnswer); }
   };
   const chooseAnswer = () => { setManualRole('answer'); setManualErr(''); };
   const submitOffer = async () => {
     setManualErr(''); setManualBusy(true);
     try { setAnswerCode(await c.manualAcceptOffer(pastedOffer.trim(), ice())); }
-    catch (e) { setManualErr(e instanceof Error ? e.message : 'Invalid invite code.'); }
+    catch (e) { setManualErr(e instanceof Error ? e.message : tr.errInvalidInvite); }
     finally { setManualBusy(false); }
   };
 
@@ -100,7 +233,7 @@ export default function VideoCall() {
   const codeBox = (value: string) => (
     <div className="space-y-1.5">
       <textarea readOnly value={value} rows={3} className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs" />
-      <CopyButton value={value} label="Copy code" />
+      <CopyButton value={value} label={tr.copyCode} />
     </div>
   );
 
@@ -109,44 +242,36 @@ export default function VideoCall() {
     return (
       <div className="space-y-4">
         <div className="space-y-3 border-2 border-border p-4">
-          <p className="flex items-center gap-2 text-lg font-bold"><ShieldCheck className="h-5 w-5" /> Before you connect</p>
+          <p className="flex items-center gap-2 text-lg font-bold"><ShieldCheck className="h-5 w-5" /> {tr.beforeConnect}</p>
           <p className="text-sm text-muted-foreground">
-            {signaling === 'auto' ? (
-              <>To introduce your two devices, GoodWebTools uses a small <strong>signaling server</strong> to exchange
-              connection details (about 2&nbsp;KB). Your video, audio, and chat travel <strong>directly, peer-to-peer</strong>,
-              and never pass through our server.</>
-            ) : (
-              <><strong>Manual mode uses no server at all.</strong> You&apos;ll copy-paste an invite code to the other person
-              yourself. Video, audio and chat travel directly, peer-to-peer.</>
-            )}{' '}
-            You&apos;ll be asked for camera and microphone access. Connections are best-effort and may fail on restrictive
-            networks unless you add your own TURN server.
+            {signaling === 'auto' ? tr.introAuto : tr.introManual}{' '}
+            {tr.askAccess}
           </p>
 
           <button type="button" onClick={() => setShowAdvanced(v => !v)} className="flex items-center gap-1.5 text-sm font-bold text-muted-foreground hover:text-foreground">
-            <Settings className="h-4 w-4" /> Advanced connection settings
+            <Settings className="h-4 w-4" /> {tr.advancedSettings}
           </button>
           {showAdvanced && (
             <div className="space-y-3 border-2 border-border bg-muted/40 p-3">
               {!joining && (
                 <div className="space-y-1.5">
-                  <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Connection method</span>
+                  <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.connMethod}</span>
                   <div className="flex flex-wrap gap-2">
-                    <Button variant={signaling === 'auto' ? 'primary' : 'secondary'} onClick={() => persistSignaling('auto')}>Automatic (share a link)</Button>
-                    <Button variant={signaling === 'manual' ? 'primary' : 'secondary'} onClick={() => persistSignaling('manual')}>Manual (copy-paste · no server)</Button>
+                    <Button variant={signaling === 'auto' ? 'primary' : 'secondary'} onClick={() => persistSignaling('auto')}>{tr.autoMethod}</Button>
+                    <Button variant={signaling === 'manual' ? 'primary' : 'secondary'} onClick={() => persistSignaling('manual')}>{tr.manualMethod}</Button>
                   </div>
                 </div>
               )}
               <label className="block space-y-1.5">
-                <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">Your STUN / TURN servers (optional)</span>
+                <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.stunLabel}</span>
                 <textarea value={iceText} onChange={e => persistIce(e.target.value)} rows={3} spellCheck={false}
                   placeholder={'stun:stun.example.com:3478\nturn:turn.example.com:3478 username credential'}
                   className="w-full resize-y border-2 border-border bg-background p-2 font-mono text-xs outline-none focus:shadow-brutal-sm" />
-                <span className="block text-xs text-muted-foreground">One per line. Leave empty to use public STUN. A TURN server makes calls work on strict networks.</span>
+                <span className="block text-xs text-muted-foreground">{tr.stunHint}</span>
               </label>
             </div>
           )}
-          <Button onClick={start}>Continue</Button>
+          <Button onClick={start}>{tr.continue}</Button>
         </div>
       </div>
     );
@@ -161,8 +286,8 @@ export default function VideoCall() {
 
       {c.status === 'ended' && (
         <div className="space-y-3 border-2 border-border p-4">
-          <p className="text-lg font-bold">Call ended</p>
-          <Button onClick={() => location.reload()}>Start a new call</Button>
+          <p className="text-lg font-bold">{tr.callEnded}</p>
+          <Button onClick={() => location.reload()}>{tr.startNew}</Button>
         </div>
       )}
 
@@ -172,10 +297,10 @@ export default function VideoCall() {
           <VideoTile stream={c.remoteStream} className="max-h-[70vh] w-full bg-black object-contain" />
           {!c.remoteStream && (
             <div className="absolute inset-0 flex items-center justify-center p-6 text-center text-sm text-white/80">
-              {c.status === 'waiting' && !joining ? 'Share the link below to invite someone…'
-                : c.status === 'waiting' ? 'Waiting to connect…'
-                : c.status === 'connecting' ? 'Connecting…'
-                : 'Setting up your camera…'}
+              {c.status === 'waiting' && !joining ? tr.overlayShare
+                : c.status === 'waiting' ? tr.overlayWaiting
+                : c.status === 'connecting' ? tr.overlayConnecting
+                : tr.overlaySettingUp}
             </div>
           )}
           {/* Local self-view */}
@@ -189,29 +314,29 @@ export default function VideoCall() {
       {(inCall || c.status === 'connecting' || c.status === 'waiting') && (
         <div className="flex flex-wrap items-center gap-2">
           <Button variant={c.micOn ? 'secondary' : 'primary'} onClick={c.toggleMic} aria-pressed={!c.micOn}>
-            {c.micOn ? <Mic className="h-4 w-4" /> : <MicOff className="h-4 w-4" />}{c.micOn ? 'Mute' : 'Unmute'}
+            {c.micOn ? <Mic className="h-4 w-4" /> : <MicOff className="h-4 w-4" />}{c.micOn ? tr.mute : tr.unmute}
           </Button>
           <Button variant={c.camOn ? 'secondary' : 'primary'} onClick={c.toggleCam} aria-pressed={!c.camOn}>
-            {c.camOn ? <Video className="h-4 w-4" /> : <VideoOff className="h-4 w-4" />}{c.camOn ? 'Camera off' : 'Camera on'}
+            {c.camOn ? <Video className="h-4 w-4" /> : <VideoOff className="h-4 w-4" />}{c.camOn ? tr.camOff : tr.camOn}
           </Button>
           <Button variant={c.sharing ? 'primary' : 'secondary'} onClick={c.toggleScreenShare}>
-            <MonitorUp className="h-4 w-4" />{c.sharing ? 'Stop sharing' : 'Share screen'}
+            <MonitorUp className="h-4 w-4" />{c.sharing ? tr.stopSharing : tr.shareScreen}
           </Button>
           {c.hasMultipleCameras && !c.sharing && (
-            <Button variant="secondary" onClick={c.switchCamera}><SwitchCamera className="h-4 w-4" />Flip</Button>
+            <Button variant="secondary" onClick={c.switchCamera}><SwitchCamera className="h-4 w-4" />{tr.flip}</Button>
           )}
-          <Button variant="secondary" onClick={() => setShowChat(s => !s)}>Chat{c.messages.length ? ` (${c.messages.length})` : ''}</Button>
-          <Button variant="ghost" onClick={c.hangUp}><PhoneOff className="h-4 w-4" />Hang up</Button>
+          <Button variant="secondary" onClick={() => setShowChat(s => !s)}>{tr.chat}{c.messages.length ? ` (${c.messages.length})` : ''}</Button>
+          <Button variant="ghost" onClick={c.hangUp}><PhoneOff className="h-4 w-4" />{tr.hangUp}</Button>
         </div>
       )}
 
       {/* Auto link (creator, before connect) */}
       {signaling === 'auto' && !joining && !inCall && c.status !== 'ended' && (
         <div className="space-y-2">
-          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Share this link to invite someone</p>
+          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.shareInvite}</p>
           <div className="flex flex-wrap items-center gap-2">
             <code className="break-all border-2 border-border bg-muted px-3 py-2 text-sm">{link}</code>
-            <CopyButton value={link} label="Copy link" />
+            <CopyButton value={link} label={tr.copyLink} />
           </div>
         </div>
       )}
@@ -219,38 +344,38 @@ export default function VideoCall() {
       {/* Manual mode */}
       {signaling === 'manual' && !manualRole && !inCall && c.status !== 'ended' && (
         <div className="space-y-2">
-          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">Manual connection — pick a role</p>
+          <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">{tr.pickRole}</p>
           <div className="flex flex-wrap gap-2">
-            <Button onClick={chooseCall} disabled={manualBusy}>I&apos;m calling</Button>
-            <Button variant="secondary" onClick={chooseAnswer}>I&apos;m answering</Button>
+            <Button onClick={chooseCall} disabled={manualBusy}>{tr.imCalling}</Button>
+            <Button variant="secondary" onClick={chooseAnswer}>{tr.imAnswering}</Button>
           </div>
         </div>
       )}
       {signaling === 'manual' && manualRole === 'call' && !inCall && c.status !== 'ended' && (
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 1 — send this invite code to the other person</p>
-            {manualBusy && !offerCode ? <p className="text-sm text-muted-foreground">Preparing…</p> : codeBox(offerCode)}
+            <p className="text-sm font-bold">{tr.step1Invite}</p>
+            {manualBusy && !offerCode ? <p className="text-sm text-muted-foreground">{tr.preparing}</p> : codeBox(offerCode)}
           </div>
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 2 — paste the answer code they send back</p>
+            <p className="text-sm font-bold">{tr.step2Answer}</p>
             <textarea value={pastedAnswer} onChange={e => setPastedAnswer(e.target.value)} rows={3} spellCheck={false}
               className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs outline-none focus:shadow-brutal-sm" />
-            <Button onClick={submitAnswer} disabled={!pastedAnswer.trim()}>Connect</Button>
+            <Button onClick={submitAnswer} disabled={!pastedAnswer.trim()}>{tr.connect}</Button>
           </div>
         </div>
       )}
       {signaling === 'manual' && manualRole === 'answer' && !inCall && c.status !== 'ended' && (
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <p className="text-sm font-bold">Step 1 — paste the invite code from the caller</p>
+            <p className="text-sm font-bold">{tr.step1PasteInvite}</p>
             <textarea value={pastedOffer} onChange={e => setPastedOffer(e.target.value)} rows={3} spellCheck={false}
               className="w-full resize-y break-all border-2 border-border bg-muted p-2 font-mono text-xs outline-none focus:shadow-brutal-sm" />
-            <Button onClick={submitOffer} disabled={!pastedOffer.trim() || manualBusy}>Generate answer</Button>
+            <Button onClick={submitOffer} disabled={!pastedOffer.trim() || manualBusy}>{tr.genAnswer}</Button>
           </div>
           {answerCode && (
             <div className="space-y-1.5">
-              <p className="text-sm font-bold">Step 2 — send this answer code back to the caller</p>
+              <p className="text-sm font-bold">{tr.step2SendAnswer}</p>
               {codeBox(answerCode)}
             </div>
           )}
@@ -261,7 +386,7 @@ export default function VideoCall() {
       {showChat && (inCall || c.messages.length > 0) && (
         <div className="space-y-2 border-2 border-border p-3">
           <div className="max-h-56 space-y-1.5 overflow-y-auto">
-            {c.messages.length === 0 && <p className="text-sm text-muted-foreground">No messages yet.</p>}
+            {c.messages.length === 0 && <p className="text-sm text-muted-foreground">{tr.noMessages}</p>}
             {c.messages.map(m => (
               <p key={m.id} className={`text-sm ${m.mine ? 'text-right' : ''}`}>
                 <span className={`inline-block max-w-[85%] border-2 border-border px-2 py-1 ${m.mine ? 'bg-accent text-accent-foreground' : 'bg-muted'}`}>{m.text}</span>
@@ -271,7 +396,7 @@ export default function VideoCall() {
           <div className="flex gap-2">
             <input value={chatInput} onChange={e => setChatInput(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter') sendChat(); }}
-              placeholder="Type a message…"
+              placeholder={tr.typeMessage}
               className="flex-1 border-2 border-border bg-muted px-3 py-2 text-sm outline-none focus:shadow-brutal-sm" />
             <Button onClick={sendChat} disabled={!chatInput.trim()}><Send className="h-4 w-4" /></Button>
           </div>
@@ -280,8 +405,8 @@ export default function VideoCall() {
 
       <p className="border-t border-border pt-3 text-xs text-muted-foreground">
         <ShieldCheck className="mr-1 inline h-3.5 w-3.5" />
-        Video, audio and chat travel directly between devices (peer-to-peer).{' '}
-        {signaling === 'manual' ? 'Manual mode uses no server at all.' : 'A minimal signaling server only introduces the two devices — your media never passes through it.'}
+        {tr.footerLine}{' '}
+        {signaling === 'manual' ? tr.footerManual : tr.footerAuto}
       </p>
     </div>
   );
diff --git a/src/islands/pdf/ImagesToPdf.tsx b/src/islands/pdf/ImagesToPdf.tsx
index fb98d9a..aa029ea 100644
--- a/src/islands/pdf/ImagesToPdf.tsx
+++ b/src/islands/pdf/ImagesToPdf.tsx
@@ -6,8 +6,45 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { imagesToPdf } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function ImagesToPdf() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  moveUp: string;
+  moveDown: string;
+  remove: string;
+  building: string;
+  createPdf: string;
+  clear: string;
+  errConversion: string;
+}> = {
+  en: {
+    dropTitle: 'Drop PNG/JPG images or click to browse',
+    dropSubtitle: 'One image per page, in the order below',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    remove: 'Remove',
+    building: 'Building…',
+    createPdf: 'Create PDF',
+    clear: 'Clear',
+    errConversion: 'Conversion failed',
+  },
+  id: {
+    dropTitle: 'Letakkan gambar PNG/JPG atau klik untuk menjelajah',
+    dropSubtitle: 'Satu gambar per halaman, dengan urutan di bawah',
+    moveUp: 'Pindah ke atas',
+    moveDown: 'Pindah ke bawah',
+    remove: 'Hapus',
+    building: 'Membuat…',
+    createPdf: 'Buat PDF',
+    clear: 'Bersihkan',
+    errConversion: 'Konversi gagal',
+  },
+};
+
+export default function ImagesToPdf({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [files, setFiles] = useState<File[]>([]);
   const [result, setResult] = useState<Blob | null>(null);
   const [busy, setBusy] = useState(false);
@@ -43,7 +80,7 @@ export default function ImagesToPdf() {
     try {
       setResult(await imagesToPdf(files));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Conversion failed');
+      setError(e instanceof Error ? e.message : t.errConversion);
     } finally {
       setBusy(false);
     }
@@ -53,8 +90,8 @@ export default function ImagesToPdf() {
     <div className="space-y-4">
       <Dropzone onDrop={addFiles} accept="image/png,image/jpeg" multiple>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop PNG/JPG images or click to browse</p>
-          <p className="text-sm text-muted-foreground">One image per page, in the order below</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
@@ -69,7 +106,7 @@ export default function ImagesToPdf() {
                   onClick={() => move(index, -1)}
                   disabled={index === 0}
                   className="border-2 border-border p-1 disabled:opacity-30"
-                  aria-label="Move up"
+                  aria-label={t.moveUp}
                 >
                   <ArrowUp className="h-4 w-4" />
                 </button>
@@ -77,14 +114,14 @@ export default function ImagesToPdf() {
                   onClick={() => move(index, 1)}
                   disabled={index === files.length - 1}
                   className="border-2 border-border p-1 disabled:opacity-30"
-                  aria-label="Move down"
+                  aria-label={t.moveDown}
                 >
                   <ArrowDown className="h-4 w-4" />
                 </button>
                 <button
                   onClick={() => remove(index)}
                   className="border-2 border-border p-1"
-                  aria-label="Remove"
+                  aria-label={t.remove}
                 >
                   <X className="h-4 w-4" />
                 </button>
@@ -96,10 +133,10 @@ export default function ImagesToPdf() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={build} disabled={files.length === 0 || busy}>
-          {busy ? 'Building…' : 'Create PDF'}
+          {busy ? t.building : t.createPdf}
         </Button>
         <Button variant="ghost" onClick={() => { setFiles([]); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/pdf/PdfCompress.tsx b/src/islands/pdf/PdfCompress.tsx
index 6f6c3fe..8c20294 100644
--- a/src/islands/pdf/PdfCompress.tsx
+++ b/src/islands/pdf/PdfCompress.tsx
@@ -6,8 +6,50 @@ import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { compressPdf } from '@/tools/pdf/pdf.lib';
 import { formatBytes } from '@/tools/image/canvas.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfCompress() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  compressing: string;
+  compressPdf: string;
+  clear: string;
+  result: string;
+  smaller: (n: number) => string;
+  alreadyOptimal: string;
+  alreadyCompressed: string;
+  compressionFailed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropSubtitle: 'Recompress streams, images, and fonts; drop unused objects',
+    compressing: 'Compressing…',
+    compressPdf: 'Compress PDF',
+    clear: 'Clear',
+    result: 'Result',
+    smaller: (n) => `−${n}% smaller`,
+    alreadyOptimal: 'already optimal',
+    alreadyCompressed:
+      'This PDF is already well-compressed (mostly text/vector). Compression helps most on image-heavy PDFs.',
+    compressionFailed: 'Compression failed',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropSubtitle: 'Kompres ulang stream, gambar, dan font; buang objek yang tidak terpakai',
+    compressing: 'Mengompres…',
+    compressPdf: 'Kompres PDF',
+    clear: 'Bersihkan',
+    result: 'Hasil',
+    smaller: (n) => `−${n}% lebih kecil`,
+    alreadyOptimal: 'sudah optimal',
+    alreadyCompressed:
+      'PDF ini sudah terkompres dengan baik (sebagian besar teks/vektor). Kompresi paling efektif pada PDF yang banyak gambar.',
+    compressionFailed: 'Kompresi gagal',
+  },
+};
+
+export default function PdfCompress({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [result, setResult] = useState<Blob | null>(null);
   const [busy, setBusy] = useState(false);
@@ -27,7 +69,7 @@ export default function PdfCompress() {
     try {
       setResult(await compressPdf(file));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Compression failed');
+      setError(e instanceof Error ? e.message : t.compressionFailed);
     } finally {
       setBusy(false);
     }
@@ -40,9 +82,9 @@ export default function PdfCompress() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            Recompress streams, images, and fonts; drop unused objects
+            {t.dropSubtitle}
           </p>
         </div>
       </Dropzone>
@@ -55,10 +97,10 @@ export default function PdfCompress() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Compressing…' : 'Compress PDF'}
+          {busy ? t.compressing : t.compressPdf}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -67,7 +109,7 @@ export default function PdfCompress() {
       {result && (
         <>
           <div className="flex flex-wrap items-center gap-3 text-sm">
-            <span className="font-bold uppercase tracking-wide text-muted-foreground">Result</span>
+            <span className="font-bold uppercase tracking-wide text-muted-foreground">{t.result}</span>
             <span className="font-mono">{formatBytes(result.size)}</span>
             {reduction !== null && (
               <span
@@ -77,14 +119,13 @@ export default function PdfCompress() {
                     : 'font-bold text-muted-foreground'
                 }
               >
-                {reduction > 0 ? `−${reduction}% smaller` : 'already optimal'}
+                {reduction > 0 ? t.smaller(reduction) : t.alreadyOptimal}
               </span>
             )}
           </div>
           {reduction !== null && reduction <= 0 && (
             <Alert variant="success">
-              This PDF is already well-compressed (mostly text/vector). Compression helps most on
-              image-heavy PDFs.
+              {t.alreadyCompressed}
             </Alert>
           )}
           <PdfPreview source={result} />
diff --git a/src/islands/pdf/PdfDelete.tsx b/src/islands/pdf/PdfDelete.tsx
index 1552e41..3d07641 100644
--- a/src/islands/pdf/PdfDelete.tsx
+++ b/src/islands/pdf/PdfDelete.tsx
@@ -6,8 +6,54 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { deletePages, getPageCount, parsePageSpec } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfDelete() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  reading: string;
+  pagesLabel: string;
+  placeholder: string;
+  removing: string;
+  removePages: string;
+  clear: string;
+  errRead: string;
+  errEnter: string;
+  errDelete: string;
+  pagesCount: (n: number) => string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropSubtitle: "Remove pages you don't need",
+    reading: 'Reading PDF… (first use loads the PDF engine)',
+    pagesLabel: 'Pages to remove',
+    placeholder: 'e.g. 1, 3, 5-7',
+    removing: 'Removing…',
+    removePages: 'Remove pages',
+    clear: 'Clear',
+    errRead: 'Could not read this PDF.',
+    errEnter: 'Enter pages to remove, e.g. 1, 3, 5-7',
+    errDelete: 'Delete failed',
+    pagesCount: (n) => `${n} pages`,
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk menjelajah',
+    dropSubtitle: 'Hapus halaman yang tidak Anda perlukan',
+    reading: 'Membaca PDF… (penggunaan pertama memuat mesin PDF)',
+    pagesLabel: 'Halaman yang akan dihapus',
+    placeholder: 'mis. 1, 3, 5-7',
+    removing: 'Menghapus…',
+    removePages: 'Hapus halaman',
+    clear: 'Bersihkan',
+    errRead: 'Tidak dapat membaca PDF ini.',
+    errEnter: 'Masukkan halaman yang akan dihapus, mis. 1, 3, 5-7',
+    errDelete: 'Penghapusan gagal',
+    pagesCount: (n) => `${n} halaman`,
+  },
+};
+
+export default function PdfDelete({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [pageCount, setPageCount] = useState(0);
   const [spec, setSpec] = useState('');
@@ -26,7 +72,7 @@ export default function PdfDelete() {
     try {
       setPageCount(await getPageCount(pdf));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read this PDF.');
+      setError(e instanceof Error ? e.message : t.errRead);
       setFile(null);
     } finally {
       setReading(false);
@@ -37,7 +83,7 @@ export default function PdfDelete() {
     if (!file) return;
     const list = parsePageSpec(spec);
     if (list.length === 0) {
-      setError('Enter pages to remove, e.g. 1, 3, 5-7');
+      setError(t.errEnter);
       return;
     }
     setBusy(true);
@@ -46,7 +92,7 @@ export default function PdfDelete() {
     try {
       setResult(await deletePages(file, list));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Delete failed');
+      setError(e instanceof Error ? e.message : t.errDelete);
     } finally {
       setBusy(false);
     }
@@ -56,27 +102,27 @@ export default function PdfDelete() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Remove pages you don't need</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
       {reading && (
         <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Reading PDF… (first use loads the PDF engine)
+          {t.reading}
         </p>
       )}
 
       {file && (
         <>
           <p className="text-sm text-muted-foreground">
-            <span className="font-bold text-foreground">{file.name}</span> — {pageCount} pages
+            <span className="font-bold text-foreground">{file.name}</span> — {t.pagesCount(pageCount)}
           </p>
           <TextArea
-            label="Pages to remove"
+            label={t.pagesLabel}
             value={spec}
             onChange={e => setSpec(e.target.value)}
-            placeholder="e.g. 1, 3, 5-7"
+            placeholder={t.placeholder}
             rows={1}
           />
         </>
@@ -84,10 +130,10 @@ export default function PdfDelete() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Removing…' : 'Remove pages'}
+          {busy ? t.removing : t.removePages}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); setSpec(''); setPageCount(0); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/pdf/PdfMerge.tsx b/src/islands/pdf/PdfMerge.tsx
index 45285dd..80adf80 100644
--- a/src/islands/pdf/PdfMerge.tsx
+++ b/src/islands/pdf/PdfMerge.tsx
@@ -6,8 +6,45 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { mergePdfs } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfMerge() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  moveUp: string;
+  moveDown: string;
+  remove: string;
+  merging: string;
+  mergeBtn: (n: number | string) => string;
+  clear: string;
+  mergeFailed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop PDFs here or click to browse',
+    dropHint: 'Add two or more files, then reorder',
+    moveUp: 'Move up',
+    moveDown: 'Move down',
+    remove: 'Remove',
+    merging: 'Merging…',
+    mergeBtn: (n) => `Merge ${n} PDFs`,
+    clear: 'Clear',
+    mergeFailed: 'Merge failed',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropHint: 'Tambahkan dua file atau lebih, lalu atur urutannya',
+    moveUp: 'Naikkan',
+    moveDown: 'Turunkan',
+    remove: 'Hapus',
+    merging: 'Menggabungkan…',
+    mergeBtn: (n) => `Gabungkan ${n} PDF`,
+    clear: 'Bersihkan',
+    mergeFailed: 'Gagal menggabungkan',
+  },
+};
+
+export default function PdfMerge({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [files, setFiles] = useState<File[]>([]);
   const [result, setResult] = useState<Blob | null>(null);
   const [busy, setBusy] = useState(false);
@@ -43,7 +80,7 @@ export default function PdfMerge() {
     try {
       setResult(await mergePdfs(files));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Merge failed');
+      setError(e instanceof Error ? e.message : t.mergeFailed);
     } finally {
       setBusy(false);
     }
@@ -53,8 +90,8 @@ export default function PdfMerge() {
     <div className="space-y-4">
       <Dropzone onDrop={addFiles} accept="application/pdf" multiple>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop PDFs here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Add two or more files, then reorder</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
@@ -69,7 +106,7 @@ export default function PdfMerge() {
                   onClick={() => move(index, -1)}
                   disabled={index === 0}
                   className="border-2 border-border p-1 disabled:opacity-30"
-                  aria-label="Move up"
+                  aria-label={t.moveUp}
                 >
                   <ArrowUp className="h-4 w-4" />
                 </button>
@@ -77,14 +114,14 @@ export default function PdfMerge() {
                   onClick={() => move(index, 1)}
                   disabled={index === files.length - 1}
                   className="border-2 border-border p-1 disabled:opacity-30"
-                  aria-label="Move down"
+                  aria-label={t.moveDown}
                 >
                   <ArrowDown className="h-4 w-4" />
                 </button>
                 <button
                   onClick={() => remove(index)}
                   className="border-2 border-border p-1"
-                  aria-label="Remove"
+                  aria-label={t.remove}
                 >
                   <X className="h-4 w-4" />
                 </button>
@@ -96,10 +133,10 @@ export default function PdfMerge() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={merge} disabled={files.length < 2 || busy}>
-          {busy ? 'Merging…' : `Merge ${files.length || ''} PDFs`}
+          {busy ? t.merging : t.mergeBtn(files.length || '')}
         </Button>
         <Button variant="ghost" onClick={() => { setFiles([]); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/pdf/PdfProtect.tsx b/src/islands/pdf/PdfProtect.tsx
index 2dd87b2..ce1b91e 100644
--- a/src/islands/pdf/PdfProtect.tsx
+++ b/src/islands/pdf/PdfProtect.tsx
@@ -6,6 +6,60 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { Alert } from '@/components/ui/Alert';
 import { protectPdf } from '@/tools/pdf/pdf.lib';
 import { generatePassword } from '@/tools/dev/password.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  password: string;
+  confirm: string;
+  show: string;
+  generatePassword: string;
+  length: string;
+  encrypting: string;
+  protectPdf: string;
+  clear: string;
+  enterPassword: string;
+  invalidChars: string;
+  passwordsMismatch: string;
+  protectFailed: string;
+  encryptedSuccess: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropSubtitle: 'Encrypt with a password (AES-256)',
+    password: 'Password',
+    confirm: 'Confirm',
+    show: 'Show',
+    generatePassword: 'Generate password',
+    length: 'Length',
+    encrypting: 'Encrypting…',
+    protectPdf: 'Protect PDF',
+    clear: 'Clear',
+    enterPassword: 'Enter a password.',
+    invalidChars: 'Password cannot contain commas or equals signs.',
+    passwordsMismatch: 'Passwords do not match.',
+    protectFailed: 'Could not protect this PDF',
+    encryptedSuccess: 'Encrypted — the downloaded PDF now requires this password to open.',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropSubtitle: 'Enkripsi dengan kata sandi (AES-256)',
+    password: 'Kata sandi',
+    confirm: 'Konfirmasi',
+    show: 'Tampilkan',
+    generatePassword: 'Buat kata sandi',
+    length: 'Panjang',
+    encrypting: 'Mengenkripsi…',
+    protectPdf: 'Lindungi PDF',
+    clear: 'Bersihkan',
+    enterPassword: 'Masukkan kata sandi.',
+    invalidChars: 'Kata sandi tidak boleh mengandung koma atau tanda sama dengan.',
+    passwordsMismatch: 'Kata sandi tidak cocok.',
+    protectFailed: 'Tidak dapat melindungi PDF ini',
+    encryptedSuccess: 'Terenkripsi — PDF yang diunduh kini memerlukan kata sandi ini untuk dibuka.',
+  },
+};
 
 // mupdf's save options are comma/equals separated, so a password containing
 // those characters would corrupt the option string.
@@ -32,7 +86,8 @@ function generateSafePassword(length: number): string {
   return generatePassword({ ...base, enabled: { ...base.enabled, symbols: false }, minSpecial: 0 });
 }
 
-export default function PdfProtect() {
+export default function PdfProtect({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [password, setPassword] = useState('');
   const [confirm, setConfirm] = useState('');
@@ -58,16 +113,16 @@ export default function PdfProtect() {
 
   const run = async () => {
     if (!file) return;
-    if (!password) return setError('Enter a password.');
-    if (INVALID.test(password)) return setError('Password cannot contain commas or equals signs.');
-    if (password !== confirm) return setError('Passwords do not match.');
+    if (!password) return setError(t.enterPassword);
+    if (INVALID.test(password)) return setError(t.invalidChars);
+    if (password !== confirm) return setError(t.passwordsMismatch);
     setBusy(true);
     setError('');
     setResult(null);
     try {
       setResult(await protectPdf(file, password));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not protect this PDF');
+      setError(e instanceof Error ? e.message : t.protectFailed);
     } finally {
       setBusy(false);
     }
@@ -77,8 +132,8 @@ export default function PdfProtect() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Encrypt with a password (AES-256)</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
@@ -87,7 +142,7 @@ export default function PdfProtect() {
       <div className="flex flex-wrap items-end gap-4">
         <label className="min-w-[14rem] flex-1 space-y-1 text-sm">
           <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-            Password
+            {t.password}
           </span>
           <input
             type={show ? 'text' : 'password'}
@@ -99,7 +154,7 @@ export default function PdfProtect() {
         </label>
         <label className="min-w-[14rem] flex-1 space-y-1 text-sm">
           <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-            Confirm
+            {t.confirm}
           </span>
           <input
             type={show ? 'text' : 'password'}
@@ -111,17 +166,17 @@ export default function PdfProtect() {
         </label>
         <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-2 text-sm">
           <input type="checkbox" checked={show} onChange={() => setShow(s => !s)} className="accent-accent" />
-          Show
+          {t.show}
         </label>
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
         <Button variant="secondary" onClick={generate}>
           <Wand2 className="h-4 w-4" />
-          Generate password
+          {t.generatePassword}
         </Button>
         <label className="flex items-center gap-2 text-sm text-muted-foreground">
-          Length
+          {t.length}
           <select
             value={genLength}
             onChange={e => setGenLength(Number(e.target.value))}
@@ -138,10 +193,10 @@ export default function PdfProtect() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy}>
-          {busy ? 'Encrypting…' : 'Protect PDF'}
+          {busy ? t.encrypting : t.protectPdf}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); setPassword(''); setConfirm(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -150,7 +205,7 @@ export default function PdfProtect() {
       {result && (
         <>
           <Alert variant="success">
-            Encrypted — the downloaded PDF now requires this password to open.
+            {t.encryptedSuccess}
           </Alert>
           <ResultActions blob={result} filename="protected.pdf" disabled={busy} />
         </>
diff --git a/src/islands/pdf/PdfRepair.tsx b/src/islands/pdf/PdfRepair.tsx
index f5c56a9..6d97955 100644
--- a/src/islands/pdf/PdfRepair.tsx
+++ b/src/islands/pdf/PdfRepair.tsx
@@ -5,8 +5,60 @@ import { Alert } from '@/components/ui/Alert';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { ResultActions } from '@/components/ui/ResultActions';
 import { repairPdf } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfRepair() {
+const TR: Record<Lang, {
+  couldNotRepair: string;
+  dropTitle: string;
+  dropHint: string;
+  repairing: string;
+  repairPdf: string;
+  forceRebuildTitle: string;
+  forceRebuild: string;
+  clear: string;
+  helperPre: string;
+  helperMid: string;
+  helperPost: string;
+  errorPre: string;
+  errorPost: string;
+  success: (forced: boolean, pages: number) => string;
+}> = {
+  en: {
+    couldNotRepair: 'Could not repair this PDF.',
+    dropTitle: 'Drop a damaged PDF here or click to browse',
+    dropHint: 'Rebuilds a broken PDF so it opens again · 100% on your device, no upload',
+    repairing: 'Repairing…',
+    repairPdf: 'Repair PDF',
+    forceRebuildTitle: 'Rebuild the document page-by-page — for badly damaged files',
+    forceRebuild: 'Force rebuild',
+    clear: 'Clear',
+    helperPre: 'Repair fixes structural damage (a broken cross-reference table, damaged trailer, junk after the end of the file). If a normal repair doesn’t open, try ',
+    helperMid: 'Force rebuild',
+    helperPost: ', which reconstructs the file from whatever pages are still readable. Content that’s physically missing can’t be recovered.',
+    errorPre: ' You can try ',
+    errorPost: ' for a more aggressive recovery.',
+    success: (forced, pages) => `${forced ? 'Rebuilt' : 'Repaired'} — ${pages} page${pages === 1 ? '' : 's'} recovered. Check the preview before saving.`,
+  },
+  id: {
+    couldNotRepair: 'Tidak dapat memperbaiki PDF ini.',
+    dropTitle: 'Letakkan PDF yang rusak di sini atau klik untuk memilih',
+    dropHint: 'Membangun ulang PDF yang rusak agar bisa dibuka lagi · 100% di perangkat Anda, tanpa unggah',
+    repairing: 'Memperbaiki…',
+    repairPdf: 'Perbaiki PDF',
+    forceRebuildTitle: 'Bangun ulang dokumen halaman demi halaman — untuk file yang rusak parah',
+    forceRebuild: 'Bangun ulang paksa',
+    clear: 'Bersihkan',
+    helperPre: 'Perbaikan mengatasi kerusakan struktural (tabel referensi silang yang rusak, trailer rusak, data sampah setelah akhir file). Jika perbaikan biasa tidak dapat membuka file, coba ',
+    helperMid: 'Bangun ulang paksa',
+    helperPost: ', yang merekonstruksi file dari halaman apa pun yang masih dapat dibaca. Konten yang benar-benar hilang tidak dapat dipulihkan.',
+    errorPre: ' Anda dapat mencoba ',
+    errorPost: ' untuk pemulihan yang lebih agresif.',
+    success: (forced, pages) => `${forced ? 'Dibangun ulang' : 'Diperbaiki'} — ${pages} halaman dipulihkan. Periksa pratinjau sebelum menyimpan.`,
+  },
+};
+
+export default function PdfRepair({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [result, setResult] = useState<Blob | null>(null);
   const [pages, setPages] = useState(0);
@@ -35,7 +87,7 @@ export default function PdfRepair() {
       setPages(recovered);
       setForced(force);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not repair this PDF.');
+      setError(e instanceof Error ? e.message : t.couldNotRepair);
     } finally {
       setBusy(false);
     }
@@ -45,8 +97,8 @@ export default function PdfRepair() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a damaged PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Rebuilds a broken PDF so it opens again · 100% on your device, no upload</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
@@ -54,32 +106,30 @@ export default function PdfRepair() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={() => run(false)} disabled={!file || busy}>
-          {busy ? 'Repairing…' : 'Repair PDF'}
+          {busy ? t.repairing : t.repairPdf}
         </Button>
-        <Button variant="secondary" onClick={() => run(true)} disabled={!file || busy} title="Rebuild the document page-by-page — for badly damaged files">
-          Force rebuild
+        <Button variant="secondary" onClick={() => run(true)} disabled={!file || busy} title={t.forceRebuildTitle}>
+          {t.forceRebuild}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Repair fixes structural damage (a broken cross-reference table, damaged trailer, junk after the end of the file).
-        If a normal repair doesn&apos;t open, try <strong>Force rebuild</strong>, which reconstructs the file from whatever
-        pages are still readable. Content that&apos;s physically missing can&apos;t be recovered.
+        {t.helperPre}<strong>{t.helperMid}</strong>{t.helperPost}
       </p>
 
       {error && (
         <Alert variant="error">
-          {error} You can try <strong>Force rebuild</strong> for a more aggressive recovery.
+          {error}{t.errorPre}<strong>{t.forceRebuild}</strong>{t.errorPost}
         </Alert>
       )}
 
       {result && (
         <>
           <Alert variant="success">
-            {forced ? 'Rebuilt' : 'Repaired'} — {pages} page{pages === 1 ? '' : 's'} recovered. Check the preview before saving.
+            {t.success(forced, pages)}
           </Alert>
           <PdfPreview source={result} />
           <ResultActions blob={result} filename={outName} disabled={busy} />
diff --git a/src/islands/pdf/PdfRotate.tsx b/src/islands/pdf/PdfRotate.tsx
index a8b7c98..a559d04 100644
--- a/src/islands/pdf/PdfRotate.tsx
+++ b/src/islands/pdf/PdfRotate.tsx
@@ -5,6 +5,7 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { rotatePdf } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
 const TURNS = [
   { deg: 90, label: '90° ↻' },
@@ -12,7 +13,34 @@ const TURNS = [
   { deg: 270, label: '270° ↺' },
 ];
 
-export default function PdfRotate() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  rotating: string;
+  rotateBtn: string;
+  clear: string;
+  rotateFailed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropHint: 'Rotate every page clockwise',
+    rotating: 'Rotating…',
+    rotateBtn: 'Rotate PDF',
+    clear: 'Clear',
+    rotateFailed: 'Rotate failed',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropHint: 'Putar setiap halaman searah jarum jam',
+    rotating: 'Memutar…',
+    rotateBtn: 'Putar PDF',
+    clear: 'Bersihkan',
+    rotateFailed: 'Gagal memutar',
+  },
+};
+
+export default function PdfRotate({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [turn, setTurn] = useState(90);
   const [result, setResult] = useState<Blob | null>(null);
@@ -33,7 +61,7 @@ export default function PdfRotate() {
     try {
       setResult(await rotatePdf(file, turn));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Rotate failed');
+      setError(e instanceof Error ? e.message : t.rotateFailed);
     } finally {
       setBusy(false);
     }
@@ -43,8 +71,8 @@ export default function PdfRotate() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Rotate every page clockwise</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
@@ -67,10 +95,10 @@ export default function PdfRotate() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={rotate} disabled={!file || busy}>
-          {busy ? 'Rotating…' : 'Rotate PDF'}
+          {busy ? t.rotating : t.rotateBtn}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/pdf/PdfSplit.tsx b/src/islands/pdf/PdfSplit.tsx
index 8adaafe..e6b94c0 100644
--- a/src/islands/pdf/PdfSplit.tsx
+++ b/src/islands/pdf/PdfSplit.tsx
@@ -6,8 +6,60 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { extractPageList, getPageCount, parsePageSpec } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfSplit() {
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropHint: string;
+  reading: string;
+  pagesLabel: (n: number) => string;
+  pagesFieldLabel: string;
+  placeholder: string;
+  willExtractPre: string;
+  willExtractPost: string;
+  extracting: string;
+  extractBtn: string;
+  clear: string;
+  couldNotRead: string;
+  enterPages: string;
+  extractFailed: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropHint: 'Pick any pages or ranges to extract into a new PDF',
+    reading: 'Reading PDF… (first use loads the PDF engine)',
+    pagesLabel: (n) => `${n} pages`,
+    pagesFieldLabel: 'Pages to extract',
+    placeholder: 'e.g. 1, 3, 7, 10  or  2-5, 8',
+    willExtractPre: 'Will extract',
+    willExtractPost: 'page(s):',
+    extracting: 'Extracting…',
+    extractBtn: 'Extract pages',
+    clear: 'Clear',
+    couldNotRead: 'Could not read this PDF.',
+    enterPages: 'Enter pages to extract, e.g. 1, 3, 7, 10 or 2-5',
+    extractFailed: 'Extract failed',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropHint: 'Pilih halaman atau rentang mana pun untuk diekstrak ke PDF baru',
+    reading: 'Membaca PDF… (penggunaan pertama memuat mesin PDF)',
+    pagesLabel: (n) => `${n} halaman`,
+    pagesFieldLabel: 'Halaman yang akan diekstrak',
+    placeholder: 'mis. 1, 3, 7, 10  atau  2-5, 8',
+    willExtractPre: 'Akan mengekstrak',
+    willExtractPost: 'halaman:',
+    extracting: 'Mengekstrak…',
+    extractBtn: 'Ekstrak halaman',
+    clear: 'Bersihkan',
+    couldNotRead: 'Tidak dapat membaca PDF ini.',
+    enterPages: 'Masukkan halaman yang akan diekstrak, mis. 1, 3, 7, 10 atau 2-5',
+    extractFailed: 'Gagal mengekstrak',
+  },
+};
+
+export default function PdfSplit({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [pageCount, setPageCount] = useState(0);
   const [spec, setSpec] = useState('');
@@ -28,7 +80,7 @@ export default function PdfSplit() {
       const count = await getPageCount(pdf);
       setPageCount(count);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read this PDF.');
+      setError(e instanceof Error ? e.message : t.couldNotRead);
       setFile(null);
     } finally {
       setReading(false);
@@ -41,7 +93,7 @@ export default function PdfSplit() {
   const extract = async () => {
     if (!file) return;
     if (selected.length === 0) {
-      setError('Enter pages to extract, e.g. 1, 3, 7, 10 or 2-5');
+      setError(t.enterPages);
       return;
     }
     setBusy(true);
@@ -50,7 +102,7 @@ export default function PdfSplit() {
     try {
       setResult(await extractPageList(file, selected));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Extract failed');
+      setError(e instanceof Error ? e.message : t.extractFailed);
     } finally {
       setBusy(false);
     }
@@ -60,35 +112,35 @@ export default function PdfSplit() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
           <p className="text-sm text-muted-foreground">
-            Pick any pages or ranges to extract into a new PDF
+            {t.dropHint}
           </p>
         </div>
       </Dropzone>
 
       {reading && (
         <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Reading PDF… (first use loads the PDF engine)
+          {t.reading}
         </p>
       )}
 
       {file && (
         <>
           <p className="text-sm text-muted-foreground">
-            <span className="font-bold text-foreground">{file.name}</span> — {pageCount} pages
+            <span className="font-bold text-foreground">{file.name}</span> — {t.pagesLabel(pageCount)}
           </p>
           <TextArea
-            label="Pages to extract"
+            label={t.pagesFieldLabel}
             value={spec}
             onChange={e => setSpec(e.target.value)}
-            placeholder="e.g. 1, 3, 7, 10  or  2-5, 8"
+            placeholder={t.placeholder}
             rows={1}
           />
           {selected.length > 0 && (
             <p className="text-sm text-muted-foreground">
-              Will extract <span className="font-bold text-foreground">{selected.length}</span>{' '}
-              page(s): {selected.join(', ')}
+              {t.willExtractPre} <span className="font-bold text-foreground">{selected.length}</span>{' '}
+              {t.willExtractPost} {selected.join(', ')}
             </p>
           )}
         </>
@@ -96,10 +148,10 @@ export default function PdfSplit() {
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={extract} disabled={!file || busy}>
-          {busy ? 'Extracting…' : 'Extract pages'}
+          {busy ? t.extracting : t.extractBtn}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); setSpec(''); setPageCount(0); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/pdf/PdfToImage.tsx b/src/islands/pdf/PdfToImage.tsx
index bd79d5c..7edc883 100644
--- a/src/islands/pdf/PdfToImage.tsx
+++ b/src/islands/pdf/PdfToImage.tsx
@@ -7,6 +7,66 @@ import { Alert } from '@/components/ui/Alert';
 import { downloadService } from '@/services/download';
 import { EditInAnnotatorButton } from '@/components/ui/EditInAnnotatorButton';
 import { openPdfRenderer, type PdfRenderer } from '@/tools/pdf/render.lib';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  opening: string;
+  scale: string;
+  format: string;
+  prevPages: string;
+  nextPages: string;
+  zipping: string;
+  downloadAll: string;
+  rendering: string;
+  errOpen: string;
+  errRender: string;
+  errZip: string;
+  pagesCount: (n: number) => string;
+  pagesRange: (a: number, b: number, c: number) => string;
+  renderingAll: (n: number) => string;
+  pageAlt: (n: number) => string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropSubtitle: 'Render each page to a PNG or JPG image',
+    opening: 'Opening PDF… (first use loads the render engine)',
+    scale: 'Scale',
+    format: 'Format',
+    prevPages: 'Previous pages',
+    nextPages: 'Next pages',
+    zipping: 'Zipping…',
+    downloadAll: 'Download all (ZIP)',
+    rendering: 'Rendering…',
+    errOpen: 'Could not open this PDF',
+    errRender: 'Could not render pages',
+    errZip: 'Could not create ZIP',
+    pagesCount: (n) => `${n} pages`,
+    pagesRange: (a, b, c) => `Pages ${a}–${b} of ${c}`,
+    renderingAll: (n) => `Rendering all ${n} pages`,
+    pageAlt: (n) => `Page ${n}`,
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk menjelajah',
+    dropSubtitle: 'Render setiap halaman ke gambar PNG atau JPG',
+    opening: 'Membuka PDF… (penggunaan pertama memuat mesin render)',
+    scale: 'Skala',
+    format: 'Format',
+    prevPages: 'Halaman sebelumnya',
+    nextPages: 'Halaman berikutnya',
+    zipping: 'Mengompres…',
+    downloadAll: 'Unduh semua (ZIP)',
+    rendering: 'Merender…',
+    errOpen: 'Tidak dapat membuka PDF ini',
+    errRender: 'Tidak dapat merender halaman',
+    errZip: 'Tidak dapat membuat ZIP',
+    pagesCount: (n) => `${n} halaman`,
+    pagesRange: (a, b, c) => `Halaman ${a}–${b} dari ${c}`,
+    renderingAll: (n) => `Merender semua ${n} halaman`,
+    pageAlt: (n) => `Halaman ${n}`,
+  },
+};
 
 const WINDOW = 5;
 
@@ -29,7 +89,8 @@ interface Thumb {
   height: number;
 }
 
-export default function PdfToImage() {
+export default function PdfToImage({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const rendererRef = useRef<PdfRenderer | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [scale, setScale] = useState(2);
@@ -62,7 +123,7 @@ export default function PdfToImage() {
       rendererRef.current = renderer;
       setPageCount(renderer.pageCount);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not open this PDF');
+      setError(e instanceof Error ? e.message : t.errOpen);
       setFile(null);
     } finally {
       setOpening(false);
@@ -91,7 +152,7 @@ export default function PdfToImage() {
         }
         setThumbs(rendered);
       } catch {
-        if (!cancelled) setError('Could not render pages');
+        if (!cancelled) setError(t.errRender);
       } finally {
         if (!cancelled) setRendering(false);
       }
@@ -118,7 +179,7 @@ export default function PdfToImage() {
       }
       await downloadService.downloadZip(files, `${baseName}-images.zip`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not create ZIP');
+      setError(e instanceof Error ? e.message : t.errZip);
     } finally {
       setZipProgress(null);
     }
@@ -131,27 +192,27 @@ export default function PdfToImage() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Render each page to a PNG or JPG image</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
       {opening && (
         <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Opening PDF… (first use loads the render engine)
+          {t.opening}
         </p>
       )}
 
       {file && pageCount > 0 && (
         <>
           <p className="text-sm font-bold text-foreground">
-            {file.name} — {pageCount} pages
+            {file.name} — {t.pagesCount(pageCount)}
           </p>
 
           <div className="flex flex-wrap gap-4">
             <div className="space-y-1.5">
               <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-                Scale
+                {t.scale}
               </span>
               <div className="flex gap-2">
                 {SCALES.map(({ scale: value, label }) => (
@@ -168,7 +229,7 @@ export default function PdfToImage() {
             </div>
             <div className="space-y-1.5">
               <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-                Format
+                {t.format}
               </span>
               <div className="flex gap-2">
                 {FORMATS.map(({ value, label }) => (
@@ -187,14 +248,14 @@ export default function PdfToImage() {
 
           <div className="flex flex-wrap items-center justify-between gap-2">
             <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-              Pages {windowStart}–{windowEnd} of {pageCount}
+              {t.pagesRange(windowStart, windowEnd, pageCount)}
               {pageCount > WINDOW && (
                 <span className="ml-2 inline-flex gap-1 align-middle">
                   <button
                     onClick={() => setWindowStart(s => Math.max(1, s - WINDOW))}
                     disabled={windowStart <= 1}
                     className="border-2 border-border bg-muted p-1 shadow-brutal-sm press-brutal disabled:opacity-30"
-                    aria-label="Previous pages"
+                    aria-label={t.prevPages}
                   >
                     <ChevronLeft className="h-4 w-4" />
                   </button>
@@ -202,7 +263,7 @@ export default function PdfToImage() {
                     onClick={() => setWindowStart(s => Math.min(s + WINDOW, pageCount))}
                     disabled={windowEnd >= pageCount}
                     className="border-2 border-border bg-muted p-1 shadow-brutal-sm press-brutal disabled:opacity-30"
-                    aria-label="Next pages"
+                    aria-label={t.nextPages}
                   >
                     <ChevronRight className="h-4 w-4" />
                   </button>
@@ -211,12 +272,12 @@ export default function PdfToImage() {
             </span>
             <Button onClick={downloadAllZip} disabled={busy}>
               <FileArchive className="h-4 w-4" />
-              {zipProgress !== null ? 'Zipping…' : `Download all (ZIP)`}
+              {zipProgress !== null ? t.zipping : t.downloadAll}
             </Button>
           </div>
 
           {zipProgress !== null && (
-            <ProgressBar percent={zipProgress} label={`Rendering all ${pageCount} pages`} />
+            <ProgressBar percent={zipProgress} label={t.renderingAll(pageCount)} />
           )}
         </>
       )}
@@ -230,10 +291,10 @@ export default function PdfToImage() {
               key={page.pageNumber}
               className="space-y-2 border-2 border-border bg-muted p-2 shadow-brutal-sm"
             >
-              <img src={page.url} alt={`Page ${page.pageNumber}`} className="w-full border-2 border-border" />
+              <img src={page.url} alt={t.pageAlt(page.pageNumber)} className="w-full border-2 border-border" />
               <div className="flex items-center justify-between gap-2">
                 <span className="min-w-0 text-xs font-bold uppercase text-muted-foreground">
-                  <span className="block">Page {page.pageNumber}</span>
+                  <span className="block">{t.pageAlt(page.pageNumber)}</span>
                   <span className="block font-mono normal-case">
                     {page.width}×{page.height}
                   </span>
@@ -251,7 +312,7 @@ export default function PdfToImage() {
             </div>
           ))}
           {rendering && thumbs.length === 0 && (
-            <p className="py-6 text-sm text-muted-foreground">Rendering…</p>
+            <p className="py-6 text-sm text-muted-foreground">{t.rendering}</p>
           )}
         </div>
       )}
diff --git a/src/islands/pdf/PdfUnlock.tsx b/src/islands/pdf/PdfUnlock.tsx
index f562da7..d4cb72c 100644
--- a/src/islands/pdf/PdfUnlock.tsx
+++ b/src/islands/pdf/PdfUnlock.tsx
@@ -5,8 +5,54 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { unlockPdf, pdfNeedsPassword } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-export default function PdfUnlock() {
+const TR: Record<Lang, {
+  couldNotRead: string;
+  couldNotUnlock: string;
+  dropTitle: string;
+  dropHint: string;
+  readingPdf: string;
+  password: string;
+  show: string;
+  notProtected: string;
+  unlocking: string;
+  removePassword: string;
+  clear: string;
+  removedSuccess: string;
+}> = {
+  en: {
+    couldNotRead: 'Could not read this PDF.',
+    couldNotUnlock: 'Could not unlock this PDF',
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropHint: 'Remove a password so it opens freely',
+    readingPdf: 'Reading PDF…',
+    password: 'Password',
+    show: 'Show',
+    notProtected: "This PDF isn't password-protected — nothing to remove.",
+    unlocking: 'Unlocking…',
+    removePassword: 'Remove password',
+    clear: 'Clear',
+    removedSuccess: 'Password removed — this copy opens without a password.',
+  },
+  id: {
+    couldNotRead: 'Tidak dapat membaca PDF ini.',
+    couldNotUnlock: 'Tidak dapat membuka PDF ini',
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropHint: 'Hapus password agar PDF terbuka dengan bebas',
+    readingPdf: 'Membaca PDF…',
+    password: 'Password',
+    show: 'Tampilkan',
+    notProtected: 'PDF ini tidak dilindungi password — tidak ada yang perlu dihapus.',
+    unlocking: 'Membuka…',
+    removePassword: 'Hapus password',
+    clear: 'Bersihkan',
+    removedSuccess: 'Password dihapus — salinan ini terbuka tanpa password.',
+  },
+};
+
+export default function PdfUnlock({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [needsPassword, setNeedsPassword] = useState(false);
   const [password, setPassword] = useState('');
@@ -27,7 +73,7 @@ export default function PdfUnlock() {
     try {
       setNeedsPassword(await pdfNeedsPassword(pdf));
     } catch {
-      setError('Could not read this PDF.');
+      setError(t.couldNotRead);
       setFile(null);
     } finally {
       setChecking(false);
@@ -42,7 +88,7 @@ export default function PdfUnlock() {
     try {
       setResult(await unlockPdf(file, password));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not unlock this PDF');
+      setError(e instanceof Error ? e.message : t.couldNotUnlock);
     } finally {
       setBusy(false);
     }
@@ -52,14 +98,14 @@ export default function PdfUnlock() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Remove a password so it opens freely</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropHint}</p>
         </div>
       </Dropzone>
 
       {checking && (
         <p className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Reading PDF…
+          {t.readingPdf}
         </p>
       )}
 
@@ -70,7 +116,7 @@ export default function PdfUnlock() {
             <div className="flex flex-wrap items-end gap-4">
               <label className="min-w-[14rem] flex-1 space-y-1 text-sm">
                 <span className="block font-bold uppercase tracking-wide text-muted-foreground">
-                  Password
+                  {t.password}
                 </span>
                 <input
                   type={show ? 'text' : 'password'}
@@ -82,21 +128,21 @@ export default function PdfUnlock() {
               </label>
               <label className="flex cursor-pointer items-center gap-2 border-2 border-border bg-muted px-3 py-2 text-sm">
                 <input type="checkbox" checked={show} onChange={() => setShow(s => !s)} className="accent-accent" />
-                Show
+                {t.show}
               </label>
             </div>
           ) : (
-            <Alert variant="success">This PDF isn't password-protected — nothing to remove.</Alert>
+            <Alert variant="success">{t.notProtected}</Alert>
           )}
         </>
       )}
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || busy || (needsPassword && !password)}>
-          {busy ? 'Unlocking…' : 'Remove password'}
+          {busy ? t.unlocking : t.removePassword}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setError(''); setPassword(''); setNeedsPassword(false); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
@@ -104,7 +150,7 @@ export default function PdfUnlock() {
 
       {result && (
         <>
-          <Alert variant="success">Password removed — this copy opens without a password.</Alert>
+          <Alert variant="success">{t.removedSuccess}</Alert>
           <PdfPreview source={result} />
           <ResultActions blob={result} filename="unlocked.pdf" disabled={busy} />
         </>
diff --git a/src/islands/pdf/PdfWatermark.tsx b/src/islands/pdf/PdfWatermark.tsx
index a6eadc4..e6c0cc5 100644
--- a/src/islands/pdf/PdfWatermark.tsx
+++ b/src/islands/pdf/PdfWatermark.tsx
@@ -6,17 +6,80 @@ import { ResultActions } from '@/components/ui/ResultActions';
 import { PdfPreview } from '@/components/ui/PdfPreview';
 import { Alert } from '@/components/ui/Alert';
 import { addWatermark, buildWatermarkPreview, type WatermarkLayout } from '@/tools/pdf/pdf.lib';
+import type { Lang } from '@/i18n/config';
 
-const LAYOUTS: { value: WatermarkLayout; label: string }[] = [
-  { value: 'diagonal', label: 'Diagonal' },
-  { value: 'tiled', label: 'Tiled' },
-  { value: 'horizontal', label: 'Horizontal' },
+const TR: Record<Lang, {
+  dropTitle: string;
+  dropSubtitle: string;
+  watermarkText: string;
+  layout: string;
+  size: string;
+  small: string;
+  medium: string;
+  large: string;
+  opacity: string;
+  color: string;
+  livePreview: string;
+  stamping: string;
+  addWatermark: string;
+  clear: string;
+  watermarkFailed: string;
+  diagonal: string;
+  tiled: string;
+  horizontal: string;
+}> = {
+  en: {
+    dropTitle: 'Drop a PDF here or click to browse',
+    dropSubtitle: 'Stamp a text watermark on every page',
+    watermarkText: 'Watermark text',
+    layout: 'Layout',
+    size: 'Size',
+    small: 'Small',
+    medium: 'Medium',
+    large: 'Large',
+    opacity: 'Opacity',
+    color: 'Color',
+    livePreview: 'Live preview',
+    stamping: 'Stamping…',
+    addWatermark: 'Add watermark',
+    clear: 'Clear',
+    watermarkFailed: 'Watermark failed',
+    diagonal: 'Diagonal',
+    tiled: 'Tiled',
+    horizontal: 'Horizontal',
+  },
+  id: {
+    dropTitle: 'Letakkan PDF di sini atau klik untuk memilih',
+    dropSubtitle: 'Bubuhkan watermark teks pada setiap halaman',
+    watermarkText: 'Teks watermark',
+    layout: 'Tata letak',
+    size: 'Ukuran',
+    small: 'Kecil',
+    medium: 'Sedang',
+    large: 'Besar',
+    opacity: 'Opasitas',
+    color: 'Warna',
+    livePreview: 'Pratinjau langsung',
+    stamping: 'Membubuhkan…',
+    addWatermark: 'Tambah watermark',
+    clear: 'Bersihkan',
+    watermarkFailed: 'Gagal menambahkan watermark',
+    diagonal: 'Diagonal',
+    tiled: 'Berjajar',
+    horizontal: 'Horizontal',
+  },
+};
+
+const LAYOUTS: { value: WatermarkLayout; labelKey: 'diagonal' | 'tiled' | 'horizontal' }[] = [
+  { value: 'diagonal', labelKey: 'diagonal' },
+  { value: 'tiled', labelKey: 'tiled' },
+  { value: 'horizontal', labelKey: 'horizontal' },
 ];
 
-const SIZES = [
-  { value: 1 / 20, label: 'Small' },
-  { value: 1 / 14, label: 'Medium' },
-  { value: 1 / 9, label: 'Large' },
+const SIZES: { value: number; labelKey: 'small' | 'medium' | 'large' }[] = [
+  { value: 1 / 20, labelKey: 'small' },
+  { value: 1 / 14, labelKey: 'medium' },
+  { value: 1 / 9, labelKey: 'large' },
 ];
 
 function hexToRgb01(hex: string): { r: number; g: number; b: number } {
@@ -28,7 +91,8 @@ function hexToRgb01(hex: string): { r: number; g: number; b: number } {
   };
 }
 
-export default function PdfWatermark() {
+export default function PdfWatermark({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [file, setFile] = useState<File | null>(null);
   const [text, setText] = useState('CONFIDENTIAL');
   const [layout, setLayout] = useState<WatermarkLayout>('diagonal');
@@ -87,7 +151,7 @@ export default function PdfWatermark() {
         })
       );
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Watermark failed');
+      setError(e instanceof Error ? e.message : t.watermarkFailed);
     } finally {
       setBusy(false);
     }
@@ -97,15 +161,15 @@ export default function PdfWatermark() {
     <div className="space-y-4">
       <Dropzone onDrop={onDrop} accept="application/pdf" multiple={false}>
         <div className="space-y-1">
-          <p className="text-lg font-bold">Drop a PDF here or click to browse</p>
-          <p className="text-sm text-muted-foreground">Stamp a text watermark on every page</p>
+          <p className="text-lg font-bold">{t.dropTitle}</p>
+          <p className="text-sm text-muted-foreground">{t.dropSubtitle}</p>
         </div>
       </Dropzone>
 
       {file && <p className="text-sm font-bold text-foreground">{file.name}</p>}
 
       <TextArea
-        label="Watermark text"
+        label={t.watermarkText}
         value={text}
         onChange={e => setText(e.target.value)}
         placeholder="CONFIDENTIAL"
@@ -114,17 +178,17 @@ export default function PdfWatermark() {
 
       <div className="space-y-1.5">
         <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Layout
+          {t.layout}
         </span>
         <div className="flex flex-wrap gap-2">
-          {LAYOUTS.map(({ value, label }) => (
+          {LAYOUTS.map(({ value, labelKey }) => (
             <Button
               key={value}
               variant={layout === value ? 'primary' : 'secondary'}
               aria-pressed={layout === value}
               onClick={() => setLayout(value)}
             >
-              {label}
+              {t[labelKey]}
             </Button>
           ))}
         </div>
@@ -132,17 +196,17 @@ export default function PdfWatermark() {
 
       <div className="space-y-1.5">
         <span className="text-sm font-bold uppercase tracking-wide text-muted-foreground">
-          Size
+          {t.size}
         </span>
         <div className="flex flex-wrap gap-2">
-          {SIZES.map(({ value, label }) => (
+          {SIZES.map(({ value, labelKey }) => (
             <Button
-              key={label}
+              key={labelKey}
               variant={fontScale === value ? 'primary' : 'secondary'}
               aria-pressed={fontScale === value}
               onClick={() => setFontScale(value)}
             >
-              {label}
+              {t[labelKey]}
             </Button>
           ))}
         </div>
@@ -151,7 +215,7 @@ export default function PdfWatermark() {
       <div className="flex flex-wrap items-end gap-6">
         <label className="flex-1 space-y-1.5">
           <span className="flex justify-between text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            <span>Opacity</span>
+            <span>{t.opacity}</span>
             <span>{opacity}%</span>
           </span>
           <input
@@ -165,7 +229,7 @@ export default function PdfWatermark() {
         </label>
         <label className="space-y-1.5">
           <span className="block text-sm font-bold uppercase tracking-wide text-muted-foreground">
-            Color
+            {t.color}
           </span>
           <input
             type="color"
@@ -176,14 +240,14 @@ export default function PdfWatermark() {
         </label>
       </div>
 
-      {preview && <PdfPreview source={preview} label="Live preview" />}
+      {preview && <PdfPreview source={preview} label={t.livePreview} />}
 
       <div className="flex flex-wrap gap-2">
         <Button onClick={run} disabled={!file || !text.trim() || busy}>
-          {busy ? 'Stamping…' : 'Add watermark'}
+          {busy ? t.stamping : t.addWatermark}
         </Button>
         <Button variant="ghost" onClick={() => { setFile(null); setResult(null); setPreview(null); setError(''); }}>
-          Clear
+          {t.clear}
         </Button>
       </div>
 
diff --git a/src/islands/playground/CodeScratchpad.tsx b/src/islands/playground/CodeScratchpad.tsx
index dcc3022..6effb50 100644
--- a/src/islands/playground/CodeScratchpad.tsx
+++ b/src/islands/playground/CodeScratchpad.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { Plus, X, FolderOpen, Save, Copy, Check } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import MonacoEditor from './MonacoEditor';
@@ -6,6 +6,58 @@ import { extensionToLanguage } from '@/tools/playground/language.lib';
 import { loadFiles, saveFiles, type ScratchFile } from '@/tools/playground/scratchpad.store';
 import { fileService } from '@/services/file';
 import { clipboardService } from '@/services/clipboard';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  fileNamePrompt: string;
+  renamePrompt: string;
+  couldNotOpen: string;
+  copied: string;
+  copy: string;
+  open: string;
+  save: string;
+  loading: string;
+  closeFile: (name: string) => string;
+  newFile: string;
+  helper: ReactNode;
+}> = {
+  en: {
+    fileNamePrompt: 'File name (extension sets the language):',
+    renamePrompt: 'Rename file:',
+    couldNotOpen: 'Could not open file.',
+    copied: 'Copied',
+    copy: 'Copy',
+    open: 'Open',
+    save: 'Save',
+    loading: 'Loading…',
+    closeFile: (name) => `Close ${name}`,
+    newFile: 'New file',
+    helper: (
+      <>
+        Tabs autosave locally. Double-click a tab to rename. Move line <kbd>⌥↑/↓</kbd>, add cursor <kbd>⌘⌥↑/↓</kbd>,
+        select-next <kbd>⌘D</kbd>, all occurrences <kbd>⌘⇧L</kbd>, column select <kbd>⇧⌥</kbd>+drag. On-device only.
+      </>
+    ),
+  },
+  id: {
+    fileNamePrompt: 'Nama file (ekstensi menentukan bahasa):',
+    renamePrompt: 'Ganti nama file:',
+    couldNotOpen: 'Tidak dapat membuka file.',
+    copied: 'Tersalin',
+    copy: 'Salin',
+    open: 'Buka',
+    save: 'Simpan',
+    loading: 'Memuat…',
+    closeFile: (name) => `Tutup ${name}`,
+    newFile: 'File baru',
+    helper: (
+      <>
+        Tab tersimpan otomatis secara lokal. Klik dua kali tab untuk mengganti nama. Pindah baris <kbd>⌥↑/↓</kbd>, tambah kursor <kbd>⌘⌥↑/↓</kbd>,
+        pilih-berikutnya <kbd>⌘D</kbd>, semua kemunculan <kbd>⌘⇧L</kbd>, pilih kolom <kbd>⇧⌥</kbd>+seret. Hanya di perangkat.
+      </>
+    ),
+  },
+};
 
 let counter = 0;
 const newId = () => `f${Date.now()}-${counter++}`;
@@ -14,7 +66,8 @@ function blankFile(): ScratchFile {
   return { id: newId(), name: 'untitled.txt', language: 'plaintext', content: '' };
 }
 
-export default function CodeScratchpad() {
+export default function CodeScratchpad({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [files, setFiles] = useState<ScratchFile[]>([]);
   const [activeId, setActiveId] = useState<string>('');
   const [ready, setReady] = useState(false);
@@ -43,7 +96,7 @@ export default function CodeScratchpad() {
     setFiles((fs) => fs.map((f) => (f.id === activeId ? { ...f, content } : f)));
 
   const addFile = () => {
-    const name = prompt('File name (extension sets the language):', 'untitled.txt');
+    const name = prompt(t.fileNamePrompt, 'untitled.txt');
     if (name === null) return;
     const f: ScratchFile = { id: newId(), name: name || 'untitled.txt', language: extensionToLanguage(name || 'untitled.txt'), content: '' };
     setFiles((fs) => [...fs, f]);
@@ -53,7 +106,7 @@ export default function CodeScratchpad() {
   const renameFile = (id: string) => {
     const current = files.find((f) => f.id === id);
     if (!current) return;
-    const name = prompt('Rename file:', current.name);
+    const name = prompt(t.renamePrompt, current.name);
     if (name === null || !name) return;
     setFiles((fs) => fs.map((f) => (f.id === id ? { ...f, name, language: extensionToLanguage(name) } : f)));
   };
@@ -85,7 +138,7 @@ export default function CodeScratchpad() {
       setActiveId(f.id);
     } catch (e) {
       if ((e as Error).message !== 'No files selected' && (e as Error).name !== 'AbortError') {
-        alert('Could not open file.');
+        alert(t.couldNotOpen);
       }
     }
   };
@@ -113,7 +166,7 @@ export default function CodeScratchpad() {
     }
   };
 
-  if (!ready) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (!ready) return <p className="text-sm text-muted-foreground">{t.loading}</p>;
 
   return (
     <div className="space-y-3">
@@ -126,24 +179,23 @@ export default function CodeScratchpad() {
               className={`flex items-center gap-1 border-2 px-2 py-1 text-sm ${f.id === activeId ? 'border-border bg-accent text-accent-foreground' : 'border-border bg-muted'}`}
             >
               <button onClick={() => setActiveId(f.id)} className="font-bold">{f.name}</button>
-              <button onClick={() => closeFile(f.id)} aria-label={`Close ${f.name}`}><X className="h-3.5 w-3.5" /></button>
+              <button onClick={() => closeFile(f.id)} aria-label={t.closeFile(f.name)}><X className="h-3.5 w-3.5" /></button>
             </div>
           ))}
-          <button onClick={addFile} aria-label="New file" className="border-2 border-border bg-muted p-1 press-brutal"><Plus className="h-4 w-4" /></button>
+          <button onClick={addFile} aria-label={t.newFile} className="border-2 border-border bg-muted p-1 press-brutal"><Plus className="h-4 w-4" /></button>
         </div>
         <div className="ml-auto flex gap-2">
           <Button variant="secondary" onClick={copyActive}>
             {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-            {copied ? 'Copied' : 'Copy'}
+            {copied ? t.copied : t.copy}
           </Button>
-          <Button variant="secondary" onClick={openFromDisk}><FolderOpen className="h-4 w-4" />Open</Button>
-          <Button variant="secondary" onClick={saveActive}><Save className="h-4 w-4" />Save</Button>
+          <Button variant="secondary" onClick={openFromDisk}><FolderOpen className="h-4 w-4" />{t.open}</Button>
+          <Button variant="secondary" onClick={saveActive}><Save className="h-4 w-4" />{t.save}</Button>
         </div>
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Tabs autosave locally. Double-click a tab to rename. Move line <kbd>⌥↑/↓</kbd>, add cursor <kbd>⌘⌥↑/↓</kbd>,
-        select-next <kbd>⌘D</kbd>, all occurrences <kbd>⌘⇧L</kbd>, column select <kbd>⇧⌥</kbd>+drag. On-device only.
+        {t.helper}
       </p>
 
       {active && (
diff --git a/src/islands/playground/SqlitePlayground.tsx b/src/islands/playground/SqlitePlayground.tsx
index 9575d7e..6308527 100644
--- a/src/islands/playground/SqlitePlayground.tsx
+++ b/src/islands/playground/SqlitePlayground.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Play, Database, Download, Upload, FlaskConical, RotateCcw, Table2 } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Alert } from '@/components/ui/Alert';
@@ -9,11 +9,109 @@ import { clipboardService } from '@/services/clipboard';
 import type { Remote } from 'comlink';
 import type * as Monaco from 'monaco-editor';
 import type { QueryResult, SchemaObject, SqliteApi } from '@/tools/playground/sqlite.worker';
+import type { Lang } from '@/i18n/config';
+
+const TR: Record<Lang, {
+  opfsWarning: ReactNode;
+  run: string;
+  loadSample: string;
+  openSqlite: string;
+  exportSqlite: string;
+  reset: string;
+  schema: string;
+  noObjects: string;
+  browseRows: string;
+  insertDdl: string;
+  result: (n: number) => string;
+  showingFirst: (n: number) => string;
+  exportCsv: string;
+  exportJson: string;
+  ok: string;
+  ms: string;
+  schemaChanges: (n: number) => string;
+  rowsAffected: (n: number) => string;
+  rows: (n: number) => string;
+  queryFailed: string;
+  tableFirstRows: (name: string, n: number) => string;
+  couldNotReadTable: string;
+  runSql: string;
+  imported: (name: string) => string;
+  couldNotImport: string;
+  sampleLoaded: string;
+  dropConfirm: string;
+  dbReset: string;
+}> = {
+  en: {
+    opfsWarning: (
+      <>Your browser can&apos;t persist this database (no OPFS). It lives in memory — <b>export to keep your data</b>.</>
+    ),
+    run: 'Run (⌘⏎)',
+    loadSample: 'Load sample',
+    openSqlite: 'Open .sqlite',
+    exportSqlite: 'Export .sqlite',
+    reset: 'Reset',
+    schema: 'Schema',
+    noObjects: 'No objects yet. Run a CREATE, or load the sample.',
+    browseRows: 'Browse rows',
+    insertDdl: 'Insert DDL into editor',
+    result: (n) => `Result ${n}`,
+    showingFirst: (n) => `Showing first 1000 of ${n} rows.`,
+    exportCsv: 'Export CSV',
+    exportJson: 'Export JSON',
+    ok: 'ok',
+    ms: 'ms',
+    schemaChanges: (n) => `${n} schema change(s)`,
+    rowsAffected: (n) => `${n} row(s) affected`,
+    rows: (n) => `${n} row(s)`,
+    queryFailed: 'Query failed.',
+    tableFirstRows: (name, n) => `${name}: first ${n} row(s)`,
+    couldNotReadTable: 'Could not read table.',
+    runSql: 'Run SQL',
+    imported: (name) => `Imported ${name}`,
+    couldNotImport: 'Could not import database.',
+    sampleLoaded: 'Sample database loaded.',
+    dropConfirm: 'Drop all tables in the playground database?',
+    dbReset: 'Database reset.',
+  },
+  id: {
+    opfsWarning: (
+      <>Browser Anda tidak dapat menyimpan basis data ini secara permanen (tanpa OPFS). Basis data berada di memori — <b>ekspor untuk menyimpan data Anda</b>.</>
+    ),
+    run: 'Jalankan (⌘⏎)',
+    loadSample: 'Muat contoh',
+    openSqlite: 'Buka .sqlite',
+    exportSqlite: 'Ekspor .sqlite',
+    reset: 'Reset',
+    schema: 'Skema',
+    noObjects: 'Belum ada objek. Jalankan CREATE, atau muat contoh.',
+    browseRows: 'Jelajahi baris',
+    insertDdl: 'Sisipkan DDL ke editor',
+    result: (n) => `Hasil ${n}`,
+    showingFirst: (n) => `Menampilkan 1000 baris pertama dari ${n} baris.`,
+    exportCsv: 'Ekspor CSV',
+    exportJson: 'Ekspor JSON',
+    ok: 'ok',
+    ms: 'ms',
+    schemaChanges: (n) => `${n} perubahan skema`,
+    rowsAffected: (n) => `${n} baris terpengaruh`,
+    rows: (n) => `${n} baris`,
+    queryFailed: 'Kueri gagal.',
+    tableFirstRows: (name, n) => `${name}: ${n} baris pertama`,
+    couldNotReadTable: 'Tidak dapat membaca tabel.',
+    runSql: 'Jalankan SQL',
+    imported: (name) => `Berhasil mengimpor ${name}`,
+    couldNotImport: 'Tidak dapat mengimpor basis data.',
+    sampleLoaded: 'Basis data contoh dimuat.',
+    dropConfirm: 'Hapus semua tabel di basis data playground?',
+    dbReset: 'Basis data direset.',
+  },
+};
 
 const STARTER = 'SELECT name FROM sqlite_master;\n';
 const SQL_KEY = 'gwt-sqlite-playground-sql';
 
-export default function SqlitePlayground() {
+export default function SqlitePlayground({ lang = 'en' }: { lang?: Lang }) {
+  const t = TR[lang] ?? TR.en;
   const [sql, setSql] = useState(STARTER);
   const [schema, setSchema] = useState<SchemaObject[]>([]);
   const [grids, setGrids] = useState<QueryResult[]>([]);
@@ -73,16 +171,16 @@ export default function SqlitePlayground() {
         const ddl = noRows.filter((r) => r.kind === 'ddl').length;
         const affected = noRows.filter((r) => r.kind === 'dml').reduce((s, r) => s + r.rowsAffected, 0);
         const parts: string[] = [];
-        if (ddl) parts.push(`${ddl} schema change(s)`);
-        if (noRows.some((r) => r.kind === 'dml')) parts.push(`${affected} row(s) affected`);
-        setMessage(`${parts.join(' · ') || 'ok'} · ${totalMs} ms`);
+        if (ddl) parts.push(t.schemaChanges(ddl));
+        if (noRows.some((r) => r.kind === 'dml')) parts.push(t.rowsAffected(affected));
+        setMessage(`${parts.join(' · ') || t.ok} · ${totalMs} ${t.ms}`);
       } else if (withRows.length) {
-        setMessage(`${withRows[0].rows.length} row(s) · ${totalMs} ms`);
+        setMessage(`${t.rows(withRows[0].rows.length)} · ${totalMs} ${t.ms}`);
       }
       if (res.error) setError(res.error);
       await refreshSchema();
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Query failed.');
+      setError(e instanceof Error ? e.message : t.queryFailed);
     } finally {
       setBusy(false);
     }
@@ -93,9 +191,9 @@ export default function SqlitePlayground() {
     try {
       const r = await (await db()).tableRows(name, 200, 0);
       setGrids([r]); setActiveGrid(0);
-      setMessage(`${name}: first ${r.rows.length} row(s)`);
+      setMessage(t.tableFirstRows(name, r.rows.length));
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not read table.');
+      setError(e instanceof Error ? e.message : t.couldNotReadTable);
     } finally {
       setBusy(false);
     }
@@ -106,7 +204,7 @@ export default function SqlitePlayground() {
     // Cmd/Ctrl+Enter runs the script (or selection). 2048 = KeyMod.CtrlCmd, 3 = KeyCode.Enter.
     editor.addAction({
       id: 'gwt-run-sql',
-      label: 'Run SQL',
+      label: t.runSql,
       keybindings: [2048 | 3],
       run: () => { void run(); },
     });
@@ -128,10 +226,10 @@ export default function SqlitePlayground() {
       try {
         await (await db()).importDb(new Uint8Array(await file.arrayBuffer()));
         await refreshSchema();
-        setMessage(`Imported ${file.name}`);
+        setMessage(t.imported(file.name));
         setGrids([]);
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not import database.');
+        setError(e instanceof Error ? e.message : t.couldNotImport);
       } finally {
         setBusy(false);
       }
@@ -144,16 +242,16 @@ export default function SqlitePlayground() {
     await (await db()).loadSample();
     await refreshSchema();
     setSql('SELECT a.name AS artist, al.title, al.year\nFROM albums al JOIN artists a ON a.id = al.artist_id\nORDER BY al.year;\n');
-    setMessage('Sample database loaded.');
+    setMessage(t.sampleLoaded);
     setBusy(false);
   };
 
   const resetDb = async () => {
-    if (!confirm('Drop all tables in the playground database?')) return;
+    if (!confirm(t.dropConfirm)) return;
     setBusy(true);
     await (await db()).reset();
     await refreshSchema();
-    setGrids([]); setMessage('Database reset.');
+    setGrids([]); setMessage(t.dbReset);
     setBusy(false);
   };
 
@@ -163,31 +261,31 @@ export default function SqlitePlayground() {
     <div className="space-y-3">
       {!persisted && (
         <div className="border-2 border-border bg-yellow-300 p-3 text-sm text-black shadow-brutal-sm">
-          Your browser can&apos;t persist this database (no OPFS). It lives in memory — <b>export to keep your data</b>.
+          {t.opfsWarning}
         </div>
       )}
 
       <div className="flex flex-wrap gap-2">
-        <Button onClick={() => run()} disabled={busy}><Play className="h-4 w-4" />Run (⌘⏎)</Button>
-        <Button variant="secondary" onClick={loadSample} disabled={busy}><FlaskConical className="h-4 w-4" />Load sample</Button>
-        <Button variant="secondary" onClick={importDb} disabled={busy}><Upload className="h-4 w-4" />Open .sqlite</Button>
-        <Button variant="secondary" onClick={exportDb} disabled={busy}><Download className="h-4 w-4" />Export .sqlite</Button>
-        <Button variant="ghost" onClick={resetDb} disabled={busy}><RotateCcw className="h-4 w-4" />Reset</Button>
+        <Button onClick={() => run()} disabled={busy}><Play className="h-4 w-4" />{t.run}</Button>
+        <Button variant="secondary" onClick={loadSample} disabled={busy}><FlaskConical className="h-4 w-4" />{t.loadSample}</Button>
+        <Button variant="secondary" onClick={importDb} disabled={busy}><Upload className="h-4 w-4" />{t.openSqlite}</Button>
+        <Button variant="secondary" onClick={exportDb} disabled={busy}><Download className="h-4 w-4" />{t.exportSqlite}</Button>
+        <Button variant="ghost" onClick={resetDb} disabled={busy}><RotateCcw className="h-4 w-4" />{t.reset}</Button>
       </div>
 
       <div className="grid gap-3 md:grid-cols-[220px_1fr]">
         {/* Schema explorer */}
         <aside className="max-h-[70vh] overflow-auto border-2 border-border bg-muted p-2 text-sm">
           <p className="mb-1 flex items-center gap-1 font-bold uppercase tracking-wide text-muted-foreground">
-            <Database className="h-4 w-4" /> Schema
+            <Database className="h-4 w-4" /> {t.schema}
           </p>
-          {schema.length === 0 && <p className="text-xs text-muted-foreground">No objects yet. Run a CREATE, or load the sample.</p>}
+          {schema.length === 0 && <p className="text-xs text-muted-foreground">{t.noObjects}</p>}
           {schema.map((o) => (
             <div key={`${o.type}-${o.name}`} className="mb-1">
               <button
                 onClick={() => (o.type === 'table' || o.type === 'view') ? browseTable(o.name) : setSql((s) => `${o.sql};\n${s}`)}
                 className="flex w-full items-center gap-1 text-left font-bold hover:text-accent"
-                title={o.type === 'table' || o.type === 'view' ? 'Browse rows' : 'Insert DDL into editor'}
+                title={o.type === 'table' || o.type === 'view' ? t.browseRows : t.insertDdl}
               >
                 <Table2 className="h-3.5 w-3.5" />{o.name}
                 <span className="ml-auto text-[10px] uppercase text-muted-foreground">{o.type}</span>
@@ -215,7 +313,7 @@ export default function SqlitePlayground() {
               {grids.map((_, i) => (
                 <button key={i} onClick={() => setActiveGrid(i)}
                   className={`border-2 border-border px-2 py-0.5 text-xs font-bold ${i === activeGrid ? 'bg-accent text-accent-foreground' : 'bg-muted'}`}>
-                  Result {i + 1}
+                  {t.result(i + 1)}
                 </button>
               ))}
             </div>
@@ -243,10 +341,10 @@ export default function SqlitePlayground() {
                 </table>
               </div>
               <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                {grid.rows.length > 1000 && <span>Showing first 1000 of {grid.rows.length} rows.</span>}
+                {grid.rows.length > 1000 && <span>{t.showingFirst(grid.rows.length)}</span>}
                 <div className="ml-auto flex gap-2">
-                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toCsv(grid)], { type: 'text/csv' }), 'result.csv')}>Export CSV</Button>
-                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toJson(grid)], { type: 'application/json' }), 'result.json')}>Export JSON</Button>
+                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toCsv(grid)], { type: 'text/csv' }), 'result.csv')}>{t.exportCsv}</Button>
+                  <Button variant="secondary" onClick={() => downloadService.download(new Blob([toJson(grid)], { type: 'application/json' }), 'result.json')}>{t.exportJson}</Button>
                 </div>
               </div>
             </div>