diff --git a/apps/image/package.json b/apps/image/package.json
index 39b39e3f..9cf2ca44 100644
--- a/apps/image/package.json
+++ b/apps/image/package.json
@@ -29,9 +29,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
+    "i18next": "^26.0.6",
     "lucide-react": "^0.555.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.4",
     "tailwind-merge": "^3.4.0",
     "uuid": "^13.0.0",
     "zustand": "^4.5.2"
diff --git a/apps/image/src/components/editor/SettingsDialog.tsx b/apps/image/src/components/editor/SettingsDialog.tsx
index e60e64b2..ac2ade10 100644
--- a/apps/image/src/components/editor/SettingsDialog.tsx
+++ b/apps/image/src/components/editor/SettingsDialog.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { X, Settings, Grid3X3, MousePointer, Save, Palette, Monitor } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { useUIStore } from '../../stores/ui-store';
 import { Slider } from '@openreel/ui';
 
@@ -12,6 +13,7 @@ type SettingsTab = 'canvas' | 'snapping' | 'appearance';
 
 export function SettingsDialog({ isOpen, onClose }: Props) {
   const [activeTab, setActiveTab] = useState<SettingsTab>('canvas');
+  const { t } = useTranslation();
 
   const {
     showGrid,
@@ -32,10 +34,10 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
 
   if (!isOpen) return null;
 
-  const tabs: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
-    { id: 'canvas', label: 'Canvas', icon: <Grid3X3 size={16} /> },
-    { id: 'snapping', label: 'Snapping', icon: <MousePointer size={16} /> },
-    { id: 'appearance', label: 'Appearance', icon: <Palette size={16} /> },
+  const tabs: { id: SettingsTab; label: string; icon: ReactNode }[] = [
+    { id: 'canvas', label: t('settings:tabs.canvas'), icon: <Grid3X3 size={16} /> },
+    { id: 'snapping', label: t('settings:tabs.snapping'), icon: <MousePointer size={16} /> },
+    { id: 'appearance', label: t('settings:tabs.appearance'), icon: <Palette size={16} /> },
   ];
 
   return (
@@ -45,7 +47,7 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
         <div className="flex items-center justify-between px-6 py-4 border-b border-border">
           <div className="flex items-center gap-3">
             <Settings size={20} className="text-primary" />
-            <h2 className="text-lg font-semibold">Settings</h2>
+            <h2 className="text-lg font-semibold">{t('settings:dialog.title')}</h2>
           </div>
           <button
             onClick={onClose}
@@ -76,33 +78,33 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
           <div className="flex-1 p-6 min-h-[300px]">
             {activeTab === 'canvas' && (
               <div className="space-y-6">
-                <h3 className="text-sm font-medium text-foreground mb-4">Canvas Options</h3>
+                <h3 className="text-sm font-medium text-foreground mb-4">{t('settings:canvas.title')}</h3>
 
                 <div className="space-y-4">
                   <ToggleOption
-                    label="Show Grid"
-                    description="Display grid overlay on canvas"
+                    label={t('settings:canvas.showGrid')}
+                    description={t('settings:canvas.showGridDescription')}
                     checked={showGrid}
                     onChange={toggleGrid}
                   />
 
                   <ToggleOption
-                    label="Show Guides"
-                    description="Display alignment guides"
+                    label={t('settings:canvas.showGuides')}
+                    description={t('settings:canvas.showGuidesDescription')}
                     checked={showGuides}
                     onChange={toggleGuides}
                   />
 
                   <ToggleOption
-                    label="Show Rulers"
-                    description="Display rulers on edges"
+                    label={t('settings:canvas.showRulers')}
+                    description={t('settings:canvas.showRulersDescription')}
                     checked={showRulers}
                     onChange={toggleRulers}
                   />
 
                   <div className="pt-2">
                     <div className="flex items-center justify-between mb-2">
-                      <label className="text-sm text-foreground">Grid Size</label>
+                      <label className="text-sm text-foreground">{t('settings:canvas.gridSize')}</label>
                       <span className="text-sm text-muted-foreground">{gridSize}px</span>
                     </div>
                     <Slider
@@ -119,26 +121,26 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
 
             {activeTab === 'snapping' && (
               <div className="space-y-6">
-                <h3 className="text-sm font-medium text-foreground mb-4">Snap Options</h3>
+                <h3 className="text-sm font-medium text-foreground mb-4">{t('settings:snapping.title')}</h3>
 
                 <div className="space-y-4">
                   <ToggleOption
-                    label="Snap to Grid"
-                    description="Snap objects to grid intersections"
+                    label={t('settings:snapping.snapToGrid')}
+                    description={t('settings:snapping.snapToGridDescription')}
                     checked={snapToGrid}
                     onChange={toggleSnapToGrid}
                   />
 
                   <ToggleOption
-                    label="Snap to Guides"
-                    description="Snap objects to guide lines"
+                    label={t('settings:snapping.snapToGuides')}
+                    description={t('settings:snapping.snapToGuidesDescription')}
                     checked={snapToGuides}
                     onChange={toggleSnapToGuides}
                   />
 
                   <ToggleOption
-                    label="Snap to Objects"
-                    description="Snap objects to other objects"
+                    label={t('settings:snapping.snapToObjects')}
+                    description={t('settings:snapping.snapToObjectsDescription')}
                     checked={snapToObjects}
                     onChange={toggleSnapToObjects}
                   />
@@ -148,19 +150,19 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
 
             {activeTab === 'appearance' && (
               <div className="space-y-6">
-                <h3 className="text-sm font-medium text-foreground mb-4">Appearance</h3>
+                <h3 className="text-sm font-medium text-foreground mb-4">{t('settings:appearance.title')}</h3>
 
                 <div className="space-y-4">
                   <div className="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
                     <div className="flex items-center gap-3">
                       <Monitor size={18} className="text-muted-foreground" />
                       <div>
-                        <p className="text-sm font-medium">Theme</p>
-                        <p className="text-xs text-muted-foreground">Interface appearance</p>
+                        <p className="text-sm font-medium">{t('settings:appearance.theme')}</p>
+                        <p className="text-xs text-muted-foreground">{t('settings:appearance.themeDescription')}</p>
                       </div>
                     </div>
                     <div className="px-3 py-1.5 text-xs bg-primary/20 text-primary rounded-md">
-                      Dark (System)
+                      {t('settings:appearance.themeValue')}
                     </div>
                   </div>
 
@@ -168,12 +170,12 @@ export function SettingsDialog({ isOpen, onClose }: Props) {
                     <div className="flex items-center gap-3 mb-3">
                       <Save size={18} className="text-muted-foreground" />
                       <div>
-                        <p className="text-sm font-medium">Auto Save</p>
-                        <p className="text-xs text-muted-foreground">Automatically save projects</p>
+                        <p className="text-sm font-medium">{t('settings:appearance.autoSave')}</p>
+                        <p className="text-xs text-muted-foreground">{t('settings:appearance.autoSaveDescription')}</p>
                       </div>
                     </div>
                     <p className="text-xs text-muted-foreground">
-                      Projects are automatically saved to browser storage every 30 seconds.
+                      {t('settings:appearance.autoSaveSummary')}
                     </p>
                   </div>
                 </div>
diff --git a/apps/image/src/components/editor/inspector/TransformSection.tsx b/apps/image/src/components/editor/inspector/TransformSection.tsx
index 9210a540..b87b0b4d 100644
--- a/apps/image/src/components/editor/inspector/TransformSection.tsx
+++ b/apps/image/src/components/editor/inspector/TransformSection.tsx
@@ -1,4 +1,5 @@
 import { FlipHorizontal2, FlipVertical2, RotateCw, RotateCcw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { useProjectStore } from '../../../stores/project-store';
 import type { Layer } from '../../../types/project';
 
@@ -7,6 +8,7 @@ interface Props {
 }
 
 export function TransformSection({ layer }: Props) {
+  const { t } = useTranslation();
   const { updateLayer, updateLayerTransform } = useProjectStore();
 
   const { x, y, width, height, rotation, skewX, skewY, opacity } = layer.transform;
@@ -34,12 +36,12 @@ export function TransformSection({ layer }: Props) {
   return (
     <div className="space-y-3">
       <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-        Transform
+        {t('inspector:transform.title')}
       </h4>
 
       <div className="grid grid-cols-2 gap-2">
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">X</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.x')}</label>
           <input
             type="number"
             value={Math.round(x)}
@@ -48,7 +50,7 @@ export function TransformSection({ layer }: Props) {
           />
         </div>
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Y</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.y')}</label>
           <input
             type="number"
             value={Math.round(y)}
@@ -60,7 +62,7 @@ export function TransformSection({ layer }: Props) {
 
       <div className="grid grid-cols-2 gap-2">
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Width</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.width')}</label>
           <input
             type="number"
             value={Math.round(width)}
@@ -70,7 +72,7 @@ export function TransformSection({ layer }: Props) {
           />
         </div>
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Height</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.height')}</label>
           <input
             type="number"
             value={Math.round(height)}
@@ -83,7 +85,7 @@ export function TransformSection({ layer }: Props) {
 
       <div className="grid grid-cols-2 gap-2">
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Rotation</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.rotation')}</label>
           <div className="flex items-center gap-1">
             <input
               type="number"
@@ -91,11 +93,11 @@ export function TransformSection({ layer }: Props) {
               onChange={(e) => handleChange('rotation', Number(e.target.value))}
               className="flex-1 px-2 py-1.5 text-xs bg-background border border-input rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
             />
-            <span className="text-xs text-muted-foreground">°</span>
+            <span className="text-xs text-muted-foreground">deg</span>
           </div>
         </div>
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Opacity</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.opacity')}</label>
           <div className="flex items-center gap-1">
             <input
               type="number"
@@ -112,7 +114,7 @@ export function TransformSection({ layer }: Props) {
 
       <div className="grid grid-cols-2 gap-2">
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Skew X</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.skewX')}</label>
           <div className="flex items-center gap-1">
             <input
               type="number"
@@ -126,7 +128,7 @@ export function TransformSection({ layer }: Props) {
           </div>
         </div>
         <div>
-          <label className="block text-[10px] text-muted-foreground mb-1">Skew Y</label>
+          <label className="block text-[10px] text-muted-foreground mb-1">{t('inspector:transform.skewY')}</label>
           <div className="flex items-center gap-1">
             <input
               type="number"
@@ -149,7 +151,7 @@ export function TransformSection({ layer }: Props) {
               ? 'bg-primary/20 border-primary text-primary'
               : 'bg-secondary/50 border-border text-muted-foreground hover:text-foreground hover:bg-secondary'
           }`}
-          title="Flip Horizontal"
+          title={t('inspector:transform.flipHorizontal')}
         >
           <FlipHorizontal2 size={14} />
         </button>
@@ -161,7 +163,7 @@ export function TransformSection({ layer }: Props) {
               ? 'bg-primary/20 border-primary text-primary'
               : 'bg-secondary/50 border-border text-muted-foreground hover:text-foreground hover:bg-secondary'
           }`}
-          title="Flip Vertical"
+          title={t('inspector:transform.flipVertical')}
         >
           <FlipVertical2 size={14} />
         </button>
@@ -169,7 +171,7 @@ export function TransformSection({ layer }: Props) {
         <button
           onClick={() => handleRotate(-90)}
           className="flex items-center justify-center gap-1 p-2 rounded-md bg-secondary/50 border border-border text-muted-foreground hover:text-foreground hover:bg-secondary transition-all"
-          title="Rotate 90° Counter-clockwise"
+          title={t('inspector:transform.rotateCounterClockwise')}
         >
           <RotateCcw size={14} />
         </button>
@@ -177,7 +179,7 @@ export function TransformSection({ layer }: Props) {
         <button
           onClick={() => handleRotate(90)}
           className="flex items-center justify-center gap-1 p-2 rounded-md bg-secondary/50 border border-border text-muted-foreground hover:text-foreground hover:bg-secondary transition-all"
-          title="Rotate 90° Clockwise"
+          title={t('inspector:transform.rotateClockwise')}
         >
           <RotateCw size={14} />
         </button>
diff --git a/apps/image/src/i18n.ts b/apps/image/src/i18n.ts
new file mode 100644
index 00000000..9524ec04
--- /dev/null
+++ b/apps/image/src/i18n.ts
@@ -0,0 +1,30 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import common from "./locales/en/common.json";
+import editor from "./locales/en/editor.json";
+import inspector from "./locales/en/inspector.json";
+import settings from "./locales/en/settings.json";
+
+const resources = {
+  en: {
+    common,
+    editor,
+    inspector,
+    settings,
+  },
+} as const;
+
+if (!i18n.isInitialized) {
+  void i18n.use(initReactI18next).init({
+    resources,
+    lng: "en",
+    fallbackLng: "en",
+    ns: ["common", "editor", "inspector", "settings"],
+    defaultNS: "common",
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+}
+
+export default i18n;
diff --git a/apps/image/src/locales/en/common.json b/apps/image/src/locales/en/common.json
new file mode 100644
index 00000000..63f86978
--- /dev/null
+++ b/apps/image/src/locales/en/common.json
@@ -0,0 +1,5 @@
+{
+  "buttons": {
+    "close": "Close"
+  }
+}
diff --git a/apps/image/src/locales/en/editor.json b/apps/image/src/locales/en/editor.json
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/apps/image/src/locales/en/editor.json
@@ -0,0 +1 @@
+{}
diff --git a/apps/image/src/locales/en/inspector.json b/apps/image/src/locales/en/inspector.json
new file mode 100644
index 00000000..fbff6ecd
--- /dev/null
+++ b/apps/image/src/locales/en/inspector.json
@@ -0,0 +1,17 @@
+{
+  "transform": {
+    "title": "Transform",
+    "x": "X",
+    "y": "Y",
+    "width": "Width",
+    "height": "Height",
+    "rotation": "Rotation",
+    "opacity": "Opacity",
+    "skewX": "Skew X",
+    "skewY": "Skew Y",
+    "flipHorizontal": "Flip Horizontal",
+    "flipVertical": "Flip Vertical",
+    "rotateCounterClockwise": "Rotate 90 degrees Counter-clockwise",
+    "rotateClockwise": "Rotate 90 degrees Clockwise"
+  }
+}
diff --git a/apps/image/src/locales/en/settings.json b/apps/image/src/locales/en/settings.json
new file mode 100644
index 00000000..235e1f70
--- /dev/null
+++ b/apps/image/src/locales/en/settings.json
@@ -0,0 +1,38 @@
+{
+  "dialog": {
+    "title": "Settings"
+  },
+  "tabs": {
+    "canvas": "Canvas",
+    "snapping": "Snapping",
+    "appearance": "Appearance"
+  },
+  "canvas": {
+    "title": "Canvas Options",
+    "showGrid": "Show Grid",
+    "showGridDescription": "Display grid overlay on canvas",
+    "showGuides": "Show Guides",
+    "showGuidesDescription": "Display alignment guides",
+    "showRulers": "Show Rulers",
+    "showRulersDescription": "Display rulers on edges",
+    "gridSize": "Grid Size"
+  },
+  "snapping": {
+    "title": "Snap Options",
+    "snapToGrid": "Snap to Grid",
+    "snapToGridDescription": "Snap objects to grid intersections",
+    "snapToGuides": "Snap to Guides",
+    "snapToGuidesDescription": "Snap objects to guide lines",
+    "snapToObjects": "Snap to Objects",
+    "snapToObjectsDescription": "Snap objects to other objects"
+  },
+  "appearance": {
+    "title": "Appearance",
+    "theme": "Theme",
+    "themeDescription": "Interface appearance",
+    "themeValue": "Dark (System)",
+    "autoSave": "Auto Save",
+    "autoSaveDescription": "Automatically save projects",
+    "autoSaveSummary": "Projects are automatically saved to browser storage every 30 seconds."
+  }
+}
diff --git a/apps/image/src/main.tsx b/apps/image/src/main.tsx
index 2339d59c..f8d90260 100644
--- a/apps/image/src/main.tsx
+++ b/apps/image/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './i18n';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/apps/web/package.json b/apps/web/package.json
index 81bd4da7..2090b3fb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -33,10 +33,12 @@
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "gsap": "^3.14.2",
+    "i18next": "^26.0.6",
     "lucide-react": "^0.555.0",
     "posthog-js": "^1.335.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.4",
     "react-syntax-highlighter": "^16.1.0",
     "tailwind-merge": "^3.4.0",
     "three": "^0.182.0",
diff --git a/apps/web/src/components/editor/ExportDialog.tsx b/apps/web/src/components/editor/ExportDialog.tsx
index 026f8b93..ae2de90d 100644
--- a/apps/web/src/components/editor/ExportDialog.tsx
+++ b/apps/web/src/components/editor/ExportDialog.tsx
@@ -38,6 +38,7 @@ import {
   SelectContent,
   SelectItem,
 } from "@openreel/ui";
+import { useTranslation } from "react-i18next";
 import {
   exportPresetsManager,
   type PlatformExportPreset,
@@ -92,14 +93,17 @@ function getRecommendedPresetsForAspectRatio(
   });
 }
 
-function getAspectRatioLabel(aspectType: AspectRatioType): string {
+function getAspectRatioLabel(
+  aspectType: AspectRatioType,
+  t: (key: string) => string,
+): string {
   switch (aspectType) {
     case "vertical":
-      return "Vertical (TikTok, Reels, Shorts)";
+      return t("editor:exportDialog.aspectRatioLabels.vertical");
     case "square":
-      return "Square (Instagram Feed)";
+      return t("editor:exportDialog.aspectRatioLabels.square");
     case "horizontal":
-      return "Horizontal (YouTube, Twitter)";
+      return t("editor:exportDialog.aspectRatioLabels.horizontal");
   }
 }
 
@@ -125,6 +129,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
   projectWidth = 1920,
   projectHeight = 1080,
 }) => {
+  const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<"presets" | "custom">("presets");
   const [selectedPlatform, setSelectedPlatform] = useState<string | null>(
     "recommended",
@@ -278,7 +283,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
           <div className="flex items-center gap-3">
             <Download size={20} className="text-primary" />
             <DialogTitle className="text-lg font-bold text-text-primary">
-              Export Video
+              {t("editor:exportDialog.title")}
             </DialogTitle>
           </div>
         </DialogHeader>
@@ -294,14 +299,14 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
               className="flex-1 flex items-center justify-center gap-2 p-3 text-sm font-medium rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary text-text-secondary hover:text-text-primary"
             >
               <Star size={16} />
-              Presets
+              {t("editor:exportDialog.tabs.presets")}
             </TabsTrigger>
             <TabsTrigger
               value="custom"
               className="flex-1 flex items-center justify-center gap-2 p-3 text-sm font-medium rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary text-text-secondary hover:text-text-primary"
             >
               <Settings size={16} />
-              Custom
+              {t("editor:exportDialog.tabs.custom")}
             </TabsTrigger>
           </TabsList>
 
@@ -317,10 +322,10 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                 >
                   <div className="flex items-center gap-2">
                     <Zap size={14} />
-                    <span className="font-medium">For Your Video</span>
+                    <span className="font-medium">{t("editor:exportDialog.recommendedForYourVideo")}</span>
                   </div>
                   <span className="text-[10px] text-text-muted mt-0.5 ml-5">
-                    {getAspectRatioLabel(aspectType)}
+                    {getAspectRatioLabel(aspectType, t)}
                   </span>
                 </button>
                 <div className="h-px bg-border my-1" />
@@ -385,7 +390,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                       {preset.maxDuration && (
                         <div className="flex items-center gap-1 mt-1 text-[10px] text-yellow-500">
                           <Clock size={10} />
-                          Max {preset.maxDuration}s
+                          {t("editor:exportDialog.status.maxDuration", { seconds: preset.maxDuration })}
                         </div>
                       )}
                     </button>
@@ -398,7 +403,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <label className="block text-xs font-medium text-text-secondary mb-2">
-                    Format
+                    {t("editor:exportDialog.fields.format")}
                   </label>
                   <Select
                     value={customSettings.format}
@@ -422,7 +427,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                 <div>
                   <label className="block text-xs font-medium text-text-secondary mb-2">
-                    Codec
+                    {t("editor:exportDialog.fields.codec")}
                   </label>
                   <Select
                     value={customSettings.codec}
@@ -448,7 +453,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                 <div>
                   <label className="block text-xs font-medium text-text-secondary mb-2">
-                    Resolution
+                    {t("editor:exportDialog.fields.resolution")}
                   </label>
                   <Select
                     value={`${customSettings.width}x${customSettings.height}`}
@@ -470,15 +475,15 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                       <SelectItem value="1920x1080">1080p (1920x1080)</SelectItem>
                       <SelectItem value="1280x720">720p (1280x720)</SelectItem>
                       <SelectItem value="854x480">480p (854x480)</SelectItem>
-                      <SelectItem value="1080x1920">Vertical 1080p</SelectItem>
-                      <SelectItem value="1080x1080">Square 1080</SelectItem>
+                      <SelectItem value="1080x1920">{t("editor:exportDialog.options.vertical1080p")}</SelectItem>
+                      <SelectItem value="1080x1080">{t("editor:exportDialog.options.square1080")}</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
 
                 <div>
                   <label className="block text-xs font-medium text-text-secondary mb-2">
-                    Frame Rate
+                    {t("editor:exportDialog.fields.frameRate")}
                   </label>
                   <Select
                     value={String(customSettings.frameRate)}
@@ -504,7 +509,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                 <div>
                   <Label className="block text-xs font-medium text-text-secondary mb-2">
-                    Bitrate (kbps)
+                    {t("editor:exportDialog.fields.bitrate")}
                   </Label>
                   <Input
                     type="number"
@@ -524,7 +529,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                 <div>
                   <Label className="block text-xs font-medium text-text-secondary mb-2">
-                    Quality
+                    {t("editor:exportDialog.fields.quality")}
                   </Label>
                   <Slider
                     value={[customSettings.quality]}
@@ -540,15 +545,15 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                     className="w-full"
                   />
                   <div className="flex justify-between text-[10px] text-text-muted mt-1">
-                    <span>Smaller</span>
+                    <span>{t("editor:exportDialog.qualityScale.smaller")}</span>
                     <span>{customSettings.quality}%</span>
-                    <span>Better</span>
+                    <span>{t("editor:exportDialog.qualityScale.better")}</span>
                   </div>
                 </div>
 
                 <div className="col-span-2">
                   <label className="block text-xs font-medium text-text-secondary mb-2">
-                    Audio Settings
+                    {t("editor:exportDialog.fields.audioSettings")}
                   </label>
                   <div className="grid grid-cols-3 gap-2">
                     <Select
@@ -631,7 +636,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                     <div className="flex items-center gap-2">
                       <Zap size={14} className="text-primary" />
                       <Label htmlFor="upscaling-switch" className="text-xs font-medium text-text-secondary">
-                        Enhance Quality (Upscaling)
+                        {t("editor:exportDialog.fields.qualityEnhancement")}
                       </Label>
                     </div>
                     <Switch
@@ -653,7 +658,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                     <div className="space-y-3 pl-6">
                       <div>
                         <label className="block text-[10px] text-text-muted mb-1.5">
-                          Quality Mode
+                          {t("editor:exportDialog.fields.qualityMode")}
                         </label>
                         <div className="flex gap-2">
                           {(["fast", "balanced", "quality"] as const).map(
@@ -676,7 +681,11 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                                     : "border-border text-text-secondary hover:border-primary/50"
                                 }`}
                               >
-                                {mode.charAt(0).toUpperCase() + mode.slice(1)}
+                                {mode === "fast"
+                                  ? t("editor:exportDialog.options.fast")
+                                  : mode === "balanced"
+                                    ? t("editor:exportDialog.options.balanced")
+                                    : t("editor:exportDialog.fields.quality")}
                               </button>
                             ),
                           )}
@@ -685,7 +694,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                       <div>
                         <Label className="block text-[10px] text-text-muted mb-1.5">
-                          Sharpening
+                          {t("editor:exportDialog.fields.sharpening")}
                         </Label>
                         <Slider
                           value={[Math.round((customSettings.upscaling?.sharpening ?? 0.3) * 100)]}
@@ -704,7 +713,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                           className="w-full"
                         />
                         <div className="flex justify-between text-[10px] text-text-muted mt-1">
-                          <span>None</span>
+                          <span>{t("common:labels.none")}</span>
                           <span>
                             {Math.round(
                               (customSettings.upscaling?.sharpening ?? 0.3) *
@@ -717,9 +726,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                       </div>
 
                       <p className="text-[10px] text-text-muted">
-                        Enhance quality when exporting to higher resolutions
-                        than source. Uses edge-directed interpolation for
-                        sharper details.
+                        {t("editor:exportDialog.descriptions.upscaling")}
                       </p>
                     </div>
                   )}
@@ -748,7 +755,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                     ) : (
                       <Gauge size={12} className="text-yellow-500" />
                     )}
-                    <span className="text-text-secondary">Est. time:</span>
+                    <span className="text-text-secondary">{t("editor:exportDialog.status.estimateTime")}</span>
                     <span className="font-medium text-text-primary">
                       {timeEstimate.formatted}
                     </span>
@@ -760,7 +767,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                       className="flex items-center gap-1 px-2 py-1 text-[10px] text-primary bg-primary/10 rounded hover:bg-primary/20 transition-colors"
                     >
                       <Zap size={10} />
-                      Get accurate estimate
+                      {t("editor:exportDialog.status.getAccurateEstimate")}
                     </button>
                   )}
 
@@ -772,7 +779,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                           style={{ width: `${benchmarkProgress.progress * 100}%` }}
                         />
                       </div>
-                      <span>Testing...</span>
+                      <span>{t("editor:exportDialog.status.testing")}</span>
                     </div>
                   )}
                 </div>
@@ -782,24 +789,26 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
             {showDeviceInfo && (
               <div className="mt-3 pt-3 border-t border-border/50 grid grid-cols-3 gap-4 text-[10px]">
                 <div>
-                  <span className="text-text-muted">CPU</span>
+                  <span className="text-text-muted">{t("editor:exportDialog.status.cpu")}</span>
                   <p className="text-text-primary font-medium">
-                    {deviceProfile.cpu.cores} cores
+                    {t("editor:exportDialog.status.cores", { count: deviceProfile.cpu.cores })}
                   </p>
                 </div>
                 <div>
-                  <span className="text-text-muted">GPU</span>
+                  <span className="text-text-muted">{t("editor:exportDialog.status.gpu")}</span>
                   <p className="text-text-primary font-medium truncate" title={deviceProfile.gpu.renderer}>
                     {deviceProfile.gpu.renderer !== "Unknown"
                       ? deviceProfile.gpu.renderer.replace(/ANGLE \(|, .*\)/g, "").replace(/Direct3D11.*$/g, "").trim()
-                      : "Unknown"}
+                      : t("editor:exportDialog.status.unknown")}
                   </p>
                   <p className="text-[9px] text-text-muted">
-                    {deviceProfile.gpu.hasHardwareEncoding ? "HW Encode" : "Software only"}
+                    {deviceProfile.gpu.hasHardwareEncoding
+                      ? t("editor:exportDialog.status.hardwareEncode")
+                      : t("editor:exportDialog.status.softwareOnly")}
                   </p>
                 </div>
                 <div>
-                  <span className="text-text-muted">Codecs</span>
+                  <span className="text-text-muted">{t("editor:exportDialog.status.codecs")}</span>
                   <div className="flex gap-1 flex-wrap">
                     {codecRecommendations.slice(0, 3).map((rec) => (
                       <span
@@ -843,7 +852,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
                 {timeEstimate && deviceProfile?.encoding[customSettings.codec as keyof typeof deviceProfile.encoding]?.hardware && (
                   <div className="flex items-center gap-1 text-green-500">
                     <Zap size={12} />
-                    Hardware accelerated
+                    {t("editor:exportDialog.status.hardwareAccelerated")}
                   </div>
                 )}
               </>
@@ -851,14 +860,14 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
           </div>
           <div className="flex items-center gap-2">
             <Button variant="ghost" onClick={onClose}>
-              Cancel
+              {t("common:buttons.cancel")}
             </Button>
             <Button
               onClick={handleExport}
               disabled={activeTab === "presets" && !selectedPreset}
             >
               <Play size={16} />
-              Start Export
+              {t("editor:exportDialog.actions.start")}
             </Button>
           </div>
         </div>
diff --git a/apps/web/src/components/editor/SaveTemplateDialog.tsx b/apps/web/src/components/editor/SaveTemplateDialog.tsx
index 97c8d8c0..42f392ed 100644
--- a/apps/web/src/components/editor/SaveTemplateDialog.tsx
+++ b/apps/web/src/components/editor/SaveTemplateDialog.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback } from "react";
 import { Upload, Cloud, HardDrive, Check, AlertCircle } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
   Dialog,
   DialogContent,
@@ -46,6 +47,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
   isOpen,
   onClose,
 }) => {
+  const { t } = useTranslation();
   const { project } = useProjectStore();
   const getTemplateEngine = useEngineStore((state) => state.getTemplateEngine);
   const getGraphicsEngine = useEngineStore((state) => state.getGraphicsEngine);
@@ -62,12 +64,12 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
 
   const handleSave = useCallback(async () => {
     if (!name.trim()) {
-      setError("Template name is required");
+      setError(t("editor:saveTemplateDialog.validation.nameRequired"));
       return;
     }
 
     if (!description.trim()) {
-      setError("Description is required");
+      setError(t("editor:saveTemplateDialog.validation.descriptionRequired"));
       return;
     }
 
@@ -150,6 +152,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
     getTemplateEngine,
     getGraphicsEngine,
     onClose,
+    t,
   ]);
 
   if (!isOpen) return null;
@@ -159,7 +162,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
       <DialogContent className="max-w-lg p-0 gap-0 bg-background border-border overflow-hidden">
         <DialogHeader className="p-4 border-b border-border space-y-0">
           <DialogTitle className="text-lg font-semibold text-text-primary">
-            Save as Template
+            {t("editor:saveTemplateDialog.title")}
           </DialogTitle>
         </DialogHeader>
 
@@ -168,7 +171,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
             <div className="flex items-center gap-2 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
               <Check size={16} className="text-green-400" />
               <span className="text-sm text-green-400">
-                Template saved successfully!
+                {t("editor:saveTemplateDialog.success")}
               </span>
             </div>
           )}
@@ -182,13 +185,13 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Template Name <span className="text-red-400">*</span>
+              {t("editor:saveTemplateDialog.fields.templateName")} <span className="text-red-400">*</span>
             </Label>
             <Input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder="My Awesome Template"
+              placeholder={t("editor:saveTemplateDialog.placeholders.templateName")}
               className="bg-background-secondary border-border text-text-primary"
               maxLength={50}
             />
@@ -199,12 +202,12 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Description <span className="text-red-400">*</span>
+              {t("editor:saveTemplateDialog.fields.description")} <span className="text-red-400">*</span>
             </Label>
             <textarea
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder="Describe what this template is for and how to use it..."
+              placeholder={t("editor:saveTemplateDialog.placeholders.description")}
               className="w-full px-3 py-2 text-sm bg-background-secondary border border-border rounded-lg text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
               rows={4}
               maxLength={500}
@@ -216,7 +219,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Category
+              {t("editor:saveTemplateDialog.fields.category")}
             </Label>
             <Select value={category} onValueChange={(value) => setCategory(value as TemplateCategory)}>
               <SelectTrigger className="w-full bg-background-secondary border-border text-text-primary">
@@ -234,33 +237,33 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Tags (comma-separated)
+              {t("editor:saveTemplateDialog.fields.tags")}
             </Label>
             <Input
               type="text"
               value={tags}
               onChange={(e) => setTags(e.target.value)}
-              placeholder="intro, animated, youtube"
+              placeholder={t("editor:saveTemplateDialog.placeholders.tags")}
               className="bg-background-secondary border-border text-text-primary"
             />
           </div>
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Author Name
+              {t("editor:saveTemplateDialog.fields.authorName")}
             </Label>
             <Input
               type="text"
               value={author}
               onChange={(e) => setAuthor(e.target.value)}
-              placeholder="Your name or username"
+              placeholder={t("editor:saveTemplateDialog.placeholders.authorName")}
               className="bg-background-secondary border-border text-text-primary"
             />
           </div>
 
           <div className="space-y-2">
             <Label className="text-xs font-medium text-text-secondary">
-              Save Location
+              {t("editor:saveTemplateDialog.fields.saveLocation")}
             </Label>
             <div className="grid grid-cols-2 gap-2">
               <button
@@ -272,7 +275,7 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
                 }`}
               >
                 <Cloud size={16} />
-                <span className="text-sm font-medium">Cloud</span>
+                <span className="text-sm font-medium">{t("editor:saveTemplateDialog.locations.cloud")}</span>
               </button>
               <button
                 onClick={() => setSaveLocation("local")}
@@ -283,20 +286,20 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
                 }`}
               >
                 <HardDrive size={16} />
-                <span className="text-sm font-medium">Local</span>
+                <span className="text-sm font-medium">{t("editor:saveTemplateDialog.locations.local")}</span>
               </button>
             </div>
             <p className="text-[10px] text-text-muted">
               {saveLocation === "cloud"
-                ? "Saved to cloud and accessible from any device"
-                : "Saved locally in your browser storage"}
+                ? t("editor:saveTemplateDialog.locations.cloudDescription")
+                : t("editor:saveTemplateDialog.locations.localDescription")}
             </p>
           </div>
         </div>
 
         <div className="flex items-center justify-end gap-2 p-4 border-t border-border">
           <Button variant="ghost" onClick={onClose} disabled={isSaving}>
-            Cancel
+            {t("common:buttons.cancel")}
           </Button>
           <Button
             onClick={handleSave}
@@ -305,12 +308,12 @@ export const SaveTemplateDialog: React.FC<SaveTemplateDialogProps> = ({
             {isSaving ? (
               <>
                 <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
-                Saving...
+                {t("editor:saveTemplateDialog.actions.saving")}
               </>
             ) : (
               <>
                 <Upload size={16} />
-                Save Template
+                {t("editor:saveTemplateDialog.actions.save")}
               </>
             )}
           </Button>
diff --git a/apps/web/src/components/editor/ScriptViewDialog.tsx b/apps/web/src/components/editor/ScriptViewDialog.tsx
index abfb69fc..62e86f0c 100644
--- a/apps/web/src/components/editor/ScriptViewDialog.tsx
+++ b/apps/web/src/components/editor/ScriptViewDialog.tsx
@@ -19,6 +19,7 @@ import {
   DialogDescription,
   Button,
 } from "@openreel/ui";
+import { useTranslation } from "react-i18next";
 import { useProjectStore } from "../../stores/project-store";
 import { toast } from "../../stores/notification-store";
 import { createProjectSerializer, createStorageEngine } from "@openreel/core";
@@ -35,6 +36,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
   isOpen,
   onClose,
 }) => {
+  const { t } = useTranslation();
   const { project } = useProjectStore();
   const [activeTab, setActiveTab] = useState<"export" | "import">("export");
   const [importJson, setImportJson] = useState("");
@@ -145,12 +147,12 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
       } else if (file) {
         setValidation({
           valid: false,
-          errors: ["Please upload a .json file"],
+          errors: [t("editor:scriptView.states.invalidFileType")],
           warnings: [],
         });
       }
     },
-    [handleFileUpload],
+    [handleFileUpload, t],
   );
 
   const handleValidate = useCallback(() => {
@@ -211,10 +213,10 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
             <FileCode size={20} className="text-primary" />
             <div>
               <DialogTitle className="text-lg font-semibold text-text-primary">
-                Project JSON
+                {t("editor:scriptView.title")}
               </DialogTitle>
               <DialogDescription className="text-xs text-text-muted">
-                Export or import project as JSON
+                {t("editor:scriptView.description")}
               </DialogDescription>
             </div>
           </div>
@@ -230,7 +232,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                 : "text-text-secondary hover:text-text-primary hover:bg-background-elevated"
             }`}
           >
-            Export JSON
+            {t("editor:scriptView.tabs.export")}
           </button>
           <button
             onClick={() => setActiveTab("import")}
@@ -240,7 +242,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                 : "text-text-secondary hover:text-text-primary hover:bg-background-elevated"
             }`}
           >
-            Import
+            {t("editor:scriptView.tabs.import")}
           </button>
         </div>
 
@@ -260,13 +262,13 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                       ) : (
                         <>
                           <Copy size={16} />
-                          Copy
+                          {t("common:buttons.copy")}
                         </>
                       )}
                     </Button>
                     <Button variant="outline" size="sm" onClick={handleDownload}>
                       <Download size={16} />
-                      Download JSON
+                      {t("editor:scriptView.actions.download")}
                     </Button>
                   </div>
 
@@ -292,7 +294,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                 <div className="flex-1 flex flex-col items-center justify-center gap-3 p-8 text-center">
                   <FileCode size={40} className="text-text-muted" />
                   <p className="text-sm text-text-secondary">
-                    No project data to export.
+                    {t("editor:scriptView.states.noProjectData")}
                   </p>
                 </div>
               )}
@@ -329,11 +331,11 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                 <div className="text-center">
                   <p className="text-sm text-text-primary font-medium">
                     {isDragging
-                      ? "Drop JSON file here"
-                      : "Drop a JSON file here or click to browse"}
+                      ? t("editor:scriptView.states.dropHere")
+                      : t("editor:scriptView.states.dropHereOrClick")}
                   </p>
                   <p className="text-xs text-text-muted mt-1">
-                    Accepts .json project files
+                    {t("editor:scriptView.states.acceptsProjectFiles")}
                   </p>
                 </div>
               </div>
@@ -343,7 +345,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                 <div className="flex items-center gap-2 p-3 bg-background-tertiary border border-border rounded-lg">
                   <FileCode size={16} className="text-text-secondary" />
                   <span className="text-sm text-text-primary flex-1">
-                    {importJson.length.toLocaleString()} characters loaded
+                    {t("editor:scriptView.states.charactersLoaded", { count: importJson.length.toLocaleString() })}
                   </span>
                   <Button
                     variant="outline"
@@ -353,7 +355,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                       setValidation(null);
                     }}
                   >
-                    Clear
+                    {t("common:buttons.clear")}
                   </Button>
                   <Button
                     variant="outline"
@@ -361,7 +363,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                     onClick={handleValidate}
                     disabled={isValidating}
                   >
-                    {isValidating ? "Validating..." : "Re-validate"}
+                    {isValidating ? t("editor:scriptView.states.validating") : t("editor:scriptView.actions.revalidate")}
                   </Button>
                 </div>
               )}
@@ -373,7 +375,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                     <div className="flex items-center gap-2 p-3 bg-primary/10 border border-primary/30 rounded-lg">
                       <CheckCircle2 size={16} className="text-primary" />
                       <span className="text-sm text-primary">
-                        Valid project JSON — ready to import
+                        {t("editor:scriptView.states.validProject")}
                       </span>
                     </div>
                   )}
@@ -382,7 +384,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                     <div className="p-3 bg-error/10 border border-error/30 rounded-lg space-y-1">
                       <div className="flex items-center gap-2 text-error font-medium text-sm">
                         <AlertCircle size={16} />
-                        Errors
+                        {t("common:messages.errors")}
                       </div>
                       <ul className="list-disc list-inside text-xs text-error/80 space-y-0.5">
                         {validation.errors.map((err, i) => (
@@ -396,7 +398,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                     <div className="p-3 bg-warning/10 border border-warning/30 rounded-lg space-y-1">
                       <div className="flex items-center gap-2 text-warning font-medium text-sm">
                         <AlertTriangle size={16} />
-                        Warnings
+                        {t("common:messages.warnings")}
                       </div>
                       <ul className="list-disc list-inside text-xs text-warning/80 space-y-0.5">
                         {validation.warnings.map((warning, i) => (
@@ -410,11 +412,10 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
                     validation.missingAssets.length > 0 && (
                       <div className="p-3 bg-background-tertiary border border-border rounded-lg space-y-1">
                         <div className="text-sm font-medium text-text-secondary">
-                          Missing Assets ({validation.missingAssets.length})
+                          {t("editor:scriptView.states.missingAssets")} ({validation.missingAssets.length})
                         </div>
                         <p className="text-xs text-text-muted">
-                          These assets will be imported as placeholders and can
-                          be replaced later.
+                          {t("editor:scriptView.states.missingAssetsHelp")}
                         </p>
                       </div>
                     )}
@@ -425,7 +426,7 @@ export const ScriptViewDialog: React.FC<ScriptViewDialogProps> = ({
               {importJson && (
                 <Button onClick={handleImport} disabled={!validation?.valid}>
                   <Upload size={16} />
-                  Import Project
+                  {t("editor:scriptView.actions.importProject")}
                 </Button>
               )}
             </div>
diff --git a/apps/web/src/components/editor/SearchModal.tsx b/apps/web/src/components/editor/SearchModal.tsx
index a4af8033..6eed1032 100644
--- a/apps/web/src/components/editor/SearchModal.tsx
+++ b/apps/web/src/components/editor/SearchModal.tsx
@@ -22,6 +22,7 @@ import {
   Eye,
   Sliders,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Dialog, DialogContent, Input } from "@openreel/ui";
 import { useUIStore } from "../../stores/ui-store";
 
@@ -281,6 +282,7 @@ export const SearchModal: React.FC<SearchModalProps> = ({
   isOpen,
   onClose,
 }) => {
+  const { t } = useTranslation();
   const [query, setQuery] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("all");
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -425,8 +427,10 @@ export const SearchModal: React.FC<SearchModalProps> = ({
             onChange={(e) => setQuery(e.target.value)}
             placeholder={
               selectedClipType
-                ? `Search effects for ${selectedClipType} clip...`
-                : "Search all effects and tools..."
+                ? t("editor:searchModal.placeholderForClip", {
+                    type: selectedClipType,
+                  })
+                : t("editor:searchModal.placeholderAll")
             }
             className="flex-1 bg-transparent border-0 text-text-primary focus-visible:ring-0"
           />
@@ -454,7 +458,7 @@ export const SearchModal: React.FC<SearchModalProps> = ({
                   : "text-text-secondary hover:text-text-primary hover:bg-background-elevated"
               }`}
             >
-              {cat.name}
+              {cat.id === "all" ? t("common:buttons.all") : cat.name}
             </button>
           ))}
         </div>
@@ -466,9 +470,11 @@ export const SearchModal: React.FC<SearchModalProps> = ({
                 size={32}
                 className="mx-auto mb-3 text-text-muted opacity-50"
               />
-              <p className="text-sm text-text-muted">No effects found</p>
+              <p className="text-sm text-text-muted">
+                {t("editor:searchModal.noEffectsFound")}
+              </p>
               <p className="text-xs text-text-muted mt-1">
-                Try a different search term or category
+                {t("editor:searchModal.tryDifferentSearchTermOrCategory")}
               </p>
             </div>
           ) : (
@@ -525,13 +531,12 @@ export const SearchModal: React.FC<SearchModalProps> = ({
 
         <div className="px-4 py-2 border-t border-border bg-background-tertiary/50 flex items-center justify-between">
           <div className="text-[10px] text-text-muted">
-            {filteredEffects.length} effect
-            {filteredEffects.length !== 1 ? "s" : ""} available
+            {t("editor:searchModal.effectsAvailable", { count: filteredEffects.length })}
           </div>
           <div className="flex items-center gap-3 text-[10px] text-text-muted">
-            <span>↑↓ Navigate</span>
-            <span>↵ Select</span>
-            <span>ESC Close</span>
+            <span>{`↑↓ ${t("editor:searchModal.navigate")}`}</span>
+            <span>{`↵ ${t("editor:searchModal.select")}`}</span>
+            <span>{`ESC ${t("common:buttons.close")}`}</span>
           </div>
         </div>
       </DialogContent>
diff --git a/apps/web/src/components/editor/dialogs/AspectRatioMatchDialog.tsx b/apps/web/src/components/editor/dialogs/AspectRatioMatchDialog.tsx
index d28f30ae..f1fe9d27 100644
--- a/apps/web/src/components/editor/dialogs/AspectRatioMatchDialog.tsx
+++ b/apps/web/src/components/editor/dialogs/AspectRatioMatchDialog.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Maximize2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
   Dialog,
   DialogContent,
@@ -28,6 +29,7 @@ export const AspectRatioMatchDialog: React.FC<AspectRatioMatchDialogProps> = ({
   onConfirm,
   onCancel,
 }) => {
+  const { t } = useTranslation();
   const videoAspect = (videoWidth / videoHeight).toFixed(2);
   const currentAspect = (currentWidth / currentHeight).toFixed(2);
 
@@ -40,9 +42,9 @@ export const AspectRatioMatchDialog: React.FC<AspectRatioMatchDialogProps> = ({
               <Maximize2 size={20} className="text-primary" />
             </div>
             <div>
-              <DialogTitle>Match Video Dimensions?</DialogTitle>
+              <DialogTitle>{t("editor:dialogs.aspectRatioMatch.title")}</DialogTitle>
               <DialogDescription className="mt-1">
-                The video you're adding has different dimensions than your current project settings.
+                {t("editor:dialogs.aspectRatioMatch.description")}
               </DialogDescription>
             </div>
           </div>
@@ -53,13 +55,15 @@ export const AspectRatioMatchDialog: React.FC<AspectRatioMatchDialogProps> = ({
             <div className="flex items-center justify-between p-3 rounded-lg bg-background-tertiary">
               <div>
                 <div className="text-xs text-text-tertiary mb-1">
-                  Video Dimensions
+                  {t("editor:dialogs.aspectRatioMatch.videoDimensions")}
                 </div>
                 <div className="text-sm font-medium text-text-primary">
                   {videoWidth} × {videoHeight}
                 </div>
                 <div className="text-xs text-text-tertiary mt-0.5">
-                  Aspect Ratio: {videoAspect}
+                  {t("editor:dialogs.aspectRatioMatch.aspectRatio", {
+                    value: videoAspect,
+                  })}
                 </div>
               </div>
             </div>
@@ -67,30 +71,31 @@ export const AspectRatioMatchDialog: React.FC<AspectRatioMatchDialogProps> = ({
             <div className="flex items-center justify-between p-3 rounded-lg bg-background-tertiary/50 border border-border/50">
               <div>
                 <div className="text-xs text-text-tertiary mb-1">
-                  Current Project
+                  {t("editor:dialogs.aspectRatioMatch.currentProject")}
                 </div>
                 <div className="text-sm font-medium text-text-primary">
                   {currentWidth} × {currentHeight}
                 </div>
                 <div className="text-xs text-text-tertiary mt-0.5">
-                  Aspect Ratio: {currentAspect}
+                  {t("editor:dialogs.aspectRatioMatch.aspectRatio", {
+                    value: currentAspect,
+                  })}
                 </div>
               </div>
             </div>
           </div>
 
           <p className="text-xs text-text-tertiary">
-            Updating the project dimensions will provide the best editing
-            experience and prevent cropping during export.
+            {t("editor:dialogs.aspectRatioMatch.summary")}
           </p>
         </div>
 
         <div className="flex gap-3">
           <Button variant="outline" className="flex-1" onClick={onCancel}>
-            Keep Current
+            {t("editor:dialogs.aspectRatioMatch.keepCurrent")}
           </Button>
           <Button className="flex-1" onClick={onConfirm}>
-            Match Video
+            {t("editor:dialogs.aspectRatioMatch.matchVideo")}
           </Button>
         </div>
       </DialogContent>
diff --git a/apps/web/src/components/editor/inspector/CropSection.tsx b/apps/web/src/components/editor/inspector/CropSection.tsx
index 302ef4de..b009a341 100644
--- a/apps/web/src/components/editor/inspector/CropSection.tsx
+++ b/apps/web/src/components/editor/inspector/CropSection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Crop, RotateCcw } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useProjectStore } from "../../../stores/project-store";
 import { useUIStore } from "../../../stores/ui-store";
 import type { Clip } from "@openreel/core";
@@ -9,6 +10,7 @@ interface CropSectionProps {
 }
 
 export const CropSection: React.FC<CropSectionProps> = ({ clip }) => {
+  const { t } = useTranslation();
   const updateClipTransform = useProjectStore(
     (state) => state.updateClipTransform,
   );
@@ -33,20 +35,22 @@ export const CropSection: React.FC<CropSectionProps> = ({ clip }) => {
         className="w-full py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-2"
       >
         <Crop size={14} />
-        {isCropped ? "Adjust Crop" : "Crop Video"}
+        {isCropped
+          ? t("editor:inspector.crop.adjust")
+          : t("editor:inspector.crop.action")}
       </button>
 
       {isCropped && (
         <>
           <div className="text-[9px] text-text-muted space-y-0.5 p-2 bg-background-tertiary rounded border border-border">
             <div className="flex justify-between">
-              <span>Crop Region:</span>
+              <span>{t("editor:inspector.crop.region")}</span>
               <span>
                 {Math.round(crop.width * 100)}% × {Math.round(crop.height * 100)}%
               </span>
             </div>
             <div className="flex justify-between">
-              <span>Position:</span>
+              <span>{t("editor:inspector.crop.position")}</span>
               <span>
                 ({Math.round(crop.x * 100)}%, {Math.round(crop.y * 100)}%)
               </span>
@@ -57,7 +61,7 @@ export const CropSection: React.FC<CropSectionProps> = ({ clip }) => {
             className="w-full py-2 text-xs text-text-secondary hover:text-text-primary bg-background-tertiary hover:bg-background-elevated border border-border rounded-lg transition-colors flex items-center justify-center gap-2"
           >
             <RotateCcw size={12} />
-            Reset Crop
+            {t("editor:inspector.crop.reset")}
           </button>
         </>
       )}
diff --git a/apps/web/src/components/editor/kieai/KieAIImageDialog.tsx b/apps/web/src/components/editor/kieai/KieAIImageDialog.tsx
index 7b53a22f..3f75eeca 100644
--- a/apps/web/src/components/editor/kieai/KieAIImageDialog.tsx
+++ b/apps/web/src/components/editor/kieai/KieAIImageDialog.tsx
@@ -7,6 +7,7 @@ import {
   DialogTitle,
   Button,
 } from "@openreel/ui";
+import { useTranslation } from "react-i18next";
 import {
   IMAGE_MODELS,
   type ImageModelId,
@@ -64,6 +65,7 @@ interface Props {
 }
 
 export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Props) {
+  const { t } = useTranslation();
   const [step, setStep] = useState<Step>("pick");
   const [selectedModel, setSelectedModel] = useState<ImageModelId | null>(null);
   const [errorMsg, setErrorMsg] = useState<string>("");
@@ -129,7 +131,7 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
           (uploaded as unknown as Record<string, string>)["url"] ||
           "";
         if (!uploadedUrl) {
-          throw new Error("Upload succeeded but returned no file URL. Check console for response.");
+          throw new Error(t("editor:kieaiDialog.errors.uploadMissingUrl"));
         }
       }
 
@@ -157,7 +159,7 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
           input = { ...qwen, image_url: uploadedUrl };
           break;
         default:
-          throw new Error("Unknown model");
+          throw new Error(t("editor:kieaiDialog.errors.unknownModel"));
       }
 
       console.log("[KieAI] createTask payload:", { model: selectedModel, input });
@@ -212,7 +214,7 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
       setErrorMsg(err instanceof Error ? err.message : String(err));
       setStep("error");
     }
-  }, [selectedModel, project, sourceFile, previewUrl, seedream, zimage, nanoBanana2, flux2, grok, qwen, addPlaceholderMedia, addTask, handleClose]);
+  }, [selectedModel, project, sourceFile, previewUrl, seedream, zimage, nanoBanana2, flux2, grok, qwen, addPlaceholderMedia, addTask, handleClose, t]);
 
   // ─── Derived display ──────────────────────────────────────────────────────
 
@@ -225,10 +227,10 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
       <DialogContent className="max-w-md">
         <DialogHeader>
           <DialogTitle>
-            {step === "pick" && "Create with KieAI"}
+            {step === "pick" && t("editor:kieaiDialog.title")}
             {step === "form" && `${modelLabel}`}
-            {step === "submitting" && "Submitting…"}
-            {step === "error" && "Submission Failed"}
+            {step === "submitting" && t("editor:kieaiDialog.submitting")}
+            {step === "error" && t("editor:kieaiDialog.submissionFailed")}
           </DialogTitle>
         </DialogHeader>
 
@@ -251,7 +253,7 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
               )}
               <div className="min-w-0">
                 <p className="truncate text-xs font-medium text-text-primary">{sourceFile.name}</p>
-                <p className="text-[10px] text-text-muted">Source image</p>
+                <p className="text-[10px] text-text-muted">{t("editor:kieaiDialog.sourceImage")}</p>
               </div>
             </div>
           )}
@@ -280,9 +282,9 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
           {step === "submitting" && (
             <div className="space-y-4 py-4 text-center">
               <div className="mx-auto h-10 w-10 animate-spin rounded-full border-4 border-border border-t-primary" />
-              <p className="text-sm text-text-secondary">Uploading & submitting task…</p>
+              <p className="text-sm text-text-secondary">{t("editor:kieaiDialog.uploading")}</p>
               <Button variant="outline" size="sm" onClick={() => { abortRef.current?.abort(); handleClose(); }}>
-                Cancel
+                {t("common:buttons.cancel")}
               </Button>
             </div>
           )}
@@ -294,10 +296,10 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
               </div>
               <div className="flex gap-2">
                 <Button variant="outline" className="flex-1" onClick={handleClose}>
-                  Close
+                  {t("common:buttons.close")}
                 </Button>
                 <Button className="flex-1" onClick={() => setStep("form")}>
-                  Try Again
+                  {t("common:buttons.tryAgain")}
                 </Button>
               </div>
             </div>
@@ -310,7 +312,7 @@ export function KieAIImageDialog({ open, onClose, sourceFile, previewUrl }: Prop
               onClick={handleBack}
               className="text-xs text-text-muted hover:text-text-primary transition-colors"
             >
-              ← Back to model selection
+              {t("editor:kieaiDialog.actions.backToModelSelection")}
             </button>
           </div>
         )}
diff --git a/apps/web/src/components/editor/settings/ApiKeysPanel.tsx b/apps/web/src/components/editor/settings/ApiKeysPanel.tsx
index 54b3a786..e82799dd 100644
--- a/apps/web/src/components/editor/settings/ApiKeysPanel.tsx
+++ b/apps/web/src/components/editor/settings/ApiKeysPanel.tsx
@@ -1,37 +1,37 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
-  Key,
-  Plus,
-  Trash2,
+  ExternalLink,
   Eye,
   EyeOff,
+  Key,
+  KeyRound,
   Lock,
-  Unlock,
-  ExternalLink,
+  Plus,
   Shield,
-  KeyRound,
+  Trash2,
+  Unlock,
 } from "lucide-react";
-import { Input } from "@openreel/ui";
-import { Button } from "@openreel/ui";
-import { useSettingsStore, SERVICE_REGISTRY } from "../../../stores/settings-store";
+import { useTranslation } from "react-i18next";
+import { Button, Input } from "@openreel/ui";
 import {
+  changeMasterPassword,
+  deleteSecret,
+  getSecret,
   isMasterPasswordSet,
   isSessionUnlocked,
-  setupMasterPassword,
-  unlockSession,
+  listSecrets,
   lockSession,
   saveSecret,
-  getSecret,
-  deleteSecret,
-  listSecrets,
-  changeMasterPassword,
+  setupMasterPassword,
+  unlockSession,
 } from "../../../services/secure-storage";
-import { MasterPasswordDialog } from "./MasterPasswordDialog";
 import { toast } from "../../../stores/notification-store";
+import { SERVICE_REGISTRY, useSettingsStore } from "../../../stores/settings-store";
+import { MasterPasswordDialog } from "./MasterPasswordDialog";
 
 export const ApiKeysPanel: React.FC = () => {
-  const { addConfiguredService, removeConfiguredService } =
-    useSettingsStore();
+  const { t } = useTranslation();
+  const { addConfiguredService, removeConfiguredService } = useSettingsStore();
 
   const [passwordSet, setPasswordSet] = useState(false);
   const [unlocked, setUnlocked] = useState(false);
@@ -58,7 +58,7 @@ export const ApiKeysPanel: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    refreshState();
+    void refreshState();
   }, [refreshState]);
 
   const handlePasswordSubmit = useCallback(
@@ -67,7 +67,10 @@ export const ApiKeysPanel: React.FC = () => {
         await setupMasterPassword(password);
         setPasswordDialogMode(null);
         await refreshState();
-        toast.success("Master password set", "Your API keys will be encrypted with AES-256-GCM.");
+        toast.success(
+          t("settings:apiKeys.masterPasswordSet"),
+          t("settings:apiKeys.apiKeysEncrypted"),
+        );
         return true;
       }
 
@@ -76,7 +79,10 @@ export const ApiKeysPanel: React.FC = () => {
         if (success) {
           setPasswordDialogMode(null);
           await refreshState();
-          toast.success("Session unlocked", "You can now manage API keys.");
+          toast.success(
+            t("settings:apiKeys.sessionUnlocked"),
+            t("settings:apiKeys.manageApiKeys"),
+          );
         }
         return success;
       }
@@ -86,14 +92,17 @@ export const ApiKeysPanel: React.FC = () => {
         if (success) {
           setPasswordDialogMode(null);
           await refreshState();
-          toast.success("Password changed", "All keys have been re-encrypted.");
+          toast.success(
+            t("settings:apiKeys.passwordChanged"),
+            t("settings:apiKeys.keysReEncrypted"),
+          );
         }
         return success;
       }
 
       return false;
     },
-    [passwordDialogMode, refreshState],
+    [passwordDialogMode, refreshState, t],
   );
 
   const handleSaveKey = useCallback(
@@ -109,12 +118,18 @@ export const ApiKeysPanel: React.FC = () => {
         setNewKeyValue("");
         setAddingService(null);
         await refreshState();
-        toast.success(`${service.label} key saved`, "API key encrypted and stored.");
+        toast.success(
+          t("settings:apiKeys.serviceKeySaved", { service: service.label }),
+          t("settings:apiKeys.encryptedAndStored"),
+        );
       } catch (err) {
-        toast.error("Failed to save", err instanceof Error ? err.message : "Unknown error");
+        toast.error(
+          t("settings:apiKeys.failedToSave"),
+          err instanceof Error ? err.message : t("settings:security.validation.unknownError"),
+        );
       }
     },
-    [newKeyValue, addConfiguredService, refreshState],
+    [addConfiguredService, newKeyValue, refreshState, t],
   );
 
   const handleDeleteKey = useCallback(
@@ -129,30 +144,41 @@ export const ApiKeysPanel: React.FC = () => {
           return next;
         });
         await refreshState();
-        toast.success(`${service?.label ?? serviceId} key removed`);
+        toast.success(
+          t("settings:apiKeys.serviceKeyRemoved", { service: service?.label ?? serviceId }),
+        );
       } catch (err) {
-        toast.error("Failed to delete", err instanceof Error ? err.message : "Unknown error");
+        toast.error(
+          t("settings:apiKeys.failedToDelete"),
+          err instanceof Error ? err.message : t("settings:security.validation.unknownError"),
+        );
       }
     },
-    [removeConfiguredService, refreshState],
+    [refreshState, removeConfiguredService, t],
   );
 
-  const handleRevealKey = useCallback(async (serviceId: string) => {
-    if (revealedKeys[serviceId]) {
-      setShowKey((prev) => ({ ...prev, [serviceId]: !prev[serviceId] }));
-      return;
-    }
+  const handleRevealKey = useCallback(
+    async (serviceId: string) => {
+      if (revealedKeys[serviceId]) {
+        setShowKey((prev) => ({ ...prev, [serviceId]: !prev[serviceId] }));
+        return;
+      }
 
-    try {
-      const value = await getSecret(serviceId);
-      if (value) {
-        setRevealedKeys((prev) => ({ ...prev, [serviceId]: value }));
-        setShowKey((prev) => ({ ...prev, [serviceId]: true }));
+      try {
+        const value = await getSecret(serviceId);
+        if (value) {
+          setRevealedKeys((prev) => ({ ...prev, [serviceId]: value }));
+          setShowKey((prev) => ({ ...prev, [serviceId]: true }));
+        }
+      } catch (err) {
+        toast.error(
+          t("settings:apiKeys.failedToDecrypt"),
+          err instanceof Error ? err.message : t("settings:security.validation.unknownError"),
+        );
       }
-    } catch (err) {
-      toast.error("Failed to decrypt", err instanceof Error ? err.message : "Unknown error");
-    }
-  }, [revealedKeys]);
+    },
+    [revealedKeys, t],
+  );
 
   const handleLock = useCallback(() => {
     lockSession();
@@ -174,15 +200,14 @@ export const ApiKeysPanel: React.FC = () => {
           <Shield size={32} className="text-primary" />
         </div>
         <h3 className="text-lg font-medium text-text-primary mb-2">
-          Secure API Key Storage
+          {t("settings:security.secureApiKeyStorage")}
         </h3>
         <p className="text-sm text-text-muted mb-6 max-w-sm">
-          Set up a master password to encrypt and store your API keys locally.
-          Keys are encrypted with AES-256-GCM and never leave your browser.
+          {t("settings:security.setupMasterPasswordDescription")}
         </p>
         <Button onClick={() => setPasswordDialogMode("setup")}>
           <KeyRound size={16} className="mr-2" />
-          Set Up Master Password
+          {t("settings:security.setupMasterPassword")}
         </Button>
 
         {passwordDialogMode && (
@@ -205,14 +230,14 @@ export const ApiKeysPanel: React.FC = () => {
           <Lock size={32} className="text-amber-500" />
         </div>
         <h3 className="text-lg font-medium text-text-primary mb-2">
-          Session Locked
+          {t("settings:security.sessionLocked")}
         </h3>
         <p className="text-sm text-text-muted mb-6 max-w-sm">
-          Enter your master password to view and manage API keys.
+          {t("settings:security.unlockDescription")}
         </p>
         <Button onClick={() => setPasswordDialogMode("unlock")}>
           <Unlock size={16} className="mr-2" />
-          Unlock
+          {t("settings:security.unlock")}
         </Button>
 
         {passwordDialogMode && (
@@ -235,7 +260,7 @@ export const ApiKeysPanel: React.FC = () => {
         <div className="flex items-center gap-2 text-sm text-text-muted">
           <Shield size={14} className="text-primary" />
           <span>
-            {storedKeys.length} key{storedKeys.length !== 1 ? "s" : ""} stored
+            {t("settings:apiKeys.keysStored", { count: storedKeys.length })}
           </span>
         </div>
         <div className="flex items-center gap-2">
@@ -245,11 +270,11 @@ export const ApiKeysPanel: React.FC = () => {
             onClick={() => setPasswordDialogMode("change")}
           >
             <Key size={14} className="mr-1" />
-            Change Password
+            {t("settings:security.changePassword")}
           </Button>
           <Button variant="outline" size="sm" onClick={handleLock}>
             <Lock size={14} className="mr-1" />
-            Lock
+            {t("settings:security.lock")}
           </Button>
         </div>
       </div>
@@ -286,14 +311,14 @@ export const ApiKeysPanel: React.FC = () => {
                   <button
                     onClick={() => handleRevealKey(stored.id)}
                     className="p-1.5 rounded hover:bg-background-tertiary text-text-muted hover:text-text-primary transition-colors"
-                    title={isRevealed ? "Hide key" : "Show key"}
+                    title={isRevealed ? t("settings:apiKeys.hideKey") : t("settings:apiKeys.showKey")}
                   >
                     {isRevealed ? <EyeOff size={14} /> : <Eye size={14} />}
                   </button>
                   <button
                     onClick={() => handleDeleteKey(stored.id)}
                     className="p-1.5 rounded hover:bg-error/10 text-text-muted hover:text-error transition-colors"
-                    title="Delete key"
+                    title={t("settings:apiKeys.deleteKey")}
                   >
                     <Trash2 size={14} />
                   </button>
@@ -313,8 +338,8 @@ export const ApiKeysPanel: React.FC = () => {
               </div>
 
               <div className="text-[10px] text-text-muted mt-2">
-                Added {new Date(stored.createdAt).toLocaleDateString()} &middot;
-                Updated {new Date(stored.updatedAt).toLocaleDateString()}
+                {t("settings:apiKeys.added")} {new Date(stored.createdAt).toLocaleDateString()} &middot;
+                {t("settings:apiKeys.updated")} {new Date(stored.updatedAt).toLocaleDateString()}
               </div>
             </div>
           );
@@ -327,15 +352,16 @@ export const ApiKeysPanel: React.FC = () => {
           <div className="flex items-center gap-2 mb-3">
             <Plus size={14} className="text-primary" />
             <span className="text-sm font-medium text-text-primary">
-              Add{" "}
-              {SERVICE_REGISTRY.find((s) => s.id === addingService)?.label} Key
+              {t("settings:apiKeys.addServiceKey", {
+                service: SERVICE_REGISTRY.find((s) => s.id === addingService)?.label ?? t("settings:apiKeys.keyLabel"),
+              })}
             </span>
           </div>
           <Input
             type="password"
             value={newKeyValue}
             onChange={(e) => setNewKeyValue(e.target.value)}
-            placeholder="Paste your API key here"
+            placeholder={t("settings:apiKeys.pasteKeyPlaceholder")}
             autoFocus
             className="mb-3 font-mono text-xs"
           />
@@ -348,21 +374,21 @@ export const ApiKeysPanel: React.FC = () => {
                 setNewKeyValue("");
               }}
             >
-              Cancel
+              {t("common:buttons.cancel")}
             </Button>
             <Button
               size="sm"
               onClick={() => handleSaveKey(addingService)}
               disabled={!newKeyValue.trim()}
             >
-              Save Key
+              {t("settings:apiKeys.saveKey")}
             </Button>
           </div>
         </div>
       ) : availableServices.length > 0 ? (
         <div>
           <h4 className="text-sm font-medium text-text-secondary mb-3">
-            Add API Key
+            {t("settings:apiKeys.addApiKey")}
           </h4>
           <div className="grid gap-2">
             {availableServices.map((service) => (
diff --git a/apps/web/src/components/editor/settings/GeneralPanel.tsx b/apps/web/src/components/editor/settings/GeneralPanel.tsx
index 8ee8323a..5e2ab689 100644
--- a/apps/web/src/components/editor/settings/GeneralPanel.tsx
+++ b/apps/web/src/components/editor/settings/GeneralPanel.tsx
@@ -1,9 +1,11 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Switch } from "@openreel/ui";
 import { Label } from "@openreel/ui";
 import { useSettingsStore, SERVICE_REGISTRY, type TtsProvider, type LlmProvider, type AggregatorProvider } from "../../../stores/settings-store";
 
 export const GeneralPanel: React.FC = () => {
+  const { t } = useTranslation();
   const {
     autoSave,
     autoSaveInterval,
@@ -19,7 +21,7 @@ export const GeneralPanel: React.FC = () => {
   } = useSettingsStore();
 
   const ttsProviders = [
-    { id: "piper", label: "Piper (Free / Built-in)" },
+    { id: "piper", label: t("settings:general.piperBuiltIn") },
     ...SERVICE_REGISTRY.filter(
       (s) => s.id === "elevenlabs" || configuredServices.includes(s.id),
     ),
@@ -43,13 +45,13 @@ export const GeneralPanel: React.FC = () => {
     <div className="space-y-6 pb-4">
       {/* Auto-save */}
       <div className="space-y-4">
-        <h3 className="text-sm font-medium text-text-primary">Auto-Save</h3>
+        <h3 className="text-sm font-medium text-text-primary">{t("settings:general.autoSaveTitle")}</h3>
 
         <div className="flex items-center justify-between">
           <div>
-            <Label className="text-sm text-text-secondary">Enable auto-save</Label>
+            <Label className="text-sm text-text-secondary">{t("settings:general.enableAutoSave")}</Label>
             <p className="text-xs text-text-muted mt-0.5">
-              Automatically save your project at regular intervals
+              {t("settings:general.autoSaveDescription")}
             </p>
           </div>
           <Switch checked={autoSave} onCheckedChange={setAutoSave} />
@@ -58,19 +60,19 @@ export const GeneralPanel: React.FC = () => {
         {autoSave && (
           <div className="flex items-center gap-3">
             <Label className="text-sm text-text-secondary whitespace-nowrap">
-              Save every
+              {t("settings:general.saveEvery")}
             </Label>
             <select
               value={autoSaveInterval}
               onChange={(e) => setAutoSaveInterval(Number(e.target.value))}
               className="h-9 rounded-md border border-input bg-background px-3 text-sm"
             >
-              <option value={1}>1 minute</option>
-              <option value={2}>2 minutes</option>
-              <option value={5}>5 minutes</option>
-              <option value={10}>10 minutes</option>
-              <option value={15}>15 minutes</option>
-              <option value={30}>30 minutes</option>
+              <option value={1}>{t("settings:general.intervals.oneMinute")}</option>
+              <option value={2}>{t("settings:general.intervals.twoMinutes")}</option>
+              <option value={5}>{t("settings:general.intervals.fiveMinutes")}</option>
+              <option value={10}>{t("settings:general.intervals.tenMinutes")}</option>
+              <option value={15}>{t("settings:general.intervals.fifteenMinutes")}</option>
+              <option value={30}>{t("settings:general.intervals.thirtyMinutes")}</option>
             </select>
           </div>
         )}
@@ -81,17 +83,16 @@ export const GeneralPanel: React.FC = () => {
       {/* Default providers */}
       <div className="space-y-4">
         <h3 className="text-sm font-medium text-text-primary">
-          Default AI Providers
+          {t("settings:general.defaultProvidersTitle")}
         </h3>
         <p className="text-xs text-text-muted">
-          Choose which service to use by default for AI features.
-          Configure API keys in the &quot;API Keys&quot; tab first.
+          {t("settings:general.defaultProvidersDescription")}
         </p>
 
         <div className="space-y-3">
           <div className="flex items-center justify-between">
             <Label className="text-sm text-text-secondary">
-              Text to Speech/Voice To Speech/Sound Effects
+              {t("settings:general.ttsProvider")}
             </Label>
             <select
               value={defaultTtsProvider}
@@ -108,7 +109,7 @@ export const GeneralPanel: React.FC = () => {
 
           <div className="flex items-center justify-between">
             <Label className="text-sm text-text-secondary">
-              AI Assistant (LLM)
+              {t("settings:general.llmProvider")}
             </Label>
             <select
               value={defaultLlmProvider}
@@ -126,10 +127,10 @@ export const GeneralPanel: React.FC = () => {
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-sm text-text-secondary">
-                AI Aggregator
+                {t("settings:general.aggregator")}
               </Label>
               <p className="text-xs text-text-muted mt-0.5">
-                Video/image generation, upscaling, and creative AI tools
+                {t("settings:general.aggregatorDescription")}
               </p>
             </div>
             <select
diff --git a/apps/web/src/components/editor/settings/MasterPasswordDialog.tsx b/apps/web/src/components/editor/settings/MasterPasswordDialog.tsx
index bfe3a664..942a1416 100644
--- a/apps/web/src/components/editor/settings/MasterPasswordDialog.tsx
+++ b/apps/web/src/components/editor/settings/MasterPasswordDialog.tsx
@@ -1,15 +1,16 @@
-import React, { useState, useCallback } from "react";
-import { Lock, Eye, EyeOff, ShieldCheck, AlertTriangle } from "lucide-react";
+import React, { useCallback, useState } from "react";
+import { AlertTriangle, Eye, EyeOff, Lock, ShieldCheck } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
+  Button,
   Dialog,
   DialogContent,
-  DialogHeader,
-  DialogTitle,
   DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
 } from "@openreel/ui";
-import { Input } from "@openreel/ui";
-import { Button } from "@openreel/ui";
 
 interface MasterPasswordDialogProps {
   isOpen: boolean;
@@ -24,6 +25,7 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
   mode,
   onSubmit,
 }) => {
+  const { t } = useTranslation();
   const [password, setPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -47,64 +49,67 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
     onClose();
   }, [onClose, resetForm]);
 
-  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      setError(null);
 
-    if (mode === "setup") {
-      if (password.length < 8) {
-        setError("Password must be at least 8 characters");
-        return;
-      }
-      if (password !== confirmPassword) {
-        setError("Passwords do not match");
-        return;
+      if (mode === "setup") {
+        if (password.length < 8) {
+          setError(t("settings:security.validation.passwordTooShort"));
+          return;
+        }
+        if (password !== confirmPassword) {
+          setError(t("settings:security.validation.passwordsDoNotMatch"));
+          return;
+        }
       }
-    }
 
-    if (mode === "change") {
-      if (newPassword.length < 8) {
-        setError("New password must be at least 8 characters");
-        return;
+      if (mode === "change") {
+        if (newPassword.length < 8) {
+          setError(t("settings:security.validation.newPasswordTooShort"));
+          return;
+        }
+        if (newPassword !== confirmPassword) {
+          setError(t("settings:security.validation.newPasswordsDoNotMatch"));
+          return;
+        }
       }
-      if (newPassword !== confirmPassword) {
-        setError("New passwords do not match");
-        return;
-      }
-    }
 
-    setLoading(true);
-    try {
-      const success = await onSubmit(
-        password,
-        mode === "change" ? newPassword : undefined,
-      );
-      if (success) {
-        resetForm();
-      } else {
-        setError(
-          mode === "unlock"
-            ? "Incorrect password"
-            : "Operation failed. Check your current password.",
+      setLoading(true);
+      try {
+        const success = await onSubmit(
+          password,
+          mode === "change" ? newPassword : undefined,
         );
+        if (success) {
+          resetForm();
+        } else {
+          setError(
+            mode === "unlock"
+              ? t("settings:security.validation.incorrectPassword")
+              : t("settings:security.validation.operationFailed"),
+          );
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t("settings:security.validation.unknownError"));
+      } finally {
+        setLoading(false);
       }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "An error occurred");
-    } finally {
-      setLoading(false);
-    }
-  }, [mode, password, newPassword, confirmPassword, onSubmit, resetForm]);
+    },
+    [confirmPassword, mode, newPassword, onSubmit, password, resetForm, t],
+  );
 
   const titles = {
-    setup: "Set Master Password",
-    unlock: "Unlock Settings",
-    change: "Change Master Password",
+    setup: t("settings:security.setMasterPasswordTitle"),
+    unlock: t("settings:security.unlockSettingsTitle"),
+    change: t("settings:security.changeMasterPasswordTitle"),
   };
 
   const descriptions = {
-    setup: "Create a master password to encrypt your API keys. This password is never stored — only a verification hash is kept.",
-    unlock: "Enter your master password to access encrypted API keys.",
-    change: "Change your master password. All stored keys will be re-encrypted.",
+    setup: t("settings:security.setMasterPasswordBody"),
+    unlock: t("settings:security.unlockSettingsBody"),
+    change: t("settings:security.changeMasterPasswordBody"),
   };
 
   return (
@@ -122,14 +127,14 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
           {mode === "change" && (
             <div className="space-y-2">
               <label className="text-sm font-medium text-text-secondary">
-                Current Password
+                {t("settings:security.currentPassword")}
               </label>
               <div className="relative">
                 <Input
                   type={showPassword ? "text" : "password"}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter current password"
+                  placeholder={t("settings:security.enterCurrentPassword")}
                   autoFocus
                   className="pr-10"
                 />
@@ -147,7 +152,7 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
           {(mode === "setup" || mode === "unlock") && (
             <div className="space-y-2">
               <label className="text-sm font-medium text-text-secondary">
-                {mode === "setup" ? "Password" : "Master Password"}
+                {mode === "setup" ? t("settings:security.password") : t("settings:security.masterPassword")}
               </label>
               <div className="relative">
                 <Input
@@ -156,8 +161,8 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder={
                     mode === "setup"
-                      ? "Min. 8 characters"
-                      : "Enter master password"
+                      ? t("settings:security.minimumCharacters")
+                      : t("settings:security.enterCurrentPassword")
                   }
                   autoFocus
                   className="pr-10"
@@ -177,7 +182,9 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
             <>
               <div className="space-y-2">
                 <label className="text-sm font-medium text-text-secondary">
-                  {mode === "change" ? "New Password" : "Confirm Password"}
+                  {mode === "change"
+                    ? t("settings:security.newPassword")
+                    : t("settings:security.confirmPassword")}
                 </label>
                 <div className="relative">
                   <Input
@@ -190,8 +197,8 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
                     }
                     placeholder={
                       mode === "change"
-                        ? "Min. 8 characters"
-                        : "Repeat password"
+                        ? t("settings:security.minimumCharacters")
+                        : t("settings:security.repeatPassword")
                     }
                     className="pr-10"
                   />
@@ -208,13 +215,13 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
               {mode === "change" && (
                 <div className="space-y-2">
                   <label className="text-sm font-medium text-text-secondary">
-                    Confirm New Password
+                    {t("settings:security.confirmNewPassword")}
                   </label>
                   <Input
                     type={showNewPassword ? "text" : "password"}
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
-                    placeholder="Repeat new password"
+                    placeholder={t("settings:security.repeatNewPassword")}
                   />
                 </div>
               )}
@@ -231,11 +238,7 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
           {mode === "setup" && (
             <div className="flex items-start gap-2 text-xs text-text-muted bg-background-secondary px-3 py-2 rounded-lg">
               <ShieldCheck size={14} className="mt-0.5 shrink-0 text-primary" />
-              <span>
-                Your password is used to derive an encryption key via PBKDF2
-                (100k iterations). API keys are encrypted with AES-256-GCM.
-                If you forget this password, stored keys cannot be recovered.
-              </span>
+              <span>{t("settings:security.passwordGuidance")}</span>
             </div>
           )}
 
@@ -246,16 +249,16 @@ export const MasterPasswordDialog: React.FC<MasterPasswordDialogProps> = ({
               onClick={handleClose}
               disabled={loading}
             >
-              Cancel
+              {t("common:buttons.cancel")}
             </Button>
             <Button type="submit" disabled={loading}>
               {loading
-                ? "Processing..."
+                ? t("settings:security.processing")
                 : mode === "setup"
-                  ? "Set Password"
+                  ? t("settings:security.setPassword")
                   : mode === "unlock"
-                    ? "Unlock"
-                    : "Change Password"}
+                    ? t("settings:security.unlock")
+                    : t("settings:security.changePassword")}
             </Button>
           </DialogFooter>
         </form>
diff --git a/apps/web/src/components/editor/settings/SettingsDialog.tsx b/apps/web/src/components/editor/settings/SettingsDialog.tsx
index dc184c3a..064891ca 100644
--- a/apps/web/src/components/editor/settings/SettingsDialog.tsx
+++ b/apps/web/src/components/editor/settings/SettingsDialog.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { Settings, Key } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
   Dialog,
   DialogContent,
@@ -11,13 +12,13 @@ import { useSettingsStore, type SettingsTab } from "../../../stores/settings-sto
 import { GeneralPanel } from "./GeneralPanel";
 import { ApiKeysPanel } from "./ApiKeysPanel";
 
-const TABS: readonly { id: SettingsTab; label: string; icon: typeof Settings }[] = [
-  { id: "general", label: "General", icon: Settings },
-  { id: "api-keys", label: "API Keys", icon: Key },
-];
-
 export const SettingsDialog: React.FC = () => {
+  const { t } = useTranslation();
   const { settingsOpen, settingsTab, closeSettings, openSettings } = useSettingsStore();
+  const tabs: readonly { id: SettingsTab; label: string; icon: typeof Settings }[] = [
+    { id: "general", label: t("settings:tabs.general"), icon: Settings },
+    { id: "api-keys", label: t("settings:tabs.apiKeys"), icon: Key },
+  ];
 
   const setTab = useCallback((tab: SettingsTab) => {
     openSettings(tab);
@@ -29,15 +30,15 @@ export const SettingsDialog: React.FC = () => {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Settings size={18} className="text-primary" />
-            Settings
+            {t("settings:dialog.title")}
           </DialogTitle>
           <DialogDescription>
-            Configure preferences and manage API keys for external services.
+            {t("settings:dialog.description")}
           </DialogDescription>
         </DialogHeader>
 
-        <div role="tablist" aria-label="Settings" className="flex gap-1 p-1 bg-muted rounded-md">
-          {TABS.map((tab) => (
+        <div role="tablist" aria-label={t("settings:dialog.title")} className="flex gap-1 p-1 bg-muted rounded-md">
+          {tabs.map((tab) => (
             <button
               key={tab.id}
               role="tab"
diff --git a/apps/web/src/components/welcome/RecoveryDialog.tsx b/apps/web/src/components/welcome/RecoveryDialog.tsx
index 0aeeefda..1a7feb8a 100644
--- a/apps/web/src/components/welcome/RecoveryDialog.tsx
+++ b/apps/web/src/components/welcome/RecoveryDialog.tsx
@@ -11,6 +11,7 @@ import {
   CollapsibleTrigger,
   CollapsibleContent,
 } from "@openreel/ui";
+import { useTranslation } from "react-i18next";
 import type { AutoSaveMetadata } from "../../services/auto-save";
 
 interface RecoveryDialogProps {
@@ -20,22 +21,6 @@ interface RecoveryDialogProps {
   onClearAll?: () => void;
 }
 
-function formatTimeAgo(timestamp: number): string {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
-
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) {
-    const mins = Math.floor(seconds / 60);
-    return `${mins} ${mins === 1 ? "minute" : "minutes"} ago`;
-  }
-  if (seconds < 86400) {
-    const hours = Math.floor(seconds / 3600);
-    return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
-  }
-  const days = Math.floor(seconds / 86400);
-  return `${days} ${days === 1 ? "day" : "days"} ago`;
-}
-
 function formatDate(timestamp: number): string {
   return new Date(timestamp).toLocaleString(undefined, {
     month: "short",
@@ -51,12 +36,35 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
   onDismiss,
   onClearAll,
 }) => {
+  const { t } = useTranslation();
   const [showOlderSaves, setShowOlderSaves] = useState(false);
   const [selectedSave, setSelectedSave] = useState<string | null>(null);
   const [isClearing, setIsClearing] = useState(false);
   const mostRecent = saves[0];
   const olderSaves = saves.slice(1);
 
+  const formatTimeAgo = (timestamp: number): string => {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+
+    if (seconds < 60) return t("welcome:recovery.timeAgo.justNow");
+    if (seconds < 3600) {
+      const mins = Math.floor(seconds / 60);
+      return mins === 1
+        ? t("welcome:recovery.timeAgo.minute", { count: mins })
+        : t("welcome:recovery.timeAgo.minute", { count: mins });
+    }
+    if (seconds < 86400) {
+      const hours = Math.floor(seconds / 3600);
+      return hours === 1
+        ? t("welcome:recovery.timeAgo.hour", { count: hours })
+        : t("welcome:recovery.timeAgo.hour", { count: hours });
+    }
+    const days = Math.floor(seconds / 86400);
+    return days === 1
+      ? t("welcome:recovery.timeAgo.day", { count: days })
+      : t("welcome:recovery.timeAgo.day", { count: days });
+  };
+
   const handleClearAll = async () => {
     if (!onClearAll) return;
     setIsClearing(true);
@@ -80,10 +88,10 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
             </div>
             <div>
               <DialogTitle className="text-base font-semibold text-text-primary">
-                Recover Your Work
+                {t("welcome:recovery.title")}
               </DialogTitle>
               <DialogDescription className="text-sm text-text-secondary mt-0.5">
-                We found an unsaved project
+                {t("welcome:recovery.description")}
               </DialogDescription>
             </div>
           </div>
@@ -103,7 +111,7 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
             </div>
             <div className="flex items-center gap-2 text-sm text-text-muted">
               <Clock className="w-4 h-4 shrink-0" />
-              <span>Last saved {formatTimeAgo(mostRecent.timestamp)}</span>
+              <span>{t("welcome:recovery.lastSaved")} {formatTimeAgo(mostRecent.timestamp)}</span>
               <span className="text-text-muted/50">•</span>
               <span className="text-text-muted/70 truncate">
                 {formatDate(mostRecent.timestamp)}
@@ -117,14 +125,14 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
               onClick={onDismiss}
               className="flex-1"
             >
-              Start Fresh
+              {t("welcome:recovery.startFresh")}
             </Button>
             <Button
               onClick={() => handleRecover(mostRecent.id)}
               disabled={selectedSave === mostRecent.id}
               className="flex-1"
             >
-              {selectedSave === mostRecent.id ? "Recovering..." : "Recover Project"}
+              {selectedSave === mostRecent.id ? t("welcome:recovery.recovering") : t("welcome:recovery.recoverProject")}
             </Button>
           </div>
 
@@ -140,7 +148,7 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
                     className={`w-4 h-4 transition-transform duration-200 ${showOlderSaves ? "rotate-180" : ""}`}
                   />
                   <span>
-                    {olderSaves.length} older {olderSaves.length === 1 ? "save" : "saves"} available
+                    {t("welcome:recovery.olderSavesAvailable", { count: olderSaves.length })}
                   </span>
                 </CollapsibleTrigger>
                 {onClearAll && (
@@ -148,7 +156,7 @@ export const RecoveryDialog: React.FC<RecoveryDialogProps> = ({
                     onClick={handleClearAll}
                     disabled={isClearing}
                     className="p-1.5 rounded-lg text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-50"
-                    title="Clear all saved projects"
+                    title={t("welcome:recovery.clearAllSavedProjects")}
                   >
                     <Trash2 className="w-4 h-4" />
                   </button>
diff --git a/apps/web/src/components/welcome/TemplatePreviewModal.tsx b/apps/web/src/components/welcome/TemplatePreviewModal.tsx
index fb496cd4..6d20a211 100644
--- a/apps/web/src/components/welcome/TemplatePreviewModal.tsx
+++ b/apps/web/src/components/welcome/TemplatePreviewModal.tsx
@@ -28,6 +28,7 @@ import {
   Label,
   Slider,
 } from "@openreel/ui";
+import { useTranslation } from "react-i18next";
 import { useEngineStore } from "../../stores/engine-store";
 import { useProjectStore } from "../../stores/project-store";
 import type {
@@ -65,6 +66,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
   onClose,
   onApply,
 }) => {
+  const { t } = useTranslation();
   const getTemplateEngine = useEngineStore((state) => state.getTemplateEngine);
   const getTitleEngine = useEngineStore((state) => state.getTitleEngine);
   const loadProject = useProjectStore((state) => state.loadProject);
@@ -181,7 +183,11 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
 
       onApply();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to apply template");
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("welcome:templatePreview.errors.failedToApplyTemplate"),
+      );
     } finally {
       setIsApplying(false);
     }
@@ -193,6 +199,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
     values,
     onApply,
     track,
+    t,
   ]);
 
   const formatDuration = (seconds: number): string => {
@@ -217,7 +224,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
               </div>
               <div className="flex items-center gap-1.5 text-xs text-text-muted">
                 <Layers size={12} />
-                <span>{template.placeholders.length} editable fields</span>
+                <span>{template.placeholders.length} {t("welcome:templatePreview.editableFields")}</span>
               </div>
             </div>
           </DialogDescription>
@@ -249,7 +256,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
               {template.scenes && template.scenes.length > 0 && (
                 <div className="space-y-2">
                   <h3 className="text-xs font-medium text-text-muted uppercase tracking-wide">
-                    Scenes
+                    {t("welcome:templatePreview.scenes")}
                   </h3>
                   <div className="flex flex-wrap gap-2">
                     {template.scenes.map((scene) => (
@@ -276,7 +283,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
 
             <div className="space-y-4">
               <h3 className="text-sm font-medium text-text-primary">
-                Customize Template
+                {t("welcome:templatePreview.customizeTemplate")}
               </h3>
 
               {groupedPlaceholders.main.length > 0 && (
@@ -305,7 +312,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
                       size={12}
                       className={`transition-transform ${showAdvanced ? "rotate-90" : ""}`}
                     />
-                    Advanced Options ({groupedPlaceholders.advanced.length})
+                    {t("welcome:templatePreview.advancedOptions")} ({groupedPlaceholders.advanced.length})
                   </CollapsibleTrigger>
                   <CollapsibleContent className="mt-4 space-y-4 pl-4 border-l border-border">
                     {groupedPlaceholders.advanced.map((placeholder) => (
@@ -337,7 +344,7 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
 
         <div className="p-5 border-t border-border flex items-center justify-end gap-3 shrink-0">
           <Button variant="ghost" onClick={onClose}>
-            Cancel
+            {t("common:buttons.cancel")}
           </Button>
           <Button
             onClick={handleApply}
@@ -347,11 +354,11 @@ export const TemplatePreviewModal: React.FC<TemplatePreviewModalProps> = ({
             {isApplying ? (
               <>
                 <div className="w-4 h-4 border-2 border-black/30 border-t-black rounded-full animate-spin" />
-                Applying...
+                {t("welcome:templatePreview.applying")}
               </>
             ) : (
               <>
-                Use Template
+                {t("welcome:templatePreview.useTemplate")}
                 <ChevronRight size={16} />
               </>
             )}
@@ -373,6 +380,7 @@ const PlaceholderInput: React.FC<PlaceholderInputProps> = ({
   value,
   onChange,
 }) => {
+  const { t } = useTranslation();
   const Icon = PLACEHOLDER_ICONS[placeholder.type] || Type;
   const displayValue = value ?? placeholder.defaultValue ?? "";
 
@@ -445,7 +453,7 @@ const PlaceholderInput: React.FC<PlaceholderInputProps> = ({
               onCheckedChange={(checked) => onChange(checked)}
             />
             <Label className="text-sm text-text-secondary cursor-pointer">
-              {placeholder.description || "Enabled"}
+              {placeholder.description || t("common:labels.enabled")}
             </Label>
           </div>
         );
diff --git a/apps/web/src/components/welcome/WelcomeScreen.tsx b/apps/web/src/components/welcome/WelcomeScreen.tsx
index 2b8ce9f7..baa386db 100644
--- a/apps/web/src/components/welcome/WelcomeScreen.tsx
+++ b/apps/web/src/components/welcome/WelcomeScreen.tsx
@@ -8,6 +8,7 @@ import {
   Square,
   FolderOpen,
 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Button, Switch, Label } from "@openreel/ui";
 import { useProjectStore } from "../../stores/project-store";
 import { useUIStore } from "../../stores/ui-store";
@@ -21,8 +22,8 @@ import { useAnalytics, AnalyticsEvents } from "../../hooks/useAnalytics";
 interface FormatOption {
   id: string;
   preset: SocialMediaCategory;
-  label: string;
-  description: string;
+  labelKey: string;
+  descriptionKey: string;
   dimensions: string;
   icon: React.ElementType;
   gradient: string;
@@ -32,8 +33,8 @@ const FORMAT_OPTIONS: FormatOption[] = [
   {
     id: "vertical",
     preset: "tiktok",
-    label: "Vertical",
-    description: "TikTok, Reels, Shorts",
+    labelKey: "welcome:screen.formats.vertical.label",
+    descriptionKey: "welcome:screen.formats.vertical.description",
     dimensions: "1080 × 1920",
     icon: Smartphone,
     gradient: "from-violet-500/20 to-fuchsia-500/20",
@@ -41,8 +42,8 @@ const FORMAT_OPTIONS: FormatOption[] = [
   {
     id: "horizontal",
     preset: "youtube-video",
-    label: "Horizontal",
-    description: "YouTube, Vimeo, Web",
+    labelKey: "welcome:screen.formats.horizontal.label",
+    descriptionKey: "welcome:screen.formats.horizontal.description",
     dimensions: "1920 × 1080",
     icon: Monitor,
     gradient: "from-blue-500/20 to-cyan-500/20",
@@ -50,8 +51,8 @@ const FORMAT_OPTIONS: FormatOption[] = [
   {
     id: "square",
     preset: "instagram-post",
-    label: "Square",
-    description: "Instagram, Facebook",
+    labelKey: "welcome:screen.formats.square.label",
+    descriptionKey: "welcome:screen.formats.square.description",
     dimensions: "1080 × 1080",
     icon: Square,
     gradient: "from-orange-500/20 to-rose-500/20",
@@ -134,6 +135,7 @@ interface WelcomeScreenProps {
 }
 
 export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
+  const { t } = useTranslation();
   const setSkipWelcomeScreen = useUIStore(
     (state) => state.setSkipWelcomeScreen,
   );
@@ -150,7 +152,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
   const handleCreateProject = useCallback(
     (option: FormatOption) => {
       const preset = SOCIAL_MEDIA_PRESETS[option.preset];
-      createNewProject(`New ${option.label} Video`, {
+      createNewProject(`New ${t(option.labelKey)} Video`, {
         width: preset.width,
         height: preset.height,
         frameRate: preset.frameRate,
@@ -164,7 +166,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
       });
       navigate("editor");
     },
-    [createNewProject, navigate, track],
+    [createNewProject, navigate, t, track],
   );
 
   const handleTemplateApplied = useCallback(() => {
@@ -205,9 +207,11 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
             onClick={() => setViewMode("home")}
           >
             <ArrowRight className="rotate-180" size={16} />
-            Back
+            {t("common:buttons.back")}
           </Button>
-          <h2 className="text-sm font-medium text-text-primary">Templates</h2>
+          <h2 className="text-sm font-medium text-text-primary">
+            {t("welcome:screen.templates")}
+          </h2>
           <div className="w-16" />
         </header>
         <div className="flex-1 overflow-y-auto p-6">
@@ -227,10 +231,10 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
             onClick={() => setViewMode("home")}
           >
             <ArrowRight className="rotate-180" size={16} />
-            Back
+            {t("common:buttons.back")}
           </Button>
           <h2 className="text-sm font-medium text-text-primary">
-            Recent Projects
+            {t("welcome:screen.recentProjects")}
           </h2>
           <div className="w-16" />
         </header>
@@ -254,18 +258,18 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
                 <OpenReelLogo className="w-full h-full" />
               </div>
               <span className="text-xl font-semibold text-text-primary tracking-tight">
-                Open Reel Video
+                {t("welcome:screen.brandName")}
               </span>
             </div>
 
             <h1 className="text-4xl sm:text-5xl font-bold text-text-primary tracking-tight mb-3">
-              From idea to export.
+              {t("welcome:screen.headline")}
             </h1>
             <p className="text-xl text-text-secondary mb-8">
-              In your browser.
+              {t("welcome:screen.subheadline")}
             </p>
             <p className="text-base text-text-muted max-w-md">
-              Pick a format and start creating. You can change this anytime.
+              {t("welcome:screen.description")}
             </p>
           </div>
 
@@ -310,10 +314,10 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
                     </div>
 
                     <h3 className="text-lg font-semibold text-text-primary mb-1">
-                      {option.label}
+                      {t(option.labelKey)}
                     </h3>
                     <p className="text-sm text-text-muted mb-3">
-                      {option.description}
+                      {t(option.descriptionKey)}
                     </p>
                     <span className="text-xs font-mono text-text-muted/70 bg-background-tertiary px-2 py-1 rounded">
                       {option.dimensions}
@@ -328,7 +332,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
                     transition-all duration-200
                   `}
                   >
-                    Start creating
+                    {t("welcome:screen.startCreating")}
                     <ArrowRight size={14} />
                   </div>
                 </button>
@@ -343,7 +347,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
               className="rounded-xl"
             >
               <Layers size={16} />
-              Browse templates
+              {t("welcome:screen.browseTemplates")}
             </Button>
             <Button
               variant="outline"
@@ -351,7 +355,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
               className="rounded-xl"
             >
               <Clock size={16} />
-              Recent projects
+              {t("welcome:screen.recentProjects")}
             </Button>
             <Button
               variant="outline"
@@ -359,7 +363,7 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
               className="rounded-xl"
             >
               <FolderOpen size={16} />
-              Open editor
+              {t("welcome:screen.openEditor")}
             </Button>
           </div>
         </div>
@@ -375,18 +379,18 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ initialTab }) => {
               htmlFor="skip-welcome"
               className="text-xs text-text-muted cursor-pointer"
             >
-              Skip on startup
+              {t("welcome:screen.skipOnStartup")}
             </Label>
           </div>
 
           <span className="text-text-muted/30">·</span>
 
           <p className="text-xs text-text-muted/60">
-            Press{" "}
+            {t("welcome:screen.press")}{" "}
             <kbd className="px-1.5 py-0.5 bg-background-tertiary border border-border rounded text-text-muted font-mono text-[10px]">
               Esc
             </kbd>{" "}
-            to skip
+            {t("welcome:screen.toSkip")}
           </p>
         </div>
       </div>
diff --git a/apps/web/src/i18n.ts b/apps/web/src/i18n.ts
new file mode 100644
index 00000000..6f931cd9
--- /dev/null
+++ b/apps/web/src/i18n.ts
@@ -0,0 +1,30 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import common from "./locales/en/common.json";
+import editor from "./locales/en/editor.json";
+import settings from "./locales/en/settings.json";
+import welcome from "./locales/en/welcome.json";
+
+const resources = {
+  en: {
+    common,
+    editor,
+    settings,
+    welcome,
+  },
+} as const;
+
+if (!i18n.isInitialized) {
+  void i18n.use(initReactI18next).init({
+    resources,
+    lng: "en",
+    fallbackLng: "en",
+    ns: ["common", "editor", "settings", "welcome"],
+    defaultNS: "common",
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+}
+
+export default i18n;
diff --git a/apps/web/src/locales/en/common.json b/apps/web/src/locales/en/common.json
new file mode 100644
index 00000000..35e49153
--- /dev/null
+++ b/apps/web/src/locales/en/common.json
@@ -0,0 +1,19 @@
+{
+  "buttons": {
+    "all": "All",
+    "back": "Back",
+    "cancel": "Cancel",
+    "clear": "Clear",
+    "close": "Close",
+    "copy": "Copy",
+    "tryAgain": "Try Again"
+  },
+  "labels": {
+    "enabled": "Enabled",
+    "none": "None"
+  },
+  "messages": {
+    "errors": "Errors",
+    "warnings": "Warnings"
+  }
+}
diff --git a/apps/web/src/locales/en/editor.json b/apps/web/src/locales/en/editor.json
new file mode 100644
index 00000000..e7941192
--- /dev/null
+++ b/apps/web/src/locales/en/editor.json
@@ -0,0 +1,159 @@
+{
+  "dialogs": {
+    "aspectRatioMatch": {
+      "title": "Match Video Dimensions?",
+      "description": "The video you're adding has different dimensions than your current project settings.",
+      "videoDimensions": "Video Dimensions",
+      "currentProject": "Current Project",
+      "aspectRatio": "Aspect Ratio: {{value}}",
+      "summary": "Updating the project dimensions will provide the best editing experience and prevent cropping during export.",
+      "keepCurrent": "Keep Current",
+      "matchVideo": "Match Video"
+    }
+  },
+  "inspector": {
+    "crop": {
+      "adjust": "Adjust Crop",
+      "action": "Crop Video",
+      "region": "Crop Region:",
+      "position": "Position:",
+      "reset": "Reset Crop"
+    }
+  },
+  "exportDialog": {
+    "title": "Export Video",
+    "tabs": {
+      "presets": "Presets",
+      "custom": "Custom"
+    },
+    "recommendedForYourVideo": "For Your Video",
+    "aspectRatioLabels": {
+      "vertical": "Vertical (TikTok, Reels, Shorts)",
+      "square": "Square (Instagram Feed)",
+      "horizontal": "Horizontal (YouTube, Twitter)"
+    },
+    "fields": {
+      "format": "Format",
+      "codec": "Codec",
+      "resolution": "Resolution",
+      "frameRate": "Frame Rate",
+      "bitrate": "Bitrate (kbps)",
+      "quality": "Quality",
+      "audioSettings": "Audio Settings",
+      "qualityEnhancement": "Enhance Quality (Upscaling)",
+      "qualityMode": "Quality Mode",
+      "sharpening": "Sharpening"
+    },
+    "options": {
+      "vertical1080p": "Vertical 1080p",
+      "square1080": "Square 1080",
+      "fast": "Fast",
+      "balanced": "Balanced"
+    },
+    "qualityScale": {
+      "smaller": "Smaller",
+      "better": "Better"
+    },
+    "descriptions": {
+      "upscaling": "Enhance quality when exporting to higher resolutions than source. Uses edge-directed interpolation for sharper details."
+    },
+    "status": {
+      "estimateTime": "Est. time:",
+      "getAccurateEstimate": "Get accurate estimate",
+      "testing": "Testing...",
+      "hardwareAccelerated": "Hardware accelerated",
+      "cpu": "CPU",
+      "gpu": "GPU",
+      "codecs": "Codecs",
+      "unknown": "Unknown",
+      "hardwareEncode": "HW Encode",
+      "softwareOnly": "Software only",
+      "cores": "{{count}} cores",
+      "maxDuration": "Max {{seconds}}s"
+    },
+    "actions": {
+      "start": "Start Export"
+    }
+  },
+  "searchModal": {
+    "placeholderForClip": "Search effects for {{type}} clip...",
+    "placeholderAll": "Search all effects and tools...",
+    "noEffectsFound": "No effects found",
+    "tryDifferentSearchTermOrCategory": "Try a different search term or category",
+    "effectsAvailable_one": "{{count}} effect available",
+    "effectsAvailable_other": "{{count}} effects available",
+    "navigate": "Navigate",
+    "select": "Select"
+  },
+  "saveTemplateDialog": {
+    "title": "Save as Template",
+    "success": "Template saved successfully!",
+    "validation": {
+      "nameRequired": "Template name is required",
+      "descriptionRequired": "Description is required"
+    },
+    "fields": {
+      "templateName": "Template Name",
+      "description": "Description",
+      "category": "Category",
+      "tags": "Tags (comma-separated)",
+      "authorName": "Author Name",
+      "saveLocation": "Save Location"
+    },
+    "placeholders": {
+      "templateName": "My Awesome Template",
+      "description": "Describe what this template is for and how to use it...",
+      "tags": "intro, animated, youtube",
+      "authorName": "Your name or username"
+    },
+    "locations": {
+      "cloud": "Cloud",
+      "local": "Local",
+      "cloudDescription": "Saved to cloud and accessible from any device",
+      "localDescription": "Saved locally in your browser storage"
+    },
+    "actions": {
+      "saving": "Saving...",
+      "save": "Save Template"
+    }
+  },
+  "scriptView": {
+    "title": "Project JSON",
+    "description": "Export or import project as JSON",
+    "tabs": {
+      "export": "Export JSON",
+      "import": "Import"
+    },
+    "actions": {
+      "download": "Download JSON",
+      "revalidate": "Re-validate",
+      "importProject": "Import Project"
+    },
+    "states": {
+      "noProjectData": "No project data to export.",
+      "dropHere": "Drop JSON file here",
+      "dropHereOrClick": "Drop a JSON file here or click to browse",
+      "acceptsProjectFiles": "Accepts .json project files",
+      "charactersLoaded": "{{count}} characters loaded",
+      "validating": "Validating...",
+      "validProject": "Valid project JSON - ready to import",
+      "missingAssets": "Missing Assets",
+      "missingAssetsHelp": "These assets will be imported as placeholders and can be replaced later.",
+      "invalidFileType": "Please upload a .json file"
+    }
+  },
+  "kieaiDialog": {
+    "title": "Create with KieAI",
+    "sourceImage": "Source image",
+    "submitting": "Submitting...",
+    "submissionFailed": "Submission Failed",
+    "uploading": "Uploading & submitting task...",
+    "errors": {
+      "uploadMissingUrl": "Upload succeeded but returned no file URL. Check console for response.",
+      "unknownModel": "Unknown model"
+    },
+    "actions": {
+      "backToModelSelection": "Back to model selection"
+    }
+  }
+}
diff --git a/apps/web/src/locales/en/settings.json b/apps/web/src/locales/en/settings.json
new file mode 100644
index 00000000..90fe68e2
--- /dev/null
+++ b/apps/web/src/locales/en/settings.json
@@ -0,0 +1,95 @@
+{
+  "dialog": {
+    "title": "Settings",
+    "description": "Configure preferences and manage API keys"
+  },
+  "tabs": {
+    "general": "General",
+    "apiKeys": "API Keys"
+  },
+  "general": {
+    "autoSaveTitle": "Auto Save",
+    "enableAutoSave": "Enable Auto Save",
+    "autoSaveDescription": "Automatically save your project at regular intervals",
+    "saveEvery": "Save every",
+    "intervals": {
+      "oneMinute": "1 minute",
+      "twoMinutes": "2 minutes",
+      "fiveMinutes": "5 minutes",
+      "tenMinutes": "10 minutes",
+      "fifteenMinutes": "15 minutes",
+      "thirtyMinutes": "30 minutes"
+    },
+    "defaultProvidersTitle": "Default AI Providers",
+    "defaultProvidersDescription": "Choose which service to use by default for each feature",
+    "ttsProvider": "Text-to-Speech / Voice-to-Speech",
+    "llmProvider": "AI Assistant (LLM)",
+    "aggregator": "AI Aggregator",
+    "aggregatorDescription": "Video/image generation, upscaling, and creative tools",
+    "piperBuiltIn": "Piper (Free, built-in)"
+  },
+  "security": {
+    "secureApiKeyStorage": "Secure API Key Storage",
+    "setupMasterPasswordDescription": "Set up a master password to encrypt and protect your stored API keys.",
+    "setupMasterPassword": "Set Up Master Password",
+    "sessionLocked": "Session Locked",
+    "unlockDescription": "Enter your master password to view and manage your API keys.",
+    "unlock": "Unlock",
+    "changePassword": "Change Password",
+    "lock": "Lock",
+    "setMasterPasswordTitle": "Set Master Password",
+    "unlockSettingsTitle": "Unlock Settings",
+    "changeMasterPasswordTitle": "Change Master Password",
+    "setMasterPasswordBody": "Create a master password to encrypt your stored API keys.",
+    "unlockSettingsBody": "Enter your master password to access your encrypted API keys.",
+    "changeMasterPasswordBody": "Change your master password. All stored keys will be re-encrypted.",
+    "currentPassword": "Current Password",
+    "enterCurrentPassword": "Enter current password",
+    "password": "Password",
+    "masterPassword": "Master Password",
+    "newPassword": "New Password",
+    "confirmPassword": "Confirm Password",
+    "confirmNewPassword": "Confirm New Password",
+    "minimumCharacters": "Min. 8 characters",
+    "repeatPassword": "Repeat password",
+    "repeatNewPassword": "Repeat new password",
+    "passwordGuidance": "Your password is used to derive an encryption key via PBKDF2 (100k iterations). API keys are encrypted with AES-256-GCM. If you forget this password, stored keys cannot be recovered.",
+    "processing": "Processing...",
+    "setPassword": "Set Password",
+    "validation": {
+      "passwordTooShort": "Password must be at least 8 characters",
+      "passwordsDoNotMatch": "Passwords do not match",
+      "newPasswordTooShort": "New password must be at least 8 characters",
+      "newPasswordsDoNotMatch": "New passwords do not match",
+      "incorrectPassword": "Incorrect password",
+      "operationFailed": "Operation failed. Check your current password.",
+      "unknownError": "An error occurred"
+    }
+  },
+  "apiKeys": {
+    "keysStored_one": "{{count}} key stored",
+    "keysStored_other": "{{count}} keys stored",
+    "showKey": "Show key",
+    "hideKey": "Hide key",
+    "deleteKey": "Delete key",
+    "addServiceKey": "Add {{service}} key",
+    "keyLabel": "key",
+    "pasteKeyPlaceholder": "Paste your API key here",
+    "saveKey": "Save Key",
+    "addApiKey": "Add API Key",
+    "added": "Added",
+    "updated": "Updated",
+    "serviceKeySaved": "{{service}} key saved",
+    "serviceKeyRemoved": "{{service}} key removed",
+    "encryptedAndStored": "API key encrypted and stored",
+    "failedToSave": "Failed to save",
+    "failedToDelete": "Failed to delete",
+    "failedToDecrypt": "Failed to decrypt",
+    "masterPasswordSet": "Master password set",
+    "apiKeysEncrypted": "Your API keys will be encrypted",
+    "sessionUnlocked": "Session unlocked",
+    "manageApiKeys": "You can now manage API keys",
+    "passwordChanged": "Password changed",
+    "keysReEncrypted": "All keys have been re-encrypted"
+  }
+}
diff --git a/apps/web/src/locales/en/welcome.json b/apps/web/src/locales/en/welcome.json
new file mode 100644
index 00000000..aed8164e
--- /dev/null
+++ b/apps/web/src/locales/en/welcome.json
@@ -0,0 +1,61 @@
+{
+  "screen": {
+    "templates": "Templates",
+    "recentProjects": "Recent Projects",
+    "brandName": "Open Reel Video",
+    "headline": "From idea to export.",
+    "subheadline": "In your browser.",
+    "description": "Pick a format and start creating. You can change this anytime.",
+    "startCreating": "Start creating",
+    "browseTemplates": "Browse templates",
+    "openEditor": "Open editor",
+    "skipOnStartup": "Skip on startup",
+    "press": "Press",
+    "toSkip": "to skip",
+    "formats": {
+      "vertical": {
+        "label": "Vertical",
+        "description": "TikTok, Reels, Shorts"
+      },
+      "horizontal": {
+        "label": "Horizontal",
+        "description": "YouTube, Vimeo, Web"
+      },
+      "square": {
+        "label": "Square",
+        "description": "Instagram, Facebook"
+      }
+    }
+  },
+  "recovery": {
+    "title": "Recover Your Work",
+    "description": "We found an unsaved project",
+    "lastSaved": "Last saved",
+    "startFresh": "Start Fresh",
+    "recoverProject": "Recover Project",
+    "recovering": "Recovering...",
+    "olderSavesAvailable_one": "{{count}} older save available",
+    "olderSavesAvailable_other": "{{count}} older saves available",
+    "clearAllSavedProjects": "Clear all saved projects",
+    "timeAgo": {
+      "justNow": "just now",
+      "minute_one": "{{count}} minute ago",
+      "minute_other": "{{count}} minutes ago",
+      "hour_one": "{{count}} hour ago",
+      "hour_other": "{{count}} hours ago",
+      "day_one": "{{count}} day ago",
+      "day_other": "{{count}} days ago"
+    }
+  },
+  "templatePreview": {
+    "editableFields": "editable fields",
+    "scenes": "Scenes",
+    "customizeTemplate": "Customize Template",
+    "advancedOptions": "Advanced Options",
+    "applying": "Applying...",
+    "useTemplate": "Use Template",
+    "errors": {
+      "failedToApplyTemplate": "Failed to apply template"
+    }
+  }
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index cfa07159..6937f035 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -4,6 +4,7 @@ import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import App from "./App";
 import "./index.css";
+import "./i18n";
 import { registerServiceWorker } from "./services/service-worker";
 
 const POSTHOG_KEY = import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16b6fa61..784bcf62 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       framer-motion:
         specifier: ^12.23.24
         version: 12.23.24(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      i18next:
+        specifier: ^26.0.6
+        version: 26.0.6(typescript@5.9.3)
       lucide-react:
         specifier: ^0.555.0
         version: 0.555.0(react@18.3.1)
@@ -68,6 +71,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-i18next:
+        specifier: ^17.0.4
+        version: 17.0.4(i18next@26.0.6(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       tailwind-merge:
         specifier: ^3.4.0
         version: 3.4.0
@@ -104,7 +110,7 @@ importers:
         version: 8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.7.0(vite@5.4.21(@types/node@22.19.6))
+        version: 4.7.0(vite@5.4.21(@types/node@24.12.2))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.22(postcss@8.5.6)
@@ -134,10 +140,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.3.1
-        version: 5.4.21(@types/node@22.19.6)
+        version: 5.4.21(@types/node@24.12.2)
       vitest:
         specifier: ^1.6.0
-        version: 1.6.1(@types/node@22.19.6)(jsdom@24.1.3)
+        version: 1.6.1(@types/node@24.12.2)(jsdom@24.1.3)
       wrangler:
         specifier: ^3.114.17
         version: 3.114.17(@cloudflare/workers-types@4.20260117.0)
@@ -195,6 +201,9 @@ importers:
       gsap:
         specifier: ^3.14.2
         version: 3.14.2
+      i18next:
+        specifier: ^26.0.6
+        version: 26.0.6(typescript@5.9.3)
       lucide-react:
         specifier: ^0.555.0
         version: 0.555.0(react@18.3.1)
@@ -207,6 +216,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-i18next:
+        specifier: ^17.0.4
+        version: 17.0.4(i18next@26.0.6(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
       react-syntax-highlighter:
         specifier: ^16.1.0
         version: 16.1.0(react@18.3.1)
@@ -249,7 +261,7 @@ importers:
         version: 8.53.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.1
-        version: 4.7.0(vite@5.4.21(@types/node@22.19.6))
+        version: 4.7.0(vite@5.4.21(@types/node@24.12.2))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.22(postcss@8.5.6)
@@ -282,10 +294,10 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^5.3.1
-        version: 5.4.21(@types/node@22.19.6)
+        version: 5.4.21(@types/node@24.12.2)
       vitest:
         specifier: ^1.6.0
-        version: 1.6.1(@types/node@22.19.6)(jsdom@24.1.3)
+        version: 1.6.1(@types/node@24.12.2)(jsdom@24.1.3)
       wrangler:
         specifier: ^3.114.17
         version: 3.114.17(@cloudflare/workers-types@4.20260117.0)
@@ -328,7 +340,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^1.6.0
-        version: 1.6.1(@types/node@22.19.6)(jsdom@24.1.3)
+        version: 1.6.1(@types/node@24.12.2)(jsdom@24.1.3)
 
   packages/ui:
     dependencies:
@@ -502,6 +514,10 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.29.2':
+    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -1919,8 +1935,8 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@22.19.6':
-    resolution: {integrity: sha512-qm+G8HuG6hOHQigsi7VGuLjUVu6TtBo/F05zvX04Mw2uCg9Dv0Qxy3Qw7j41SidlTcl5D/5yg0SEZqOB+EqZnQ==}
+  '@types/node@24.12.2':
+    resolution: {integrity: sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==}
 
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
@@ -2650,6 +2666,9 @@ packages:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
 
+  html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -2662,6 +2681,14 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  i18next@26.0.6:
+    resolution: {integrity: sha512-A4U6eCXodIbrhf8EarRurB9/4ebyaurH4+fu4gig9bqxmpSt+fCAFm/GpRQDcN1Xzu/LdFCx4nYHsnM1edIIbg==}
+    peerDependencies:
+      typescript: ^5 || ^6
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -3171,6 +3198,22 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-i18next@17.0.4:
+    resolution: {integrity: sha512-hQipmK4EF0y6RO6tt6WuqnmWpWYEXmQUUzecmMBuNsIgYd3smXcG4GtYPWhvgxn0pqMOItKlEO8H24HCs5hc3g==}
+    peerDependencies:
+      i18next: '>= 26.0.1'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+      typescript: ^5 || ^6
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+      typescript:
+        optional: true
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -3453,8 +3496,8 @@ packages:
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
   undici@5.29.0:
     resolution: {integrity: sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==}
@@ -3572,6 +3615,10 @@ packages:
       jsdom:
         optional: true
 
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -3804,6 +3851,8 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
+  '@babel/runtime@7.29.2': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -4955,7 +5004,7 @@ snapshots:
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.4
+      '@babel/runtime': 7.29.2
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -5021,9 +5070,9 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@22.19.6':
+  '@types/node@24.12.2':
     dependencies:
-      undici-types: 6.21.0
+      undici-types: 7.16.0
 
   '@types/prismjs@1.26.5': {}
 
@@ -5158,7 +5207,7 @@ snapshots:
       '@typescript-eslint/types': 8.53.0
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@22.19.6))':
+  '@vitejs/plugin-react@4.7.0(vite@5.4.21(@types/node@24.12.2))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -5166,7 +5215,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 5.4.21(@types/node@22.19.6)
+      vite: 5.4.21(@types/node@24.12.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -5825,6 +5874,10 @@ snapshots:
     dependencies:
       whatwg-encoding: 3.1.1
 
+  html-parse-stringify@3.0.1:
+    dependencies:
+      void-elements: 3.1.0
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -5841,6 +5894,12 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  i18next@26.0.6(typescript@5.9.3):
+    dependencies:
+      '@babel/runtime': 7.29.2
+    optionalDependencies:
+      typescript: 5.9.3
+
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -6305,7 +6364,7 @@ snapshots:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 22.19.6
+      '@types/node': 24.12.2
       long: 5.3.2
 
   psl@1.15.0:
@@ -6328,6 +6387,17 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-i18next@17.0.4(i18next@26.0.6(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+    dependencies:
+      '@babel/runtime': 7.29.2
+      html-parse-stringify: 3.0.1
+      i18next: 26.0.6(typescript@5.9.3)
+      react: 18.3.1
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+      typescript: 5.9.3
+
   react-is@17.0.2: {}
 
   react-is@18.3.1: {}
@@ -6650,7 +6720,7 @@ snapshots:
 
   ufo@1.6.1: {}
 
-  undici-types@6.21.0: {}
+  undici-types@7.16.0: {}
 
   undici@5.29.0:
     dependencies:
@@ -6704,13 +6774,13 @@ snapshots:
 
   uuid@13.0.0: {}
 
-  vite-node@1.6.1(@types/node@22.19.6):
+  vite-node@1.6.1(@types/node@24.12.2):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.21(@types/node@22.19.6)
+      vite: 5.4.21(@types/node@24.12.2)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -6722,16 +6792,16 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.21(@types/node@22.19.6):
+  vite@5.4.21(@types/node@24.12.2):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.6
       rollup: 4.53.3
     optionalDependencies:
-      '@types/node': 22.19.6
+      '@types/node': 24.12.2
       fsevents: 2.3.3
 
-  vitest@1.6.1(@types/node@22.19.6)(jsdom@24.1.3):
+  vitest@1.6.1(@types/node@24.12.2)(jsdom@24.1.3):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -6750,11 +6820,11 @@ snapshots:
       strip-literal: 2.1.1
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.21(@types/node@22.19.6)
-      vite-node: 1.6.1(@types/node@22.19.6)
+      vite: 5.4.21(@types/node@24.12.2)
+      vite-node: 1.6.1(@types/node@24.12.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.19.6
+      '@types/node': 24.12.2
       jsdom: 24.1.3
     transitivePeerDependencies:
       - less
@@ -6766,6 +6836,8 @@ snapshots:
       - supports-color
       - terser
 
+  void-elements@3.1.0: {}
+
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0